Merge pull request #1211 from Chia-Network/refactor/projects-edit-delete

Refactor/projects edit delete
Chia-Network · Apr 23, 2024 · 876c0e7 · 876c0e7
2 parents baad1ab + c6ff5ad
commit 876c0e7
Show file tree

Hide file tree

Showing 20 changed files with 271 additions and 61 deletions.
diff --git a/src/renderer/api/cadt/v1/projects/projects.api.ts b/src/renderer/api/cadt/v1/projects/projects.api.ts
@@ -1,5 +1,5 @@
-import {cadtApi, projectsTag,} from "../";
-import {Project} from "@/schemas/Project.schema";
+import { cadtApi, projectsTag } from '../';
+import { Project } from '@/schemas/Project.schema';
 
 interface GetProjectsParams {
   page: number;
@@ -12,18 +12,22 @@ interface GetProjectParams {
   warehouseProjectId: string;
 }
 
+interface DeleteProjectParams {
+  warehouseProjectId: string;
+}
+
 interface GetProjectsResponse {
-  page: number,
-  pageCount: number,
-  data: Project[]
+  page: number;
+  pageCount: number;
+  data: Project[];
 }
 
 const projectsApi = cadtApi.injectEndpoints({
   endpoints: (builder) => ({
     getProjects: builder.query<GetProjectsResponse, GetProjectsParams>({
       query: ({ page, orgUid, search, order }: GetProjectsParams) => {
         // Initialize the params object with page and limit
-        const params: GetProjectsParams & {limit: number} = { page, limit: 10 };
+        const params: GetProjectsParams & { limit: number } = { page, limit: 10 };
 
         if (orgUid) {
           params.orgUid = orgUid;
@@ -43,20 +47,28 @@ const projectsApi = cadtApi.injectEndpoints({
           method: 'GET',
         };
       },
-      providesTags: (_response, _error, {orgUid}) => [{type: projectsTag, id: orgUid}],
+      providesTags: (_response, _error, { orgUid }) => [{ type: projectsTag, id: orgUid }],
     }),
+
     getProject: builder.query<Project, GetProjectParams>({
       query: ({ warehouseProjectId }: GetProjectParams) => ({
         url: `/v1/projects`,
         params: { warehouseProjectId },
         method: 'GET',
       }),
-      providesTags: (_response, _error, {warehouseProjectId}) => [{type: projectsTag, id: warehouseProjectId}],
+      providesTags: (_response, _error, { warehouseProjectId }) => [{ type: projectsTag, id: warehouseProjectId }],
+    }),
+
+    deleteProject: builder.mutation<any, DeleteProjectParams>({
+      query: ({ warehouseProjectId }: GetProjectParams) => ({
+        url: `/v1/projects`,
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
+        body: { warehouseProjectId },
+      }),
+      invalidatesTags: (_response, _error, { warehouseProjectId }) => [{ type: projectsTag, id: warehouseProjectId }],
     }),
-  })
+  }),
 });
 
-export const {
-  useGetProjectsQuery,
-  useGetProjectQuery
-} = projectsApi;
+export const { useGetProjectsQuery, useGetProjectQuery, useDeleteProjectMutation } = projectsApi;
diff --git a/src/renderer/api/cadt/v1/staging/staging.api.ts b/src/renderer/api/cadt/v1/staging/staging.api.ts
@@ -30,4 +30,7 @@ const stagingApi = cadtApi.injectEndpoints({
   }),
 });
 
+const invalidateStagingApiTag = stagingApi.util.invalidateTags;
+export { invalidateStagingApiTag };
+
 export const { useGetStagedProjectsQuery, useGetStagedUnitsQuery } = stagingApi;
