feat: refs #6683 add PropertyList component for displaying list of properties with filters

src/pages/Property/PropertyList.vue

@@ -0,0 +1,140 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { toDate, dashIfEmpty } from 'src/filters/index';
+import { useI18n } from 'vue-i18n';
+import VnTable from 'src/components/VnTable/VnTable.vue';
+import VnSection from 'src/components/common/VnSection.vue';
+import PropertyFilter from './PropertyFilter.vue';
+
+const { t } = useI18n();
+const tableRef = ref();
+
+const dataKey = 'PropertyList';
+
+const columns = computed(() => [
+    {
+        labelAbbreviation: 'Fo',
+        label: t('property.hasFormalization'),
+        toolTip: t('property.hasFormalization'),
+        name: 'hasFormalization',
+        component: 'checkbox',
+        width: '35px',
+    },
+    {
+        labelAbbreviation: 'SC',
+        label: t('property.hasSimpleCopy'),
+        toolTip: t('property.hasSimpleCopy'),
+        name: 'hasSimpleCopy',
+        component: 'checkbox',
+        width: '35px',
+    },
+    {
+        labelAbbreviation: 'OP',
+        label: t('property.hasOriginalPropertyDeed'),
+        toolTip: t('property.hasOriginalPropertyDeed'),
+        name: 'hasOriginalPropertyDeed',
+        component: 'checkbox',
+        width: '35px',
+    },
+    {
+        labelAbbreviation: 'FP',
+        label: t('property.hasFundProvision'),
+        toolTip: t('property.hasFundProvision'),
+        name: 'hasFundProvision',
+        component: 'checkbox',
+        width: '35px',
+    },
+    {
+        align: 'right',
+        name: 'id',
+        label: t('property.id'),
+        width: '70px',
+    },
+    {
+        align: 'left',
+        name: 'name',
+        label: t('property.name'),
+    },
+    {
+        align: 'left',
+        name: 'propertyGroupFk',
+        label: t('property.group'),
+        component: 'select',
+        attrs: {
+            url: 'PropertyGroups',
+            fields: ['id', 'description'],
+            optionValue: 'id',
+            optionLabel: 'description',
+        },
+        format: ({description}) => description,
+    },
+    {
+        align: 'left',
+        name: 'protocol',
+        label: t('property.protocol'),
+    },
+    {
+        align: 'left',
+        name: 'cadaster',
+        label: t('property.cadaster'),
+    },
+    {
+        align: 'left',
+        name: 'companyFk',
+        label: t('property.owner'),
+        component: 'select',
+        attrs: {
+            url: 'Companies',
+            fields: ['id', 'code'],
+            optionValue: 'id',
+            optionLabel: 'code',
+        },
+        format: ({code}) => code,
+    },
+    {
+        align: 'left',
+        name: 'purchased',
+        label: t('property.purchased'),
+        component: 'date',
+        format: ({ purchased }) => toDate(purchased),
+    },
+    {
+        align: 'left',
+        name: 'booked',
+        label: t('property.booked'),
+        component: 'date',
+        format: ({ booked }) => toDate(booked),
+    },
+]);
+</script>
+
+<template>
+    <VnSection
+        :data-key="dataKey"
+        :columns="columns"
+        prefix="property"
+        :array-data-props="{
+            url: 'Properties/filter',
+        }"
+    >
+        <template #advanced-menu>
+            <PropertyFilter :data-key="dataKey" />
+        </template>
+        <template #body>
+            <VnTable
+                ref="tableRef"
+                :data-key="dataKey"
+                :create="{
+                    urlCreate: 'Properties',
+                    title: t('property.createProperty'),
+                    onDataSaved: ({ id }) => tableRef.redirect(id),
+                }"
+                default-mode="table"
+                :columns="columns"
+                :right-search="false"
+                redirect="property"
+                data-cy="propertyListTable"
+            />
+        </template>
+    </VnSection>
+</template>