jws-frontend/src/components/03_customer-management/FormEmployeeHealthCheck.vue

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import useAddressStore, {
  District,
  Province,
  SubDistrict,
} from 'stores/address';
import { EmployeeCheckupCreate } from 'stores/employee/types';
import { selectFilterOptionRefMod } from 'stores/utils';
import { QSelect } from 'quasar';
import DatePicker from '../shared/DatePicker.vue';

import SelectInput from 'components/shared/SelectInput.vue';
import {
  AddButton,
  EditButton,
  DeleteButton,
  SaveButton,
  UndoButton,
} from 'components/button';

const adrressStore = useAddressStore();

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

const currentIndex = defineModel<number>('currentIndex');
const employeeCheckup = defineModel<EmployeeCheckupCreate[]>('employeeCheckup');

const checkupResultsOption = defineModel<{ label: string; value: string }[]>(
  'checkupResultsOption',
  { required: true },
);
const checkupTypeOption = defineModel<{ label: string; value: string }[]>(
  'checkupTypeOption',
  { required: true },
);
const medicalBenefitOption = defineModel<{ label: string; value: string }[]>(
  'medicalBenefitOption',
  { required: true },
);
const insuranceCompanyOption = defineModel<{ label: string; value: string }[]>(
  'insuranceCompanyOption',
  { required: true },
);

const tab = ref();

withDefaults(
  defineProps<{
    title?: string;
    dense?: boolean;
    outlined?: boolean;
    readonly?: boolean;
    typeCustomer?: string;
    prefixId: string;
    showBtnSave?: boolean;
    hideAction?: boolean;
  }>(),
  {
    hideAction: false,
    showBtnSave: false,
  },
);

defineEmits<{
  (e: 'save', index: number): void;
  (e: 'edit', index: number): void;
  (e: 'delete', index: number): void;
  (e: 'undo', index: number): void;
}>();

async function fetchProvince() {
  const result = await adrressStore.fetchProvince();

  if (result) addrOptions.provinceOps = result;

  provinceFilter = selectFilterOptionRefMod(
    ref(addrOptions.provinceOps),
    provinceOptions,
    'name',
  );
}

function removeData(index: number) {
  if (!employeeCheckup.value) return;
  if (employeeCheckup.value.length === 1) return;

  employeeCheckup.value.splice(index, 1);

  if (index) if (tab.value === `tab${index}`) tab.value = `tab${index - 1}`;
  if (tab.value === `tab${employeeCheckup.value.length}`)
    tab.value = `tab${employeeCheckup.value.length - 1}`;
}

onMounted(async () => {
  await fetchProvince();
  tab.value = 'tab0';
});

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

const checkupResultsOptions = ref<Record<string, unknown>[]>([]);
const checkupResultsFilter = selectFilterOptionRefMod(
  checkupResultsOption,
  checkupResultsOptions,
  'label',
);

const checkupTypeOptions = ref<Record<string, unknown>[]>([]);
const checkupTypeFilter = selectFilterOptionRefMod(
  checkupTypeOption,
  checkupTypeOptions,
  'label',
);

const medicalBenefitOptions = ref<Record<string, unknown>[]>([]);
const medicalBenefitFilter = selectFilterOptionRefMod(
  medicalBenefitOption,
  medicalBenefitOptions,
  'label',
);

const insuranceCompanyOptions = ref<Record<string, unknown>[]>([]);
const insuranceCompanyFilter = selectFilterOptionRefMod(
  insuranceCompanyOption,
  insuranceCompanyOptions,
  'label',
);
</script>

