Merge branch 'dev' of https://gitea.verdnatura.es/verdnatura/salix-front into 4074-useAcls

src/components/CreateNewCityForm.vue

@@ -19,8 +19,8 @@ const cityFormData = reactive({
 
 const provincesOptions = ref([]);
 
-const onDataSaved = (dataSaved) => {
+const onDataSaved = (...args) => {
-    emit('onDataSaved', dataSaved);
+    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>

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(
+    newPostcode.town = town.value.name;
-        ({ id }) => id === formData.townFk
+    newPostcode.townFk = town.value.id;
-    );
-    newPostcode.town = townObject?.name;
     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) {
+async function onCityCreated(newTown, formData) {
-    await townsFetchDataRef.value.fetch();
+    newTown.province = provincesOptions.value.find(
-    await provincesFetchDataRef.value.fetch();
+        (province) => province.id === newTown.provinceFk
-    formData.townFk = townsLocationOptions.value.find((town) => town.name === name).id;
+    );
-    formData.provinceFk = provinceFk;
+    formData.townFk = newTown;
-    formData.countryFk = provincesOptions.value.find(
+    setTown(newTown, formData);
-        (province) => province.id === provinceFk
-    ).countryFk;
 }
 
-function setTown(id, data) {
+function setTown(newTown, data) {
-    const newTown = townsLocationOptions.value.find((town) => town.id == id);
     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>

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>

src/components/FormModel.vue

@@ -159,8 +159,8 @@ onBeforeRouteLeave((to, from, next) => {
         quasar.dialog({
             component: VnConfirm,
             componentProps: {
-                title: t('Unsaved changes will be lost'),
+                title: t('globals.unsavedPopup.title'),
-                message: t('Are you sure exit without saving?'),
+                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>

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>
 

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

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 },
     };

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)" />

src/components/common/VnSelect.vue

@@ -88,11 +88,7 @@ const value = computed({
     },
     set(value) {
         setOptions(myOptionsOriginal.value);
-        emit(
+        emit('update:modelValue', value);
-            'update:modelValue',
-            value,
-            value && myOptions.value.find((o) => o[optionValue.value] == value)
-        );
     },
 });
 
@@ -190,6 +186,10 @@ async function filterHandler(val, update) {
         }
     );
 }
+
+function nullishToTrue(value) {
+    return value ?? true;
+}
 </script>
 
 <template>
@@ -208,12 +208,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="$attrs['hide-selected'] ?? true"
+        :emit-value="nullishToTrue($attrs['emit-value'])"
-        :fill-input="$attrs['fill-input'] ?? true"
+        :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 }"

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

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 { useQuasar } from 'quasar';
-import VnUserLink from '../ui/VnUserLink.vue';
+
+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">

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;
     }

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

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

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';
 

src/pages/Account/AccountAcls.vue

@@ -1,19 +1,15 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
-import FetchData from 'components/FetchData.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';
+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: {
@@ -25,10 +21,9 @@ defineProps({
 const { notify } = useNotify();
 const { t } = useI18n();
 const stateStore = useStateStore();
-const { openConfirmationModal } = useVnConfirm();
+const quasar = useQuasar();
 
-const paginateRef = ref();
+const tableRef = ref();
-const formDialog = ref(false);
 const rolesOptions = ref([]);
 
 const exprBuilder = (param, value) => {
@@ -40,21 +35,86 @@ const exprBuilder = (param, value) => {
     }
 };
 
-const deleteAcl = async (id) => {
+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: 'right',
+        label: '',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('Delete'),
+                icon: 'delete',
+                action: deleteAcl,
+                isPrimary: true,
+            },
+        ],
+    },
+]);
+const deleteAcl = async ({ id }) => {
     try {
+        await new Promise((resolve) => {
+            quasar
+                .dialog({
+                    component: VnConfirm,
+                    componentProps: {
+                        title: t('Remove ACL'),
+                        message: t('Do you want to remove this ACL?'),
+                    },
+                })
+                .onOk(() => {
+                    resolve(true);
+                })
+                .onCancel(() => {
+                    resolve(false);
+                });
+        });
         await axios.delete(`ACLs/${id}`);
-        paginateRef.value.fetch();
+        tableRef.value.reload();
         notify('ACL removed', 'positive');
     } catch (error) {
         console.error('Error deleting Acl: ', error);
     }
 };
-function showFormDialog(data) {
-    formDialog.value = {
-        show: true,
-        formInitialData: { ...data },
-    };
-}
 </script>
 
 <template>
@@ -64,82 +124,34 @@ function showFormDialog(data) {
         @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>
 
-    <QPage class="flex justify-center q-pa-md">
+    <VnSearchbar
-        <div class="vn-card-list">
+        data-key="AccountAcls"
-            <VnPaginate
+        url="ACLs"
-                ref="paginateRef"
+        :expr-builder="exprBuilder"
-                data-key="AccountAcls"
+        :label="t('acls.search')"
-                url="ACLs"
+        :info="t('acls.searchInfo')"
-                :expr-builder="exprBuilder"
+    />
-            >
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-                <template #body="{ rows }">
+    </QDrawer>
-                    <CardList
+    <VnTable
-                        v-for="row of rows"
+        ref="tableRef"
-                        :id="row.id"
+        data-key="AccountAcls"
-                        :key="row.id"
+        :url="`ACLs`"
-                        :title="`${row.model}.${row.property}`"
+        :create="{
-                        @click="showFormDialog(row)"
+            urlCreate: 'ACLs',
-                    >
+            title: 'Create ACL',
-                        <template #list-items>
+            onDataSaved: () => tableRef.reload(),
-                            <VnLv :label="t('acls.role')" :value="row.principalId" />
+            formInitialData: {},
-                            <VnLv :label="t('acls.accessType')" :value="row.accessType" />
+        }"
-                            <VnLv
+        order="id DESC"
-                                :label="t('acls.permissions')"
+        :columns="columns"
-                                :value="row.permission"
+        default-mode="table"
-                            />
+        auto-load
-                        </template>
+        :right-search="true"
-                        <template #actions>
+        :is-editable="true"
-                            <QBtn
+        :use-model="true"
-                                :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>
 </template>
 
 <i18n>
@@ -148,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>

src/pages/Account/AccountAliasList.vue

@@ -1,30 +1,13 @@
 <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';
-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';
 
-defineProps({
+const tableRef = ref();
-    id: {
-        type: Number,
-        default: 0,
-    },
-});
-
 const { t } = useI18n();
-const { viewSummary } = useSummaryDialog();
-const router = useRouter();
 const stateStore = useStateStore();
-const aliasCreateDialogRef = ref(null);
 
 const exprBuilder = (param, value) => {
     switch (param) {
@@ -34,10 +17,32 @@ const exprBuilder = (param, value) => {
                 : { alias: { like: `%${value}%` } };
     }
 };
-
+const columns = computed(() => [
-const navigate = (id) => router.push({ name: 'AliasSummary', params: { id } });
+    {
-
+        align: 'left',
-const openCreateModal = () => aliasCreateDialogRef.value.show();
+        name: 'id',
+        label: t('id'),
+        isId: true,
+        field: 'id',
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'alias',
+        label: t('alias'),
+        field: 'alias',
+        cardVisible: true,
+        create: true,
+    },
+    {
+        align: 'left',
+        name: 'description',
+        label: t('description'),
+        field: 'description',
+        cardVisible: true,
+        create: true,
+    },
+]);
 </script>
 
 <template>
@@ -52,54 +57,22 @@ const openCreateModal = () => aliasCreateDialogRef.value.show();
             />
         </Teleport>
     </template>
-    <QPage class="flex justify-center q-pa-md">
+    <VnTable
-        <div class="vn-card-list">
+        ref="tableRef"
-            <VnPaginate
+        data-key="AccountAliasList"
-                ref="paginateRef"
+        :url="`MailAliases`"
-                data-key="AccountAliasList"
+        :create="{
-                url="MailAliases"
+            urlCreate: 'MailAliases',
-                :expr-builder="exprBuilder"
+            title: 'Create MailAlias',
-            >
+            onDataSaved: ({ id }) => tableRef.redirect(id),
-                <template #body="{ rows }">
+            formInitialData: {},
-                    <CardList
+        }"
-                        v-for="row of rows"
+        order="id DESC"
-                        :id="row.id"
+        :columns="columns"
-                        :key="row.id"
+        default-mode="table"
-                        :title="row.alias"
+        auto-load
-                        @click="navigate(row.id)"
+        redirect="account/alias"
-                    >
+        :is-editable="true"
-                        <template #list-items>
+        :use-model="true"
-                            <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>
 </template>

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';

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 } });
 };

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';

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);

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`;
 

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>

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,55 +71,17 @@ async function sync() {
         type: 'positive',
     });
 }
+
+const removeAccount = async () => {
+    try {
+        await axios.delete(`VnUsers/${account.value.id}`);
+        notify(t('Account removed'), 'positive');
+    } catch (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
@@ -168,20 +130,10 @@ async function sync() {
     </QItem>
 
     <QSeparator />
-    <QItem
+    <!-- <QItem @click="removeAccount(id)" v-ripple clickable>
-        @click="
-            openConfirmationModal(
-                t('account.card.actions.delete.title'),
-                t('account.card.actions.delete.subTitle'),
-                removeAccount
-            )
-        "
-        v-ripple
-        clickable
-    >
         <QItemSection avatar>
             <QIcon name="delete" />
         </QItemSection>
         <QItemSection>{{ t('account.card.actions.delete.name') }}</QItemSection>
-    </QItem>
+    </QItem> -->
 </template>

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',

src/pages/Account/Role/AccountRoles.vue

@@ -1,26 +1,48 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
+import { computed, ref } from 'vue';
-import { 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: {
-const roleCreateDialogRef = ref(null);
+        type: Number,
+        default: 0,
+    },
+});
+const tableRef = ref();
+const entityId = computed(() => $props.id || route.params.id);
 
+const columns = computed(() => [
+    {
+        align: 'left',
+        name: 'id',
+        label: t('id'),
+        isId: true,
+        columnFilter: {
+            inWhere: true,
+        },
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'name',
+        label: t('name'),
+        cardVisible: true,
+        create: true,
+    },
+    {
+        align: 'left',
+        name: 'description',
+        label: t('description'),
+        cardVisible: true,
+        create: true,
+    },
+]);
 const exprBuilder = (param, value) => {
     switch (param) {
         case 'search':
@@ -37,95 +59,36 @@ 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>
+    <VnTable
-        <QScrollArea class="fit text-grey-8">
+        ref="tableRef"
-            <AccountRolesFilter data-key="RolesList" :expr-builder="exprBuilder" />
+        data-key="Roles"
-        </QScrollArea>
+        :url="`VnRoles`"
-    </QDrawer>
+        :create="{
-    <QPage class="column items-center q-pa-md">
+            urlCreate: 'VnRoles',
-        <div class="vn-card-list">
+            title: t('Create rol'),
-            <VnPaginate data-key="RolesList" url="VnRoles">
+            onDataSaved: ({ id }) => tableRef.redirect(id),
-                <template #body="{ rows }">
+            formInitialData: {
-                    <CardList
+                editorFk: entityId,
-                        :id="row.id"
+            },
-                        :key="row.id"
+        }"
-                        :title="row.name"
+        order="id ASC"
-                        @click="navigate($event, row.id)"
+        :columns="columns"
-                        v-for="row of rows"
+        default-mode="table"
-                    >
+        auto-load
-                        <template #list-items>
+        redirect="account/role"
-                            <div style="flex-direction: column; width: 100%">
+        :is-editable="true"
-                                <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>
 </template>

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';
 

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';
 

src/pages/Account/Role/Card/RoleDescriptor.vue

@@ -1,12 +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({
@@ -23,9 +21,6 @@ const $props = defineProps({
 
 const route = useRoute();
 
-const quasar = useQuasar();
-const router = useRouter();
-
 const { notify } = useNotify();
 const { t } = useI18n();
 const entityId = computed(() => {
@@ -36,29 +31,13 @@ const setData = (entity) => (data.value = useCardDescription(entity.name, entity
 const filter = {
     where: { id: entityId },
 };
-const removeRole = () => {
+const removeRole = async () => {
-    quasar
+    try {
-        .dialog({
+        await axios.delete(`VnRoles/${entityId.value}`);
-            title: 'Are you sure you want to delete it?',
+        notify(t('Role removed'), 'positive');
-            message: 'Delete department',
+    } catch (error) {
-            ok: {
+        console.error('Error deleting role', error);
-                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');
-            }
-        });
 };
 </script>
 

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';

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,

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;
 

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

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

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') },

src/pages/Claim/Card/ClaimNotes.vue

@@ -14,22 +14,24 @@ const $props = defineProps({
 });
 const claimId = computed(() => $props.id || route.params.id);
 
-const claimFilter = {
+const claimFilter = computed(() => {
-    where: { claimFk: claimId.value },
+    return {
-    fields: ['id', 'created', 'workerFk', 'text'],
+        where: { claimFk: claimId.value },
-    include: {
+        fields: ['id', 'created', 'workerFk', 'text'],
-        relation: 'worker',
+        include: {
-        scope: {
+            relation: 'worker',
-            fields: ['id', 'firstName', 'lastName'],
+            scope: {
-            include: {
+                fields: ['id', 'firstName', 'lastName'],
-                relation: 'user',
+                include: {
-                scope: {
+                    relation: 'user',
-                    fields: ['id', 'nickname'],
+                    scope: {
+                        fields: ['id', 'nickname'],
+                    },
                 },
             },
         },
-    },
+    };
-};
+});
 
 const body = {
     claimFk: claimId.value,

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;

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>

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

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"

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();