From 6a07b6cc717cb6cb61f8c92f7a17b9108706dc19 Mon Sep 17 00:00:00 2001
From: Alex Cheung <alex.cheung@2fi-solutions.com.hk>
Date: Fri, 29 Nov 2024 15:29:08 +0800
Subject: [PATCH] add careOf and org combo

---
 .../Proof/Reply_Public/ApplicationDetails.js  | 29 ++++++++
 .../UserSearchForm_Organization.js            | 67 ++++++++++++++-----
 .../User/SearchPage_Organization/index.js     | 20 +++++-
 3 files changed, 100 insertions(+), 16 deletions(-)

diff --git a/src/pages/Proof/Reply_Public/ApplicationDetails.js b/src/pages/Proof/Reply_Public/ApplicationDetails.js
index 6c260dd..51cd27f 100644
--- a/src/pages/Proof/Reply_Public/ApplicationDetails.js
+++ b/src/pages/Proof/Reply_Public/ApplicationDetails.js
@@ -18,6 +18,9 @@ const MainCard = Loadable(React.lazy(() => import('components/MainCard')));
 import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
 import FileList from "components/FileList"
 import { FormattedMessage, useIntl } from "react-intl";
+import {
+    isORGLoggedIn,
+} from "utils/Utils";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 const ApplicationDetailCard = ({ formData, }) => {
 
@@ -175,6 +178,32 @@ const ApplicationDetailCard = ({ formData, }) => {
                                 </Grid>
                             </Grid>
                         </Grid>
+                        {isORGLoggedIn() ?
+                            <>
+                                <Grid container direction="row" justifyContent="space-between"
+                                    alignItems="center">
+                                    <Grid item xs={12} md={6} lg={6} sx={{ mb: 1, }}>
+                                        <Grid container alignItems="left">
+                                            <Grid item xs={12} md={3} lg={3}
+                                                sx={{ display: 'flex', alignItems: 'center' }}>
+                                                <FormLabel><Typography variant="pnspsFormParagraph">
+                                                    <FormattedMessage id="careOf" />:
+                                                </Typography></FormLabel>
+                                            </Grid>
+
+                                            <Grid item xs={12} md={9} lg={9}>
+                                                <Stack direction="row">
+                                                    <DisplayField name="careOf" />
+                                                </Stack>
+                                            </Grid>
+                                        </Grid>
+                                    </Grid>
+                                </Grid>
+                            </>
+                            :
+                            null
+
+                        }
                         <Grid container direction="row" justifyContent="space-between"
                             alignItems="center">
                             <Grid item xs={12} md={6} lg={6} sx={{ mb: 1, }}>
diff --git a/src/pages/User/SearchPage_Organization/UserSearchForm_Organization.js b/src/pages/User/SearchPage_Organization/UserSearchForm_Organization.js
index 796bb0e..35a403e 100644
--- a/src/pages/User/SearchPage_Organization/UserSearchForm_Organization.js
+++ b/src/pages/User/SearchPage_Organization/UserSearchForm_Organization.js
@@ -8,17 +8,18 @@ import {
 import MainCard from "../../../components/MainCard";
 import {useForm} from "react-hook-form";
 
-import { useState} from "react";
+import { useState, useEffect} from "react";
 import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const UserSearchForm_Organization = ({applySearch, onGridReady}) => {
+const UserSearchForm_Organization = ({applySearch, orgComboData, onGridReady}) => {
 
     const [type, setType] = useState([]);
     const [accountFilter, setAccountFilter] = useState("All");
-
+    const [orgCombo, setOrgCombo] = useState();
+    const [orgSelected, setOrgSelected] = useState({});
 
     const { reset, register, handleSubmit } = useForm()
     const onSubmit = (data) => {
@@ -36,15 +37,22 @@ const UserSearchForm_Organization = ({applySearch, onGridReady}) => {
             contactTel: data.phone,
             contactPerson: data.contactPerson,
             brNoStr: data.brNoStr,
-            orgName: data.orgName,
+            orgName: orgSelected?.name ? orgSelected?.name : "",
             accountFilter: accountFilter=="All"?null:accountFilter,
         };
         applySearch(temp);
     };
 
+    useEffect(() => {
+        if (orgComboData && orgComboData.length > 0) {
+            setOrgCombo(orgComboData);
+        }
+    }, [orgComboData]);
+
     function resetForm(){
         setType([]);
         setAccountFilter("All");
+        setOrgSelected({});
         reset();
     }
 
@@ -64,17 +72,46 @@ const UserSearchForm_Organization = ({applySearch, onGridReady}) => {
                     {/*row 2*/}
 
                     <Grid container display="flex" alignItems={"center"}>
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
-                            <TextField
-                                fullWidth
-                                {...register("orgName")}
-                                id="orgName"
-                                label="Organisation"
-                                InputLabelProps={{
-                                    shrink: true
-                                }}
-                            />
-                        </Grid>
+                        {
+                            orgCombo ?
+                                <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                                    <Autocomplete
+                                        {...register("orgId")}
+                                        disablePortal
+                                        id="orgId"
+                                        options={orgCombo}
+                                        groupBy={(option) => option.groupType}
+                                        size="small"
+                                        value={orgSelected}
+                                        getOptionLabel={(option) => option.name? option.name : ""}
+                                        inputValue={orgSelected ? orgSelected.name : ""}
+                                        onChange={(event, newValue) => {
+                                            if (newValue !== null) {
+                                                setOrgSelected(newValue);
+                                            }else{
+                                                setOrgSelected({});
+                                            }
+                                        }}
+                                        renderInput={(params) => (
+                                            <TextField {...params}
+                                                label="Organisation"
+                                                InputLabelProps={{
+                                                    shrink: true
+                                                }}
+                                            />
+                                        )}
+                                        renderGroup={(params) => (
+                                            <Grid item key={params.key}>
+                                                <Typography fontSize={20} fontStyle="italic" p={1}>
+                                                {params.group}
+                                                </Typography>
+                                                {params.children}
+                                            </Grid>
+                                        )}
+                                    />
+                                </Grid>
+                                : <></>
+                        }
 
                         <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
                             <TextField
diff --git a/src/pages/User/SearchPage_Organization/index.js b/src/pages/User/SearchPage_Organization/index.js
index 381a97e..a3aed0e 100644
--- a/src/pages/User/SearchPage_Organization/index.js
+++ b/src/pages/User/SearchPage_Organization/index.js
@@ -5,6 +5,9 @@ import {
 import MainCard from "components/MainCard";
 import { useEffect, useState, lazy } from "react";
 import Loadable from 'components/Loadable';
+import * as HttpUtils from "utils/HttpUtils";
+import {GET_ORG_COMBO} from "utils/ApiPathConst";
+
 const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
 const SearchForm = Loadable(lazy(() => import('./UserSearchForm_Organization')));
 const EventTable = Loadable(lazy(() => import('./UserTable_Organization')));
@@ -23,11 +26,25 @@ const BackgroundHead = {
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const UserSearchPage_Organization = () => {
-
+    const [orgCombo, setOrgCombo] = useState([]);
     const [searchCriteria, setSearchCriteria] = useState({});
     const [onReady, setOnReady] = useState(false);
     const [onGridReady, setGridOnReady] = useState(false);
 
+    useEffect(() => {
+        getOrgCombo();
+        // getIssueCombo();
+    }, []);
+
+    function getOrgCombo() {
+        HttpUtils.get({
+            url: GET_ORG_COMBO,
+            onSuccess: function (responseData) {
+                let combo = responseData;
+                setOrgCombo(combo);
+            }
+        });
+    }
 
     useEffect(() => {
         setOnReady(true);
@@ -62,6 +79,7 @@ const UserSearchPage_Organization = () => {
                 <Grid item xs={12} md={12} lg={12} sx={{mb:-1}}>
                     <SearchForm 
                         applySearch={applySearch}
+                        orgComboData={orgCombo}
                         onGridReady={onGridReady}
                     />
                 </Grid>