fix: 🔧 Fix issues found during loop rally testing (#952)

* refactor(work order): 💄 Update Estimate and Progress bars * fix(loop): 🐛 Consolidate details in sidesheet to single heading * fix(loop): 🐛 Move loop description to description field in sidesheet header * feat(loop): 💄 Change default grouping for hanging garden * fix(loop): 💄 Set garden item height to 30 * fix(loop): 💄 Add link to workorder * fix(loop): ⏪ Re-add links to checklist table in sidesheet --------- Co-authored-by: Edward Brunton <Edward.Brunton@equinor.com>
equinor · Apr 16, 2024 · 300848f · 300848f
1 parent 6d6f03e
commit 300848f
Show file tree

Hide file tree

Showing 13 changed files with 176 additions and 163 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -5,5 +5,5 @@
     "titleBar.activeBackground": "#1D4902",
     "titleBar.activeForeground": "#EEFEE4"
   },
-  "conventionalCommits.scopes": ["handover", "sidesheet"]
+  "conventionalCommits.scopes": ["handover", "loop", "work order", "sidesheet"]
 }
diff --git a/libs/loopapp/src/lib/config/gardenConfig.ts b/libs/loopapp/src/lib/config/gardenConfig.ts
@@ -23,10 +23,12 @@ export const useGardenConfig = (contextId: string): GardenConfig<Loop, FilterSta
     getHeader,
     getSubgroupItems,
     getDisplayName: (item) => item.loopNo,
-    initialGrouping: ['Responsible'],
+    initialGrouping: ['RFC'],
     customViews: {
-      //bs typescript error
-      customItemView: GardenItem as any,
+      customItemView: GardenItem,
+    },
+    visuals: {
+      rowHeight: 30,
     },
   };
 };
diff --git a/libs/loopsidesheet/src/lib/types/loopContent.ts b/libs/loopsidesheet/src/lib/types/loopContent.ts
@@ -1,14 +1,17 @@
 export type LoopContent = {
-    loopNo: string;
-    facility: string | null;
-    contentTagId: string;
-    contentTagNo: string;
-    register: string | null;
-    mechanicalCompletionStatus: string | null;
-    mechanicalCompletionPackageNo: string | null;
-    mechanicalCompletionPackageUrlId: string | null;
-    commissioningPackageNo: string | null;
-    commissioningPackageUrlId: string | null;
-    description: string | null;
-    clStatus: string | null;
-};
+  loopNo: string;
+  facility: string | null;
+  contentTagId: string;
+  contentTagNo: string;
+  register: string | null;
+  mechanicalCompletionStatus: string | null;
+  mechanicalCompletionPackageNo: string | null;
+  mechanicalCompletionPackageUrl: string | null;
+  mechanicalCompletionPackageUrlId: string | null;
+  commissioningPackageNo: string | null;
+  commissioningPackageUrl: string | null;
+  commissioningPackageUrlId: string | null;
+  description: string | null;
+  clStatus: string | null;
+  contentTagUrl: string | null;
+};
diff --git a/libs/loopsidesheet/src/lib/ui-sidesheet/ContentDetails.tsx b/libs/loopsidesheet/src/lib/ui-sidesheet/ContentDetails.tsx
diff --git a/libs/loopsidesheet/src/lib/ui-sidesheet/DetailsTab.tsx b/libs/loopsidesheet/src/lib/ui-sidesheet/DetailsTab.tsx
@@ -1,9 +1,13 @@
 import { Loop } from '@cc-components/loopshared';
+import { StatusCircle } from '@cc-components/shared/common';
+import { statusColorMap } from '@cc-components/shared/mapping';
 import {
   stringCell,
   StyledTabContent,
   StyledTable,
 } from '@cc-components/shared/sidesheet';
+import { formatDateString } from '@cc-components/shared/utils-dates';
+import { ContentTable } from './LoopContentTable';
 
 type DetailsTabProps = {
   loop: Loop | undefined;
@@ -33,8 +37,38 @@ export const DetailsTab = ({ loop }: DetailsTabProps): JSX.Element | null => {
             <td>Status</td>
             <td>{stringCell(loop.tagStatus)}</td>
           </tr>
+          <tr>
+            <td>MC status of content</td>
+            <td>
+              {loop.loopContentStatus ? (
+                <StatusCircle
+                  content={loop.loopContentStatus}
+                  statusColor={statusColorMap[loop.loopContentStatus]}
+                />
+              ) : (
+                '-'
+              )}
+            </td>
+          </tr>
+          <tr>
+            <td>Planned MC complete of content</td>
+            <td>
+              {loop.woPlannedCompletionDate
+                ? stringCell(formatDateString(loop.woPlannedCompletionDate))
+                : '-'}
+            </td>
+          </tr>
+          <tr>
+            <td>Actual MC complete of content</td>
+            <td>
+              {loop.woActualCompletionDate
+                ? stringCell(formatDateString(loop.woActualCompletionDate))
+                : '-'}
+            </td>
+          </tr>
         </tbody>
       </StyledTable>
+      <ContentTable loop={loop} />
     </StyledTabContent>
   );
 };
