fabric_trade_admin/src/views/orders/components/OrderAddModal.vue

<script setup lang="ts">
import { computed } from 'vue'
import BaseModal from '@/components/ui/BaseModal.vue'
import AdminSelect from '@/components/ui/AdminSelect.vue'
import { useOrdersPageContext } from '@/composables/useOrdersPage'

const {
  showAddModal,
  formError,
  form,
  isFormValid,
  companies,
  closeAddModal,
  submitAddOrder,
} = useOrdersPageContext()

const companyOptions = computed(() =>
  companies.value.map((company) => ({ value: company.id, label: company.name })),
)

const settlementOptions = [
  { value: 'check', label: 'چکی' },
  { value: 'cash', label: 'نقدی' },
]
</script>

<template>
  <BaseModal :open="showAddModal" title="سفارش جدید" size="lg" @close="closeAddModal">
    <form class="admin-form" @submit.prevent="submitAddOrder">
      <p v-if="formError" class="admin-form__error" role="alert">{{ formError }}</p>

      <div class="admin-form__field">
        <label for="order-customer">نام مشتری <span class="admin-form__required">*</span></label>
        <input
          id="order-customer"
          v-model="form.customerName"
          type="text"
          class="admin-input"
          placeholder="مثال: پارچه‌سرای نیکو"
        />
      </div>

      <div class="admin-form__row">
        <div class="admin-form__field">
          <label>شرکت <span class="admin-form__required">*</span></label>
          <AdminSelect
            v-model="form.companyId"
            block
            aria-label="انتخاب شرکت"
            placeholder="انتخاب شرکت"
            :options="companyOptions"
          />
        </div>
        <div class="admin-form__field">
          <label>روش تسویه</label>
          <AdminSelect
            v-model="form.settlementMethod"
            block
            aria-label="روش تسویه"
            :options="settlementOptions"
          />
        </div>
      </div>

      <div class="admin-form__row">
        <div class="admin-form__field">
          <label for="order-meterage">متراژ (متر)</label>
          <input
            id="order-meterage"
            v-model.number="form.meterage"
            type="number"
            min="1"
            class="admin-input"
          />
        </div>
        <div class="admin-form__field">
          <label for="order-phone">تلفن مشتری</label>
          <input
            id="order-phone"
            v-model="form.customerPhone"
            type="tel"
            class="admin-input"
            placeholder="۰۹۱۲۱۲۳۴۵۶۷"
          />
        </div>
      </div>
    </form>

    <template #footer>
      <button type="button" class="admin-btn admin-btn--outline" @click="closeAddModal">
        انصراف
      </button>
      <button
        type="button"
        class="admin-btn admin-btn--primary"
        :disabled="!isFormValid"
        @click="submitAddOrder"
      >
        ثبت سفارش
      </button>
    </template>
  </BaseModal>
</template>