feat: add order field and type options to property management table

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

@@ -15,6 +15,7 @@ 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();
@@ -35,13 +36,20 @@ const formProperty = ref<Property>({
 });
 const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
 const refFilter = ref<InstanceType<typeof QSelect>>();
-const fieldSelected = ref<('name' | 'type')[]>(['name', 'type']);
+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',
@@ -49,6 +57,12 @@ const fieldSelectedOption = ref<{ label: string; value: string }[]>([
 ]);
 
 const columns = [
+  {
+    name: 'order',
+    align: 'center',
+    label: 'general.order',
+    field: 'order',
+  },
   {
     name: 'name',
     align: 'center',
@@ -64,6 +78,33 @@ const columns = [
   },
 ] 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: '',
@@ -295,7 +336,7 @@ watch([() => pageState.inputSearch, propertyPageSize], () => {
             labelI18n
             :branch="[
               {
-                icon: 'mdi-cogs',
+                icon: 'mdi-tag-text-outline',
                 count: pageState.total,
                 label: 'property.title',
                 color: 'blue',
@@ -445,10 +486,9 @@ watch([() => pageState.inputSearch, propertyPageSize], () => {
             v-if="pageState.total !== 0"
             :not-found="!!pageState.inputSearch"
           />
-
           <CreateButton
             v-if="pageState.total === 0"
-            @click=""
+            @click="triggerDialog('add')"
             label="general.add"
             :i18n-args="{ text: $t('flow.title') }"
           />
@@ -483,10 +523,11 @@ watch([() => pageState.inputSearch, propertyPageSize], () => {
               <template #header="{ cols }">
                 <q-tr style="background-color: hsla(var(--info-bg) / 0.07)">
                   <q-th
-                    v-for="v in cols"
+                    v-for="(v, i) in cols"
+                    :key="i"
                     :class="{
-                      'text-left': v.name === 'name',
+                      'text-center': v.name === 'order',
-                      'text-right': v.name === 'type',
+                      'text-left': v.name === 'name' || v.name === 'type',
                     }"
                   >
                     {{ $t(v.label) }}
@@ -510,8 +551,43 @@ watch([() => pageState.inputSearch, propertyPageSize], () => {
                       : ''
                   "
                 >
+                  <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
@@ -521,10 +597,37 @@ watch([() => pageState.inputSearch, propertyPageSize], () => {
                   </q-td>
 
                   <q-td
+                    style="width: 20%"
                     v-if="fieldSelected.includes('type')"
-                    class="text-right"
+                    class="text-left"
                   >
-                    {{ props.row.type }}
+                    <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
@@ -583,11 +686,11 @@ watch([() => pageState.inputSearch, propertyPageSize], () => {
                     <div
                       class="col-md-2 col-3 flex items-center justify-center"
                       style="
-                        color: var(--gray-6);
+                        color: var(--blue-6);
-                        background: hsla(var(--gray-6-hsl) / 0.1);
+                        background: hsla(var(--blue-6-hsl) / 0.1);
                       "
                     >
-                      <q-icon name="mdi-cogs" size="md" />
+                      <q-icon name="mdi-tag-text-outline" size="md" />
                     </div>
                     <article class="row q-pa-sm q-gutter-y-sm col">
                       <div
@@ -614,13 +717,34 @@ watch([() => pageState.inputSearch, propertyPageSize], () => {
                         v-if="fieldSelected.includes('type')"
                         class="self-end"
                       >
-                        <div class="bordered rounded q-px-sm">
+                        <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
-                            name="mdi-note-edit-outline"
+                            size="16px"
-                            class="q-pr-sm"
+                            :name="
+                              typeOption[
+                                props.row.type.type as keyof typeof typeOption
+                              ].icon
+                            "
+                            :style="`color: hsl(${
+                              typeOption[
+                                props.row.type.type as keyof typeof typeOption
+                              ].color
+                            })`"
                           />
-                          {{ props.row.type }}
+                        </q-avatar>
-                        </div>
+                        {{
+                          typeOption[
+                            props.row.type.type as keyof typeof typeOption
+                          ].label
+                        }}
                       </div>
                     </article>
                     <nav class="q-pa-sm row items-center self-start">
@@ -723,7 +847,7 @@ watch([() => pageState.inputSearch, propertyPageSize], () => {
   </div>
 
   <PropertyDialog
-    @change-status="() => triggerChangeStatus()"
+    @change-status="triggerChangeStatus"
     @drawer-delete="() => deleteProperty()"
     @drawer-edit="pageState.isDrawerEdit = true"
     @drawer-undo="() => undo()"
@@ -736,4 +860,16 @@ watch([() => pageState.inputSearch, propertyPageSize], () => {
     v-model:drawer-model="pageState.viewDrawer"
   />
 </template>
-<style scoped></style>
+
+<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>