Common category columns in indicatorlist for umbrella plans

kausaltech · Oct 17, 2024 · af915ab · af915ab
1 parent 97b7fa2
commit af915ab
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 15 deletions.
diff --git a/common/__generated__/graphql.ts b/common/__generated__/graphql.ts
diff --git a/components/indicators/IndicatorList.tsx b/components/indicators/IndicatorList.tsx
@@ -490,6 +490,8 @@ const IndicatorList = ({ leadContent, displayInsights }: Props) => {
           shouldDisplayCategory={(category: Category) =>
             category.type.id === categoryType?.id
           }
+          includePlanRelatedIndicators={includeRelatedPlanIndicators}
+          commonCategories={commonCategories}
         />
       </Container>
     </>

diff --git a/components/indicators/IndicatorListFiltered.tsx b/components/indicators/IndicatorListFiltered.tsx
@@ -402,6 +402,8 @@ const IndicatorListFiltered = (props) => {
     hierarchy,
     displayNormalizedValues,
     shouldDisplayCategory,
+    includePlanRelatedIndicators,
+    commonCategories,
   } = props;
 
   const locale = useLocale();
@@ -557,7 +559,17 @@ const IndicatorListFiltered = (props) => {
               </IndentableTableHeader>
             );
           }
-          if (someIndicatorsHaveCategories) {
+          if (includePlanRelatedIndicators) {
+            // Use common categories for columns
+            commonCategories.forEach((category) => {
+              headers.push(
+                <IndentableTableHeader key={`hr-${category.typeIdentifier}`}>
+                  {category.type.name}
+                </IndentableTableHeader>
+              );
+            });
+          } else if (someIndicatorsHaveCategories) {
+            // Existing code for regular categories
             headers.push(
               <IndentableTableHeader key="hr-themes">
                 {categoryColumnLabel || t('themes')}
@@ -692,19 +704,41 @@ const IndicatorListFiltered = (props) => {
                           </IndicatorLink>
                         </IndentableTableCell>
                       )}
-                      {someIndicatorsHaveCategories && (
-                        <IndentableTableCell>
-                          {item.categories.map((cat) => {
-                            if (cat && (shouldDisplayCategory?.(cat) ?? true))
-                              return (
-                                <StyledBadge key={cat.id}>
-                                  {cat.name}
-                                </StyledBadge>
-                              );
-                            return false;
-                          })}
-                        </IndentableTableCell>
-                      )}
+                      {includePlanRelatedIndicators
+                        ? commonCategories.map((commonCategory) => (
+                            <IndentableTableCell
+                              key={`cat-${commonCategory.typeIdentifier}`}
+                            >
+                              {item.categories
+                                .filter(
+                                  (cat) =>
+                                    cat.common &&
+                                    cat.common.type.identifier ===
+                                      commonCategory.typeIdentifier
+                                )
+                                .map((cat) => (
+                                  <StyledBadge key={cat.common.id}>
+                                    {cat.common.name}
+                                  </StyledBadge>
+                                ))}
+                            </IndentableTableCell>
+                          ))
+                        : someIndicatorsHaveCategories && (
+                            <IndentableTableCell>
+                              {item.categories.map((cat) => {
+                                if (
+                                  cat &&
+                                  (shouldDisplayCategory?.(cat) ?? true)
+                                )
+                                  return (
+                                    <StyledBadge key={cat.id}>
+                                      {cat.name}
+                                    </StyledBadge>
+                                  );
+                                return false;
+                              })}
+                            </IndentableTableCell>
+                          )}
                       <IndentableTableCell>
                         {item.latestValue && (
                           <IndicatorDate>
@@ -754,6 +788,8 @@ IndicatorListFiltered.propTypes = {
   categoryColumnLabel: PropTypes.string,
   indicators: PropTypes.arrayOf(PropTypes.object).isRequired,
   shouldDisplayCategory: PropTypes.func,
+  includePlanRelatedIndicators: PropTypes.bool,
+  commonCategories: PropTypes.arrayOf(PropTypes.object),
 };
 
 export default IndicatorListFiltered;