first commit

src/features/admin/services/components/modals/SendMessageModal.vue

@@ -0,0 +1,163 @@
+<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 BasicModal from '@/components/BasicModal.vue'
+import BaseButton from '@/components/BaseButton.vue'
+import SelectField from '@/components/form/SelectField.vue'
+import TextareaField from '@/components/form/TextareaField.vue'
+import SvgIcon from '@/components/icons/SvgIcon.vue'
+import { SERVICE_STATUS } from '@/enums'
+
+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 #dddddd;
+    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>