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

<script setup lang="ts">
import { EmployeeOtherCreate } from 'stores/employee/types';

withDefaults(
  defineProps<{
    dense?: boolean;
    outlined?: boolean;
    readonly?: boolean;
    separator?: boolean;
    employee?: boolean;
    prefixId: string;
    showBtnSave: boolean;
  }>(),
  {
    showBtnSave: false,
  },
);
const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
</script>
<template>
  <div class="col-12" v-if="employeeOther">
    <div class="col-12 app-text-muted row items-center q-mb-md">
      • {{ $t('formDialogTitleFamilyHistory') }}
    </div>

    <div class="col-12 row q-col-gutter-y-md">
      <div v-if="$q.screen.gt.sm" class="col-3 q-pl-xl"></div>
      <div class="col-md-9 col-12 row q-col-gutter-md">
        <q-input
          lazy-rules="ondemand"
          :for="`${prefixId}-input-citizen-id`"
          :dense="dense"
          outlined
          :readonly="readonly"
          hide-bottom-space
          :label="$t('formDialogInputCitizenId')"
          class="col"
          v-model="employeeOther.citizenId"
        />
      </div>
      <div
        class="col-md-3 col-12 app-text-muted"
        :class="{ 'q-pl-xl': $q.screen.gt.sm }"
      >
        {{ $t('formDialogTitleFamilyHistoryDad') }}
      </div>
      <div class="col-md-9 col-12 row q-col-gutter-md">
        <q-input
          lazy-rules="ondemand"
          :for="`${prefixId}-input-father-first-name`"
          :dense="dense"
          outlined
          :readonly="readonly"
          hide-bottom-space
          class="col-md-3 col-6"
          :label="$t('formDialogInputFirstName')"
          v-model="employeeOther.fatherFirstName"
        />
        <q-input
          lazy-rules="ondemand"
          :for="`${prefixId}-input-father-last-name`"
          :dense="dense"
          outlined
          :readonly="readonly"
          hide-bottom-space
          class="col-md-3 col-6"
          :label="$t('formDialogInputLastName')"
          v-model="employeeOther.fatherLastName"
        />
        <q-input
          lazy-rules="ondemand"
          :for="`${prefixId}-input-father-first-name-en`"
          :dense="dense"
          outlined
          :readonly="readonly"
          hide-bottom-space
          class="col-md-3 col-6"
          :label="$t('formDialogInputFirstNameEN')"
          v-model="employeeOther.fatherFirstNameEN"
        />
        <q-input
          lazy-rules="ondemand"
          :for="`${prefixId}-input-father-last-name-en`"
          :dense="dense"
          outlined
          :readonly="readonly"
          hide-bottom-space
          class="col-md-3 col-6"
          :label="$t('formDialogInputLastNameEN')"
          v-model="employeeOther.fatherLastNameEN"
        />
        <q-input
          lazy-rules="ondemand"
          :for="`${prefixId}-input-father-birthplace`"
          :dense="dense"
          outlined
          :readonly="readonly"
          hide-bottom-space
          class="col-6"
          :label="$t('formDialogInputFamilyBirthPlace')"
          v-model="employeeOther.fatherBirthPlace"
        />
      </div>
      <div class="col-12" />
      <div
        class="col-md-3 col-12 app-text-muted"
        :class="{ 'q-pl-xl': $q.screen.gt.sm }"
      >
        {{ $t('formDialogTitleFamilyHistoryMom') }}
      </div>
      <div class="col-md-9 col-12 row q-col-gutter-md">
        <q-input
          lazy-rules="ondemand"
          :for="`${prefixId}-input-mother-first-name`"
          :dense="dense"
          outlined
          :readonly="readonly"
          hide-bottom-space
          class="col-md-3 col-6"
          :label="$t('formDialogInputFirstName')"
          v-model="employeeOther.motherFirstName"
        />
        <q-input
          lazy-rules="ondemand"
          :for="`${prefixId}-input-mother-last-name`"
          :dense="dense"
          outlined
          :readonly="readonly"
          hide-bottom-space
          class="col-md-3 col-6"
          :label="$t('formDialogInputLastName')"
          v-model="employeeOther.motherLastName"
        />
        <q-input
          lazy-rules="ondemand"
          :for="`${prefixId}-input-mother-first-name-en`"
          :dense="dense"
          outlined
          :readonly="readonly"
          hide-bottom-space
          class="col-md-3 col-6"
          :label="$t('formDialogInputFirstNameEN')"
          v-model="employeeOther.motherFirstNameEN"
        />
        <q-input
          lazy-rules="ondemand"
          :for="`${prefixId}-input-mother-last-name-en`"
          :dense="dense"
          outlined
          :readonly="readonly"
          hide-bottom-space
          class="col-md-3 col-6"
          :label="$t('formDialogInputLastNameEN')"
          v-model="employeeOther.motherLastNameEN"
        />
        <q-input
          lazy-rules="ondemand"
          :for="`${prefixId}-input-mother-birthplace`"
          :dense="dense"
          outlined
          :readonly="readonly"
          hide-bottom-space
          class="col-6"
          :label="$t('formDialogInputFamilyBirthPlace')"
          v-model="employeeOther.motherBirthPlace"
        />
      </div>

      <div class="col-12 row justify-end" style="min-height: 50px">
        <q-btn
          v-if="!readonly && showBtnSave"
          dense
          unelevated
          id="save-basic-info"
          color="primary"
          class="q-px-md"
          :label="$t('save')"
          @click="$emit('save')"
        />
      </div>
    </div>
  </div>
  <q-separator
    v-if="separator"
    class="col-12 q-mb-md"
    style="padding-block: 0.5px; margin-top: 32px"
  />
</template>