refactor: bind form crud

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

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>