🖌️: Pipetest Frontend

apps/piping/app.config.js

@@ -9,6 +9,8 @@ export default () => ({
   },
   environment: {
     uri: 'https://backend-fusion-data-gateway-test.radix.equinor.com',
+    electricalUri:
+      'https://electrical-consumers-fusion-data-gateway-test.radix.equinor.com',
     defaultScopes: ['api://ed6de162-dd30-4757-95eb-0ffc8d34fbe0/access_as_user'],
   },
   endpoints: {},

apps/piping/app.config.local.js

@@ -9,6 +9,9 @@ export default () => ({
   },
   environment: {
     uri: 'https://localhost:7074',
+    electricalUri:
+      'https://electrical-consumers-fusion-data-gateway-test.radix.equinor.com',
+    // electricalUri: 'https://localhost:7075',
     defaultScopes: ['api://ed6de162-dd30-4757-95eb-0ffc8d34fbe0/access_as_user'],
   },
   endpoints: {},

libs/pipingapp/src/lib/config/frameworkConfig.ts

@@ -20,7 +20,6 @@ export const configure = async (config: IAppConfigurator, c: ComponentRenderArgs
       });
     });
   });
-  // Add more config if needed, e.g. enableAgGrid
 
   const envConfig: PipingEnvConfig = c.env.config?.environment as PipingEnvConfig;
 
@@ -32,10 +31,16 @@ export const configure = async (config: IAppConfigurator, c: ComponentRenderArgs
     defaultScopes: envConfig?.defaultScopes,
   });
 
+  config.configureHttpClient('electrical-api', {
+    baseUri: envConfig?.electricalUri,
+    defaultScopes: envConfig?.defaultScopes,
+  });
+
   enableAgGrid(config);
 };
 
 type PipingEnvConfig = {
   uri: string;
+  electricalUri: string;
   defaultScopes: string[];
 };

libs/pipingapp/src/lib/config/gardenConfig.tsx

