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

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

const optionStore = useOptionStore();

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

const codeOption = ref<{ id: string; name: string }[]>([]);

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

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

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

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

const expenseTypeOptions = ref<Record<string, unknown>[]>([]);
let expenseTypeFilter: (
  value: string,
  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
) => void;

onMounted(() => {
  if (optionStore.globalOption) {
    expenseTypeFilter = selectFilterOptionRefMod(
      ref(optionStore.globalOption.expenseType),
      expenseTypeOptions,
      'label',
    );
  }
});

watch(
  () => optionStore.globalOption,
  () => {
    expenseTypeFilter = selectFilterOptionRefMod(
      ref(optionStore.globalOption.expenseType),
      expenseTypeOptions,
      'label',
    );
  },
);

const detailEditorImageDrop = createEditorImageDrop(detail);
</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(`form.field.basicInformation`) }}
    </div>

    <div class="col-12 row q-col-gutter-sm">
      <q-select
        outlined
        use-input
        fill-input
        emit-value
        map-options
        hide-selected
        hide-bottom-space
        input-debounce="0"
        autocomplete="off"
        :disable="!readonly && disableCode"
        class="col-md-3 col-12"
        v-model="code"
        id="select-br-id"
        for="select-br-id"
        option-label="label"
        option-value="value"
        :dense="dense"
        :readonly="readonly"
        :options="
          codeOptions.sort((a, b) => {
            return String(a.value ?? '').localeCompare(String(b.value ?? ''));
          })
        "
        :label="$t('productService.product.code')"
        :hide-dropdown-icon="readonly || disableCode"
        :rules="[(val: string) => !!val || $t('form.error.required')]"
        @filter="codeFilter"
      >
        <template v-slot:no-option>
          <q-item>
            <q-item-section class="text-grey">
              {{ $t('general.noData') }}
            </q-item-section>
          </q-item>
        </template>
      </q-select>

      <q-input
        for="input-name"
        id="input-name"
        :dense="dense"
        outlined
        :readonly="readonly"
        :borderless="readonly"
        hide-bottom-space
        class="col-md-8 col-12"
        :label="$t('productService.product.name')"
        v-model="name"
        :rules="[(val: string) => !!val || $t('form.error.required')]"
      />
      <q-input
        for="input-process"
        id="input-process"
        :dense="dense"
        outlined
        :readonly="readonly"
        :borderless="readonly"
        hide-bottom-space
        class="col-md-2 col-6"
        :label="$t('productService.product.processingTime')"
        v-model="process"
        type="number"
        min="0"
      >
        <template #prepend>
          <q-icon
            color="primary"
            name="mdi-clock-outline"
            size="xs"
            class="q-mr-xs"
          />
        </template>
      </q-input>
      <q-select
        outlined
        clearable
        use-input
        fill-input
        emit-value
        map-options
        hide-selected
        hide-bottom-space
        autocomplete="off"
        input-debounce="0"
        class="col-md-3 col-6"
        v-model="expenseType"
        id="select-br-id"
        for="select-br-id"
        option-label="label"
        option-value="value"
        lazy-rules="ondemand"
        :dense="dense"
        :readonly="readonly"
        :options="expenseTypeOptions"
        :label="$t('productService.product.expenseType')"
        :hide-dropdown-icon="readonly"
        @filter="expenseTypeFilter"
      >
        <template v-slot:no-option>
          <q-item>
            <q-item-section class="text-grey">
              {{ $t('general.noData') }}
            </q-item-section>
          </q-item>
        </template>
      </q-select>

      <div class="col-12">
        <q-field
          class="full-width"
          outlined
          for="input-detail"
          id="input-detail"
          :readonly="readonly"
          :borderless="readonly"
          :label="$t('general.detail')"
          stack-label
          dense
        >
          <q-editor
            dense
            :model-value="readonly ? detail || '-' : detail"
            @update:model-value="
              (v) => (typeof v === 'string' ? (detail = v) : '')
            "
            @drop="detailEditorImageDrop"
            min-height="5rem"
            class="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);
            "
            :style="`width: ${$q.screen.gt.xs ? '100%' : '63vw'}`"
          />
        </q-field>
      </div>
      <q-input
        for="input-remark"
        id="input-remark"
        :dense="dense"
        outlined
        :readonly="readonly"
        :borderless="readonly"
        hide-bottom-space
        type="textarea"
        class="col-12"
        :label="$t('general.remark')"
        :model-value="readonly ? remark || '-' : remark"
        @update:model-value="(v) => (typeof v === 'string' ? (remark = v) : '')"
      />
    </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>