radicall/resources/js/Admin/store/User.js

import { defineStore } from 'pinia'
import axios from "axios";
import { Inertia } from '@inertiajs/inertia'

export const useUserStore = defineStore('UserStore', {
    state: () => ({
        createForm: {
            datetime: '',
            role: {},
            words: {},
            username: '',
            email: '',
            fullname: '',
            phone: '',
            password: '',
            level: 'پزشک',
            image: '',
            password_confirmation: '',
        },

        loaderCreateForm: false,
        is_edit_form: false,
        errorsCreateForm: [],
        is_edit_id: null,

        columns: [
            {
                key: 'id',
                title: 'شناسه',
                style: '!font-bold !text-sm',
                width: 60,
            },
            {
                key: 'username',
                title: 'نام کاربری',
            },
            // {
            //     key: 'email',
            //     title: 'ایمیل',
            // },
            {
                key: 'phone',
                title: 'شماره تماس',
                render: (data) => `<pre dir="ltr" class="text-right">${data.phone}</pre>`,
            },
            {
                key: 'fullname',
                title: 'نام و نام خانوادگی',
                width: 200,
                render: (data) => data.fullname,
            },
            {
                key: 'level',
                title: 'سطح',
            },
            {
                key: 'created_at',
                title: 'تاریخ عضویت',
                hasSort: true,
                width: 200,
            },
            {
                key: 'actions',
                title: 'عملیات',
                hasSort: false,
                slot: true,
            },
        ],
        levelOptions: [
            'مدیر',
            'پزشک',
            'سرپرست',
        ],
        endpoints: {
            index: '/admin/users',
            create: '/admin/users/create',
            store: '/admin/users',
            edit: (id) => `/admin/users/${id}/edit`,
            update: (id) => `/admin/users/${id}`,
            delete: (id) => `/admin/users/${id}`,
            bulkDelete: '/admin/users-bulk-delete',
            export: '/admin/users-export-data'
        }
    }),

    getters: {
        buttonLabel: (state) => {
            return state.is_edit_id ? 'ویرایش کاربر' : 'ثبت و ایجاد کاربر جدید';
        },
        pageTitle: (state) => {
            return state.is_edit_id ? 'ویرایش کاربر' : 'افزودن کاربر جدید';
        },
        indexPageTitle: (state) => {
            return 'نمایش همه کاربران';
        }
    },

    actions: {
        update_and_store() {
            const url = this.is_edit_id ?
                this.endpoints.update(this.is_edit_id) :
                this.endpoints.store;
            const method = this.is_edit_id ? 'patch' : 'post';

            this.loaderCreateForm = true;
            axios({
                method: method,
                url: url,
                data: this.createForm
            }).then(res => {
                this.errorsCreateForm = []
                this.loaderCreateForm = false;
                if (this.is_edit_id) {
                    Inertia.get(this.endpoints.edit(this.is_edit_id));
                } else {
                    this.resetCreateForm();
                    Inertia.get(this.endpoints.create);
                }
            }).catch(error => {
                this.loaderCreateForm = false;
                this.errorsCreateForm = error.response.data?.errors ?? [];
            });
        },

        resetCreateForm() {
            this.createForm = {
                username: '',
                role: {},
                email: '',
                fullname: '',
                phone: '',
                image: '',
                password: '',
                level: 'پزشک',
                datetime: '',
                password_confirmation: '',
            }
            this.is_edit_id = null;
            this.errorsCreateForm = [];
        },

        setEditData(data) {
            this.is_edit_id = data.id;

            Object.keys(this.createForm).forEach(field => {
                if (field === 'image' && data.profile_url) {
                    this.createForm[field] = { url: data.profile_url };
                } else if (field === 'datetime' && data.created_at) {
                    this.createForm[field] = data.created_at;
                } else {
                    this.createForm[field] = data[field] || '';
                }
            });
        },

        deleteRecord(id) {
            return new Promise((resolve, reject) => {
                axios.delete(this.endpoints.delete(id))
                    .then(response => {
                        Inertia.get(this.endpoints.index);
                        resolve(response);
                    })
                    .catch(error => {
                        reject(error);
                    });
            });
        },

        bulkDelete(ids) {
            return new Promise((resolve, reject) => {
                axios.post(this.endpoints.bulkDelete, { ids })
                    .then(response => {
                        Inertia.get(this.endpoints.index);
                        resolve(response);
                    })
                    .catch(error => {
                        reject(error);
                    });
            });
        },

        exportData(filters = {}) {
            const query = new URLSearchParams(filters).toString();
            window.open(`${this.endpoints.export}?${query}`, '_blank');
        },

        search(params) {
            return Inertia.get(this.endpoints.index, params, {
                preserveState: false
            });
        },

        navigateToPage(page) {
            return Inertia.get(this.endpoints.index, { page }, { preserveState: true });
        }
    }
})