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

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

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

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>