fix: slim project group list and hydrate on selection

Signed-off-by: Yeganathan S <63534555+skwowet@users.noreply.github.com>

Author: skwowet

backend/src/database/repositories/segmentRepository.ts

@@ -463,7 +463,11 @@ class SegmentRepository extends RepositoryBase<
       if (adminSegments.length === 0) {
         return { count: 0, rows: [], limit: criteria.limit, offset: criteria.offset }
       }
-      segmentsSearchQuery += `AND sp.id IN (:adminSegments)`
+      segmentsSearchQuery += `AND EXISTS (
+        SELECT 1 FROM segments sp
+        WHERE sp."grandparentSlug" = f.slug
+          AND sp.id IN (:adminSegments)
+      )`
       replacements.adminSegments = adminSegments
     }
 
@@ -474,51 +478,24 @@ class SegmentRepository extends RepositoryBase<
                   SELECT
                       f.id AS foundation_id,
                       f.name AS foundation_name,
-                      f.status,
-                      f."createdAt",
-                      f."updatedAt",
-                      f."sourceId",
-                      f."sourceParentId",
-                      f.slug,
-                      p.name AS project_name,
-                      p.id AS project_id,
-                      p.status AS project_status,
-                      p.slug AS project_slug,
-                      COUNT(DISTINCT sp.id) AS subproject_count,
-                      JSONB_AGG(JSONB_BUILD_OBJECT(
-                          'id', sp.id,
-                          'name', sp.name,
-                          'status', sp.status,
-                          'slug', sp.slug
-                          )) AS subprojects
+                      COUNT(DISTINCT p.id)::int AS project_count
                   FROM segments f
-                  JOIN segments p
+                  LEFT JOIN segments p
                       ON p."parentSlug" = f."slug"
                              AND p."grandparentSlug" IS NULL
                              AND p."tenantId" = f."tenantId"
-                  JOIN segments sp
-                      ON sp."parentSlug" = p."slug"
-                             AND sp."grandparentSlug" = f.slug
-                             AND sp."tenantId" = f."tenantId"
                   WHERE f."parentSlug" IS NULL
                     AND f."tenantId" = :tenantId
                     ${segmentsSearchQuery}
-                  GROUP BY f."id", p.id
+                  GROUP BY f.id
               )
           SELECT
               s.*,
               COUNT(*) OVER () AS "totalCount",
-              JSONB_AGG(JSONB_BUILD_OBJECT(
-                      'id', f.project_id,
-                      'name', f.project_name,
-                      'status', f.project_status,
-                      'slug', f.project_slug,
-                      'subprojects', f.subprojects
-                  )) AS projects
+              f.project_count AS "projectCount"
           FROM segments s
           JOIN foundations f ON s.id = f.foundation_id
           ${searchQuery}
