171 lines
8.7 KiB
Vue
171 lines
8.7 KiB
Vue
<script setup>
|
|
import Master from "../../layouts/master.vue";
|
|
import {onMounted , onUnmounted} from 'vue';
|
|
import {useUserStore} from "../../store/User.js";
|
|
import {Link} from "@inertiajs/inertia-vue3";
|
|
import GlobalSelectMedium from "../../components/medium/GlobalSelectMedium.vue";
|
|
import Card from "../../components/ui/Card.vue";
|
|
|
|
const userStore = useUserStore();
|
|
|
|
const props = defineProps({
|
|
is_edit: {
|
|
type: Boolean,
|
|
default: () => false
|
|
},
|
|
user: {
|
|
type: Object,
|
|
default: () => {}
|
|
},
|
|
roles: {
|
|
type: Object,
|
|
default: () => []
|
|
}
|
|
});
|
|
|
|
onMounted(() => {
|
|
if (props.is_edit) {
|
|
userStore.setEditData(props.user);
|
|
}
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
userStore.resetCreateForm();
|
|
userStore.is_edit_form = false;
|
|
userStore.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">{{ userStore.pageTitle }}</h2>
|
|
<Button severity="secondary" asChild v-slot="slotProps">
|
|
<Link :class="slotProps.class" :href="userStore.endpoints.index">
|
|
<span class="text-sm">{{ userStore.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_22rem] gap-4">
|
|
<Card>
|
|
<div class="rounded-2xl bg-white">
|
|
<Form ref="formRef" v-slot="$form" class=" p-4 flex flex-col gap-4 !w-full">
|
|
<FormField v-slot="$field" name="username" initialValue="" class="flex flex-col gap-1">
|
|
<label>نام کاربری</label>
|
|
<InputText type="text" :class="[
|
|
'placeholder:!text-sm',
|
|
userStore.errorsCreateForm?.username && !userStore.createForm.username ? 'p-invalid' : ''
|
|
]" v-model="userStore.createForm.username" placeholder="نام کاربری خود را وارد کنید" />
|
|
<Message v-if="userStore.errorsCreateForm?.username"
|
|
severity="error" size="small" variant="simple">{{ userStore.errorsCreateForm?.username[0] }}</Message>
|
|
</FormField>
|
|
<FormField v-slot="$field" name="email" initialValue="" class="flex flex-col gap-1">
|
|
<label>ایمیل کاربری</label>
|
|
<InputText type="text" :class="[
|
|
'placeholder:!text-sm',
|
|
userStore.errorsCreateForm?.email && !userStore.createForm.email ? 'p-invalid' : ''
|
|
]" v-model="userStore.createForm.email" placeholder="ایمیل خود را وارد کنید" />
|
|
<Message v-if="userStore.errorsCreateForm?.email" severity="error" size="small" variant="simple">{{ userStore.errorsCreateForm?.email[0] }}</Message>
|
|
</FormField>
|
|
<FormField v-slot="$field" name="national_code" initialValue="" class="flex flex-col gap-1">
|
|
<label>کد ملی</label>
|
|
<InputText type="text" :class="[
|
|
'placeholder:!text-sm',
|
|
userStore.errorsCreateForm?.national_code && !userStore.createForm.national_code ? 'p-invalid' : ''
|
|
]" v-model="userStore.createForm.national_code" placeholder="کد ملی خود را وارد کنید" />
|
|
<Message v-if="userStore.errorsCreateForm?.national_code" severity="error" size="small" variant="simple">{{ userStore.errorsCreateForm?.national_code[0] }}</Message>
|
|
</FormField>
|
|
<FormField v-slot="$field" name="phone" initialValue="" class="flex flex-col gap-1">
|
|
<label>شماره تماس</label>
|
|
<InputText type="text" class="placeholder:!text-sm" v-model="userStore.createForm.phone" placeholder="شماره تماس خود را وارد کنید" />
|
|
</FormField>
|
|
<FormField v-slot="$field" name="fullname" initialValue="" class="flex flex-col gap-1">
|
|
<label>نام خانوادگی</label>
|
|
<InputText type="text" class="placeholder:!text-sm" v-model="userStore.createForm.fullname" placeholder="نام خانوادگی خود را وارد کنید" />
|
|
<Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{ $field.error?.message }}</Message>
|
|
</FormField>
|
|
<FormField v-slot="$field" name="password" initialValue="" class="flex flex-col gap-1">
|
|
<label>کلمه عبور</label>
|
|
<Password type="text" :inputClass="['placeholder:!text-sm' , { 'p-invalid' : userStore.errorsCreateForm?.password && !userStore.createForm.password}]"
|
|
v-model="userStore.createForm.password" placeholder="کلمه عبور خود را وارد کنید" :feedback="false" toggleMask fluid />
|
|
<Message v-if="userStore.errorsCreateForm?.password"
|
|
severity="error" size="small" variant="simple">{{ userStore.errorsCreateForm?.password[0] }}</Message>
|
|
<p class="text-client-Fontcolor/60 text-xs font-normal">در صورتی که کلمه عبور را نمیخواهید تغییر دهید خالی بگذارید</p>
|
|
</FormField>
|
|
<FormField v-slot="$field" name="password_confirmation" initialValue="" class="flex flex-col gap-1">
|
|
<label>تکرار کلمه عبور</label>
|
|
<Password type="text" inputClass="placeholder:!text-sm" v-model="userStore.createForm.password_confirmation" placeholder="تکرار کلمه عبور خود را وارد کنید" :feedback="false" toggleMask fluid />
|
|
<Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{ $field.error?.message }}</Message>
|
|
</FormField>
|
|
</Form>
|
|
</div>
|
|
</Card>
|
|
<div>
|
|
<Card>
|
|
<div class="p-4 rounded-2xl pb-8">
|
|
<h5>تصویر کاربر</h5>
|
|
<global-select-medium v-model="userStore.createForm.image"></global-select-medium>
|
|
</div>
|
|
</Card>
|
|
<Card class="mt-4">
|
|
<div class="mt-4 p-4 grid grid-cols-1 gap-4 rounded-2xl">
|
|
<div class="grid grid-cols-1 justify-between items-center">
|
|
<span>زمان انتشار:</span>
|
|
<CustomDatePicker v-model="userStore.createForm.datetime" class="!text-xs mt-2" type="datetime" compact-time></CustomDatePicker>
|
|
</div>
|
|
<div class="grid grid-cols-2a justify-between items-center">
|
|
<span class="flex">سطح:</span>
|
|
<SelectButton class="!text-xs" v-model="userStore.createForm.level" :options="userStore.levelOptions" />
|
|
</div>
|
|
<div class="grid grid-cols-2a justify-between items-center">
|
|
<span class="flex">مقام:</span>
|
|
<MultiSelect class="!text-xs"
|
|
v-model="userStore.createForm.role"
|
|
:pt="{ option : '!text-sm' }"
|
|
placeholder="انتخاب مقام"
|
|
optionLabel="label"
|
|
optionValue="id"
|
|
:options="roles" />
|
|
</div>
|
|
<div class="grid grid-cols-1 justify-start">
|
|
<Button :loading="userStore.loaderCreateForm" @click="userStore.update_and_store" type="button" severity="secondary" :label="userStore.buttonLabel" />
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
</master>
|
|
</template>
|
|
|
|
<style>
|
|
.p-multiselect {
|
|
height: auto;
|
|
min-height: 40px;
|
|
}
|
|
|
|
.p-multiselect-label {
|
|
line-height: 24px;
|
|
}
|
|
|
|
.p-multiselect .p-multiselect-header {
|
|
line-height: 24px;
|
|
}
|
|
|
|
.p-multiselect .p-multiselect-filter {
|
|
max-height: calc(100px);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.p-multiselect .p-multiselect-item {
|
|
font-size: 0.875rem;
|
|
line-height: 44px;
|
|
}
|
|
|
|
</style>
|