<template>
  <div class="row">
    <div
      v-for="(checkup, index) in employeeCheckup"
      v-bind:key="index"
      class="col-12 row q-col-gutter-sm"
      :class="{ 'q-pt-lg': index !== 0 }"
      :id="`${prefixId}-checkup-${index}`"
    >
      <q-separator
        v-if="index > 0"
        class="full-width"
        style="padding-block: 0.1px"
        spaced="lg"
      />
      <span class="col-12 flex justify-between items-center">
        {{ $t('general.times', { number: index + 1 }) }}
        <div class="row items-center" v-if="!hideAction">
          <UndoButton
            v-if="!readonly && !!checkup.id && !checkup.statusSave"
            id="btn-info-health-undo"
            icon-only
            @click="$emit('undo', index)"
            type="button"
            :disabled="!(currentIndex === -1) && !(currentIndex === index)"
          />
          <SaveButton
            icon-only
            id="btn-info-health-save"
            v-if="!readonly && !checkup.statusSave"
            @click="$emit('save', index)"
            type="submit"
            :disabled="!(currentIndex === -1) && !(currentIndex === index)"
          />
          <EditButton
            icon-only
            id="btn-info-health-edit"
            v-if="!readonly && checkup.statusSave"
            @click="$emit('edit', index)"
            type="button"
            :disabled="!(currentIndex === -1) && !(currentIndex === index)"
          />
          <DeleteButton
            icon-only
            id="btn-info-health-delete"
            v-if="!readonly && !!checkup.id && checkup.statusSave"
            @click="$emit('delete', index)"
            type="button"
            :disabled="!(currentIndex === -1) && !(currentIndex === index)"
          />
        </div>
      </span>

      <q-select
        outlined
        clearable
        use-input
        fill-input
        emit-value
        map-options
        hide-selected
        hide-bottom-space
        class="col-6"
        input-debounce="0"
        option-value="value"
        option-label="label"
        v-model="checkup.checkupResult"
        :dense="dense"
        :readonly="readonly || checkup.statusSave"
        :options="checkupResultsOptions"
        :hide-dropdown-icon="readonly || checkup.statusSave"
        :for="`${prefixId}-select-health-checkresult`"
        :label="$t('customerEmployee.formHealthCheck.result')"
        @filter="checkupResultsFilter"
      >
        <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-select
        outlined
        clearable
        use-input
        fill-input
        emit-value
        map-options
        hide-selected
        hide-bottom-space
        class="col-6"
        input-debounce="0"
        option-value="value"
        option-label="label"
        v-model="checkup.checkupType"
        :dense="dense"
        :readonly="readonly || checkup.statusSave"
        :options="checkupTypeOptions"
        :hide-dropdown-icon="readonly || checkup.statusSave"
        :for="`${prefixId}-select-checkup-type`"
        :label="$t('customerEmployee.formHealthCheck.checkupType')"
        @filter="checkupTypeFilter"
      >
        <template v-slot:no-option>
          <q-item>
            <q-item-section class="text-grey">
              {{ $t('general.noData') }}
            </q-item-section>
          </q-item>
        </template>
      </q-select>
      <!-- @filter="provinceFilter" -->
      <q-input
        :dense="dense"
        outlined
        :readonly="readonly || checkup.statusSave"
        hide-bottom-space
        class="col-12"
        :label="$t('customerEmployee.formHealthCheck.hospital')"
        v-model="checkup.hospitalName"
        :for="`${prefixId}-input-hospital`"
      />

      <div class="col-md col-6">
        <DatePicker
          v-model="checkup.coverageStartDate"
          :id="`${prefixId}-input-coverage-start-date`"
          :readonly="readonly || checkup.statusSave"
          clearable
        />
      </div>

      <div class="col">
        <DatePicker
          :label="$t('customerEmployee.formHealthCheck.coverageExpireDate')"
          v-model="checkup.coverageExpireDate"
          :id="`${prefixId}-input-coverage-expire-date`"
          :readonly="readonly || checkup.statusSave"
          :disabled-dates="
            (date: Date) =>
              date.getTime() <
              ((checkup.coverageStartDate &&
                new Date(checkup.coverageStartDate).getTime()) ||
                Date.now())
          "
          clearable
        />
      </div>

      <q-select
        outlined
        clearable
        use-input
        fill-input
        emit-value
        map-options
        hide-selected
        hide-bottom-space
        class="col-md-6 col-12"
        input-debounce="0"
        option-value="value"
        option-label="label"
        v-model="checkup.medicalBenefitScheme"
        :dense="dense"
        :readonly="readonly || checkup.statusSave"
        :hide-dropdown-icon="readonly || checkup.statusSave"
        :options="medicalBenefitOptions"
        :for="`${prefixId}-select-province`"
        :label="$t('customerEmployee.formHealthCheck.medicalBenefit')"
        @filter="medicalBenefitFilter"
      >
        <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
        :label="$t('general.remark')"
        :dense="dense"
        outlined
        :readonly="readonly || checkup.statusSave"
        hide-bottom-space
        class="col-12"
        v-model="checkup.remark"
        type="textarea"
        :for="`${prefixId}-input-remark`"
      />
    </div>
  </div>
</template>

<style scoped></style>