From aa166a2f53901ab1315552045aa86d639181fced Mon Sep 17 00:00:00 2001
From: Kjell Haaland <kjell.haland@bouvet.no>
Date: Mon, 4 Nov 2024 13:48:00 +0100
Subject: [PATCH] Added workorder description components

---
 .../workordersidesheet/src/lib/types/index.ts |  3 +-
 .../src/lib/types/workOrderDescription.ts     |  3 +
 .../src/lib/ui-sidesheet/DetailsTab.tsx       |  5 ++
 .../lib/ui-sidesheet/WorkorderDescription.tsx | 72 +++++++++++++++++++
 .../useWorkOrderDescription.ts                | 23 ++++++
 5 files changed, 105 insertions(+), 1 deletion(-)
 create mode 100644 libs/workordersidesheet/src/lib/types/workOrderDescription.ts
 create mode 100644 libs/workordersidesheet/src/lib/ui-sidesheet/WorkorderDescription.tsx
 create mode 100644 libs/workordersidesheet/src/lib/utils-sidesheet/useWorkOrderDescription.ts

diff --git a/libs/workordersidesheet/src/lib/types/index.ts b/libs/workordersidesheet/src/lib/types/index.ts
index 327299244..9acf9b3c9 100644
--- a/libs/workordersidesheet/src/lib/types/index.ts
+++ b/libs/workordersidesheet/src/lib/types/index.ts
@@ -1,3 +1,4 @@
 export type { WorkOrderMaterial } from './workOrderMaterial';
 export type { WorkOrderMccr } from './workOrderMccr';
-export type { WorkOrderNotification } from './workOrderNotification';
\ No newline at end of file
+export type { WorkOrderNotification } from './workOrderNotification';
+export type { WorkOrderDescription } from './workOrderDescription';
\ No newline at end of file
diff --git a/libs/workordersidesheet/src/lib/types/workOrderDescription.ts b/libs/workordersidesheet/src/lib/types/workOrderDescription.ts
new file mode 100644
index 000000000..eeb2b2c09
--- /dev/null
+++ b/libs/workordersidesheet/src/lib/types/workOrderDescription.ts
@@ -0,0 +1,3 @@
+export type WorkOrderDescription = {
+    description: string;
+}
\ No newline at end of file
diff --git a/libs/workordersidesheet/src/lib/ui-sidesheet/DetailsTab.tsx b/libs/workordersidesheet/src/lib/ui-sidesheet/DetailsTab.tsx
index 660fb61a1..90048c0b6 100644
--- a/libs/workordersidesheet/src/lib/ui-sidesheet/DetailsTab.tsx
+++ b/libs/workordersidesheet/src/lib/ui-sidesheet/DetailsTab.tsx
@@ -8,11 +8,15 @@ import {
 } from '@cc-components/shared';
 
 import { getWoStatus, WorkOrder } from '@cc-components/workordershared';
+import { WorkOrderDescription } from './WorkorderDescription';
+
 type DetailsTabProps = {
   workOrder: WorkOrder | undefined;
 };
+
 export const DetailsTab = ({ workOrder }: DetailsTabProps): JSX.Element | null => {
   if (!workOrder) return null;
+
   return (
     <StyledTabContent>
       <h3>Details</h3>
@@ -119,6 +123,7 @@ export const DetailsTab = ({ workOrder }: DetailsTabProps): JSX.Element | null =
           </tr>
         </tbody>
       </StyledTable>
+      <WorkOrderDescription workOrderId={workOrder.workOrderId} />
     </StyledTabContent>
   );
 };
diff --git a/libs/workordersidesheet/src/lib/ui-sidesheet/WorkorderDescription.tsx b/libs/workordersidesheet/src/lib/ui-sidesheet/WorkorderDescription.tsx
new file mode 100644
index 000000000..58eacf001
--- /dev/null
+++ b/libs/workordersidesheet/src/lib/ui-sidesheet/WorkorderDescription.tsx
@@ -0,0 +1,72 @@
+import styled from 'styled-components';
+import { Icon, Progress } from '@equinor/eds-core-react';
+import { tokens } from '@equinor/eds-tokens';
+
+import { StyledTabContent } from '@cc-components/shared';
+
+import { useWorkOrderDescription } from '../utils-sidesheet/useWorkOrderDescription';
+
+type WorkOrderDescriptionProps = {
+  workOrderId: string;
+};
+
+export const WorkOrderDescription = (props: WorkOrderDescriptionProps): JSX.Element => {
+  const { workOrderId } = props;
+
+  const { data, isFetching, error } = useWorkOrderDescription(workOrderId);
+
+  return (
+    <StyledTabContent>
+      <h3>Description</h3>
+
+      {isFetching && (
+        <NoResourceData>
+          <Progress.Circular />
+          <InfoText>Fetching description</InfoText>
+        </NoResourceData>
+      )}
+
+      {error && (
+        <NoResourceData>
+          <Icon
+            name="error_outlined"
+            size={40}
+            color={tokens.colors.interactive.primary__resting.hsla}
+          />
+          <InfoText>Failed to load description</InfoText>
+        </NoResourceData>
+      )}
+
+      {!isFetching && data && !data.description && (
+        <NoResourceData>
+          <Icon
+            name="info_circle"
+            size={40}
+            color={tokens.colors.interactive.primary__resting.hsla}
+          />
+          <InfoText>No description</InfoText>
+        </NoResourceData>
+      )}
+
+      {!isFetching && data && <StyledDescription>{data.description}</StyledDescription>}
+    </StyledTabContent>
+  );
+};
+
+const StyledDescription = styled.p`
+  padding: 0rem 1rem;
+`;
+
+export const NoResourceData = styled.div`
+  text-align: center;
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+export const InfoText = styled.h3`
+  margin: 0;
+`;
diff --git a/libs/workordersidesheet/src/lib/utils-sidesheet/useWorkOrderDescription.ts b/libs/workordersidesheet/src/lib/utils-sidesheet/useWorkOrderDescription.ts
new file mode 100644
index 000000000..135c5f3f5
--- /dev/null
+++ b/libs/workordersidesheet/src/lib/utils-sidesheet/useWorkOrderDescription.ts
@@ -0,0 +1,23 @@
+import { useContextId, useHttpClient } from '@cc-components/shared';
+import { useQuery } from '@tanstack/react-query';
+import { WorkOrderDescription } from '../types';
+
+export const useWorkOrderDescription = (workOrderId: string) => {
+  const client =  useHttpClient();
+  const contextId = useContextId();
+
+  const { data, isFetching, error } = useQuery<WorkOrderDescription, Error>({
+    queryKey: ['workOrder', workOrderId, 'description'],
+    queryFn: async({ signal }) => {
+        const response = await client.fetch(`/api/contexts/${contextId}/work-orders/${workOrderId}/description`, { signal });
+
+        if (!response.ok) {
+          throw new Error('Failed to get notifications', { cause: response });
+        }
+
+        return response.json();
+    },
+  });
+
+    return { data, isFetching, error };
+};