fix

2026-05-15 17:12:51 +03:30
parent b8ced45375
commit c82701888a
101 changed files with 8125 additions and 96 deletions
@@ -0,0 +1,251 @@
+<template>
+  <div class="csf">
+    <form class="csf__form" @submit.prevent="onSubmit">
+      <div class="csf__row">
+        <div class="csf__cell">
+          <SelectField
+            v-model="form.typeKey"
+            name="typeKey"
+            label="نوع خدمت"
+            placeholder="انتخاب کنید"
+            :options="typeOptions"
+            option-label="label"
+            option-value="value"
+            :error="errors.typeKey"
+            @change="onTypeChange"
+          />
+        </div>
+        <div class="csf__cell">
+          <SelectField
+            v-model="form.title"
+            name="title"
+            label="عنوان خدمت"
+            placeholder="انتخاب کنید"
+            :options="titleOptions"
+            option-label="label"
+            option-value="value"
+            :disabled="!form.typeKey"
+            :error="errors.title"
+          />
+        </div>
+      </div>
+
+      <div class="csf__row">
+        <div class="csf__cell csf__cell--full">
+          <TextareaField
+            v-model="form.description"
+            name="description"
+            label="توضیحات خود را وارد نمایید"
+            placeholder="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است."
+            :row="5"
+            :error="errors.description"
+          />
+        </div>
+      </div>
+
+      <div class="csf__upload">
+        <FileUploader
+          v-model="files"
+          accept="image/*,application/pdf"
+          :max-files="3"
+          @error="onFileError"
+        />
+      </div>
+
+      <div class="csf__divider" />
+
+      <div class="csf__actions">
+        <BaseButton
+          type="submit"
+          text="ثبت درخواست"
+          custom-class="csf__submit"
+          :loading="submitting"
+        >
+          <template #appendIcon>
+            <SvgIcon name="arrow-left" :size="16" color="#fff" />
+          </template>
+        </BaseButton>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup>
+import * as yup from 'yup'
+import useYup from '@/composables/useYup'
+import { computed, ref, watch } from 'vue'
+import BaseButton from '@/components/BaseButton.vue'
+import SvgIcon from '@/components/icons/SvgIcon.vue'
+import SelectField from '@/components/form/SelectField.vue'
+import FileUploader from '@/components/form/FileUploader.vue'
+import TextareaField from '@/components/form/TextareaField.vue'
+import {
+  useStudentServiceTitlesQuery,
+  useStudentServiceTypesQuery,
+} from '@/services/query/student-services'
+
+defineProps({
+  submitting: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['submit', 'file-error'])
+
+const form = ref({
+  typeKey: '',
+  title: '',
+  description: '',
+})
+
+const files = ref([])
+
+const schema = yup.object({
+  typeKey: yup.string().required('نوع خدمت را انتخاب کنید'),
+  title: yup.string().required('عنوان خدمت را انتخاب کنید'),
+  description: yup
+    .string()
+    .trim()
+    .min(5, 'توضیحات حداقل ۵ کاراکتر باشد')
+    .required('توضیحات را وارد کنید'),
+})
+
+const { validate, errors } = useYup(schema)
+
+const { data: types } = useStudentServiceTypesQuery()
+const typeOptions = computed(() => types.value ?? [])
+
+const typeKeyRef = computed(() => form.value.typeKey)
+const { data: titles } = useStudentServiceTitlesQuery(typeKeyRef, {
+  enabled: () => !!form.value.typeKey,
+})
+const titleOptions = computed(() => titles.value ?? [])
+
+const onTypeChange = () => {
+  form.value.title = ''
+}
+
+watch(
+  () => form.value.typeKey,
+  () => {
+    form.value.title = ''
+  }
+)
+
+const onFileError = (msg) => emit('file-error', msg)
+
+const onSubmit = async () => {
+  const { isValid, payload } = await validate(form.value)
+  if (!isValid) return
+  emit('submit', { ...payload, files: files.value })
+}
+</script>
+
+<style lang="scss" scoped>
+.csf {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  border-radius: 0.75rem;
+
+  &__intro {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    padding: 0.5rem 0 1rem;
+    border-bottom: 0.75px solid #ddd;
+  }
+
+  &__intro-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 0.625rem;
+    background: rgba(255, 255, 255, 44%);
+    box-shadow: 0 3px 7.35px rgba(245, 93, 109, 100%);
+    flex-shrink: 0;
+  }
+
+  &__intro-text {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    text-align: end;
+    gap: 0.125rem;
+    flex: 1;
+
+    @media (min-width: 768px) {
+      align-items: center;
+      text-align: center;
+    }
+  }
+
+  &__intro-title {
+    font-family: var(--font-family-fa);
+    font-weight: 500;
+    font-size: 1.05rem;
+    color: #4c4c4c;
+    margin: 0;
+  }
+
+  &__intro-desc {
+    font-family: var(--font-family-fa);
+    font-weight: 400;
+    font-size: 0.75rem;
+    color: #adadad;
+    margin: 0;
+  }
+
+  &__form {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  &__row {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+
+    @media (min-width: 768px) {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  &__cell {
+    display: flex;
+    flex-direction: column;
+
+    &--full {
+      grid-column: 1 / -1;
+    }
+  }
+
+  &__upload {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  &__divider {
+    height: 0.75px;
+    background: #ddd;
+    margin-top: 0.25rem;
+  }
+
+  &__actions {
+    display: flex;
+    justify-content: center;
+
+    @media (min-width: 768px) {
+      justify-content: flex-end;
+    }
+  }
+
+  &__submit {
+    min-width: 14rem;
+    height: 2.5rem;
+    padding: 0 2.5rem;
+  }
+}
+</style>