Fix activity pagination, load more functionality (#2671)

Author: gaspergrom

frontend/src/modules/activity/components/activity-timeline.vue

@@ -84,7 +84,7 @@
     </div>
     <div>
       <el-timeline>
-        <template v-if="activities.length && !loading">
+        <template v-if="activities.length">
           <el-timeline-item
             v-for="activity in activities"
             :key="activity.id"
@@ -217,14 +217,13 @@
         class="app-page-spinner"
       />
       <div v-if="!noMore" class="flex justify-center pt-4">
-        <el-button
-          class="btn btn-link btn-link--primary"
+        <lf-button
+          type="primary-ghost"
           :disabled="loading"
           @click="fetchActivities()"
         >
-          <i class="ri-arrow-down-line mr-2" />Load
-          more
-        </el-button>
+          Load more
+        </lf-button>
       </div>
     </div>
   </div>
@@ -262,6 +261,7 @@ import { getSegmentsFromProjectGroup } from '@/utils/segments';
 import { Platform } from '@/shared/modules/platform/types/Platform';
 import LfActivityDisplay from '@/shared/modules/activity/components/activity-display.vue';
 import moment from 'moment';
+import LfButton from '@/ui-kit/button/Button.vue';
 import { ActivityService } from '../activity-service';
 
 const SearchIcon = h(
@@ -305,12 +305,12 @@ const enabledPlatforms = computed(() => CrowdIntegrations.enabledConfigs.concat(
   label: i.name,
 })));
 
-const loading = ref(true);
+const loading = ref(false);
 const platform = ref(null);
 const query = ref('');
 const activities = ref([]);
-const limit = ref(50);
-const timestamp = ref(moment().toISOString());
+const limit = ref(10);
+const timestamp = ref(moment(props.entity.lastActive).toISOString());
 const noMore = ref(false);
 const selectedSegment = ref(props.selectedSegment || null);
 
