list item frontend

bcgov · Sep 6, 2024 · 82515ed · 82515ed
1 parent 03f8dc2
commit 82515ed
Show file tree

Hide file tree

Showing 6 changed files with 160 additions and 28 deletions.
diff --git a/frontend/src/app/components/modal/manage-provisions/AddProvisionModal.tsx b/frontend/src/app/components/modal/manage-provisions/AddProvisionModal.tsx
@@ -1,18 +1,21 @@
 import { useState } from 'react';
 import { ProvisionUpload } from '../../../types/types';
 import { Button, Col, Form, Modal, Spinner } from 'react-bootstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPlus, faMinus } from '@fortawesome/free-solid-svg-icons';
 
 interface AddProvisionModalProps {
   show: boolean;
-  addProvisionHandler: (provision: ProvisionUpload) => void;
+  addProvisionHandler: (provision: ProvisionUpload) => Promise<void>;
   onHide: () => void;
-  refreshTables: () => void;
 }
 
-const AddProvisionModal: React.FC<AddProvisionModalProps> = ({ show, addProvisionHandler, onHide, refreshTables }) => {
+const AddProvisionModal: React.FC<AddProvisionModalProps> = ({ show, addProvisionHandler, onHide }) => {
   const [loading, setLoading] = useState<boolean>(false);
   const [provisionName, setProvisionName] = useState<string>('');
   const [freeText, setFreeText] = useState<string>('');
+  const [listItems, setListItems] = useState<string[]>(['']);
+  const [listEnabled, setListEnabled] = useState<boolean>(false);
   const [helpText, setHelpText] = useState<string>('');
   const [category, setCategory] = useState<string>('');
 
@@ -32,19 +35,41 @@ const AddProvisionModal: React.FC<AddProvisionModalProps> = ({ show, addProvisio
     setCategory(e.target.value);
   };
 
-  const handleSaveButton = () => {
+  const handleListEnabledChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setListEnabled(e.target.checked);
+  };
+
+  const handleListItemChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, index: number) => {
+    const newListItems = [...listItems];
+    newListItems[index] = e.target.value;
+    setListItems(newListItems);
+  };
+
+  const handleAddListItem = () => {
+    setListItems([...listItems, '']);
+  };
+
+  const handleRemoveListItem = (index: number) => {
+    const newListItems = [...listItems];
+    newListItems.splice(index, 1);
+    setListItems(newListItems);
+  };
+
+  const handleSaveButton = async () => {
     try {
       setLoading(true);
 
       const provisionUpload: ProvisionUpload = {
         provision_name: provisionName,
         free_text: freeText,
+        list_items: listEnabled ? listItems : [],
+        list_enabled: listEnabled,
         help_text: helpText,
         category: category,
       };
-      addProvisionHandler(provisionUpload);
+
+      await addProvisionHandler(provisionUpload);
       onHide();
-      refreshTables();
     } catch (err) {
       console.log('Error adding provision');
       console.log(err);
@@ -81,15 +106,50 @@ const AddProvisionModal: React.FC<AddProvisionModalProps> = ({ show, addProvisio
             </Col>
           </Form.Group>
 
-          <Form.Group className="mb-3">
-            <Form.Label column sm="12">
-              Free Text
-            </Form.Label>
-            <Col sm="10">
-              <Form.Control as="textarea" rows={3} name="free_text" onChange={handleFreeTextChange} />
-            </Col>
+          <Form.Group className="mb-3" style={{ marginLeft: '15px', marginTop: '30px' }}>
+            <Form.Check type="checkbox" label="Enable List" checked={listEnabled} onChange={handleListEnabledChange} />
           </Form.Group>
 
+          {listEnabled ? (
+            <Form.Group className="mb-3">
+              <Form.Label column sm="12">
+                List Items
+              </Form.Label>
+              {listItems.map((item, index) => (
+                <div key={index} style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
+                  <Col sm="10">
+                    <Form.Control
+                      as="input"
+                      type="text"
+                      name={`list_item_${index}`}
+                      value={item}
+                      onChange={(e) => handleListItemChange(e, index)}
+                    />
+                  </Col>
+                  <Col sm="2">
+                    <Button variant="link" onClick={() => handleRemoveListItem(index)}>
+                      <FontAwesomeIcon icon={faMinus} />
+                    </Button>
+                  </Col>
+                </div>
+              ))}
+              <div style={{ marginLeft: '15px' }}>
+                <Button variant="success" onClick={handleAddListItem}>
+                  <FontAwesomeIcon icon={faPlus} />
+                </Button>
+              </div>
+            </Form.Group>
+          ) : (
+            <Form.Group className="mb-3">
+              <Form.Label column sm="12">
+                Free Text
+              </Form.Label>
+              <Col sm="10">
+                <Form.Control as="textarea" rows={3} name="free_text" onChange={handleFreeTextChange} />
+              </Col>
+            </Form.Group>
+          )}
+
           <Form.Group className="mb-3">
             <Form.Label column sm="12">
               Help Text

diff --git a/frontend/src/app/components/modal/manage-provisions/forms/EditProvisionModalForm.tsx b/frontend/src/app/components/modal/manage-provisions/forms/EditProvisionModalForm.tsx
@@ -2,6 +2,8 @@ import { useEffect, useState } from 'react';
 import { Provision, ProvisionUpload, Variable } from '../../../../types/types';
 import { Button, Col, Form, Modal, Spinner } from 'react-bootstrap';
 import ManageVariablesTable from '../../../table/manage-provisions/ManageVariablesTable';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPlus, faMinus } from '@fortawesome/free-solid-svg-icons';
 
 interface EditProvisionModalFormProps {
   provision: Provision | undefined;
@@ -26,6 +28,8 @@ const EditProvisionModalForm: React.FC<EditProvisionModalFormProps> = ({
 }) => {
   const [provisionName, setProvisionName] = useState<string>('');
   const [freeText, setFreeText] = useState<string>('');
+  const [listItems, setListItems] = useState<string[]>(['']);
+  const [listEnabled, setListEnabled] = useState<boolean>(false);
   const [helpText, setHelpText] = useState<string>('');
   const [category, setCategory] = useState<string>('');
 
@@ -34,6 +38,8 @@ const EditProvisionModalForm: React.FC<EditProvisionModalFormProps> = ({
       if (provision) {
         setProvisionName(provision.provision_name);
         setFreeText(provision.free_text);
+        setListItems(provision.list_items);
+        setListEnabled(provision.list_enabled);
         setHelpText(provision.help_text);
         setCategory(provision.category);
       }
@@ -58,14 +64,37 @@ const EditProvisionModalForm: React.FC<EditProvisionModalFormProps> = ({
     setCategory(e.target.value);
   };
 
+  const handleListEnabledChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setListEnabled(e.target.checked);
+  };
+
+  const handleListItemChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, index: number) => {
+    const newListItems = [...listItems];
+    newListItems[index] = e.target.value;
+    setListItems(newListItems);
+  };
+
+  const handleAddListItem = () => {
+    setListItems([...listItems, '']);
+  };
+
+  const handleRemoveListItem = (index: number) => {
+    const newListItems = [...listItems];
+    newListItems.splice(index, 1);
+    setListItems(newListItems);
+  };
+
   const handleSaveButton = () => {
     if (provision) {
       const provisionUpload: ProvisionUpload = {
         provision_name: provisionName,
         free_text: freeText,
+        list_items: listItems,
+        list_enabled: listEnabled,
         help_text: helpText,
         category: category,
       };
+      console.log(provisionUpload);
       updateProvisionHandler(provisionUpload, provision.id);
     }
   };
@@ -103,21 +132,50 @@ const EditProvisionModalForm: React.FC<EditProvisionModalFormProps> = ({
             </Col>
           </Form.Group>
 
-          <Form.Group className="mb-3">
-            <Form.Label column sm="12">
-              Free Text
-            </Form.Label>
-            <Col sm="10">
-              <Form.Control
-                as="textarea"
-                rows={3}
-                name="free_text"
-                defaultValue={freeText}
-                onChange={handleFreeTextChange}
-              />
-            </Col>
+          <Form.Group className="mb-3" style={{ marginLeft: '15px', marginTop: '30px' }}>
+            <Form.Check type="checkbox" label="Enable List" checked={listEnabled} onChange={handleListEnabledChange} />
           </Form.Group>
 
+          {listEnabled ? (
+            <Form.Group className="mb-3">
+              <Form.Label column sm="12">
+                List Items
+              </Form.Label>
+              {listItems.map((item, index) => (
+                <div key={index} style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
+                  <Col sm="10">
+                    <Form.Control
+                      as="input"
+                      type="text"
+                      name={`list_item_${index}`}
+                      value={item}
+                      onChange={(e) => handleListItemChange(e, index)}
+                    />
+                  </Col>
+                  <Col sm="2">
+                    <Button variant="link" onClick={() => handleRemoveListItem(index)}>
+                      <FontAwesomeIcon icon={faMinus} />
+                    </Button>
+                  </Col>
+                </div>
+              ))}
+              <div style={{ marginLeft: '15px' }}>
+                <Button variant="success" onClick={handleAddListItem}>
+                  <FontAwesomeIcon icon={faPlus} />
+                </Button>
+              </div>
+            </Form.Group>
+          ) : (
+            <Form.Group className="mb-3">
+              <Form.Label column sm="12">
+                Free Text
+              </Form.Label>
+              <Col sm="10">
+                <Form.Control as="textarea" rows={3} name="free_text" onChange={handleFreeTextChange} />
+              </Col>
+            </Form.Group>
+          )}
+
           <Form.Group className="mb-3">
             <Form.Label column sm="12">
               Help Text

diff --git a/frontend/src/app/components/table/manage-provisions/ManageProvisionsTable.tsx b/frontend/src/app/components/table/manage-provisions/ManageProvisionsTable.tsx
@@ -27,7 +27,6 @@ const ManageProvisionsTable: React.FC<ManageProvisionsTableProps> = ({
     if (provisions) {
       const sortedData = basicSort(provisions);
       setAllProvisions(sortedData);
-      console.log(provisions[0]);
     }
     if (variables) {
       setAllVariables(variables);

diff --git a/frontend/src/app/content/pages/LandingPage.tsx b/frontend/src/app/content/pages/LandingPage.tsx
@@ -334,6 +334,8 @@ const LandingPage: FC = () => {
         doc_type_provision_id: provision.id,
         provision_name: provision.provision_name,
         free_text: provision.free_text,
+        list_items: provision.list_items,
+        list_enabled: provision.list_enabled,
       };
     });
     const selectedVariables: Variable[] = variables.filter((variable) => selectedVariableIds.includes(variable.id));

diff --git a/frontend/src/app/content/pages/ManageProvisionsPage.tsx b/frontend/src/app/content/pages/ManageProvisionsPage.tsx
@@ -70,10 +70,12 @@ const ManageProvisionsPage: FC<ManageProvisionsPageProps> = () => {
 
   const updateProvisionHandler = async (provisionUpload: ProvisionUpload, provisionId: number) => {
     await updateProvision({ ...provisionUpload, id: provisionId });
+    refreshTables();
   };
 
   const addProvisionHandler = async (provisionUpload: ProvisionUpload) => {
     await addProvision(provisionUpload);
+    refreshTables();
   };
   const removeProvisionHandler = async (id: number) => {
     await removeProvision(id);
@@ -136,7 +138,6 @@ const ManageProvisionsPage: FC<ManageProvisionsPageProps> = () => {
         show={showAddProvisionModal}
         onHide={() => setShowAddProvisionModal(false)}
         addProvisionHandler={addProvisionHandler}
-        refreshTables={refreshTables}
       />
       <RemoveProvisionModal
         provision={currentProvision}

diff --git a/frontend/src/app/types/types.ts b/frontend/src/app/types/types.ts
@@ -124,6 +124,8 @@ export type ProvisionObject = {
   type: string;
   provision_name: string;
   free_text: string;
+  list_items: string[];
+  list_enabled: boolean;
   category: string;
   active_flag: boolean;
   create_userid: string;
@@ -155,6 +157,8 @@ export type Provision = {
   create_timestamp: string;
   create_userid: string;
   free_text: string;
+  list_items: string[];
+  list_enabled: boolean;
   help_text: string;
   id: number;
   is_deleted: boolean;
@@ -167,6 +171,8 @@ export type Provision = {
 export type ProvisionUpload = {
   provision_name: string;
   free_text: string;
+  list_items: string[];
+  list_enabled: boolean;
   help_text: string;
   category: string;
 };
@@ -193,6 +199,8 @@ export type ProvisionDataObject = {
   provision_name: string;
   category: string;
   free_text: string;
+  list_items: string[];
+  list_enabled: boolean;
   help_text: string;
   active_flag: boolean; // from global provision
   is_deleted: boolean; // from global provision
@@ -213,6 +221,8 @@ export type ReducedProvisionDataObject = {
   provision_name: string;
   category: string;
   free_text: string;
+  list_items: string[];
+  list_enabled: boolean;
   help_text: string;
   active_flag: boolean; // from global provision
   is_deleted: boolean; // from global provision
@@ -303,6 +313,8 @@ export type DocumentDataObject = {
 
 export type DocumentDataProvisionObject = {
   provision_free_text: string;
+  provision_list_items: string[];
+  provision_list_enabled: boolean;
   id: number;
   provision: ProvisionObject;
 };