jws-frontend/src/components/02_personnel-management/FormInformation.vue

<script setup lang="ts">
import useUserStore from 'src/stores/user';
import { selectFilterOptionRefMod } from 'src/stores/utils';
import { onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';

const userStore = useUserStore();
const { t } = useI18n();

const hqId = defineModel<string | null | undefined>('hqId');
const brId = defineModel<string | null | undefined>('brId');
const userType = defineModel<string>('userType');
const userRole = defineModel<string>('userRole');
const username = defineModel<string | null | undefined>('username');
const userCode = defineModel<string>('userCode');

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

async function selectHq(id: string) {
  if (!id) return;
  brId.value = '';
  userStore.userOption.brOpts = [];
  await userStore.fetchBrOption(id);
  if (userStore.userOption.brOpts.length === 1) {
    brId.value = userStore.userOption.brOpts[0].value;
  }
}

const hqOptions = ref<Record<string, unknown>[]>([]);
const hqFilter = selectFilterOptionRefMod(
  ref(userStore.userOption.hqOpts),
  hqOptions,
  'label',
);

const brOptions = ref<Record<string, unknown>[]>([]);
const brFilter = selectFilterOptionRefMod(
  ref(userStore.userOption.brOpts),
  brOptions,
  'label',
);

const userTypeOptions = ref<Record<string, unknown>[]>([]);
const userTypeFilter = selectFilterOptionRefMod(
  ref(
    userStore.userOption.userTypeOpts.map((v) => ({
      label: t(v.label),
      value: v.value,
    })),
  ),
  userTypeOptions,
  'label',
);

const roleOptions = ref<Record<string, unknown>[]>([]);
const roleFilter = selectFilterOptionRefMod(
  ref(userStore.userOption.roleOpts),
  roleOptions,
  'label',
);

onMounted(async () => {
  if (userStore.userOption.hqOpts[0].value)
    await userStore.fetchBrOption(userStore.userOption.hqOpts[0].value);
});
</script>
<template>
  <div class="col-md-3 col-12 app-text-muted">
    • {{ $t('formDialogTitleInformation') }}
  </div>
  <div class="col-md-9 col-12 row q-col-gutter-md">
    <q-select
      outlined
      clearable
      use-input
      fill-input
      emit-value
      map-options
      hide-selected
      hide-bottom-space
      v-model="hqId"
      for="select-hq-id"
      input-debounce="0"
      option-label="label"
      option-value="value"
      lazy-rules="ondemand"
      class="col-md-4 col-6"
      :dense="dense"
      :readonly="readonly"
      :hide-dropdown-icon="readonly"
      :label="$t('formDialogInputCode')"
      :options="hqOptions"
      :rules="[(val: string) => !!val || $t('formDialogInputHqIdValidate')]"
      @update:model-value="(val: string) => selectHq(val)"
      @filter="hqFilter"
    >
      <template v-slot:no-option>
        <q-item>
          <q-item-section class="text-grey">
            {{ $t('noResults') }}
          </q-item-section>
        </q-item>
      </template>
    </q-select>
    <q-select
      outlined
      clearable
      use-input
      fill-input
      emit-value
      map-options
      hide-selected
      hide-bottom-space
      v-model="brId"
      for="select-br-id"
      input-debounce="0"
      option-label="label"
      option-value="value"
      lazy-rules="ondemand"
      class="col-md-4 col-6"
      :dense="dense"
      :readonly="readonly"
      :hide-dropdown-icon="readonly"
      :label="$t('formDialogInputBrId')"
      :options="brOptions"
      @filter="brFilter"
    >
      <template v-slot:no-option>
        <q-item>
          <q-item-section class="text-grey">
            {{ $t('noResults') }}
          </q-item-section>
        </q-item>
      </template>
    </q-select>
    <q-input
      lazy-rules="ondemand"
      for="input-username"
      :dense="dense"
      outlined
      :readonly="usernameReadonly"
      emit-value
      map-options
      options-dense
      hide-bottom-space
      class="col-md-4 col-12"
      :label="$t('formDialogInputUsername')"
      v-model="username"
      :rules="[
        (val: string) =>
          val.length > 2 || $t('formDialogInputUsernameValidate'),
      ]"
    />
    <q-select
      outlined
      clearable
      use-input
      fill-input
      emit-value
      map-options
      hide-selected
      hide-bottom-space
      class="col-6"
      v-model="userType"
      input-debounce="0"
      option-value="value"
      option-label="label"
      lazy-rules="ondemand"
      for="select-user-type"
      :dense="dense"
      :readonly="readonly"
      :hide-dropdown-icon="readonly"
      :label="$t('formDialogInputUserType')"
      :options="userTypeOptions"
      :rules="[(val: string) => !!val || $t('formDialogInputUserTypeValidate')]"
      @filter="userTypeFilter"
    >
      <template v-slot:no-option>
        <q-item>
          <q-item-section class="text-grey">
            {{ $t('noResults') }}
          </q-item-section>
        </q-item>
      </template>
    </q-select>
    <q-select
      outlined
      clearable
      use-input
      fill-input
      emit-value
      map-options
      hide-selected
      hide-bottom-space
      class="col-6"
      input-debounce="0"
      option-label="label"
      option-value="value"
      lazy-rules="ondemand"
      for="select-user-role"
      :dense="dense"
      v-model="userRole"
      :readonly="readonly"
      :hide-dropdown-icon="readonly"
      :label="$t('formDialogInputUserRole')"
      :options="roleOptions"
      :rules="[(val: string) => !!val || $t('formDialogInputUserRoleValidate')]"
      @filter="roleFilter"
    >
      <template v-slot:no-option>
        <q-item>
          <q-item-section class="text-grey">
            {{ $t('noResults') }}
          </q-item-section>
        </q-item>
      </template>
    </q-select>
    <!-- <q-input lazy-rules="ondemand"
      id="input-user-code"
      :dense="dense"
      :outlined="readonly ? false : outlined"
      :borderless="readonly"
      readonly
      hide-bottom-space
      class="col-3"
      :label="$t('formDialogInputUserCode')"
      v-model="userCode"
    /> -->
  </div>
  <q-separator
    v-if="separator"
    class="col-12 q-mb-md"
    style="padding-block: 0.5px; margin-top: 32px"
  />
</template>