feat: [contracts] add delete template

code4romania · Oct 1, 2024 · 5df539c · 5df539c
1 parent 9598f7b
commit 5df539c
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 36 deletions.
diff --git a/frontend/src/assets/locales/ro/translation.json b/frontend/src/assets/locales/ro/translation.json
@@ -1154,8 +1154,10 @@
     "edit_title": "Editează template",
     "success_add": "Template-ul a fost adaugat!",
     "success_edit": "Template-ul a fost actualizat!",
+    "success_delete": "Template-ul a fost eliminat!",
     "error_add": "Eroare la adaugarea template-ului!",
     "error_edit": "Eroare la actualizarea template-ului!",
+    "error_delete": "Eroare la eliminarea template-ului!",
     "subheading": {
       "p1": "Acest template a fost realizat respectând normele din domeniu.",
       "p1_link": "Află mai multe",
@@ -1180,6 +1182,11 @@
         "download_all": "Descarcă toate"
       }
     },
+    "delete_modal": {
+      "title": "Confirmă eliminarea template-ului",
+      "description": "Ești sigur că vrei să elimini template-ul?",
+      "confirm_btn_label": "Da, elimină"
+    },
     "tooltip": "Datele contractului (Numărul, perioada contractului și data întemeierii) se completează în momentul atribuirii contractului către unul sau mai mulți voluntari.",
     "template_name": "Numele template-ului",
     "organization": {
@@ -1352,4 +1359,4 @@
     "clear": "Șterge",
     "apply_all": "Aplică pentru toate"
   }
-}
+}
diff --git a/frontend/src/components/DocumentTemplatesTable.tsx b/frontend/src/components/DocumentTemplatesTable.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import CardBody from './CardBody';
 import DataTableComponent from './DataTableComponent';
 import Card from '../layouts/CardLayout';
 import CardHeader from './CardHeader';
 import { IDocumentTemplateListItem } from '../common/interfaces/template.interface';
-import { useDocumentTemplatesQuery } from '../services/documents-templates/documents-templates.service';
+import { useDeleteDocumentTemplateMutation, useDocumentTemplatesQuery } from '../services/documents-templates/documents-templates.service';
 import { OrderDirection } from '../common/enums/order-direction.enum';
 import { format } from 'date-fns';
 import { SortOrder, TableColumn } from 'react-data-table-component';
@@ -14,6 +14,8 @@ import { ArrowDownTrayIcon, EyeIcon, PencilIcon, PlusIcon, TrashIcon } from '@he
 import Popover from './Popover';
 import { Link, useNavigate } from 'react-router-dom';
 import Button from './Button';
+import ConfirmationModal from './ConfirmationModal';
+import { useErrorToast, useSuccessToast } from '../hooks/useToast';
 
 const createArchiveRoute = (name: string) => `/actions-archive?author=${name.split(' ').join('+')}`;
 
