sajjadtalkhabi
163 lines
4.1 KiB
Vue
163 lines
4.1 KiB
Vue
<template>
|
|
<BasicModal
|
|
title="ارسال پیام"
|
|
title-en="Send message"
|
|
width="95%"
|
|
max-width="58rem"
|
|
min-width="auto"
|
|
:show-close-button="true"
|
|
>
|
|
<template #default="{ close }">
|
|
<form class="send-message" @submit.prevent="onSubmit(close)">
|
|
<div class="send-message__row send-message__row--two">
|
|
<SelectField
|
|
v-model="form.category"
|
|
name="category"
|
|
label="دسته بندی"
|
|
placeholder="انتخاب کنید"
|
|
:options="categoryOptions"
|
|
option-label="label"
|
|
option-value="value"
|
|
/>
|
|
<SelectField
|
|
v-model="form.priority"
|
|
name="priority"
|
|
label="اولویت پیام"
|
|
placeholder="انتخاب کنید"
|
|
:options="priorityOptions"
|
|
option-label="label"
|
|
option-value="value"
|
|
/>
|
|
</div>
|
|
|
|
<div class="send-message__row">
|
|
<TextareaField
|
|
v-model="form.description"
|
|
name="description"
|
|
label="توضیحات خود را وارد کنید"
|
|
placeholder="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است."
|
|
:row="4"
|
|
/>
|
|
</div>
|
|
|
|
<div class="send-message__divider" />
|
|
|
|
<footer class="send-message__footer">
|
|
<button type="button" class="send-message__cancel" @click="close">
|
|
<span>منصرف شدم</span>
|
|
<SvgIcon name="caret-down" :size="16" color="currentColor" />
|
|
</button>
|
|
<BaseButton
|
|
type="submit"
|
|
text="ارسال"
|
|
custom-class="send-message__submit"
|
|
:disabled="!canSubmit"
|
|
>
|
|
<template #appendIcon>
|
|
<SvgIcon name="arrow-left" :size="18" color="#fff" />
|
|
</template>
|
|
</BaseButton>
|
|
</footer>
|
|
</form>
|
|
</template>
|
|
</BasicModal>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref } from 'vue'
|
|
import { toast } from 'vue3-toastify'
|
|
import { SERVICE_STATUS } from '@/enums'
|
|
import BasicModal from '@/components/BasicModal.vue'
|
|
import BaseButton from '@/components/BaseButton.vue'
|
|
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
|
import SelectField from '@/components/form/SelectField.vue'
|
|
import TextareaField from '@/components/form/TextareaField.vue'
|
|
|
|
defineOptions({ name: 'SendMessageModal' })
|
|
|
|
const categoryOptions = Object.entries(SERVICE_STATUS).map(([value, label]) => ({
|
|
value,
|
|
label,
|
|
}))
|
|
|
|
const priorityOptions = [
|
|
{ value: 'very_urgent', label: 'بسیار فوری' },
|
|
{ value: 'urgent', label: 'فوری' },
|
|
{ value: 'normal', label: 'عادی' },
|
|
{ value: 'low', label: 'کم اهمیت' },
|
|
]
|
|
|
|
const form = ref({
|
|
category: '',
|
|
priority: '',
|
|
description: '',
|
|
})
|
|
|
|
const canSubmit = computed(
|
|
() => form.value.category && form.value.priority && form.value.description.trim().length > 0
|
|
)
|
|
|
|
const onSubmit = (close) => {
|
|
if (!canSubmit.value) return
|
|
toast.success('پیام با موفقیت ارسال شد')
|
|
close?.()
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.send-message {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
text-align: start;
|
|
padding-block: 0.5rem;
|
|
|
|
&__row {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 0.75rem;
|
|
|
|
&--two {
|
|
@media (min-width: 640px) {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__divider {
|
|
border-block-end: 1px solid #ddd;
|
|
margin-block: 0.5rem;
|
|
}
|
|
|
|
&__footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
}
|
|
|
|
&__cancel {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 0.5rem;
|
|
font-family: var(--font-family-fa);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: #969696;
|
|
|
|
&:hover {
|
|
color: #6b6b6b;
|
|
}
|
|
}
|
|
|
|
&__submit {
|
|
min-width: 17rem;
|
|
padding: 0 1.5rem;
|
|
}
|
|
}
|
|
</style>
|