diff --git a/libs/loopsidesheet/src/lib/ui-sidesheet/LoopContentTable.tsx b/libs/loopsidesheet/src/lib/ui-sidesheet/LoopContentTable.tsx
@@ -16,18 +16,17 @@ const columns: ColDef<LoopContent>[] = [
   {
     headerName: 'Tag',
     valueGetter: (pkg) => pkg.data?.contentTagNo,
-    // valueFormatter: (pkg) => {
-    //   if (pkg.data?.contentTagId) {
-    //     return proCoSysUrls.getTagUrl(pkg.data.contentTagId);
-    //   }
-    //   return '';
-    // },
-    // cellRenderer: (props: ICellRendererProps<LoopContent, string | null>) => {
-    //   if (props.valueFormatted) {
-    //     return <LinkCell url={props.valueFormatted} urlText={props.value ?? ''} />;
-    //   }
-    //   return null;
-    // },
+    cellRenderer: (props: ICellRendererProps<LoopContent, string | null>) => {
+      if (props.valueFormatted) {
+        return (
+          <LinkCell
+            url={props.data?.contentTagUrl ?? undefined}
+            urlText={props.value ?? ''}
+          />
+        );
+      }
+      return null;
+    },
     width: 120,
   },
   {
@@ -66,35 +65,33 @@ const columns: ColDef<LoopContent>[] = [
   {
     headerName: 'Comm Pkg',
     valueGetter: (pkg) => pkg.data?.commissioningPackageNo,
-    // valueFormatter: (pkg) => {
-    //   if (pkg.data?.commissioningPackageUrlId) {
-    //     return proCoSysUrls.getCommPkgUrl(pkg.data.commissioningPackageUrlId);
-    //   }
-    //   return '';
-    // },
-    // cellRenderer: (props: ICellRendererProps<LoopContent, string | null>) => {
-    //   if (props.valueFormatted) {
-    //     return <LinkCell url={props.valueFormatted} urlText={props.value ?? ''} />;
-    //   }
-    //   return null;
-    // },
+    cellRenderer: (props: ICellRendererProps<LoopContent, string | null>) => {
+      if (props.valueFormatted) {
+        return (
+          <LinkCell
+            url={props.data?.commissioningPackageUrl ?? undefined}
+            urlText={props.value ?? ''}
+          />
+        );
+      }
+      return null;
+    },
     width: 120,
   },
   {
     headerName: 'MC Pkg',
     valueGetter: (pkg) => pkg.data?.mechanicalCompletionPackageNo,
-    // valueFormatter: (pkg) => {
-    //   if (pkg.data?.mechanicalCompletionPackageUrlId) {
-    //     return proCoSysUrls.getMcUrl(pkg.data.mechanicalCompletionPackageUrlId);
-    //   }
-    //   return '';
-    // },
-    // cellRenderer: (props: ICellRendererProps<LoopContent, string | null>) => {
-    //   if (props.valueFormatted) {
-    //     return <LinkCell url={props.valueFormatted} urlText={props.value ?? ''} />;
-    //   }
-    //   return null;
-    // },
+    cellRenderer: (props: ICellRendererProps<LoopContent, string | null>) => {
+      if (props.valueFormatted) {
+        return (
+          <LinkCell
+            url={props.data?.mechanicalCompletionPackageUrl ?? undefined}
+            urlText={props.value ?? ''}
+          />
+        );
+      }
+      return null;
+    },
     width: 140,
   },
 ];

diff --git a/libs/loopsidesheet/src/lib/ui-sidesheet/LoopSidesheet.tsx b/libs/loopsidesheet/src/lib/ui-sidesheet/LoopSidesheet.tsx
@@ -1,15 +1,8 @@
 import { Loop } from '@cc-components/loopshared';
-import { useState } from 'react';
-import { DetailsTab } from './DetailsTab';
-import { Tabs } from '@equinor/eds-core-react';
-import { useGetWorkorders } from '../utils-sidesheet';
-import { Checklists } from './Checklists';
-import { ContentDetails } from './ContentDetails';
-import { WorkorderTab } from '@cc-components/shared/sidesheet';
+import { LinkCell, useContextId, useHttpClient } from '@cc-components/shared';
 import { StatusCircle } from '@cc-components/shared/common';
 import { statusColorMap } from '@cc-components/shared/mapping';
-import { useQuery } from '@tanstack/react-query';
-import { LinkCell, useContextId, useHttpClient } from '@cc-components/shared';
+import { WorkorderTab } from '@cc-components/shared/sidesheet';
 import {
   BannerItem,
   CustomStyledPanels,
@@ -22,6 +15,12 @@ import {
   StyledTabsList,
   TabTitle,
 } from '@cc-components/sharedcomponents';
+import { Tabs } from '@equinor/eds-core-react';
+import { useQuery } from '@tanstack/react-query';
+import { useState } from 'react';
+import { useGetWorkorders } from '../utils-sidesheet';
+import { Checklists } from './Checklists';
+import { DetailsTab } from './DetailsTab';
 
 export const LoopSidesheet = (props: {
   item?: Loop | undefined;
@@ -69,7 +68,8 @@ export const LoopSidesheet = (props: {
   return (
     <StyledSideSheetContainer>
       <SidesheetHeader
-        title={`${loop.loopNo}, ${loop.description}` || ''}
+        title={loop.loopNo}
+        description={loop.description ?? undefined}
         onClose={props.close}
         applicationTitle="Loop"
       />
@@ -128,7 +128,6 @@ export const LoopSidesheet = (props: {
           <Tabs.Panel>
             <DetailsTab loop={loop} />
             {loop.loopId && <Checklists loopId={loop.loopId} />}
-            <ContentDetails loop={loop} />
           </Tabs.Panel>
           <Tabs.Panel>
             <WorkorderTab error={error} isFetching={isLoading} workorders={data} />

diff --git a/libs/shared/src/packages/sidesheet/src/lib/sidesheet/tabs/cutoff/columns.tsx b/libs/shared/src/packages/sidesheet/src/lib/sidesheet/tabs/cutoff/columns.tsx
@@ -2,6 +2,13 @@ import { ColDef, ICellRendererProps } from '@equinor/workspace-ag-grid';
 import { CutoffBase } from './types';
 import { DateCell, DescriptionCell, ProgressCell } from '../../../../../../table-helpers';
 
+const progressBarCellStyle = () => {
+  return {
+    display: 'grid',
+    height: '100%',
+  };
+};
+
 export const columns: ColDef<CutoffBase>[] = [
   {
     headerName: 'Cutoff',
@@ -62,6 +69,8 @@ export const columns: ColDef<CutoffBase>[] = [
     cellRenderer: (props: ICellRendererProps<CutoffBase, string | null>) => (
       <ProgressCell percentWidth={Math.round(props.data?.projectProgress ?? 0)} />
     ),
+    cellStyle: progressBarCellStyle,
+    minWidth: 150,
   },
 
   {

diff --git a/libs/shared/src/packages/sidesheet/src/lib/sidesheet/tabs/workorder/columns.tsx b/libs/shared/src/packages/sidesheet/src/lib/sidesheet/tabs/workorder/columns.tsx
@@ -60,12 +60,10 @@ export const columns = (
       headerName: 'Progress',
       valueGetter: (pkg) => pkg.data?.projectProgress,
       cellRenderer: (props: ICellRendererProps<WorkorderBase>) => {
-        return (
-          <Center>
-            <ProgressCell percentWidth={props.value === null ? 0 : props.value} />
-          </Center>
-        );
+        return <ProgressCell percentWidth={props.value === null ? 0 : props.value} />;
       },
+      cellStyle: progressBarCellStyle,
+      minWidth: 150,
     },
     {
       headerName: 'Estimated',
@@ -76,14 +74,14 @@ export const columns = (
           maxEstimatedHours = maxCount;
         }
         return (
-          <Center>
-            <EstimateCell
-              current={Number(props.value === null ? 0 : props.value)}
-              max={maxEstimatedHours}
-            />
-          </Center>
+          <EstimateCell
+            current={Number(props.value === null ? 0 : props.value)}
+            max={maxEstimatedHours}
+          />
         );
       },
+      cellStyle: progressBarCellStyle,
+      minWidth: 150,
     },
     {
       headerName: 'Remaining',
@@ -94,21 +92,21 @@ export const columns = (
           maxRemainingHours = maxCount;
         }
         return (
-          <Center>
-            <EstimateCell
-              current={Number(props.value === null ? 0 : props.value)}
-              max={maxRemainingHours}
-            />
-          </Center>
+          <EstimateCell
+            current={Number(props.value === null ? 0 : props.value)}
+            max={maxRemainingHours}
+          />
         );
       },
+      cellStyle: progressBarCellStyle,
+      minWidth: 150,
     },
   ];
 };
 
-const Center = styled.div`
-  display: flex;
-  height: 100%;
-  width: 100%;
-  align-items: center;
-`;
+const progressBarCellStyle = () => {
+  return {
+    display: 'grid',
+    height: '100%',
+  };
+};