From 5847734ef76fe7f75e70183986aa8212dbde4660 Mon Sep 17 00:00:00 2001
From: jtubau <jtubau@verdnatura.es>
Date: Tue, 1 Apr 2025 15:09:32 +0200
Subject: [PATCH] feat: refs #6683 add PropertyBasicData component for property
 details form

---
 src/pages/Property/Card/PropertyBasicData.vue | 208 ++++++++++++++++++
 1 file changed, 208 insertions(+)
 create mode 100644 src/pages/Property/Card/PropertyBasicData.vue

diff --git a/src/pages/Property/Card/PropertyBasicData.vue b/src/pages/Property/Card/PropertyBasicData.vue
new file mode 100644
index 000000000..1fbf1b599
--- /dev/null
+++ b/src/pages/Property/Card/PropertyBasicData.vue
@@ -0,0 +1,208 @@
+<script setup>
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelect from 'components/common/VnSelect.vue';
+import VnInput from 'components/common/VnInput.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const isNew = Boolean(!route.params.id);
+</script>
+
+<template>
+    <VnSubToolbar v-if="isNew" />
+    <div class="q-pa-md">
+        <FormModel
+            :url-update="`Properties/${route.params.id}`"
+            model="Property"
+            auto-load
+        >
+            <template #form="{ data }">
+                <VnRow>
+                    <VnInput
+                        :label="t('property.name')"
+                        v-model="data.name"
+                        fill-input
+                        autogrow
+                    />
+                    <VnInput
+                        :label="t('property.cadaster')"
+                        v-model="data.cadaster"
+                        fill-input
+                        autogrow
+                    />
+                </VnRow>
+                <VnRow>
+                    <VnSelect
+                        url="propertyGroups"
+                        :label="t('property.group')"
+                        v-model="data.propertyGroupFk"
+                        option-value="id"
+                        option-label="description"
+                        hide-selected
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>
+                                        {{ `${scope.opt.id}: ${scope.opt.description}` }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelect>
+                    <VnSelect
+                        url="Companies"
+                        :label="t('property.owner')"
+                        v-model="data.companyFk"
+                        option-value="id"
+                        option-label="code"
+                        hide-selected
+                        @update:model-value="onClientChange"
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>
+                                        {{ `${scope.opt.id}: ${scope.opt.code}` }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelect>
+                </VnRow>
+                <VnRow>
+                    <VnInput
+                        :label="t('property.map')"
+                        v-model="data.url"
+                        fill-input
+                        autogrow
+                    />
+                </VnRow>
+                <VnRow>
+                    <VnInputDate
+                        placeholder="dd-mm-aaa"
+                        :label="t('property.purchased')"
+                        v-model="data.purchased"
+                        fill-input
+                    />
+                    <VnInput
+                        :label="t('property.value')"
+                        v-model="data.value"
+                        fill-input
+                        autogrow
+                    />
+                    <VnInput
+                        :label="t('property.protocol')"
+                        v-model="data.protocol"
+                        fill-input
+                        autogrow
+                    />
+                </VnRow>
+                <VnRow>
+                    <VnInput
+                        :label="t('property.smallHolding')"
+                        v-model="data.smallHolding"
+                        fill-input
+                        autogrow
+                    />
+                    <VnInput
+                        :label="t('property.area')"
+                        v-model="data.area"
+                        fill-input
+                        autogrow
+                    />
+                    <VnInput
+                        :label="t('property.allocation')"
+                        v-model="data.allocation"
+                        fill-input
+                        autogrow
+                    />
+                </VnRow>
+                <VnRow>
+                    <VnSelect
+                        url="Towns"
+                        :label="t('property.town')"
+                        v-model="data.townFk"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>
+                                        {{ `${scope.opt.id}: ${scope.opt.name}` }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelect>
+                    <VnInput
+                        :label="t('property.m2')"
+                        v-model="data.m2"
+                        fill-input
+                        autogrow
+                    />
+                    <VnInput
+                        :label="t('property.registry')"
+                        v-model="data.registry"
+                        fill-input
+                        autogrow
+                    />
+                </VnRow>
+                <VnRow>
+                    <VnInput
+                        :label="t('property.tome')"
+                        v-model="data.tome"
+                        fill-input
+                        autogrow
+                    />
+                    <VnInput
+                        :label="t('property.book')"
+                        v-model="data.book"
+                        fill-input
+                        autogrow
+                    />
+                    <VnInput
+                        :label="t('property.page')"
+                        v-model="data.page"
+                        fill-input
+                        autogrow
+                    />
+                    <VnInput
+                        :label="t('property.farm')"
+                        v-model="data.farm"
+                        fill-input
+                        autogrow
+                    />
+                </VnRow>
+                <VnRow>
+                    <VnInput
+                        :label="t('property.registration')"
+                        v-model="data.registration"
+                        fill-input
+                        autogrow
+                    />
+                    <VnInputDate
+                        placeholder="dd-mm-aaa"
+                        :label="t('property.booked')"
+                        v-model="data.booked"
+                        fill-input
+                    />
+                    <VnInput
+                        :label="t('property.volume')"
+                        v-model="data.volume"
+                        fill-input
+                        autogrow
+                    />
+                </VnRow>
+            </template>
+        </FormModel>
+    </div>
+</template>