From 64c21aa5d924de23125e8ee846e343a8ef870962 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Mon, 1 Jul 2024 17:53:48 +0200
Subject: [PATCH 01/19] refs #7355 fix vnTable

---
 src/pages/Account/AccountList.vue | 120 +++++++++++++++++-------------
 1 file changed, 68 insertions(+), 52 deletions(-)

diff --git a/src/pages/Account/AccountList.vue b/src/pages/Account/AccountList.vue
index dee019fed..d645a599a 100644
--- a/src/pages/Account/AccountList.vue
+++ b/src/pages/Account/AccountList.vue
@@ -2,7 +2,7 @@
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { computed, ref } from 'vue';
-
+import VnTable from 'components/VnTable/VnTable.vue';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
@@ -47,6 +47,52 @@ const exprBuilder = (param, value) => {
     }
 };
 
+const columns = computed(() => [
+    {
+        align: 'left',
+        name: 'id',
+        label: t('id'),
+        isId: true,
+        field: 'id',
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'nickname',
+        label: t('nickname'),
+        field: 'nickname',
+        component: 'input',
+        columnField: {
+            component: null,
+        },
+        cardVisible: true,
+        create: true,
+    },
+    {
+        align: 'left',
+        name: 'name',
+        label: t('name'),
+        field: 'name',
+        component: 'input',
+        columnField: {
+            component: null,
+        },
+        cardVisible: true,
+        create: true,
+    },
+    {
+        align: 'right',
+        label: '',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('View Summary'),
+                icon: 'preview',
+                action: (row) => viewSummary(row.id, AccountSummary),
+            },
+        ],
+    },
+]);
 const getApiUrl = () => new URL(window.location).origin;
 
 const navigate = (event, id) => {
@@ -90,55 +136,25 @@ const openCreateModal = () => accountCreateDialogRef.value.show();
             <AccountFilter data-key="AccountList" :expr-builder="exprBuilder" />
         </QScrollArea>
     </QDrawer>
-    <QPage class="column items-center q-pa-md">
-        <div class="vn-card-list">
-            <VnPaginate
-                :filter="filter"
-                data-key="AccountList"
-                url="VnUsers/preview"
-                auto-load
-            >
-                <template #body="{ rows }">
-                    <CardList
-                        v-for="row of rows"
-                        :id="row.id"
-                        :key="row.id"
-                        :title="row.nickname"
-                        @click="navigate($event, row.id)"
-                    >
-                        <template #list-items>
-                            <VnLv :label="t('account.card.name')" :value="row.nickname">
-                            </VnLv>
-                            <VnLv
-                                :label="t('account.card.nickname')"
-                                :value="row.username"
-                            >
-                            </VnLv>
-                        </template>
-                        <template #actions>
-                            <QBtn
-                                :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id, AccountSummary)"
-                                color="primary"
-                                style="margin-top: 15px"
-                            />
-                        </template>
-                    </CardList>
-                </template>
-            </VnPaginate>
-        </div>
-        <QDialog
-            ref="accountCreateDialogRef"
-            transition-hide="scale"
-            transition-show="scale"
-        >
-            <AccountCreate />
-        </QDialog>
-        <QPageSticky :offset="[20, 20]" v-if="showNewUserBtn">
-            <QBtn @click="openCreateModal" color="primary" fab icon="add" />
-            <QTooltip class="text-no-wrap">
-                {{ t('account.card.newUser') }}
-            </QTooltip>
-        </QPageSticky>
-    </QPage>
+
+    <VnTable
+        ref="tableRef"
+        data-key="AccountUsers"
+        :url="`VnUsers`"
+        :create="{
+            urlCreate: 'Accounts',
+            title: 'Create Account',
+            onDataSaved: () => tableRef.reload(),
+            formInitialData: {
+                workerFk: entityId,
+            },
+        }"
+        order="id DESC"
+        :columns="columns"
+        default-mode="table"
+        auto-load
+        :right-search="false"
+        :is-editable="true"
+        :use-model="true"
+    />
 </template>

From ae01aa614bddd4f24d32c7daf8f9cf2fbc5de633 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Tue, 2 Jul 2024 17:30:45 +0200
Subject: [PATCH 02/19] refs #7355 mail alias acls

---
 src/pages/Account/AccountAcls.vue       | 144 ++++++++++++++----------
 src/pages/Account/AccountAliasList.vue  |  98 ++++++++--------
 src/pages/Account/Role/AccountRoles.vue |  86 ++++++--------
 3 files changed, 166 insertions(+), 162 deletions(-)

diff --git a/src/pages/Account/AccountAcls.vue b/src/pages/Account/AccountAcls.vue
index bd7f0f9ae..3a8c55853 100644
--- a/src/pages/Account/AccountAcls.vue
+++ b/src/pages/Account/AccountAcls.vue
@@ -1,8 +1,8 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import FetchData from 'components/FetchData.vue';
-
+import VnTable from 'components/VnTable/VnTable.vue';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import CardList from 'src/components/ui/CardList.vue';
@@ -40,6 +40,69 @@ const exprBuilder = (param, value) => {
     }
 };
 
+const columns = computed(() => [
+    {
+        align: 'left',
+        name: 'id',
+        label: t('id'),
+        isId: true,
+        field: 'id',
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'model',
+        label: t('model'),
+        field: 'model',
+        cardVisible: true,
+        create: true,
+    },
+    {
+        align: 'left',
+        name: 'principalId',
+        label: t('principalId'),
+        field: 'principalId',
+        cardVisible: true,
+        create: true,
+    },
+    {
+        align: 'left',
+        name: 'property',
+        label: t('property'),
+        field: 'property',
+        cardVisible: true,
+        create: true,
+    },
+    {
+        align: 'left',
+        name: 'accessType',
+        label: t('accessType'),
+        field: 'accessType',
+        cardVisible: true,
+        create: true,
+    },
+    {
+        align: 'left',
+        name: 'accessType',
+        label: t('accessType'),
+        field: 'accessType',
+        cardVisible: true,
+        create: true,
+    },
+    {
+        align: 'right',
+        label: '',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('Delete'),
+                icon: 'delete',
+                action: deleteAcl,
+                isPrimary: true,
+            },
+        ],
+    },
+]);
 const deleteAcl = async (id) => {
     try {
         await axios.delete(`ACLs/${id}`);
@@ -81,65 +144,24 @@ function showFormDialog(data) {
         </QScrollArea>
     </QDrawer>
 
-    <QPage class="flex justify-center q-pa-md">
-        <div class="vn-card-list">
-            <VnPaginate
-                ref="paginateRef"
-                data-key="AccountAcls"
-                url="ACLs"
-                :expr-builder="exprBuilder"
-            >
-                <template #body="{ rows }">
-                    <CardList
-                        v-for="row of rows"
-                        :id="row.id"
-                        :key="row.id"
-                        :title="`${row.model}.${row.property}`"
-                        @click="showFormDialog(row)"
-                    >
-                        <template #list-items>
-                            <VnLv :label="t('acls.role')" :value="row.principalId" />
-                            <VnLv :label="t('acls.accessType')" :value="row.accessType" />
-                            <VnLv
-                                :label="t('acls.permissions')"
-                                :value="row.permission"
-                            />
-                        </template>
-                        <template #actions>
-                            <QBtn
-                                :label="t('globals.delete')"
-                                @click.stop="
-                                    openConfirmationModal(
-                                        t('ACL will be removed'),
-                                        t('Are you sure you want to continue?'),
-                                        () => deleteAcl(row.id)
-                                    )
-                                "
-                                color="primary"
-                                style="margin-top: 15px"
-                            />
-                        </template>
-                    </CardList>
-                </template>
-            </VnPaginate>
-        </div>
-        <QDialog
-            v-model="formDialog.show"
-            transition-show="scale"
-            transition-hide="scale"
-        >
-            <AclFormView
-                :form-initial-data="formDialog.formInitialData"
-                @on-data-change="paginateRef.fetch()"
-                :roles-options="rolesOptions"
-            />
-        </QDialog>
-        <QPageSticky position="bottom-right" :offset="[18, 18]">
-            <QBtn fab icon="add" color="primary" @click="showFormDialog()">
-                <QTooltip class="text-no-wrap">{{ t('New ACL') }}</QTooltip>
-            </QBtn>
-        </QPageSticky>
-    </QPage>
+    <VnTable
+        ref="tableRef"
+        data-key="AccountUsers"
+        :url="`ACLs`"
+        :create="{
+            urlCreate: 'ACLs',
+            title: 'Create ACL',
+            onDataSaved: () => tableRef.reload(),
+            formInitialData: {},
+        }"
+        order="id DESC"
+        :columns="columns"
+        default-mode="table"
+        auto-load
+        :right-search="false"
+        :is-editable="true"
+        :use-model="true"
+    />
 </template>
 
 <i18n>
diff --git a/src/pages/Account/AccountAliasList.vue b/src/pages/Account/AccountAliasList.vue
index 29e8d4d78..291b14db8 100644
--- a/src/pages/Account/AccountAliasList.vue
+++ b/src/pages/Account/AccountAliasList.vue
@@ -1,8 +1,8 @@
 <script setup>
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { ref } from 'vue';
-
+import { ref, computed } from 'vue';
+import VnTable from 'components/VnTable/VnTable.vue';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import CardList from 'src/components/ui/CardList.vue';
@@ -34,6 +34,30 @@ const exprBuilder = (param, value) => {
                 : { alias: { like: `%${value}%` } };
     }
 };
+const columns = computed(() => [
+    {
+        align: 'left',
+        name: 'id',
+        label: t('id'),
+        isId: true,
+        field: 'id',
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'alias',
+        label: t('alias'),
+        field: 'alias',
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'description',
+        label: t('description'),
+        field: 'description',
+        cardVisible: true,
+    },
+]);
 
 const navigate = (id) => router.push({ name: 'AliasSummary', params: { id } });
 
@@ -52,54 +76,24 @@ const openCreateModal = () => aliasCreateDialogRef.value.show();
             />
         </Teleport>
     </template>
-    <QPage class="flex justify-center q-pa-md">
-        <div class="vn-card-list">
-            <VnPaginate
-                ref="paginateRef"
-                data-key="AccountAliasList"
-                url="MailAliases"
-                :expr-builder="exprBuilder"
-            >
-                <template #body="{ rows }">
-                    <CardList
-                        v-for="row of rows"
-                        :id="row.id"
-                        :key="row.id"
-                        :title="row.alias"
-                        @click="navigate(row.id)"
-                    >
-                        <template #list-items>
-                            <VnLv :label="t('mailAlias.alias')" :value="row.alias">
-                            </VnLv>
-                            <VnLv
-                                :label="t('mailAlias.description')"
-                                :value="row.description"
-                            >
-                            </VnLv>
-                        </template>
-                        <template #actions>
-                            <QBtn
-                                :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id, AliasSummary)"
-                                color="primary"
-                                style="margin-top: 15px"
-                            />
-                        </template>
-                    </CardList>
-                </template>
-            </VnPaginate>
-        </div>
-        <QDialog
-            ref="aliasCreateDialogRef"
-            transition-show="scale"
-            transition-hide="scale"
-        >
-            <AliasCreateForm />
-        </QDialog>
-        <QPageSticky position="bottom-right" :offset="[18, 18]">
-            <QBtn fab icon="add" color="primary" @click="openCreateModal()">
-                <QTooltip class="text-no-wrap">{{ t('mailAlias.newAlias') }}</QTooltip>
-            </QBtn>
-        </QPageSticky>
-    </QPage>
+    <VnTable
+        ref="tableRef"
+        data-key="MailAliases"
+        :url="`MailAliases`"
+        :create="{
+            urlCreate: 'MailAliases',
+            title: 'Create MailAlias',
+            onDataSaved: () => tableRef.reload(),
+            formInitialData: {
+                workerFk: entityId,
+            },
+        }"
+        order="id DESC"
+        :columns="columns"
+        default-mode="table"
+        auto-load
+        :right-search="false"
+        :is-editable="true"
+        :use-model="true"
+    />
 </template>
