302 lines
9.4 KiB
Vue
302 lines
9.4 KiB
Vue
|
<template>
|
|||
|
|
<div class="pages access-page p-3">
|
|||
|
|
<sub-header-with-select
|
|||
|
|
@open-form="toggleRolesPanel()"
|
|||
|
|
|
|||
|
|
:showProjectSelect="$attrs.showProjectSelect"
|
|||
|
|
title="تنظیم دسترسی کاربران">
|
|||
|
|
<!-- <button-->
|
|||
|
|
<!-- @click="toggleRolesPanel()"-->
|
|||
|
|
<!-- class="btn btn-outline-primary position-relative"-->
|
|||
|
|
<!-- type="button">-->
|
|||
|
|
<!-- اختصاص نقش جدید-->
|
|||
|
|
<!-- </button>-->
|
|||
|
|
</sub-header-with-select>
|
|||
|
|
|
|||
|
|
<div class="pages-content d-flex">
|
|||
|
|
<div class="table-responsive">
|
|||
|
|
<table class="table table-borderless table-hover">
|
|||
|
|
<thead>
|
|||
|
|
<th colspan="12" class="px-0">
|
|||
|
|
<form class="table-search-form" role="search">
|
|||
|
|
<div class="form-group">
|
|||
|
|
<div class="input-group">
|
|||
|
|
<div class="input-group-prepend">
|
|||
|
|
<span class="input-group-text">
|
|||
|
|
<svg class="" aria-hidden="true" focusable="false"
|
|||
|
|
data-prefix="fas" data-icon="search" role="img" xmlns="http://www.w3.org/2000/svg"
|
|||
|
|
viewBox="0 0 512 512" data-fa-i2svg="">
|
|||
|
|
<path fill="currentColor"
|
|||
|
|
d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<input
|
|||
|
|
v-model="searchForm.query"
|
|||
|
|
type="search"
|
|||
|
|
required
|
|||
|
|
class="form-control"
|
|||
|
|
id="search-query"
|
|||
|
|
placeholder="جستجو..."
|
|||
|
|
name="search-query"
|
|||
|
|
aria-label="جستجو در اسناد، عناوین و واژگان"
|
|||
|
|
aria-describedby="basic-addon1"
|
|||
|
|
size="50"
|
|||
|
|
>
|
|||
|
|
<div class="input-group-append">
|
|||
|
|
<button :class="{'show-reset-btn' : searchForm.query.length > 0}"
|
|||
|
|
type="button"
|
|||
|
|
class="input-group-text"
|
|||
|
|
id="basic-addon1">
|
|||
|
|
<i class="tavasi tavasi-Component-294--1"></i>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</th>
|
|||
|
|
</thead>
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th scope="col">#</th>
|
|||
|
|
<th scope="col">نام</th>
|
|||
|
|
<th scope="col">نقش</th>
|
|||
|
|
<th scope="col">تاریخ ثبت نام</th>
|
|||
|
|
<th scope="col">عملیات</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
<template v-if="userRoles.length">
|
|||
|
|
<tr v-for="({user,...item},index) in userRoles"
|
|||
|
|
:class="{'active': item.active ?? false }" :key="index">
|
|||
|
|
<th scope="row">{{ index + 1 }}</th>
|
|||
|
|
<td>
|
|||
|
|
<div class="user-info">
|
|||
|
|
<div class="user-info-avatar">
|
|||
|
|
<img :src="userAvatar(user)" :alt="fullName(user)">
|
|||
|
|
</div>
|
|||
|
|
<div class="user-info-details">
|
|||
|
|
<p class="name">
|
|||
|
|
{{ fullName(user) }}
|
|||
|
|
</p>
|
|||
|
|
<p class="username">
|
|||
|
|
@{{ user.username ?? 'بدون نام کاربری' }}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
<td><span>{{ item.role_name ?? '--' }}</span></td>
|
|||
|
|
<td><span>از {{ convertUnixToPersianDateTime(item.created_at) }}</span></td>
|
|||
|
|
<td>
|
|||
|
|
<button @click="toggleRolesPanel(index)" title="ویرایش"
|
|||
|
|
class="btn edit-btn"
|
|||
|
|
data-bs-toggle="modal"
|
|||
|
|
data-bs-target="#edit-paper">
|
|||
|
|
<i class="tavasi tavasi-Component-242--1"></i>
|
|||
|
|
</button>
|
|||
|
|
<!-- <button @click="deleteItem(item.id)" title="حذف"-->
|
|||
|
|
<!-- class="btn delete-btn"-->
|
|||
|
|
<!-- type="button"-->
|
|||
|
|
<!-- >-->
|
|||
|
|
<!-- <img class="" src="@assets/common/img/Component 295 – 1.svg" alt="حذف"/>-->
|
|||
|
|
<!-- </button>-->
|
|||
|
|
</td>
|
|||
|
|
|
|||
|
|
</tr>
|
|||
|
|
</template>
|
|||
|
|
<table-no-data v-else></table-no-data>
|
|||
|
|
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="side-panel" v-if="showPanel">
|
|||
|
|
<div class="side-panel-header">
|
|||
|
|
<h6 class="">
|
|||
|
|
مدیریت نقش ها
|
|||
|
|
</h6>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="side-panel-content ">
|
|||
|
|
<!-- <div class="mb-5">-->
|
|||
|
|
<!-- <label for="role_id">انتخاب بخش</label>-->
|
|||
|
|
<!-- <select @change="getUserPermission()" name="role_id" id="role_id"-->
|
|||
|
|
<!-- class="form-control text__14">-->
|
|||
|
|
<!-- <template v-if="sections.length">-->
|
|||
|
|
<!-- <option disabled :value="undefined" selected>انتخاب بخش</option>-->
|
|||
|
|
|
|||
|
|
<!-- <option v-for="({project_id,section_title},index) in sections"-->
|
|||
|
|
<!-- :key="index" :value="project_id">{{ section_title }}-->
|
|||
|
|
<!-- </option>-->
|
|||
|
|
<!-- </template>-->
|
|||
|
|
|
|||
|
|
<!-- <option v-else :value="undefined" selected>بخشی ثبت نشده است.</option>-->
|
|||
|
|
<!-- </select>-->
|
|||
|
|
<!-- </div>-->
|
|||
|
|
|
|||
|
|
<accordion
|
|||
|
|
v-if="user_id"
|
|||
|
|
:user_id="user_id"
|
|||
|
|
></accordion>
|
|||
|
|
<div class="side-panel-footer mt-4">
|
|||
|
|
<div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<button
|
|||
|
|
@click.prevent="showPanel = false"
|
|||
|
|
type="button"
|
|||
|
|
class="btn btn-primary"
|
|||
|
|
data-dismiss="modal"
|
|||
|
|
>
|
|||
|
|
بستن
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<Share @onCloseModal="showModal = false" v-if="showModal"></Share>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
|
|||
|
|
import apis from "@permission/permitApi";
|
|||
|
|
import {mapGetters} from "vuex";
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name:"UserAccessCustomization",
|
|||
|
|
components: {
|
|||
|
|
BreadCrumb: () =>
|
|||
|
|
import( "@components/BreadCrumb.vue"),
|
|||
|
|
Share: () =>
|
|||
|
|
import( "@view/modal/Share.vue"),
|
|||
|
|
Accordion: () =>
|
|||
|
|
import( "@permission/components/Accordion.vue"),
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
...mapGetters(["projectGetter"])
|
|||
|
|
},
|
|||
|
|
props: {
|
|||
|
|
items: {
|
|||
|
|
default() {
|
|||
|
|
return {}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
section_user_id: undefined,
|
|||
|
|
section_role_id: undefined,
|
|||
|
|
|
|||
|
|
user_id: undefined,
|
|||
|
|
role_id: undefined,
|
|||
|
|
loading: false,
|
|||
|
|
showPanel: false,
|
|||
|
|
userRoles: [],
|
|||
|
|
sections: [],
|
|||
|
|
selectedItem: {},
|
|||
|
|
|
|||
|
|
showModal: false,
|
|||
|
|
typingTimer: 0,
|
|||
|
|
doneTypingInterval: 1000,
|
|||
|
|
collapseAll: false,
|
|||
|
|
editMode: false,
|
|||
|
|
|
|||
|
|
searchForm: {
|
|||
|
|
query: '',
|
|||
|
|
replaceWith: '',
|
|||
|
|
wholeWord: false,
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getUserPermission() {
|
|||
|
|
this.user_id = this.selectedItem.user.id;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
fullName(user) {
|
|||
|
|
if (user.name && user.lastname)
|
|||
|
|
return user.name + ' ' + user.lastname;
|
|||
|
|
else if (user.name && !user.lastname)
|
|||
|
|
return user.name;
|
|||
|
|
else if (!user.name && user.lastname)
|
|||
|
|
return user.lastname;
|
|||
|
|
return 'بدون نام';
|
|||
|
|
},
|
|||
|
|
deleteItem() {
|
|||
|
|
},
|
|||
|
|
getUserRole() {
|
|||
|
|
ApiService.formData(
|
|||
|
|
apis.permissions.listUserRole,
|
|||
|
|
{
|
|||
|
|
project_id: this.projectGetter?.id
|
|||
|
|
})
|
|||
|
|
.then((response) => {
|
|||
|
|
this.userRoles = response.data.data;
|
|||
|
|
})
|
|||
|
|
.catch((err) => {
|
|||
|
|
})
|
|||
|
|
.finally(() => {
|
|||
|
|
this.loading = false;
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
save() {
|
|||
|
|
// actions
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
toggleRolesPanel(userRolesIndex = 0) {
|
|||
|
|
this.getSections().then(res => {
|
|||
|
|
this.sections = res.data.data;
|
|||
|
|
|
|||
|
|
this.role_id = this.userRoles[userRolesIndex].role_id ?? undefined;
|
|||
|
|
this.user_id = this.userRoles[userRolesIndex].user.id ?? undefined;
|
|||
|
|
|
|||
|
|
this.showPanel = true;
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
getSections() {
|
|||
|
|
return ApiService.formData(apis.sections.list, {project_id: this.projectGetter?.id})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
collapseAllPanels() {
|
|||
|
|
this.collapseAll = true;
|
|||
|
|
},
|
|||
|
|
expandAllPanels() {
|
|||
|
|
this.collapseAll = false;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
sendQuery() {
|
|||
|
|
// todo: show loading.
|
|||
|
|
// todo: send query and show result.
|
|||
|
|
// todo: hide loading.
|
|||
|
|
|
|||
|
|
clearTimeout(this.typingTimer);
|
|||
|
|
this.typingTimer = setTimeout(() => {
|
|||
|
|
this.highLight();
|
|||
|
|
}, this.doneTypingInterval);
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
onKeyDown() {
|
|||
|
|
clearTimeout(this.typingTimer);
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.getUserRole();
|
|||
|
|
// this.cloneItems = structuredClone(this.items);
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
projectGetter() {
|
|||
|
|
this.showPanel = false;
|
|||
|
|
this.getUserRole();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
|
|||
|
|
</style>
|