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

<script setup lang="ts">
import { EmployeeOtherCreate } from 'stores/employee/types';
import {
  AddButton,
  EditButton,
  DeleteButton,
  SaveButton,
  UndoButton,
} from 'components/button';

defineProps<{
  dense?: boolean;
  outlined?: boolean;
  readonly?: boolean;
  separator?: boolean;
  employee?: boolean;
  prefixId: string;
}>();

const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
</script>
<template>
  <div class="col-12" v-if="employeeOther">
    <div class="col-12 row items-center q-pb-sm text-weight-bold text-body1">
      <q-icon
        flat
        size="xs"
        class="q-pa-sm rounded q-mr-xs"
        color="info"
        name="mdi-human-male-female-child"
        style="background-color: var(--surface-3)"
      />
      {{ $t('formDialogTitleFamilyHistory') }}

      <div class="row q-ml-auto">
        <UndoButton
          v-if="!readonly && !!employeeOther.id && !employeeOther.statusSave"
          id="btn-info-health-undo"
          icon-only
          @click="$emit('undo')"
          type="button"
        />
        <SaveButton
          icon-only
          type="submit"
          id="btn-info-health-save"
          v-if="!readonly && !employeeOther.statusSave"
          @click="$emit('save')"
        />
        <EditButton
          icon-only
          id="btn-info-health-edit"
          v-if="!readonly && employeeOther.statusSave"
          @click="$emit('edit')"
          type="button"
        />
        <DeleteButton
          icon-only
          id="btn-info-health-delete"
          v-if="readonly"
          @click="$emit('delete')"
          type="button"
        />
      </div>
    </div>

    <div class="col-12 row q-col-gutter-y-sm">
      <div class="col-12 row q-col-gutter-sm">
        <q-input
          lazy-rules="ondemand"
          :for="`${prefixId}-input-citizen-id`"
          :dense="dense"
          outlined
          :readonly="readonly || employeeOther.statusSave"
          hide-bottom-space
          :label="$t('formDialogInputCitizenId')"
          class="col"
          v-model="employeeOther.citizenId"
        />
      </div>
      <div class="col-12 app-text-muted-2">
        <q-icon size="xs" class="q-mr-xs" name="mdi-human-male" />
        {{ $t('formDialogTitleFamilyHistoryDad') }}
      </div>
      <div class="col-12 row q-col-gutter-sm">
        <q-input
          lazy-rules="ondemand"
          :for="`${prefixId}-input-father-first-name`"
          :dense="dense"
          outlined
          :readonly="readonly || employeeOther.statusSave"
          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 || employeeOther.statusSave"
          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 || employeeOther.statusSave"
          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 || employeeOther.statusSave"
          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 || employeeOther.statusSave"
          hide-bottom-space
          class="col-6"
          :label="$t('formDialogInputFamilyBirthPlace')"
          v-model="employeeOther.fatherBirthPlace"
        />
      </div>

      <div class="col-12 app-text-muted-2">
        <q-icon size="xs" class="q-mr-xs" name="mdi-human-female" />
        {{ $t('formDialogTitleFamilyHistoryMom') }}
      </div>
      <div class="col-12 row q-col-gutter-sm">
        <q-input
          lazy-rules="ondemand"
          :for="`${prefixId}-input-mother-first-name`"
          :dense="dense"
          outlined
          :readonly="readonly || employeeOther.statusSave"
          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 || employeeOther.statusSave"
          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 || employeeOther.statusSave"
          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 || employeeOther.statusSave"
          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 || employeeOther.statusSave"
          hide-bottom-space
          class="col-6"
          :label="$t('formDialogInputFamilyBirthPlace')"
          v-model="employeeOther.motherBirthPlace"
        />
      </div>
    </div>
  </div>
</template>