update search form gfmis and application

src/pages/GFMIS/SearchForm.js

@@ -12,36 +12,92 @@ import * as React from "react";
 import {PNSPS_BUTTON_THEME} from "../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
 // import * as ComboData from "utils/ComboData";
-// ==============================|| DASHBOARD - DEFAULT ||============================== //
+import * as DateUtils from "utils/DateUtils";
+import { makeStyles } from '@mui/styles';
 
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+const useStyles = makeStyles(() => ({
+    root: {
+        position: "relative"
+    },
+    display: {
+        position: "absolute",
+        top: 2,
+        left: 12,
+        bottom: 2,
+        background: "white",
+        pointerEvents: "none",
+        right: 50,
+        display: "flex",
+        alignItems: "center"
+    },
+}));
 
 const SearchPublicNoticeForm = ({ applySearch, generateXML, searchCriteria }) => {
 
     // const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
+    const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
     const [maxDate] = React.useState(searchCriteria.dateFrom);
     // const [status, setStatus] = React.useState(ComboData.paymentStatus[0]);
+    const [fromDateValue, setFromDateValue] = React.useState("dd / mm / yyyy");
+
+    const { register, handleSubmit, } = useForm()
+
+    React.useEffect(() => {
+        setFromDateValue(minDate);
+    }, [minDate]);
+
+    function FormDateInputComponent({ inputRef, ...props }) {
+        const classes = useStyles();
+        return (
+            <>
+                <div className={classes.display}>
+                    {DateUtils.dateStr(fromDateValue) == "Invalid Date" ?
+                        fromDateValue
+                        :
+                        DateUtils.dateStr(fromDateValue)}
+                </div>
+                <input
+                    // className={classes.input}
+                    ref={inputRef}
+                    {...props}
+                    // onChange={handleChange}
+                    value={fromDateValue}
+                    max={maxDate}
+                />
+            </>
+        );
+    }
 
-    const { register, handleSubmit, getValues } = useForm()
+    const onSubmit = () => {
+        let sentDateFrom = "";
 
-    const onSubmit = (data) => {
+        if (fromDateValue != "dd / mm / yyyy") {
+            sentDateFrom = DateUtils.dateValue(fromDateValue)
+        }
+        
         const temp = {
             // code: data.code,
             // transNo: data.transNo,
-            dateFrom: data.dateFrom,
-            dateTo: data.dateTo,
+            dateFrom: sentDateFrom,
+            // dateTo: data.dateTo,
             // status : (status?.type && status?.type != 'all') ? status?.type : "",
         };
         applySearch(temp);
     };
 
     const generateHandler = () => {
-        const dateFrom = getValues("dateFrom")
-        const dateTo = getValues("dateTo")
+        let sentDateFrom = "";
+
+        if (fromDateValue != "dd / mm / yyyy") {
+            sentDateFrom = DateUtils.dateValue(fromDateValue)
+        }
+        // const dateTo = getValues("dateTo")
         const temp = {
             // code: data.code,
             // transNo: data.transNo,
-            dateFrom: dateFrom,
-            dateTo: dateTo,
+            dateFrom: sentDateFrom,
+            dateTo: "",
             // status : (status?.type && status?.type != 'all') ? status?.type : "",
         };
         generateXML(temp);
@@ -73,13 +129,12 @@ const SearchPublicNoticeForm = ({ applySearch, generateXML, searchCriteria }) =>
                             type="date"
                             label="Credit Date"
                             defaultValue={searchCriteria.dateFrom}
-                            InputProps={{ 
-                                inputProps: { 
-                                max: maxDate,
-                             } }}
-                            // onChange={(newValue) => {
-                            //     setMinDate(DateUtils.dateValue(newValue));
-                            // }}
+                            InputProps={{
+                                inputComponent: FormDateInputComponent,
+                            }}
+                            onChange={(newValue) => {
+                                setMinDate(newValue.target.value);
+                            }}
                             InputLabelProps={{
                                 shrink: true
                             }}

src/pages/Payment/Details_GLD/DataGrid.js

@@ -28,7 +28,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
 
     const columns = [
         {
-            field: "id",
+            field: "paymentIndex",
             headerName: "No.",
             filterable: false,
             renderCell: (params) => {

src/pages/Payment/Details_Public/DataGrid.js

@@ -53,7 +53,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
 
     const columns = [
         {
-            field: "id",
+            field: "paymentIndex",
             headerName: "No.",
             filterable: false,
             renderCell: (params) => {

src/pages/Payment/Search_GLD/SearchForm.js

@@ -12,8 +12,25 @@ import * as DateUtils from "utils/DateUtils";
 import * as ComboData from "utils/ComboData";
 import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
-// ==============================|| DASHBOARD - DEFAULT ||============================== //
+import { makeStyles } from '@mui/styles';
 
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+const useStyles = makeStyles(() => ({
+    root: {
+        position: "relative"
+    },
+    display: {
+        position: "absolute",
+        top: 2,
+        left: 12,
+        bottom: 2,
+        background: "white",
+        pointerEvents: "none",
+        right: 50,
+        display: "flex",
+        alignItems: "center"
+    },
+}));
 
 const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
 
@@ -24,12 +41,74 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
     const { reset, register, handleSubmit } = useForm()
     const marginBottom = 2.5;
 
+    const [fromDateValue, setFromDateValue] = React.useState("dd / mm / yyyy");
+    const [toDateValue, setToDateValue] = React.useState("dd / mm / yyyy");
+
+    React.useEffect(() => {
+        setFromDateValue(minDate);
+    }, [minDate]);
+
+    React.useEffect(() => {
+        setToDateValue(maxDate);
+    }, [maxDate]);
+
+    function FormDateInputComponent({ inputRef, ...props }) {
+        const classes = useStyles();
+        return (
+            <>
+                <div className={classes.display}>
+                    {DateUtils.dateStr(fromDateValue) == "Invalid Date" ?
+                        fromDateValue
+                        :
+                        DateUtils.dateStr(fromDateValue)}
+                </div>
+                <input
+                    // className={classes.input}
+                    ref={inputRef}
+                    {...props}
+                    // onChange={handleChange}
+                    value={fromDateValue}
+                    max={maxDate}
+                />
+            </>
+        );
+    }
+
+    function ToDateInputComponent({ inputRef, ...props }) {
+        const classes = useStyles();
+        return (
+            <>
+                <div className={classes.display}>
+                    {DateUtils.dateStr(toDateValue) == "Invalid Date" ?
+                        toDateValue
+                        :
+                        DateUtils.dateStr(toDateValue)}
+                </div>
+                <input
+                    // className={classes.input}
+                    ref={inputRef}
+                    {...props}
+                    // onChange={handleChange}
+                    value={toDateValue}
+                    min={minDate}
+                />
+            </>
+        );
+    }
     const onSubmit = (data) => {
+        let sentDateFrom = "";
+        let sentDateTo = "";
+
+        if (fromDateValue != "dd / mm / yyyy" && toDateValue != "dd / mm / yyyy") {
+            sentDateFrom = DateUtils.dateValue(fromDateValue)
+            sentDateTo = DateUtils.dateValue(toDateValue)
+        }
+
         const temp = {
             code: data.code,
             transNo: data.transNo,
-            dateFrom: data.dateFrom,
-            dateTo: data.dateTo,
+            dateFrom: sentDateFrom,
+            dateTo: sentDateTo,
             status : (status?.type && status?.type != 'all') ? status?.type : "",
         };
         applySearch(temp);
@@ -37,6 +116,8 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
 
     function resetForm() {
         setStatus(ComboData.paymentStatus[0]);
+        setMinDate(DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)))
+        setMaxDate(DateUtils.dateValue(new Date()))
         reset();
     }
 
@@ -81,9 +162,11 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                                         type="date"
                                         label="Transaction Date (From)"
                                         defaultValue={searchCriteria.dateFrom}
-                                        InputProps={{ inputProps: { max: maxDate } }}
+                                        InputProps={{
+                                            inputComponent: FormDateInputComponent,
+                                        }}
                                         onChange={(newValue) => {
-                                            setMinDate(DateUtils.dateValue(newValue));
+                                            setMinDate(newValue.target.value);
                                         }}
                                         InputLabelProps={{
                                             shrink: true
@@ -97,9 +180,11 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                                             shrink: true
                                         }}
                                         {...register("dateTo")}
-                                        InputProps={{ inputProps: { min: minDate } }}
+                                        InputProps={{
+                                            inputComponent: ToDateInputComponent,
+                                        }}
                                         onChange={(newValue) => {
-                                            setMaxDate(DateUtils.dateValue(newValue));
+                                            setMaxDate(newValue.target.value);
                                         }}
                                         id="dateTo"
                                         type="date"

src/pages/Proof/Search_GLD/DataGrid.js

@@ -29,7 +29,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
         {
             id: 'appId',
             field: 'appId',
-            headerName: 'Application No./ Gazette Code/ Gazette Issue',
+            headerName: 'Application No./ Gazette Code/ Gazette Issue No.',
             width: 400,
             renderCell: (params) => {
                 let appNo = params.row.appNo;
@@ -46,7 +46,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             id: 'actions',
             headerName: 'Status',
             flex: 1,
-            minWidth: 100,
+            minWidth: 150,
             renderCell: (params) => {
                 return ProofStatus.getStatus_Eng(params);
             },

src/pages/Proof/Search_GLD/SearchForm.js

@@ -14,8 +14,25 @@ import { Typography } from '../../../../node_modules/@mui/material/index';
 import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
 import { useIntl } from "react-intl";
-// ==============================|| DASHBOARD - DEFAULT ||============================== //
+import { makeStyles } from '@mui/styles';
 
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+const useStyles = makeStyles(() => ({
+    root: {
+        position: "relative"
+    },
+    display: {
+        position: "absolute",
+        top: 2,
+        left: 12,
+        bottom: 2,
+        background: "white",
+        pointerEvents: "none",
+        right: 50,
+        display: "flex",
+        alignItems: "center"
+    },
+}));
 
 const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, issueComboData
 }) => {
@@ -30,6 +47,60 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
 
     const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
     const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
+    const [fromDateValue, setFromDateValue] = React.useState("dd / mm / yyyy");
+    const [toDateValue, setToDateValue] = React.useState("dd / mm / yyyy");
+
+    React.useEffect(() => {
+        setFromDateValue(minDate);
+    }, [minDate]);
+
+    React.useEffect(() => {
+        setToDateValue(maxDate);
+    }, [maxDate]);
+
+    function FormDateInputComponent({ inputRef, ...props }) {
+        const classes = useStyles();
+        return (
+            <>
+                <div className={classes.display}>
+                    {DateUtils.dateStr(fromDateValue) == "Invalid Date" ?
+                        fromDateValue
+                        :
+                        DateUtils.dateStr(fromDateValue)}
+                </div>
+                <input
+                    // className={classes.input}
+                    ref={inputRef}
+                    {...props}
+                    // onChange={handleChange}
+                    value={fromDateValue}
+                    max={maxDate}
+                />
+            </>
+        );
+    }
+
+    function ToDateInputComponent({ inputRef, ...props }) {
+        const classes = useStyles();
+        return (
+            <>
+                <div className={classes.display}>
+                    {DateUtils.dateStr(toDateValue) == "Invalid Date" ?
+                        toDateValue
+                        :
+                        DateUtils.dateStr(toDateValue)}
+                </div>
+                <input
+                    // className={classes.input}
+                    ref={inputRef}
+                    {...props}
+                    // onChange={handleChange}
+                    value={toDateValue}
+                    min={minDate}
+                />
+            </>
+        );
+    }
 
     const intl = useIntl();
     const { locale } = intl;
@@ -37,20 +108,26 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
     const marginBottom = 2.5;
     const { reset, register, handleSubmit } = useForm()
     const onSubmit = (data) => {
-
         let typeArray = [];
+        let sentDateFrom = "";
+        let sentDateTo = "";
 
         for (let i = 0; i < type.length; i++) {
             typeArray.push(type[i].label);
         }
 
+        if (fromDateValue != "dd / mm / yyyy" && toDateValue != "dd / mm / yyyy") {
+            sentDateFrom = DateUtils.dateValue(fromDateValue)
+            sentDateTo = DateUtils.dateValue(toDateValue)
+        }
+        
         const temp = {
             refNo: data.refNo,
             code: data.code,
             issueId: issueSelected?.id,
             gazettGroup: groupSelected?.type,
-            dateFrom: data.dateFrom,
-            dateTo: data.dateTo,
+            dateFrom: sentDateFrom,
+            dateTo: sentDateTo,
             contact: data.contact,
             replyed: (status?.type && status?.type != 'all') ? status?.type : "",
             orgId: (orgSelected?.key && orgSelected?.key > 0) ? orgSelected?.key : "",
@@ -77,6 +154,8 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
         setOrgSelected({});
         setIssueSelected({});
         setGroupSelected({});
+        setMinDate(DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)))
+        setMaxDate(DateUtils.dateValue(new Date()))
         reset();
     }
 
@@ -208,9 +287,11 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                         type="date"
                                         label="Proof Issue Date (From)"
                                         defaultValue={searchCriteria.dateFrom}
-                                        InputProps={{ inputProps: { max: maxDate } }}
+                                        InputProps={{
+                                            inputComponent: FormDateInputComponent,
+                                        }}
                                         onChange={(newValue) => {
-                                            setMinDate(DateUtils.dateValue(newValue));
+                                            setMinDate(newValue.target.value);
                                         }}
                                         InputLabelProps={{
                                             shrink: true
@@ -225,9 +306,11 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                             shrink: true
                                         }}
                                         {...register("dateTo")}
-                                        InputProps={{ inputProps: { min: minDate } }}
+                                        InputProps={{
+                                            inputComponent: ToDateInputComponent,
+                                        }}
                                         onChange={(newValue) => {
-                                            setMaxDate(DateUtils.dateValue(newValue));
+                                            setMaxDate(newValue.target.value);
                                         }}
                                         id="dateTo"
                                         type="date"