120 lines
5.9 KiB
Vue
120 lines
5.9 KiB
Vue
<script setup>
|
|
import Master from "../../layouts/master.vue";
|
|
import {ref , onMounted , onUnmounted} from 'vue';
|
|
import {Link} from "@inertiajs/inertia-vue3";
|
|
import {usePermissionStore} from "../../store/Permission.js";
|
|
import Card from "../../components/ui/Card.vue";
|
|
|
|
const permissionStore = usePermissionStore();
|
|
|
|
const props = defineProps({
|
|
is_edit : {
|
|
type: Boolean,
|
|
default: () => false
|
|
},
|
|
permission: {
|
|
type: Object,
|
|
default: () => {}
|
|
},
|
|
permissions: {
|
|
type: Object,
|
|
default: () => []
|
|
}
|
|
});
|
|
|
|
onMounted(() => {
|
|
if (props.is_edit) {
|
|
permissionStore.setEditData(props.permission);
|
|
}
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
permissionStore.resetCreateForm();
|
|
permissionStore.is_edit_form = false;
|
|
permissionStore.errorsCreateForm = [];
|
|
})
|
|
|
|
</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">{{ permissionStore.pageTitle }}</h2>
|
|
<Button severity="secondary" asChild v-slot="slotProps" class="w-full sm:w-auto">
|
|
<Link :class="slotProps.class" :href="permissionStore.endpoints.index">
|
|
<span class="text-sm">{{ permissionStore.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-3 gap-4">
|
|
<div class="lg:col-span-2">
|
|
<Card>
|
|
<Form ref="formRef" v-slot="$form" class="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="[
|
|
'placeholder:!text-sm',
|
|
permissionStore.errorsCreateForm?.name && !permissionStore.createForm.name ? 'p-invalid' : ''
|
|
]" v-model="permissionStore.createForm.name" placeholder="نام سطح را وارد کنید" />
|
|
<Message v-if="permissionStore.errorsCreateForm?.name"
|
|
severity="error" size="small" variant="simple">{{ permissionStore.errorsCreateForm?.name[0] }}</Message>
|
|
</FormField>
|
|
<FormField v-slot="$field" name="label" initialValue="" class="flex flex-col gap-1">
|
|
<label>نام فارسی سطح</label>
|
|
<InputText type="text" :class="[
|
|
'placeholder:!text-sm',
|
|
permissionStore.errorsCreateForm?.label && !permissionStore.createForm.label ? 'p-invalid' : ''
|
|
]" v-model="permissionStore.createForm.label" placeholder="نام فارسی سطح را وارد کنید" />
|
|
<Message v-if="permissionStore.errorsCreateForm?.label" severity="error" size="small" variant="simple">{{ permissionStore.errorsCreateForm?.label[0] }}</Message>
|
|
</FormField>
|
|
<FormField v-slot="$field" name="parent_id" initialValue="" class="flex flex-col gap-1">
|
|
<label> والد (مرتبط با) </label>
|
|
<Select v-model="permissionStore.createForm.parent_id" optionLabel="label" optionValue="id" :pt="{option : '!text-sm'}"
|
|
:options="permissions.data" filter
|
|
placeholder="انتخاب سطح" class="w-full">
|
|
<template #empty>
|
|
<div class="flex justify-center py-4 items-center h-full">
|
|
<span class="text-center text-sm">هیچ سطحی پیدا نشده!</span>
|
|
</div>
|
|
</template>
|
|
<template #emptyfilter>
|
|
<div class="flex justify-center py-4 items-center h-full">
|
|
<span class="text-center text-sm">هیچ سطحی پیدا نشده!</span>
|
|
</div>
|
|
</template>
|
|
<template #value="slotProps">
|
|
<div v-if="slotProps.value" class="flex items-center">
|
|
<div>
|
|
{{ permissions.data.find(item => item.id === slotProps.value)?.label || 'انتخاب سطح' }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</Select>
|
|
</FormField>
|
|
</Form>
|
|
</Card>
|
|
</div>
|
|
|
|
<div class="lg:col-span-1">
|
|
<Card>
|
|
<div class="grid grid-cols-1 gap-4">
|
|
<div class="grid grid-cols-1 justify-between items-center">
|
|
<span>زمان انتشار:</span>
|
|
<CustomDatePicker v-model="permissionStore.createForm.datetime" class="mt-2" type="datetime" compact-time></CustomDatePicker>
|
|
</div>
|
|
<div class="grid grid-cols-1 justify-start">
|
|
<Button :loading="permissionStore.loaderCreateForm" @click="permissionStore.update_and_store" type="button" severity="secondary" :label="permissionStore.buttonLabel" class="w-full sm:w-auto" />
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
</master>
|
|
</template>
|
|
|
|
|