fix(workordercell): improve component and fix deviations

.changeset/tricky-deers-argue.md

@@ -0,0 +1,7 @@
+---
+"@equinor/mad-dfw": minor
+---
+
+WorkOrderCell adjusted. Renamed prop `workOrder` to `workOrderId`. Added new prop, `workOrderType`,
+this relates to the workOrderId. Removed the `symbolDirection` and `overwriteLabel` props. The
+symbol direction is now column by default.

apps/chronicles/screens/dfw/dfwcomponents/WorkOrderCellScreen.tsx

@@ -24,7 +24,8 @@ export const WorkOrderCellScreen = () => {
             <Spacer />
             <WorkOrderCell
                 title="Work Order Cell"
-                workOrder="25282760"
+                workOrderId="25282760"
+                workOrderType="PM02"
                 maintenanceType="Surface monitoring"
                 functionalLocation="TAG-123456"
                 equipment="EQUIP-123456"
@@ -37,6 +38,7 @@ export const WorkOrderCellScreen = () => {
                 isProductionCritical
                 startJobButton={{
                     visible: true,
+                    loading: true,
                     onPress: () => console.log("Start"),
                 }}
                 readyForOperationButton={{
@@ -60,7 +62,8 @@ export const WorkOrderCellScreen = () => {
             <Spacer />
             <WorkOrderCell
                 title="Work Order Cell"
-                workOrder="25282760"
+                workOrderId="25282760"
+                workOrderType="PM02"
                 maintenanceType="Surface monitoring"
                 functionalLocation="TAG-123456"
                 equipment="EQUIP-123456"
@@ -82,7 +85,6 @@ export const WorkOrderCellScreen = () => {
                     onPress: () => console.log("Complete"),
                 }}
                 showSymbols
-                symbolDirection="row"
             />
             <Spacer />
             <View style={styles.readableContent}>
@@ -94,7 +96,8 @@ export const WorkOrderCellScreen = () => {
             <Spacer />
             <WorkOrderCell.Navigation
                 title="Work Order Cell"
-                workOrder="25282760"
+                workOrderId="25282760"
+                workOrderType="PM02"
                 maintenanceType="Surface monitoring"
                 functionalLocation="TAG-123456"
                 equipment="EQUIP-123456"
@@ -117,10 +120,12 @@ export const WorkOrderCellScreen = () => {
             <Spacer />
             <WorkOrderCell
                 title="Basic Work Order Cell"
-                workOrder="25282760"
+                workOrderId="25282760"
+                workOrderType="PM02"
                 maintenanceType="Surface monitoring"
                 functionalLocation="TAG-123456"
                 valueColor="danger"
+                showSymbols={false}
             />
         </ScrollView>
     );

packages/dfw/src/dfwcomponents/WorkOrderCell/PropertyList.tsx

@@ -1,12 +1,11 @@
+import { Color } from "@equinor/mad-components";
 import React from "react";
 import { PropertyRow } from "../PropertyRow";
 import { WorkOrder } from "./types";
-import moment from "moment";
-import { Color, useToken } from "@equinor/mad-components";
+import { formatDate } from "./utils";
 
-const defaultWorkOrderLabelMap: Record<keyof WorkOrder, string> = {
+const workOrderLabelMap: Record<string, string | undefined> = {
     title: "Title",
-    workOrder: "Work order",
     maintenanceType: "Maintenance type",
     functionalLocation: "Functional Location",
     equipment: "Equipment",
@@ -18,34 +17,24 @@ const defaultWorkOrderLabelMap: Record<keyof WorkOrder, string> = {
 } as const;
 
 type PropertyListProps = {
-    workOrder: Partial<WorkOrder>;
+    data: Partial<WorkOrder>;
     valueColor: Color;
-    currentDate: Date;
-    overwriteLabel?: Partial<Record<keyof WorkOrder, string>>;
 };
 
-export const PropertyList = ({
-    workOrder,
-    valueColor,
-    currentDate,
-    overwriteLabel = {},
-}: PropertyListProps) => {
-    const token = useToken();
-
-    const formatDate = (dateString: string) => moment(dateString).format("DD.MM.YYYY");
-
+export const PropertyList = ({ data: workOrder, valueColor }: PropertyListProps) => {
+    const currentDate = new Date();
     const requiredEnd = workOrder.requiredEnd ? new Date(workOrder.requiredEnd) : null;
 
     const combinedDates =
         workOrder.basicStartDate && workOrder.basicFinishDate
             ? `${formatDate(workOrder.basicStartDate)} - ${formatDate(workOrder.basicFinishDate)}`
             : null;
 
-    const getLabel = (key: keyof WorkOrder) => {
+    const getLabel = (key: string) => {
         if (key === "basicStartDate" && combinedDates) {
             return "Basic start / finish";
         }
-        return overwriteLabel?.[key] ?? defaultWorkOrderLabelMap[key];
+        return workOrderLabelMap[key];
     };
 
     const getDisplayValue = (key: keyof WorkOrder, value: string | undefined) => {
@@ -64,7 +53,6 @@ export const PropertyList = ({
                 const typedKey = key as keyof WorkOrder;
 
                 if (combinedDates && typedKey === "basicFinishDate") return null;
-
                 if (value || (typedKey === "basicStartDate" && combinedDates)) {
                     const label = getLabel(typedKey);
                     const displayValue = getDisplayValue(typedKey, value);
@@ -75,13 +63,14 @@ export const PropertyList = ({
                             : valueColor;
 
                     return (
-                        <PropertyRow
-                            key={index}
-                            label={label}
-                            value={displayValue ?? ""}
-                            style={{ marginBottom: token.spacing.cell.group.titleBottomPadding }}
-                            textColor={textColor}
-                        />
+                        label && (
+                            <PropertyRow
+                                key={index}
+                                label={label}
+                                value={displayValue ?? ""}
+                                textColor={textColor}
+                            />
+                        )
                     );
                 }
                 return null;

packages/dfw/src/dfwcomponents/WorkOrderCell/WorkOrderCell.tsx

@@ -2,40 +2,43 @@ import {
     Button,
     Cell,
     EDSStyleSheet,
-    Label,
     Typography,
     useBreakpoint,
     useStyles,
+    useToken,
 } from "@equinor/mad-components";
-import moment from "moment";
 import React, { useMemo } from "react";
 import { View } from "react-native";
+import { PropertyRow } from "../PropertyRow";
 import { PropertyList } from "./PropertyList";
 import { StatusIcon } from "./StatusIcon";
 import { WorkOrderCellProps } from "./types";
 import { getStatusIconsAndLabels } from "./utils";
 
 export const WorkOrderCell = ({
     title,
+    workOrderId,
+    workOrderType,
     maintenanceType,
-    showSymbols,
-    symbolDirection = "column",
+    showSymbols = true,
     valueColor = "textTertiary",
     isHseCritical,
     isProductionCritical,
-    overwriteLabel,
     style,
     startJobButton,
     readyForOperationButton,
     tecoButton,
     ...rest
 }: WorkOrderCellProps) => {
     const breakpoint = useBreakpoint();
-    const styles = useStyles(themeStyles, { symbolDirection });
+    const token = useToken();
+    const styles = useStyles(themeStyles);
 
     const anyButtonVisible =
         startJobButton?.visible ?? readyForOperationButton?.visible ?? tecoButton?.visible;
-    const currentDate = moment();
+
+    const currentDate = useMemo(() => new Date(), []);
+
     const iconsAndLabels = useMemo(
         () =>
             getStatusIconsAndLabels(
@@ -50,23 +53,28 @@ export const WorkOrderCell = ({
 
     return (
         <Cell style={style}>
-            <Typography numberOfLines={1} variant="h5" bold style={styles.title}>
+            <Typography
+                numberOfLines={1}
+                variant="h5"
+                bold
+                style={!showSymbols && { paddingBottom: token.spacing.container.paddingVertical }}
+            >
                 {title}
             </Typography>
-            {showSymbols && (
-                <View style={[styles.iconListContainer, { flexDirection: symbolDirection }]}>
+            {showSymbols && iconsAndLabels.length > 0 && (
+                <View style={styles.iconListContainer}>
                     {iconsAndLabels.map((item, index) => (
                         <StatusIcon key={index} {...item} />
                     ))}
                 </View>
             )}
-            {maintenanceType && <Label label={maintenanceType} style={styles.label} />}
-            <PropertyList
-                workOrder={rest}
-                overwriteLabel={overwriteLabel}
-                valueColor={valueColor}
-                currentDate={currentDate.toDate()}
-            />
+            <View style={styles.dataContainer}>
+                <Typography group="paragraph" variant="body_short" color="textTertiary">
+                    {maintenanceType}
+                </Typography>
+                <PropertyRow label={workOrderType} value={workOrderId} />
+                <PropertyList data={rest} valueColor={valueColor} />
+            </View>
             {anyButtonVisible && (
                 <View
                     style={[
@@ -107,34 +115,18 @@ export const WorkOrderCell = ({
     );
 };
 
-const themeStyles = EDSStyleSheet.create(
-    (theme, { symbolDirection }: { symbolDirection: "row" | "column" }) => ({
-        iconContainer: {
-            flexDirection: "row",
-            alignItems: "center",
-            gap: theme.spacing.cell.content.titleDescriptionGap,
-            marginBottom: theme.spacing.cell.group.titleBottomPadding,
-        },
-        actionContainer: {
-            gap: theme.spacing.spacer.small,
-            marginTop: theme.spacing.container.paddingVertical,
-            flexDirection: "row",
-            justifyContent: "center",
-        },
-        title: {
-            marginBottom: theme.spacing.container.paddingVertical,
-        },
-        label: {
-            marginBottom: theme.spacing.cell.group.titleBottomPadding,
-        },
-        iconListContainer: {
-            flexWrap: "wrap",
-            flexDirection: symbolDirection,
-            paddingBottom: theme.spacing.cell.group.titleBottomPadding,
-            gap:
-                symbolDirection === "row"
-                    ? theme.spacing.spacer.small
-                    : theme.spacing.cell.content.titleDescriptionGap,
-        },
-    }),
-);
+const themeStyles = EDSStyleSheet.create(theme => ({
+    actionContainer: {
+        gap: theme.spacing.spacer.small,
+        marginTop: theme.spacing.container.paddingVertical,
+        flexDirection: "row",
+        justifyContent: "center",
+    },
+    dataContainer: {
+        gap: theme.spacing.cell.group.titleBottomPadding,
+    },
+    iconListContainer: {
+        paddingVertical: theme.spacing.container.paddingVertical,
+        gap: theme.spacing.cell.content.titleDescriptionGap,
+    },
+}));

packages/dfw/src/dfwcomponents/WorkOrderCell/WorkOrderCellNavigation.tsx

@@ -1,7 +1,7 @@
-import { Cell, EDSStyleSheet, Icon, Label, Typography, useStyles } from "@equinor/mad-components";
-import moment from "moment";
+import { Cell, EDSStyleSheet, Icon, Typography, useStyles } from "@equinor/mad-components";
 import React, { useMemo } from "react";
 import { View } from "react-native";
+import { PropertyRow } from "../PropertyRow";
 import { PropertyList } from "./PropertyList";
 import { StatusIcon } from "./StatusIcon";
 import { WorkOrderCellProps } from "./types";
@@ -13,19 +13,20 @@ type WorkOrderCellNavigationProps = WorkOrderCellProps & {
 
 export const WorkOrderCellNavigation = ({
     title,
+    workOrderId,
+    workOrderType,
     maintenanceType,
     valueColor = "textTertiary",
     isHseCritical,
     isProductionCritical,
     showSymbols = true,
-    overwriteLabel,
     onPress,
     style,
     ...rest
 }: WorkOrderCellNavigationProps) => {
     const styles = useStyles(themeStyles);
 
-    const currentDate = moment();
+    const currentDate = useMemo(() => new Date(), []);
     const iconsAndLabels = useMemo(
         () =>
             getStatusIconsAndLabels(
@@ -45,13 +46,13 @@ export const WorkOrderCellNavigation = ({
                     <Typography numberOfLines={1} variant="h5" bold style={styles.title}>
                         {title}
                     </Typography>
-                    {maintenanceType && <Label label={maintenanceType} style={styles.label} />}
-                    <PropertyList
-                        workOrder={rest}
-                        overwriteLabel={overwriteLabel}
-                        valueColor={valueColor}
-                        currentDate={currentDate.toDate()}
-                    />
+                    <View style={styles.dataContainer}>
+                        <Typography group="paragraph" variant="body_short" color="textTertiary">
+                            {maintenanceType}
+                        </Typography>
+                        <PropertyRow label={workOrderType} value={workOrderId} />
+                        <PropertyList data={rest} valueColor={valueColor} />
+                    </View>
                 </View>
                 {showSymbols && (
                     <View style={styles.iconListContainer}>
@@ -79,8 +80,8 @@ const themeStyles = EDSStyleSheet.create(theme => ({
     title: {
         marginBottom: theme.spacing.container.paddingVertical,
     },
-    label: {
-        marginBottom: theme.spacing.cell.group.titleBottomPadding,
+    dataContainer: {
+        gap: theme.spacing.cell.group.titleBottomPadding,
     },
     iconListContainer: {
         position: "absolute",

packages/dfw/src/dfwcomponents/WorkOrderCell/index.ts

@@ -1,6 +1,6 @@
 import { WorkOrderCell as _WorkOrderCell } from "./WorkOrderCell";
 import { WorkOrderCellNavigation } from "./WorkOrderCellNavigation";
-import { WorkOrder, WorkOrderCellProps, StatusConfig } from "./types";
+import { WorkOrder, WorkOrderType, WorkOrderCellProps, StatusConfig } from "./types";
 
 type WorkOrderCellFamily = typeof _WorkOrderCell & {
     Navigation: typeof WorkOrderCellNavigation;
@@ -10,4 +10,4 @@ const WorkOrderCell = _WorkOrderCell as WorkOrderCellFamily;
 WorkOrderCell.Navigation = WorkOrderCellNavigation;
 
 export { WorkOrderCell };
-export type { WorkOrder, WorkOrderCellProps, StatusConfig };
+export type { WorkOrder, WorkOrderType, WorkOrderCellProps, StatusConfig };