jws-frontend/src/components/01_branch-management/FormBranchContact.vue

<script setup lang="ts">
const telephoneNo = defineModel<string>('telephoneNo');
const contact = defineModel<string>('contact');
const email = defineModel<string>('email');
const contactName = defineModel<string>('contactName');
// const operatingHours = defineModel<string>('operatingHours');
const lineId = defineModel<string>('lineId');
const typeBranch = defineModel<string>('typeBranch');

defineProps<{
  title?: string;
  dense?: boolean;
  outlined?: boolean;
  readonly?: boolean;
  separator?: boolean;
}>();
</script>
<template>
  <div class="row col-12">
    <div class="col-12 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-phone-outline"
        style="background-color: var(--surface-3)"
      />
      {{ $t(`${title}`) }}
    </div>

    <div class="col-12 row q-col-gutter-sm">
      <q-input
        lazy-rules="ondemand"
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-3"
        :label="
          typeBranch === 'headOffice'
            ? $t('formDialogInputEmailHq')
            : $t('formDialogInputEmailSubBranch')
        "
        for="input-email"
        :model-value="readonly ? email || '-' : email"
        @update:model-value="(v) => (typeof v === 'string' ? (email = v) : '')"
      >
        <template #prepend>
          <q-icon
            color="primary"
            name="mdi-email-outline"
            size="xs"
            class="q-mr-xs"
          />
        </template>
      </q-input>

      <q-input
        lazy-rules="ondemand"
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-3"
        :label="
          typeBranch === 'headOffice'
            ? $t('formDialogInputTelephoneHq')
            : $t('formDialogInputTelephoneSubBranch')
        "
        for="input-telephone-no"
        :model-value="readonly ? telephoneNo || '-' : telephoneNo"
        @update:model-value="
          (v) => (typeof v === 'string' ? (telephoneNo = v) : '')
        "
      >
        <template #prepend>
          <q-icon
            color="primary"
            name="mdi-phone-outline"
            size="xs"
            class="q-mr-xs"
          />
        </template>
      </q-input>

      <q-input
        lazy-rules="ondemand"
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-3"
        label="Line ID"
        for="input-line-id"
        :model-value="readonly ? lineId || '-' : lineId"
        @update:model-value="(v) => (typeof v === 'string' ? (lineId = v) : '')"
      />

      <div class="col-12 row q-col-gutter-sm">
        <q-input
          lazy-rules="ondemand"
          :dense="dense"
          outlined
          :readonly="readonly"
          hide-bottom-space
          class="col-3"
          :label="$t('formDialogInputContactName')"
          for="input-contact-name"
          :model-value="readonly ? contactName || '-' : contactName"
          @update:model-value="
            (v) => (typeof v === 'string' ? (contactName = v) : '')
          "
        />

        <q-input
          lazy-rules="ondemand"
          :dense="dense"
          outlined
          :readonly="readonly"
          hide-bottom-space
          class="col-3"
          :label="$t('formDialogInputTelephoneContact')"
          for="input-contact"
          :model-value="readonly ? contact || '-' : contact"
          @update:model-value="
            (v) => (typeof v === 'string' ? (contact = v) : '')
          "
        >
          <template #prepend>
            <q-icon
              color="primary"
              name="mdi-phone-outline"
              size="xs"
              class="q-mr-xs"
            />
          </template>
        </q-input>
      </div>
    </div>
  </div>
</template>