complete Complete User Request Submission section RAD-1

2026-01-03 19:14:30 +03:30
commit 7137ec5792
393 changed files with 152602 additions and 0 deletions
@@ -0,0 +1,134 @@
+<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="[
+                                    'placeholder:!text-sm',
+                                    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="[
+                                    'placeholder:!text-sm',
+                                    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="!text-xs 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>
+
@@ -0,0 +1,189 @@
+<script setup>
+import Master from "../../layouts/master.vue";
+import {ref, reactive} from 'vue';
+import {Link} from "@inertiajs/inertia-vue3";
+import {useConfirm} from 'primevue/useconfirm';
+import TableGeneric from "../../components/TableGeneric.vue";
+import {useRoleStore} from "../../store/Role.js";
+
+const props = defineProps({
+    roles: {
+        type: Object,
+    },
+    search: {
+        type: String
+    },
+})
+const roleStore = useRoleStore();
+
+const roles = ref(props.roles ?? []);
+const selectedItems = ref([]);
+const searchLoader = ref(false);
+
+const columns = ref(roleStore.columns)
+
+const queryParams = reactive({
+    search: props.search ?? ''
+})
+
+const confirm = useConfirm();
+
+const onPageChange = (event) => {
+    roleStore.navigateToPage(event.page + 1);
+};
+
+const searchData = () => {
+    searchLoader.value = true;
+    roleStore.search(queryParams).then((response) => {
+        searchLoader.value = false;
+        roles.value = response.props.roles.data;
+    });
+}
+
+const exportData = () => {
+    roleStore.exportData({
+        search: queryParams.search
+    });
+}
+
+const onSelectionChange = (selection) => {
+    selectedItems.value = selection;
+};
+
+const onSearchChange = (value) => {
+    queryParams.search = value;
+    searchData();
+};
+
+const showDeleteConfirm = (data) => {
+    confirm.require({
+        group: 'deleteTemplate',
+        header: 'مطمعن هستید؟',
+        message: 'اگر به عملیات اطمینان دارید، تأیید کنید.',
+        icon: 'fi fi-rr-info',
+        rejectProps: {
+            label: 'انصراف',
+            icon: 'fi fi-rr-ban',
+            outlined: true,
+            size: 'small',
+            class: '!text-xs !flex pt-1 !item-center',
+            iconClass: '!flex !text-xs',
+        },
+        acceptProps: {
+            label: 'حذف',
+            icon: 'fi fi-rr-check',
+            size: 'small',
+            class: '!text-xs !flex pt-1 !item-center',
+            iconClass: '!flex !text-xs',
+        },
+        accept: () => {
+            roleStore.deleteRecord(data.id);
+        },
+        reject: () => {
+
+        }
+    });
+}
+
+const confirmDeleteSelected = (ids) => {
+    confirm.require({
+        group: 'deleteTemplate',
+        header: 'مطمعن هستید؟',
+        message: 'اگر به عملیات اطمینان دارید، تأیید کنید.',
+        icon: 'fi fi-rr-info',
+        rejectProps: {
+            label: 'انصراف',
+            icon: 'fi fi-rr-ban',
+            outlined: true,
+            size: 'small',
+            class: '!text-xs !flex pt-1 !item-center',
+            iconClass: '!flex !text-xs',
+        },
+        acceptProps: {
+            label: 'حذف',
+            icon: 'fi fi-rr-check',
+            size: 'small',
+            class: '!text-xs !flex pt-1 !item-center',
+            iconClass: '!flex !text-xs',
+        },
+        accept: () => {
+            roleStore.bulkDelete(ids);
+        },
+        reject: () => {
+
+        }
+    });
+};
+</script>
+
+<template>
+    <master>
+        <div class="mb-4 grid grid-cols-2a justify-between items-center bg-white border-[1px] border-client-gray/20 py-4 px-4 rounded-2xl">
+            <h2 class="font-bold text-client-Fontcolor">{{ roleStore.indexPageTitle }}</h2>
+            <Button severity="secondary" asChild v-slot="slotProps">
+                <Link :class="slotProps.class" :href="roleStore.endpoints.create">
+                    <span class="text-sm">{{ roleStore.pageTitle }}</span>
+                    <i class="fi fi-rr-plus flex text-sm"></i>
+                </Link>
+            </Button>
+        </div>
+        <div class="card border-[1px] overflow-hidden border-client-gray/20 bg-white rounded-2xl">
+            <TableGeneric
+                :data="roles.data"
+                :columns="columns"
+                :selectable="true"
+                :pagination="roles.meta"
+                :searchable="true"
+                :searchValue="queryParams.search"
+                v-model="selectedItems"
+                @selection-change="onSelectionChange"
+                @page-change="onPageChange"
+                @search-change="onSearchChange"
+            >
+                <template #bulk-action="{ selection }">
+                    <Button
+                        label="حذف همه"
+                        size="small"
+                        :pt="{icon : 'flex'}"
+                        icon="fi fi-rr-trash"
+                        severity="danger"
+                        class="!text-xs !flex"
+                        outlined
+                        @click="() => confirmDeleteSelected(selection.map(user => user.id))"
+                    />
+                </template>
+
+                <template #toolbar-actions>
+                    <div class="grid grid-cols-a gap-4 justify-start">
+                        <Button
+                            label="خروجی اکسل"
+                            :pt="{icon : 'flex'}"
+                            icon="fi fi-rr-file-export"
+                            class="!text-xs !bg-client-primary"
+                            @click="exportData"
+                        />
+                    </div>
+                </template>
+
+                <template #column-actions="{ data }">
+                    <div class="grid grid-cols-2a">
+                        <Button
+                            type="button"
+                            class="!w-8 !h-8"
+                            variant="outlined"
+                            severity="danger"
+                            icon="fi fi-rr-trash"
+                            :pt="{icon : '!mt-2 !text-xs'}"
+                            @click="showDeleteConfirm(data)"
+                        />
+                        <Button severity="info" variant="outlined" asChild v-slot="slotProps">
+                            <Link :class="[slotProps.class , '!w-8 !h-8']" :href="roleStore.endpoints.edit(data.id)">
+                                <i class="fi fi-rr-pen-clip flex !text-xs"></i>
+                            </Link>
+                        </Button>
+                    </div>
+                </template>
+            </TableGeneric>
+        </div>
+    </master>
+</template>