Member dashboard view more, Pagination query, lint fix, duplicate req…

…uests (#1357)

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

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

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(() => {

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

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({

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

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

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

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>
 

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,24 +161,36 @@ 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,
     },
   })
     .finally(() => {
       loading.value = false;
     });
 };
+const onPaginationChange = ({
+  page, perPage,
+}: FilterQuery) => {
+  fetchMembers({
+    reload: true,
+    body: {
+      offset: (page - 1) * perPage || 0,
+      limit: perPage || 20,
+    },
+  });
+};
 
 onMounted(() => {
   fetchMembersToMergeCount();

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(() => {

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>) => {

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: [],

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 = () => {