Feat/delete model (#319)

* feat: Delete model functionallity * chore: Populate outcrop in model table correct. Refactor model table component. Bump eds components to eliminate warnings. * chore: Remove console.logs.
equinor · Sep 17, 2024 · 2610add · 2610add
1 parent 4a172c0
commit 2610add
Show file tree

Hide file tree

Showing 8 changed files with 117 additions and 116 deletions.
diff --git a/package.json b/package.json
@@ -5,8 +5,8 @@
   "dependencies": {
     "@azure/msal-browser": "^3.23.0",
     "@azure/msal-react": "^2.0.22",
-    "@equinor/eds-core-react": "0.41.4",
-    "@equinor/eds-data-grid-react": "0.3.0",
+    "@equinor/eds-core-react": "0.41.5",
+    "@equinor/eds-data-grid-react": "0.6.2",
     "@equinor/eds-icons": "0.21.0",
     "@equinor/eds-tokens": "0.9.2",
     "@hookform/resolvers": "^3.3.2",

diff --git a/src/components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup.tsx b/src/components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup.tsx
@@ -65,8 +65,6 @@ export const OutcropAnalogueGroup = ({
         requestBody: postRequestBody,
       });
       if (rowUpload.success) handleOutcropDialog();
-    } else {
-      console.log('Can not add');
     }
   };
 

diff --git a/src/features/ModelTable/ModelTable.tsx b/src/features/ModelTable/ModelTable.tsx
@@ -7,10 +7,7 @@ import { useQuery } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 import {
   AnalogueModelsService,
-  CountryDto,
-  FieldDto,
   OpenAPI,
-  StratColumnDto,
   StratigraphicGroupDto,
   StratUnitDto,
 } from '../../api/generated';
