451 lines
11 KiB
Vue
451 lines
11 KiB
Vue
<template>
|
|
<div class="user-search-list">
|
|
<form class="search-filter" role="search" @submit.prevent="sendQuery">
|
|
<div class="mb-3">
|
|
<div class="input-group">
|
|
<div class="input-group-append">
|
|
<span class="tavasi tavasi-Component-198--1"></span>
|
|
</div>
|
|
|
|
<input
|
|
ref="search-input"
|
|
dir="rtl"
|
|
v-model.trim="searchText"
|
|
type="search"
|
|
required
|
|
class="form-control"
|
|
id="search-query"
|
|
placeholder="جستجو..."
|
|
name="search-query"
|
|
aria-label="جستجو در اسناد، عناوین و واژگان"
|
|
aria-describedby="basic-addon1"
|
|
size="50"
|
|
@keyup="sendQuery()"
|
|
@keydown="onKeyDown()"
|
|
/>
|
|
<button
|
|
v-if="searchText.length"
|
|
@click="resetFormAndList"
|
|
type="button"
|
|
class="btn clear-search p-0"
|
|
>
|
|
<svg class="icon icon-Component-294--1">
|
|
<use xlink:href="#icon-Component-294--1"></use>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<div class="d-flex justify-content-between alert alert-secondary">
|
|
<div class="col-6">نام و نام خانوادگی</div>
|
|
<div class="col-4 d-flex justify-content-center">دسترسی</div>
|
|
<div class="col-2 me-3">حذف</div>
|
|
</div>
|
|
<div class="user-list">
|
|
<div
|
|
v-for="list in listMember"
|
|
class="d-flex justify-content-between alert alert-light col-12"
|
|
>
|
|
<div class="col-6">
|
|
{{ list.description }}
|
|
</div>
|
|
<div class="order-select main-page__date-select col-4">
|
|
<select @change="addUser( $event,list)" class="form-control d-block">
|
|
<option selected disabled :value="undefined">
|
|
{{ list.perm }}
|
|
</option>
|
|
<option v-for="role in roles" :key="role.id" :value="role.id">
|
|
{{ role.title }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-2 d-flex">
|
|
<!-- <span class="btn" title="ویرایش" @click="editMember(list)">
|
|
<svg class="icon edit-member icon-Component-242--1">
|
|
<use xlink:href="#icon-Component-242--1"></use>
|
|
</svg>
|
|
</span> -->
|
|
<span class="btn me-3" title="حذف" @click="deleteMember(list)">
|
|
<svg class="icon delete-member icon-Component-295--1">
|
|
<use xlink:href="#icon-Component-295--1"></use>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
item: "",
|
|
parentLoading: false,
|
|
searchResults: {
|
|
default() {
|
|
return [];
|
|
},
|
|
},
|
|
listMember: {
|
|
default: null,
|
|
},
|
|
},
|
|
watch: {
|
|
searchResults(newValu) {
|
|
this.users = newValu;
|
|
},
|
|
},
|
|
mounted() {
|
|
this.users = this.searchResults;
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
roles: [
|
|
{ title: "عادی", id: 1 },
|
|
{ title: "مشاهده", id: 10 },
|
|
{ title: "سرگروه", id: 500 },
|
|
{ title: "مالک", id: 1000 },
|
|
],
|
|
users: [],
|
|
typingTimer: 0,
|
|
doneTypingInterval: 1000,
|
|
searchText: "",
|
|
};
|
|
},
|
|
methods: {
|
|
selectUserAsAdmin(user) {
|
|
this.$emit("set-as-admin", user);
|
|
},
|
|
getGroupAvatar(user = undefined) {
|
|
try {
|
|
if (user) {
|
|
if (isValidHttpUrl(user.avatar)) return user.avatar;
|
|
else {
|
|
if ("name" in user) {
|
|
const nameArray = user.name?.split(" ");
|
|
if (nameArray?.length > 1) {
|
|
const initials =
|
|
nameArray[0].charAt(0) + nameArray[1].charAt(0);
|
|
return this.generateAvatarFromChars(initials);
|
|
} else {
|
|
const initials = nameArray[0].charAt(0);
|
|
return this.generateAvatarFromChars(initials);
|
|
}
|
|
} else if ("lastname" in user) {
|
|
const nameArray = user.lastname?.split(" ");
|
|
if (nameArray?.length > 1) {
|
|
const initials =
|
|
nameArray[0].charAt(0) + nameArray[1].charAt(0);
|
|
return this.generateAvatarFromChars(initials);
|
|
} else {
|
|
const initials = nameArray[0].charAt(0);
|
|
return this.generateAvatarFromChars(initials);
|
|
}
|
|
}
|
|
if ("username" in user) {
|
|
const nameArray = user.username?.split(" ");
|
|
if (nameArray?.length > 1) {
|
|
const initials =
|
|
nameArray[0].charAt(0) + nameArray[1].charAt(0);
|
|
return this.generateAvatarFromChars(initials);
|
|
} else {
|
|
const initials = nameArray[0].charAt(0);
|
|
return this.generateAvatarFromChars(initials);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} catch (err) {
|
|
return require("@assets/common/img/default.svg");
|
|
}
|
|
},
|
|
sendQuery() {
|
|
clearTimeout(this.typingTimer);
|
|
|
|
this.typingTimer = setTimeout(() => {
|
|
this.search();
|
|
}, this.doneTypingInterval);
|
|
},
|
|
onKeyDown() {
|
|
clearTimeout(this.typingTimer);
|
|
},
|
|
search() {
|
|
this.$emit("on-send", this.searchText);
|
|
},
|
|
resetFormAndList() {
|
|
this.searchText = "";
|
|
this.users = [];
|
|
},
|
|
deleteMember(list) {
|
|
this.$emit("delete-member", list);
|
|
},
|
|
addUser(event, item) {
|
|
this.$emit("edit-member", {
|
|
user_id: item.user_id,
|
|
id: item.id,
|
|
perm_type: +event.target.value,
|
|
});
|
|
// this.addPerm(ev, item);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.delete-member {
|
|
font-size: 0.8rem;
|
|
color: rgb(189, 61, 87);
|
|
}
|
|
.alert {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
%unread-box {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.btn {
|
|
padding: 0 0.2em;
|
|
margin: 0;
|
|
color: #888;
|
|
color: #888;
|
|
|
|
&:hover {
|
|
background-color: #ddd;
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
margin-left: 0.2em;
|
|
}
|
|
|
|
svg {
|
|
font-size: 0.7rem;
|
|
}
|
|
}
|
|
}
|
|
.user-search-list {
|
|
// max-width: 25em;
|
|
.search-filter {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
// position: absolute;
|
|
z-index: 999;
|
|
// top: 24px;
|
|
// background-color: #fff;
|
|
width: 100%;
|
|
justify-content: center;
|
|
// background-color: red;
|
|
.input-group {
|
|
border-radius: 1.6em;
|
|
border: 1px solid #eee;
|
|
}
|
|
|
|
.input-group-text {
|
|
// display: flex;
|
|
// align-items: center;
|
|
// justify-content: center;
|
|
font-size: 0.8rem;
|
|
// border: 1px solid #ddd;
|
|
}
|
|
|
|
.input-group-append {
|
|
.tavasi {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.4em;
|
|
}
|
|
|
|
.input-group-text {
|
|
// border-top-right-radius: 0.5em;
|
|
// border-bottom-right-radius: 0.5em;
|
|
// background-color: transparent;
|
|
}
|
|
}
|
|
.input-group-prepend {
|
|
position: relative;
|
|
.clear-search {
|
|
position: absolute;
|
|
right: -3em;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.input-group-text {
|
|
// background-color: transparent;
|
|
// border-top-left-radius: 0.5em;
|
|
// border-bottom-left-radius: 0.5em;
|
|
}
|
|
}
|
|
|
|
.form-control {
|
|
height: 2.5em;
|
|
border-color: transparent;
|
|
border-radius: 2.5em;
|
|
&::-webkit-search-decoration,
|
|
&::-webkit-search-cancel-button,
|
|
&::-webkit-search-results-button,
|
|
&::-webkit-search-results-decoration {
|
|
-webkit-appearance: none;
|
|
}
|
|
}
|
|
|
|
.close-search {
|
|
color: #7f8891;
|
|
}
|
|
}
|
|
|
|
.user-list {
|
|
height: calc(100dvh - 18em);
|
|
overflow-y: auto;
|
|
|
|
.group-item {
|
|
.group-row {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
margin-bottom: 0.3em;
|
|
flex: 1;
|
|
|
|
&.enable-hover:hover {
|
|
.group-picture-container {
|
|
// .context-menu-dropdown {
|
|
// display: flex;
|
|
// }
|
|
// .group-picture {
|
|
// display: none;
|
|
// }
|
|
}
|
|
.group-content {
|
|
background-color: #f0f0f0;
|
|
}
|
|
}
|
|
|
|
.group-picture-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
|
|
// margin-left: 0.5em;
|
|
|
|
border: 1px solid #ccc;
|
|
width: 2.3em;
|
|
height: 2.3em;
|
|
position: relative;
|
|
background-color: #fff;
|
|
|
|
.context-menu-dropdown {
|
|
display: none;
|
|
}
|
|
.group-picture {
|
|
object-fit: cover;
|
|
object-position: center;
|
|
overflow: hidden;
|
|
border-radius: 50%;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.group-content {
|
|
flex: 1;
|
|
border-radius: 0;
|
|
position: relative;
|
|
padding: 0.3em;
|
|
|
|
&:active,
|
|
&.active {
|
|
background-color: #d8f8fd;
|
|
}
|
|
|
|
.group-title-container {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
label {
|
|
color: #6f6f6f;
|
|
}
|
|
}
|
|
|
|
.group-description-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.group-unread-indicator {
|
|
font-size: 0.7rem;
|
|
background-color: #00b6e3;
|
|
font-family: "sahel-light";
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding-top: 0.4em;
|
|
}
|
|
.group-description {
|
|
color: #6f6f6f;
|
|
font-size: 0.8em;
|
|
margin: 0;
|
|
flex: 1;
|
|
text-align: right;
|
|
// @include textOverflow(15em);
|
|
}
|
|
}
|
|
|
|
.unread-button {
|
|
.unread-message-label {
|
|
font-size: 0.7rem;
|
|
color: #6f6f6f;
|
|
margin-left: 0.3em;
|
|
line-height: 1;
|
|
}
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
margin-bottom: 0.2em;
|
|
font-size: 0.9rem;
|
|
line-height: 1.2;
|
|
}
|
|
}
|
|
|
|
&.lobbies {
|
|
padding-right: 1.5em;
|
|
|
|
&.has-indicator::after {
|
|
left: auto;
|
|
right: 0em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.group-description-container .group-description {
|
|
max-width: 11em !important;
|
|
}
|
|
}
|
|
|
|
.unreads-box {
|
|
@extend %unread-box;
|
|
}
|
|
|
|
&.unReads:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
&:hover {
|
|
.unreads-box {
|
|
box-shadow: 0px 0px 5px 2px #ebebeb;
|
|
border-radius: 1em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|