From 1268f6e35f06d322e166082f766cdaf19719d32e Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Tue, 11 Mar 2025 09:57:27 +0700
Subject: [PATCH] refactor: bind form crud

---
 .../04_property-management/FormProperty.vue   | 124 ++++++++++++++++++
 src/layouts/DrawerComponent.vue               |  10 +-
 src/pages/04_property-managment/MainPage.vue  |   1 +
 .../04_property-managment/PropertyDialog.vue  |  78 +++++------
 src/stores/property/types.ts                  |   3 +-
 5 files changed, 177 insertions(+), 39 deletions(-)
 create mode 100644 src/components/04_property-management/FormProperty.vue

diff --git a/src/components/04_property-management/FormProperty.vue b/src/components/04_property-management/FormProperty.vue
new file mode 100644
index 00000000..49613f13
--- /dev/null
+++ b/src/components/04_property-management/FormProperty.vue
@@ -0,0 +1,124 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import SelectBranch from '../shared/select/SelectBranch.vue';
+import { getRole } from 'src/services/keycloak';
+
+const name = defineModel<string>('name');
+const nameEN = defineModel<string>('nameEn');
+const type = defineModel<Record<string, any>>('type');
+const registeredBranchId = defineModel<string>('registeredBranchId');
+
+const isAdmin = computed(() => {
+  const roles = getRole() || [];
+  return roles.includes('system');
+});
+
+defineProps<{
+  readonly?: boolean;
+  onDrawer?: boolean;
+  inputOnly?: boolean;
+}>();
+</script>
+
+<template>
+  <section class="q-px-md q-py-sm">
+    <div
+      :class="{ 'surface-1 rounded bordered': readonly }"
+      style="border: 1px solid transparent"
+    >
+      <div class="q-col-gutter-sm">
+        <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() || '')"
+        />
+
+        <q-input
+          :for="`input-type-${onDrawer ? 'drawer' : 'dialog'}`"
+          :bg-color="readonly ? 'transparent' : ''"
+          :readonly
+          class="col-md-6 col-12"
+          hide-bottom-space
+          dense
+          outlined
+          :label="$t('property.dialog.type')"
+          :model-value="!readonly ? type : type || '-'"
+          @update:model-value="(v) => (type = v?.toString() || '')"
+          :rules="[(val: string) => !!val || $t('form.error.required')]"
+        />
+
+        <SelectBranch
+          v-if="isAdmin"
+          v-model:value="registeredBranchId"
+          :label="$t('quotation.branchVirtual')"
+          class="col-md-6 col-12"
+          :class="{
+            'field-one': inputOnly && $q.screen.gt.sm,
+            'q-mb-sm': inputOnly && $q.screen.lt.md,
+          }"
+          simple
+          required
+          :readonly
+        />
+      </div>
+    </div>
+  </section>
+</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>
diff --git a/src/layouts/DrawerComponent.vue b/src/layouts/DrawerComponent.vue
index 6d9f0e06..27aecf8b 100644
--- a/src/layouts/DrawerComponent.vue
+++ b/src/layouts/DrawerComponent.vue
@@ -120,7 +120,15 @@ onMounted(async () => {
           ),
         },
         { label: 'workflow', route: '/workflow' },
-        { label: 'property', route: '/property' },
+        {
+          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' },
diff --git a/src/pages/04_property-managment/MainPage.vue b/src/pages/04_property-managment/MainPage.vue
index e341f100..511186d6 100644
--- a/src/pages/04_property-managment/MainPage.vue
+++ b/src/pages/04_property-managment/MainPage.vue
@@ -126,6 +126,7 @@ function assignFormData(propertyData: Property) {
       nameEN: propertyData.nameEN,
       type: propertyData.type,
       status: propertyData.status,
+      registeredBranchId: propertyData.registeredBranchId,
     }),
   );
 }
diff --git a/src/pages/04_property-managment/PropertyDialog.vue b/src/pages/04_property-managment/PropertyDialog.vue
index 3782afb7..fe2b6fb0 100644
--- a/src/pages/04_property-managment/PropertyDialog.vue
+++ b/src/pages/04_property-managment/PropertyDialog.vue
@@ -2,6 +2,7 @@
 import DialogForm from 'src/components/DialogForm.vue';
 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,
@@ -9,6 +10,7 @@ import {
   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', {
@@ -43,44 +45,40 @@ defineEmits<{
 }>();
 </script>
 <template>
-  <DialogForm
-    :title="$t('flow.title')"
-    v-model:modal="model"
-    :submit="() => $emit('submit')"
-    :close="() => $emit('close')"
-    hide-footer
+  <DialogFormContainer
+    width="60vw"
+    height="500px"
+    v-model="model"
+    @submit="() => $emit('submit')"
   >
-    <div
-      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>
+    <template #header>
+      <DialogHeader
+        :title="$t(`general.add`, { text: $t('property.title') })"
+      />
+    </template>
 
-      <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-dialog"
-      ></section>
-    </div>
-  </DialogForm>
+    <section class="q-pa-md col full-width">
+      <div class="surface-1 rounded bordered q-pa-md full-height full-width">
+        <FormProperty
+          v-model:name="formProperty.name"
+          v-model:name-en="formProperty.nameEN"
+          v-model:type="formProperty.type"
+          v-model:registered-branch-id="formProperty.registeredBranchId"
+        />
+      </div>
+    </section>
+
+    <template #footer>
+      <CancelButton class="q-ml-auto" outlined @click="$emit('close')" />
+      <SaveButton
+        :label="$t(`general.add`, { text: $t('property.title') })"
+        class="q-ml-sm"
+        icon="mdi-check"
+        solid
+        type="submit"
+      />
+    </template>
+  </DialogFormContainer>
 
   <DrawerInfo
     bg-on
@@ -169,7 +167,13 @@ defineEmits<{
             style="height: 100%; max-height: 100%; overflow-y: auto"
             id="flow-form-drawer"
           >
-            asdas
+            <FormProperty
+              :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"
+            />
           </section>
         </div>
       </div>
diff --git a/src/stores/property/types.ts b/src/stores/property/types.ts
index 054083aa..31c251e5 100644
--- a/src/stores/property/types.ts
+++ b/src/stores/property/types.ts
@@ -2,8 +2,9 @@ import { Status } from '../types';
 
 export type Property = {
   id?: string;
+  status?: Status;
+  registeredBranchId?: string;
   name: string;
   nameEN: string;
   type: Record<string, any>;
-  status?: Status;
 };