jws-frontend/src/components/FormDialog.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import AppBox from 'components/app/AppBox.vue';

import { Province, District, SubDistrict } from 'stores/address';
import useAddressStore from 'stores/address';

defineProps<{
  title: string;
  addressTitle?: string;
  addressENTitle?: string;
  submit?: (...args: unknown[]) => void;
  close?: (...args: unknown[]) => void;
}>();

defineExpose({
  fetchDistrict,
  fetchSubDistrict,
});

const adrressStore = useAddressStore();
const modal = defineModel('modal', { default: false });
const address = defineModel('address', { default: '' });
const addressEN = defineModel('addressEN', { default: '' });
const provinceId = defineModel<string | null | undefined>('provinceId');
const districtId = defineModel<string | null | undefined>('districtId');
const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
const zipCode = defineModel<string>('zipCode', { default: '' });

const addrOptions = ref<{
  provinceOps?: Province[];
  districtOps?: District[];
  subDistrictOps?: SubDistrict[];
}>({});

async function fetchProvince() {
  const result = await adrressStore.fetchProvince();
  if (result) {
    addrOptions.value.provinceOps = result;
  }
}

async function fetchDistrict(id: string | undefined) {
  if (id) {
    const result = await adrressStore.fetchDistrictByProvinceId(id);
    if (result) {
      addrOptions.value.districtOps = result;
    }
  }
}

async function fetchSubDistrict(id: string | undefined) {
  if (id) {
    const result = await adrressStore.fetchSubDistrictByProvinceId(id);
    if (result) {
      addrOptions.value.subDistrictOps = result;
    }
  }
}

async function selectProvince(id: string) {
  if (!id) return;
  districtId.value = undefined;
  subDistrictId.value = undefined;
  addrOptions.value.districtOps = [];
  addrOptions.value.subDistrictOps = [];
  zipCode.value = '';
  await fetchDistrict(id);
}

async function selectDistrict(id: string) {
  if (!id) return;
  subDistrictId.value = undefined;
  zipCode.value = '';
  await fetchSubDistrict(id);
}

async function selectSubDistrict(id: string) {
  if (!id) return;
  zipCode.value =
    addrOptions.value.subDistrictOps
      ?.filter((x) => x.id === id)
      .map((x) => x.zipCode)[0] ?? '';
}

