From 68e83db73542e4bb437897c8a9d015e6e9e92a1f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kjell=20H=C3=A5land?= Date: Mon, 16 Sep 2024 14:09:29 +0200 Subject: [PATCH] :sparkles: Added Workflow visual component to grid + sidesheet (#1128) * Added workflow visual component to grid + sidesheet * Removed old checklist status column. Added new one using domain name --- libs/pipingapp/src/lib/config/tableConfig.tsx | 29 +++++------ libs/pipingshared/src/lib/index.ts | 1 + libs/pipingshared/src/lib/types/pipetest.ts | 8 +++ libs/pipingshared/src/lib/utils/index.ts | 1 + .../src/lib/utils/workflowHelpers.ts | 16 ++++++ .../src/lib/ui-sidesheet/PipingSidesheet.tsx | 19 ++----- libs/shared/src/packages/index.ts | 1 + .../src/packages/mapping/src/lib/index.ts | 1 + .../mapping/src/lib/workflowStatusColorMap.ts | 19 +++++++ .../src/packages/types/src/lib/index.ts | 1 + .../types/src/lib/workflowStepStatus.ts | 1 + .../src/packages/workflow-visual/index.ts | 1 + .../src/packages/workflow-visual/src/index.ts | 1 + .../workflow-visual/src/lib/WorkflowDot.tsx | 49 +++++++++++++++++++ .../src/lib/WorkflowVisual.tsx | 36 ++++++++++++++ .../packages/workflow-visual/src/lib/index.ts | 2 + .../workflow-visual/src/lib/workflowStep.ts | 8 +++ 17 files changed, 166 insertions(+), 28 deletions(-) create mode 100644 libs/pipingshared/src/lib/utils/index.ts create mode 100644 libs/pipingshared/src/lib/utils/workflowHelpers.ts create mode 100644 libs/shared/src/packages/mapping/src/lib/workflowStatusColorMap.ts create mode 100644 libs/shared/src/packages/types/src/lib/workflowStepStatus.ts create mode 100644 libs/shared/src/packages/workflow-visual/index.ts create mode 100644 libs/shared/src/packages/workflow-visual/src/index.ts create mode 100644 libs/shared/src/packages/workflow-visual/src/lib/WorkflowDot.tsx create mode 100644 libs/shared/src/packages/workflow-visual/src/lib/WorkflowVisual.tsx create mode 100644 libs/shared/src/packages/workflow-visual/src/lib/index.ts create mode 100644 libs/shared/src/packages/workflow-visual/src/lib/workflowStep.ts diff --git a/libs/pipingapp/src/lib/config/tableConfig.tsx b/libs/pipingapp/src/lib/config/tableConfig.tsx index 0a6454e84..18685f348 100644 --- a/libs/pipingapp/src/lib/config/tableConfig.tsx +++ b/libs/pipingapp/src/lib/config/tableConfig.tsx @@ -1,5 +1,9 @@ import { ColDef, GridConfig, ICellRendererProps } from '@equinor/workspace-fusion/grid'; -import { Pipetest } from '@cc-components/pipingshared'; +import { + Pipetest, + PipetestWorkflowStep, + mapWorkflowStepsToStep, +} from '@cc-components/pipingshared'; import { FilterState } from '@equinor/workspace-fusion/filter'; import { defaultGridOptions, @@ -11,6 +15,7 @@ import { DescriptionCell, LinkCell, StatusCircle, + WorkflowVisual, domainNames, pipetestStatusColormap, useHttpClient, @@ -85,23 +90,19 @@ const columnDefinitions: [ColDef, ...ColDef[]] = [ valueGetter: (element) => element.data?.location, }, { - headerName: domainNames.mcStatus, - colId: 'mechanicalCompletionStatus', - valueGetter: (element) => element.data?.mechanicalCompletionStatus, - cellRenderer: (props: ICellRendererProps) => { + headerName: domainNames.checklistStatus, + colId: 'workflow', + valueGetter: (element) => element.data?.workflow, + cellRenderer: (props: ICellRendererProps) => { if (!props.value) return; - return ( - - ); + + return ; }, }, { - headerName: domainNames.checklistStatus, - colId: 'formStatus', - valueGetter: (element) => element.data?.formStatus, + headerName: domainNames.mcStatus, + colId: 'mechanicalCompletionStatus', + valueGetter: (element) => element.data?.mechanicalCompletionStatus, cellRenderer: (props: ICellRendererProps) => { if (!props.value) return; return ( diff --git a/libs/pipingshared/src/lib/index.ts b/libs/pipingshared/src/lib/index.ts index fcb073fef..9dddb45d7 100644 --- a/libs/pipingshared/src/lib/index.ts +++ b/libs/pipingshared/src/lib/index.ts @@ -1 +1,2 @@ export * from './types'; +export * from './utils'; \ No newline at end of file diff --git a/libs/pipingshared/src/lib/types/pipetest.ts b/libs/pipingshared/src/lib/types/pipetest.ts index 863a5b1fe..ba86d99f5 100644 --- a/libs/pipingshared/src/lib/types/pipetest.ts +++ b/libs/pipingshared/src/lib/types/pipetest.ts @@ -34,6 +34,7 @@ export type Pipetest = { heatTraceCableNos: string[]; commissioningPackageUrl?: string; mechanicalCompletionUrl?: string; + workflow: PipetestWorkflowStep[] }; export type Checklist = { @@ -59,3 +60,10 @@ export type InsulationTag = { description: string; status: string; }; + +export type PipetestWorkflowStep = { + stepTag: string; + stepName: string; + stepValue: string; + status: string; +}; diff --git a/libs/pipingshared/src/lib/utils/index.ts b/libs/pipingshared/src/lib/utils/index.ts new file mode 100644 index 000000000..f231266eb --- /dev/null +++ b/libs/pipingshared/src/lib/utils/index.ts @@ -0,0 +1 @@ +export * from './workflowHelpers'; \ No newline at end of file diff --git a/libs/pipingshared/src/lib/utils/workflowHelpers.ts b/libs/pipingshared/src/lib/utils/workflowHelpers.ts new file mode 100644 index 000000000..89e191155 --- /dev/null +++ b/libs/pipingshared/src/lib/utils/workflowHelpers.ts @@ -0,0 +1,16 @@ +import { BaseStatus, workflowStatusColorMap, workflowStatusTextColorMap, WorkflowStep } from "@cc-components/shared"; +import { PipetestWorkflowStep } from "../types"; + + +export const mapWorkflowStepsToStep = (workflowSteps: PipetestWorkflowStep[]): WorkflowStep[] => { + return workflowSteps.map((step) => { + return { + color: workflowStatusColorMap[step.status as BaseStatus], + textColor: workflowStatusTextColorMap[step.status as BaseStatus], + circleText: step.stepValue, + popoverText: `${step.stepName}, ${step.status}`, + status: step.status, + isActive: step.status !== 'IN', + }; + }); +}; \ No newline at end of file diff --git a/libs/pipingsidesheet/src/lib/ui-sidesheet/PipingSidesheet.tsx b/libs/pipingsidesheet/src/lib/ui-sidesheet/PipingSidesheet.tsx index be6d55f44..a0cd7d089 100644 --- a/libs/pipingsidesheet/src/lib/ui-sidesheet/PipingSidesheet.tsx +++ b/libs/pipingsidesheet/src/lib/ui-sidesheet/PipingSidesheet.tsx @@ -1,4 +1,4 @@ -import { Pipetest } from '@cc-components/pipingshared'; +import { mapWorkflowStepsToStep, Pipetest } from '@cc-components/pipingshared'; import { useState } from 'react'; import { Tabs } from '@equinor/eds-core-react'; import styled from 'styled-components'; @@ -10,6 +10,7 @@ import { BaseStatus, LinkCell, StatusCircle, + WorkflowVisual, hasProperty, pipetestStatusColormap, } from '@cc-components/shared'; @@ -120,16 +121,7 @@ const PipingSidesheetContent = (props: Required) => { - ) : ( - 'N/A' - ) - } + value={} /> ) => { ); }; - export const PipingSidesheet = (props: PipingProps) => { const { id, item, close } = props; - const { data, isLoading, error } = useGetPipetest(id, item) + const { data, isLoading, error } = useGetPipetest(id, item); if (isLoading) { return ; @@ -225,5 +216,5 @@ export const PipingSidesheet = (props: PipingProps) => { return
Failed to get Pipetest with id: {id}
; } - return (); + return ; }; diff --git a/libs/shared/src/packages/index.ts b/libs/shared/src/packages/index.ts index 8029707df..43ca176be 100644 --- a/libs/shared/src/packages/index.ts +++ b/libs/shared/src/packages/index.ts @@ -17,3 +17,4 @@ export * from './cc-api'; export * from './root-app-wrapper'; export * from './fusion-framework'; export * from './utils-domain'; +export * from './workflow-visual'; \ No newline at end of file diff --git a/libs/shared/src/packages/mapping/src/lib/index.ts b/libs/shared/src/packages/mapping/src/lib/index.ts index 99f76d539..d34c5a12b 100644 --- a/libs/shared/src/packages/mapping/src/lib/index.ts +++ b/libs/shared/src/packages/mapping/src/lib/index.ts @@ -9,3 +9,4 @@ export { orderedProCoSysStatuses, } from './procosys'; export { pipetestAndHeatTraceColorMap } from './pipetestAndHeatTraceColor'; +export { workflowStatusColorMap, workflowStatusTextColorMap } from './workflowStatusColorMap'; diff --git a/libs/shared/src/packages/mapping/src/lib/workflowStatusColorMap.ts b/libs/shared/src/packages/mapping/src/lib/workflowStatusColorMap.ts new file mode 100644 index 000000000..3e860be60 --- /dev/null +++ b/libs/shared/src/packages/mapping/src/lib/workflowStatusColorMap.ts @@ -0,0 +1,19 @@ +import { tokens } from '@equinor/eds-tokens'; +import { WorkflowStepStatus } from '@cc-components/shared'; + +export const workflowStatusColorMap: Record = { + OS: tokens.colors.ui.background__medium.hex, + PB: '#ffc107', + PA: '#ff4081', + OK: '#00c853', + IN: tokens.colors.text.static_icons__primary_white.hex, +} as const; + + +export const workflowStatusTextColorMap: Record = { + OS: tokens.colors.text.static_icons__default.hex, + PB: tokens.colors.text.static_icons__default.hex, + PA: tokens.colors.text.static_icons__primary_white.hex, + OK: tokens.colors.text.static_icons__primary_white.hex, + IN: tokens.colors.ui.background__medium.hex +} as const; \ No newline at end of file diff --git a/libs/shared/src/packages/types/src/lib/index.ts b/libs/shared/src/packages/types/src/lib/index.ts index 268a53155..26c2f1ff9 100644 --- a/libs/shared/src/packages/types/src/lib/index.ts +++ b/libs/shared/src/packages/types/src/lib/index.ts @@ -3,3 +3,4 @@ export * from './pcsFollowUpStatus'; export * from './pcsStatus'; export { type PackageStatus } from './packageStatus'; export { type BaseStatus } from './baseStatus'; +export { type WorkflowStepStatus } from './workflowStepStatus'; \ No newline at end of file diff --git a/libs/shared/src/packages/types/src/lib/workflowStepStatus.ts b/libs/shared/src/packages/types/src/lib/workflowStepStatus.ts new file mode 100644 index 000000000..27f5abbfc --- /dev/null +++ b/libs/shared/src/packages/types/src/lib/workflowStepStatus.ts @@ -0,0 +1 @@ +export type WorkflowStepStatus = 'OS' | 'OK' | 'PA' | 'PB' | 'IN'; \ No newline at end of file diff --git a/libs/shared/src/packages/workflow-visual/index.ts b/libs/shared/src/packages/workflow-visual/index.ts new file mode 100644 index 000000000..8879d7a13 --- /dev/null +++ b/libs/shared/src/packages/workflow-visual/index.ts @@ -0,0 +1 @@ +export * from './src'; \ No newline at end of file diff --git a/libs/shared/src/packages/workflow-visual/src/index.ts b/libs/shared/src/packages/workflow-visual/src/index.ts new file mode 100644 index 000000000..47945b57c --- /dev/null +++ b/libs/shared/src/packages/workflow-visual/src/index.ts @@ -0,0 +1 @@ +export * from './lib'; \ No newline at end of file diff --git a/libs/shared/src/packages/workflow-visual/src/lib/WorkflowDot.tsx b/libs/shared/src/packages/workflow-visual/src/lib/WorkflowDot.tsx new file mode 100644 index 000000000..e3df8fb1d --- /dev/null +++ b/libs/shared/src/packages/workflow-visual/src/lib/WorkflowDot.tsx @@ -0,0 +1,49 @@ +import { tokens } from '@equinor/eds-tokens'; +import { Tooltip } from '@equinor/eds-core-react'; +import { useRef } from 'react'; +import styled from 'styled-components'; + +import { WorkflowStep } from './workflowStep'; + +interface WorkflowDotProps { + step: WorkflowStep; +} + +export const WorkflowDot = (props: WorkflowDotProps) => { + const { color, textColor, isActive, circleText, popoverText } = props.step; + + return ( + + + + {circleText} + + + + ); +}; + +type StepCircleProps = { + color: string; + textColor: string; + isActive: boolean; +}; + +const StepCircleWrapper = styled.div` + display: flex; + flex-direction: column; +`; + +const StepCircle = styled.div` + height: 16px; + width: 16px; + border-radius: 17px; + font-size: 11px; + color: ${(p) => `${p.textColor}`}; + line-height: 18px; + text-align: center; + background: ${(p) => p.color}; + outline: ${(p) => + !p.isActive ? `1px dashed ${tokens.colors.ui.background__medium.hex}` : null}; + cursor: ${(p) => (!p.isActive ? 'not-allowed' : 'pointer')}; +`; diff --git a/libs/shared/src/packages/workflow-visual/src/lib/WorkflowVisual.tsx b/libs/shared/src/packages/workflow-visual/src/lib/WorkflowVisual.tsx new file mode 100644 index 000000000..6df377d2c --- /dev/null +++ b/libs/shared/src/packages/workflow-visual/src/lib/WorkflowVisual.tsx @@ -0,0 +1,36 @@ +import styled from 'styled-components'; +import { WorkflowDot } from './WorkflowDot'; +import { WorkflowStep } from './workflowStep'; + +export interface WorkflowVisualProps { + workflowSteps: WorkflowStep[]; +} + +export const WorkflowVisual = (props: WorkflowVisualProps) => { + const { workflowSteps } = props; + return ( + <> + + {workflowSteps.map((x) => { + return ( + + + + ); + })} + + + ); +}; + +const WorkflowStepContainer = styled.div` + display: flex; + flex-direction: row; +`; + +const WorkflowStep = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + margin: 2px; +`; diff --git a/libs/shared/src/packages/workflow-visual/src/lib/index.ts b/libs/shared/src/packages/workflow-visual/src/lib/index.ts new file mode 100644 index 000000000..466d11446 --- /dev/null +++ b/libs/shared/src/packages/workflow-visual/src/lib/index.ts @@ -0,0 +1,2 @@ +export * from './WorkflowVisual'; +export * from './workflowStep'; \ No newline at end of file diff --git a/libs/shared/src/packages/workflow-visual/src/lib/workflowStep.ts b/libs/shared/src/packages/workflow-visual/src/lib/workflowStep.ts new file mode 100644 index 000000000..31097bdbd --- /dev/null +++ b/libs/shared/src/packages/workflow-visual/src/lib/workflowStep.ts @@ -0,0 +1,8 @@ +export type WorkflowStep = { + color: string; + textColor: string; + circleText: string; + popoverText: string; + status: string; + isActive: boolean; +}