From e6f75c960af4d79d0b70f8e99e26df1bb38a35fc Mon Sep 17 00:00:00 2001
From: anna <anna.ho@2fi-solutions.com.hk>
Date: Fri, 8 Mar 2024 18:07:44 +0800
Subject: [PATCH] add setting, Proof Date -> Proof Issue Date

---
 src/pages/Proof/Search_GLD/DataGrid.js        |  2 +-
 src/pages/Proof/Search_GLD/SearchForm.js      |  4 +-
 .../Details_GLD/tabTableDetail/ProofTab.js    |  2 +-
 src/pages/Setting/SystemSetting/Form.js       | 64 +++++++++++++++----
 4 files changed, 54 insertions(+), 18 deletions(-)

diff --git a/src/pages/Proof/Search_GLD/DataGrid.js b/src/pages/Proof/Search_GLD/DataGrid.js
index 983df0a..56e1e2d 100644
--- a/src/pages/Proof/Search_GLD/DataGrid.js
+++ b/src/pages/Proof/Search_GLD/DataGrid.js
@@ -59,7 +59,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
         {
             id: 'created',
             field: 'created',
-            headerName: 'Proof Date',
+            headerName: 'Proof Issue Date',
             flex: 1,
             valueGetter: (params) => {
                 return DateUtils.datetimeStr(params?.value);
diff --git a/src/pages/Proof/Search_GLD/SearchForm.js b/src/pages/Proof/Search_GLD/SearchForm.js
index 188d92d..f537cbd 100644
--- a/src/pages/Proof/Search_GLD/SearchForm.js
+++ b/src/pages/Proof/Search_GLD/SearchForm.js
@@ -206,7 +206,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                         {...register("dateFrom")}
                                         id="dateFrom"
                                         type="date"
-                                        label="Proof Date (From)"
+                                        label="Proof Issue Date (From)"
                                         defaultValue={searchCriteria.dateFrom}
                                         InputProps={{ inputProps: { max: maxDate } }}
                                         onChange={(newValue) => {
@@ -233,7 +233,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                         }}
                                         id="dateTo"
                                         type="date"
-                                        label="Proof Date(To)"
+                                        label="Proof Issue Date(To)"
                                         defaultValue={searchCriteria.dateTo}
                                     />    
                                 </Grid>
diff --git a/src/pages/PublicNotice/Details_GLD/tabTableDetail/ProofTab.js b/src/pages/PublicNotice/Details_GLD/tabTableDetail/ProofTab.js
index 19a6e55..e32f7d3 100644
--- a/src/pages/PublicNotice/Details_GLD/tabTableDetail/ProofTab.js
+++ b/src/pages/PublicNotice/Details_GLD/tabTableDetail/ProofTab.js
@@ -56,7 +56,7 @@ export default function ProofTab({rows}) {
         },
         {
             field: 'created',
-            headerName: 'Proof Date',
+            headerName: 'Proof Issue Date',
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
 
diff --git a/src/pages/Setting/SystemSetting/Form.js b/src/pages/Setting/SystemSetting/Form.js
index 0b3921d..6f06c00 100644
--- a/src/pages/Setting/SystemSetting/Form.js
+++ b/src/pages/Setting/SystemSetting/Form.js
@@ -6,6 +6,7 @@ import {
     // InputAdornment, 
     Typography, FormLabel,
     OutlinedInput,
+    TextField,
 } from '@mui/material';
 import MainCard from "components/MainCard";
 import * as React from "react";
@@ -16,6 +17,7 @@ import * as React from "react";
 const Form = ({ selectedItem, onSave }) => {
     const [data, setData] = React.useState({});
     const [value, setValue] = React.useState("");
+    const [valueErr, setValueErr] = React.useState("");
 
     React.useEffect(() => {
         //if user data from parent are not null
@@ -44,7 +46,7 @@ const Form = ({ selectedItem, onSave }) => {
                             <Grid container>
                                 <Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
                                     <Grid container alignItems={"center"}>
-                                        <Grid item xs={2} 
+                                        <Grid item xs={2}
                                             sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
                                             <FormLabel>Name:</FormLabel>
                                         </Grid>
@@ -59,7 +61,7 @@ const Form = ({ selectedItem, onSave }) => {
 
                                 <Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 3 }}>
                                     <Grid container alignItems={"center"}>
-                                        <Grid item xs={2} 
+                                        <Grid item xs={2}
                                             sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
                                             <FormLabel >Type:</FormLabel>
                                         </Grid>
@@ -88,27 +90,61 @@ const Form = ({ selectedItem, onSave }) => {
 
                                 <Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 3 }}>
                                     <Grid container alignItems={"center"}>
-                                        <Grid item xs={2}
-                                            sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
+                                        <Grid item xs={12}
+                                            sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'top' }}>
                                             <FormLabel>Value:</FormLabel>
                                         </Grid>
 
-                                        <Grid item xs={8}>
+                                        <Grid item xs={12} sx={{ ml: 3, mr: 3 }}>
+
                                             <FormControl variant="outlined" fullWidth required>
-                                                <OutlinedInput
-                                                    fullWidth
-                                                    size="small"
-                                                    value={value}
-                                                    onChange={(event)=>{
-                                                        setValue(event.target.value);
-                                                    }}
-                                                />
+                                                {
+                                                    data?.type != "HTML" ?
+                                                        <OutlinedInput
+                                                            fullWidth
+                                                            size="small"
+                                                            value={value}
+                                                            error={valueErr}
+                                                            onChange={(event) => {
+                                                                setValueErr("");
+                                                                setValue(event.target.value);
+                                                            }}
+                                                        />
+                                                        :
+                                                        <TextField
+                                                            variant="outlined"
+                                                            multiline
+                                                            rows={15}
+                                                            value={value}
+                                                            inputComponent='textarea'
+                                                            error={valueErr}
+                                                            onChange={(event) => {
+                                                                setValue(event.target.value);
+                                                                if (event.target.value.length >= 1000) {
+                                                                    setValueErr("The number of characters cannot exceed 1000 words.");
+                                                                    return;
+                                                                }
+                                                                setValueErr("");
+                                                                
+                                                            }}
+                                                            InputProps={
+                                                                {
+                                                                    style: { minHeight: '42.5px', maxHeight: '50vh', height: 'auto' },
+                                                                }
+                                                            }
+                                                        />
+
+                                                }
+                                                <span style={{ color: "red" }}>{valueErr}</span>
                                             </FormControl>
                                         </Grid>
                                     </Grid>
                                 </Grid>
                             </Grid>
-                            <Button onClick={()=>{onSave({ name: data.name, value:value})}}>Save</Button>
+                            <Button onClick={() => {
+                                if (valueErr.length > 0) return;
+                                onSave({ name: data.name, value: value })
+                            }}>Save</Button>
                         </form>
                     </>
                     :