onMounted(async () => {
  await fetchProvince();
});
</script>
<template>
  <q-dialog full-width v-model="modal" @hide="close">
    <AppBox style="padding: 0; border-radius: var(--radius-2); max-width: 80%">
      <q-form greedy @submit.prevent @validation-success="submit">
        <!-- header -->
        <q-card-section class="form-header">
          <div class="row items-center justity-between">
            <div
              class="col text-subtitle1 text-weight-bold"
              style="color: hsl(var(--info-bg))"
            >
              {{ title }}
            </div>
            <q-btn
              round
              flat
              id="closeDialog"
              icon="mdi-close"
              padding="xs"
              class="close-btn"
              :class="{ dark: $q.dark.isActive }"
              v-close-popup
              @click="close"
            />
          </div>
        </q-card-section>

        <!-- form-top -->
        <div class="form-body-top" :class="{ dark: $q.dark.isActive }">
          <q-card-section class="column col-12">
            <div class="row q-col-gutter-x-md" style="row-gap: 16px">
              <slot name="top"></slot>
            </div>
          </q-card-section>
        </div>

        <!-- form-mid -->
        <div class="row" style="overflow-y: auto; max-height: 50vh">
          <!-- prepend -->
          <q-card-section
            class="column col-2"
            v-if="$slots.prepend && !$slots.append"
          >
            <slot name="prepend"></slot>
          </q-card-section>
          <!-- center -->
          <q-card-section
            class="column"
            :class="`${$slots.prepend ? 'col-10' : $slots.append ? 'col-6' : 'col-12'}`"
          >
            <div
              class="row inline col-12 q-col-gutter-x-md"
              style="row-gap: 16px"
            >
              <slot name="midTop"></slot>
              <div class="col-12">
                {{ $t(addressTitle || 'address') }}
              </div>
              <q-input
                hide-bottom-space
                dense
                outlined
                id="Addr"
                :label="$t('address')"
                class="col-12"
                v-model="address"
                lazy-rules
                :rules="[
                  (val) =>
                    (val && val.length > 0) ||
                    $t('formDialogInputAddressValidate'),
                ]"
              />
              <q-select
                hide-bottom-space
                dense
                outlined
                emit-value
                map-options
                id="selectProvince"
                v-model="provinceId"
                option-value="id"
                option-label="name"
                :label="$t('province')"
                class="col-3"
                :options="addrOptions.provinceOps"
                @update:model-value="(v: string) => selectProvince(v)"
                lazy-rules
                :rules="[
                  (val) =>
                    (val && val.length > 0) ||
                    $t('formDialogInputProvinceValidate'),
                ]"
              />
              <q-select
                hide-bottom-space
                dense
                outlined
                emit-value
                map-options
                id="selectDistrict"
                v-model="districtId"
                option-value="id"
                option-label="name"
                :label="$t('district')"
                class="col-3"
                :options="addrOptions.districtOps"
                @update:model-value="(v: string) => selectDistrict(v)"
                lazy-rules
                :rules="[
                  (val) =>
                    (val && val.length > 0) ||
                    $t('formDialogInputDistrictValidate'),
                ]"
              />
              <q-select
                hide-bottom-space
                dense
                outlined
                emit-value
                map-options
                id="SelectSubDistrict"
                v-model="subDistrictId"
                option-value="id"
                option-label="name"
                :label="$t('subDistrict')"
                class="col-3"
                :options="addrOptions.subDistrictOps"
                @update:model-value="(v: string) => selectSubDistrict(v)"
                lazy-rules
                :rules="[
                  (val) =>
                    (val && val.length > 0) ||
                    $t('formDialogInputSubDistrictValidate'),
                ]"
              />
              <q-input
                dense
                readonly
                outlined
                id="zip"
                :label="$t('zipCode')"
                class="col-3"
                v-model="zipCode"
              />
              <span class="col-12">{{ $t(addressTitle || 'address') }} EN</span>
              <q-input
                hide-bottom-space
                dense
                outlined
                id="addressEN"
                :label="$t('address')"
                class="col-12"
                v-model="addressEN"
                lazy-rules
                :rules="[
                  (val) =>
                    (val && val.length > 0) ||
                    $t('formDialogInputAddressValidate'),
                ]"
              />
              <q-select
                dense
                outlined
                emit-value
                map-options
                id="selectProvinceEN"
                v-model="provinceId"
                option-value="id"
                option-label="nameEN"
                :label="$t('province')"
                class="col-3"
                :options="addrOptions.provinceOps"
                @update:model-value="(v: string) => selectProvince(v)"
              />
              <q-select
                dense
                outlined
                emit-value
                map-options
                id="selectDistrictEN"
                v-model="districtId"
                option-value="id"
                option-label="nameEN"
                :label="$t('district')"
                class="col-3"
                :options="addrOptions.districtOps"
                @update:model-value="(v: string) => selectDistrict(v)"
              />
              <q-select
                dense
                outlined
                emit-value
                map-options
                id="SelectSubDistrictEN"
                v-model="subDistrictId"
                option-value="id"
                option-label="nameEN"
                :label="$t('subDistrict')"
                class="col-3"
                :options="addrOptions.subDistrictOps"
                @update:model-value="(v: string) => selectSubDistrict(v)"
              />
              <q-input
                dense
                readonly
                outlined
                zip="zipEN"
                :label="$t('zipCode')"
                class="col-3"
                v-model="zipCode"
              />
              <div class="col-12" v-if="$slots.midBottom">
                <q-separator size="1px" />
              </div>
              <slot name="midBottom"></slot>
            </div>
          </q-card-section>
          <!-- append -->
          <q-card-section
            class="column col-6"
            v-if="$slots.append && !$slots.prepend"
          >
            <slot name="append"></slot>
          </q-card-section>
        </div>

        <!-- footer -->
        <q-card-section class="form-footer">
          <div class="text-right">
            <q-btn
              dense
              unelevated
              id="submitBtn"
              type="submit"
              color="primary"
              class="q-px-sm"
              :label="$t('save')"
            />
          </div>
        </q-card-section>
      </q-form>
    </AppBox>
  </q-dialog>
</template>

<style scoped lang="scss">
.close-btn {
  color: hsl(var(--negative-bg));
  background-color: hsla(var(--negative-bg) / 0.1);

  &.dark {
    background-color: transparent;
    border: 1px solid hsl(var(--negative-bg));
  }
}

.form-header {
  border-bottom: 1px solid var(--border-color);
}

.form-body-top {
  --_body-bg: var(--sand-0);
  background-color: var(--_body-bg);

  &.dark {
    --_body-bg: var(--gray-10);
  }
}

.form-footer {
  border-top: 1px solid var(--border-color);
}
</style>