Merge pull request #214 from bcgov/ticdi-364

ticdi-364 changes

backend/src/provision/provision.service.ts

@@ -261,6 +261,7 @@ export class ProvisionService {
     // map 'docTypeProvisions' to include a variable called 'associated' which is true or false
     const managedProvisions: ManageDocTypeProvision[] = docTypeProvisions.map((docTypeProvision) => ({
       id: docTypeProvision.id,
+      provision_id: docTypeProvision.provision.id,
       type: docTypeProvision.type,
       provision_name: docTypeProvision.provision.provision_name,
       free_text: docTypeProvision.provision.free_text,

backend/src/types.ts

@@ -55,6 +55,7 @@ export type SearchResultsItem = {
 // type used by the frontend for displaying data in a table
 export type ManageDocTypeProvision = {
   id: number;
+  provision_id: number;
   type: string;
   provision_name: string;
   free_text: string;

frontend/src/app/App.css

@@ -16,6 +16,15 @@
   background-color: white !important;
 }
 
+.hoverUnderline {
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.hoverUnderline:hover {
+  text-decoration: underline;
+}
+
 .linkButton {
   text-decoration: underline;
   color: #1a5a96;

frontend/src/app/common/manage-doc-types.ts

@@ -1,9 +1,10 @@
 import config from '../../config';
-import { DocType, GroupMax, ProvisionGroup } from '../types/types';
+import { DocType, GroupMax, Provision, ProvisionGroup } from '../types/types';
 import * as api from './api';
 
 export type ManageDocTypeProvision = {
   id: number;
+  provision_id: number;
   type: string;
   provision_name: string;
   free_text: string;
@@ -58,6 +59,12 @@ export const getManageDocumentTypeProvisions = (document_type_id: number) => {
   return api.get<ManageDocTypeProvision[]>(getParameters);
 };
 
+export const getGlobalProvisions = () => {
+  const url = `${config.API_BASE_URL}/provision`;
+  const getParameters = api.generateApiParameters(url);
+  return api.get<Provision[]>(getParameters);
+};
+
 export const associateProvisionToDocType = (provision_id: number, document_type_id: number) => {
   const url = `${config.API_BASE_URL}/provision/associate-doc-type/${provision_id}/${document_type_id}`;
   const getParameters = api.generateApiParameters(url);

frontend/src/app/components/modal/manage-doc-types/GlobalProvisionModal.tsx

@@ -0,0 +1,49 @@
+import { FC } from 'react';
+import { Button, Modal } from 'react-bootstrap';
+import { Provision } from '../../../types/types';
+
+interface GlobalProvisionModalProps {
+  provision: Provision | null;
+  show: boolean;
+  onHide: () => void;
+}
+
+const GlobalProvisionModal: FC<GlobalProvisionModalProps> = ({ provision, show, onHide }) => {
+  return (
+    <Modal show={show} onHide={onHide} size="lg">
+      <Modal.Header closeButton>
+        <Modal.Title>Global Provision Info</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <label>Provision ID:</label>
+        <input className="form-control readonlyInput" readOnly value={provision?.id} />
+        <label style={{ marginTop: '5px' }}>Provision Name:</label>
+        <input className="form-control readonlyInput" readOnly value={provision?.provision_name} />
+        <label style={{ marginTop: '5px' }}>Category:</label>
+        <input className="form-control readonlyInput" readOnly value={provision?.category} />
+        <label style={{ marginTop: '5px' }}>Free Text:</label>
+        <textarea
+          className="form-control readonlyInput"
+          readOnly
+          value={provision?.free_text}
+          style={{ minHeight: '100px' }}
+        />
+        <label style={{ marginTop: '5px' }}>Help Text:</label>
+        <textarea
+          className="form-control readonlyInput"
+          readOnly
+          value={provision?.help_text}
+          style={{ minHeight: '100px' }}
+        />
+      </Modal.Body>
+
+      <Modal.Footer>
+        <Button variant="secondary" onClick={onHide}>
+          Close
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+};
+
+export default GlobalProvisionModal;

frontend/src/app/components/table/manage-doc-types/ManageDocumentProvisionsTable.tsx

@@ -2,21 +2,24 @@ import React, { FC, useEffect, useState } from 'react';
 import { DataTable } from '../common/DataTable';
 import { ColumnDef, Row, createColumnHelper } from '@tanstack/react-table';
 import { ManageDocTypeProvision } from '../../../common/manage-doc-types';
-import { ProvisionGroup } from '../../../types/types';
+import { Provision, ProvisionGroup } from '../../../types/types';
 import { DocumentProvisionSearchState } from '../../common/manage-doc-types/DocumentProvisionSearch';
+import { Modal } from 'react-bootstrap';
 
 interface ManageDocumentProvisionsTableProps {
   provisions: ManageDocTypeProvision[] | undefined;
   provisionGroups: ProvisionGroup[] | undefined;
   searchState: DocumentProvisionSearchState;
   onUpdate: (manageDocTypeProvisions: ManageDocTypeProvision[]) => void;
+  openModal: (provision_id: number) => void;
 }
 
 const ManageDocumentProvisionsTable: React.FC<ManageDocumentProvisionsTableProps> = ({
   provisions,
   provisionGroups,
   searchState,
   onUpdate,
+  openModal,
 }) => {
   const [allProvisions, setAllProvisions] = useState<ManageDocTypeProvision[]>([]);
   const [filteredProvisions, setFilteredProvisions] = useState<ManageDocTypeProvision[]>([]);
@@ -169,15 +172,28 @@ const ManageDocumentProvisionsTable: React.FC<ManageDocumentProvisionsTableProps
     onUpdate(allProvisions);
   };
 
+  const openGPModal = (provision_id: number) => {
+    openModal(provision_id);
+  };
+
   const columnHelper = createColumnHelper<ManageDocTypeProvision>();
 
   const columns: ColumnDef<ManageDocTypeProvision, any>[] = [
-    columnHelper.accessor('id', {
+    columnHelper.accessor('provision_id', {
       id: 'id',
-      cell: (info) => <input value={info.getValue()} className="form-control readonlyInput" readOnly />,
+      cell: (info) => (
+        <>
+          <input
+            value={info.getValue()}
+            className="form-control readonlyInput hoverUnderline"
+            readOnly
+            onClick={() => openGPModal(info.getValue())}
+          />
+        </>
+      ),
       header: () => 'ID',
       enableSorting: true,
-      meta: { customCss: { width: '5%' } },
+      meta: { customCss: { width: '8%' } },
     }),
     columnHelper.accessor('type', {
       id: 'type',
@@ -261,7 +277,7 @@ const ManageDocumentProvisionsTable: React.FC<ManageDocumentProvisionsTableProps
       ),
       header: () => 'Free Text',
       enableSorting: true,
-      meta: { customCss: { width: '10%' } },
+      meta: { customCss: { width: '8%' } },
     }),
     columnHelper.accessor('category', {
       id: 'category',

frontend/src/app/components/table/manage-provisions/ManageProvisionsTable.tsx

@@ -27,6 +27,7 @@ const ManageProvisionsTable: React.FC<ManageProvisionsTableProps> = ({
     if (provisions) {
       const sortedData = basicSort(provisions);
       setAllProvisions(sortedData);
+      console.log(provisions[0]);
     }
     if (variables) {
       setAllVariables(variables);
@@ -38,8 +39,6 @@ const ManageProvisionsTable: React.FC<ManageProvisionsTableProps> = ({
     sortedData.sort((a, b) => {
       if (a.active_flag === false && b.active_flag === true) return 1;
       if (a.active_flag === true && b.active_flag === false) return -1;
-      if (a.provision_group < b.provision_group) return -1;
-      if (a.provision_group > b.provision_group) return 1;
       return a.provision_name.localeCompare(b.provision_name);
     });
     return sortedData;

frontend/src/app/content/pages/ManageDocumentsPage.tsx

@@ -1,13 +1,14 @@
-import { FC, useCallback, useEffect, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { Button, Col, Row } from 'react-bootstrap';
-import { DocType, ProvisionGroup } from '../../types/types';
+import { DocType, Provision, ProvisionGroup } from '../../types/types';
 import { getDocumentTypes, getGroupMaxByDocTypeId } from '../../common/report';
 import ManageDocTypesTable from '../../components/table/manage-doc-types/ManageDocTypesTable';
 import AddDocTypeModal from '../../components/modal/manage-doc-types/AddDocTypeModal';
 import RemoveDocTypeModal from '../../components/modal/manage-doc-types/RemoveDocTypeModal';
 import {
   ManageDocTypeProvision,
   addDocType,
+  getGlobalProvisions,
   getManageDocumentTypeProvisions,
   removeDocType,
   updateManageDocTypeProvisions,
@@ -21,6 +22,7 @@ import DocumentProvisionSearch, {
 import { useDispatch, useSelector } from 'react-redux';
 import { RootState } from '../../store/store';
 import { setDocType } from '../../store/reducers/docTypeSlice';
+import GlobalProvisionModal from '../../components/modal/manage-doc-types/GlobalProvisionModal';
 
 const ManageDocumentsPage: FC = () => {
   const [loading, setLoading] = useState<boolean>(false);
@@ -29,6 +31,9 @@ const ManageDocumentsPage: FC = () => {
   const [allDocTypes, setAllDocTypes] = useState<DocType[]>([]);
   const [provisionGroups, setProvisionGroups] = useState<ProvisionGroup[]>([]);
   const [provisions, setProvisions] = useState<ManageDocTypeProvision[]>([]);
+  const [globalProvisions, setGlobalProvisions] = useState<Provision[]>([]);
+  const [selectedGlobalProvision, setSelectedGlobalProvision] = useState<Provision | null>(null);
+  const [showGlobalProvisionModal, setShowGlobalProvisionModal] = useState<boolean>(false);
 
   const [showAddDocTypeModal, setShowAddDocTypeModal] = useState<boolean>(false);
   const [showRemoveDocTypeModal, setShowRemoveDocTypeModal] = useState<boolean>(false);
@@ -74,6 +79,8 @@ const ManageDocumentsPage: FC = () => {
         setProvisionGroups(groupData);
         const provisionData = await getManageDocumentTypeProvisions(selectedDocType.id);
         setProvisions(provisionData);
+        const globalProvisions = await getGlobalProvisions();
+        setGlobalProvisions(globalProvisions);
       } else {
         setProvisionGroups([]);
         setProvisions([]);
@@ -187,6 +194,15 @@ const ManageDocumentsPage: FC = () => {
     setSearchState(searchState);
   };
 
+  const openGlobalProvisionModal = (provision_id: number) => {
+    console.log('openGlobalProvisionModal');
+    const p = globalProvisions?.find((p) => p.id === provision_id) || null;
+    console.log(provision_id);
+    console.log(p);
+    setSelectedGlobalProvision(p);
+    setShowGlobalProvisionModal(true);
+  };
+
   return (
     <>
       {showMain && (
@@ -246,6 +262,7 @@ const ManageDocumentsPage: FC = () => {
             provisionGroups={provisionGroups}
             searchState={searchState}
             onUpdate={updateProvisionsState}
+            openModal={openGlobalProvisionModal}
           />
           {/** ID - Type - Group - Seq - Max - Provision Name - Free Text - Category - Associated */}
           <EditProvisionGroupsModal
@@ -269,6 +286,13 @@ const ManageDocumentsPage: FC = () => {
               Save
             </Button>
           </Col>
+          {showGlobalProvisionModal && (
+            <GlobalProvisionModal
+              show={showGlobalProvisionModal}
+              onHide={() => setShowGlobalProvisionModal(false)}
+              provision={selectedGlobalProvision}
+            />
+          )}
         </>
       )}
     </>

frontend/src/app/types/types.ts

@@ -210,18 +210,17 @@ export type GroupMax = {
 };
 
 export type Provision = {
-  type: string;
-  provision_group: number;
-  max: number;
-  provision_name: string;
-  free_text: string;
-  category: string;
   active_flag: boolean;
-  edit: any; // remove from route
+  category: string;
+  create_timestamp: string;
+  create_userid: string;
+  free_text: string;
   help_text: string;
-  sequence_value: number;
   id: number;
-  document_type_ids: number[]; //
+  is_deleted: boolean;
+  provision_name: string;
+  update_timestamp: string;
+  update_userid: string;
 };
 
 export type Variable = {