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 webUrl = defineModel<string>('webUrl');
// 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
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-12 col-md-4"
        :label="$t('form.email')"
        :rules="
          readonly
            ? undefined
            : [
                (v: string) =>
                  !v ||
                  /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g.test(v) ||
                  $t('form.error.invalid'),
              ]
        "
        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
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-6 col-md-4"
        :label="$t('form.telephone')"
        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
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-6 col-md-4"
        label="Line ID"
        for="input-line-id"
        :model-value="readonly ? lineId || '-' : lineId"
        @update:model-value="(v) => (typeof v === 'string' ? (lineId = v) : '')"
      />

      <q-input
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-6 col-md-4"
        :label="$t('branch.form.contactName')"
        for="input-contact-name"
        :model-value="readonly ? contactName || '-' : contactName"
        @update:model-value="
          (v) => (typeof v === 'string' ? (contactName = v) : '')
        "
      />

      <q-input
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-6 col-md-4"
        :label="$t('branch.form.contactTelephone')"
        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>

      <q-input
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-6 col-md-4"
        :label="$t('branch.form.webUrl')"
        for="input-web-url"
        :model-value="readonly ? webUrl || '-' : webUrl"
        @update:model-value="(v) => (typeof v === 'string' ? (webUrl = v) : '')"
      >
        <template #prepend>
          <q-icon color="primary" name="mdi-web" size="xs" class="q-mr-xs" />
        </template>
      </q-input>
    </div>
  </div>
</template>