verdnatura/salix-front
verdnatura
/
salix-front
2
3
Fork 1
Code Issues Pull Requests 81 Releases Wiki Activity

feat: refs #6683 add PropertyFilter component for advanced property filtering options

This commit is contained in:
Jose Antonio Tubau 2025-04-01 15:09:57 +02:00
parent c0c8500063
commit 56ce26223f
1 changed files with 175 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

175
src/pages/Property/PropertyFilter.vue Normal file
View File

@ -0,0 +1,175 @@
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnCheckbox from 'src/components/common/VnCheckbox.vue';
const { t } = useI18n();
const props = defineProps({
dataKey: {
type: String,
required: true,
},
});
const companies = ref([]);
const propertyGroups = ref([]);
</script>
<template>
<VnFilterPanel :data-key="props.dataKey" :search-button="true">
<template #tags="{ tag, formatFn }">
<div class="q-gutter-x-xs">
<strong>{{ t(`property.params.${tag.label}`) }}: </strong>
<span>{{ formatFn(tag.value) }}</span>
</div>
</template>
<template #body="{ params, searchFn }">
<QItem>
<QItemSection>
<VnInput
v-model="params.id"
:label="t('property.id')"
dense
filled
data-cy="idInput"
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput
v-model="params.name"
:label="t('property.name')"
dense
filled
data-cy="nameInput"
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnSelect
url="PropertyGroups"
:label="t('property.group')"
v-model="params.propertyGroupFk"
option-value="id"
option-label="description"
:options="propertyGroups"
@update:model-value="searchFn()"
dense
filled
data-cy="propertyGroupSelect"
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput
v-model="params.protocol"
:label="t('property.protocol')"
dense
filled
data-cy="protocolInput"
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput
v-model="params.cadaster"
:label="t('property.cadaster')"
filled
dense
data-cy="cadasterInput"
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnSelect
url="Companies"
:label="t('property.owner')"
v-model="params.companyFk"
option-value="id"
option-label="code"
:options="companies"
@update:model-value="searchFn()"
dense
filled
data-cy="ownerSelect"
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInputDate
v-model="params.purchased"
:label="t('property.purchased')"
dense
filled
data-cy="purchasedDateInput"
/>
</QItemSection>
<QItemSection>
<VnInputDate
v-model="params.booked"
:label="t('property.booked')"
dense
filled
data-cy="bookedDateInput"
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnCheckbox
v-model="params.hasFormalization"
:label="t('property.hasFormalization')"
dense
filled
data-cy="hasFormalizationCheckbox"
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnCheckbox
v-model="params.hasSimpleCopy"
:label="t('property.hasSimpleCopy')"
dense
filled
data-cy="hasSimpleCopyCheckbox"
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnCheckbox
v-model="params.hasOriginalPropertyDeed"
:label="t('property.hasOriginalPropertyDeed')"
dense
filled
data-cy="hasOriginalPropertyDeedCheckbox"
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnCheckbox
v-model="params.hasFundProvision"
:label="t('property.hasFundProvision')"
dense
filled
data-cy="hasFundProvisionCheckbox"
/>
</QItemSection>
</QItem>
</template>
</VnFilterPanel>
</template>