@@ -64,14 +66,40 @@ const DocumentTemplatesTableHeader = [
 export const DocumentTemplatesTable = ({ query, setQuery }: DocumentTemplatesProps) => {
 	const { t } = useTranslation(['doc_templates']);
 	const navigate = useNavigate();
+	const [selectedDeleteDocumentTemplate, setSelectedDeleteDocumentTemplate] = useState<IDocumentTemplateListItem | null>(null);
 
-	const { data: templates, isLoading: isLoadingDocumentTemplates } = useDocumentTemplatesQuery({
+	const { data: templates, isLoading: isLoadingDocumentTemplates, refetch } = useDocumentTemplatesQuery({
 		limit: 10,
 		page: 1,
 		orderBy: 'name',
 		orderDirection: OrderDirection.ASC,
 	});
 
+	const { mutate: deleteDocumentTemplate } = useDeleteDocumentTemplateMutation();
+
+	const handleDeleteDocumentTemplate = (template: IDocumentTemplateListItem) => {
+		setSelectedDeleteDocumentTemplate(template);
+	};
+
+	const handleCancelDelete = () => {
+		setSelectedDeleteDocumentTemplate(null);
+	};
+
+	const handleConfirmDelete = () => {
+		if (selectedDeleteDocumentTemplate) {
+			deleteDocumentTemplate(selectedDeleteDocumentTemplate?.id, {
+				onSuccess: () => {
+					setSelectedDeleteDocumentTemplate(null);
+					useSuccessToast(t('success_delete'));
+					refetch();
+				},
+				onError: () => {
+					useErrorToast(t('error_delete'));
+				},
+			});
+		}
+	};
+
 	// pagination
 	const onRowsPerPageChange = (limit: number) => {
 		setQuery(
@@ -125,7 +153,7 @@ export const DocumentTemplatesTable = ({ query, setQuery }: DocumentTemplatesPro
 			{
 				label: t('table.table_actions.delete'),
 				icon: <TrashIcon className="menu-icon" />,
-				onClick: () => { },
+				onClick: (row: IDocumentTemplateListItem) => { handleDeleteDocumentTemplate(row) },
 				alert: true,
 			},
 		];
@@ -152,38 +180,50 @@ export const DocumentTemplatesTable = ({ query, setQuery }: DocumentTemplatesPro
 	};
 
 	return (
-		<Card>
-			<CardHeader>
-				<h2>{t('table.title')}</h2>
-				<div className="flex gap-2 lg:gap-6">
-					<Button
-						label={t('table.table_header.download_all')}
-						className="btn-outline-secondary"
-						icon={<ArrowDownTrayIcon className="h-5 w-5" />}
-						onClick={() => { }}
-					/>
-					<Button
-						label={t('table.table_header.create')}
-						className="btn-primary"
-						icon={<PlusIcon className="h-5 w-5" />}
-						onClick={() => navigate('/documents/templates/create')}
+		<>
+			<Card>
+				<CardHeader>
+					<h2>{t('table.title')}</h2>
+					<div className="flex gap-2 lg:gap-6">
+						<Button
+							label={t('table.table_header.download_all')}
+							className="btn-outline-secondary"
+							icon={<ArrowDownTrayIcon className="h-5 w-5" />}
+							onClick={() => { }}
+						/>
+						<Button
+							label={t('table.table_header.create')}
+							className="btn-primary"
+							icon={<PlusIcon className="h-5 w-5" />}
+							onClick={() => navigate('/documents/templates/create')}
+						/>
+					</div>
+				</CardHeader>
+				<CardBody>
+					<DataTableComponent
+						columns={[...DocumentTemplatesTableHeader, buildDocumentTemplatesTableActions()]}
+						data={templates?.items}
+						loading={isLoadingDocumentTemplates}
+						pagination
+						paginationPerPage={10}
+						paginationTotalRows={templates?.items?.length}
+						paginationDefaultPage={query.page as number}
+						onChangeRowsPerPage={onRowsPerPageChange}
+						onChangePage={onChangePage}
+						onSort={onSort}
 					/>
-				</div>
-			</CardHeader>
-			<CardBody>
-				<DataTableComponent
-					columns={[...DocumentTemplatesTableHeader, buildDocumentTemplatesTableActions()]}
-					data={templates?.items}
-					loading={isLoadingDocumentTemplates}
-					pagination
-					paginationPerPage={10}
-					paginationTotalRows={templates?.items?.length}
-					paginationDefaultPage={query.page as number}
-					onChangeRowsPerPage={onRowsPerPageChange}
-					onChangePage={onChangePage}
-					onSort={onSort}
+				</CardBody>
+			</Card>
+			{selectedDeleteDocumentTemplate &&
+				<ConfirmationModal
+					onClose={handleCancelDelete}
+					onConfirm={handleConfirmDelete}
+					title={t('delete_modal.title')}
+					description={t('delete_modal.description')}
+					confirmBtnLabel={t('delete_modal.confirm_btn_label')}
+					confirmBtnClassName="btn-danger"
 				/>
-			</CardBody>
-		</Card>
+			}
+		</>
 	);
 };
diff --git a/frontend/src/services/documents-templates/documents-templates.api.ts b/frontend/src/services/documents-templates/documents-templates.api.ts
@@ -32,3 +32,7 @@ export const updateContractTemplate = (id: string, data: IAddContractTemplatePay
 export const getContractTemplate = (id: string) => {
   return API.get(`/documents/templates/${id}`).then((res) => res.data);
 };
+
+export const deleteContractTemplate = (id: string) => {
+  return API.delete(`/documents/templates/${id}`).then((res) => res.data);
+};
diff --git a/frontend/src/services/documents-templates/documents-templates.service.ts b/frontend/src/services/documents-templates/documents-templates.service.ts
@@ -1,6 +1,7 @@
 import { useMutation, useQuery } from 'react-query';
 import {
   addContractTemplate,
+  deleteContractTemplate,
   getContractTemplate,
   getTemplateById,
   getTemplates,
@@ -89,3 +90,12 @@ export const useDocumentTemplateByIdQuery = (id?: string) => {
     enabled: !!id,
   });
 };
+
+export const useDeleteDocumentTemplateMutation = () => {
+  return useMutation((id: string) => deleteContractTemplate(id), {
+    onError: (error) => {
+      console.log('⭕️ ERROR IN DELETE DOCUMENT TEMPLATE MUTATION ⭕️', error);
+      return Promise.resolve(error);
+    },
+  });
+};