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"
        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-md-3 col-12"
        :label="
          typeBranch === 'headOffice'
            ? $t('formDialogInputEmailHq')
            : $t('formDialogInputEmailSubBranch')
        "
        v-model="email"
        for="input-email"
      >
        <template #prepend>
          <q-icon color="primary" name="mdi-email" size="xs" class="q-mr-xs" />
        </template>
      </q-input>

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

      <q-input
        lazy-rules="ondemand"
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-md-3 col-12"
        :label="$t('formDialogInputContactName')"
        v-model="contactName"
        for="input-contact-name"
      />

      <q-input
        lazy-rules="ondemand"
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-3"
        :label="$t('formDialogInputTelephoneContact')"
        v-model="contact"
        for="input-contact"
      >
        <template #prepend>
          <q-icon color="primary" name="mdi-phone" 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"
        v-model="lineId"
        for="input-line-id"
      />
    </div>
  </div>
</template>