equinor · Jonas-Omdal · Sep 10, 2024 · Sep 10, 2024 · Sep 10, 2024 · Sep 10, 2024
diff --git a/.changeset/dry-points-brake.md b/.changeset/dry-points-brake.md
@@ -0,0 +1,8 @@
+---
+"@equinor/mad-dfw": minor
+---
+
+Adjusted props related to data display and buttons in the `WorkOrderCell` component. Removed the
+`Id` part from the data props. Removed/adjusted the props: `showActions`, `onStartButtonPress`, `onReadyForOperationPress` 
+and `onTecoButtonPress`. New props for this: `startJobButton`, `readyForOperationButton` and `tecoButton`. These props have three options 
+`visible`, `disabled` and `onpress`. Removed validations for when the buttons are displayed.
diff --git a/apps/chronicles/screens/dfw/dfwcomponents/WorkOrderCellScreen.tsx b/apps/chronicles/screens/dfw/dfwcomponents/WorkOrderCellScreen.tsx
@@ -24,25 +24,30 @@ export const WorkOrderCellScreen = () => {
             <Spacer />
             <WorkOrderCell
                 title="Work Order Cell"
-                workOrderId="25282760"
+                workOrder="25282760"
                 maintenanceType="Surface monitoring"
                 functionalLocation="TAG-123456"
-                equipmentId="EQUIP-123456"
-                activeStatusIds="STRT"
+                equipment="EQUIP-123456"
+                activeStatus="STRT"
                 basicStartDate="2023-04-07"
                 basicFinishDate="2023-09-12"
                 requiredEnd="2024-04-23"
-                workCenterId="POMISP"
+                workCenter="POMISP"
                 isHseCritical
                 isProductionCritical
-                showActions={{
-                    startButton: true,
-                    completeButton: true,
-                    tecoButton: true,
+                startJobButton={{
+                    visible: true,
+                    onPress: () => console.log("Start"),
+                }}
+                readyForOperationButton={{
+                    visible: true,
+                    disabled: true,
+                    onPress: () => console.log("Complete"),
+                }}
+                tecoButton={{
+                    visible: true,
+                    onPress: () => console.log("TECO"),
                 }}
-                onCompleteButtonPress={() => console.log("Complete")}
-                onStartButtonPress={() => console.log("Start")}
-                onTecoButtonPress={() => console.log("TECO")}
                 showSymbols
             />
             <Spacer />
@@ -55,25 +60,27 @@ export const WorkOrderCellScreen = () => {
             <Spacer />
             <WorkOrderCell
                 title="Work Order Cell"
-                workOrderId="25282760"
+                workOrder="25282760"
                 maintenanceType="Surface monitoring"
                 functionalLocation="TAG-123456"
-                equipmentId="EQUIP-123456"
-                activeStatusIds="STRT"
+                equipment="EQUIP-123456"
+                activeStatus="STRT"
                 basicFinishDate="2023-04-07"
                 requiredEnd="2024-04-23"
-                workCenterId="POMISP"
+                workCenter="POMISP"
                 isHseCritical
                 isProductionCritical
                 overwriteLabel={{
                     functionalLocation: "Adjusted label",
                 }}
-                showActions={{
-                    startButton: true,
-                    completeButton: true,
+                startJobButton={{
+                    visible: true,
+                    onPress: () => console.log("Start"),
+                }}
+                readyForOperationButton={{
+                    visible: true,
+                    onPress: () => console.log("Complete"),
                 }}
-                onCompleteButtonPress={() => console.log("Complete")}
-                onStartButtonPress={() => console.log("Start")}
                 showSymbols
                 symbolDirection="row"
             />
@@ -87,15 +94,15 @@ export const WorkOrderCellScreen = () => {
             <Spacer />
             <WorkOrderCell.Navigation
                 title="Work Order Cell"
-                workOrderId="25282760"
+                workOrder="25282760"
                 maintenanceType="Surface monitoring"
                 functionalLocation="TAG-123456"
-                equipmentId="EQUIP-123456"
-                activeStatusIds="STRT"
+                equipment="EQUIP-123456"
+                activeStatus="STRT"
                 basicFinishDate="2023-04-07"
                 basicStartDate="2023-02-07"
                 requiredEnd="2024-04-23"
-                workCenterId="POMISP"
+                workCenter="POMISP"
                 isHseCritical
                 isProductionCritical
                 onPress={() => console.log("Pressed")}
@@ -110,7 +117,7 @@ export const WorkOrderCellScreen = () => {
             <Spacer />
             <WorkOrderCell
                 title="Basic Work Order Cell"
-                workOrderId="25282760"
+                workOrder="25282760"
                 maintenanceType="Surface monitoring"
                 functionalLocation="TAG-123456"
                 valueColor="danger"

diff --git a/packages/dfw/src/dfwcomponents/WorkOrderCell/PropertyList.tsx b/packages/dfw/src/dfwcomponents/WorkOrderCell/PropertyList.tsx
@@ -6,15 +6,15 @@ import { Color, useToken } from "@equinor/mad-components";
 
 const defaultWorkOrderLabelMap: Record<keyof WorkOrder, string> = {
     title: "Title",
-    workOrderId: "Work order ID",
+    workOrder: "Work order",
     maintenanceType: "Maintenance type",
     functionalLocation: "Functional Location",
-    equipmentId: "Equipment",
-    activeStatusIds: "Active status",
+    equipment: "Equipment",
+    activeStatus: "Active status",
     basicStartDate: "Basic start",
     basicFinishDate: "Basic finish",
     requiredEnd: "Required end",
-    workCenterId: "Work center",
+    workCenter: "Work center",
 } as const;
 
 type PropertyListProps = {

diff --git a/packages/dfw/src/dfwcomponents/WorkOrderCell/WorkOrderCell.tsx b/packages/dfw/src/dfwcomponents/WorkOrderCell/WorkOrderCell.tsx
@@ -1,4 +1,12 @@
-import { Button, Cell, EDSStyleSheet, Label, Typography, useStyles } from "@equinor/mad-components";
+import {
+    Button,
+    Cell,
+    EDSStyleSheet,
+    Label,
+    Typography,
+    useBreakpoint,
+    useStyles,
+} from "@equinor/mad-components";
 import moment from "moment";
 import React, { useMemo } from "react";
 import { View } from "react-native";
@@ -15,32 +23,29 @@ export const WorkOrderCell = ({
     valueColor = "textTertiary",
     isHseCritical,
     isProductionCritical,
-    showActions,
     overwriteLabel,
     style,
-    onStartButtonPress,
-    onCompleteButtonPress,
-    onTecoButtonPress,
+    startJobButton,
+    readyForOperationButton,
+    tecoButton,
     ...rest
 }: WorkOrderCellProps) => {
+    const breakpoint = useBreakpoint();
     const styles = useStyles(themeStyles, { symbolDirection });
 
+    const anyButtonVisible =
+        startJobButton?.visible ?? readyForOperationButton?.visible ?? tecoButton?.visible;
     const currentDate = moment();
-    const activeStatuses = rest.activeStatusIds?.split(" ");
-    const isStartDisabled = activeStatuses?.includes("STRT") ?? activeStatuses?.includes("RDOP");
-    const isCompleteDisabled =
-        !activeStatuses?.includes("STRT") ?? activeStatuses?.includes("RDOP");
-
     const iconsAndLabels = useMemo(
         () =>
             getStatusIconsAndLabels(
-                rest.activeStatusIds,
+                rest.activeStatus,
                 rest.requiredEnd ?? null,
                 currentDate,
                 isHseCritical,
                 isProductionCritical,
             ),
-        [rest.activeStatusIds, rest.requiredEnd, currentDate, isHseCritical, isProductionCritical],
+        [rest.activeStatus, rest.requiredEnd, currentDate, isHseCritical, isProductionCritical],
     );
 
     return (
@@ -62,29 +67,35 @@ export const WorkOrderCell = ({
                 valueColor={valueColor}
                 currentDate={currentDate.toDate()}
             />
-            {showActions && (
-                <View style={styles.actionContainer}>
-                    {showActions.startButton && (
+            {anyButtonVisible && (
+                <View
+                    style={[
+                        styles.actionContainer,
+                        breakpoint === "xs" && { flexDirection: "column" },
+                    ]}
+                >
+                    {startJobButton?.visible && (
                         <Button
                             title="Start job"
                             variant="outlined"
-                            disabled={isStartDisabled}
-                            onPress={onStartButtonPress}
+                            disabled={startJobButton.disabled}
+                            onPress={startJobButton.onPress}
                         />
                     )}
-                    {showActions.completeButton && (
+                    {readyForOperationButton?.visible && (
                         <Button
                             title="Ready for operation"
                             variant="outlined"
-                            disabled={isCompleteDisabled}
-                            onPress={onCompleteButtonPress}
+                            disabled={readyForOperationButton.disabled}
+                            onPress={readyForOperationButton?.onPress}
                         />
                     )}
-                    {showActions.tecoButton && (
+                    {tecoButton?.visible && (
                         <Button
                             title="Technical complete"
                             variant="outlined"
-                            onPress={onTecoButtonPress}
+                            disabled={tecoButton.disabled}
+                            onPress={tecoButton.onPress}
                         />
                     )}
                 </View>
@@ -98,13 +109,12 @@ const themeStyles = EDSStyleSheet.create(
         iconContainer: {
             flexDirection: "row",
             alignItems: "center",
-
             gap: theme.spacing.cell.content.titleDescriptionGap,
             marginBottom: theme.spacing.cell.group.titleBottomPadding,
         },
         actionContainer: {
-            gap: theme.spacing.container.paddingVertical,
-            marginTop: theme.spacing.spacer.medium,
+            gap: theme.spacing.spacer.small,
+            marginTop: theme.spacing.container.paddingVertical,
             flexDirection: "row",
             justifyContent: "center",
         },
@@ -120,7 +130,7 @@ const themeStyles = EDSStyleSheet.create(
             paddingBottom: theme.spacing.cell.group.titleBottomPadding,
             gap:
                 symbolDirection === "row"
-                    ? theme.spacing.spacer.medium
+                    ? theme.spacing.spacer.small
                     : theme.spacing.cell.content.titleDescriptionGap,
         },
     }),

diff --git a/packages/dfw/src/dfwcomponents/WorkOrderCell/WorkOrderCellNavigation.tsx b/packages/dfw/src/dfwcomponents/WorkOrderCell/WorkOrderCellNavigation.tsx
@@ -29,13 +29,13 @@ export const WorkOrderCellNavigation = ({
     const iconsAndLabels = useMemo(
         () =>
             getStatusIconsAndLabels(
-                rest.activeStatusIds,
+                rest.activeStatus,
                 rest.requiredEnd ?? null,
                 currentDate,
                 isHseCritical,
                 isProductionCritical,
             ),
-        [rest.activeStatusIds, rest.requiredEnd, currentDate, isHseCritical, isProductionCritical],
+        [rest.activeStatus, rest.requiredEnd, currentDate, isHseCritical, isProductionCritical],
     );
 
     return (

diff --git a/packages/dfw/src/dfwcomponents/WorkOrderCell/types.ts b/packages/dfw/src/dfwcomponents/WorkOrderCell/types.ts
@@ -3,21 +3,21 @@ import { ViewProps } from "react-native";
 
 export type WorkOrder = {
     title: string;
-    workOrderId: string;
+    workOrder: string;
     maintenanceType?: string;
-    equipmentId?: string;
-    activeStatusIds?: string;
+    equipment?: string;
+    activeStatus?: string;
     basicStartDate?: string;
     basicFinishDate?: string;
     requiredEnd?: string;
-    workCenterId?: string;
+    workCenter?: string;
     functionalLocation?: string;
 };
 
-export type WorkOrderCellActions = {
-    startButton?: boolean;
-    completeButton?: boolean;
-    tecoButton?: boolean;
+type ButtonOptions = {
+    disabled?: boolean;
+    visible: boolean;
+    onPress: () => void;
 };
 
 export type WorkOrderCellProps = {
@@ -28,10 +28,9 @@ export type WorkOrderCellProps = {
     isProductionCritical?: boolean;
     style?: ViewProps["style"];
     overwriteLabel?: Partial<Record<keyof WorkOrder, string>>;
-    showActions?: WorkOrderCellActions;
-    onStartButtonPress?: () => void;
-    onCompleteButtonPress?: () => void;
-    onTecoButtonPress?: () => void;
+    startJobButton?: ButtonOptions;
+    readyForOperationButton?: ButtonOptions;
+    tecoButton?: ButtonOptions;
 } & WorkOrder;
 
 export type StatusConfig = {