jws-frontend/src/components/upload-file/PersFormBusinessRegistration.vue

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import useOptionStore from 'stores/options';
import { selectFilterOptionRefMod } from 'stores/utils';
import DatePicker from '../shared/DatePicker.vue';
import { QSelect } from 'quasar';
import { AddressForm } from 'components/form';

const optionStore = useOptionStore();

const registrationNumber = defineModel<string>('registrationNumber', {
  default: '',
});

const requestAt = defineModel<string>('requestAt', { default: '' });
const namePrefix = defineModel<string | null>('namePrefix');
const firstName = defineModel<string>('firstName', { default: '' });
const lastName = defineModel<string>('lastName', { default: '' });

const businessRegistrationDate = defineModel<string>(
  'businessRegistrationDate',
  { default: '' },
);
const visaPlace = defineModel<string>('visaPlace', { default: '' });
const businessType = defineModel<string>('businessType', { default: '' });
const businessName = defineModel<string>('businessName', { default: '' });
const romanCharacters = defineModel<string>('romanCharacters', { default: '' });

const address = defineModel<string>('address');
const street = defineModel('street', { default: '' });
const moo = defineModel('moo', { default: '' });
const soi = defineModel('soi', { default: '' });
const provinceId = defineModel<string | null | undefined>('provinceId');
const districtId = defineModel<string | null | undefined>('districtId');
const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
const homeCode = defineModel<string | null | undefined>('homeCode');
const employmentOffice = defineModel<string | null | undefined>(
  'employmentOffice',
);

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

defineProps<{
  prefixId?: string;
  outlined?: boolean;
  readonly?: boolean;
  customerType?: 'CORP' | 'PERS';
}>();

onMounted(() => {
  prefixNameFilter = selectFilterOptionRefMod(
    ref(optionStore.globalOption?.prefix),
    prefixNameOptions,
    'label',
  );
});

watch(
  () => optionStore.globalOption,
  () => {
    prefixNameFilter = selectFilterOptionRefMod(
      ref(optionStore.globalOption.prefix),
      prefixNameOptions,
      'label',
    );
  },
);
</script>

<template>
  <div class="row q-mb-sm" style="gap: 10px">
    <div class="col-12 text-subtitle1 text-weight-bold">
      <p>Document Properties</p>
    </div>

    <div class="col-12 row q-col-gutter-sm">
      <q-input
        dense
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-6"
        :label="$t('form.businessRegistration.registrationNumber')"
        for="input-citizen-id"
        v-model="registrationNumber"
      />

      <q-input
        dense
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-3"
        :label="$t('form.businessRegistration.requestAt')"
        for="input-citizen-id"
        v-model="requestAt"
      />
    </div>

    <div class="col-12 row q-col-gutter-sm">
      <q-select
        outlined
        use-input
        fill-input
        emit-value
        map-options
        hide-selected
        hide-bottom-space
        input-debounce="0"
        option-label="label"
        option-value="value"
        hide-dropdown-icon
        class="col-2"
        dense
        :readonly="readonly"
        :options="prefixNameOptions"
        :for="`${prefixId}-select-prefix-name`"
        :label="$t('form.prefixName')"
        @filter="prefixNameFilter"
        :model-value="readonly ? namePrefix || '-' : namePrefix"
        @update:model-value="
          (v) => {
            typeof v === 'string' ? (namePrefix = v) : '';
          }
        "
        @clear="namePrefix = ''"
      >
        <template v-slot:no-option>
          <q-item>
            <q-item-section class="text-grey">
              {{ $t('general.noData') }}
            </q-item-section>
          </q-item>
        </template>
      </q-select>

      <q-input
        dense
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-5"
        :label="$t('customer.form.firstName')"
        for="input-first-name"
        v-model="firstName"
      />

      <q-input
        dense
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-5"
        :label="$t('customer.form.lastName')"
        for="input-last-name"
        v-model="lastName"
      />

      <DatePicker
        :label="$t('form.businessRegistration.businessRegistration')"
        v-model="businessRegistrationDate"
        class="col-3"
        :id="`${prefixId}-input-birth-date`"
        :readonly="readonly"
        clearable
      />

      <DatePicker
        :label="$t('customerEmployee.form.visaPlace')"
        v-model="visaPlace"
        class="col-3"
        :id="`${prefixId}-input-birth-date`"
        :readonly="readonly"
        clearable
      />

      <q-input
        dense
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-6"
        :label="$t('form.businessRegistration.businessType')"
        for="input-last-name"
        v-model="businessType"
      />

      <q-input
        dense
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-12"
        :label="$t('form.businessRegistration.businessName')"
        for="input-last-name"
        v-model="businessName"
      />
      <q-input
        dense
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-12"
        :label="$t('form.businessRegistration.romanCharacters')"
        for="input-last-name"
        v-model="romanCharacters"
      />
    </div>

    <AddressForm
      prefixId="form-tm6"
      hide-icon
      hide-title
      hide-input-en
      dense
      v-model:homeCode="homeCode"
      v-model:employmentOffice="employmentOffice"
      v-model:address="address"
      v-model:street="street"
      v-model:moo="moo"
      v-model:soi="soi"
      v-model:province-id="provinceId"
      v-model:district-id="districtId"
      v-model:sub-district-id="subDistrictId"
    />
  </div>
</template>

<style lang="scss" scoped></style>