Merge pull request #156 from bcgov/TICDI-319

Edit template
bcgov · Apr 24, 2024 · a4e72b9 · a4e72b9
2 parents 731c038 + 5f4bc5e
commit a4e72b9
Show file tree

Hide file tree

Showing 7 changed files with 177 additions and 2 deletions.
diff --git a/backend/src/admin/admin.controller.ts b/backend/src/admin/admin.controller.ts
@@ -57,6 +57,22 @@ export class AdminController {
     });
   }
 
+  @Get('update-template/:id/:documentTypeId/:documentNo/:documentName')
+  async upddateTemplate(
+    @User() user: IdirObject,
+    @Param('id') id: number,
+    @Param('document_type_id') document_type_id: number,
+    @Param('documentNo') documentNo: number,
+    @Param('documentName') documentName: string
+  ){
+   return this.adminService.updateTemplate({
+    id: id,
+    documentNo: documentNo,
+    documentName: documentName,
+    document_type_id: document_type_id,
+   });
+  }
+
   @Get('preview-template/:id')
   async previewTemplate(@Param('id') id: number, @Res() res) {
     try {

diff --git a/backend/src/admin/admin.service.ts b/backend/src/admin/admin.service.ts
@@ -40,6 +40,10 @@ export class AdminService {
     return this.documentTemplateService.remove(document_type_id, id);
   }
 
+  updateTemplate(data: { id: number; documentNo: number; documentName: string; document_type_id: number }): Promise<any> {
+    return this.documentTemplateService.updateTemplate(data);
+  }
+
   async uploadTemplate(
     data: {
       document_type_id: number;

diff --git a/backend/src/document_template/document_template.service.ts b/backend/src/document_template/document_template.service.ts
@@ -65,6 +65,11 @@ export class DocumentTemplateService {
     return activatedTemplate;
   }
 
+  async updateTemplate(data:{id: number; documentNo: number; documentName: string; document_type_id: number }): Promise<any>{
+    const updatedTemplate = await this.documentTemplateRepository.update({ id: data.id }, { file_name: data.documentName, template_version: data.documentNo});
+    return updatedTemplate
+  }
+
   async checkForActiveTemplates(data: { id: number; update_userid: string; document_type_id: number }): Promise<any> {
     const allTemplates = await this.documentTemplateRepository
       .createQueryBuilder('documentTemplate')

diff --git a/frontend/src/app/common/manage-templates.ts b/frontend/src/app/common/manage-templates.ts
@@ -93,3 +93,9 @@ export const uploadTemplate = async (formData: FormData): Promise<void> => {
   const postParameters = api.generateApiParameters(url, formData);
   await api.post<{ message: string }>(postParameters);
 };
+
+export const editTemplate = async (id: number, documentTypeId: number, documentNo: number, documentName: string): Promise<void> => {
+  const url = `${config.API_BASE_URL}/admin/update-template/${id}/${documentTypeId}/${documentNo}/${documentName}`;
+  const getParameters = api.generateApiParameters(url);
+  await api.get<void>(getParameters);
+}
diff --git a/frontend/src/app/components/modal/manage-templates/EditTemplateModal.tsx b/frontend/src/app/components/modal/manage-templates/EditTemplateModal.tsx
@@ -0,0 +1,111 @@
+import { FC, useState } from 'react';
+import Modal from 'react-bootstrap/Modal';
+import { editTemplate, uploadTemplate } from '../../../common/manage-templates';
+import { Button } from 'react-bootstrap';
+
+type EditTemplateModalProps = {
+    show: boolean;
+    documentName: string;
+    documentId: number;
+    documentVersion: number;
+    documentTypeId: number
+    onHide: () => void;
+    onUpload: () => void;
+};
+
+const EditTemplateModal: FC<EditTemplateModalProps> = ({
+    show,
+    documentName,
+    documentId,
+    documentVersion,
+    documentTypeId,
+    onHide,
+    onUpload,
+}) => {
+    const [error, setError] = useState('');
+    const [showError, setShowError] = useState(false);
+    const [documentNameText, setDocumentNameText] = useState<string>(documentName);
+    const [documentVersionText, setDocumentVersionText] = useState<string | number>(documentVersion);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+
+    const editButtonHandler = async () => {
+        if (!documentNameText || !documentVersionText) {
+            setError('Fields cannot be empty');
+            setShowError(true);
+            return;
+        }
+        try {
+            setIsLoading(true);
+            setShowError(false);
+            await editTemplate(documentId, documentTypeId, +documentVersionText, documentNameText);
+        } catch (error) {
+            setError('Error updating templete');
+            setShowError(true);
+            console.log(error);
+        } finally {
+            setIsLoading(false);
+            onUpload();
+        }
+    };
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
+        if (value === '') {
+            setDocumentVersionText('');
+        } else {
+            setDocumentVersionText(+value);
+        }
+    };
+
+    return (
+        <Modal show={show} onHide={onHide} size="lg">
+            <Modal.Header>
+                <Modal.Title>Edit Template</Modal.Title>
+                <Button
+                    variant="none"
+                    onClick={onHide}
+                    style={{
+                        marginLeft: 'auto',
+                        border: 'none',
+                        backgroundColor: 'transparent',
+                        color: 'black',
+                    }}
+                >
+                    &times;
+                </Button>
+            </Modal.Header>
+            <Modal.Body>
+
+                <div style={{ margin: '10px' }}>
+                    <label style={{ fontWeight: 'bold', marginRight: '10px' }}>Doc No.</label>
+                    <input
+                        type="text"
+                        value={documentVersionText}
+                        onChange={handleChange}
+                        placeholder="Document Number"
+                        style={{ width: '500px' }}
+                    />
+                </div>
+                <div style={{ margin: '10px' }}>
+                    <label style={{ fontWeight: 'bold', marginRight: '10px' }}>Template Name:</label>
+                    <input
+                        type="text"
+                        value={documentNameText}
+                        onChange={(e) => setDocumentNameText(e.target.value)}
+                        placeholder="Template Name"
+                        style={{ width: '500px' }}
+                    />
+                </div>
+                {showError && <div className="alert alert-danger">{error}</div>}
+            </Modal.Body>
+            <Modal.Footer>
+                <Button variant="primary" onClick={editButtonHandler} disabled={(documentName == documentNameText) && (documentVersion == documentVersionText)}>
+                    Save
+                </Button>
+                <Button variant="secondary" onClick={onHide} >
+                    Cancel
+                </Button>
+            </Modal.Footer>
+        </Modal>
+    );
+};
+export default EditTemplateModal;
diff --git a/frontend/src/app/components/table/manage-templates/TemplateInfoTable.tsx b/frontend/src/app/components/table/manage-templates/TemplateInfoTable.tsx
@@ -5,6 +5,7 @@ import { activateTemplate, downloadTemplate, getTemplatesInfo, previewTemplate }
 import { DocType, TemplateInfo } from '../../../types/types';
 import { Button } from 'react-bootstrap';
 import PreviewTemplateModal from '../../modal/admin/manage-templates/PreviewTemplateModal';
+import EditTemplateModal from '../../modal/manage-templates/EditTemplateModal';
 
 interface TemplateInfoTableProps {
   documentType: DocType;
@@ -18,7 +19,13 @@ const TemplateInfoTable: React.FC<TemplateInfoTableProps> = ({ documentType, ref
   const [loading, setLoading] = useState<boolean>(false);
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [iframeSrcBlob, setIframeSrcBlob] = useState<Blob | null>(null);
-
+  const [isEditModalOpen, setisEditModalOpen] = useState<boolean>(false);
+  const [documentId, setDocumentId] = useState<number>(10);
+  const [documentName, setDocumentName] = useState<string>('');
+  const [documentVersion, setDocumentVersion] = useState<number>(10);
+  const [isTemplateUpdated, setTemplateUpdated] = useState<boolean>(false);
+  //]
+  //
   useEffect(() => {
     const fetchData = async () => {
       const data = await getTemplatesInfo(documentType.id);
@@ -31,7 +38,7 @@ const TemplateInfoTable: React.FC<TemplateInfoTableProps> = ({ documentType, ref
     };
 
     fetchData();
-  }, [documentType, refreshVersion]);
+  }, [documentType, refreshVersion, isTemplateUpdated]);
 
   const activeRadioHandler = async (id: number) => {
     try {
@@ -79,11 +86,24 @@ const TemplateInfoTable: React.FC<TemplateInfoTableProps> = ({ documentType, ref
     }
   };
 
+  const handleEditTemplate = async (id: number, fileName: string, version: number) => {
+    setLoading(true);
+    setDocumentId(id);
+    setDocumentName(fileName);
+    setDocumentVersion(version);
+    setisEditModalOpen(true);
+  };
+
   // this opens a modal which is handled on the ManageTemplatesPage
   const handleRemoveButton = (id: number) => {
     handleRemove(id);
   };
 
+  const onTemplateUpdated = () => {
+    setTemplateUpdated(!isTemplateUpdated);
+    setisEditModalOpen(false);
+  }
+
   const columnHelper = createColumnHelper<TemplateInfo>();
 
   const columns: ColumnDef<TemplateInfo, any>[] = [
@@ -149,6 +169,17 @@ const TemplateInfoTable: React.FC<TemplateInfoTableProps> = ({ documentType, ref
       enableSorting: false,
       meta: { customCss: { width: '12%' } },
     }),
+    columnHelper.accessor('edit', {
+      id: 'edit',
+      cell: (info) => (
+        <Button variant="primary" onClick={() => handleEditTemplate(info.row.original.id, info.row.original.file_name, info.row.original.template_version)}>
+          Edit Doc
+        </Button>
+      ),
+      header: () => null,
+      enableSorting: false,
+      meta: { customCss: { width: '11%' } },
+    }),
     columnHelper.accessor('remove', {
       id: 'remove',
       cell: (info) => (
@@ -173,6 +204,7 @@ const TemplateInfoTable: React.FC<TemplateInfoTableProps> = ({ documentType, ref
 
 
   return <>
+    {isEditModalOpen && <EditTemplateModal show={isEditModalOpen} documentTypeId={documentType.id} documentName={documentName} documentId={documentId} documentVersion={documentVersion} onHide={() => setisEditModalOpen(false)} onUpload={onTemplateUpdated} />}
     {isOpen && <PreviewTemplateModal isOpen={isOpen} toggleModal={toggleModal} iframeSrcBlob={iframeSrcBlob} />}
     <DataTable
       columns={columns}

diff --git a/frontend/src/app/types/types.ts b/frontend/src/app/types/types.ts
@@ -199,6 +199,7 @@ export type TemplateInfo = {
   view: any; // remove from route
   remove: any; // remove from route
   preview: any; // remove from route
+  edit: any;
   id: number;
 };