@@ -25,8 +25,8 @@ export const useGardenConfig = (
     getGardenMeta,
     getHeader,
     getSubgroupItems,
-    getDisplayName: (item) => item.id,
-    initialGrouping: ['Priority1'],
+    getDisplayName: (item) => item.pipetestNo,
+    initialGrouping: ['RFC'],
     customViews: {
       customItemView: GardenItem as any,
     },

libs/pipingapp/src/lib/config/tableConfig.tsx

@@ -1,5 +1,5 @@
 import { ColDef, GridConfig, ICellRendererProps } from '@equinor/workspace-fusion/grid';
-import { CheckList, Pipetest } from '@cc-components/pipingshared';
+import { Pipetest } from '@cc-components/pipingshared';
 import { FilterState } from '@equinor/workspace-fusion/filter';
 import {
   defaultGridOptions,
@@ -11,8 +11,7 @@ import {
   StyledMonospace,
   useHttpClient,
 } from '@cc-components/shared';
-import { generateCommaSeperatedStringArrayColumn } from '../utils-table/generateCommaSeperatedStringArrayColumn';
-import { getHTList } from '../utils-table/tableHelpers';
+import { generateCommaSeperatedString } from '../utils-table/tableHelpers';
 
 export const useTableConfig = (contextId: string): GridConfig<Pipetest, FilterState> => {
   const client = useHttpClient();
@@ -46,47 +45,59 @@ export const useTableConfig = (contextId: string): GridConfig<Pipetest, FilterSt
 const columnDefinitions: [ColDef<Pipetest>, ...ColDef<Pipetest>[]] = [
   {
     headerName: 'Pipetest',
-    valueGetter: (pkg) => pkg.data?.id,
+    colId: 'pipetestNo',
+    valueGetter: (element) => element.data?.pipetestNo,
     cellRenderer: (props: ICellRendererProps<Pipetest, string>) => {
       return <StyledMonospace>{props.value}</StyledMonospace>;
     },
   },
   {
     headerName: 'Description',
     colId: 'description',
-    valueGetter: (pkg) => pkg.data?.description,
+    valueGetter: (element) => element.data?.description,
     cellRenderer: (props: ICellRendererProps<Pipetest, string | null>) => {
       return <DescriptionCell description={props.value} />;
     },
     width: 300,
   },
-  { headerName: 'Priority', valueGetter: (pkg) => pkg.data?.commPkPriority1 },
+  {
+    headerName: 'Priority1',
+    colId: 'priority1',
+    valueGetter: (element) => element.data?.priority1,
+  },
   {
     headerName: 'Location',
-    valueGetter: (pkg) => pkg.data?.location,
+    colId: 'location',
+    valueGetter: (element) => element.data?.location,
     cellRenderer: (props: ICellRendererProps<Pipetest, string>) => {
       return <StyledMonospace>{props.value}</StyledMonospace>;
     },
   },
-  { headerName: 'Checklist status', valueGetter: (pkg) => 't.b.d :D' },
-  { headerName: 'Current step', valueGetter: (pkg) => 't.b.d :D' },
+  {
+    headerName: 'Checklist status',
+    colId: 'formStatus',
+    valueGetter: (element) => element.data?.formStatus,
+  },
+  {
+    headerName: 'Current step',
+    colId: 'currentStep',
+    valueGetter: (element) => element.data?.checklistStep,
+  },
   {
     headerName: 'RFC',
-    valueGetter: (pkg) => pkg.data?.rfccPlanned,
+    colId: 'rfCPlannedForecastDate',
+    valueGetter: (element) => element.data?.rfCPlannedForecastDate,
     cellRenderer: (props: ICellRendererProps<Pipetest, string | null | undefined>) => {
       return props.value ? <DateCell dateString={props.value} /> : null;
     },
   },
   {
     headerName: 'HT cables',
-    valueGetter: (pkg) => pkg.data?.checkLists,
-    cellRenderer: (props: ICellRendererProps<Pipetest, CheckList[]>) => {
-      if (!props.value) return null;
-      return (
-        <StyledMonospace>
-          {generateCommaSeperatedStringArrayColumn(getHTList(props.value))}
-        </StyledMonospace>
-      );
+    colId: "heatTraceCableNos",
+    valueGetter: (element) => element.data?.heatTraceCableNos,
+    cellRenderer: (props: ICellRendererProps<Pipetest, string | null>) => {
+      const values = generateCommaSeperatedString(props.data?.heatTraceCableNos ?? []);
+      return <DescriptionCell description={values} />;
     },
   },
-];
+];

libs/pipingapp/src/lib/config/workspaceConfig.tsx

@@ -31,6 +31,7 @@ export const WorkspaceWrapper = () => {
   if (isLoading) {
     return <CCApiAccessLoading />;
   }
+
   return (
     <Workspace
       key={contextId + bookmarkKey}

libs/pipingapp/src/lib/ui-garden/Item.tsx

@@ -1,4 +1,4 @@
-import { pipetestStatusColormap } from '@cc-components/shared/mapping';
+import { colorMap } from '@cc-components/shared/mapping';
 import { CustomItemView } from '@equinor/workspace-fusion/garden';
 import { memo, useMemo, useRef, useState } from 'react';
 import {
@@ -9,6 +9,8 @@ import {
   StyledStatusCircles,
 } from './garden.styles';
 import { Pipetest } from 'libs/pipingshared/dist/src';
+import { PackageStatus, PopoverWrapper } from '@cc-components/shared';
+import { getPipetestStatusColors } from '../utils-garden/getPipetestStatusColors';
 
 const PipetestGardenItem = (props: CustomItemView<Pipetest>) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -33,6 +35,8 @@ const PipetestGardenItem = (props: CustomItemView<Pipetest>) => {
   const width = useMemo(() => (depth ? 100 - depth * 3 : 100), [depth]);
   const maxWidth = useMemo(() => itemWidth * 0.98, [itemWidth]);
 
+  const colors = getPipetestStatusColors(data);
+
   return (
     <>
       <StyledRoot>
@@ -46,45 +50,42 @@ const PipetestGardenItem = (props: CustomItemView<Pipetest>) => {
             hoverTimeout && clearTimeout(hoverTimeout);
             setIsOpen(false);
           }}
-          backgroundColor={'green'}
+          backgroundColor={colors.backgroundColor}
           onClick={onClick}
           style={{ width: `${columnExpanded ? 100 : width}%`, maxWidth }}
           isSelected={isSelected}
         >
-          <StyledItemText>{displayName.replace('@PIPETEST-', '')}</StyledItemText>
+          <StyledItemText>{displayName}</StyledItemText>
           <StyledStatusCircles
             mcColor={
-              data.shortformCompletionStatus
-                ? pipetestStatusColormap[data.shortformCompletionStatus]
+              data.mechanicalCompletionStatus
+                ? colorMap[data.mechanicalCompletionStatus as PackageStatus]
                 : null
             }
             commColor={
-              data.shortformCompletionStatus
-                ? pipetestStatusColormap[data.shortformCompletionStatus]
+              data.commissioningStatus
+                ? colorMap[data.commissioningStatus as PackageStatus]
                 : null
             }
           />
         </StyledItemWrapper>
 
         {columnExpanded && (
-          <StyledDescription title={data.description ?? ''}>
-            {data.description}
-          </StyledDescription>
+          <StyledDescription title={data.id ?? ''}>{data.description}</StyledDescription>
         )}
       </StyledRoot>
 
-      {/* {isOpen && (
+      {isOpen && (
         <PopoverWrapper
           isOpen={isOpen}
           rowStart={rowStart}
           columnStart={columnStart}
           width={itemWidth}
           parentRef={parentRef}
-          popoverTitle={`${data.loopNo}`}
-        >
-          <PopoverContent loop={data} />
-        </PopoverWrapper>
-      )} */}
+          popoverTitle={data.description}
+          close={() => setIsOpen(false)}
+        />
+      )}
     </>
   );
 };

libs/pipingapp/src/lib/ui-garden/garden.styles.ts

@@ -45,30 +45,26 @@ type StatusCirclesProps = {
 };
 export const StyledStatusCircles = styled.div<StatusCirclesProps>`
   display: flex;
-  grid-column: 2/3;
+  grid-column: 3/4;
   justify-content: end;
   align-items: center;
 
   ::before {
-    width: ${(props) => (props.mcColor ? '12px' : '13px')};
-    height: ${(props) => (props.mcColor ? '12px' : '13px')};
-    border: ${(props) => (props.mcColor ? '1px solid white' : `none`)};
-    background-color: ${(props) => props.mcColor ?? 'white'};
+    width: 12px;
+    height: 12px;
+    border: 1px solid white;
+    background-color: ${(props) => props.mcColor};
     border-radius: 50%;
     margin: 0px 1px;
-    outline: ${(props) => (props.mcColor ? 'none' : `1px dashed gray`)};
-    outline-offset: -1px;
     content: ' ';
   }
   ::after {
-    width: ${(props) => (props.commColor ? '12px' : '13px')};
-    height: ${(props) => (props.commColor ? '12px' : '13px')};
-    border: ${(props) => (props.commColor ? '1px solid white' : `none`)};
-    background-color: ${(props) => props.commColor ?? 'white'};
+    width: 12px;
+    height: 12px;
+    border: 1px solid white;
+    background-color: ${(props) => props.commColor};
     border-radius: 50%;
     margin: 0px 1px;
-    outline: ${(props) => (props.commColor ? 'none' : `1px dashed gray`)};
-    outline-offset: -2px;
     content: ' ';
   }
 `;

libs/pipingapp/src/lib/utils-garden/getPipetestStatusColors.ts

@@ -0,0 +1,12 @@
+import { Pipetest } from '@cc-components/pipingshared';
+import { pipetestStatusColormap } from '@cc-components/shared/mapping';
+import { BaseStatus } from 'libs/shared/dist/src/packages';
+
+type PackageStatusReturn = {
+  backgroundColor: string;
+};
+
+export const getPipetestStatusColors = (data: Pipetest): PackageStatusReturn => {
+  const backgroundColor = pipetestStatusColormap[data.formStatus as BaseStatus];
+  return { backgroundColor };
+};

libs/pipingapp/src/lib/utils-table/tableHelpers.ts

@@ -1,5 +1,9 @@
-import { CheckList } from '@cc-components/pipingshared';
+export const generateCommaSeperatedString = (array: string[], length: number = 3): string => {
+  const value = array.slice(0, length).join(', ');
 
-export function getHTList(checkLists: CheckList[]): string[] {
-  return checkLists.filter((x) => x.isHeatTrace).map((ht: CheckList) => ht.tagNo);
-}
+  if (array.length > length) {
+    return `${value} (+${array.length - length})`;
+  }
+
+  return value;
+};