diff --git a/src/renderer/api/cadt/v1/units/units.api.ts b/src/renderer/api/cadt/v1/units/units.api.ts
@@ -1,5 +1,5 @@
-import {cadtApi, unitsTag} from "../";
-import {Unit} from "@/schemas/Unit.schema";
+import { cadtApi, unitsTag } from '../';
+import { Unit } from '@/schemas/Unit.schema';
 
 interface GetUnitsParams {
   page: number;
@@ -13,18 +13,22 @@ interface GetUnitParams {
   warehouseUnitId: string;
 }
 
+interface DeleteUnitParams {
+  warehouseUnitId: string;
+}
+
 interface GetUnitsResponse {
-  page: number,
-  pageCount: number,
-  data: Unit[]
+  page: number;
+  pageCount: number;
+  data: Unit[];
 }
 
 const unitsApi = cadtApi.injectEndpoints({
   endpoints: (builder) => ({
     getUnits: builder.query<GetUnitsResponse, GetUnitsParams>({
       query: ({ page, orgUid, search, order, filter }: GetUnitsParams) => {
         // Initialize the params object with page and limit
-        const params: GetUnitsParams & {limit: number} = { page, limit: 10 };
+        const params: GetUnitsParams & { limit: number } = { page, limit: 10 };
 
         if (orgUid) {
           params.orgUid = orgUid;
@@ -48,20 +52,28 @@ const unitsApi = cadtApi.injectEndpoints({
           method: 'GET',
         };
       },
-      providesTags: (_response, _error, {orgUid}) => [{type: unitsTag, id: orgUid}],
+      providesTags: (_response, _error, { orgUid }) => [{ type: unitsTag, id: orgUid }],
     }),
+
     getUnit: builder.query<Unit, GetUnitParams>({
       query: ({ warehouseUnitId }: GetUnitParams) => ({
         url: `/v1/units`,
         params: { warehouseUnitId },
         method: 'GET',
       }),
-      providesTags: (_response, _error, {warehouseUnitId}) => [{type: unitsTag, id: warehouseUnitId}],
+      providesTags: (_response, _error, { warehouseUnitId }) => [{ type: unitsTag, id: warehouseUnitId }],
+    }),
+
+    deleteUnit: builder.mutation<any, DeleteUnitParams>({
+      query: ({ warehouseUnitId }: DeleteUnitParams) => ({
+        url: `/v1/units`,
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
+        body: { warehouseUnitId },
+      }),
+      invalidatesTags: (_response, _error, { warehouseUnitId }) => [{ type: unitsTag, id: warehouseUnitId }],
     }),
-  })
+  }),
 });
 
-export const {
-  useGetUnitsQuery,
-  useGetUnitQuery
-} = unitsApi;
+export const { useGetUnitsQuery, useGetUnitQuery, useDeleteUnitMutation } = unitsApi;
diff --git a/src/renderer/components/blocks/modals/ConfirmDeleteModal.tsx b/src/renderer/components/blocks/modals/ConfirmDeleteModal.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { Button, Modal } from '@/components';
+import { FormattedMessage } from 'react-intl';
+import { useDeleteProjectMutation, useDeleteUnitMutation } from '@/api';
+import { invalidateStagingApiTag } from '@/api/cadt/v1/staging/staging.api';
+import { stagedProjectsTag, stagedUnitsTag } from '@/api/cadt/v1';
+import { useDispatch } from 'react-redux';
+
+interface ConfirmDeleteModalProps {
+  type: 'project' | 'unit';
+  warehouseId: string;
+  onClose: () => void;
+}
+
+const ConfirmDeleteModal: React.FC<ConfirmDeleteModalProps> = ({
+  type,
+  warehouseId,
+  onClose,
+}: ConfirmDeleteModalProps) => {
+  const [triggerDeleteProject, { isLoading: projectDeletionLoading }] = useDeleteProjectMutation();
+  const [triggerDeleteUnit, { isLoading: unitDeletionLoading }] = useDeleteUnitMutation();
+  const dispatch = useDispatch();
+  const handleConfirm = async () => {
+    if (type === 'project') {
+      await triggerDeleteProject({ warehouseProjectId: warehouseId });
+      dispatch(invalidateStagingApiTag([stagedProjectsTag]));
+    } else {
+      await triggerDeleteUnit({ warehouseUnitId: warehouseId });
+      dispatch(invalidateStagingApiTag([stagedUnitsTag]));
+    }
+    onClose();
+  };
+
+  const handleClickClose = async () => {
+    onClose();
+  };
+
+  return (
+    <Modal show={true} onClose={onClose}>
+      <Modal.Header>
+        <FormattedMessage id="confirm-delete" />
+      </Modal.Header>
+      <Modal.Body>
+        <p>
+          <FormattedMessage id="this-action-cannot-be-undone" />
+        </p>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button color="gray" onClick={handleClickClose} disabled={projectDeletionLoading || unitDeletionLoading}>
+          <FormattedMessage id="cancel" />
+        </Button>
+        <Button
+          onClick={handleConfirm}
+          isProcessing={projectDeletionLoading || unitDeletionLoading}
+          disabled={projectDeletionLoading || unitDeletionLoading}
+        >
+          <FormattedMessage id="delete" />
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+};
+
+export { ConfirmDeleteModal };
diff --git a/src/renderer/components/blocks/modals/index.ts b/src/renderer/components/blocks/modals/index.ts
@@ -5,3 +5,4 @@ export * from './UnitModal';
 export * from './StagingDiffModal';
 export * from './UpsertProjectModal';
 export * from './UpsertUnitModal';
+export * from './ConfirmDeleteModal';
diff --git a/src/renderer/components/blocks/tables/ProjectsListTable.tsx b/src/renderer/components/blocks/tables/ProjectsListTable.tsx
@@ -1,12 +1,13 @@
 import React, { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { DebouncedFunc } from 'lodash';
-import { DataTable, PageCounter, Pagination, Tooltip } from '@/components';
+import {DataTable, PageCounter, Pagination, ProjectAndUnitActions, Tooltip} from '@/components';
 import { Project } from '@/schemas/Project.schema';
 import { Badge } from 'flowbite-react';
 
 interface TableProps {
   data: Project[];
+  isEditable: boolean;
   isLoading: boolean;
   currentPage: number;
   onPageChange: DebouncedFunc<(page: any) => void>;
@@ -19,6 +20,7 @@ interface TableProps {
 
 const ProjectsListTable: React.FC<TableProps> = ({
   data,
+  isEditable,
   isLoading,
   currentPage,
   onPageChange,
@@ -28,8 +30,17 @@ const ProjectsListTable: React.FC<TableProps> = ({
   totalPages,
   totalCount,
 }) => {
-  const columns = useMemo(
-    () => [
+  const columns = useMemo(() => {
+    const editColumn: any = [
+      {
+        title: '',
+        key: 'actionColumn',
+        ignoreChildEvents: true,
+        render: (row: Project) => <ProjectAndUnitActions type="project" warehouseId={row.warehouseProjectId} />,
+      },
+    ];
+
+    const staticColumns: any = [
       {
         title: <FormattedMessage id={'current-registry'} />,
         key: 'currentRegistry',
@@ -87,9 +98,10 @@ const ProjectsListTable: React.FC<TableProps> = ({
         title: <FormattedMessage id={'project-tags'} />,
         key: 'projectTags',
       },
-    ],
-    [],
-  );
+    ];
+
+    return isEditable ? editColumn.concat(staticColumns) : staticColumns;
+  }, [isEditable]);
 
   return (
     <div className="relative">

diff --git a/src/renderer/components/blocks/tables/UnitsListTable.tsx b/src/renderer/components/blocks/tables/UnitsListTable.tsx
@@ -1,12 +1,13 @@
 import React, { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { DebouncedFunc }from 'lodash'
-import { DataTable, PageCounter, Pagination } from '@/components';
+import { DebouncedFunc } from 'lodash';
+import { DataTable, PageCounter, Pagination, ProjectAndUnitActions } from '@/components';
 import { Unit } from '@/schemas/Unit.schema';
 
 interface TableProps {
   data: Unit[];
   isLoading: boolean;
+  isEditable: boolean;
   currentPage: number;
   onPageChange: DebouncedFunc<(page: any) => void>;
   setOrder?: (sort: string) => void;
@@ -19,6 +20,7 @@ interface TableProps {
 const UnitsListTable: React.FC<TableProps> = ({
   data,
   isLoading,
+  isEditable,
   currentPage,
   onPageChange,
   setOrder,
@@ -27,8 +29,17 @@ const UnitsListTable: React.FC<TableProps> = ({
   totalPages,
   totalCount,
 }) => {
-  const columns = useMemo(
-    () => [
+  const columns = useMemo(() => {
+    const editColumn: any = [
+      {
+        title: '',
+        key: 'actionColumn',
+        ignoreChildEvents: true,
+        render: (row: Unit) => <ProjectAndUnitActions type="unit" warehouseId={row.warehouseUnitId} />,
+      },
+    ];
+
+    const staticColumns: any = [
       {
         title: <FormattedMessage id={'unit-owner'} />,
         key: 'unitOwner',
@@ -74,9 +85,10 @@ const UnitsListTable: React.FC<TableProps> = ({
         title: <FormattedMessage id={'corresponding-adjustment-status'} />,
         key: 'correspondingAdjustmentStatus',
       },
-    ],
-    [],
-  );
+    ];
+
+    return isEditable ? editColumn.concat(staticColumns) : staticColumns;
+  }, [isEditable]);
 
   return (
     <div className="relative">

diff --git a/src/renderer/components/blocks/tabs/CommittedProjectsTab.tsx b/src/renderer/components/blocks/tabs/CommittedProjectsTab.tsx
@@ -50,6 +50,7 @@ const CommittedProjectsTab: React.FC<PageTabProps> = ({ orgUid, search, setIsLoa
       ) : (
         <ProjectsListTable
           data={projectsData?.data || []}
+          isEditable={true}
           isLoading={projectsLoading}
           currentPage={Number(currentPage)}
           onPageChange={handlePageChange}

diff --git a/src/renderer/components/blocks/tabs/CommittedUnitsTab.tsx b/src/renderer/components/blocks/tabs/CommittedUnitsTab.tsx
@@ -51,6 +51,7 @@ const CommittedUnitsTab: React.FC<PageTabProps> = ({ orgUid, search, setIsLoadin
         <UnitsListTable
           data={unitsData?.data || []}
           isLoading={unitsLoading}
+          isEditable={true}
           currentPage={Number(currentPage)}
           onRowClick={(row) => setUnitsModalActive(true, row.warehouseUnitId)}
           onPageChange={handlePageChange}