refactor: bind value

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

@@ -4,7 +4,13 @@ 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';
 
+const $q = useQuasar();
 const navigatorStore = useNavigator();
 const propertyStore = useProperty();
 const {
@@ -16,24 +22,16 @@ const {
 
 const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
 const refFilter = ref<InstanceType<typeof QSelect>>();
-const fieldSelected = ref<('order' | 'name' | 'step')[]>([
+const fieldSelected = ref<('name' | 'type')[]>(['name', 'type']);
-  'order',
-  'name',
-  'step',
-]);
 const fieldSelectedOption = ref<{ label: string; value: string }[]>([
   {
-    label: 'general.order',
+    label: 'property.table.name',
-    value: 'order',
+    value: 'name',
   },
 
   {
-    label: 'general.name',
+    label: 'property.table.type',
-    value: 'name',
+    value: 'type',
-  },
-  {
-    label: 'flow.processStep',
-    value: 'step',
   },
 ]);
 
@@ -44,12 +42,7 @@ const columns = [
     label: 'property.table.name',
     field: 'order',
   },
-  {
+
-    name: 'nameEn',
-    align: 'center',
-    label: 'property.table.nameEn',
-    field: 'nameEn',
-  },
   {
     name: 'type',
     align: 'center',
@@ -70,9 +63,51 @@ const pageState = reactive({
   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;
+  }
+}
+
 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>
@@ -113,8 +148,8 @@ onMounted(async () => {
               {
                 icon: 'mdi-cogs',
                 count: pageState.total,
-                label: 'flow.title',
+                label: 'property.title',
-                color: 'gray',
+                color: 'blue',
               },
             ]"
             :dark="$q.dark.isActive"
@@ -188,10 +223,7 @@ onMounted(async () => {
                 :options="
                   fieldSelectedOption.map((v) => ({
                     ...v,
-                    label:
+                    label: $t(v.label),
-                      v.value === 'name'
-                        ? $t('general.name', { msg: $t('flow.title') })
-                        : $t(v.label),
                   }))
                 "
                 :display-value="$t('general.displayField')"
@@ -303,23 +335,12 @@ onMounted(async () => {
                 <q-tr style="background-color: hsla(var(--info-bg) / 0.07)">
                   <q-th
                     v-for="v in cols"
-                    :key="v"
                     :class="{
                       'text-left': v.name === 'name',
-                      'text-right': v.name === 'step',
+                      'text-right': v.name === 'type',
                     }"
                   >
-                    {{
+                    {{ $t(v.label) }}
-                      v.label &&
-                      $t(v.label, {
-                        msg:
-                          v.name === 'step'
-                            ? $t('flow.step')
-                            : v.name === 'name'
-                              ? $t('flow.title')
-                              : '',
-                      })
-                    }}
                   </q-th>
                   <q-th auto-width />
                 </q-tr>
@@ -340,50 +361,21 @@ onMounted(async () => {
                       : ''
                   "
                 >
-                  <q-td
-                    v-if="fieldSelected.includes('order')"
-                    class="text-center"
-                  >
-                    {{
-                      $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"
+                        $i18n.locale === 'eng'
-                        size="md"
+                          ? props.row.nameEn
-                        style="
+                          : props.row.name
-                          color: var(--gray-6);
+                      }}
-                          background: hsla(var(--gray-6-hsl) / 0.1);
-                        "
-                      >
-                        <q-icon name="mdi-cogs" />
-
-                        <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>
-                      {{ props.row.name }}
                     </section>
                   </q-td>
+
                   <q-td
-                    v-if="fieldSelected.includes('step')"
+                    v-if="fieldSelected.includes('type')"
                     class="text-right"
                   >
-                    {{ props.row.step.length }}
+                    {{ props.row.type }}
                   </q-td>
                   <q-td style="width: 20%" class="text-right">
                     <q-btn
@@ -440,7 +432,7 @@ onMounted(async () => {
                         </q-tooltip>
                       </div>
                       <div
-                        v-if="fieldSelected.includes('step')"
+                        v-if="fieldSelected.includes('type')"
                         class="self-end"
                       >
                         <div class="bordered rounded q-px-sm">
@@ -448,7 +440,7 @@ onMounted(async () => {
                             name="mdi-note-edit-outline"
                             class="q-pr-sm"
                           />
-                          {{ props.row.step.length }}
+                          {{ props.row.type }}
                         </div>
                       </div>
                     </article>

src/stores/property/index.ts

@@ -26,7 +26,7 @@ export const useProperty = defineStore('property-store', () => {
     status?: Status;
     activeOnly?: boolean;
   }) {
-    const res = await api.get<PaginationResult<Property[]>>('/property', {
+    const res = await api.get<PaginationResult<Property>>('/property', {
       params,
     });