129 lines
7.0 KiB
Vue
129 lines
7.0 KiB
Vue
<script setup>
|
|
import Master from "../../layouts/master.vue";
|
|
import {ref , onMounted , onUnmounted} from 'vue';
|
|
import {Link} from "@inertiajs/inertia-vue3";
|
|
import {useRoleStore} from "../../store/Role.js";
|
|
import Card from "../../components/ui/Card.vue";
|
|
|
|
|
|
const roleStore = useRoleStore();
|
|
const props = defineProps({
|
|
is_edit : {
|
|
type: Boolean,
|
|
default: () => false
|
|
},
|
|
role: {
|
|
type: Object,
|
|
default: () => {}
|
|
},
|
|
permissions: {
|
|
type: Object,
|
|
default: () => []
|
|
}
|
|
});
|
|
|
|
onMounted(() => {
|
|
if (props.is_edit) {
|
|
roleStore.setEditData(props.role);
|
|
roleStore.createForm.selectedPermissionIds = props.role.permissions;
|
|
}
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
roleStore.resetCreateForm();
|
|
roleStore.is_edit_form = false;
|
|
roleStore.errorsCreateForm = [];
|
|
})
|
|
|
|
const managerSelected = () => {
|
|
const all = {};
|
|
props.permissions.forEach(permission => {
|
|
const filtered = permission.permissions_parent
|
|
.filter(p => !p.name.includes('own'))
|
|
.map(p => p.id);
|
|
|
|
all[permission.id] = filtered;
|
|
});
|
|
roleStore.createForm.selectedPermissionIds = all;
|
|
}
|
|
const selectAllWithOwn = () => {
|
|
const all = {};
|
|
props.permissions.forEach(permission => {
|
|
all[permission.id] = permission.permissions_parent.map(p => p.id);
|
|
});
|
|
roleStore.createForm.selectedPermissionIds = all;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<master>
|
|
<Card class="mb-4">
|
|
<div class="grid grid-cols-1 sm:grid-cols-[1fr_auto] justify-between items-center gap-4">
|
|
<h2 class="font-bold text-client-Fontcolor">{{ roleStore.pageTitle }}</h2>
|
|
<Button severity="secondary" asChild v-slot="slotProps" class="w-full sm:w-auto">
|
|
<Link :class="slotProps.class" :href="roleStore.endpoints.index">
|
|
<span class="text-sm">{{ roleStore.indexPageTitle }}</span>
|
|
<i class="fi fi-rr-list flex text-sm"></i>
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
<section class="grid w-full grid-cols-1 lg:grid-cols-[1fr_26rem] gap-4">
|
|
<Card>
|
|
<div class="">
|
|
<Form ref="formRef" v-slot="$form" class="bg-white p-4 rounded-2xl flex flex-col gap-4 !w-full">
|
|
<FormField v-slot="$field" name="name" initialValue="" class="flex flex-col gap-1">
|
|
<label>نام مقام</label>
|
|
<InputText type="text" :class="roleStore.errorsCreateForm?.name && !roleStore.createForm.name ? 'p-invalid' : ''" v-model="roleStore.createForm.name" placeholder="نام مقام را وارد کنید" />
|
|
<Message v-if="roleStore.errorsCreateForm?.name"
|
|
severity="error" size="small" variant="simple">{{ roleStore.errorsCreateForm?.name[0] }}</Message>
|
|
</FormField>
|
|
<FormField v-slot="$field" name="label" initialValue="" class="flex flex-col gap-1">
|
|
<label>نام فارسی مقام</label>
|
|
<InputText type="text" :class="roleStore.errorsCreateForm?.label && !roleStore.createForm.label ? 'p-invalid' : ''" v-model="roleStore.createForm.label" placeholder="نام فارسی مقام را وارد کنید" />
|
|
<Message v-if="roleStore.errorsCreateForm?.label" severity="error" size="small" variant="simple">{{ roleStore.errorsCreateForm?.label[0] }}</Message>
|
|
</FormField>
|
|
<FormField v-slot="$field" name="permissions_parent" initialValue="" class="flex flex-col gap-1">
|
|
<label>انتخاب سطح دسترسی برای این مقام</label>
|
|
<div class="grid grid-cols-3 max-lg:grid-cols-2 mt-1 gap-4 max-sm:grid-cols-1">
|
|
<div v-for="(permission , index) in permissions" :key="permission.id" class="grid grid-cols-1 mt-1">
|
|
<span class="mb-1 text-sm">{{permission.label}}</span>
|
|
<select v-model="roleStore.createForm.selectedPermissionIds[permission.id]" multiple>
|
|
<option v-for="(p , index) in permission.permissions_parent" :key="p.id" :value="p.id">{{p.label}}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</FormField>
|
|
</Form>
|
|
</div>
|
|
</Card>
|
|
|
|
<Card>
|
|
<div class="rounded-3xl lg:col-span-1 z-20">
|
|
<div class="p-4 bg-white grid grid-cols-1 gap-4 rounded-2xl">
|
|
<div class="grid grid-cols-1 justify-between items-center">
|
|
<span>زمان انتشار:</span>
|
|
<CustomDatePicker v-model="roleStore.createForm.datetime" class="mt-2" type="datetime" compact-time></CustomDatePicker>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-x-3 mt-1 justify-between items-center">
|
|
<span class="col-span-2 mb-2">عملیات سریع:</span>
|
|
<Button @click="managerSelected" icon="fi fi-rr-choose" :pt="{icon: 'flex'}" size="small" outlined class="!text-xs h-10" label="انتخاب بعنوان مدیر"/>
|
|
<Button @click="selectAllWithOwn" icon="fi fi-rr-choose" :pt="{icon: 'flex'}" size="small" outlined class="!text-xs h-10 truncate" label="انتخاب با محدودیت کاربری"/>
|
|
<div class="col-span-2 py-4">
|
|
<h3 class="text-xs font-black">انتخاب بعنوان مدیر:</h3>
|
|
<p class="leading-7 font-light text-xs">این گذینه تمامی سطح های مورد نظر <span class="font-bold">به جز سطح محدودیت کاربر</span> رو بصورت خودکار انتخاب کرده و تنها کافی است که نام و نام فارسی مقام را مشخص و ثبت کنید.</p>
|
|
<h3 class="text-xs font-black mt-2">انتخاب با محدودیت کاربری:</h3>
|
|
<p class="leading-7 text-xs font-light">این گذینه تمامی سطح های مورد نظر رو بصورت خودکار انتخاب کرده در هر بخش <span class="font-bold"> سطح محدودیت کاربر هم اعمال خواهد</span> شد تنها کافی است که نام و نام فارسی مقام را مشخص و ثبت کنید. </p>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 justify-start">
|
|
<Button :loading="roleStore.loaderCreateForm" @click="roleStore.update_and_store" type="button" severity="secondary" :label="roleStore.buttonLabel" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</section>
|
|
</master>
|
|
</template>
|
|
|