From 2b3d372ba3453c0f7e3cc9bbc48de951cf003f35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C5=A1per=20Grom?= <gasper.grom@gmail.com>
Date: Fri, 18 Aug 2023 15:18:13 +0200
Subject: [PATCH] Member dashboard view more, Pagination query, lint fix,
 duplicate requests (#1357)

---
 frontend/package.json                         |  2 +-
 .../hubspot-readonly-attr-popover.vue         |  5 ++--
 .../components/hubspot-settings-drawer.vue    |  5 ++--
 .../modules/auth/pages/terms-and-privacy.vue  |  2 +-
 .../automation/components/automation-form.vue |  5 ++--
 .../automation/pages/automation-list-page.vue |  2 +-
 .../bulk/bulk-edit-attribute-popover.vue      | 27 +++++++++--------
 .../components/list/member-list-table.vue     | 29 ++++++++++++++++--
 .../components/list/member-list-toolbar.vue   |  7 +++--
 .../modules/member/pages/member-list-page.vue | 29 +++++++++++++++---
 .../pages/member-merge-suggestions-page.vue   |  6 ++--
 .../src/modules/member/store/pinia/actions.ts |  2 +-
 .../src/modules/member/store/pinia/state.ts   |  4 ---
 .../list/organization-list-table.vue          | 30 ++++++++++++++++---
 .../pages/organization-list-page.vue          | 25 ++++++++++++++--
 .../organization/store/pinia/actions.ts       |  2 +-
 .../modules/organization/store/pinia/state.ts |  4 ---
 .../modules/tag/components/tag-popover.vue    | 16 ++++++----
 .../modules/filters/components/Filter.vue     | 13 ++++----
 .../filters/services/filter-api.service.ts    |  6 ----
 .../filters/services/filter-query.service.ts  | 10 -------
 .../modules/filters/types/FilterConfig.ts     |  9 +-----
 .../modules/filters/types/FilterQuery.ts      |  2 --
 .../saved-views/components/SavedViews.vue     | 14 ++-------
 .../saved-views/types/SavedViewsConfig.ts     |  4 +--
 frontend/src/shared/platform/platform.vue     |  3 +-
 26 files changed, 156 insertions(+), 107 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index cb553ad10c..71d90ed2da 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -3,7 +3,7 @@
   "version": "0.5.0",
   "private": true,
   "scripts": {
-    "lint": "eslint \"{src,tests}/**/*.{js,ts}\" --max-warnings=0",
+    "lint": "eslint \"{src,tests}/**/*.{js,ts,vue}\" --max-warnings=0",
     "lint:fix": "npm run lint -- --fix",
     "build:localhost": "vite build --mode localhost",
     "build:production": "vite build --mode prod",
diff --git a/frontend/src/integrations/hubspot/components/hubspot-readonly-attr-popover.vue b/frontend/src/integrations/hubspot/components/hubspot-readonly-attr-popover.vue
index f2fc58ea02..2ef1f79a63 100644
--- a/frontend/src/integrations/hubspot/components/hubspot-readonly-attr-popover.vue
+++ b/frontend/src/integrations/hubspot/components/hubspot-readonly-attr-popover.vue
@@ -10,7 +10,8 @@
           <i class="ri-information-line font-medium text-lg text-blue-600 leading-none" />
         </span>
         <p class="text-sm text-gray-500 font-medium mt-1">
-          The following attributes, auto-generated by crowd.dev, are only mapped into HubSpot, and won't be overwritten if their value is updated on your HubSpot account.
+          The following attributes, auto-generated by crowd.dev, are only mapped into HubSpot,
+          and won't be overwritten if their value is updated on your HubSpot account.
         </p>
       </div>
     </template>
@@ -44,7 +45,7 @@
 
 <script setup>
 import {
-  defineEmits, defineProps, computed, h, ref,
+  defineEmits, defineProps, computed, ref,
 } from 'vue';
 import AppDialog from '@/shared/dialog/dialog.vue';
 
diff --git a/frontend/src/integrations/hubspot/components/hubspot-settings-drawer.vue b/frontend/src/integrations/hubspot/components/hubspot-settings-drawer.vue
index 6b5846abf0..2cfb973c54 100644
--- a/frontend/src/integrations/hubspot/components/hubspot-settings-drawer.vue
+++ b/frontend/src/integrations/hubspot/components/hubspot-settings-drawer.vue
@@ -205,8 +205,8 @@
   <app-hubspot-read-only-attr-popover
     v-model="isReadOnlyConfirmModalVisible"
     :attributes="readOnlyAttributes"
-    @update:modelValue="isReadOnlyConfirmModalVisible = $event"
-    @doNotShowModal="handleDoNotShowModal"
+    @update:model-value="isReadOnlyConfirmModalVisible = $event"
+    @do-not-show-modal="handleDoNotShowModal"
     @continue="handleContinue"
   />
 </template>
@@ -393,7 +393,6 @@ const update = () => {
 };
 
 const executeUpdate = (data: HubspotOnboard) => {
-
   loading.value = true;
   HubspotApiService.finishOnboard(data)
     .then(() => {
diff --git a/frontend/src/modules/auth/pages/terms-and-privacy.vue b/frontend/src/modules/auth/pages/terms-and-privacy.vue
index 6673cad34e..b0c7c95b87 100644
--- a/frontend/src/modules/auth/pages/terms-and-privacy.vue
+++ b/frontend/src/modules/auth/pages/terms-and-privacy.vue
@@ -46,7 +46,7 @@
 </template>
 
 <script>
-import { mapActions, mapGetters } from "vuex";
+import { mapActions, mapGetters } from 'vuex';
 import { UserModel } from '@/modules/user/user-model';
 import { AuthService } from '@/modules/auth/auth-service';
 
diff --git a/frontend/src/modules/automation/components/automation-form.vue b/frontend/src/modules/automation/components/automation-form.vue
index c7a2a4c8e3..30c74793cb 100644
--- a/frontend/src/modules/automation/components/automation-form.vue
+++ b/frontend/src/modules/automation/components/automation-form.vue
@@ -97,17 +97,16 @@
 
 <script setup>
 import {
-  computed, defineProps, defineEmits, reactive, ref, watch, onMounted,
+  computed, defineProps, defineEmits, reactive, ref, onMounted,
 } from 'vue';
 import AppDrawer from '@/shared/drawer/drawer.vue';
-import { email, required } from '@vuelidate/validators';
+import { required } from '@vuelidate/validators';
 import useVuelidate from '@vuelidate/core';
 import AppFormItem from '@/shared/form/form-item.vue';
 import { useAutomationStore } from '@/modules/automation/store';
 import Message from '@/shared/message/message';
 import { i18n } from '@/i18n';
 import formChangeDetector from '@/shared/form/form-change';
-import { useStore } from 'vuex';
 import { automationTypes } from '../config/automation-types';
 
 const props = defineProps({
diff --git a/frontend/src/modules/automation/pages/automation-list-page.vue b/frontend/src/modules/automation/pages/automation-list-page.vue
index 0eee292bc4..38c342ff7c 100644
--- a/frontend/src/modules/automation/pages/automation-list-page.vue
+++ b/frontend/src/modules/automation/pages/automation-list-page.vue
@@ -121,7 +121,7 @@
 
 <script setup>
 import {
-  ref, onMounted, computed,
+  ref, onMounted,
 } from 'vue';
 import { useAutomationStore } from '@/modules/automation/store';
 import { storeToRefs } from 'pinia';
diff --git a/frontend/src/modules/member/components/bulk/bulk-edit-attribute-popover.vue b/frontend/src/modules/member/components/bulk/bulk-edit-attribute-popover.vue
index a5fb4db2c3..b8d7ba9f17 100644
--- a/frontend/src/modules/member/components/bulk/bulk-edit-attribute-popover.vue
+++ b/frontend/src/modules/member/components/bulk/bulk-edit-attribute-popover.vue
@@ -8,15 +8,14 @@
           class="attributes-form mt-1 mb-5"
           label-position="top"
         >
-          
-            <el-form-item
-              label="Choose attribute"
-              class="mb-6"
-              required="true"
-            >
-              <app-bulk-edit-attribute-dropdown v-model="attributesData" @change="handleDropdownChange" @clear="handleDropdownClear" />
-            </el-form-item>
-          
+          <el-form-item
+            label="Choose attribute"
+            class="mb-6"
+            required="true"
+          >
+            <app-bulk-edit-attribute-dropdown v-model="attributesData" @change="handleDropdownChange" @clear="handleDropdownClear" />
+          </el-form-item>
+
           <!-- Show value field only if attribute is selected -->
           <div v-if="Object.keys(selectedAttribute).length > 0">
             <el-form-item
@@ -74,7 +73,9 @@
 
             <div v-if="selectedAttribute.type === 'multiSelect'" class="flex items-center gap-2 -mt-2">
               <i class="ri-information-line text-gray-400 text-lg " />
-              <span class="text-xs leading-5 text-gray-500">Values will be added to each selected member and the existing ones won’t be overwritten.</span>
+              <span class="text-xs leading-5 text-gray-500">
+                Values will be added to each selected member and the existing ones won’t be overwritten.
+              </span>
             </div>
 
             <div v-else class="rounded-md bg-yellow-50 border border-yellow-100 flex items-center gap-2 py-2 px-4 mt-6">
@@ -89,7 +90,7 @@
         <el-button class="btn btn--bordered btn--md mr-3" @click="handleCancel">
           Cancel
         </el-button>
-        <el-button class="btn btn--primary btn--md" @click="handleSubmit" :disabled="!hasFormChanged">
+        <el-button class="btn btn--primary btn--md" :disabled="!hasFormChanged" @click="handleSubmit">
           Submit
         </el-button>
       </div>
@@ -192,7 +193,7 @@ watch(
   },
 );
 
-// since we have multi-select input for both the organizations and custom attributes, 
+// since we have multi-select input for both the organizations and custom attributes,
 // need to dynamically set the appropriate methods based on the context.
 const multiSelectFetchFn = computed(() => {
   if (selectedAttribute.value.name === 'organizations') {
@@ -341,7 +342,7 @@ const handleSubmit = async () => {
       || formModel.value.attributes) && {
       attributes: {
         ...(Object.keys(formattedAttributes).length
-          && formattedAttributes)
+          && formattedAttributes),
       },
     },
   };
diff --git a/frontend/src/modules/member/components/list/member-list-table.vue b/frontend/src/modules/member/components/list/member-list-table.vue
index dab1af87c9..349f07919b 100644
--- a/frontend/src/modules/member/components/list/member-list-table.vue
+++ b/frontend/src/modules/member/components/list/member-list-table.vue
@@ -414,6 +414,7 @@ import { storeToRefs } from 'pinia';
 import { MemberService } from '@/modules/member/member-service';
 import AppMemberMergeDialog from '@/modules/member/components/member-merge-dialog.vue';
 import AppTagPopover from '@/modules/tag/components/tag-popover.vue';
+import AppPagination from '@/shared/pagination/pagination.vue';
 import AppMemberBadge from '../member-badge.vue';
 import AppMemberDropdown from '../member-dropdown.vue';
 import AppMemberIdentities from '../member-identities.vue';
@@ -449,8 +450,17 @@ const props = defineProps({
     type: Boolean,
     default: () => true,
   },
+  pagination: {
+    type: Object,
+    default: () => ({
+      page: 1,
+      perPage: 20,
+    }),
+  },
 });
 
+const emit = defineEmits(['update:pagination']);
+
 const memberStore = useMemberStore();
 const {
   members, totalMembers, filters, selectedMembers, savedFilterBody,
@@ -510,7 +520,14 @@ const emailsColumnWidth = computed(() => {
 });
 
 const selectedRows = computed(() => selectedMembers.value);
-const pagination = computed(() => filters.value.pagination);
+const pagination = computed({
+  get() {
+    return props.pagination;
+  },
+  set(value) {
+    emit('update:pagination', value);
+  },
+});
 
 const tableWidth = ref(0);
 
@@ -534,11 +551,17 @@ function doChangeSort(sorter) {
 }
 
 function doChangePaginationCurrentPage(currentPage) {
-  filters.value.pagination.page = currentPage;
+  emit('update:pagination', {
+    ...pagination.value,
+    page: currentPage,
+  });
 }
 
 function doChangePaginationPageSize(pageSize) {
-  filters.value.pagination.perPage = pageSize;
+  emit('update:pagination', {
+    page: 1,
+    perPage: pageSize,
+  });
 }
 
 function translate(key) {
diff --git a/frontend/src/modules/member/components/list/member-list-toolbar.vue b/frontend/src/modules/member/components/list/member-list-toolbar.vue
index 5144cb7156..906c7a6dfa 100644
--- a/frontend/src/modules/member/components/list/member-list-toolbar.vue
+++ b/frontend/src/modules/member/components/list/member-list-toolbar.vue
@@ -102,14 +102,15 @@
       </template>
     </el-dropdown>
 
-    <app-tag-popover v-model="bulkTagsUpdateVisible"
-      @reload="fetchMembers({ reload: true })" />
+    <app-tag-popover
+      v-model="bulkTagsUpdateVisible"
+      @reload="fetchMembers({ reload: true })"
+    />
 
     <app-bulk-edit-attribute-popover
       v-model="bulkAttributesUpdateVisible"
       @reload="fetchMembers({ reload: true })"
     />
-
   </div>
 </template>
 
diff --git a/frontend/src/modules/member/pages/member-list-page.vue b/frontend/src/modules/member/pages/member-list-page.vue
index 6d17f185f7..b4deb95d7d 100644
--- a/frontend/src/modules/member/pages/member-list-page.vue
+++ b/frontend/src/modules/member/pages/member-list-page.vue
@@ -68,9 +68,11 @@
         @fetch="fetch($event)"
       />
       <app-member-list-table
+        v-model:pagination="pagination"
         :has-integrations="hasIntegrations"
         :has-members="membersCount > 0"
         :is-page-loading="loading"
+        @update:pagination="onPaginationChange"
       />
     </div>
   </app-page-wrapper>
@@ -81,7 +83,9 @@ import AppPageWrapper from '@/shared/layout/page-wrapper.vue';
 import CrFilter from '@/shared/modules/filters/components/Filter.vue';
 import { useMemberStore } from '@/modules/member/store/pinia';
 import { storeToRefs } from 'pinia';
-import { ref, onMounted, computed } from 'vue';
+import {
+  ref, onMounted, computed,
+} from 'vue';
 import { MemberService } from '@/modules/member/member-service';
 import { MemberPermissions } from '@/modules/member/member-permissions';
 import { mapGetters } from '@/shared/vuex/vuex.helpers';
@@ -110,6 +114,11 @@ const hasPermissionToCreate = computed(() => new MemberPermissions(
   currentUser.value,
 )?.create);
 
+const pagination = ref({
+  page: 1,
+  perPage: 20,
+});
+
 const isCreateLockedForSampleData = computed(() => new MemberPermissions(
   currentTenant.value,
   currentUser.value,
@@ -152,17 +161,18 @@ const showLoading = (filter: any, body: any): boolean => {
 };
 
 const fetch = ({
-  filter, offset, limit, orderBy, body,
+  filter, orderBy, body,
 }: FilterQuery) => {
   if (!loading.value) {
     loading.value = showLoading(filter, body);
   }
+  pagination.value.page = 1;
   fetchMembers({
     body: {
       ...body,
       filter,
-      offset,
-      limit,
+      offset: 0,
+      limit: pagination.value.perPage,
       orderBy,
     },
   })
@@ -170,6 +180,17 @@ const fetch = ({
       loading.value = false;
     });
 };
+const onPaginationChange = ({
+  page, perPage,
+}: FilterQuery) => {
+  fetchMembers({
+    reload: true,
+    body: {
+      offset: (page - 1) * perPage || 0,
+      limit: perPage || 20,
+    },
+  });
+};
 
 onMounted(() => {
   fetchMembersToMergeCount();
diff --git a/frontend/src/modules/member/pages/member-merge-suggestions-page.vue b/frontend/src/modules/member/pages/member-merge-suggestions-page.vue
index 03d8ab71d9..2ace39879a 100644
--- a/frontend/src/modules/member/pages/member-merge-suggestions-page.vue
+++ b/frontend/src/modules/member/pages/member-merge-suggestions-page.vue
@@ -202,9 +202,9 @@ const fetch = (page) => {
       [membersToMerge.value] = res.rows;
       const { members } = membersToMerge.value;
       // Set member with maximum identities and activities as primary
-      if ((members[0].identities.length < members[1].identities.length) || 
-        (members[0].activityCount < members[1].activityCount)) {
-          primary.value = 1;
+      if ((members[0].identities.length < members[1].identities.length)
+        || (members[0].activityCount < members[1].activityCount)) {
+        primary.value = 1;
       }
     })
     .catch(() => {
diff --git a/frontend/src/modules/member/store/pinia/actions.ts b/frontend/src/modules/member/store/pinia/actions.ts
index 546a2dcc96..64c221d644 100644
--- a/frontend/src/modules/member/store/pinia/actions.ts
+++ b/frontend/src/modules/member/store/pinia/actions.ts
@@ -10,7 +10,7 @@ const { buildFilterFromAttributes } = customAttributesService();
 
 export default {
   fetchMembers(this: MemberState, { body = {}, reload = false } :{ body?: any, reload?: boolean }): Promise<Pagination<Member>> {
-    const mappedBody = reload ? this.savedFilterBody : body;
+    const mappedBody = reload ? { ...this.savedFilterBody, ...body } : body;
     this.selectedMembers = [];
     return MemberService.listMembers(mappedBody)
       .then((data: Pagination<Member>) => {
diff --git a/frontend/src/modules/member/store/pinia/state.ts b/frontend/src/modules/member/store/pinia/state.ts
index a93b5fc8df..c626aa064f 100644
--- a/frontend/src/modules/member/store/pinia/state.ts
+++ b/frontend/src/modules/member/store/pinia/state.ts
@@ -16,10 +16,6 @@ export interface MemberState {
 const state: MemberState = {
   filters: {
     ...allMembers.filter,
-    pagination: {
-      page: 1,
-      perPage: 20,
-    },
   },
   savedFilterBody: {},
   customAttributes: [],
diff --git a/frontend/src/modules/organization/components/list/organization-list-table.vue b/frontend/src/modules/organization/components/list/organization-list-table.vue
index 6e5c3c953e..d7522a55cc 100644
--- a/frontend/src/modules/organization/components/list/organization-list-table.vue
+++ b/frontend/src/modules/organization/components/list/organization-list-table.vue
@@ -554,8 +554,17 @@ const props = defineProps({
     type: Boolean,
     default: () => true,
   },
+  pagination: {
+    type: Object,
+    default: () => ({
+      page: 1,
+      perPage: 20,
+    }),
+  },
 });
 
+const emit = defineEmits(['update:pagination']);
+
 const organizationStore = useOrganizationStore();
 const {
   organizations, selectedOrganizations, filters, totalOrganizations,
@@ -569,7 +578,14 @@ const isScrollbarVisible = ref(false);
 const isTableHovered = ref(false);
 const isCursorDown = ref(false);
 
-const pagination = computed(() => filters.value.pagination);
+const pagination = computed({
+  get() {
+    return props.pagination;
+  },
+  set(value) {
+    emit('update:pagination', value);
+  },
+});
 
 const defaultSort = computed(() => ({
   field: filters.value.order.prop,
@@ -579,7 +595,7 @@ const defaultSort = computed(() => ({
 const showBottomPagination = computed(() => (
   !!totalOrganizations.value
     && Math.ceil(
-      totalOrganizations.value / Number(filters.value.pagination.perPage),
+      totalOrganizations.value / Number(pagination.value.perPage),
     ) > 1
 ));
 const isLoading = computed(() => props.isPageLoading);
@@ -599,11 +615,17 @@ function doChangeSort(sorter) {
 }
 
 function doChangePaginationCurrentPage(currentPage) {
-  filters.value.pagination.page = currentPage;
+  emit('update:pagination', {
+    ...pagination.value,
+    page: currentPage,
+  });
 }
 
 function doChangePaginationPageSize(pageSize) {
-  filters.value.pagination.perPage = pageSize;
+  emit('update:pagination', {
+    page: 1,
+    perPage: pageSize,
+  });
 }
 
 const onCtaClick = () => {
diff --git a/frontend/src/modules/organization/pages/organization-list-page.vue b/frontend/src/modules/organization/pages/organization-list-page.vue
index 634ce72100..8eda38d951 100644
--- a/frontend/src/modules/organization/pages/organization-list-page.vue
+++ b/frontend/src/modules/organization/pages/organization-list-page.vue
@@ -47,8 +47,10 @@
         @fetch="fetch($event)"
       />
       <app-organization-list-table
+        v-model:pagination="pagination"
         :has-organizations="totalOrganizations > 0"
         :is-page-loading="loading"
+        @update:pagination="onPaginationChange"
       />
     </div>
   </app-page-wrapper>
@@ -95,6 +97,11 @@ const isCreateLockedForSampleData = computed(
   ).createLockedForSampleData,
 );
 
+const pagination = ref({
+  page: 1,
+  perPage: 20,
+});
+
 const doGetOrganizationCount = () => {
   (OrganizationService.query({
     limit: 1,
@@ -118,7 +125,7 @@ const showLoading = (filter: any, body: any): boolean => {
 };
 
 const fetch = ({
-  filter, offset, limit, orderBy, body,
+  filter, orderBy, body,
 }: FilterQuery) => {
   if (!loading.value) {
     loading.value = showLoading(filter, body);
@@ -127,8 +134,8 @@ const fetch = ({
     body: {
       ...body,
       filter,
-      offset,
-      limit,
+      offset: 0,
+      limit: pagination.value.perPage,
       orderBy,
     },
   })
@@ -137,6 +144,18 @@ const fetch = ({
     });
 };
 
+const onPaginationChange = ({
+  page, perPage,
+}: FilterQuery) => {
+  fetchOrganizations({
+    reload: true,
+    body: {
+      offset: (page - 1) * perPage || 0,
+      limit: perPage || 20,
+    },
+  });
+};
+
 onMounted(async () => {
   doGetOrganizationCount();
   (window as any).analytics.page('Organization');
diff --git a/frontend/src/modules/organization/store/pinia/actions.ts b/frontend/src/modules/organization/store/pinia/actions.ts
index badb5bde08..f3683562d4 100644
--- a/frontend/src/modules/organization/store/pinia/actions.ts
+++ b/frontend/src/modules/organization/store/pinia/actions.ts
@@ -5,7 +5,7 @@ import { OrganizationService } from '@/modules/organization/organization-service
 
 export default {
   fetchOrganizations(this: OrganizationState, { body = {}, reload = false } :{ body?: any, reload?: boolean }): Promise<Pagination<Organization>> {
-    const mappedBody = reload ? this.savedFilterBody : body;
+    const mappedBody = reload ? { ...this.savedFilterBody, ...body } : body;
     this.selectedOrganizations = [];
     return OrganizationService.query(mappedBody)
       .then((data: Pagination<Organization>) => {
diff --git a/frontend/src/modules/organization/store/pinia/state.ts b/frontend/src/modules/organization/store/pinia/state.ts
index 09b1031e9d..f57b3d80f9 100644
--- a/frontend/src/modules/organization/store/pinia/state.ts
+++ b/frontend/src/modules/organization/store/pinia/state.ts
@@ -14,10 +14,6 @@ export interface OrganizationState {
 const state: OrganizationState = {
   filters: {
     ...allOrganizations.filter,
-    pagination: {
-      page: 1,
-      perPage: 20,
-    },
   },
   savedFilterBody: {},
   organizations: [],
diff --git a/frontend/src/modules/tag/components/tag-popover.vue b/frontend/src/modules/tag/components/tag-popover.vue
index 24f7f2545e..346edd32c3 100644
--- a/frontend/src/modules/tag/components/tag-popover.vue
+++ b/frontend/src/modules/tag/components/tag-popover.vue
@@ -1,10 +1,15 @@
 <template>
-  <app-dialog v-if="computedVisible" v-model="computedVisible" title="Edit tags"  :pre-title="member?.displayName ?? ''">
+  <app-dialog v-if="computedVisible" v-model="computedVisible" title="Edit tags" :pre-title="member?.displayName ?? ''">
     <template #content>
       <div class="px-6 pb-6">
         <form v-if="modelValue" class="tags-form">
-          <app-tag-autocomplete-input v-model="editTagsModel" :fetch-fn="fields.tags.fetchFn"
-            :mapper-fn="fields.tags.mapperFn" :create-if-not-found="true" placeholder="Type to search/create tags" />
+          <app-tag-autocomplete-input
+            v-model="editTagsModel"
+            :fetch-fn="fields.tags.fetchFn"
+            :mapper-fn="fields.tags.mapperFn"
+            :create-if-not-found="true"
+            placeholder="Type to search/create tags"
+          />
         </form>
       </div>
 
@@ -35,7 +40,6 @@ const { selectedMembers } = storeToRefs(memberStore);
 const { fields } = MemberModel;
 const formSchema = new FormSchema([fields.tags]);
 
-
 export default {
   name: 'AppTagPopover',
   components: { AppTagAutocompleteInput, AppDialog },
@@ -73,7 +77,7 @@ export default {
       },
     },
     membersToUpdate() {
-      return this.member ? [this.member]: selectedMembers.value;
+      return this.member ? [this.member] : selectedMembers.value;
     },
   },
 
@@ -133,7 +137,7 @@ export default {
       this.editTagsModel = [];
       this.editTagsInCommon = [];
       this.computedVisible = false;
-    }
+    },
   },
 };
 </script>
diff --git a/frontend/src/shared/modules/filters/components/Filter.vue b/frontend/src/shared/modules/filters/components/Filter.vue
index 16efda9b60..e441fb4556 100644
--- a/frontend/src/shared/modules/filters/components/Filter.vue
+++ b/frontend/src/shared/modules/filters/components/Filter.vue
@@ -93,7 +93,7 @@ const switchOperator = () => {
 
 const alignFilterList = (value: Filter) => {
   const {
-    settings, search, relation, order, pagination, ...filterValues
+    settings, search, relation, order, ...filterValues
   } = value;
   filterList.value = Object.keys(filterValues);
 };
@@ -107,7 +107,12 @@ const removeFilter = (key) => {
 const { setQuery, parseQuery } = filterQueryService();
 const { buildApiFilter } = filterApiService();
 
+const savedFilter = ref({});
 const fetch = (value: Filter) => {
+  if (JSON.stringify(value) === JSON.stringify(savedFilter.value)) {
+    return;
+  }
+  savedFilter.value = { ...value };
   const data = buildApiFilter(value, { ...props.config, ...props.customConfig }, props.searchConfig, props.savedViewsConfig);
   emit('fetch', data);
 };
@@ -126,11 +131,6 @@ const alignQueryUrl = () => {
     ...props.customConfig,
   }, props.savedViewsConfig);
 
-  // Remove pagination if it's not in filters store state
-  if (!props.modelValue.pagination) {
-    delete parsed.pagination;
-  }
-
   if (!parsed || Object.keys(parsed).length === 0) {
     const query = setQuery(props.modelValue);
     router.push({ query, hash: props.hash ? `#${props.hash}` : undefined });
@@ -138,6 +138,7 @@ const alignQueryUrl = () => {
     fetch(props.modelValue);
     return;
   }
+
   filters.value = parsed as Filter;
   if (!!parsed && Object.keys(parsed).length > 0) {
     alignFilterList(parsed as Filter);
diff --git a/frontend/src/shared/modules/filters/services/filter-api.service.ts b/frontend/src/shared/modules/filters/services/filter-api.service.ts
index 82d84c2209..3919b6207b 100644
--- a/frontend/src/shared/modules/filters/services/filter-api.service.ts
+++ b/frontend/src/shared/modules/filters/services/filter-api.service.ts
@@ -14,7 +14,6 @@ export const filterApiService = () => {
       search,
       relation,
       order,
-      pagination,
       settings,
       ...filterValues
     } = values;
@@ -89,13 +88,8 @@ export const filterApiService = () => {
 
     const orderBy = `${order.prop}_${order.order === 'descending' ? 'DESC' : 'ASC'}`;
 
-    const limit = pagination?.perPage || 20;
-    const offset = ((pagination?.page || 1) - 1) * limit;
-
     return {
       filter,
-      limit,
-      offset,
       orderBy,
       body,
     };
diff --git a/frontend/src/shared/modules/filters/services/filter-query.service.ts b/frontend/src/shared/modules/filters/services/filter-query.service.ts
index 8aece3dac3..d293437af9 100644
--- a/frontend/src/shared/modules/filters/services/filter-query.service.ts
+++ b/frontend/src/shared/modules/filters/services/filter-query.service.ts
@@ -26,10 +26,6 @@ export const filterQueryService = () => {
         Object.keys(object[key]).forEach((setting) => {
           object[key][setting] = savedViewsConfig.settings[setting].queryUrlParser(object[key][setting]);
         });
-      } else if (key === 'pagination') {
-        Object.keys(object[key]).forEach((paginationProperty) => {
-          object[key][paginationProperty] = +object[key][paginationProperty];
-        });
       } else if (key in config) {
         const { type } = config[key];
         const queryUrlParser = type === FilterConfigType.CUSTOM ? (config[key] as CustomFilterConfig).queryUrlParser : queryUrlParserByType[type];
@@ -55,12 +51,6 @@ export const filterQueryService = () => {
     if (filter) {
       const mappedFilter = {
         ...filter,
-        ...(filter.pagination && {
-          pagination: {
-            page: filter.pagination?.page || 1,
-            perPage: filter.pagination?.perPage || 20,
-          },
-        }),
       };
       Object.entries(mappedFilter).forEach(([key, filterValue]) => {
         if (typeof filterValue === 'object') {
diff --git a/frontend/src/shared/modules/filters/types/FilterConfig.ts b/frontend/src/shared/modules/filters/types/FilterConfig.ts
index 2f36171f1d..aab26460de 100644
--- a/frontend/src/shared/modules/filters/types/FilterConfig.ts
+++ b/frontend/src/shared/modules/filters/types/FilterConfig.ts
@@ -45,11 +45,4 @@ export interface FilterStatic {
   settings?: Record<string, any>
 }
 
-export type FilterObject = FilterStatic & Record<string, any>
-
-export interface Filter extends FilterObject {
-  pagination: {
-    page: number,
-    perPage: number
-  },
-}
+export type Filter = FilterStatic & Record<string, any>
diff --git a/frontend/src/shared/modules/filters/types/FilterQuery.ts b/frontend/src/shared/modules/filters/types/FilterQuery.ts
index 9f61ea7008..fed80c01e0 100644
--- a/frontend/src/shared/modules/filters/types/FilterQuery.ts
+++ b/frontend/src/shared/modules/filters/types/FilterQuery.ts
@@ -2,6 +2,4 @@ export interface FilterQuery {
   filter: any,
   body: any,
   orderBy: string,
-  limit: number,
-  offset: number,
 }
diff --git a/frontend/src/shared/modules/saved-views/components/SavedViews.vue b/frontend/src/shared/modules/saved-views/components/SavedViews.vue
index a50bf577ab..de6699f806 100644
--- a/frontend/src/shared/modules/saved-views/components/SavedViews.vue
+++ b/frontend/src/shared/modules/saved-views/components/SavedViews.vue
@@ -27,7 +27,7 @@ import {
   computed,
   defineProps, ref, watch,
 } from 'vue';
-import { Filter, FilterObject } from '@/shared/modules/filters/types/FilterConfig';
+import { Filter } from '@/shared/modules/filters/types/FilterConfig';
 import { SavedView, SavedViewsConfig } from '@/shared/modules/saved-views/types/SavedViewsConfig';
 import { isEqual } from 'lodash';
 
@@ -62,15 +62,13 @@ const getView = (id: string): SavedView => {
 
 const currentView = computed<SavedView>(() => getView(selectedTab.value));
 
-const compareFilterToCurrentValues = (filter: FilterObject): boolean => {
+const compareFilterToCurrentValues = (filter: Filter): boolean => {
   const compareFilter = {
     ...filter,
   };
   const currentFilter = {
     ...props.modelValue,
   };
-  delete currentFilter.pagination;
-  delete compareFilter.pagination;
 
   return isEqual(compareFilter, currentFilter);
 };
@@ -85,10 +83,6 @@ const onTabChange = (id: string) => {
   if (filter) {
     filters.value = {
       ...filter,
-      pagination: {
-        page: 1,
-        perPage: filters.value.pagination.perPage,
-      },
     };
   }
 };
@@ -97,10 +91,6 @@ const onTabChange = (id: string) => {
 const reset = () => {
   filters.value = {
     ...currentView.value.filter,
-    pagination: {
-      page: 1,
-      perPage: filters.value.pagination.perPage,
-    },
   };
 };
 
diff --git a/frontend/src/shared/modules/saved-views/types/SavedViewsConfig.ts b/frontend/src/shared/modules/saved-views/types/SavedViewsConfig.ts
index 07e6f8f0ba..36913335f5 100644
--- a/frontend/src/shared/modules/saved-views/types/SavedViewsConfig.ts
+++ b/frontend/src/shared/modules/saved-views/types/SavedViewsConfig.ts
@@ -1,9 +1,9 @@
-import { FilterObject } from '@/shared/modules/filters/types/FilterConfig';
+import { Filter } from '@/shared/modules/filters/types/FilterConfig';
 
 export interface SavedView {
   id: string;
   label: string;
-  filter: FilterObject & Record<string, any>
+  filter: Filter & Record<string, any>
 }
 
 export interface SavedViewsSetting<T> {
diff --git a/frontend/src/shared/platform/platform.vue b/frontend/src/shared/platform/platform.vue
index cb2a6933e9..1bfcc71671 100644
--- a/frontend/src/shared/platform/platform.vue
+++ b/frontend/src/shared/platform/platform.vue
@@ -109,7 +109,8 @@ const href = computed(() => {
     return props.href;
   }
 
-  return (props.usernameHandles.length === 1 ? (CrowdIntegrations.getConfig(props.platform)?.url(props.usernameHandles[0]) ?? props.backupUrl) : null);
+  return (props.usernameHandles.length === 1
+    ? (CrowdIntegrations.getConfig(props.platform)?.url(props.usernameHandles[0]) ?? props.backupUrl) : null);
 });
 
 const trackClick = () => {