-          GROUP BY s.id, f.foundation_name
           ORDER BY f.foundation_name
           ${this.getPaginationString(criteria)};
       `,

frontend/src/app.vue

@@ -60,6 +60,10 @@ export default {
         if (tenant?.id && tenant.id !== oldTenant?.id) {
           this.fetchActivityTypes();
           this.fetchActivityChannels();
+          this.listProjectGroups({
+            limit: 20,
+            reset: true,
+          });
         }
       },
     },
@@ -72,10 +76,6 @@ export default {
     if (queryParameters.get('state') === 'noconnect' && window.location.pathname.includes('/integration')) {
       return;
     }
-    this.listProjectGroups({
-      limit: null,
-      reset: true,
-    });
     if (['/auth/callback'].includes(window.location.pathname)) {
       return;
     }

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

@@ -275,8 +275,8 @@ const selectedSegment = ref(props.selectedSegment || null);
 const isMemberEntity = computed(() => props.entityType === 'member');
 
 const subprojects = computed(() => projectGroups.value.list.reduce((acc, projectGroup) => {
-  projectGroup.projects.forEach((project) => {
-    project.subprojects.forEach((subproject) => {
+  (projectGroup.projects || []).forEach((project) => {
+    (project.subprojects || []).forEach((subproject) => {
       acc[subproject.id] = {
         id: subproject.id,
         name: subproject.name,

frontend/src/modules/admin/modules/projects/components/view/lf-project-groups-table.vue

@@ -26,7 +26,10 @@
             </div>
           </lf-table-cell>
           <lf-table-cell>
-            <app-lf-project-column :projects="projectGroup.projects" />
+            <app-lf-project-column
+              :projects="projectGroup.projects || []"
+              :project-count="projectGroup.projectCount"
+            />
           </lf-table-cell>
           <lf-table-cell class="pr-2 flex justify-end">
             <app-lf-project-groups-dropdown

frontend/src/modules/admin/modules/projects/pages/project-groups-list.page.vue

@@ -84,7 +84,7 @@
 
             <div class="mb-8 flex flex-wrap gap-2.5">
               <div class="bg-gray-200 text-gray-900 text-2xs px-2 h-6 flex items-center w-fit rounded-md">
-                {{ pluralize('project', projectGroup.projects.length, true) }}
+                {{ pluralize('project', projectGroup.projectCount ?? projectGroup.projects?.length ?? 0, true) }}
               </div>
             </div>
 

frontend/src/modules/lf/layout/components/lf-menu-project-group-selection.vue

@@ -64,7 +64,7 @@
                 {{ projectGroup.name }}
               </div>
               <div class="text-tiny text-gray-400">
-                {{ pluralize("project", projectGroup.projects.length, true) }}
+                {{ pluralize("project", projectGroup.projectCount ?? projectGroup.projects?.length ?? 0, true) }}
               </div>
             </div>
           </div>
@@ -230,18 +230,18 @@ onMounted(() => {
   });
 });
 
-const onOptionClick = ({ id, name }: ProjectGroup) => {
+const onOptionClick = (projectGroup: ProjectGroup) => {
   trackEvent({
     key: FeatureEventKey.SELECT_PROJECT_GROUP,
     type: EventType.FEATURE,
     properties: {
-      projectGroupId: id,
-      projectName: name,
+      projectGroupId: projectGroup.id,
+      projectName: projectGroup.name,
     },
   });
 
   isPopoverVisible.value = false;
-  updateSelectedProjectGroup(id);
+  updateSelectedProjectGroup(projectGroup);
 };
 
 onBeforeUnmount(() => {

frontend/src/modules/lf/segments/store/actions.js

@@ -14,6 +14,32 @@ const isAdminOnly = () => {
   return roles.value.includes(LfRole.projectAdmin);
 };
 
+const hasNestedProjects = (projectGroup) => Array.isArray(projectGroup?.projects)
+  && projectGroup.projects.some((p) => Array.isArray(p.subprojects) && p.subprojects.length > 0);
+
+const resolveProjectGroupForSelection = async (projectGroupOrId, list) => {
+  if (!projectGroupOrId) {
+    return null;
+  }
+
+  const id = typeof projectGroupOrId === 'string' ? projectGroupOrId : projectGroupOrId.id;
+  if (!id) {
+    return null;
+  }
+
+  const fromArg = typeof projectGroupOrId === 'object' ? projectGroupOrId : null;
+  const fromList = list.find((p) => p.id === id) || null;
+
+  if (hasNestedProjects(fromArg)) {
+    return fromArg;
+  }
+  if (hasNestedProjects(fromList)) {
+    return fromList;
+  }
+
+  return LfService.findSegment(id);
+};
+
 export default {
   // Project Groups
   listProjectGroups({
@@ -270,19 +296,44 @@ export default {
 
     this.listProjects();
   },
-  updateSelectedProjectGroup(projectGroupId, sendToDashboard = true) {
-    if (projectGroupId) {
-      const projectGroup = this.projectGroups.list.find((p) => p.id === projectGroupId);
+  async updateSelectedProjectGroup(projectGroupOrId, sendToDashboard = true) {
+    if (!projectGroupOrId) {
+      this.selectedProjectGroup = null;
+      return;
+    }
+
+    try {
+      const projectGroup = await resolveProjectGroupForSelection(
+        projectGroupOrId,
+        this.projectGroups.list,
+      );
+
+      if (!projectGroup?.id) {
+        this.selectedProjectGroup = null;
+        ToastStore.error('Project group could not be loaded');
+        return;
+      }
 
       this.selectedProjectGroup = projectGroup;
 
+      const idx = this.projectGroups.list.findIndex((p) => p.id === projectGroup.id);
+      if (idx >= 0) {
+        this.projectGroups.list[idx] = {
+          ...this.projectGroups.list[idx],
+          ...projectGroup,
+        };
+      } else {
+        this.projectGroups.list = [...this.projectGroups.list, projectGroup];
+      }
+
       if (sendToDashboard) {
         router.push({
           name: 'member',
         });
       }
-    } else {
+    } catch (e) {
       this.selectedProjectGroup = null;
+      ToastStore.error('Something went wrong while selecting the project group');
     }
   },
   doChangeProjectGroupCurrentPage(currentPage) {

frontend/src/modules/overview/components/fragments/project-group-filter.vue

@@ -185,9 +185,18 @@ watch(error, (err) => {
   }
 });
 
-watch(selectedProjectGroupId, (newVal) => {
+watch(selectedProjectGroupId, async (newVal) => {
   if (newVal && newVal !== '') {
-    selectedProjectGroup.value = projectGroupsList.value.find((pg) => pg.id === newVal) || null;
+    const fromList = projectGroupsList.value.find((pg) => pg.id === newVal) || null;
+    selectedProjectGroup.value = fromList;
+
+    if (!fromList?.projects?.length) {
+      try {
+        selectedProjectGroup.value = await segmentService.getSegmentById(newVal) as ProjectGroup;
+      } catch (e) {
+        ToastStore.error('Something went wrong while loading the project group');
+      }
+    }
   } else {
     selectedProjectGroup.value = null;
     selectedProjectId.value = '';

frontend/src/router/index.js

@@ -62,7 +62,7 @@ export const createRouter = () => {
     router.beforeEach(async (to, from, next) => {
       const lsSegmentsStore = useLfSegmentsStore();
       const { selectedProjectGroup } = storeToRefs(lsSegmentsStore);
-      const { listProjectGroups, updateSelectedProjectGroup } = lsSegmentsStore;
+      const { updateSelectedProjectGroup } = lsSegmentsStore;
 
       // Set title to pages
       document.title = `LFX Community Data Platform${to.meta.title ? ` | ${to.meta.title}` : ''}`;
@@ -111,12 +111,11 @@ export const createRouter = () => {
 
           if (!selectedProjectGroup.value) {
             try {
-              await listProjectGroups({
-                limit: null,
-                reset: true,
-              });
-
-              updateSelectedProjectGroup(to.query.projectGroup, false);
+              await updateSelectedProjectGroup(to.query.projectGroup, false);
+              if (!selectedProjectGroup.value) {
+                next('/project-groups');
+                return;
+              }
             } catch (e) {
               next('/project-groups');
               return;

frontend/src/shared/project-column/lf-project-column.vue

@@ -1,12 +1,13 @@
 <template>
-  <div v-if="props.projects.length" class="flex flex-wrap gap-2">
+  <div v-if="displayCount > 0" class="flex flex-wrap gap-2">
     <el-popover
+      v-if="projects.length"
       placement="top"
       :width="250"
       trigger="hover"
     >
       <template #reference>
-        <app-lf-project-count :title="props.title" :icon="props.icon" :count="projects.length" />
+        <app-lf-project-count :title="props.title" :icon="props.icon" :count="displayCount" />
       </template>
       <template #default>
         <div class="flex flex-wrap gap-1 overflow-hidden">
@@ -22,25 +23,36 @@
         </div>
       </template>
     </el-popover>
+    <app-lf-project-count
+      v-else
+      :title="props.title"
+      :icon="props.icon"
+      :count="displayCount"
+    />
   </div>
   <span v-else class="text-gray-500 text-sm">No {{ props.title }}</span>
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue';
 import AppLfProjectCount from './lf-project-count.vue';
 
 const props = withDefaults(defineProps<{
-  projects: {
+  projects?: {
     id: string;
     name: string;
   }[];
+  projectCount?: number;
   icon?: string;
   title?: string;
 }>(), {
   projects: () => [],
+  projectCount: undefined,
   title: () => 'Projects',
   icon: () => 'layer-group',
 });
+
+const displayCount = computed(() => props.projectCount ?? props.projects?.length ?? 0);
 </script>
 
 <script lang="ts">