Merge pull request #190 from Frappet/feat/4-property-managment

feat: property managment

src/components/04_flow-management/FormFlow.vue

@@ -455,7 +455,12 @@ onMounted(async () => {
                           :key="i"
                           class="surface-2 bordered rounded q-px-xs"
                         >
-                          {{ optionStore.mapOption(att.fieldName ?? '') }}
+                          {{
+                            optionStore.mapOption(
+                              att.fieldName ?? '',
+                              'propertiesField',
+                            )
+                          }}
                         </span>
                       </section>
                     </div>

src/components/04_product-service/WorkManagementComponent.vue

@@ -584,7 +584,12 @@ watch(
                         :key="i"
                         class="surface-2 bordered rounded q-px-xs"
                       >
-                        {{ optionStore.mapOption(att.fieldName ?? '') }}
+                        {{
+                          optionStore.mapOption(
+                            att.fieldName ?? '',
+                            'propertiesField',
+                          )
+                        }}
                       </span>
                     </div>
                     <div v-else class="app-text-muted-2">

src/components/04_property-management/FormProperty.vue

@@ -0,0 +1,226 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { getRole } from 'src/services/keycloak';
+import SelectBranch from '../shared/select/SelectBranch.vue';
+import SelectInput from '../shared/SelectInput.vue';
+import ToggleButton from '../button/ToggleButton.vue';
+import { Status } from 'src/stores/types';
+
+const name = defineModel<string>('name');
+const nameEN = defineModel<string>('nameEn');
+const type = defineModel<Record<string, any>>('type');
+const registeredBranchId = defineModel<string>('registeredBranchId');
+const status = defineModel<Status>('status');
+
+const isAdmin = computed(() => {
+  const roles = getRole() || [];
+  return roles.includes('system');
+});
+
+const typeOption = [
+  {
+    label: 'Text',
+    value: 'string',
+    color: 'var(--pink-6-hsl)',
+    icon: 'mdi-alpha-t',
+  },
+  {
+    label: 'Number',
+    value: 'number',
+    color: 'var(--purple-11-hsl)',
+    icon: 'mdi-numeric',
+  },
+  {
+    label: 'Date',
+    value: 'date',
+    color: 'var(--green-9-hsl)',
+    icon: 'mdi-calendar-blank-outline',
+  },
+  {
+    label: 'Selection',
+    value: 'array',
+    color: 'var(--indigo-7-hsl)',
+    icon: 'mdi-code-array',
+  },
+];
+
+defineProps<{
+  readonly?: boolean;
+  onDrawer?: boolean;
+  inputOnly?: boolean;
+}>();
+
+defineEmits<{
+  (e: 'changeStatus'): void;
+}>();
+</script>
+
+<template>
+  <div
+    :class="{ 'surface-1 rounded bordered': readonly }"
+    style="border: 1px solid transparent"
+  >
+    <div class="col-12 q-pb-sm text-weight-bold text-body1 row items-center">
+      <q-icon
+        size="xs"
+        class="q-pa-sm rounded q-mr-xs"
+        color="info"
+        name="mdi-map-marker-radius-outline"
+        style="background-color: var(--surface-3)"
+      />
+      {{ $t('general.information', { msg: $t('property.title') }) }}
+      <span
+        class="row items-center text-weight-regular text-body2"
+        :class="{ 'q-ml-lg': $q.screen.gt.xs, 'q-mt-sm': $q.screen.lt.sm }"
+      >
+        <ToggleButton
+          class="q-mr-sm"
+          two-way
+          :model-value="status !== 'INACTIVE'"
+          @click="
+            () => {
+              onDrawer
+                ? $emit('changeStatus')
+                : status !== 'INACTIVE'
+                  ? (status = 'INACTIVE')
+                  : (status = 'CREATED');
+            }
+          "
+        />
+        {{ $t('status.title') }}
+      </span>
+    </div>
+
+    <div class="q-col-gutter-sm row">
+      <SelectBranch
+        v-if="isAdmin"
+        v-model:value="registeredBranchId"
+        :label="$t('quotation.branchVirtual')"
+        class="col-12"
+        :class="{
+          'field-one': inputOnly && $q.screen.gt.sm,
+          'q-mb-sm': inputOnly && $q.screen.lt.md,
+        }"
+        simple
+        required
+        :readonly
+      />
+      <q-input
+        :for="`input-name-${onDrawer ? 'drawer' : 'dialog'}`"
+        :bg-color="readonly ? 'transparent' : ''"
+        :readonly
+        class="col-md-6 col-12"
+        hide-bottom-space
+        dense
+        outlined
+        :label="$t('property.dialog.name')"
+        :model-value="!readonly ? name : name || '-'"
+        @update:model-value="(v) => (name = v?.toString() || '')"
+        :rules="[(val: string) => !!val || $t('form.error.required')]"
+      />
+
+      <q-input
+        :for="`input-nameEn-${onDrawer ? 'drawer' : 'dialog'}`"
+        :bg-color="readonly ? 'transparent' : ''"
+        :readonly
+        class="col-md-6 col-12"
+        hide-bottom-space
+        dense
+        outlined
+        :label="$t('property.dialog.nameEn')"
+        :model-value="!readonly ? nameEN : nameEN || '-'"
+        @update:model-value="(v) => (nameEN = v?.toString() || '')"
+        :rules="[(val: string) => !!val || $t('form.error.required')]"
+      />
+
+      <SelectInput
+        hide-input
+        :fill-input="false"
+        :hide-selected="false"
+        :readonly
+        :for="`input-type-${onDrawer ? 'drawer' : 'dialog'}`"
+        :label="$t('property.dialog.type')"
+        class="col-md-6 col-12"
+        v-model="type.type"
+        :option="typeOption"
+        :rules="[(val: string) => !!val || $t('form.error.required')]"
+      >
+        <template v-slot:option="{ scope }">
+          <q-item
+            v-if="scope.opt"
+            v-bind="scope.itemProps"
+            class="row items-center col-12"
+            :id="`type-${scope.itemProps}`"
+          >
+            <q-avatar
+              size="sm"
+              class="q-mr-md"
+              :style="`background-color: hsla(${scope.opt.color}/0.2)`"
+            >
+              <q-icon
+                size="20px"
+                :name="scope.opt.icon"
+                :style="`color: hsl(${scope.opt.color})`"
+              />
+            </q-avatar>
+            {{ scope.opt.label }}
+          </q-item>
+        </template>
+
+        <template v-slot:selected-item="{ scope }">
+          <div v-if="scope.opt" class="row items-center col-12">
+            <q-avatar
+              size="xs"
+              class="q-mr-sm"
+              :style="`background-color: hsla(${scope.opt.color}/0.2)`"
+            >
+              <q-icon
+                size="14px"
+                :name="scope.opt.icon"
+                :style="`color: hsl(${scope.opt.color})`"
+              />
+            </q-avatar>
+            {{ scope.opt.label }}
+          </div>
+        </template>
+      </SelectInput>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+:deep(.responsible-search .q-field__control) {
+  height: 36px;
+  font-size: 12px;
+}
+
+:deep(
+    .q-item__section.column.q-item__section--side.justify-center.q-item__section--avatar.q-focusable.relative-position.cursor-pointer
+  ) {
+  justify-content: start !important;
+  padding-right: 8px !important;
+  padding-top: 16px;
+  min-width: 0px;
+}
+
+:deep(i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon) {
+  color: hsl(var(--text-mute));
+}
+
+:deep(
+    i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated
+  ) {
+  color: var(--brand-1);
+}
+
+:deep(
+    .q-item.q-item-type.row.no-wrap.q-item--dense.q-item--clickable.q-link.cursor-pointer.q-focusable.q-hoverable.expansion-rounded.surface-2
+      .q-focus-helper
+  ) {
+  visibility: hidden;
+}
+
+:deep(.q-dialog.fullscreen.no-pointer-events.q-dialog--modal) {
+  visibility: hidden;
+}
+</style>

src/components/dialog/DialogProperties.vue

@@ -1,10 +1,17 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
-import { moveItemUp, moveItemDown, dialog, deleteItem } from 'stores/utils';
+import {
+  moveItemUp,
+  moveItemDown,
+  dialog,
+  deleteItem,
+  toCamelCase,
+} from 'stores/utils';
 import { useI18n } from 'vue-i18n';
 
 import useOptionStore from 'src/stores/options';
 import { useWorkflowTemplate } from 'src/stores/workflow-template';
+import { useProperty } from 'src/stores/property';
 import { Option } from 'stores/options/types';
 import {
   WorkFlowPayloadStep,
@@ -17,6 +24,8 @@ import DialogForm from '../DialogForm.vue';
 
 const { t } = useI18n();
 const { getWorkflowTemplate } = useWorkflowTemplate();
+const { getPropertyList } = useProperty();
+const { locale } = useI18n();
 const optionStore = useOptionStore();
 
 const props = defineProps<{
@@ -261,7 +270,7 @@ function confirmDelete(items: unknown[], index: number) {
   });
 }
 
-function assignTemp() {
+async function assignTemp() {
   propertiesOption.value = optionStore.globalOption?.propertiesField;
 
   tempStep.value = JSON.parse(JSON.stringify(dataStep.value));

src/i18n/eng.ts

@@ -1450,4 +1450,20 @@ export default {
     11: 'November',
     12: 'December',
   },
+
+  property: {
+    title: 'Property',
+    caption: 'Manage Properties',
+    table: {
+      name: 'Name',
+      nameEn: 'English Name',
+      type: 'Type',
+    },
+    dialog: {
+      title: '',
+      name: 'Name',
+      nameEn: 'English Name',
+      type: 'Type',
+    },
+  },
 };

src/i18n/tha.ts

@@ -194,6 +194,7 @@ export default {
       personnel: 'บุคลากร',
       productService: 'สินค้าและบริการ',
       workflow: 'ขั้นตอนการทำงาน',
+      property: 'คุณสมบัติ',
       customer: 'ลูกค้า',
       mainData: 'ข้อมูลหลัก',
       agencies: 'หน่วยงาน',
@@ -1431,4 +1432,20 @@ export default {
     11: 'พฤศจิกายน',
     12: 'ธันวาคม',
   },
+
+  property: {
+    title: 'คุณสมบัติ',
+    caption: 'จัดการคุณสมบัติ',
+    table: {
+      name: 'ชื่อ',
+      nameEn: 'ชื่อภาษาอังกฤษ',
+      type: 'ประเภท',
+    },
+    dialog: {
+      title: '',
+      name: 'ชื่อ',
+      nameEn: 'ชื่อภาษาอังกฤษ',
+      type: 'ประเภท',
+    },
+  },
 };

src/layouts/DrawerComponent.vue

@@ -120,6 +120,15 @@ onMounted(async () => {
           ),
         },
         { label: 'workflow', route: '/workflow' },
+        {
+          label: 'property',
+          route: '/property',
+          hidden: !(
+            role.value.includes('admin') ||
+            role.value.includes('head_of_admin') ||
+            role.value.includes('system')
+          ),
+        },
         { label: 'productService', route: '/product-service' },
         { label: 'customer', route: '/customer-management' },
         { label: 'agencies', route: '/agencies-management' },

src/pages/04_property-managment/MainPage.vue

@@ -0,0 +1,875 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
+import { onMounted, reactive, ref } from 'vue';
+import { QSelect, QTableProps } from 'quasar';
+import { useNavigator } from 'src/stores/navigator';
+import { useProperty } from 'src/stores/property';
+import { useQuasar } from 'quasar';
+import StatCardComponent from 'src/components/StatCardComponent.vue';
+import NoData from 'src/components/NoData.vue';
+import { watch } from 'vue';
+import KebabAction from 'src/components/shared/KebabAction.vue';
+import { FloatingActionButton, PaginationComponent } from 'src/components';
+import PaginationPageSize from 'src/components/PaginationPageSize.vue';
+import PropertyDialog from './PropertyDialog.vue';
+import { Property } from 'src/stores/property/types';
+import { dialog } from 'src/stores/utils';
+import CreateButton from 'src/components/AddButton.vue';
+
+const { t } = useI18n();
+const $q = useQuasar();
+const navigatorStore = useNavigator();
+const propertyStore = useProperty();
+const {
+  data: propertyData,
+  page: propertyPage,
+  pageSize: propertyPageSize,
+  pageMax: propertyPageMax,
+} = storeToRefs(propertyStore);
+
+const currPropertyData = ref<Property>();
+const formProperty = ref<Property>({
+  name: '',
+  nameEN: '',
+  type: {},
+});
+const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
+const refFilter = ref<InstanceType<typeof QSelect>>();
+const fieldSelected = ref<('order' | 'name' | 'type')[]>([
+  'order',
+  'name',
+  'type',
+]);
+const fieldSelectedOption = ref<{ label: string; value: string }[]>([
+  {
+    label: 'general.order',
+    value: 'order',
+  },
+  {
+    label: 'property.table.name',
+    value: 'name',
+  },
+  {
+    label: 'property.table.type',
+    value: 'type',
+  },
+]);
+
+const columns = [
+  {
+    name: 'order',
+    align: 'center',
+    label: 'general.order',
+    field: 'order',
+  },
+  {
+    name: 'name',
+    align: 'center',
+    label: 'property.table.name',
+    field: 'order',
+  },
+
+  {
+    name: 'type',
+    align: 'center',
+    label: 'property.table.type',
+    field: 'type',
+  },
+] satisfies QTableProps['columns'];
+
+const typeOption = {
+  string: {
+    label: 'Text',
+    value: 'string',
+    color: 'var(--pink-6-hsl)',
+    icon: 'mdi-alpha-t',
+  },
+  number: {
+    label: 'Number',
+    value: 'number',
+    color: 'var(--purple-11-hsl)',
+    icon: 'mdi-numeric',
+  },
+  date: {
+    label: 'Date',
+    value: 'date',
+    color: 'var(--green-9-hsl)',
+    icon: 'mdi-calendar-blank-outline',
+  },
+  array: {
+    label: 'Selection',
+    value: 'array',
+    color: 'var(--indigo-7-hsl)',
+    icon: 'mdi-code-array',
+  },
+};
+
+const pageState = reactive({
+  hideStat: false,
+  inputSearch: '',
+  fieldSelected: [],
+  gridView: false,
+  total: 0,
+
+  addModal: false,
+  viewDrawer: false,
+  isDrawerEdit: true,
+});
+
+async function fetchPropertyList(mobileFetch?: boolean) {
+  const res = await propertyStore.getPropertyList({
+    page: mobileFetch ? 1 : propertyPage.value,
+    pageSize: mobileFetch
+      ? propertyData.value.length +
+        (pageState.total === propertyData.value.length ? 1 : 0)
+      : propertyPageSize.value,
+    query: pageState.inputSearch,
+    status:
+      statusFilter.value === 'all'
+        ? undefined
+        : statusFilter.value === 'statusACTIVE'
+          ? 'ACTIVE'
+          : 'INACTIVE',
+  });
+  if (res) {
+    propertyData.value =
+      $q.screen.xs && !mobileFetch
+        ? [...propertyData.value, ...res.result]
+        : res.result;
+
+    propertyPageMax.value = Math.ceil(res.total / propertyPageSize.value);
+    if (pageState.inputSearch || statusFilter.value !== 'all') return;
+    pageState.total = res.total;
+  }
+}
+
+function triggerDialog(type: 'add' | 'edit' | 'view') {
+  if (type === 'add') {
+    pageState.addModal = true;
+    pageState.isDrawerEdit = true;
+  }
+  if (type === 'view') {
+    pageState.viewDrawer = true;
+    pageState.isDrawerEdit = false;
+  }
+  if (type === 'edit') {
+    pageState.viewDrawer = true;
+    pageState.isDrawerEdit = true;
+  }
+}
+
+function assignFormData(propertyData: Property) {
+  currPropertyData.value = JSON.parse(JSON.stringify(propertyData));
+  formProperty.value = JSON.parse(
+    JSON.stringify({
+      name: propertyData.name,
+      nameEN: propertyData.nameEN,
+      type: propertyData.type,
+      status: propertyData.status,
+      registeredBranchId: propertyData.registeredBranchId,
+    }),
+  );
+}
+
+function resetForm() {
+  currPropertyData.value = undefined;
+  pageState.isDrawerEdit = true;
+  pageState.addModal = false;
+  pageState.viewDrawer = false;
+  formProperty.value = {
+    name: '',
+    nameEN: '',
+    type: {},
+  };
+}
+
+async function deleteProperty(id?: string) {
+  const targetId = id || currPropertyData.value?.id;
+  if (targetId === undefined) return;
+
+  dialog({
+    color: 'negative',
+    icon: 'mdi-trash-can-outline',
+    title: t('dialog.title.confirmDelete'),
+    actionText: t('general.delete'),
+    persistent: true,
+    message: t('dialog.message.confirmDelete'),
+    action: async () => {
+      await propertyStore.deleteProperty(targetId);
+      await fetchPropertyList($q.screen.xs);
+
+      resetForm();
+    },
+    cancel: () => {},
+  });
+}
+
+async function changeStatus(id?: string) {
+  const targetId = id || currPropertyData.value?.id;
+  if (targetId === undefined) return;
+
+  formProperty.value.status =
+    formProperty.value.status !== 'INACTIVE' ? 'INACTIVE' : 'ACTIVE';
+
+  const res = await propertyStore.editProperty({
+    id: targetId,
+    ...formProperty.value,
+  });
+  if (res) {
+    formProperty.value.status = res.data.status;
+    if (currPropertyData.value) {
+      currPropertyData.value.status = res.data.status;
+    }
+    await fetchPropertyList();
+  }
+}
+
+async function triggerChangeStatus(data?: Property) {
+  const targetId = (data && data.id) || currPropertyData.value?.id;
+  const targetStatus = (data && data.status) || currPropertyData.value?.status;
+  if (data) assignFormData(data);
+  if (targetId === undefined || targetStatus === undefined) return;
+
+  return await new Promise((resolve, reject) => {
+    dialog({
+      color: targetStatus !== 'INACTIVE' ? 'warning' : 'info',
+      icon:
+        targetStatus !== 'INACTIVE'
+          ? 'mdi-alert'
+          : 'mdi-message-processing-outline',
+      title: t('dialog.title.confirmChangeStatus'),
+      actionText:
+        targetStatus !== 'INACTIVE' ? t('general.close') : t('general.open'),
+      message:
+        targetStatus !== 'INACTIVE'
+          ? t('dialog.message.confirmChangeStatusOff')
+          : t('dialog.message.confirmChangeStatusOn'),
+      action: async () => {
+        await changeStatus(targetId).then(resolve).catch(reject);
+      },
+      cancel: () => {},
+    });
+  });
+}
+
+function undo() {
+  if (!currPropertyData.value) return;
+  assignFormData(currPropertyData.value);
+  pageState.isDrawerEdit = false;
+}
+
+async function submit() {
+  if (currPropertyData.value?.id !== undefined) {
+    await propertyStore.editProperty({
+      id: currPropertyData.value.id,
+      ...formProperty.value,
+    });
+  } else {
+    await propertyStore.creatProperty({
+      ...formProperty.value,
+    });
+  }
+  await fetchPropertyList($q.screen.xs);
+  resetForm();
+}
+
+onMounted(async () => {
+  navigatorStore.current.title = 'property.title';
+  navigatorStore.current.path = [{ text: 'property.caption', i18n: true }];
+  await fetchPropertyList();
+});
+
+watch(
+  () => statusFilter.value,
+  () => {
+    propertyData.value = [];
+    propertyPage.value = 1;
+    fetchPropertyList();
+  },
+);
+watch([() => pageState.inputSearch, propertyPageSize], () => {
+  propertyData.value = [];
+  propertyPage.value = 1;
+  fetchPropertyList();
+});
+</script>
+<template>
+  <FloatingActionButton
+    style="z-index: 999"
+    hide-icon
+    @click="triggerDialog('add')"
+  ></FloatingActionButton>
+
+  <div class="column full-height no-wrap">
+    <!-- SEC: stat -->
+    <section class="text-body-2 q-mb-xs flex items-center">
+      {{ $t('general.dataSum') }}
+      <q-badge
+        rounded
+        class="q-ml-sm"
+        style="
+          background-color: hsla(var(--info-bg) / 0.15);
+          color: hsl(var(--info-bg));
+        "
+      >
+        {{ pageState.total }}
+      </q-badge>
+      <q-btn
+        class="q-ml-sm"
+        icon="mdi-pin-outline"
+        color="primary"
+        size="sm"
+        flat
+        dense
+        rounded
+        @click="pageState.hideStat = !pageState.hideStat"
+        :style="pageState.hideStat ? 'rotate: 90deg' : ''"
+        style="transition: 0.1s ease-in-out"
+      />
+    </section>
+
+    <transition name="slide">
+      <div v-if="!pageState.hideStat" class="scroll q-mb-md">
+        <div style="display: inline-block">
+          <StatCardComponent
+            labelI18n
+            :branch="[
+              {
+                icon: 'mdi-tag-text-outline',
+                count: pageState.total,
+                label: 'property.title',
+                color: 'blue',
+              },
+            ]"
+            :dark="$q.dark.isActive"
+          />
+        </div>
+      </div>
+    </transition>
+
+    <!-- SEC: header content -->
+    <section class="col surface-1 rounded bordered overflow-hidden">
+      <div class="column full-height no-wrap">
+        <header
+          class="row surface-3 justify-between full-width items-center bordered-b"
+          style="z-index: 1"
+        >
+          <div class="row q-py-sm q-px-md justify-between full-width">
+            <q-input
+              for="input-search"
+              outlined
+              dense
+              :label="$t('general.search')"
+              class="col col-md-3"
+              :bg-color="$q.dark.isActive ? 'dark' : 'white'"
+              v-model="pageState.inputSearch"
+              debounce="200"
+            >
+              <template #prepend>
+                <q-icon name="mdi-magnify" />
+              </template>
+              <template v-if="$q.screen.lt.md" v-slot:append>
+                <span class="row">
+                  <q-separator vertical />
+                  <q-btn
+                    icon="mdi-filter-variant"
+                    unelevated
+                    class="q-ml-sm"
+                    padding="4px"
+                    size="sm"
+                    rounded
+                    @click="refFilter?.showPopup"
+                  />
+                </span>
+              </template>
+            </q-input>
+
+            <div class="row col-md-5" style="white-space: nowrap">
+              <q-select
+                v-show="$q.screen.gt.sm"
+                ref="refFilter"
+                v-model="statusFilter"
+                outlined
+                dense
+                option-value="value"
+                option-label="label"
+                class="col"
+                map-options
+                emit-value
+                :for="'field-select-status'"
+                :hide-dropdown-icon="$q.screen.lt.sm"
+                :options="[
+                  { label: $t('general.all'), value: 'all' },
+                  { label: $t('general.active'), value: 'statusACTIVE' },
+                  { label: $t('general.inactive'), value: 'statusINACTIVE' },
+                ]"
+              />
+              <q-select
+                v-show="$q.screen.gt.sm"
+                id="select-field"
+                for="select-field"
+                class="col q-ml-sm"
+                :options="
+                  fieldSelectedOption.map((v) => ({
+                    ...v,
+                    label: $t(v.label),
+                  }))
+                "
+                :display-value="$t('general.displayField')"
+                :hide-dropdown-icon="$q.screen.lt.sm"
+                v-model="fieldSelected"
+                option-label="label"
+                option-value="value"
+                autocomplete="off"
+                map-options
+                emit-value
+                outlined
+                multiple
+                dense
+              />
+              <q-btn-toggle
+                id="btn-mode"
+                v-model="pageState.gridView"
+                dense
+                class="no-shadow bordered rounded surface-1 q-ml-sm"
+                :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
+                size="xs"
+                :options="[
+                  { value: true, slot: 'folder' },
+                  { value: false, slot: 'list' },
+                ]"
+              >
+                <template v-slot:folder>
+                  <q-icon
+                    name="mdi-view-grid-outline"
+                    size="16px"
+                    class="q-px-sm q-py-xs rounded"
+                    :style="{
+                      color: $q.dark.isActive
+                        ? pageState.gridView
+                          ? '#C9D3DB '
+                          : '#787B7C'
+                        : pageState.gridView
+                          ? '#787B7C'
+                          : '#C9D3DB',
+                    }"
+                  />
+                </template>
+                <template v-slot:list>
+                  <q-icon
+                    name="mdi-format-list-bulleted"
+                    class="q-px-sm q-py-xs rounded"
+                    size="16px"
+                    :style="{
+                      color: $q.dark.isActive
+                        ? pageState.gridView === false
+                          ? '#C9D3DB'
+                          : '#787B7C'
+                        : pageState.gridView === false
+                          ? '#787B7C'
+                          : '#C9D3DB',
+                    }"
+                  />
+                </template>
+              </q-btn-toggle>
+            </div>
+          </div>
+        </header>
+
+        <!-- SEC: body content -->
+        <article
+          v-if="propertyData.length === 0"
+          class="col surface-2 flex items-center justify-center"
+        >
+          <NoData
+            v-if="pageState.total !== 0"
+            :not-found="!!pageState.inputSearch"
+          />
+          <CreateButton
+            v-if="pageState.total === 0"
+            @click="triggerDialog('add')"
+            label="general.add"
+            :i18n-args="{ text: $t('flow.title') }"
+          />
+        </article>
+
+        <article v-else class="col q-pa-md surface-2 scroll full-width">
+          <q-infinite-scroll
+            :offset="10"
+            @load="
+              (_, done) => {
+                if ($q.screen.gt.xs || propertyPage === propertyPageMax) return;
+                propertyPage = propertyPage + 1;
+                fetchPropertyList().then(() =>
+                  done(propertyPage >= propertyPageMax),
+                );
+              }
+            "
+          >
+            <q-table
+              flat
+              bordered
+              :grid="pageState.gridView"
+              :rows="propertyData"
+              :columns="columns"
+              class="full-width"
+              card-container-class="q-col-gutter-md"
+              row-key="name"
+              :rows-per-page-options="[0]"
+              hide-pagination
+              :visible-columns="fieldSelected"
+            >
+              <template #header="{ cols }">
+                <q-tr style="background-color: hsla(var(--info-bg) / 0.07)">
+                  <q-th
+                    v-for="(v, i) in cols"
+                    :key="i"
+                    :class="{
+                      'text-center': v.name === 'order',
+                      'text-left': v.name === 'name' || v.name === 'type',
+                    }"
+                  >
+                    {{ $t(v.label) }}
+                  </q-th>
+                  <q-th auto-width />
+                </q-tr>
+              </template>
+
+              <template #body="props">
+                <q-tr
+                  :class="{
+                    'app-text-muted': props.row.status === 'INACTIVE',
+                    'status-active': props.row.status !== 'INACTIVE',
+                    'status-inactive': props.row.status === 'INACTIVE',
+                  }"
+                  :style="
+                    props.rowIndex % 2 !== 0
+                      ? $q.dark.isActive
+                        ? 'background: hsl(var(--gray-11-hsl)/0.2)'
+                        : `background: #f9fafc`
+                      : ''
+                  "
+                >
+                  <q-td
+                    v-if="fieldSelected.includes('order')"
+                    class="text-center"
+                    style="width: 5%"
+                  >
+                    {{
+                      $q.screen.xs
+                        ? props.rowIndex + 1
+                        : (propertyPage - 1) * propertyPageSize +
+                          props.rowIndex +
+                          1
+                    }}
+                  </q-td>
+                  <q-td v-if="fieldSelected.includes('name')">
+                    <section class="row items-center no-wrap">
+                      <q-avatar
+                        class="q-mr-sm"
+                        size="md"
+                        style="
+                          color: var(--blue-6);
+                          background: hsla(var(--blue-6-hsl) / 0.1);
+                        "
+                      >
+                        <q-icon name="mdi-tag-text-outline" />
+
+                        <q-badge
+                          class="absolute-bottom-right no-padding"
+                          style="
+                            border-radius: 50%;
+                            min-width: 8px;
+                            min-height: 8px;
+                          "
+                          :style="{
+                            background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
+                          }"
+                        ></q-badge>
+                      </q-avatar>
+                      {{
+                        $i18n.locale === 'eng'
+                          ? props.row.nameEN
+                          : props.row.name
+                      }}
+                    </section>
+                  </q-td>
+
+                  <q-td
+                    style="width: 20%"
+                    v-if="fieldSelected.includes('type')"
+                    class="text-left"
+                  >
+                    <q-avatar
+                      size="sm"
+                      class="q-mr-xs"
+                      :style="`background-color: hsla(${
+                        typeOption[
+                          props.row.type.type as keyof typeof typeOption
+                        ].color
+                      }/0.2)`"
+                    >
+                      <q-icon
+                        size="20px"
+                        :name="
+                          typeOption[
+                            props.row.type.type as keyof typeof typeOption
+                          ].icon
+                        "
+                        :style="`color: hsl(${
+                          typeOption[
+                            props.row.type.type as keyof typeof typeOption
+                          ].color
+                        })`"
+                      />
+                    </q-avatar>
+                    {{
+                      typeOption[props.row.type.type as keyof typeof typeOption]
+                        .label
+                    }}
+                  </q-td>
+                  <q-td style="width: 20%" class="text-right">
+                    <q-btn
+                      icon="mdi-eye-outline"
+                      :id="`btn-eye-${props.row.name}`"
+                      size="sm"
+                      dense
+                      round
+                      flat
+                      @click.stop="
+                        () => {
+                          assignFormData(props.row);
+                          triggerDialog('view');
+                        }
+                      "
+                    />
+                    <KebabAction
+                      :id-name="props.row.name"
+                      :status="props.row.status"
+                      @view="
+                        () => {
+                          assignFormData(props.row);
+                          triggerDialog('view');
+                        }
+                      "
+                      @edit="
+                        () => {
+                          assignFormData(props.row);
+                          triggerDialog('edit');
+                        }
+                      "
+                      @delete="
+                        () => {
+                          deleteProperty(props.row.id);
+                        }
+                      "
+                      @change-status="
+                        () => {
+                          triggerChangeStatus(props.row);
+                        }
+                      "
+                    />
+                  </q-td>
+                </q-tr>
+              </template>
+
+              <template v-slot:item="props">
+                <section class="col-12 col-md-4 column">
+                  <div
+                    :class="{
+                      'status-inactive': props.row.status === 'INACTIVE',
+                    }"
+                    class="surface-1 rounded bordered row no-wrap col"
+                    style="overflow: hidden"
+                  >
+                    <div
+                      class="col-md-2 col-3 flex items-center justify-center"
+                      style="
+                        color: var(--blue-6);
+                        background: hsla(var(--blue-6-hsl) / 0.1);
+                      "
+                    >
+                      <q-icon name="mdi-tag-text-outline" size="md" />
+                    </div>
+                    <article class="row q-pa-sm q-gutter-y-sm col">
+                      <div
+                        v-if="fieldSelected.includes('name')"
+                        class="text-weight-bold col-12 ellipsis-2-lines"
+                        :class="{
+                          'app-text-muted': props.row.status === 'INACTIVE',
+                        }"
+                      >
+                        {{
+                          $i18n.locale === 'eng'
+                            ? props.row.nameEN
+                            : props.row.name
+                        }}
+                        <q-tooltip>
+                          {{
+                            $i18n.locale === 'eng'
+                              ? props.row.nameEN
+                              : props.row.name
+                          }}
+                        </q-tooltip>
+                      </div>
+                      <div
+                        v-if="fieldSelected.includes('type')"
+                        class="self-end"
+                      >
+                        <q-avatar
+                          size="xs"
+                          class="q-mr-xs"
+                          :style="`background-color: hsla(${
+                            typeOption[
+                              props.row.type.type as keyof typeof typeOption
+                            ].color
+                          }/0.2)`"
+                        >
+                          <q-icon
+                            size="16px"
+                            :name="
+                              typeOption[
+                                props.row.type.type as keyof typeof typeOption
+                              ].icon
+                            "
+                            :style="`color: hsl(${
+                              typeOption[
+                                props.row.type.type as keyof typeof typeOption
+                              ].color
+                            })`"
+                          />
+                        </q-avatar>
+                        {{
+                          typeOption[
+                            props.row.type.type as keyof typeof typeOption
+                          ].label
+                        }}
+                      </div>
+                    </article>
+                    <nav class="q-pa-sm row items-center self-start">
+                      <q-btn
+                        icon="mdi-eye-outline"
+                        size="sm"
+                        dense
+                        round
+                        flat
+                        @click.stop="
+                          () => {
+                            assignFormData(props.row);
+                            triggerDialog('view');
+                          }
+                        "
+                      />
+                      <KebabAction
+                        :id-name="props.row.id"
+                        :status="props.row.status"
+                        @view="
+                          () => {
+                            assignFormData(props.row);
+                            triggerDialog('view');
+                          }
+                        "
+                        @edit="
+                          () => {
+                            assignFormData(props.row);
+                            triggerDialog('edit');
+                          }
+                        "
+                        @delete="
+                          () => {
+                            deleteProperty(props.row.id);
+                          }
+                        "
+                        @change-status="
+                          () => {
+                            triggerChangeStatus(props.row);
+                          }
+                        "
+                      />
+                    </nav>
+                  </div>
+                </section>
+              </template>
+            </q-table>
+
+            <template v-slot:loading>
+              <div
+                v-if="$q.screen.lt.sm && propertyPage !== propertyPageMax"
+                class="row justify-center"
+              >
+                <q-spinner-dots color="primary" size="40px" />
+              </div>
+            </template>
+          </q-infinite-scroll>
+        </article>
+
+        <!-- SEC: footer content -->
+        <footer
+          class="row justify-between items-center q-px-md q-py-sm surface-2"
+          v-if="propertyPageMax > 0 && $q.screen.gt.xs"
+        >
+          <div class="col-4">
+            <div class="row items-center no-wrap">
+              <div class="app-text-muted q-mr-sm" v-if="$q.screen.gt.sm">
+                {{ $t('general.recordPerPage') }}
+              </div>
+              <div><PaginationPageSize v-model="propertyPageSize" /></div>
+            </div>
+          </div>
+          <div class="col-4 row justify-center app-text-muted">
+            {{
+              $q.screen.gt.sm
+                ? $t('general.recordsPage', {
+                    resultcurrentPage: propertyData.length,
+                    total: pageState.inputSearch
+                      ? propertyData.length
+                      : pageState.total,
+                  })
+                : $t('general.ofPage', {
+                    current: propertyData.length,
+                    total: pageState.inputSearch
+                      ? propertyData.length
+                      : pageState.total,
+                  })
+            }}
+          </div>
+          <nav class="col-4 row justify-end">
+            <PaginationComponent
+              v-model:current-page="propertyPage"
+              v-model:max-page="propertyPageMax"
+              :fetch-data="() => fetchPropertyList()"
+            />
+          </nav>
+        </footer>
+      </div>
+    </section>
+  </div>
+
+  <PropertyDialog
+    @change-status="triggerChangeStatus"
+    @drawer-delete="() => deleteProperty()"
+    @drawer-edit="pageState.isDrawerEdit = true"
+    @drawer-undo="() => undo()"
+    @close="() => resetForm()"
+    @submit="() => submit()"
+    :readonly="!pageState.isDrawerEdit"
+    :isEdit="pageState.isDrawerEdit"
+    v-model="pageState.addModal"
+    v-model:property-data="formProperty"
+    v-model:drawer-model="pageState.viewDrawer"
+  />
+</template>
+
+<style scoped>
+.status-active {
+  --_branch-status-color: var(--green-6-hsl);
+}
+
+.status-inactive {
+  --_branch-status-color: var(--stone-5-hsl);
+  --_branch-badge-bg: var(--stone-5-hsl);
+  filter: grayscale(0.5);
+  opacity: 0.5;
+}
+</style>

src/pages/04_property-managment/PropertyDialog.vue

@@ -0,0 +1,252 @@
+<script lang="ts" setup>
+import SideMenu from 'src/components/SideMenu.vue';
+import DrawerInfo from 'src/components/DrawerInfo.vue';
+import FormProperty from 'src/components/04_property-management/FormProperty.vue';
+import {
+  UndoButton,
+  SaveButton,
+  EditButton,
+  DeleteButton,
+} from 'src/components/button';
+import { Property } from 'src/stores/property/types';
+import { DialogFormContainer, DialogHeader } from 'src/components/dialog';
+
+const model = defineModel<boolean>({ required: true, default: false });
+const drawerModel = defineModel<boolean>('drawerModel', {
+  required: true,
+  default: false,
+});
+
+const formProperty = defineModel<Property>('propertyData', {
+  required: true,
+  default: {
+    name: '',
+    nameEN: '',
+    type: {},
+  },
+});
+
+withDefaults(
+  defineProps<{
+    readonly?: boolean;
+    isEdit?: boolean;
+  }>(),
+  { readonly: false, isEdit: false },
+);
+
+defineEmits<{
+  (e: 'submit'): void;
+  (e: 'close'): void;
+  (e: 'changeStatus'): void;
+  (e: 'drawerUndo'): void;
+  (e: 'drawerEdit'): void;
+  (e: 'drawerDelete'): void;
+}>();
+</script>
+<template>
+  <DialogFormContainer
+    width="65vw"
+    height="500px"
+    v-model="model"
+    @submit="() => $emit('submit')"
+  >
+    <template #header>
+      <DialogHeader
+        :title="$t(`general.add`, { text: $t('property.title') })"
+      />
+    </template>
+
+    <section
+      class="col surface-1 rounded bordered scroll row relative-position"
+      :class="{
+        'q-mx-lg q-my-md': $q.screen.gt.sm,
+        'q-mx-md q-my-sm': !$q.screen.gt.sm,
+      }"
+    >
+      <div
+        class="rounded row"
+        style="position: absolute; z-index: 999; right: 0; top: 0"
+        :class="{
+          'q-py-md q-px-lg': $q.screen.gt.sm,
+          'q-pa-sm': !$q.screen.gt.sm,
+        }"
+      >
+        <div class="surface-1 row rounded">
+          <SaveButton id="btn-info-basic-save" icon-only type="submit" />
+        </div>
+      </div>
+
+      <section
+        class="col"
+        style="height: 100%; max-height: 100; overflow-y: auto"
+        v-if="$q.screen.gt.sm"
+      >
+        <div class="q-py-md q-pl-md q-pr-sm">
+          <SideMenu
+            :menu="[
+              {
+                name: $t('general.information', {
+                  msg: $t('property.title'),
+                }),
+                anchor: 'form-property-dialog',
+              },
+            ]"
+            background="transparent"
+            :active="{
+              background: 'hsla(var(--blue-6-hsl) / .2)',
+              foreground: 'var(--blue-6)',
+            }"
+            scroll-element="#flow-form-dialog"
+          ></SideMenu>
+        </div>
+      </section>
+
+      <section
+        class="col-12 col-md-10"
+        :class="{
+          'q-py-md q-pr-md ': $q.screen.gt.sm,
+          'q-pa-sm': !$q.screen.gt.sm,
+        }"
+        style="height: 100%; max-height: 100%; overflow-y: auto"
+        id="form-property-dialog"
+      >
+        <FormProperty
+          v-model:name="formProperty.name"
+          v-model:name-en="formProperty.nameEN"
+          v-model:type="formProperty.type"
+          v-model:registered-branch-id="formProperty.registeredBranchId"
+          v-model:status="formProperty.status"
+        />
+      </section>
+    </section>
+  </DialogFormContainer>
+
+  <DrawerInfo
+    bg-on
+    hide-action
+    :is-edit="isEdit"
+    :title="propertyData.name"
+    v-model:drawerOpen="drawerModel"
+    :submit="() => $emit('submit')"
+    :close="() => $emit('close')"
+  >
+    <div class="col column full-height">
+      <div
+        style="flex: 1; width: 100%; overflow-y: auto"
+        id="drawer-user-form"
+        :class="{
+          'q-px-lg q-py-md': $q.screen.gt.sm,
+          'q-px-md q-py-sm': !$q.screen.gt.sm,
+        }"
+      >
+        <div
+          class="col surface-1 full-height rounded bordered scroll row relative-position"
+        >
+          <div
+            class="rounded row"
+            :class="{
+              'q-py-md q-px-lg': $q.screen.gt.sm,
+              'q-pa-sm': !$q.screen.gt.sm,
+            }"
+            style="position: absolute; z-index: 999; top: 0; right: 0"
+          >
+            <div
+              v-if="propertyData.status !== 'INACTIVE'"
+              class="surface-1 row rounded"
+            >
+              <UndoButton
+                v-if="isEdit"
+                id="btn-info-basic-undo"
+                icon-only
+                @click="
+                  () => {
+                    $emit('drawerUndo');
+                  }
+                "
+                type="button"
+              />
+              <SaveButton
+                v-if="isEdit"
+                id="btn-info-basic-save"
+                icon-only
+                type="submit"
+              />
+              <EditButton
+                v-if="!isEdit"
+                id="btn-info-basic-edit"
+                icon-only
+                @click="
+                  () => {
+                    $emit('drawerEdit');
+                    // infoDrawerEdit = true;
+                    // isImageEdit = true;
+                  }
+                "
+                type="button"
+              />
+              <DeleteButton
+                v-if="!isEdit"
+                id="btn-info-basic-delete"
+                icon-only
+                @click="
+                  () => {
+                    $emit('drawerDelete');
+                    // onDelete(currentUser.id);
+                  }
+                "
+                type="button"
+              />
+            </div>
+          </div>
+
+          <section
+            class="col"
+            style="height: 100%; max-height: 100; overflow-y: auto"
+            v-if="$q.screen.gt.sm"
+          >
+            <div class="q-py-md q-pl-md q-pr-sm">
+              <SideMenu
+                :menu="[
+                  {
+                    name: $t('general.information', {
+                      msg: $t('property.title'),
+                    }),
+                    anchor: 'form-property-dialog',
+                  },
+                ]"
+                background="transparent"
+                :active="{
+                  background: 'hsla(var(--blue-6-hsl) / .2)',
+                  foreground: 'var(--blue-6)',
+                }"
+                scroll-element="#flow-form-dialog"
+              ></SideMenu>
+            </div>
+          </section>
+
+          <section
+            class="col-12 col-md-10"
+            :class="{
+              'q-py-md q-pr-md ': $q.screen.gt.sm,
+              'q-pa-sm': !$q.screen.gt.sm,
+            }"
+            style="height: 100%; max-height: 100%; overflow-y: auto"
+            id="flow-form-drawer"
+          >
+            <FormProperty
+              onDrawer
+              :readonly="!isEdit"
+              v-model:name="formProperty.name"
+              v-model:name-en="formProperty.nameEN"
+              v-model:type="formProperty.type"
+              v-model:registered-branch-id="formProperty.registeredBranchId"
+              v-model:status="formProperty.status"
+              @change-status="$emit('changeStatus')"
+            />
+          </section>
+        </div>
+      </div>
+    </div>
+  </DrawerInfo>
+</template>
+<style scoped></style>

src/pages/05_quotation/QuotationFormProductSelect.vue

@@ -773,7 +773,12 @@ watch(
                                   :key="att"
                                   class="bordered q-py-xs q-px-sm rounded"
                                 >
-                                  {{ optionStore.mapOption(att.fieldName) }}
+                                  {{
+                                    optionStore.mapOption(
+                                      att.fieldName,
+                                      'propertiesField',
+                                    )
+                                  }}
                                 </div>
                               </div>
                             </template>

src/pages/08_request-list/PropertiesExpansion.vue

@@ -164,12 +164,15 @@ defineEmits<{
           class="row items-center q-pb-sm"
         >
           <article class="col-5">
-            {{ i + 1 }} {{ optionStore.mapOption(prop.fieldName) }}
+            {{ i + 1 }}
+            {{ optionStore.mapOption(prop.fieldName, 'propertiesField') }}
           </article>
           <PropertiesToInput
             :readonly="!state.isEdit || readonlyField.includes(prop.fieldName)"
             :prop="prop"
-            :placeholder="optionStore.mapOption(prop.fieldName)"
+            :placeholder="
+              optionStore.mapOption(prop.fieldName, 'propertiesField')
+            "
             v-model="formData[prop.fieldName]"
           />
         </span>

src/router/routes.ts

@@ -80,6 +80,11 @@ const routes: RouteRecordRaw[] = [
         name: 'Workflow',
         component: () => import('pages/04_flow-managment/MainPage.vue'),
       },
+      {
+        path: '/property',
+        name: 'Property',
+        component: () => import('pages/04_property-managment/MainPage.vue'),
+      },
       {
         path: '/quotation',
         name: 'Quotation',

src/stores/options/index.ts

@@ -1,8 +1,11 @@
 import { ref, watch } from 'vue';
 import { defineStore } from 'pinia';
 import { useI18n } from 'vue-i18n';
+import { useProperty } from 'src/stores/property';
+import { toCamelCase } from '../utils';
 
 const useOptionStore = defineStore('optionStore', () => {
+  const { getPropertyList } = useProperty();
   const { locale } = useI18n();
 
   const globalOption = ref();
@@ -12,6 +15,36 @@ const useOptionStore = defineStore('optionStore', () => {
     rawOption.value = await fetch('/option/option.json').then((r) => r.json());
 
     _switchOptionLang();
+
+    const res = await getPropertyList({ pageSize: 999, activeOnly: true });
+    const targetOptions = globalOption.value?.propertiesField ?? [];
+
+    if (!res) return;
+
+    const propList = res.result.map((v) => {
+      return {
+        label: locale.value === 'eng' ? v.nameEN : v.name,
+        value: toCamelCase(v.nameEN),
+        type: v.type.type,
+      };
+    });
+
+    globalOption.value.propertiesField = [...targetOptions];
+
+    const existingValues = new Set(
+      globalOption.value.propertiesField.map(
+        (item: { value: string }) => item.value,
+      ),
+    );
+    const newProps = propList.filter((prop) => !existingValues.has(prop.value));
+
+    if (newProps) {
+      globalOption.value.propertiesField.splice(
+        globalOption.value.propertiesField.length - 4,
+        0,
+        ...newProps,
+      );
+    }
   })();
 
   watch(locale, _switchOptionLang);

src/stores/property/index.ts

@@ -0,0 +1,71 @@
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+import { api } from 'src/boot/axios';
+import { PaginationResult } from 'src/types';
+import { Status } from '../types';
+import { Property } from './types';
+
+export const useProperty = defineStore('property-store', () => {
+  const data = ref<Property[]>([]);
+  const page = ref<number>(1);
+  const pageMax = ref<number>(1);
+  const pageSize = ref<number>(30);
+
+  async function getProperty(id: string) {
+    const res = await api.get<Property[]>(`/property/${id}`);
+
+    if (res.status >= 400) return null;
+
+    return res.data;
+  }
+
+  async function getPropertyList(params?: {
+    page?: number;
+    pageSize?: number;
+    query?: string;
+    status?: Status;
+    activeOnly?: boolean;
+  }) {
+    const res = await api.get<PaginationResult<Property>>('/property', {
+      params,
+    });
+
+    if (res.status >= 400) return null;
+
+    return res.data;
+  }
+
+  async function creatProperty(data: Property) {
+    const res = await api.post<Property>('/property', data);
+    if (res.status >= 400) return null;
+    return res;
+  }
+
+  async function editProperty(data: Property) {
+    const res = await api.put<Property>(`/property/${data.id}`, {
+      ...data,
+      id: undefined,
+    });
+    if (res.status >= 400) return null;
+    return res;
+  }
+
+  async function deleteProperty(id: string) {
+    const res = await api.delete<Property>(`/property/${id}`);
+    if (res.status >= 400) return null;
+    return res;
+  }
+
+  return {
+    data,
+    page,
+    pageSize,
+    pageMax,
+
+    getProperty,
+    getPropertyList,
+    creatProperty,
+    editProperty,
+    deleteProperty,
+  };
+});

src/stores/property/types.ts

@@ -0,0 +1,10 @@
+import { Status } from '../types';
+
+export type Property = {
+  id?: string;
+  status?: Status;
+  registeredBranchId?: string;
+  name: string;
+  nameEN: string;
+  type: Record<string, any>;
+};