jws-frontend/src/components/07_agencies-management/FormBasicInfoAgencies.vue

<script lang="ts" setup>
import SelectInput from '../shared/SelectInput.vue';
import useOptionStore from 'src/stores/options';

const optionStore = useOptionStore();

defineProps<{
  dense?: boolean;
  outlined?: boolean;
  readonly?: boolean;
  onDrawer?: boolean;
}>();

const group = defineModel('group', { default: '' });
const name = defineModel('name', { default: '' });
const nameEn = defineModel('nameEn', { default: '' });

type Options = { label: string; value: string };
</script>
<template>
  <div class="row col-12">
    <div class="col-12 q-pb-sm row items-center">
      <q-icon
        flat
        size="xs"
        class="q-pa-sm rounded q-mr-sm"
        color="info"
        name="mdi-office-building-outline"
        style="background-color: var(--surface-3)"
      />
      <span class="text-body1 text-weight-bold">
        {{ $t(`form.field.basicInformation`) }}
      </span>
    </div>

    <div class="col-12 row q-col-gutter-sm">
      <SelectInput
        :class="{ col: $q.screen.lt.md }"
        :disable="!readonly && onDrawer"
        :readonly="readonly"
        for="input-agencies-code"
        :label="$t('agencies.group')"
        option-label="value"
        :option="
          optionStore.globalOption?.agenciesType.sort(
            (lhs: Options, rhs: Options) => lhs.value.localeCompare(rhs.value),
          )
        "
        :rules="[(val: string) => !!val || $t('form.error.required')]"
        v-model="group"
      >
        <template v-slot:option="{ scope, opt }">
          <q-item v-bind="scope.itemProps" clickable>
            {{ opt.value }} ({{ opt.label }})
          </q-item>
        </template>
      </SelectInput>

      <q-input
        for="input-agencies-name"
        dense
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-md col-12"
        :label="$t('agencies.name')"
        v-model="name"
        :rules="[(val: string) => !!val || $t('form.error.required')]"
      />
      <q-input
        for="input-agencies-name-en"
        dense
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-md col-12"
        :label="'Agencies Name'"
        v-model="nameEn"
      />
    </div>
  </div>
</template>
<style scoped></style>