base_ui/components/admin/modal/Share.vue

665 lines
15 KiB
Vue
Raw Normal View History

2025-02-20 06:22:41 +00:00
<template>
<!-- <div class="modal-dialog"> -->
<div class="modal-content">
<div class="popUp-tab__content tab-content share-modal__content">
<div class="share-modal__search-content">
<div class="share-modal__content">
<div class="share-modal__search">
<span>با </span>
<input
type="text"
placeholder="نام کاربر یا email@exaple.com"
id="searchForName"
v-model="query"
@keyup="showSearchResult"
/>
</div>
<div
id="user-search-recommend"
class="share-modal__search-recommend"
:class="{ show: suggestionMode }"
>
<div class="search-recommend">
<div
class="search-users__item d-flex justify-content-between align-items-center mx-2"
v-for="(user, i) in userSuggestions"
:key="'h' + i"
>
<div class="search-users__pic">
<img :src="userAvatar(user)" alt="" />
</div>
<div class="search-users__content">
<div class="search-users__name">
{{ user.full_name }}
</div>
<div class="search-users__id">@{{ user.username }}</div>
</div>
<div class="search-users__type">
<div class="order-select main-page__date-select">
<select
@change="addUser($event, user)"
class="form-control d-block"
>
<option selected disabled :value="undefined">
انتخاب نقش
</option>
<option
v-for="role in roles"
:key="role.id"
:value="role.id"
>
{{ role.title }}
</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- </div> -->
</template>
<script>
// import HttpService from "@services/httpService";
export default {
name: "sharemodal",
props: ["item", "itemType", "roles"],
mounted() {
// this.httpService = new HttpService();
this.httpService = useNuxtApp()["$http"];
},
data() {
return {
httpService: {},
newItemType: 0,
suggestionMode: false,
query: "",
userSuggestions: [],
userToAdd: [],
};
},
methods: {
// formData(url, data = []) {
// const formData = new FormData();
// for (const [key, value] of Object.entries(data)) {
// if (value !== undefined && value !== null) formData.append(key, value);
// }
// return axios.post(url, formData);
// },
showSearchResult() {
var vm = this;
let url = loginUrl() + "user/suggestion";
if (this.query.length > 2) {
this.httpService
.postRequest(url, { query: this.query })
.then((response) => {
var items = response.data;
vm.userSuggestions = items;
vm.suggestionMode = true;
});
} else {
vm.userSuggestions = [];
vm.suggestionMode = false;
}
},
deleteUser: function (index) {
this.userToAdd.splice(index, 1);
},
addUser(ev, item) {
this.userToAdd.push(item);
this.suggestionMode = false;
this.$emit("update-user-role", {
user_id: item.user_id,
role_id: +ev.target.value,
});
// this.addPerm(ev, item);
},
addPerm(ev, item) {
// var guid = this.item.guid;
// this.userToAdd.forEach(function (item) {
// ApiService.post(this, "perm/set", {
// pid: guid,
// act: "add",
// read: 1,
// write: 0,
// username: item.username,
// });
// });
},
},
};
</script>
<style lang="scss">
@import "../../../assets/permit/scss/permit.scss";
</style>
<style scoped lang="scss">
.share-modal {
height: 20em;
background-color: #fff;
top: 7em;
left: 2em;
}
.search-users__pic {
display: flex;
margin-left: 15px;
position: relative;
img {
width: 32px;
height: 32px;
border-radius: 50%;
overflow: hidden;
}
}
.share-modal__content{
width: 100%;
}
.share-modal__search-top {
background-color: #eee;
padding-bottom: 1em;
font-size: 15px;
font-weight: 500;
}
.share-modal__search-recommend {
opacity: 1;
display: block;
position: static;
visibility: visible;
height: calc(100% - 12.5em);
overflow: auto;
/* display: none; */
/* opacity: unset; */
/* visibility: hidden; */
/* top: 117px; */
/* right: 0px; */
/* width: 100%; */
/* background: white; */
/* -webkit-transition: all 0.3s ease-in-out; */
/* transition: all 0.3s ease-in-out; */
/* opacity: 0; */
/* visibility: hidden; */
/* display: none; */
/* z-index: 10; */
&.show {
position: static !important;
opacity: 1 !important;
display: block !important;
visibility: visible !important;
}
}
// .share-modal {
// width: 337px;
// height: 385px;
// background-color: #fff;
// border: 1px solid #bac4ce;
// border-radius: 20px;
// top: 63px;
// left: 253px;
// transform: unset;
// &__modal {
// .modal-dialog {
// transform: unset !important;
// transition: unset !important;
// }
// }
// &__content {
// position: relative;
// width: 337px;
// height: 385px;
// display: flex;
// flex-direction: column;
// }
// &__search-content {
// position: absolute;
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
// transition: all 0.3s ease-in-out;
// }
// &__search {
// border-bottom: 1px solid #f1f1f1;
// display: flex;
// align-items: center;
// padding-top: 15px;
// padding-bottom: 15px;
// span {
// font-size: 16px;
// // color: var(--color-2);
// width: 50px;
// display: flex;
// justify-content: center;
// i {
// cursor: pointer;
// color: #92a2b2;
// font-size: 24px;
// width: 70px;
// display: flex;
// justify-content: center;
// align-items: center;
// }
// }
// #get-back {
// width: 70px;
// }
// input {
// flex-grow: 2;
// border: unset;
// outline: unset;
// // color: var(--color-2);
// font-size: 14px;
// &::placeholder {
// color: #92a2b2;
// font-size: 14px;
// }
// }
// }
// &__add-person {
// width: 50px;
// display: flex;
// justify-content: center;
// i {
// font-size: 24px;
// -webkit-transition: all 0.5s ease-in-out;
// transition: all 0.5s ease-in-out;
// font-size: 23px;
// background: -webkit-linear-gradient(#a9bdc4 0%, #c6cfda 100%);
// background-clip: border-box;
// -webkit-background-clip: text;
// -webkit-text-fill-color: transparent;
// }
// &:hover {
// i {
// background: -webkit-linear-gradient(#00b6e3 0%, #81e6ff 100%);
// background-clip: border-box;
// -webkit-background-clip: text;
// -webkit-text-fill-color: transparent;
// }
// }
// }
// &__search-recommend {
// display: none;
// opacity: unset;
// visibility: hidden;
// position: absolute;
// top: 57px;
// right: 0px;
// width: 100%;
// height: calc(100% - 57px);
// background: white;
// transition: all 0.3s ease-in-out;
// opacity: 0;
// visibility: hidden;
// display: none;
// z-index: 10;
// .os-host {
// height: 100%;
// }
// .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden > .os-scrollbar-vertical {
// bottom: 0;
// right: 7px;
// top: 17px;
// width: 0px;
// }
// .os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
// background: rgba(0, 0, 0, 0.16);
// }
// }
// &__users {
// flex-grow: 1;
// max-height: 259px;
// .os-scrollbar-vertical {
// width: 0;
// }
// }
// &__icon {
// display: flex;
// justify-content: center;
// align-items: center;
// margin-bottom: 18px;
// img {
// width: 142px;
// padding-top: 42px;
// }
// }
// &__text {
// color: #92a2b2;
// font-size: 14px;
// padding-bottom: 37px;
// width: 246px;
// text-align: center;
// margin-right: auto;
// margin-left: auto;
// }
// &__search-content-footer {
// display: flex;
// align-items: flex-end;
// justify-content: space-between;
// padding-top: 15px;
// padding-bottom: 15px;
// border-top: 1px solid #bac4ce;
// padding-right: 22px;
// padding-left: 22px;
// }
// &__sign {
// display: flex;
// flex-direction: column;
// span {
// font-size: 12px;
// color: #92a2b2;
// display: block;
// margin-bottom: 2px;
// }
// a {
// // color: var(--color-1);
// font-size: 12px;
// }
// }
// &__settings {
// a {
// }
// }
// &__settings-btn {
// font-size: 14px;
// // color: var(--color-1);
// }
// &__settings-content {
// position: absolute;
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
// transition: all 0.3s ease-in-out;
// opacity: 0;
// visibility: hidden;
// display: none;
// }
// &__title {
// padding-top: 15px;
// padding-bottom: 15px;
// border-bottom: 1px solid #f1f1f1;
// padding-right: 22px;
// padding-left: 22px;
// h4 {
// font-size: 16px;
// }
// }
// &__form {
// padding-right: 22px;
// padding-left: 22px;
// &-question {
// font-size: 14px;
// font-weight: 500;
// text-shadow: 0 -0.75px #6b6b6b;
// margin-bottom: 17px;
// color: #444444;
// }
// &-item {
// padding-top: 17px;
// &:last-child {
// margin-bottom: 17px;
// }
// }
// &-radio-item {
// display: flex;
// align-items: center;
// &:not(:last-child) {
// margin-bottom: 20px;
// }
// input {
// }
// label {
// color: #444444;
// font-size: 14px;
// margin-right: 16px;
// margin-bottom: 0;
// }
// }
// &-btn {
// min-width: 57px;
// height: 32px;
// border-radius: 20px;
// display: flex;
// justify-content: center;
// align-items: center;
// margin-right: 10px;
// }
// &-radio {
// position: relative;
// input {
// position: absolute;
// opacity: 0;
// cursor: pointer;
// height: 20px;
// width: 20px;
// z-index: 5;
// }
// span {
// display: flex;
// height: 20px;
// width: 20px;
// border-radius: 50%;
// border: 2px solid #bac4ce;
// transition: all 0.3s ease-in-out;
// display: flex;
// justify-content: center;
// align-items: center;
// &::before {
// content: " ";
// width: 10px;
// height: 10px;
// border-radius: 50%;
// display: flex;
// background: linear-gradient(#3def90 0%, #1ed975 100%);
// opacity: 0;
// transition: all 0.3s ease-in-out;
// }
// }
// input:checked ~ span::before {
// opacity: 1;
// }
// }
// }
// &__form-btn--deactive {
// font-size: 14px;
// // color: var(--color-2);
// &:hover {
// opacity: 0.8;
// }
// }
// &__from-btn--active {
// // border: 2px solid var(--color-1);
// // color: var(--color-1);
// font-size: 14px;
// &:hover {
// color: white;
// // background: var(--color-1);
// }
// }
// &__setting-footer {
// margin-top: auto;
// border-top: 1px solid #f1f1f1;
// display: flex;
// align-items: center;
// justify-content: flex-end;
// padding: 16px;
// }
// &__people-search {
// background: #fff;
// position: absolute;
// top: 0;
// display: none;
// left: 0;
// width: 100%;
// height: 100%;
// transition: all 0.3s ease-in-out;
// opacity: 0;
// visibility: hidden;
// .os-host {
// height: 100%;
// }
// .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden > .os-scrollbar-vertical {
// bottom: 0;
// right: 7px;
// top: 17px;
// width: 0px;
// }
// .os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
// background: rgba(0, 0, 0, 0.16);
// }
// }
// &__user-search-content {
// opacity: unset;
// width: 100%;
// height: calc(100% - 57px);
// background: white;
// transition: all 0.3s ease-in-out;
// top: 57px;
// display: none;
// .os-host {
// height: 100%;
// }
// .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden > .os-scrollbar-vertical {
// bottom: 0;
// right: 7px;
// top: 17px;
// width: 0px;
// }
// .os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
// background: rgba(0, 0, 0, 0.16);
// }
// }
// &__users-footer {
// display: flex;
// flex-direction: column;
// }
// &__textarea {
// border-top: 1px solid #f1f1f1;
// padding-top: 12px;
// padding-bottom: 12px;
// padding-right: 22px;
// padding-left: 22px;
// }
// &__invite-row {
// border-top: 1px solid #f1f1f1;
// display: flex;
// align-items: center;
// padding-top: 17.5px;
// padding-bottom: 26px;
// justify-content: space-between;
// padding-right: 22px;
// padding-left: 22px;
// }
// &__select {
// font-size: 14px;
// .main-page__date-select .select-selected {
// border: unset;
// padding: 0;
// }
// .main-page__date-select .select-selected {
// height: 32px;
// }
// .select-items {
// width: 160px;
// }
// .main-page__date-select .select-items {
// top: unset;
// bottom: calc(5px + 100%);
// }
// }
// &__send-invite {
// a {
// display: flex;
// justify-content: center;
// align-items: center;
// min-width: 120px;
// border-radius: 20px;
// // border: 2px solid var(--color-1);
// height: 32px;
// font-size: 14px;
// &:hover {
// color: white;
// // background: var(--color-1);
// }
// }
// }
// }
</style>