🎁 Heated-tags tab in HeatTrace app

libs/heattraceshared/src/lib/types/heatTraceHeatedTag.ts

@@ -0,0 +1,14 @@
+export type HeatTraceHeatedTag = {
+  heatTracingCableTagNo: string;
+  heatTracingCableTagId: string;
+  heatedTagNo: string;
+  heatedTagId: string;
+  register: string;
+  description: string;
+  mechanicalCompletionHandoverStatus?: string;
+  commissioningPackageNo?: string;
+  mechanicalCompletionPackageNo?: string;
+  commissioningPackageUrl?: string;
+  mechanicalCompletionUrl?: string;
+  tagUrl?: string;
+};

libs/heattraceshared/src/lib/types/index.ts

@@ -1,3 +1,4 @@
 export * from './heattrace';
 export * from './heatTraceChecklist';
 export * from './dcrEnum';
+export * from './heatTraceHeatedTag';

libs/heattracesidesheet/src/lib/ui-sidesheet/HeatedTagsTab.tsx

@@ -0,0 +1,22 @@
+import { TabTable } from '@cc-components/shared';
+import { heatedTagsColumns } from './heatedTagsColumns';
+import { HeatTraceHeatedTag } from '@cc-components/heattraceshared';
+
+type HeatedTagsTabProps = {
+  data: HeatTraceHeatedTag[] | undefined;
+  isFetching: boolean;
+  error: Error | null;
+};
+
+export const HeatedTagsTab = (props: HeatedTagsTabProps): JSX.Element => {
+  const { data, error, isFetching } = props;
+  return (
+    <TabTable
+      columns={heatedTagsColumns}
+      error={error}
+      isFetching={isFetching}
+      packages={data}
+      resourceName="Heated tags"
+    />
+  );
+};

libs/heattracesidesheet/src/lib/ui-sidesheet/HeattraceSidesheet.tsx

@@ -36,6 +36,8 @@ import { Icon, Tabs } from '@equinor/eds-core-react';
 import { useGetEleNetwork } from '../utils-sidesheet/useGetEleNetwork';
 import styled from 'styled-components';
 import { tokens } from '@equinor/eds-tokens';
+import { useGetHeatedTags } from '../utils-sidesheet/useGetHeatedTags';
+import { HeatedTagsTab } from './HeatedTagsTab';
 
 const viewerOptions = {
   statusResolver: (status: string) => {
@@ -79,6 +81,8 @@ const HeattraceSidesheetComponent = ({
 
   const { dataWorkorders, errorWorkorders, isLoadingWorkorders } = useGetWorkorders(id);
 
+  const { dataHeatedTags, errorHeatedTags, isLoadingHeatedTags } = useGetHeatedTags(id);
+
   const { dataChecklists, errorChecklists, isLoadingChecklists } =
     useGetHeatTraceChecklists(id);
 
@@ -139,6 +143,10 @@ const HeattraceSidesheetComponent = ({
         <StyledTabListWrapper>
           <StyledTabsList ref={ref}>
             <Tabs.Tab>Circuit diagram</Tabs.Tab>
+            <Tabs.Tab>
+              Heated tags
+              <TabTitle data={dataHeatedTags} isLoading={isLoadingHeatedTags} />
+            </Tabs.Tab>
             <Tabs.Tab>
               Work orders
               <TabTitle data={dataWorkorders} isLoading={isLoadingWorkorders} />
@@ -167,6 +175,13 @@ const HeattraceSidesheetComponent = ({
               }}
             />
           </StyledPanel>
+          <StyledPanel>
+            <HeatedTagsTab
+              error={errorHeatedTags}
+              isFetching={isLoadingHeatedTags}
+              data={dataHeatedTags}
+            />
+          </StyledPanel>
           <StyledPanel>
             <WorkorderTab
               error={errorWorkorders}

libs/heattracesidesheet/src/lib/ui-sidesheet/heatedTagsColumns.tsx

@@ -0,0 +1,50 @@
+import { ColDef, ICellRendererProps } from '@equinor/workspace-ag-grid';
+import { HeatTraceHeatedTag } from '@cc-components/heattraceshared';
+
+import { LinkCell } from '@cc-components/shared';
+
+export const heatedTagsColumns: ColDef<HeatTraceHeatedTag>[] = [
+  {
+    headerName: 'Tag No',
+    valueGetter: (pkg) => pkg.data?.heatedTagNo,
+    cellRenderer: (props: ICellRendererProps<HeatTraceHeatedTag>) => {
+      return <LinkCell url={props.data?.tagUrl ?? ''} urlText={props.value ?? ''} />;
+    },
+  },
+  {
+    headerName: 'Tag description',
+    valueGetter: (pkg) => pkg.data?.description,
+  },
+  {
+    headerName: 'Tag register',
+    valueGetter: (pkg) => pkg.data?.register,
+  },
+  {
+    headerName: 'Handover status',
+    valueGetter: (pkg) => pkg.data?.mechanicalCompletionHandoverStatus,
+  },
+  {
+    headerName: 'CommPkg',
+    valueGetter: (pkg) => pkg.data?.commissioningPackageNo,
+    cellRenderer: (props: ICellRendererProps<HeatTraceHeatedTag>) => {
+      return (
+        <LinkCell
+          url={props.data?.commissioningPackageUrl ?? ''}
+          urlText={props.value ?? ''}
+        />
+      );
+    },
+  },
+  {
+    headerName: 'McPkg',
+    valueGetter: (pkg) => pkg.data?.mechanicalCompletionPackageNo,
+    cellRenderer: (props: ICellRendererProps<HeatTraceHeatedTag>) => {
+      return (
+        <LinkCell
+          url={props.data?.mechanicalCompletionUrl ?? ''}
+          urlText={props.value ?? ''}
+        />
+      );
+    },
+  },
+];

libs/heattracesidesheet/src/lib/utils-sidesheet/useGetHeatedTags.ts

@@ -0,0 +1,28 @@
+import { useContextId, useHttpClient } from '@cc-components/shared';
+import { useQuery } from '@tanstack/react-query';
+import { HeatTraceHeatedTag } from '@cc-components/heattraceshared';
+
+export const useGetHeatedTags = (heatTraceCableId: string) => {
+  const client = useHttpClient();
+  const contextId = useContextId();
+
+  const { data, isLoading, error } = useQuery<HeatTraceHeatedTag[], Error>({
+    queryKey: ['heat-trace', heatTraceCableId, 'heated-tags'],
+    queryFn: async ({ signal }) => {
+      const response = await client.fetch(
+        `/api/contexts/${contextId}/heat-trace/${heatTraceCableId}/heated-tags`,
+        { signal }
+      );
+      if (!response.ok) {
+        throw new Error();
+      }
+      return response.json();
+    },
+  });
+
+  return {
+    dataHeatedTags: data,
+    isLoadingHeatedTags: isLoading,
+    errorHeatedTags: error,
+  };
+};