jws-frontend/src/components/04_product-service/BasicInfoProduct.vue

<script setup lang="ts">
import { QSelect } from 'quasar';
import { getRole } from 'src/services/keycloak';
import { selectFilterOptionRefMod } from 'stores/utils';
import { ref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
const { locale } = useI18n({ useScope: 'global' });

const remark = defineModel<string>('remark', { default: '' });
const detail = defineModel<string>('detail');
const process = defineModel<number>('process');
const name = defineModel<string>('name');
const code = defineModel<string>('code');

const registeredBranchId = defineModel<string>('registeredBranchId');
const codeOption = ref<{ id: string; name: string }[]>([]);
const optionsBranch = defineModel<{ id: string; name: string }[]>(
  'optionsBranch',
  { default: [] },
);

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

onMounted(async () => {
  const resultOption = await fetch('/option/option.json');
  const option = await resultOption.json();

  if (locale.value === 'en-US') {
    codeOption.value = option.eng.typeProduct;
  }
  if (locale.value === 'th-th') {
    codeOption.value = option.tha.typeProduct;
  }
});

const codeOptions = ref<Record<string, unknown>[]>([]);
const codeFilter = selectFilterOptionRefMod(codeOption, codeOptions, 'label');

const branchOptions = ref<Record<string, unknown>[]>([]);
const branchFilter = selectFilterOptionRefMod(
  optionsBranch,
  branchOptions,
  'name',
);
</script>

<template>
  <div class="row col-12">
    <div class="col-12 q-pb-sm text-weight-bold text-body1 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)"
      />
      {{ $t(`formDialogTitleInformation`) }}
    </div>

    <div class="col-12 row q-col-gutter-sm">
      <q-select
        outlined
        clearable
        use-input
        fill-input
        emit-value
        map-options
        hide-selected
        hide-bottom-space
        input-debounce="0"
        class="col-3"
        v-model="code"
        id="select-br-id"
        option-label="label"
        option-value="value"
        lazy-rules="ondemand"
        :dense="dense"
        :readonly="readonly"
        :options="codeOptions"
        :label="$t('productCode')"
        :hide-dropdown-icon="readonly"
        :rules="[(val: string) => !!val]"
        @filter="codeFilter"
      >
        <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
        input-debounce="0"
        class="col-3"
        option-value="id"
        option-label="name"
        lazy-rules="ondemand"
        id="input-source-nationality"
        v-model="registeredBranchId"
        :dense="dense"
        :readonly="readonly"
        :options="branchOptions"
        :hide-dropdown-icon="readonly"
        :label="$t('registeredBranch')"
        :rules="[
          (val) => {
            const roles = getRole() || [];
            const isSpecialRole = ['admin', 'system', 'head_of_admin'].some(
              (role) => roles.includes(role),
            );
            return isSpecialRole || !!val || 'กรุณากรอกข้อมูล';
          },
        ]"
        @filter="branchFilter"
      >
        <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-name"
        :dense="dense"
        outlined
        :readonly="readonly"
        :borderless="readonly"
        hide-bottom-space
        class="col-6"
        :label="$t('productName')"
        v-model="name"
      />
      <q-input
        lazy-rules="ondemand"
        for="input-process"
        :dense="dense"
        outlined
        :readonly="readonly"
        :borderless="readonly"
        hide-bottom-space
        class="col-3"
        :label="$t('productProcessingTime')"
        v-model="process"
        type="number"
      />
      <q-input
        lazy-rules="ondemand"
        for="input-detail"
        :dense="dense"
        outlined
        :readonly="readonly"
        :borderless="readonly"
        hide-bottom-space
        type="textarea"
        class="col-12"
        :label="$t('serviceDetail')"
        v-model="detail"
      />

      <div class="col-12">
        <q-field
          class="full-width"
          outlined
          :readonly="readonly"
          :borderless="readonly"
          :label="$t('detail')"
          stack-label
          dense
        >
          <q-editor
            dense
            v-model="remark"
            min-height="5rem"
            class="full-width q-mt-sm q-mb-xs"
            :flat="!readonly"
            :readonly="readonly"
            :toolbar-color="
              readonly ? 'disabled' : $q.dark.isActive ? 'white' : ''
            "
            :toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
            style="
              cursor: auto;
              color: var(--foreground);
              border-color: var(--surface-3);
            "
          />
        </q-field>
      </div>
      <!-- <q-input
        lazy-rules="ondemand"
        for="input-detail"
        :dense="dense"
        outlined
        :readonly="readonly"
        :borderless="readonly"
        hide-bottom-space
        type="textarea"
        class="col-12"
        :label="$t('formDialogInputRemark')"
        v-model="detail"
      /> -->
    </div>
  </div>
</template>

<style scoped>
.q-editor__toolbar {
  border-bottom: none !important;
}

:deep(.q-editor__toolbar.row.no-wrap.scroll-x) {
  background-color: var(--surface-2) !important;
}

:deep(.q-editor__toolbar) {
  border-color: var(--surface-3) !important;
}
</style>