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

<script setup lang="ts">
import { getRole } from 'src/services/keycloak';
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 props = defineProps<{
  dense?: boolean;
  outlined?: boolean;
  readonly?: boolean;
  separator?: boolean;
  isType?: boolean;
  optionsBranch: { id: string; name: string }[];
}>();

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;
  }

  if (!!props.optionsBranch) {
    registeredBranchId.value = props.optionsBranch[0].id;
  }
});
</script>

<template>
  <div class="col-3 app-text-muted">
    • {{ $t(`formDialogTitleInformation`) }}
  </div>

  <div class="col-9 row q-col-gutter-md">
    <q-select
      id="select-br-id"
      :dense="dense"
      outlined
      :readonly="readonly"
      :hide-dropdown-icon="readonly"
      emit-value
      map-options
      options-dense
      clearable
      hide-bottom-space
      class="col-3"
      v-model="code"
      :label="$t('productCode')"
      option-label="label"
      option-value="value"
      :options="codeOption"
      :rules="[(val: string) => !!val]"
    />

    <q-select
      id="input-source-nationality"
      :dense="dense"
      outlined
      :readonly="readonly"
      :hide-dropdown-icon="readonly"
      hide-bottom-space
      emit-value
      map-options
      options-dense
      :label="$t('registeredBranch')"
      class="col-3"
      option-label="name"
      option-value="id"
      v-model="registeredBranchId"
      :options="optionsBranch"
      :rules="[
        (val) => {
          const roles = getRole() || [];
          const isSpecialRole = ['admin', 'system', 'head_of_admin'].some(
            (role) => roles.includes(role),
          );
          return isSpecialRole || !!val || 'กรุณากรอกข้อมูล';
        },
      ]"
      clearable
    />

    <q-input
      for="input-name"
      :dense="dense"
      outlined
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-6"
      :label="$t('productName')"
      v-model="name"
    />

    <q-input
      for="input-detail"
      :dense="dense"
      outlined
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      type="textarea"
      class="col-12"
      :label="$t('serviceDetail')"
      v-model="detail"
      autogrow
    />

    <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
      for="input-process"
      :dense="dense"
      outlined
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-4"
      :label="$t('productProcessingTime')"
      v-model="process"
      type="number"
    />
  </div>

  <q-separator
    v-if="separator"
    class="col-12 q-mb-md"
    style="padding-block: 0.5px; margin-top: 32px"
  />
</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>