jws-frontend/src/pages/05_quotation/QuotationFormInfo.vue

<script lang="ts" setup>
import { Icon } from '@iconify/vue';
import { QSelect } from 'quasar';
import { selectFilterOptionRefMod } from 'src/stores/utils';
import { onMounted, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';

import AppBox from 'components/app/AppBox.vue';
import DatePicker from 'src/components/shared/DatePicker.vue';
import SelectInput from 'src/components/shared/SelectInput.vue';

import useOptionStore from 'src/stores/options';

defineProps<{
  readonly?: boolean;
  data?: {
    total: number;
    discount: number;
    totalVatExcluded: number;
    totalVatIncluded: number;
    totalAfterDiscount: number;
  };
}>();

const { t } = useI18n();

const quotationNo = defineModel<string>('quotationNo', { required: true });
const actor = defineModel<string>('actor', { required: true });
const workName = defineModel<string>('workName', { required: true });
const contactor = defineModel<string>('contactor', { required: true });
const telephone = defineModel<string>('telephone', { required: true });
const documentReceivePoint = defineModel<string>('documentReceivePoint', {
  required: true,
});
const dueDate = defineModel<string>('dueDate', { required: true });
const payType = defineModel<string>('payType', { required: true });
const paySplitCount = defineModel<number>('paySplitCount', {
  required: true,
  default: 1,
});
const payBank = defineModel<string>('payBank', { required: true });

const optionStore = useOptionStore();

// fullAmountCash
// installmentsCash
// fullAmountBill
// installmentsBill
const payTypeOpion = ref([
  {
    value: 'fullAmountCash',
    label: t('quotation.type.fullAmountCash'),
  },
  {
    value: 'installmentsCash',
    label: t('quotation.type.installmentsCash'),
  },
  {
    value: 'fullAmountBill',
    label: t('quotation.type.fullAmountBill'),
  },
  {
    value: 'installmentsBill',
    label: t('quotation.type.installmentsBill'),
  },
]);

const bankBookOptions = ref<Record<string, unknown>[]>([]);
let bankBoookFilter: (
  value: string,
  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
) => void;

onMounted(() => {
  if (optionStore.globalOption) {
    bankBoookFilter = selectFilterOptionRefMod(
      ref(optionStore.globalOption.bankBook),
      bankBookOptions,
      'label',
    );
  }
});

watch(
  () => optionStore.globalOption,
  () => {
    bankBoookFilter = selectFilterOptionRefMod(
      ref(optionStore.globalOption.bankBook),
      bankBookOptions,
      'label',
    );
  },
);
</script>

<template>
  <AppBox no-padding bordered class="column">
    <div
      class="bordered-b q-px-md q-py-sm row bg-color-orange-light items-center"
    >
      <div class="icon-wrapper bg-color-orange q-mr-sm">
        <q-icon name="mdi-file-outline" />
      </div>
      <span class="text-weight-bold">
        {{ $t('general.information', { msg: $t('general.attachment') }) }}
      </span>
    </div>

    <div class="q-pa-sm">
      <div class="row q-col-gutter-sm">
        <q-input
          for="input-quotation"
          :label="$t('general.itemNo', { msg: $t('quotation.title') })"
          :readonly
          v-model="quotationNo"
          class="col-12"
          dense
          outlined
        />
        <q-input
          for="input-actor"
          :label="$t('quotation.actor')"
          :readonly
          v-model="actor"
          class="col-12"
          dense
          outlined
        />
        <q-input
          for="input-work-name"
          :label="$t('quotation.workName')"
          :readonly
          v-model="workName"
          class="col-12"
          dense
          outlined
        />
        <q-input
          for="input-contact-name"
          :label="$t('quotation.contactName')"
          :readonly
          v-model="contactor"
          class="col-12"
          dense
          outlined
        />
        <q-input
          for="input-telephone"
          :label="$t('general.telephone')"
          :readonly="readonly"
          v-model="telephone"
          class="col-12"
          dense
          outlined
        />
        <q-input
          for="input-docs-receive-point"
          :label="$t('quotation.documentReceivePoint')"
          :readonly
          v-model="documentReceivePoint"
          class="col-12"
          dense
          outlined
        />
        <DatePicker
          id="select-due-date"
          :label="$t('quotation.dueDate')"
          :readonly
          v-model="dueDate"
          class="col-12"
        />
      </div>
    </div>
    <div
      class="bordered-b q-px-md q-py-sm row bg-color-orange-light items-center"
    >
      <div class="icon-wrapper bg-color-orange q-mr-sm">
        <q-icon name="mdi-bank-outline" />
      </div>
      <span class="text-weight-bold">
        {{ $t('quotation.paymentCondition') }}
      </span>
    </div>
    <div class="q-pa-sm">
      <div class="row q-col-gutter-sm">
        <SelectInput
          class="col-12"
          :label="$t('quotation.payType')"
          :option="payTypeOpion"
          :readonly
          id="pay-type"
          v-model="payType"
        />

        <q-field
          dense
          outlined
          class="col-12"
          v-if="
            payType === 'installmentsCash' || payType === 'installmentsBill'
          "
        >
          <div class="row full-width items-center justify-between q-py-xs">
            <div class="column">
              <span style="color: var(--foreground)">
                {{ $t('quotation.paySplitCount') }}
              </span>
              <span class="app-text-muted text-caption">
                ({{ $t('quotation.payTotal', { msg: '10,000' }) }})
              </span>
            </div>
            <q-input
              v-model="paySplitCount"
              :readonly
              class="col-3"
              type="number"
              dense
              outlined
              min="1"
            />
          </div>
        </q-field>
        <section
          v-if="
            payType === 'installmentsCash' || payType === 'installmentsBill'
          "
          class="col-12 text-caption"
          style="padding-left: 20px"
        >
          <template v-for="n in Number(paySplitCount)" :key="n">
            <div
              class="row app-text-muted items-center"
              :class="{ 'q-mb-sm': n !== Number(paySplitCount) }"
            >
              {{ `${$t('quotation.periodNo')} ${n}` }}
              <q-input
                class="col q-mx-sm"
                :label="$t('quotation.amount')"
                model-value="5,000"
                dense
                outlined
                bg-color="input-border"
              >
                <template #prepend>
                  <q-icon name="mdi-cash" color="primary" />
                </template>
              </q-input>
              <DatePicker
                class="col-5"
                :label="$t('quotation.payDueDate')"
                bg-color="input-border"
              />
              <!-- <q-input
                class="col"
                :label="$t('quotation.amount')"
                model-value="5,000"
                dense
                outlined
                bg-color="input-border"
              /> -->
            </div>
          </template>
        </section>

        <DatePicker
          v-if="payType === 'fullAmountBill'"
          class="col-12"
          :label="$t('quotation.callDueDate')"
        />

        <q-select
          outlined
          clearable
          use-input
          emit-value
          fill-input
          map-options
          hide-bottom-space
          option-value="value"
          input-debounce="0"
          option-label="label"
          class="col-12"
          autocomplete="off"
          for="select-bankbook"
          dense
          :label="$t('quotation.bank')"
          :options="bankBookOptions"
          :readonly
          :hide-dropdown-icon="readonly"
          v-model="payBank"
          @filter="bankBoookFilter"
        >
          <template v-slot:option="scope">
            <q-item
              v-if="scope.opt"
              v-bind="scope.itemProps"
              class="row items-center"
            >
              <q-item-section avatar>
                <q-img
                  :src="`/img/bank/${scope.opt.value}.png`"
                  class="bordered"
                  style="
                    border-radius: 50%;
                    aspect-ratio: 1;
                    height: 2rem;
                    width: 2rem;
                  "
                />
              </q-item-section>
              <q-item-section>
                {{ scope.opt.label }}
              </q-item-section>
            </q-item>
          </template>

          <template v-slot:selected-item="scope">
            <q-item-section
              v-if="scope.opt && !!payBank"
              avatar
              class="q-py-sm row"
            >
              <q-img
                :src="`/img/bank/${scope.opt.value}.png`"
                class="bordered"
                style="
                  border-radius: 50%;
                  aspect-ratio: 1;
                  height: 2rem;
                  width: 2rem;
                "
              />
            </q-item-section>
          </template>

          <template v-slot:no-option>
            <q-item>
              <q-item-section class="text-grey">
                {{ $t('general.noData') }}
              </q-item-section>
            </q-item>
          </template>
        </q-select>
      </div>
    </div>
    <div
      class="bordered-b q-px-md q-py-sm row bg-color-orange-light items-center"
    >
      <div class="icon-wrapper bg-color-orange q-mr-sm">
        <Icon icon="iconoir:coins" />
      </div>
      <span class="text-weight-bold">
        {{ $t('quotation.summary') }}
      </span>
    </div>
    <div class="q-pa-sm">
      <div class="row">
        {{ $t('general.total') }}
        <span class="q-ml-auto">{{ data?.total || 0 }} ฿</span>
      </div>
      <div class="row">
        {{ $t('general.discount') }}
        <span class="q-ml-auto">{{ data?.discount || 0 }} ฿</span>
      </div>
      <div class="row">
        {{ $t('general.totalAfterDiscount') }}
        <span class="q-ml-auto">{{ data?.totalAfterDiscount || 0 }} ฿</span>
      </div>
      <div class="row">
        {{ $t('general.totalVatExcluded') }}
        <span class="q-ml-auto">{{ data?.totalVatExcluded || 0 }} ฿</span>
      </div>
      <div class="row">
        {{ $t('general.totalVatIncluded') + ' 7%' }}
        <span class="q-ml-auto">{{ data?.totalVatIncluded || 0 }} ฿</span>
      </div>
    </div>
    <div class="q-pa-sm row surface-2 items-center text-weight-bold">
      {{ $t('general.totalAmount') }}

      <span class="q-ml-auto" style="color: var(--brand-1)">
        {{ data?.totalVatIncluded || 0 }} ฿
      </span>
    </div>
  </AppBox>
</template>

<style scoped>
.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  font-size: 1.5rem;
  padding: var(--size-1);
  border-radius: var(--radius-2);
}

.bg-color-orange {
  --_color: var(--yellow-7-hsl);
  color: white;
  background: hsla(var(--_color));
}

.dark .bg-color-orange {
  --_color: var(--orange-6-hsl);
}

.bg-color-orange-light {
  --_color: var(--yellow-7-hsl);
  background: hsla(var(--_color) / 0.2);
}
.dark .bg-color-orange {
  --_color: var(--orange-6-hsl / 0.2);
}
</style>