@@ -343,6 +343,9 @@ const segments = computed(() => {
 });
 
 const fetchActivities = async ({ reset } = { reset: false }) => {
+  if (loading.value) {
+    return;
+  }
   const filterToApply = {
     platform: platform.value ? { in: [platform.value] } : undefined,
   };
@@ -373,12 +376,12 @@ const fetchActivities = async ({ reset } = { reset: false }) => {
   filterToApply.and = [
     {
       timestamp: {
-        lte: props.entity?.lastActive ?? timestamp.value,
+        lte: timestamp.value,
       },
     },
-    ...(props.entity?.lastActive ? [{
+    ...(timestamp.value ? [{
       timestamp: {
-        gte: moment(props.entity?.lastActive).subtract(1, 'month').toISOString(),
+        gte: moment(timestamp.value).subtract(1, 'month').toISOString(),
       },
     }] : []),
   ];
@@ -406,12 +409,16 @@ const fetchActivities = async ({ reset } = { reset: false }) => {
 
   const activityIds = activities.value.map((a) => a.id);
   const rows = data.rows.filter((a) => !activityIds.includes(a.id));
-  if (rows.length === 0) {
+  if (rows.length >= props.entity.activityCount) {
     noMore.value = true;
   }
   activities.value = reset ? rows : [...activities.value, ...rows];
 
-  timestamp.value = moment(data.rows.at(-1).timestamp).toISOString();
+  if (data.rows.length === 0) {
+    timestamp.value = moment(timestamp.value).subtract(1, 'month').toISOString();
+  } else {
+    timestamp.value = moment(data.rows.at(-1).timestamp).toISOString();
+  }
 };
 
 const reloadActivities = async () => {
@@ -443,6 +450,10 @@ onMounted(async () => {
   await store.dispatch('integration/doFetch', segments.value.map((s) => s.id));
   await fetchActivities();
 });
+
+defineExpose({
+  fetchActivities,
+});
 </script>
 
 <script>

frontend/src/modules/contributor/components/details/contributor-details-activities.vue

@@ -27,6 +27,7 @@
   </div>
   <app-activity-timeline
     v-else
+    ref="timeline"
     :entity="props.contributor"
     entity-type="member"
     :show-affiliations="true"
@@ -42,7 +43,7 @@ import { useRoute } from 'vue-router';
 import { MergeActionState } from '@/shared/modules/merge/types/MemberActions';
 import LfIconOld from '@/ui-kit/icon/IconOld.vue';
 import useContributorHelpers from '@/modules/contributor/helpers/contributor.helpers';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const props = defineProps<{
@@ -53,9 +54,19 @@ const route = useRoute();
 
 const { isMasked } = useContributorHelpers();
 
+const timeline = ref(null);
+
 const { subProjectId } = route.query;
 
 const masked = computed(() => isMasked(props.contributor));
+
+const loadMore = () => {
+  timeline.value.fetchActivities();
+};
+
+defineExpose({
+  loadMore,
+});
 </script>
 
 <script lang="ts">

frontend/src/modules/contributor/pages/contributor-details.page.vue

@@ -79,6 +79,7 @@
           />
           <lf-contributor-details-activities
             v-else-if="tabs === 'activities'"
+            ref="activities"
             :contributor="contributor"
           />
           <lf-contributor-details-notes
@@ -132,6 +133,7 @@ const route = useRoute();
 const tabs = ref('overview');
 
 const notes = ref<any>(null);
+const activities = ref<any>(null);
 
 const { id } = route.params;
 
@@ -153,6 +155,8 @@ const controlScroll = (e) => {
   if (e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight - 10) {
     if (tabs.value === 'notes') {
       notes.value.loadMore();
+    } else if (tabs.value === 'activities') {
+      activities.value.loadMore();
     }
   }
 };

frontend/src/modules/data-quality/components/member/data-quality-member-issues.vue

@@ -3,7 +3,7 @@
     <div v-if="loading && offset === 0" class="flex justify-center py-20">
       <lf-spinner />
     </div>
-    <div v-else-if="members.length > 0">
+    <lf-scroll-controll v-else-if="members.length > 0" class="scroll-container -mb-4" @bottom="loadMore()">
       <lf-data-quality-member-issues-item
         v-for="(member) of members"
         :key="member.id"
@@ -36,7 +36,7 @@
           Load more
         </lf-button>
       </div>
-    </div>
+    </lf-scroll-controll>
     <div v-else class="flex flex-col items-center pt-16">
       <div
         class="ri-shuffle-line text-gray-200 text-10xl h-40 flex items-center mb-8"
@@ -64,6 +64,7 @@ import { storeToRefs } from 'pinia';
 import { useLfSegmentsStore } from '@/modules/lf/segments/store';
 import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/event';
 import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
+import LfScrollControll from '@/ui-kit/scrollcontroll/ScrollControll.vue';
 
 const props = defineProps<{
   type: DataIssueType,
@@ -143,3 +144,9 @@ export default {
   name: 'LfDataQualityMemberIssues',
 };
 </script>
+
+<style lang="scss">
+.scroll-container{
+  max-height: calc(100vh - 228px);
+}
+</style>

frontend/src/modules/data-quality/components/member/data-quality-member-merge-suggestions.vue

@@ -3,7 +3,7 @@
     <div v-if="loading && offset === 0" class="flex justify-center py-20">
       <lf-spinner />
     </div>
-    <div v-else-if="mergeSuggestions.length > 0">
+    <lf-scroll-controll v-else-if="mergeSuggestions.length > 0" class="scroll-container -mb-4" @bottom="loadMore()">
       <lf-data-quality-member-merge-suggestions-item
         v-for="(suggestion, si) of mergeSuggestions"
         :key="suggestion.id"
@@ -28,7 +28,7 @@
           Load more
         </lf-button>
       </div>
-    </div>
+    </lf-scroll-controll>
     <div v-else class="flex flex-col items-center pt-16">
       <div
         class="ri-shuffle-line text-gray-200 text-10xl h-40 flex items-center mb-8"
@@ -68,6 +68,7 @@ import { storeToRefs } from 'pinia';
 import { useLfSegmentsStore } from '@/modules/lf/segments/store';
 import LfMemberMergeSuggestionDropdown
   from '@/modules/member/components/suggestions/member-merge-suggestion-dropdown.vue';
+import LfScrollControll from '@/ui-kit/scrollcontroll/ScrollControll.vue';
 
 const props = defineProps<{
   projectGroup: string,
@@ -148,3 +149,9 @@ export default {
   name: 'LfDataQualityMemberMergeSuggestions',
 };
 </script>
+
+<style lang="scss">
+.scroll-container{
+  max-height: calc(100vh - 228px);
+}
+</style>

frontend/src/modules/data-quality/components/organization/data-quality-organization-merge-suggestions.vue

@@ -3,7 +3,7 @@
     <div v-if="loading" class="flex justify-center py-20">
       <lf-spinner />
     </div>
-    <div v-else-if="mergeSuggestions.length > 0">
+    <lf-scroll-controll v-else-if="mergeSuggestions.length > 0" class="scroll-container -mb-4" @bottom="loadMore()">
       <lf-data-quality-organization-merge-suggestions-item
         v-for="(suggestion, si) of mergeSuggestions"
         :key="suggestion.id"
@@ -25,7 +25,7 @@
           Load more
         </lf-button>
       </div>
-    </div>
+    </lf-scroll-controll>
     <div v-else class="flex flex-col items-center pt-16">
       <div
         class="ri-shuffle-line text-gray-200 text-10xl h-40 flex items-center mb-8"
@@ -62,6 +62,7 @@ import AppOrganizationMergeSuggestionsDialog
   from '@/modules/organization/components/organization-merge-suggestions-dialog.vue';
 import { storeToRefs } from 'pinia';
 import { useLfSegmentsStore } from '@/modules/lf/segments/store';
+import LfScrollControll from '@/ui-kit/scrollcontroll/ScrollControll.vue';
 
 const props = defineProps<{
   projectGroup: string,
@@ -131,3 +132,9 @@ export default {
   name: 'LfDataQualityOrganizationMergeSuggestions',
 };
 </script>
+
+<style lang="scss">
+.scroll-container{
+  max-height: calc(100vh - 228px);
+}
+</style>

frontend/src/modules/data-quality/pages/data-quality.page.vue

@@ -1,5 +1,5 @@
 <template>
-  <app-page-wrapper>
+  <app-page-wrapper class="!pb-0">
     <div>
       <!-- Header -->
       <div class="mb-6">

frontend/src/modules/organization/components/details/organization-details-activities.vue

@@ -22,6 +22,7 @@
   </div>
   <app-activity-timeline
     v-else
+    ref="timeline"
     :entity="{
       ...props.organization,
       organizations: [props.organization],
@@ -36,10 +37,21 @@ import { Organization } from '@/modules/organization/types/Organization';
 import AppActivityTimeline from '@/modules/activity/components/activity-timeline.vue';
 import LfIconOld from '@/ui-kit/icon/IconOld.vue';
 import { MergeActionState } from '@/shared/modules/merge/types/MemberActions';
+import { ref } from 'vue';
 
 const props = defineProps<{
   organization: Organization,
 }>();
+
+const timeline = ref<AppActivityTimeline | null>(null);
+
+const loadMore = () => {
+  timeline.value.fetchActivities();
+};
+
+defineExpose({
+  loadMore,
+});
 </script>
 
 <script lang="ts">

frontend/src/modules/organization/pages/organization-details.page.vue

@@ -91,6 +91,7 @@
           />
           <lf-organization-details-activities
             v-else-if="tabs === 'activities'"
+            ref="activities"
             :organization="organization"
           />
         </div>
@@ -135,7 +136,8 @@ const { selectedProjectGroup } = storeToRefs(lsSegmentsStore);
 const route = useRoute();
 
 const tabs = ref('overview');
-const contributors = ref('overview');
+const contributors = ref(null);
+const activities = ref(null);
 const scrollContainer = ref(null);
 
 const { id } = route.params;
@@ -161,6 +163,8 @@ const controlScroll = (e: any) => {
   if (e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight - 10) {
     if (tabs.value === 'people') {
       contributors.value.loadMore();
+    } else if (tabs.value === 'activities') {
+      activities.value.loadMore();
     }
   }
 };

frontend/src/ui-kit/scrollcontroll/ScrollControll.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="relative overflow-auto" v-bind="$attrs" @scroll="controlScroll">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+const emit = defineEmits<{(e: 'bottom'): void}>();
+
+const controlScroll = (e: any) => {
+  if (e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight - 10) {
+    emit('bottom');
+  }
+};
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfScrollControll',
+};
+</script>