@@ -41,52 +38,6 @@ export const ModelTable = () => {
 
   if (isLoading || !data?.success) return <p>Loading...</p>;
 
-  const getRowCountries = (stratGroupList: StratigraphicGroupDto[]) => {
-    const countryList: CountryDto[] = [];
-
-    if (stratGroupList.length > 0) {
-      stratGroupList.forEach((i) => {
-        if (
-          countryList.filter((item) => item.countryId === i.country.countryId)
-            .length <= 0
-        )
-          countryList.push(i.country);
-      });
-    }
-    return countryList;
-  };
-
-  const getRowField = (stratGroupList: StratigraphicGroupDto[]) => {
-    const fieldList: FieldDto[] = [];
-
-    if (stratGroupList.length > 0) {
-      stratGroupList.forEach((i) => {
-        if (
-          fieldList.filter((item) => item.fieldId === i.field.fieldId).length <=
-          0
-        )
-          fieldList.push(i.field);
-      });
-    }
-    return fieldList;
-  };
-
-  const getRowStratCol = (stratGroupList: StratigraphicGroupDto[]) => {
-    const stratColList: StratColumnDto[] = [];
-
-    if (stratGroupList.length > 0) {
-      stratGroupList.forEach((i) => {
-        if (
-          stratColList.filter(
-            (item) => item.stratColumnId === i.stratColumn.stratColumnId,
-          ).length <= 0
-        )
-          stratColList.push(i.stratColumn);
-      });
-    }
-    return stratColList;
-  };
-
   const getRowGroup = (stratGroupList: StratigraphicGroupDto[]) => {
     const groupList: StratUnitDto[] = [];
 
@@ -145,64 +96,60 @@ export const ModelTable = () => {
         columns={[
           { accessorKey: 'name', header: 'Model name', id: 'name' },
           {
-            accessorKey: 'outcrops',
             id: 'outcrops',
             header: 'Outcrop',
             enableColumnFilter: false,
             size: 100,
             cell: ({ row }) => (
               <Styled.List>
-                {row.original.outcrops.length > 0 ??
-                  row.original.outcrops.map((a) => (
-                    <p key={a.outcropId}>{a.name + ', '}</p>
-                  ))}
+                {row.original.outcrops.map((a) => (
+                  <p key={a.outcropId}>{a.name + ', '}</p>
+                ))}
               </Styled.List>
             ),
           },
           {
-            accessorKey: 'country',
             id: 'country',
             header: 'Country',
             enableColumnFilter: false,
             size: 120,
             cell: ({ row }) => (
               <Styled.List>
-                {getRowCountries(row.original.stratigraphicGroups).map((i) => (
-                  <p key={i.countryId}>{i.identifier}, </p>
+                {row.original.stratigraphicGroups.map((i) => (
+                  <p key={i.country.countryId}>{i.country.identifier}, </p>
                 ))}
               </Styled.List>
             ),
           },
           {
-            accessorKey: 'field',
             id: 'field',
             header: 'Field',
             enableColumnFilter: false,
             size: 120,
             cell: ({ row }) => (
               <Styled.List>
-                {getRowField(row.original.stratigraphicGroups).map((i) => (
-                  <p key={i.fieldId}>{i.identifier}, </p>
+                {row.original.stratigraphicGroups.map((i) => (
+                  <p key={i.field.fieldId}>{i.field.identifier}, </p>
                 ))}
               </Styled.List>
             ),
           },
           {
-            accessorKey: 'stratigraphicColumn',
             id: 'stratigraphicColumn',
             header: 'Stratigraphic column',
             enableColumnFilter: false,
             size: 230,
             cell: ({ row }) => (
               <Styled.List>
-                {getRowStratCol(row.original.stratigraphicGroups).map((i) => (
-                  <p key={i.stratColumnId}>{i.identifier}, </p>
+                {row.original.stratigraphicGroups.map((i) => (
+                  <p key={i.stratColumn.stratColumnId}>
+                    {i.stratColumn.identifier},{' '}
+                  </p>
                 ))}
               </Styled.List>
             ),
           },
           {
-            accessorKey: 'group',
             id: 'group',
             header: 'Level 1 (group)',
             enableColumnFilter: false,
@@ -227,7 +174,6 @@ export const ModelTable = () => {
           },
 
           {
-            accessorKey: 'navigate',
             header: 'Actions',
             id: 'navigate',
             enableColumnFilter: false,

diff --git a/src/features/ModelView/DeleteButton/DeleteModel.styled.ts b/src/features/ModelView/DeleteButton/DeleteModel.styled.ts
@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { spacings } from '../../../tokens/spacings';
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${spacings.MEDIUM};
+
+  > button {
+    width: fit-content;
+  }
+`;
diff --git a/src/features/ModelView/DeleteButton/DeleteModel.tsx b/src/features/ModelView/DeleteButton/DeleteModel.tsx
@@ -0,0 +1,59 @@
+import { Button, Dialog, Typography } from '@equinor/eds-core-react';
+import { useMutation } from '@tanstack/react-query';
+import { useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { AnalogueModelsService } from '../../../api/generated';
+import { queryClient } from '../../../auth/queryClient';
+import * as Styled from './DeleteModel.styled';
+
+export const DeleteModel = () => {
+  const [open, setOpen] = useState<boolean>(false);
+  const { modelId } = useParams();
+  const navigate = useNavigate();
+
+  const deleteModel = useMutation({
+    mutationFn: ({ id }: { id: string }) => {
+      return AnalogueModelsService.deleteApiAnalogueModels(id);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['analogue-model'] });
+      navigate('/');
+    },
+  });
+
+  const HandleModelDelete = async () => {
+    if (modelId) {
+      const res = await deleteModel.mutateAsync({
+        id: modelId,
+      });
+      return res;
+    }
+  };
+
+  return (
+    <Styled.Wrapper>
+      <Typography variant="h3">Delete model</Typography>
+      <Typography variant="body_long">
+        This will delete the model along with all related cases and results.
+      </Typography>
+      <Button onClick={() => setOpen(!open)} color="danger">
+        Delete
+      </Button>
+
+      <Dialog open={open}>
+        <Dialog.Header>DELETE</Dialog.Header>
+        <Dialog.Content>
+          <Typography>Are you sure you want to delete the model?</Typography>
+        </Dialog.Content>
+        <Dialog.Actions>
+          <Button variant="outlined" onClick={() => setOpen(!open)}>
+            Cancel
+          </Button>
+          <Button color="danger" onClick={HandleModelDelete}>
+            Delete
+          </Button>
+        </Dialog.Actions>
+      </Dialog>
+    </Styled.Wrapper>
+  );
+};
diff --git a/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.tsx b/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.tsx
@@ -107,7 +107,6 @@ export const ModelNavigationBar = () => {
 
         <Styled.SidebarLink
           disabled
-          isExpanded
           label={objectItems.label}
           icon={objectItems.icon}
           onClick={() => {

diff --git a/src/features/ModelView/ModelView.tsx b/src/features/ModelView/ModelView.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { CoordinatesDialog } from '../../components/AreaCoordinates/CoordinatesDialog/CoordinatesDialog';
 import { ImageView } from '../../components/ImageView/ImageView';
 import { ModelMetadataView } from '../../features/ModelView/ModelMetadataView/ModelMetadataView';
+import { DeleteModel } from './DeleteButton/DeleteModel';
 import { ModelAreaCoordinates } from './ModelAreaCoordinates/ModelAreaCoordinates';
 import { ModelFilesView } from './ModelFilesView/ModelFilesView';
 import * as Styled from './ModelView.styled';
@@ -21,6 +22,7 @@ export const ModelView = () => {
           <ModelMetadataView />
           <ModelAreaCoordinates toggleOpen={toggleOpen}></ModelAreaCoordinates>
           <ModelFilesView />
+          <DeleteModel />
         </Styled.InnerMetadataWrapper>
         <ImageView
           text="Model placeholder image"