diff --git a/src/pages/Account/Role/AccountRoles.vue b/src/pages/Account/Role/AccountRoles.vue
index f4197e433..9d4687942 100644
--- a/src/pages/Account/Role/AccountRoles.vue
+++ b/src/pages/Account/Role/AccountRoles.vue
@@ -1,7 +1,8 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
+import VnTable from 'components/VnTable/VnTable.vue';
 
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
@@ -21,6 +22,30 @@ const { viewSummary } = useSummaryDialog();
 
 const roleCreateDialogRef = ref(null);
 
+const columns = computed(() => [
+    {
+        align: 'left',
+        name: 'id',
+        label: t('id'),
+        isId: true,
+        field: 'id',
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'name',
+        label: t('name'),
+        field: 'name',
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'description',
+        label: t('description'),
+        field: 'description',
+        cardVisible: true,
+    },
+]);
 const exprBuilder = (param, value) => {
     switch (param) {
         case 'search':
@@ -80,52 +105,15 @@ const navigate = (event, id) => {
             <AccountRolesFilter data-key="RolesList" :expr-builder="exprBuilder" />
         </QScrollArea>
     </QDrawer>
-    <QPage class="column items-center q-pa-md">
-        <div class="vn-card-list">
-            <VnPaginate data-key="RolesList" url="VnRoles">
-                <template #body="{ rows }">
-                    <CardList
-                        :id="row.id"
-                        :key="row.id"
-                        :title="row.name"
-                        @click="navigate($event, row.id)"
-                        v-for="row of rows"
-                    >
-                        <template #list-items>
-                            <div style="flex-direction: column; width: 100%">
-                                <VnLv :label="t('role.card.name')" :value="row.name">
-                                </VnLv>
-                                <VnLv
-                                    :label="t('role.card.description')"
-                                    :value="row.description"
-                                >
-                                </VnLv>
-                            </div>
-                        </template>
-                        <template #actions>
-                            <QBtn
-                                :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id, RoleSummary)"
-                                color="primary"
-                                style="margin-top: 15px"
-                            />
-                        </template>
-                    </CardList>
-                </template>
-            </VnPaginate>
-        </div>
-        <QDialog
-            ref="roleCreateDialogRef"
-            transition-show="scale"
-            transition-hide="scale"
-        >
-            <RoleForm />
-        </QDialog>
-        <QPageSticky :offset="[20, 20]">
-            <QBtn fab icon="add" color="primary" @click="openCreateModal()" />
-            <QTooltip>
-                {{ t('role.newRole') }}
-            </QTooltip>
-        </QPageSticky>
-    </QPage>
+    <VnTable
+        ref="tableRef"
+        data-key="Roles"
+        :url="`VnRoles`"
+        order="id ASC"
+        :columns="columns"
+        default-mode="table"
+        auto-load
+        :right-search="false"
+        :is-editable="true"
+    />
 </template>

From 9caacf3f8666b59d652a24a98b5a8cf54bb70927 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Thu, 4 Jul 2024 14:48:45 +0200
Subject: [PATCH 03/19] refs #7355 accountAcl

---
 src/pages/Account/AccountAcls.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Account/AccountAcls.vue b/src/pages/Account/AccountAcls.vue
index 3a8c55853..4f96372b5 100644
--- a/src/pages/Account/AccountAcls.vue
+++ b/src/pages/Account/AccountAcls.vue
@@ -97,7 +97,7 @@ const columns = computed(() => [
             {
                 title: t('Delete'),
                 icon: 'delete',
-                action: deleteAcl,
+                action: deleteAcl(),
                 isPrimary: true,
             },
         ],

From 592829c7a36ec91557f1b1407fe10a152ac76ecd Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Fri, 5 Jul 2024 11:33:36 +0200
Subject: [PATCH 04/19] fix #7355 fix acls list

---
 src/pages/Account/AccountAcls.vue | 15 +----------
 src/pages/Account/AccountList.vue | 43 -------------------------------
 2 files changed, 1 insertion(+), 57 deletions(-)

diff --git a/src/pages/Account/AccountAcls.vue b/src/pages/Account/AccountAcls.vue
index 4f96372b5..0ea4f9192 100644
--- a/src/pages/Account/AccountAcls.vue
+++ b/src/pages/Account/AccountAcls.vue
@@ -3,14 +3,8 @@ import { useI18n } from 'vue-i18n';
 import { ref, computed } from 'vue';
 import FetchData from 'components/FetchData.vue';
 import VnTable from 'components/VnTable/VnTable.vue';
-import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import CardList from 'src/components/ui/CardList.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
 import AclFilter from './Acls/AclFilter.vue';
-import AclFormView from './Acls/AclFormView.vue';
-
-import { useVnConfirm } from 'composables/useVnConfirm';
 import { useStateStore } from 'stores/useStateStore';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
@@ -25,10 +19,8 @@ defineProps({
 const { notify } = useNotify();
 const { t } = useI18n();
 const stateStore = useStateStore();
-const { openConfirmationModal } = useVnConfirm();
 
 const paginateRef = ref();
-const formDialog = ref(false);
 const rolesOptions = ref([]);
 
 const exprBuilder = (param, value) => {
@@ -106,18 +98,13 @@ const columns = computed(() => [
 const deleteAcl = async (id) => {
     try {
         await axios.delete(`ACLs/${id}`);
+        console.log('hola');
         paginateRef.value.fetch();
         notify('ACL removed', 'positive');
     } catch (error) {
         console.error('Error deleting Acl: ', error);
     }
 };
-function showFormDialog(data) {
-    formDialog.value = {
-        show: true,
-        formInitialData: { ...data },
-    };
-}
 </script>
 
 <template>
diff --git a/src/pages/Account/AccountList.vue b/src/pages/Account/AccountList.vue
index d645a599a..a2df7e5fd 100644
--- a/src/pages/Account/AccountList.vue
+++ b/src/pages/Account/AccountList.vue
@@ -20,32 +20,6 @@ const stateStore = useStateStore();
 const router = useRouter();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
-const accountCreateDialogRef = ref(null);
-const showNewUserBtn = computed(() => useRole().hasAny(['itManagement']));
-
-const filter = {
-    fields: ['id', 'nickname', 'name', 'role'],
-    include: { relation: 'role', scope: { fields: ['id', 'name'] } },
-};
-
-const exprBuilder = (param, value) => {
-    switch (param) {
-        case 'search':
-            return /^\d+$/.test(value)
-                ? { id: value }
-                : {
-                      or: [
-                          { name: { like: `%${value}%` } },
-                          { nickname: { like: `%${value}%` } },
-                      ],
-                  };
-        case 'name':
-        case 'nickname':
-            return { [param]: { like: `%${value}%` } };
-        case 'roleFk':
-            return { [param]: value };
-    }
-};
 
 const columns = computed(() => [
     {
@@ -93,15 +67,6 @@ const columns = computed(() => [
         ],
     },
 ]);
-const getApiUrl = () => new URL(window.location).origin;
-
-const navigate = (event, id) => {
-    if (event.ctrlKey || event.metaKey)
-        return window.open(`${getApiUrl()}/#/account/${id}/summary`);
-    router.push({ path: `/account/${id}` });
-};
-
-const openCreateModal = () => accountCreateDialogRef.value.show();
 </script>
 
 <template>
@@ -141,14 +106,6 @@ const openCreateModal = () => accountCreateDialogRef.value.show();
         ref="tableRef"
         data-key="AccountUsers"
         :url="`VnUsers`"
-        :create="{
-            urlCreate: 'Accounts',
-            title: 'Create Account',
-            onDataSaved: () => tableRef.reload(),
-            formInitialData: {
-                workerFk: entityId,
-            },
-        }"
         order="id DESC"
         :columns="columns"
         default-mode="table"

From 2e3970c0cc930cf39ef939158b760fa57b7546bf Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Fri, 5 Jul 2024 13:18:46 +0200
Subject: [PATCH 05/19] refs #7355 fix accountAlias

---
 src/pages/Account/AccountAcls.vue | 72 ++++++++++++++++---------------
 1 file changed, 38 insertions(+), 34 deletions(-)

diff --git a/src/pages/Account/AccountAcls.vue b/src/pages/Account/AccountAcls.vue
index 0ea4f9192..7c686eda9 100644
--- a/src/pages/Account/AccountAcls.vue
+++ b/src/pages/Account/AccountAcls.vue
@@ -1,13 +1,16 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { ref, computed } from 'vue';
-import FetchData from 'components/FetchData.vue';
-import VnTable from 'components/VnTable/VnTable.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import AclFilter from './Acls/AclFilter.vue';
 import { useStateStore } from 'stores/useStateStore';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
+import { useQuasar } from 'quasar';
+
+import FetchData from 'components/FetchData.vue';
+import VnTable from 'components/VnTable/VnTable.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import VnConfirm from 'components/ui/VnConfirm.vue';
 
 defineProps({
     id: {
@@ -19,8 +22,9 @@ defineProps({
 const { notify } = useNotify();
 const { t } = useI18n();
 const stateStore = useStateStore();
+const quasar = useQuasar();
 
-const paginateRef = ref();
+const tableRef = ref();
 const rolesOptions = ref([]);
 
 const exprBuilder = (param, value) => {
@@ -73,14 +77,6 @@ const columns = computed(() => [
         cardVisible: true,
         create: true,
     },
-    {
-        align: 'left',
-        name: 'accessType',
-        label: t('accessType'),
-        field: 'accessType',
-        cardVisible: true,
-        create: true,
-    },
     {
         align: 'right',
         label: '',
@@ -89,17 +85,32 @@ const columns = computed(() => [
             {
                 title: t('Delete'),
                 icon: 'delete',
-                action: deleteAcl(),
+                action: deleteAcl,
                 isPrimary: true,
             },
         ],
     },
 ]);
-const deleteAcl = async (id) => {
+const deleteAcl = async ({ id }) => {
     try {
+        await new Promise((resolve) => {
+            quasar
+                .dialog({
+                    component: VnConfirm,
+                    componentProps: {
+                        title: t('CAMBIA-HO'),
+                        message: t('CAMBIA-HO'),
+                    },
+                })
+                .onOk(() => {
+                    resolve(true);
+                })
+                .onCancel(() => {
+                    resolve(false);
+                });
+        });
         await axios.delete(`ACLs/${id}`);
-        console.log('hola');
-        paginateRef.value.fetch();
+        tableRef.value.reload();
         notify('ACL removed', 'positive');
     } catch (error) {
         console.error('Error deleting Acl: ', error);
@@ -114,26 +125,19 @@ const deleteAcl = async (id) => {
         @on-fetch="(data) => (rolesOptions = data)"
         auto-load
     />
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="AccountAcls"
-                url="ACLs"
-                :expr-builder="exprBuilder"
-                :label="t('acls.search')"
-                :info="t('acls.searchInfo')"
-            />
-        </Teleport>
-    </template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
-            <AclFilter data-key="AccountAcls" />
-        </QScrollArea>
-    </QDrawer>
 
+    <VnSearchbar
+        data-key="AccountAcls"
+        url="ACLs"
+        :expr-builder="exprBuilder"
+        :label="t('acls.search')"
+        :info="t('acls.searchInfo')"
+    />
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+    </QDrawer>
     <VnTable
         ref="tableRef"
-        data-key="AccountUsers"
+        data-key="AccountAcls"
         :url="`ACLs`"
         :create="{
             urlCreate: 'ACLs',
@@ -145,7 +149,7 @@ const deleteAcl = async (id) => {
         :columns="columns"
         default-mode="table"
         auto-load
-        :right-search="false"
+        :right-search="true"
         :is-editable="true"
         :use-model="true"
     />

From e1a25e3cf42aca3c783980fe8d1ae4c8027cc1d4 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Mon, 8 Jul 2024 07:32:50 +0200
Subject: [PATCH 06/19] refs #7355 fix create Rol

---
 src/pages/Account/Role/AccountRoles.vue | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/pages/Account/Role/AccountRoles.vue b/src/pages/Account/Role/AccountRoles.vue
index 9d4687942..67d4c6d73 100644
--- a/src/pages/Account/Role/AccountRoles.vue
+++ b/src/pages/Account/Role/AccountRoles.vue
@@ -3,6 +3,7 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { computed, ref } from 'vue';
 import VnTable from 'components/VnTable/VnTable.vue';
+import { useRoute } from 'vue-router';
 
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
@@ -14,12 +15,18 @@ import AccountRolesFilter from './AccountRolesFilter.vue';
 
 import { useStateStore } from 'stores/useStateStore';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-
+const route = useRoute();
 const stateStore = useStateStore();
 const router = useRouter();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
-
+const $props = defineProps({
+    id: {
+        type: Number,
+        default: 0,
+    },
+});
+const entityId = computed(() => $props.id || route.params.id);
 const roleCreateDialogRef = ref(null);
 
 const columns = computed(() => [
@@ -37,6 +44,7 @@ const columns = computed(() => [
         label: t('name'),
         field: 'name',
         cardVisible: true,
+        create: true,
     },
     {
         align: 'left',
@@ -44,6 +52,7 @@ const columns = computed(() => [
         label: t('description'),
         field: 'description',
         cardVisible: true,
+        create: true,
     },
 ]);
 const exprBuilder = (param, value) => {
@@ -109,10 +118,19 @@ const navigate = (event, id) => {
         ref="tableRef"
         data-key="Roles"
         :url="`VnRoles`"
+        :create="{
+            urlCreate: 'VnRoles',
+            title: t('Create rol'),
+            onDataSaved: ({ id }) => tableRef.redirect(id),
+            formInitialData: {
+                editorFk: entityId,
+            },
+        }"
         order="id ASC"
         :columns="columns"
         default-mode="table"
         auto-load
+        redirect="role"
         :right-search="false"
         :is-editable="true"
     />

From a43a6aec82fa9b3c5f6c6e4046f358e449db098a Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Mon, 8 Jul 2024 09:59:07 +0200
Subject: [PATCH 07/19] refs #7355 fix Rol, alias

---
 src/pages/Account/AccountAliasList.vue  | 30 +++++++++----------------
 src/pages/Account/Role/AccountRoles.vue | 11 ++-------
 src/pages/Travel/TravelList.vue         |  2 +-
 3 files changed, 14 insertions(+), 29 deletions(-)

diff --git a/src/pages/Account/AccountAliasList.vue b/src/pages/Account/AccountAliasList.vue
index 291b14db8..a43b35ec1 100644
--- a/src/pages/Account/AccountAliasList.vue
+++ b/src/pages/Account/AccountAliasList.vue
@@ -3,28 +3,23 @@ import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { ref, computed } from 'vue';
 import VnTable from 'components/VnTable/VnTable.vue';
-import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import CardList from 'src/components/ui/CardList.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
-import AliasSummary from './Alias/Card/AliasSummary.vue';
-import AliasCreateForm from './Alias/AliasCreateForm.vue';
-
-import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { useStateStore } from 'stores/useStateStore';
+const route = useRoute();
+import { useRoute } from 'vue-router';
 
-defineProps({
+const $props = defineProps({
     id: {
         type: Number,
         default: 0,
     },
 });
+const entityId = computed(() => $props.id || route.params.id);
 
+const tableRef = ref();
 const { t } = useI18n();
-const { viewSummary } = useSummaryDialog();
 const router = useRouter();
 const stateStore = useStateStore();
-const aliasCreateDialogRef = ref(null);
 
 const exprBuilder = (param, value) => {
     switch (param) {
@@ -49,6 +44,7 @@ const columns = computed(() => [
         label: t('alias'),
         field: 'alias',
         cardVisible: true,
+        create: true,
     },
     {
         align: 'left',
@@ -56,12 +52,9 @@ const columns = computed(() => [
         label: t('description'),
         field: 'description',
         cardVisible: true,
+        create: true,
     },
 ]);
-
-const navigate = (id) => router.push({ name: 'AliasSummary', params: { id } });
-
-const openCreateModal = () => aliasCreateDialogRef.value.show();
 </script>
 
 <template>
@@ -78,20 +71,19 @@ const openCreateModal = () => aliasCreateDialogRef.value.show();
     </template>
     <VnTable
         ref="tableRef"
-        data-key="MailAliases"
+        data-key="AccountAliasList"
         :url="`MailAliases`"
         :create="{
             urlCreate: 'MailAliases',
             title: 'Create MailAlias',
-            onDataSaved: () => tableRef.reload(),
-            formInitialData: {
-                workerFk: entityId,
-            },
+            onDataSaved: ({ id }) => tableRef.redirect(id),
+            formInitialData: {},
         }"
         order="id DESC"
         :columns="columns"
         default-mode="table"
         auto-load
+        redirect="account/alias"
         :right-search="false"
         :is-editable="true"
         :use-model="true"
diff --git a/src/pages/Account/Role/AccountRoles.vue b/src/pages/Account/Role/AccountRoles.vue
index 67d4c6d73..5cea08024 100644
--- a/src/pages/Account/Role/AccountRoles.vue
+++ b/src/pages/Account/Role/AccountRoles.vue
@@ -4,28 +4,21 @@ import { useRouter } from 'vue-router';
 import { computed, ref } from 'vue';
 import VnTable from 'components/VnTable/VnTable.vue';
 import { useRoute } from 'vue-router';
-
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
-import CardList from 'src/components/ui/CardList.vue';
-import RoleSummary from './Card/RoleSummary.vue';
-import RoleForm from './Card/RoleForm.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import AccountRolesFilter from './AccountRolesFilter.vue';
 
 import { useStateStore } from 'stores/useStateStore';
-import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 const route = useRoute();
 const stateStore = useStateStore();
 const router = useRouter();
 const { t } = useI18n();
-const { viewSummary } = useSummaryDialog();
 const $props = defineProps({
     id: {
         type: Number,
         default: 0,
     },
 });
+const tableRef = ref();
 const entityId = computed(() => $props.id || route.params.id);
 const roleCreateDialogRef = ref(null);
 
@@ -130,7 +123,7 @@ const navigate = (event, id) => {
         :columns="columns"
         default-mode="table"
         auto-load
-        redirect="role"
+        redirect="account/role"
         :right-search="false"
         :is-editable="true"
     />
diff --git a/src/pages/Travel/TravelList.vue b/src/pages/Travel/TravelList.vue
index 200ef817b..017cca685 100644
--- a/src/pages/Travel/TravelList.vue
+++ b/src/pages/Travel/TravelList.vue
@@ -9,7 +9,7 @@ import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { computed } from 'vue';
 import TravelSummary from './Card/TravelSummary.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import { dashIfEmpty, toDate } from 'src/filters';
+import { toDate } from 'src/filters';
 const { viewSummary } = useSummaryDialog();
 const router = useRouter();
 const { t } = useI18n();

From 31056ea5c9544ec4be33df490e3b4ad545ce07ed Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Tue, 9 Jul 2024 07:56:38 +0200
Subject: [PATCH 08/19] refs #7355 fix lists redirects summary

---
 src/pages/Account/AccountAliasList.vue  | 1 -
 src/pages/Account/AccountList.vue       | 2 +-
 src/pages/Account/Role/AccountRoles.vue | 1 -
 3 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/pages/Account/AccountAliasList.vue b/src/pages/Account/AccountAliasList.vue
index a43b35ec1..e62375bec 100644
--- a/src/pages/Account/AccountAliasList.vue
+++ b/src/pages/Account/AccountAliasList.vue
@@ -84,7 +84,6 @@ const columns = computed(() => [
         default-mode="table"
         auto-load
         redirect="account/alias"
-        :right-search="false"
         :is-editable="true"
         :use-model="true"
     />
diff --git a/src/pages/Account/AccountList.vue b/src/pages/Account/AccountList.vue
index a2df7e5fd..5da0dde58 100644
--- a/src/pages/Account/AccountList.vue
+++ b/src/pages/Account/AccountList.vue
@@ -110,8 +110,8 @@ const columns = computed(() => [
         :columns="columns"
         default-mode="table"
         auto-load
-        :right-search="false"
         :is-editable="true"
+        redirect="account"
         :use-model="true"
     />
 </template>
diff --git a/src/pages/Account/Role/AccountRoles.vue b/src/pages/Account/Role/AccountRoles.vue
index 5cea08024..ce10606dd 100644
--- a/src/pages/Account/Role/AccountRoles.vue
+++ b/src/pages/Account/Role/AccountRoles.vue
@@ -124,7 +124,6 @@ const navigate = (event, id) => {
         default-mode="table"
         auto-load
         redirect="account/role"
-        :right-search="false"
         :is-editable="true"
     />
 </template>

From 06f88c8cb35beb7f2ebd4eac1436bf1bf43bc686 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Wed, 10 Jul 2024 13:36:08 +0200
Subject: [PATCH 09/19] refs #7355 fix alias summary

---
 src/pages/Account/Alias/Card/AliasSummary.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/Account/Alias/Card/AliasSummary.vue b/src/pages/Account/Alias/Card/AliasSummary.vue
index cedae28b7..b2dc1f0fc 100644
--- a/src/pages/Account/Alias/Card/AliasSummary.vue
+++ b/src/pages/Account/Alias/Card/AliasSummary.vue
@@ -28,6 +28,7 @@ const entityId = computed(() => $props.id || route.params.id);
         ref="summary"
         :url="`MailAliases/${entityId}`"
         @on-fetch="(data) => (alias = data)"
+        data-key="MailAliasesSummary"
     >
         <template #header> {{ alias.id }} - {{ alias.alias }} </template>
         <template #body>

From 29405a877130d50be782181291d100bb1b441459 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Wed, 10 Jul 2024 14:55:55 +0200
Subject: [PATCH 10/19] refs #7355 remove spaces

---
 src/pages/Account/AccountAccounts.vue             |  2 --
 src/pages/Account/AccountAliasList.vue            | 12 ------------
 src/pages/Account/AccountConnections.vue          |  2 --
 src/pages/Account/AccountCreate.vue               |  2 --
 src/pages/Account/AccountFilter.vue               |  1 -
 src/pages/Account/AccountLdap.vue                 |  9 ---------
 src/pages/Account/AccountList.vue                 | 10 +---------
 src/pages/Account/AccountSamba.vue                |  5 -----
 src/pages/Account/InheritedRoles.vue              |  7 -------
 src/pages/Account/Role/AccountRoles.vue           |  1 -
 src/pages/Account/Role/AccountRolesFilter.vue     |  1 -
 src/pages/Account/Role/Card/RoleCard.vue          |  1 -
 src/pages/Account/Role/Card/RoleDescriptor.vue    |  1 -
 src/pages/Account/Role/Card/RoleForm.vue          |  1 -
 src/pages/Account/Role/Card/SubRoleCreateForm.vue |  3 ---
 src/pages/Account/Role/Card/SubRoles.vue          |  4 ----
 16 files changed, 1 insertion(+), 61 deletions(-)

diff --git a/src/pages/Account/AccountAccounts.vue b/src/pages/Account/AccountAccounts.vue
index 3d7dda899..9cc282551 100644
--- a/src/pages/Account/AccountAccounts.vue
+++ b/src/pages/Account/AccountAccounts.vue
@@ -1,11 +1,9 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
 
diff --git a/src/pages/Account/AccountAliasList.vue b/src/pages/Account/AccountAliasList.vue
index e62375bec..b86580017 100644
--- a/src/pages/Account/AccountAliasList.vue
+++ b/src/pages/Account/AccountAliasList.vue
@@ -1,24 +1,12 @@
 <script setup>
-import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { ref, computed } from 'vue';
 import VnTable from 'components/VnTable/VnTable.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import { useStateStore } from 'stores/useStateStore';
-const route = useRoute();
-import { useRoute } from 'vue-router';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        default: 0,
-    },
-});
-const entityId = computed(() => $props.id || route.params.id);
 
 const tableRef = ref();
 const { t } = useI18n();
-const router = useRouter();
 const stateStore = useStateStore();
 
 const exprBuilder = (param, value) => {
diff --git a/src/pages/Account/AccountConnections.vue b/src/pages/Account/AccountConnections.vue
index 98208e5f2..4d3450665 100644
--- a/src/pages/Account/AccountConnections.vue
+++ b/src/pages/Account/AccountConnections.vue
@@ -2,11 +2,9 @@
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
-
 import { toDateTimeFormat } from 'src/filters/date.js';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
diff --git a/src/pages/Account/AccountCreate.vue b/src/pages/Account/AccountCreate.vue
index 1c0f9fee6..e584a1acd 100644
--- a/src/pages/Account/AccountCreate.vue
+++ b/src/pages/Account/AccountCreate.vue
@@ -2,7 +2,6 @@
 import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-
 import FormModelPopup from 'components/FormModelPopup.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import FetchData from 'components/FetchData.vue';
@@ -15,7 +14,6 @@ const newAccountForm = reactive({
     active: true,
 });
 const rolesOptions = ref([]);
-
 const redirectToAccountBasicData = (_, { id }) => {
     router.push({ name: 'AccountBasicData', params: { id } });
 };
diff --git a/src/pages/Account/AccountFilter.vue b/src/pages/Account/AccountFilter.vue
index 784c925bc..1775aa06b 100644
--- a/src/pages/Account/AccountFilter.vue
+++ b/src/pages/Account/AccountFilter.vue
@@ -1,7 +1,6 @@
 <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 VnSelect from 'components/common/VnSelect.vue';
diff --git a/src/pages/Account/AccountLdap.vue b/src/pages/Account/AccountLdap.vue
index 77c4d89f8..7b8433e73 100644
--- a/src/pages/Account/AccountLdap.vue
+++ b/src/pages/Account/AccountLdap.vue
@@ -1,12 +1,10 @@
 <script setup>
 import { ref, onMounted, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-
 import { useArrayData } from 'src/composables/useArrayData';
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
@@ -15,7 +13,6 @@ const { t } = useI18n();
 const { notify } = useNotify();
 
 const arrayData = useArrayData('AccountLdap');
-
 const URL_UPDATE = `LdapConfigs/${1}`;
 const URL_CREATE = `LdapConfigs`;
 const DEFAULT_DATA = {
@@ -27,11 +24,9 @@ const DEFAULT_DATA = {
     server: null,
     userDn: null,
 };
-
 const initialData = ref({
     ...DEFAULT_DATA,
 });
-
 const hasData = computed({
     get: () => initialData.value.hasData,
     set: (val) => {
@@ -40,12 +35,10 @@ const hasData = computed({
         else formCustomFn.value = null;
     },
 });
-
 const initialDataLoaded = ref(false);
 const formUrlCreate = ref(null);
 const formUrlUpdate = ref(null);
 const formCustomFn = ref(null);
-
 const onTestConection = async () => {
     try {
         await axios.get(`LdapConfigs/test`);
@@ -54,7 +47,6 @@ const onTestConection = async () => {
         console.error('Error testing connection', error);
     }
 };
-
 const getInitialLdapConfig = async () => {
     try {
         initialDataLoaded.value = false;
@@ -79,7 +71,6 @@ const getInitialLdapConfig = async () => {
         initialDataLoaded.value = true;
     }
 };
-
 const deleteMailForward = async () => {
     try {
         await axios.delete(URL_UPDATE);
diff --git a/src/pages/Account/AccountList.vue b/src/pages/Account/AccountList.vue
index 5da0dde58..3fe3ce1bf 100644
--- a/src/pages/Account/AccountList.vue
+++ b/src/pages/Account/AccountList.vue
@@ -1,23 +1,15 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import VnTable from 'components/VnTable/VnTable.vue';
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
-import CardList from 'src/components/ui/CardList.vue';
 import AccountSummary from './Card/AccountSummary.vue';
 import AccountFilter from './AccountFilter.vue';
-import AccountCreate from './AccountCreate.vue';
 
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { useStateStore } from 'stores/useStateStore';
-import { useRole } from 'src/composables/useRole';
-import { QDialog } from 'quasar';
 
 const stateStore = useStateStore();
-const router = useRouter();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
 
diff --git a/src/pages/Account/AccountSamba.vue b/src/pages/Account/AccountSamba.vue
index 25428a674..7af9f4364 100644
--- a/src/pages/Account/AccountSamba.vue
+++ b/src/pages/Account/AccountSamba.vue
@@ -1,23 +1,18 @@
 <script setup>
 import { ref, onMounted, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-
 import { useArrayData } from 'src/composables/useArrayData';
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
 
 const { t } = useI18n();
 const { notify } = useNotify();
-
 const arrayData = useArrayData('AccountSamba');
-
 const formModel = ref(null);
-
 const URL_UPDATE = `SambaConfigs/${1}`;
 const URL_CREATE = `SambaConfigs`;
 
diff --git a/src/pages/Account/InheritedRoles.vue b/src/pages/Account/InheritedRoles.vue
index 41e718bb5..13294cfdf 100644
--- a/src/pages/Account/InheritedRoles.vue
+++ b/src/pages/Account/InheritedRoles.vue
@@ -1,23 +1,17 @@
 <script setup>
 import { useRoute, useRouter } from 'vue-router';
 import { computed, ref, watch } from 'vue';
-
 import VnPaginate from 'components/ui/VnPaginate.vue';
-
 import { useArrayData } from 'composables/useArrayData';
 
 const props = defineProps({
     dataKey: { type: String, required: true },
 });
-
 const route = useRoute();
 const router = useRouter();
-
 const paginateRef = ref(null);
-
 const arrayData = useArrayData(props.dataKey);
 const store = arrayData.store;
-
 const data = computed(() => {
     const dataCopy = store.data;
     return dataCopy.sort((a, b) => a.role?.name.localeCompare(b.role?.name));
@@ -37,7 +31,6 @@ const filter = computed(() => ({
 }));
 
 const urlPath = 'RoleMappings';
-
 const columns = computed(() => [
     {
         name: 'name',
diff --git a/src/pages/Account/Role/AccountRoles.vue b/src/pages/Account/Role/AccountRoles.vue
index ce10606dd..ed7aa8f7b 100644
--- a/src/pages/Account/Role/AccountRoles.vue
+++ b/src/pages/Account/Role/AccountRoles.vue
@@ -6,7 +6,6 @@ import VnTable from 'components/VnTable/VnTable.vue';
 import { useRoute } from 'vue-router';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import AccountRolesFilter from './AccountRolesFilter.vue';
-
 import { useStateStore } from 'stores/useStateStore';
 const route = useRoute();
 const stateStore = useStateStore();
diff --git a/src/pages/Account/Role/AccountRolesFilter.vue b/src/pages/Account/Role/AccountRolesFilter.vue
index b1929b1de..8340b965d 100644
--- a/src/pages/Account/Role/AccountRolesFilter.vue
+++ b/src/pages/Account/Role/AccountRolesFilter.vue
@@ -1,6 +1,5 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 
diff --git a/src/pages/Account/Role/Card/RoleCard.vue b/src/pages/Account/Role/Card/RoleCard.vue
index c7b5c695d..8a65d37d7 100644
--- a/src/pages/Account/Role/Card/RoleCard.vue
+++ b/src/pages/Account/Role/Card/RoleCard.vue
@@ -2,7 +2,6 @@
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
-
 import VnCard from 'components/common/VnCard.vue';
 import RoleDescriptor from './RoleDescriptor.vue';
 
diff --git a/src/pages/Account/Role/Card/RoleDescriptor.vue b/src/pages/Account/Role/Card/RoleDescriptor.vue
index 91d733714..da25c5c01 100644
--- a/src/pages/Account/Role/Card/RoleDescriptor.vue
+++ b/src/pages/Account/Role/Card/RoleDescriptor.vue
@@ -6,7 +6,6 @@ import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import useCardDescription from 'src/composables/useCardDescription';
 import { useQuasar } from 'quasar';
-
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
 const $props = defineProps({
diff --git a/src/pages/Account/Role/Card/RoleForm.vue b/src/pages/Account/Role/Card/RoleForm.vue
index d6fc16598..2896369f2 100644
--- a/src/pages/Account/Role/Card/RoleForm.vue
+++ b/src/pages/Account/Role/Card/RoleForm.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-
 import FormModelPopup from 'components/FormModelPopup.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
diff --git a/src/pages/Account/Role/Card/SubRoleCreateForm.vue b/src/pages/Account/Role/Card/SubRoleCreateForm.vue
index 89eceed62..dc732440a 100644
--- a/src/pages/Account/Role/Card/SubRoleCreateForm.vue
+++ b/src/pages/Account/Role/Card/SubRoleCreateForm.vue
@@ -2,17 +2,14 @@
 import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
-
 import VnSelect from 'src/components/common/VnSelect.vue';
 import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import FormPopup from 'components/FormPopup.vue';
 
 const emit = defineEmits(['onSubmitCreateSubrole']);
-
 const { t } = useI18n();
 const route = useRoute();
-
 const subRoleFormData = reactive({
     inheritsFrom: null,
     role: route.params.id,
diff --git a/src/pages/Account/Role/Card/SubRoles.vue b/src/pages/Account/Role/Card/SubRoles.vue
index 1fb84fe4f..7a0088bac 100644
--- a/src/pages/Account/Role/Card/SubRoles.vue
+++ b/src/pages/Account/Role/Card/SubRoles.vue
@@ -2,10 +2,8 @@
 import { useRoute, useRouter } from 'vue-router';
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import SubRoleCreateForm from './SubRoleCreateForm.vue';
-
 import { useVnConfirm } from 'composables/useVnConfirm';
 import { useArrayData } from 'composables/useArrayData';
 import useNotify from 'src/composables/useNotify.js';
@@ -16,10 +14,8 @@ const route = useRoute();
 const router = useRouter();
 const { openConfirmationModal } = useVnConfirm();
 const { notify } = useNotify();
-
 const paginateRef = ref(null);
 const createSubRoleDialogRef = ref(null);
-
 const arrayData = useArrayData('SubRoles');
 const store = arrayData.store;
 

From fc3fc2746171e8993433413fe7933b7729a56762 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Fri, 12 Jul 2024 09:33:32 +0200
Subject: [PATCH 11/19] refs #7355 fix list

---
 src/pages/Account/AccountList.vue | 47 ++++++-------------------------
 1 file changed, 9 insertions(+), 38 deletions(-)

diff --git a/src/pages/Account/AccountList.vue b/src/pages/Account/AccountList.vue
index 3fe3ce1bf..dfef025b2 100644
--- a/src/pages/Account/AccountList.vue
+++ b/src/pages/Account/AccountList.vue
@@ -1,17 +1,14 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { computed } from 'vue';
+import { ref, computed } from 'vue';
 import VnTable from 'components/VnTable/VnTable.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import AccountSummary from './Card/AccountSummary.vue';
-import AccountFilter from './AccountFilter.vue';
-
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-import { useStateStore } from 'stores/useStateStore';
 
-const stateStore = useStateStore();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
+const tableRef = ref();
 
 const columns = computed(() => [
     {
@@ -27,6 +24,7 @@ const columns = computed(() => [
         name: 'nickname',
         label: t('nickname'),
         field: 'nickname',
+        isTitle: true,
         component: 'input',
         columnField: {
             component: null,
@@ -62,47 +60,20 @@ const columns = computed(() => [
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="AccountList"
-                url="VnUsers/preview"
-                :expr-builder="exprBuilder"
-                :label="t('account.search')"
-                :info="t('account.searchInfo')"
-            />
-        </Teleport>
-        <Teleport to="#actions-append">
-            <div class="row q-gutter-x-sm">
-                <QBtn
-                    flat
-                    @click="stateStore.toggleRightDrawer()"
-                    round
-                    dense
-                    icon="menu"
-                >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('globals.collapseMenu') }}
-                    </QTooltip>
-                </QBtn>
-            </div>
-        </Teleport>
-    </template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
-            <AccountFilter data-key="AccountList" :expr-builder="exprBuilder" />
-        </QScrollArea>
-    </QDrawer>
+    <VnSearchbar
+        :label="t('account.search')"
+        data-key="AccountUsers"
+        :info="t('account.searchInfo')"
+    />
 
     <VnTable
         ref="tableRef"
         data-key="AccountUsers"
-        :url="`VnUsers`"
+        url="VnUsers"
         order="id DESC"
         :columns="columns"
         default-mode="table"
         auto-load
-        :is-editable="true"
         redirect="account"
         :use-model="true"
     />

From 369e7306708887f5439a6fef4bf773686510a67f Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Tue, 23 Jul 2024 13:03:12 +0200
Subject: [PATCH 12/19] refs #7355 fix search exprBuilder

---
 src/pages/Account/AccountAcls.vue       |  7 +++--
 src/pages/Account/AccountList.vue       | 19 +++++++++++++
 src/pages/Account/Role/AccountRoles.vue | 37 ++-----------------------
 3 files changed, 25 insertions(+), 38 deletions(-)

diff --git a/src/pages/Account/AccountAcls.vue b/src/pages/Account/AccountAcls.vue
index 7c686eda9..ad8600786 100644
--- a/src/pages/Account/AccountAcls.vue
+++ b/src/pages/Account/AccountAcls.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { ref, computed } from 'vue';
-import AclFilter from './Acls/AclFilter.vue';
 import { useStateStore } from 'stores/useStateStore';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
@@ -98,8 +97,8 @@ const deleteAcl = async ({ id }) => {
                 .dialog({
                     component: VnConfirm,
                     componentProps: {
-                        title: t('CAMBIA-HO'),
-                        message: t('CAMBIA-HO'),
+                        title: t('Remove ACL'),
+                        message: t('Do you want to remove this ACL?'),
                     },
                 })
                 .onOk(() => {
@@ -161,4 +160,6 @@ es:
     ACL removed: ACL eliminado
     ACL will be removed: El ACL será eliminado
     Are you sure you want to continue?: ¿Seguro que quieres continuar?
+    Remove ACL: Eliminar Acl
+    Do you want to remove this ACL?: ¿Quieres eliminar este ACL?
 </i18n>
diff --git a/src/pages/Account/AccountList.vue b/src/pages/Account/AccountList.vue
index dfef025b2..83adf4908 100644
--- a/src/pages/Account/AccountList.vue
+++ b/src/pages/Account/AccountList.vue
@@ -57,12 +57,31 @@ const columns = computed(() => [
         ],
     },
 ]);
+const exprBuilder = (param, value) => {
+    switch (param) {
+        case 'search':
+            return /^\d+$/.test(value)
+                ? { id: value }
+                : {
+                      or: [
+                          { name: { like: `%${value}%` } },
+                          { nickname: { like: `%${value}%` } },
+                      ],
+                  };
+        case 'name':
+        case 'nickname':
+            return { [param]: { like: `%${value}%` } };
+        case 'roleFk':
+            return { [param]: value };
+    }
+};
 </script>
 
 <template>
     <VnSearchbar
         :label="t('account.search')"
         data-key="AccountUsers"
+        :expr-builder="exprBuilder"
         :info="t('account.searchInfo')"
     />
 
diff --git a/src/pages/Account/Role/AccountRoles.vue b/src/pages/Account/Role/AccountRoles.vue
index ed7aa8f7b..0a46f8177 100644
--- a/src/pages/Account/Role/AccountRoles.vue
+++ b/src/pages/Account/Role/AccountRoles.vue
@@ -1,15 +1,12 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
 import { computed, ref } from 'vue';
 import VnTable from 'components/VnTable/VnTable.vue';
 import { useRoute } from 'vue-router';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import AccountRolesFilter from './AccountRolesFilter.vue';
 import { useStateStore } from 'stores/useStateStore';
 const route = useRoute();
 const stateStore = useStateStore();
-const router = useRouter();
 const { t } = useI18n();
 const $props = defineProps({
     id: {
@@ -19,7 +16,6 @@ const $props = defineProps({
 });
 const tableRef = ref();
 const entityId = computed(() => $props.id || route.params.id);
-const roleCreateDialogRef = ref(null);
 
 const columns = computed(() => [
     {
@@ -63,49 +59,20 @@ const exprBuilder = (param, value) => {
             return { [param]: { like: `%${value}%` } };
     }
 };
-
-const openCreateModal = () => roleCreateDialogRef.value.show();
-
-const getApiUrl = () => new URL(window.location).origin;
-
-const navigate = (event, id) => {
-    if (event.ctrlKey || event.metaKey)
-        return window.open(`${getApiUrl()}/#/account/role/${id}/summary`);
-    router.push({ name: 'RoleSummary', params: { id } });
-};
 </script>
 
 <template>
     <template v-if="stateStore.isHeaderMounted()">
         <Teleport to="#searchbar">
             <VnSearchbar
-                data-key="RolesList"
+                data-key="Roles"
                 url="VnRoles"
+                :expr-builder="exprBuilder"
                 :label="t('role.searchRoles')"
                 :info="t('role.searchInfo')"
             />
         </Teleport>
-        <Teleport to="#actions-append">
-            <div class="row q-gutter-x-sm">
-                <QBtn
-                    flat
-                    @click="stateStore.toggleRightDrawer()"
-                    round
-                    dense
-                    icon="menu"
-                >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('globals.collapseMenu') }}
-                    </QTooltip>
-                </QBtn>
-            </div>
-        </Teleport>
     </template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
-            <AccountRolesFilter data-key="RolesList" :expr-builder="exprBuilder" />
-        </QScrollArea>
-    </QDrawer>
     <VnTable
         ref="tableRef"
         data-key="Roles"

From 2f617f4b921dc9523f402a3111091ce5e02fc3d8 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Fri, 26 Jul 2024 09:09:38 +0200
Subject: [PATCH 13/19] passwordAccount

---
 .../Account/Card/AccountDescriptorMenu.vue    | 59 +++++++++++++------
 src/pages/Account/locale/en.yml               |  2 +-
 src/pages/Account/locale/es.yml               |  2 +-
 3 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/src/pages/Account/Card/AccountDescriptorMenu.vue b/src/pages/Account/Card/AccountDescriptorMenu.vue
index 60510394d..8740571f5 100644
--- a/src/pages/Account/Card/AccountDescriptorMenu.vue
+++ b/src/pages/Account/Card/AccountDescriptorMenu.vue
@@ -8,7 +8,7 @@ import { useRoute } from 'vue-router';
 import { useArrayData } from 'src/composables/useArrayData';
 import CustomerChangePassword from 'src/pages/Customer/components/CustomerChangePassword.vue';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
-
+import useNotify from 'src/composables/useNotify.js';
 const quasar = useQuasar();
 const $props = defineProps({
     hasAccount: {
@@ -21,7 +21,7 @@ const { t } = useI18n();
 const { hasAccount } = toRefs($props);
 const { openConfirmationModal } = useVnConfirm();
 const route = useRoute();
-
+const { notify } = useNotify();
 const account = computed(() => useArrayData('AccountId').store.data[0]);
 account.value.hasAccount = hasAccount.value;
 const entityId = computed(() => +route.params.id);
@@ -71,9 +71,44 @@ async function sync() {
         type: 'positive',
     });
 }
+// const removeAccount = async () => {
+//     try {
+//         quasar
+//             .dialog({
+//                 component: VnConfirm,
+//                 componentProps: {
+//                     title: t('account.card.actions.delete.title'),
+//                     message: t('account.card.actions.delete.subTitle'),
+//                     promise: async () => {
+//                         try {
+//                             await axios.delete(`VnUsers/${this.id}`);
+//                             notify('Account removed', 'positive');
+//                         } catch (error) {
+//                             notify('Error removing account', 'negative');
+//                             console.error('Error deleting the account', error);
+//                         }
+//                     },
+//                 },
+//             })
+//             .onOk(() => {
+//                 notify('Account removed', 'positive');
+//             });
+//     } catch (error) {
+//         console.error('Error deleting the account', error);
+//     }
+// };
+const removeAccount = async () => {
+    try {
+        console.log('id', account.value.id);
+        await axios.delete(`VnUsers/${account.value.id}`);
+        notify(t('Account removed'), 'positive');
+    } catch (error) {
+        console.error('Error killing session', error);
+    }
+};
 </script>
 <template>
-    <VnConfirm
+    <!-- <VnConfirm
         v-model="showSyncDialog"
         :message="t('account.card.actions.sync.message')"
         :title="t('account.card.actions.sync.title')"
@@ -102,8 +137,8 @@ async function sync() {
                 type="password"
             />
         </template>
-    </VnConfirm>
-    <QItem v-ripple clickable @click="setPassword">
+    </VnConfirm> -->
+    <!-- <QItem v-ripple clickable @click="setPassword">
         <QItemSection>{{ t('account.card.actions.setPassword') }}</QItemSection>
     </QItem>
     <QItem
@@ -119,7 +154,7 @@ async function sync() {
         "
     >
         <QItemSection>{{ t('account.card.actions.enableAccount.name') }}</QItemSection>
-    </QItem>
+    </QItem> -->
     <QItem
         v-if="account.hasAccount"
         v-ripple
@@ -168,17 +203,7 @@ async function sync() {
     </QItem>
 
     <QSeparator />
-    <QItem
-        @click="
-            openConfirmationModal(
-                t('account.card.actions.delete.title'),
-                t('account.card.actions.delete.subTitle'),
-                removeAccount
-            )
-        "
-        v-ripple
-        clickable
-    >
+    <QItem @click="removeAccount(id)" v-ripple clickable>
         <QItemSection avatar>
             <QIcon name="delete" />
         </QItemSection>
diff --git a/src/pages/Account/locale/en.yml b/src/pages/Account/locale/en.yml
index c7220d7c9..3cf861fb2 100644
--- a/src/pages/Account/locale/en.yml
+++ b/src/pages/Account/locale/en.yml
@@ -68,7 +68,7 @@ account:
             delete:
                 name: Delete
                 title: The account will be deleted
-                subtitle: Are you sure you want to continue?
+                subTitle: Are you sure you want to continue?
                 success: ''
     search: Search user
     searchInfo: You can search by id, name or nickname
diff --git a/src/pages/Account/locale/es.yml b/src/pages/Account/locale/es.yml
index fcc4ce1c8..b53a0153c 100644
--- a/src/pages/Account/locale/es.yml
+++ b/src/pages/Account/locale/es.yml
@@ -67,7 +67,7 @@ account:
             delete:
                 name: Eliminar
                 title: El usuario será eliminado
-                subtitle: ¿Seguro que quieres continuar?
+                subTitle: ¿Seguro que quieres continuar?
                 success: ''
     search: Buscar usuario
     searchInfo: Puedes buscar por id, nombre o usuario

From e41078b9735cbd1ff2a42f38016c538be1ed18ee Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Wed, 31 Jul 2024 08:34:31 +0200
Subject: [PATCH 14/19] refs #7355 traduccions

---
 src/i18n/locale/en.yml | 2 ++
 src/i18n/locale/es.yml | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index e4e06ffac..78c1fa18d 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -246,6 +246,8 @@ globals:
         mailForwarding: Mail forwarding
         mailAlias: Mail alias
         privileges: Privileges
+        ldap: LDAP
+        samba: Samba
     created: Created
     worker: Worker
     now: Now
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index 4cdc13f92..0266bd208 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -248,6 +248,8 @@ globals:
         components: Componentes
         pictures: Fotos
         packages: Bultos
+        ldap: LDAP
+        samba: Samba
     created: Fecha creación
     worker: Trabajador
     now: Ahora

From 5233c1455ae5a0009de80d96212384fef1dd1cda Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Wed, 31 Jul 2024 14:57:25 +0200
Subject: [PATCH 15/19] refactor: refs #7679 better way to update model

---
 src/components/CreateNewCityForm.vue     |  6 +--
 src/components/CreateNewPostcodeForm.vue | 53 +++++++++++-------------
 src/components/CreateNewProvinceForm.vue | 16 ++++++-
 src/components/VnSelectProvince.vue      |  6 ++-
 src/components/common/VnLocation.vue     |  2 +-
 src/components/common/VnSelect.vue       | 16 +++----
 6 files changed, 52 insertions(+), 47 deletions(-)

diff --git a/src/components/CreateNewCityForm.vue b/src/components/CreateNewCityForm.vue
index 3861e3253..50dc41b5f 100644
--- a/src/components/CreateNewCityForm.vue
+++ b/src/components/CreateNewCityForm.vue
@@ -19,8 +19,8 @@ const cityFormData = reactive({
 
 const provincesOptions = ref([]);
 
-const onDataSaved = (dataSaved) => {
-    emit('onDataSaved', dataSaved);
+const onDataSaved = (...args) => {
+    emit('onDataSaved', ...args);
 };
 </script>
 
@@ -36,7 +36,7 @@ const onDataSaved = (dataSaved) => {
         :form-initial-data="cityFormData"
         url-create="towns"
         model="city"
-        @on-data-saved="onDataSaved($event)"
+        @on-data-saved="onDataSaved"
     >
         <template #form-inputs="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">
diff --git a/src/components/CreateNewPostcodeForm.vue b/src/components/CreateNewPostcodeForm.vue
index b1b8852d3..e6247226e 100644
--- a/src/components/CreateNewPostcodeForm.vue
+++ b/src/components/CreateNewPostcodeForm.vue
@@ -22,20 +22,17 @@ const postcodeFormData = reactive({
     townFk: null,
 });
 
-const townsFetchDataRef = ref(null);
 const provincesFetchDataRef = ref(null);
 const countriesOptions = ref([]);
 const provincesOptions = ref([]);
-const townsLocationOptions = ref([]);
+const town = ref({});
 
 function onDataSaved(formData) {
     const newPostcode = {
         ...formData,
     };
-    const townObject = townsLocationOptions.value.find(
-        ({ id }) => id === formData.townFk
-    );
-    newPostcode.town = townObject?.name;
+    newPostcode.town = town.value.name;
+    newPostcode.townFk = town.value.id;
     const provinceObject = provincesOptions.value.find(
         ({ id }) => id === formData.provinceFk
     );
@@ -47,25 +44,23 @@ function onDataSaved(formData) {
     emit('onDataSaved', newPostcode);
 }
 
-async function onCityCreated({ name, provinceFk }, formData) {
-    await townsFetchDataRef.value.fetch();
-    await provincesFetchDataRef.value.fetch();
-    formData.townFk = townsLocationOptions.value.find((town) => town.name === name).id;
-    formData.provinceFk = provinceFk;
-    formData.countryFk = provincesOptions.value.find(
-        (province) => province.id === provinceFk
-    ).countryFk;
+async function onCityCreated(newTown, formData) {
+    newTown.province = provincesOptions.value.find(
+        (province) => province.id === newTown.provinceFk
+    );
+    formData.townFk = newTown;
+    setTown(newTown, formData);
 }
 
-function setTown(id, data) {
-    const newTown = townsLocationOptions.value.find((town) => town.id == id);
+function setTown(newTown, data) {
     if (!newTown) return;
-
+    town.value = newTown;
     data.provinceFk = newTown.provinceFk;
     data.countryFk = newTown.province.countryFk;
 }
 
-function setProvince(id, data) {
+async function setProvince(id, data) {
+    await provincesFetchDataRef.value.fetch();
     const newProvince = provincesOptions.value.find((province) => province.id == id);
     if (!newProvince) return;
 
@@ -74,18 +69,11 @@ function setProvince(id, data) {
 </script>
 
 <template>
-    <FetchData
-        ref="townsFetchDataRef"
-        @on-fetch="(data) => (townsLocationOptions = data)"
-        auto-load
-        url="Towns/location"
-    />
     <FetchData
         ref="provincesFetchDataRef"
-        :filter="{ include: { relation: 'country' } }"
         @on-fetch="(data) => (provincesOptions = data)"
         auto-load
-        url="Provinces"
+        url="Provinces/location"
     />
     <FetchData
         @on-fetch="(data) => (countriesOptions = data)"
@@ -98,6 +86,7 @@ function setProvince(id, data) {
         :title="t('New postcode')"
         :subtitle="t('Please, ensure you put the correct data!')"
         :form-initial-data="postcodeFormData"
+        :mapper="(data) => (data.townFk = data.townFk.id) && data"
         @on-data-saved="onDataSaved"
     >
         <template #form-inputs="{ data, validate }">
@@ -109,14 +98,15 @@ function setProvince(id, data) {
                 />
                 <VnSelectDialog
                     :label="t('City')"
-                    :options="townsLocationOptions"
+                    url="Towns/location"
                     @update:model-value="(value) => setTown(value, data)"
                     v-model="data.townFk"
-                    hide-selected
                     option-label="name"
                     option-value="id"
                     :rules="validate('postcode.city')"
                     :roles-allowed-to-create="['deliveryAssistant']"
+                    :emit-value="false"
+                    clearable
                 >
                     <template #option="{ itemProps, opt }">
                         <QItem v-bind="itemProps">
@@ -130,7 +120,12 @@ function setProvince(id, data) {
                         </QItem>
                     </template>
                     <template #form>
-                        <CreateNewCityForm @on-data-saved="onCityCreated($event, data)" />
+                        <CreateNewCityForm
+                            @on-data-saved="
+                                (_, requestResponse) =>
+                                    onCityCreated(requestResponse, data)
+                            "
+                        />
                     </template>
                 </VnSelectDialog>
             </VnRow>
diff --git a/src/components/CreateNewProvinceForm.vue b/src/components/CreateNewProvinceForm.vue
index c403ccb6b..b8314d079 100644
--- a/src/components/CreateNewProvinceForm.vue
+++ b/src/components/CreateNewProvinceForm.vue
@@ -20,6 +20,9 @@ const provinceFormData = reactive({
 const autonomiesOptions = ref([]);
 
 const onDataSaved = (dataSaved, requestResponse) => {
+    requestResponse.autonomy = autonomiesOptions.value.find(
+        (autonomy) => autonomy.id == requestResponse.autonomyFk
+    );
     emit('onDataSaved', dataSaved, requestResponse);
 };
 </script>
@@ -28,7 +31,7 @@ const onDataSaved = (dataSaved, requestResponse) => {
     <FetchData
         @on-fetch="(data) => (autonomiesOptions = data)"
         auto-load
-        url="Autonomies"
+        url="Autonomies/location"
     />
     <FormModelPopup
         :title="t('New province')"
@@ -53,7 +56,16 @@ const onDataSaved = (dataSaved, requestResponse) => {
                     option-value="id"
                     v-model="data.autonomyFk"
                     :rules="validate('province.autonomyFk')"
-                />
+                >
+                    <template #option="{ itemProps, opt }">
+                        <QItem v-bind="itemProps">
+                            <QItemSection>
+                                <QItemLabel>{{ opt.name }}</QItemLabel>
+                                <QItemLabel caption> {{ opt.country.name }} </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template>
+                </VnSelect>
             </VnRow>
         </template>
     </FormModelPopup>
diff --git a/src/components/VnSelectProvince.vue b/src/components/VnSelectProvince.vue
index 88d372038..ea10ace19 100644
--- a/src/components/VnSelectProvince.vue
+++ b/src/components/VnSelectProvince.vue
@@ -7,6 +7,7 @@ import VnSelectDialog from 'components/common/VnSelectDialog.vue';
 import FetchData from 'components/FetchData.vue';
 import CreateNewProvinceForm from './CreateNewProvinceForm.vue';
 
+const emit = defineEmits(['onProvinceCreated']);
 const provinceFk = defineModel({ type: Number });
 watch(provinceFk, async () => await provincesFetchDataRef.value.fetch());
 
@@ -16,9 +17,10 @@ const { t } = useI18n();
 const provincesOptions = ref();
 const provincesFetchDataRef = ref();
 
-async function onProvinceCreated(_, { id }) {
+async function onProvinceCreated(_, data) {
     await provincesFetchDataRef.value.fetch();
-    provinceFk.value = id;
+    provinceFk.value = data.id;
+    emit('onProvinceCreated', data);
 }
 </script>
 
diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue
index 00bda48cc..8256ec5b0 100644
--- a/src/components/common/VnLocation.vue
+++ b/src/components/common/VnLocation.vue
@@ -23,8 +23,8 @@ function showLabel(data) {
         :input-debounce="300"
         :class="{ required: $attrs.required }"
         v-bind="$attrs"
-        @update:model-value="(_, object) => (value = object)"
         clearable
+        :emit-value="false"
     >
         <template #form>
             <CreateNewPostcode @on-data-saved="(newValue) => (value = newValue)" />
diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 9a1a3602f..675d69f30 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -88,11 +88,7 @@ const value = computed({
     },
     set(value) {
         setOptions(myOptionsOriginal.value);
-        emit(
-            'update:modelValue',
-            value,
-            value && myOptions.value.find((o) => o[optionValue.value] == value)
-        );
+        emit('update:modelValue', value);
     },
 });
 
@@ -205,12 +201,12 @@ async function filterHandler(val, update) {
         :option-label="optionLabel"
         :option-value="optionValue"
         v-bind="$attrs"
-        emit-value
-        map-options
-        use-input
         @filter="filterHandler"
-        hide-selected
-        fill-input
+        :emit-value="$attrs['emit-value'] ?? true"
+        :map-options="$attrs['map-options'] ?? true"
+        :use-input="$attrs['use-input'] ?? true"
+        :hide-selected="$attrs['hide-selected'] ?? true"
+        :fill-input="$attrs['fill-input'] ?? true"
         ref="vnSelectRef"
         lazy-rules
         :class="{ required: $attrs.required }"

From d9fb0d9186ad77fb393e6d692a1aa0a8b990722c Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Thu, 1 Aug 2024 09:47:38 +0200
Subject: [PATCH 16/19] nullishToTrue fn

---
 src/components/common/VnSelect.vue | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 675d69f30..f13a6501a 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -183,6 +183,10 @@ async function filterHandler(val, update) {
         }
     );
 }
+
+function nullishToTrue(value) {
+    return value ?? true;
+}
 </script>
 
 <template>
@@ -202,11 +206,11 @@ async function filterHandler(val, update) {
         :option-value="optionValue"
         v-bind="$attrs"
         @filter="filterHandler"
-        :emit-value="$attrs['emit-value'] ?? true"
-        :map-options="$attrs['map-options'] ?? true"
-        :use-input="$attrs['use-input'] ?? true"
-        :hide-selected="$attrs['hide-selected'] ?? true"
-        :fill-input="$attrs['fill-input'] ?? true"
+        :emit-value="nullishToTrue($attrs['emit-value'])"
+        :map-options="nullishToTrue($attrs['map-options'])"
+        :use-input="nullishToTrue($attrs['use-input'])"
+        :hide-selected="nullishToTrue($attrs['hide-selected'])"
+        :fill-input="nullishToTrue($attrs['fill-input'])"
         ref="vnSelectRef"
         lazy-rules
         :class="{ required: $attrs.required }"

From 2d467016b2400eee505159c451ef6ad8b3128ded Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Thu, 1 Aug 2024 09:51:18 +0200
Subject: [PATCH 17/19] refs #7355 fix roles

---
 src/components/VnTable/VnTable.vue            |  8 +-
 src/components/common/VnComponent.vue         |  6 +-
 src/components/ui/VnFilterPanel.vue           | 14 +++-
 src/pages/Account/AccountList.vue             | 12 ++-
 .../Account/Card/AccountDescriptorMenu.vue    | 77 +------------------
 src/pages/Account/Role/AccountRoles.vue       |  7 +-
 .../Account/Role/Card/RoleDescriptor.vue      | 30 ++------
 7 files changed, 41 insertions(+), 113 deletions(-)

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 444ca15bd..4e40c0ba6 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -124,7 +124,7 @@ const tableModes = [
 ];
 onBeforeMount(() => {
     setUserParams(route.query[$props.searchUrl]);
-    hasParams.value = Object.keys(params.value).length !== 0;
+    hasParams.value = params.value && Object.keys(params.value).length !== 0;
 });
 
 onMounted(() => {
@@ -158,7 +158,10 @@ function setUserParams(watchedParams) {
     if (!watchedParams) return;
 
     if (typeof watchedParams == 'string') watchedParams = JSON.parse(watchedParams);
-    const filter = JSON.parse(watchedParams?.filter);
+    const filter =
+        typeof watchedParams?.filter == 'string'
+            ? JSON.parse(watchedParams?.filter)
+            : watchedParams?.filter;
     const where = filter?.where;
     const order = filter?.order;
 
@@ -281,6 +284,7 @@ defineExpose({
                 v-model="params"
                 :search-url="searchUrl"
                 :redirect="!!redirect"
+                @set-user-params="setUserParams"
             >
                 <template #body>
                     <div
diff --git a/src/components/common/VnComponent.vue b/src/components/common/VnComponent.vue
index 3ec3cc860..fa99f9892 100644
--- a/src/components/common/VnComponent.vue
+++ b/src/components/common/VnComponent.vue
@@ -30,10 +30,10 @@ function mix(toComponent) {
     mixed = {
         component: customComponent?.component ?? component,
         attrs: {
-            ...toValueAttrs(customComponent?.attrs),
-            ...toValueAttrs(customComponent?.forceAttrs),
-            ...toComponent,
             ...toValueAttrs(attrs),
+            ...toValueAttrs(customComponent?.attrs),
+            ...toComponent,
+            ...toValueAttrs(customComponent?.forceAttrs),
         },
         event: { ...customComponent?.event, ...event },
     };
diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index 27b6e7b34..430383e40 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -57,7 +57,7 @@ const $props = defineProps({
     },
 });
 
-defineExpose({ search });
+defineExpose({ search, sanitizer });
 const emit = defineEmits([
     'update:modelValue',
     'refresh',
@@ -65,6 +65,7 @@ const emit = defineEmits([
     'search',
     'init',
     'remove',
+    'setUserParams',
 ]);
 
 const arrayData = useArrayData($props.dataKey, {
@@ -87,6 +88,7 @@ function setUserParams(watchedParams) {
     watchedParams = { ...watchedParams, ...watchedParams.filter?.where };
     delete watchedParams.filter;
     userParams.value = { ...userParams.value, ...watchedParams };
+    emit('setUserParams', userParams.value);
 }
 
 watch(
@@ -190,6 +192,14 @@ function formatValue(value) {
 
     return `"${value}"`;
 }
+
+function sanitizer(params) {
+    for (const [key, value] of Object.entries(params)) {
+        if (typeof value == 'object')
+            params[key] = Object.values(value)[0].replaceAll('%', '');
+    }
+    return params;
+}
 </script>
 
 <template>
@@ -272,7 +282,7 @@ function formatValue(value) {
             <QSeparator />
         </QList>
         <QList dense class="list q-gutter-y-sm q-mt-sm">
-            <slot name="body" :params="userParams" :search-fn="search"></slot>
+            <slot name="body" :params="sanitizer(userParams)" :search-fn="search"></slot>
         </QList>
     </QForm>
     <QInnerLoading
diff --git a/src/pages/Account/AccountList.vue b/src/pages/Account/AccountList.vue
index 83adf4908..ecb027e49 100644
--- a/src/pages/Account/AccountList.vue
+++ b/src/pages/Account/AccountList.vue
@@ -21,14 +21,16 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        name: 'nickname',
+        name: 'username',
         label: t('nickname'),
-        field: 'nickname',
         isTitle: true,
         component: 'input',
         columnField: {
             component: null,
         },
+        columnFilter: {
+            inWhere: true,
+        },
         cardVisible: true,
         create: true,
     },
@@ -36,11 +38,13 @@ const columns = computed(() => [
         align: 'left',
         name: 'name',
         label: t('name'),
-        field: 'name',
         component: 'input',
         columnField: {
             component: null,
         },
+        columnFilter: {
+            inWhere: true,
+        },
         cardVisible: true,
         create: true,
     },
@@ -88,7 +92,7 @@ const exprBuilder = (param, value) => {
     <VnTable
         ref="tableRef"
         data-key="AccountUsers"
-        url="VnUsers"
+        url="VnUsers/preview"
         order="id DESC"
         :columns="columns"
         default-mode="table"
diff --git a/src/pages/Account/Card/AccountDescriptorMenu.vue b/src/pages/Account/Card/AccountDescriptorMenu.vue
index 8740571f5..4b30de127 100644
--- a/src/pages/Account/Card/AccountDescriptorMenu.vue
+++ b/src/pages/Account/Card/AccountDescriptorMenu.vue
@@ -71,90 +71,17 @@ async function sync() {
         type: 'positive',
     });
 }
-// const removeAccount = async () => {
-//     try {
-//         quasar
-//             .dialog({
-//                 component: VnConfirm,
-//                 componentProps: {
-//                     title: t('account.card.actions.delete.title'),
-//                     message: t('account.card.actions.delete.subTitle'),
-//                     promise: async () => {
-//                         try {
-//                             await axios.delete(`VnUsers/${this.id}`);
-//                             notify('Account removed', 'positive');
-//                         } catch (error) {
-//                             notify('Error removing account', 'negative');
-//                             console.error('Error deleting the account', error);
-//                         }
-//                     },
-//                 },
-//             })
-//             .onOk(() => {
-//                 notify('Account removed', 'positive');
-//             });
-//     } catch (error) {
-//         console.error('Error deleting the account', error);
-//     }
-// };
+
 const removeAccount = async () => {
     try {
-        console.log('id', account.value.id);
         await axios.delete(`VnUsers/${account.value.id}`);
         notify(t('Account removed'), 'positive');
     } catch (error) {
-        console.error('Error killing session', error);
+        console.error('Error deleting user', error);
     }
 };
 </script>
 <template>
-    <!-- <VnConfirm
-        v-model="showSyncDialog"
-        :message="t('account.card.actions.sync.message')"
-        :title="t('account.card.actions.sync.title')"
-        :promise="sync"
-    >
-        <template #customHTML>
-            {{ shouldSyncPassword }}
-            <QCheckbox
-                :label="t('account.card.actions.sync.checkbox')"
-                v-model="shouldSyncPassword"
-                class="full-width"
-                clearable
-                clear-icon="close"
-            >
-                <QIcon style="padding-left: 10px" color="primary" name="info" size="sm">
-                    <QTooltip>{{ t('account.card.actions.sync.tooltip') }}</QTooltip>
-                </QIcon></QCheckbox
-            >
-            <QInput
-                v-if="shouldSyncPassword"
-                :label="t('login.password')"
-                v-model="syncPassword"
-                class="full-width"
-                clearable
-                clear-icon="close"
-                type="password"
-            />
-        </template>
-    </VnConfirm> -->
-    <!-- <QItem v-ripple clickable @click="setPassword">
-        <QItemSection>{{ t('account.card.actions.setPassword') }}</QItemSection>
-    </QItem>
-    <QItem
-        v-if="!account.hasAccount"
-        v-ripple
-        clickable
-        @click="
-            openConfirmationModal(
-                t('account.card.actions.enableAccount.title'),
-                t('account.card.actions.enableAccount.subtitle'),
-                () => updateStatusAccount(true)
-            )
-        "
-    >
-        <QItemSection>{{ t('account.card.actions.enableAccount.name') }}</QItemSection>
-    </QItem> -->
     <QItem
         v-if="account.hasAccount"
         v-ripple
diff --git a/src/pages/Account/Role/AccountRoles.vue b/src/pages/Account/Role/AccountRoles.vue
index 0a46f8177..c11bb340a 100644
--- a/src/pages/Account/Role/AccountRoles.vue
+++ b/src/pages/Account/Role/AccountRoles.vue
@@ -23,14 +23,15 @@ const columns = computed(() => [
         name: 'id',
         label: t('id'),
         isId: true,
-        field: 'id',
+        columnFilter: {
+            inWhere: true,
+        },
         cardVisible: true,
     },
     {
         align: 'left',
         name: 'name',
         label: t('name'),
-        field: 'name',
         cardVisible: true,
         create: true,
     },
@@ -38,7 +39,6 @@ const columns = computed(() => [
         align: 'left',
         name: 'description',
         label: t('description'),
-        field: 'description',
         cardVisible: true,
         create: true,
     },
@@ -66,7 +66,6 @@ const exprBuilder = (param, value) => {
         <Teleport to="#searchbar">
             <VnSearchbar
                 data-key="Roles"
-                url="VnRoles"
                 :expr-builder="exprBuilder"
                 :label="t('role.searchRoles')"
                 :info="t('role.searchInfo')"
diff --git a/src/pages/Account/Role/Card/RoleDescriptor.vue b/src/pages/Account/Role/Card/RoleDescriptor.vue
index da25c5c01..a8d29cf66 100644
--- a/src/pages/Account/Role/Card/RoleDescriptor.vue
+++ b/src/pages/Account/Role/Card/RoleDescriptor.vue
@@ -35,29 +35,13 @@ const setData = (entity) => (data.value = useCardDescription(entity.name, entity
 const filter = {
     where: { id: entityId },
 };
-const removeRole = () => {
-    quasar
-        .dialog({
-            title: 'Are you sure you want to delete it?',
-            message: 'Delete department',
-            ok: {
-                push: true,
-                color: 'primary',
-            },
-            cancel: true,
-        })
-        .onOk(async () => {
-            try {
-                await axios.post(
-                    `/Departments/${entityId.value}/removeChild`,
-                    entityId.value
-                );
-                router.push({ name: 'WorkerDepartment' });
-                notify('department.departmentRemoved', 'positive');
-            } catch (err) {
-                console.error('Error removing department');
-            }
-        });
+const removeRole = async () => {
+    try {
+        await axios.delete(`VnRoles/${entityId.value}`);
+        notify(t('Role removed'), 'positive');
+    } catch (error) {
+        console.error('Error deleting role', error);
+    }
 };
 </script>
 

From 68e4831ea5c0770b35dbb1539ba2434ad7abc2a5 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Thu, 1 Aug 2024 09:56:54 +0200
Subject: [PATCH 18/19] refs #7355 fix conflicts

---
 src/pages/Account/Card/AccountDescriptorMenu.vue | 4 ++--
 src/pages/Account/Role/Card/RoleDescriptor.vue   | 6 +-----
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/pages/Account/Card/AccountDescriptorMenu.vue b/src/pages/Account/Card/AccountDescriptorMenu.vue
index 4b30de127..05576b145 100644
--- a/src/pages/Account/Card/AccountDescriptorMenu.vue
+++ b/src/pages/Account/Card/AccountDescriptorMenu.vue
@@ -130,10 +130,10 @@ const removeAccount = async () => {
     </QItem>
 
     <QSeparator />
-    <QItem @click="removeAccount(id)" v-ripple clickable>
+    <!-- <QItem @click="removeAccount(id)" v-ripple clickable>
         <QItemSection avatar>
             <QIcon name="delete" />
         </QItemSection>
         <QItemSection>{{ t('account.card.actions.delete.name') }}</QItemSection>
-    </QItem>
+    </QItem> -->
 </template>
diff --git a/src/pages/Account/Role/Card/RoleDescriptor.vue b/src/pages/Account/Role/Card/RoleDescriptor.vue
index a8d29cf66..e4af3ed13 100644
--- a/src/pages/Account/Role/Card/RoleDescriptor.vue
+++ b/src/pages/Account/Role/Card/RoleDescriptor.vue
@@ -1,11 +1,10 @@
 <script setup>
 import { ref, computed } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import useCardDescription from 'src/composables/useCardDescription';
-import { useQuasar } from 'quasar';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
 const $props = defineProps({
@@ -22,9 +21,6 @@ const $props = defineProps({
 
 const route = useRoute();
 
-const quasar = useQuasar();
-const router = useRouter();
-
 const { notify } = useNotify();
 const { t } = useI18n();
 const entityId = computed(() => {

From fa60467e7634ea5b86cd481b3f9885d7583a2037 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Thu, 1 Aug 2024 10:51:13 +0200
Subject: [PATCH 19/19] fix(claim): small details

---
 src/components/FormModel.vue          |  9 ++-------
 src/components/ui/VnNotes.vue         | 29 ++++++++++++++++++++++-----
 src/components/ui/VnPaginate.vue      |  4 ++--
 src/css/app.scss                      | 17 +++++++++-------
 src/pages/Claim/Card/ClaimAction.vue  |  2 +-
 src/pages/Claim/Card/ClaimNotes.vue   | 28 ++++++++++++++------------
 src/pages/Claim/Card/ClaimPhoto.vue   | 12 ++++++++---
 src/pages/Claim/Card/ClaimSummary.vue | 10 ++++-----
 src/pages/Claim/ClaimFilter.vue       |  1 +
 src/pages/Claim/ClaimList.vue         |  2 +-
 10 files changed, 70 insertions(+), 44 deletions(-)

diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index 758ddd433..115145f37 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -159,8 +159,8 @@ onBeforeRouteLeave((to, from, next) => {
         quasar.dialog({
             component: VnConfirm,
             componentProps: {
-                title: t('Unsaved changes will be lost'),
-                message: t('Are you sure exit without saving?'),
+                title: t('globals.unsavedPopup.title'),
+                message: t('globals.unsavedPopup.subtitle'),
                 promise: () => next(),
             },
         });
@@ -356,8 +356,3 @@ defineExpose({
     padding: 32px;
 }
 </style>
-<i18n>
-es:
-    Unsaved changes will be lost: Los cambios que no haya guardado se perderán
-    Are you sure exit without saving?: ¿Seguro que quiere salir sin guardar?
-</i18n>
diff --git a/src/components/ui/VnNotes.vue b/src/components/ui/VnNotes.vue
index f4cdde310..cd2c1474c 100644
--- a/src/components/ui/VnNotes.vue
+++ b/src/components/ui/VnNotes.vue
@@ -1,13 +1,18 @@
 <script setup>
-import VnAvatar from 'src/components/ui/VnAvatar.vue';
-import { toDateHourMin } from 'src/filters';
-import { ref } from 'vue';
 import axios from 'axios';
+import { ref } from 'vue';
+import { onBeforeRouteLeave } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import VnPaginate from './VnPaginate.vue';
-import VnUserLink from '../ui/VnUserLink.vue';
+import { useQuasar } from 'quasar';
+
+import { toDateHourMin } from 'src/filters';
 import { useState } from 'src/composables/useState';
 
+import VnPaginate from 'components/ui/VnPaginate.vue';
+import VnUserLink from 'components/ui/VnUserLink.vue';
+import VnConfirm from 'components/ui/VnConfirm.vue';
+import VnAvatar from 'components/ui/VnAvatar.vue';
+
 const $props = defineProps({
     url: { type: String, default: null },
     filter: { type: Object, default: () => {} },
@@ -17,6 +22,7 @@ const $props = defineProps({
 
 const { t } = useI18n();
 const state = useState();
+const quasar = useQuasar();
 const currentUser = ref(state.getUser());
 const newNote = ref('');
 const vnPaginateRef = ref();
@@ -33,6 +39,19 @@ async function insert() {
     await vnPaginateRef.value.fetch();
     newNote.value = '';
 }
+
+onBeforeRouteLeave((to, from, next) => {
+    if (newNote.value)
+        quasar.dialog({
+            component: VnConfirm,
+            componentProps: {
+                title: t('globals.unsavedPopup.title'),
+                message: t('globals.unsavedPopup.subtitle'),
+                promise: () => next(),
+            },
+        });
+    else next();
+});
 </script>
 <template>
     <QCard class="q-pa-xs q-mb-xl full-width" v-if="$props.addNote">
diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index fd903e759..c27111df4 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -115,8 +115,8 @@ watch(
 );
 
 watch(
-    () => props.url,
-    (url) => fetch({ url })
+    () => [props.url, props.filter],
+    ([url, filter]) => fetch({ url, filter })
 );
 
 const addFilter = async (filter, params) => {
diff --git a/src/css/app.scss b/src/css/app.scss
index 401fa8a72..3efe92db4 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -194,13 +194,6 @@ select:-webkit-autofill {
     justify-content: center;
 }
 
-.q-card,
-.q-table,
-.q-table__bottom,
-.q-drawer {
-    background-color: var(--vn-section-color);
-}
-
 input[type='number'] {
     -moz-appearance: textfield;
 }
@@ -254,6 +247,16 @@ input::-webkit-inner-spin-button {
         white-space: nowrap;
         text-overflow: ellipsis;
     }
+    tr {
+        th {
+            font-size: 11pt;
+        }
+        td {
+            font-size: 11pt;
+            border-top: 1px solid var(--vn-page-color);
+            border-collapse: collapse;
+        }
+    }
     .shrink {
         max-width: 75px;
     }
diff --git a/src/pages/Claim/Card/ClaimAction.vue b/src/pages/Claim/Card/ClaimAction.vue
index e64eab81d..2e890dba8 100644
--- a/src/pages/Claim/Card/ClaimAction.vue
+++ b/src/pages/Claim/Card/ClaimAction.vue
@@ -31,7 +31,7 @@ const destinationTypes = ref([]);
 const totalClaimed = ref(null);
 const DEFAULT_MAX_RESPONSABILITY = 5;
 const DEFAULT_MIN_RESPONSABILITY = 1;
-const arrayData = useArrayData('claimData');
+const arrayData = useArrayData('Claim');
 const marker_labels = [
     { value: DEFAULT_MIN_RESPONSABILITY, label: t('claim.company') },
     { value: DEFAULT_MAX_RESPONSABILITY, label: t('claim.person') },
diff --git a/src/pages/Claim/Card/ClaimNotes.vue b/src/pages/Claim/Card/ClaimNotes.vue
index 83e144e97..a4d11e9f6 100644
--- a/src/pages/Claim/Card/ClaimNotes.vue
+++ b/src/pages/Claim/Card/ClaimNotes.vue
@@ -14,22 +14,24 @@ const $props = defineProps({
 });
 const claimId = computed(() => $props.id || route.params.id);
 
-const claimFilter = {
-    where: { claimFk: claimId.value },
-    fields: ['id', 'created', 'workerFk', 'text'],
-    include: {
-        relation: 'worker',
-        scope: {
-            fields: ['id', 'firstName', 'lastName'],
-            include: {
-                relation: 'user',
-                scope: {
-                    fields: ['id', 'nickname'],
+const claimFilter = computed(() => {
+    return {
+        where: { claimFk: claimId.value },
+        fields: ['id', 'created', 'workerFk', 'text'],
+        include: {
+            relation: 'worker',
+            scope: {
+                fields: ['id', 'firstName', 'lastName'],
+                include: {
+                    relation: 'user',
+                    scope: {
+                        fields: ['id', 'nickname'],
+                    },
                 },
             },
         },
-    },
-};
+    };
+});
 
 const body = {
     claimFk: claimId.value,
diff --git a/src/pages/Claim/Card/ClaimPhoto.vue b/src/pages/Claim/Card/ClaimPhoto.vue
index 076f8d092..21f1be6ed 100644
--- a/src/pages/Claim/Card/ClaimPhoto.vue
+++ b/src/pages/Claim/Card/ClaimPhoto.vue
@@ -1,6 +1,6 @@
 <script setup>
 import axios from 'axios';
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { useQuasar } from 'quasar';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
@@ -22,10 +22,8 @@ const claimDms = ref([
     },
 ]);
 const client = ref({});
-
 const inputFile = ref();
 const files = ref({});
-
 const spinnerRef = ref();
 const claimDmsRef = ref();
 const dmsType = ref({});
@@ -58,6 +56,14 @@ const claimDmsFilter = ref({
 const multimediaDialog = ref();
 const multimediaSlide = ref();
 
+watch(
+    () => router.currentRoute.value.params.id,
+    () => {
+        claimDmsFilter.value.where.id = router.currentRoute.value.params.id;
+        claimDmsRef.value.fetch();
+    }
+);
+
 function openDialog(dmsId) {
     multimediaSlide.value = dmsId;
     multimediaDialog.value = true;
diff --git a/src/pages/Claim/Card/ClaimSummary.vue b/src/pages/Claim/Card/ClaimSummary.vue
index a34830631..4d817c3c2 100644
--- a/src/pages/Claim/Card/ClaimSummary.vue
+++ b/src/pages/Claim/Card/ClaimSummary.vue
@@ -279,7 +279,7 @@ async function changeState(value) {
                 <ClaimNotes
                     :id="entityId"
                     :add-note="false"
-                    class="max-container-height"
+                    style="max-height: 300px"
                     order="created ASC"
                 />
             </QCard>
@@ -330,7 +330,7 @@ async function changeState(value) {
                 <QTable
                     :columns="detailsColumns"
                     :rows="salesClaimed"
-                    flat
+                    separator="horizontal"
                     dense
                     :rows-per-page-options="[0]"
                     hide-bottom
@@ -344,7 +344,7 @@ async function changeState(value) {
                     </template>
                     <template #body="props">
                         <QTr :props="props">
-                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                            <QTd v-for="col in props.cols" :key="col.name" :props="props">
                                 <span v-if="col.name != 'description'">{{
                                     t(col.value)
                                 }}</span>
@@ -359,7 +359,7 @@ async function changeState(value) {
                                     :id="props.row.sale.itemFk"
                                     :sale-fk="props.row.saleFk"
                                 ></ItemDescriptorProxy>
-                            </QTh>
+                            </QTd>
                         </QTr>
                     </template>
                 </QTable>
@@ -384,7 +384,7 @@ async function changeState(value) {
                     <template #body-cell-worker="props">
                         <QTd :props="props" class="link">
                             {{ props.value }}
-                            <WorkerDescriptorProxy :id="props.row.worker.id" />
+                            <WorkerDescriptorProxy :id="props.row.worker?.id" />
                         </QTd>
                     </template>
                 </QTable>
diff --git a/src/pages/Claim/ClaimFilter.vue b/src/pages/Claim/ClaimFilter.vue
index 8878040f6..dc25fe4a0 100644
--- a/src/pages/Claim/ClaimFilter.vue
+++ b/src/pages/Claim/ClaimFilter.vue
@@ -100,6 +100,7 @@ defineExpose({ states });
                     url="Items/withName"
                     option-value="id"
                     option-label="name"
+                    :use-like="false"
                     sort-by="id DESC"
                     outlined
                     rounded
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index 8c5c6a3d0..6fd607da0 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -125,7 +125,7 @@ const STATE_COLOR = {
     <VnTable
         data-key="ClaimList"
         url="Claims/filter"
-        :order="['priority ASC', 'created DESC']"
+        :order="['priority ASC', 'created ASC']"
         :columns="columns"
         redirect="claim"
         :right-search="false"