sajjadtalkhabi
133 lines
3.5 KiB
Vue
133 lines
3.5 KiB
Vue
<template>
|
|
<BasicModal
|
|
:title="isEditMode ? 'ویرایش گواهی و تقدیرنامه' : 'افزودن گواهی و تقدیرنامه جدید'"
|
|
title-en="Certificate"
|
|
width="95%"
|
|
max-width="48rem"
|
|
min-width="auto"
|
|
:show-close-button="true"
|
|
>
|
|
<template #default="{ close }">
|
|
<form class="add-certificate" @submit.prevent="onSubmit(close)">
|
|
<TextField
|
|
v-model="form.title"
|
|
name="title"
|
|
label="عنوان"
|
|
:error="errors.title"
|
|
@blur="validateAt('title', form.title)"
|
|
/>
|
|
|
|
<TextField
|
|
v-model="form.universityName"
|
|
name="universityName"
|
|
label="نام دانشگاه"
|
|
:error="errors.universityName"
|
|
@blur="validateAt('universityName', form.universityName)"
|
|
/>
|
|
|
|
<div class="add-certificate__row">
|
|
<TextField
|
|
v-model="form.startYear"
|
|
name="startYear"
|
|
label="سال شروع"
|
|
inputmode="numeric"
|
|
:convert-digits="true"
|
|
/>
|
|
<TextField
|
|
v-model="form.endYear"
|
|
name="endYear"
|
|
label="سال پایان"
|
|
inputmode="numeric"
|
|
:convert-digits="true"
|
|
/>
|
|
</div>
|
|
|
|
<div class="add-certificate__divider" />
|
|
|
|
<footer class="add-certificate__footer">
|
|
<BaseButton type="submit" text="ذخیره اطلاعات" custom-class="add-certificate__submit">
|
|
<template #appendIcon>
|
|
<SvgIcon name="arrow-left" :size="18" color="#fff" />
|
|
</template>
|
|
</BaseButton>
|
|
</footer>
|
|
</form>
|
|
</template>
|
|
</BasicModal>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import * as yup from 'yup'
|
|
import useYup from '@/composables/useYup'
|
|
import useModal from '@/composables/useModal'
|
|
import BasicModal from '@/components/BasicModal.vue'
|
|
import BaseButton from '@/components/BaseButton.vue'
|
|
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
|
import TextField from '@/components/form/TextField.vue'
|
|
import { useCompleteInfoStore } from '@/features/missionary/store/complete-info'
|
|
|
|
defineOptions({ name: 'MissionaryAddCertificateModal' })
|
|
|
|
const store = useCompleteInfoStore()
|
|
const { getModal } = useModal()
|
|
|
|
const modalData = getModal('MissionaryAddCertificateModal')?.data ?? {}
|
|
const editingIndex = modalData.index ?? null
|
|
const isEditMode = editingIndex != null
|
|
|
|
const emptyForm = () => ({
|
|
title: '',
|
|
universityName: '',
|
|
startYear: '',
|
|
endYear: '',
|
|
})
|
|
|
|
const form = ref({ ...emptyForm(), ...modalData.entry })
|
|
|
|
const schema = yup.object({
|
|
title: yup.string().trim().required('عنوان را وارد کنید'),
|
|
universityName: yup.string().trim().required('نام دانشگاه را وارد کنید'),
|
|
})
|
|
|
|
const { validate, validateAt, errors } = useYup(schema)
|
|
|
|
const onSubmit = async (close) => {
|
|
const { isValid } = await validate(form.value)
|
|
if (!isValid) return
|
|
store.upsertCertificate({ ...form.value }, editingIndex)
|
|
close?.()
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.add-certificate {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
text-align: start;
|
|
padding-block: 0.25rem 0.5rem;
|
|
|
|
&__row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0 0.875rem;
|
|
}
|
|
|
|
&__divider {
|
|
border-block-end: 1px solid #ddd;
|
|
margin-block: 0.5rem 0.75rem;
|
|
}
|
|
|
|
&__footer {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
&__submit {
|
|
min-width: 14rem;
|
|
padding: 0 1.5rem;
|
|
}
|
|
}
|
|
</style>
|