alex
/
PNSPS-frontend-MaterialUI
1
0
Förgrening 0
Kod Ärenden 0 Pull-förfrågningar 0 Släpp 0 Wiki Aktiviteter
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.
354 Incheckningar
5 Grenar
19 MiB
 
 
Träd: ae77186d9e
Grenar Taggar
${ item.name }
Skapa branchen ${ searchTerm }
från 'ae77186d9e'
${ noResults }
PNSPS-frontend-MaterialUI/src/pages/User/DetailsPage_Organization/UserInformationCard_Organiz...

603 rader
29 KiB
Rå Blame Historik 

  1. // material-ui

  2. import {

  3.     Grid, Typography, Button,

  4.     Dialog, DialogTitle, DialogContent, DialogActions,

  5. } from '@mui/material';

  6. import MainCard from "../../../components/MainCard";

  7. import * as React from "react";

  8. 

  9. import * as FieldUtils from "../../../utils/FieldUtils";

  10. import * as HttpUtils from '../../../utils/HttpUtils';

  11. import * as UrlUtils from "../../../utils/ApiPathConst";

  12. import * as ComboData from "../../../utils/ComboData";

  13. 

  14. import { useFormik } from 'formik';

  15. import * as yup from 'yup';

  16. const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));

  17. import Loadable from 'components/Loadable';

  18. import { lazy } from 'react';

  19. import { notifyActiveSuccess, notifyLockSuccess, notifySaveSuccess, notifyVerifySuccess } from 'utils/CommonFunction';

  20. // ==============================|| DASHBOARD - DEFAULT ||============================== //

  21. 

  22. 

  23. const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) => {

  24. 

  25.     const [currentUserData, setCurrentUserData] = React.useState(userData);

  26.     const [isWarningPopUp, setIsWarningPopUp] = React.useState(false);

  27.     const [warningText, setWarningText] = React.useState("");

  28.     const [isConfirmPopUp, setIsConfirmPopUp] = React.useState(false);

  29.     const [confirmText, setConfirmText] = React.useState("");

  30.     const [confirmAction, setConfirmAction] = React.useState();

  31.     const [editMode, setEditMode] = React.useState(false);

  32.     const [onReady, setOnReady] = React.useState(false);

  33. 

  34.     React.useEffect(() => {

  35.         //if state data are ready and assign to different field

  36.         // console.log(currentApplicationDetailData)

  37.         if (Object.keys(currentUserData).length > 0) {

  38.             setOnReady(true);

  39.         }

  40.     }, [currentUserData]);

  41. 

  42.     function displayErrorMsg(errorMsg) {

  43.         return <Typography variant="errorMessage1">{errorMsg}</Typography>

  44.     }

  45. 

  46.     const formik = useFormik({

  47.         enableReinitialize: true,

  48.         initialValues: currentUserData,

  49.         validationSchema: yup.object().shape({

  50.             contactPerson: yup.string().max(255).required(displayErrorMsg('請輸入姓名')),

  51.             enCompanyName: yup.string().max(255).required(displayErrorMsg('請輸入英文名稱')),

  52.             chCompanyName: yup.string().max(255).nullable(),

  53.             addressLine1: yup.string().max(255).required(displayErrorMsg('請輸入第一行地址')),

  54.             addressLine2: yup.string().max(255).nullable(),

  55.             addressLine3: yup.string().max(255).nullable(),

  56.             emailBus: yup.string().max(255).required(displayErrorMsg('請輸入電郵')),

  57.             tel_countryCode: yup.string().min(3, displayErrorMsg('請輸入3位數字')).required(displayErrorMsg('請輸入國際區號')),

  58.             fax_countryCode: yup.string().min(3, displayErrorMsg('請輸入3位數字')).nullable(),

  59.             phoneNumber: yup.string().min(8, displayErrorMsg('請輸入8位數字')).required(displayErrorMsg('請輸入聯絡電話')),

  60.             faxNumber: yup.string().min(8, displayErrorMsg('請輸入8位數字')).nullable(),

  61.             brExpiryDate: yup.string().min(8, displayErrorMsg('請輸入商業登記證有效日期')),

  62.             brNo: yup.string().required(displayErrorMsg('請輸入商業登記證號碼')).test('checkBrNoFormat', displayErrorMsg(`請輸入有效商業登記證號碼`), function (value) {

  63.                 var brNo_pattern = /[0-9]{8}-[0-9]{3}-(0[1-9]|1[012])-[0-9]{2}-[0-9A-Z]{1}/

  64.                 if (value !== undefined) {

  65.                     if (value.match(brNo_pattern)) {

  66.                         return true

  67.                     } else {

  68.                         return false

  69.                     }

  70.                 }

  71.             }),

  72.         }),

  73.         onSubmit: (values) => {

  74.             HttpUtils.post({

  75.                 url: UrlUtils.POST_ORG_USER + "/" + userData.id,

  76.                 params: {

  77.                     contactTel: {

  78.                         countryCode: values.tel_countryCode,

  79.                         phoneNumber: values.phoneNumber

  80.                     },

  81.                     // faxNo: {

  82.                     //     countryCode: values.fax_countryCode,

  83.                     //     faxNumber: values.faxNumber

  84.                     // },

  85.                     // addressBus: {

  86.                     //     country: values.country,

  87.                     //     district: values.district,

  88.                     //     addressLine1: values.addressLine1,

  89.                     //     addressLine2: values.addressLine2,

  90.                     //     addressLine3: values.addressLine3,

  91.                     // },

  92.                     identification: values.identification,

  93.                     emailBus: values.emailBus,

  94.                     contactPerson: values.contactPerson,

  95.                     // enCompanyName: values.enCompanyName,

  96.                     // chCompanyName: values.chCompanyName,

  97.                     orgId: values.orgId,

  98.                     // brNo: values.brNo,

  99.                     // brExpiryDate: values.brExpiryDate,

  100. 

  101.                 },

  102.                 onSuccess: function () {

  103.                     notifySaveSuccess()

  104.                     loadDataFun();

  105.                 }

  106.             });

  107.         }

  108. 

  109.     });

  110. 

  111. 

  112.     React.useEffect(() => {

  113.         if (Object.keys(userData).length > 0) {

  114.             setCurrentUserData(userData);

  115.         }

  116.     }, [userData]);

  117. 

  118.     const onEditClick = () => {

  119.         setEditMode(true);

  120.     };

  121. 

  122.     const createOrgClick = () => {

  123.         window.open("/org/fromUser/" + userData.id, "_blank", "noreferrer");

  124.         window.addEventListener("focus", onFocus)

  125.     };

  126. 

  127.     const onFocus = () => {

  128.         loadDataFun();

  129.         window.removeEventListener("focus", onFocus)

  130.     }

  131. 

  132.     const onVerifiedClick = () => {

  133.         if (formik?.values?.orgId) {

  134.             HttpUtils.get({

  135.                 url: UrlUtils.GET_IND_USER_VERIFY + "/" + userData.id,

  136.                 onSuccess: function () {

  137.                     notifyVerifySuccess()

  138.                     loadDataFun();

  139.                 }

  140.             });

  141.         } else {

  142.             setWarningText("Please select Organisation before active this account.")

  143.             setIsWarningPopUp(true);

  144.         }

  145. 

  146.     };

  147. 

  148.     const doLock = () => {

  149.         setConfirmText("Confirm to Lock this Account?");

  150.         setConfirmAction({

  151.             function: function () {

  152.                 HttpUtils.get({

  153.                     url: UrlUtils.GET_USER_LOCK + "/" + userData.id,

  154.                     onSuccess: function () {

  155.                         notifyLockSuccess()

  156.                         loadDataFun();

  157.                     }

  158.                 });

  159.             }

  160.         });

  161.         setIsConfirmPopUp(true);

  162.     };

  163. 

  164.     const doUnlock = () => {

  165.         setConfirmText("Confirm to Un-Lock this Account?");

  166. 

  167.         setConfirmAction({

  168.             function: function () {

  169.                 HttpUtils.get({

  170.                     url: UrlUtils.GET_USER_UNLOCK + "/" + userData.id,

  171.                     onSuccess: function () {

  172.                         notifyActiveSuccess()

  173.                         loadDataFun();

  174.                     }

  175.                 });

  176.             }

  177.         });

  178.         setIsConfirmPopUp(true);

  179.     };

  180. 

  181.     return (

  182.         <MainCard elevation={0}

  183.             border={false}

  184.             content={false}

  185.         >

  186. 

  187.             {!onReady ?

  188.                 <LoadingComponent />

  189.                 :

  190.                 <form onSubmit={formik.handleSubmit}>

  191. 

  192.                     {/*top button*/}

  193.                     <Grid item s={12} md={12} lg={12} sx={{ mb: 3, mt: 2 }} alignItems={"start"} justifyContent="center">

  194.                         <Grid container maxWidth justifyContent="flex-start">

  195.                             {editMode ?

  196.                                 <>

  197.                                     <Grid item sx={{ ml: 3, mr: 3 }}>

  198.                                         <Button

  199.                                             size="large"

  200.                                             variant="contained"

  201.                                             onClick={loadDataFun}

  202.                                             sx={{

  203.                                                 textTransform: 'capitalize',

  204.                                                 alignItems: 'end'

  205.                                             }}

  206.                                         >

  207.                                             <Typography variant="h5">Reset & Back</Typography>

  208.                                         </Button>

  209.                                     </Grid>

  210.                                     <Grid item sx={{ ml: 3, mr: 3 }}>

  211.                                         <Button

  212.                                             size="large"

  213.                                             variant="contained"

  214.                                             type="submit"

  215.                                             color="success"

  216.                                             sx={{

  217.                                                 textTransform: 'capitalize',

  218.                                                 alignItems: 'end'

  219.                                             }}

  220.                                         >

  221.                                             <Typography variant="h5">Save</Typography>

  222.                                         </Button>

  223.                                     </Grid>

  224. 

  225.                                 </>

  226.                                 :

  227.                                 <>

  228. 

  229.                                     <Grid item sx={{ ml: 3, mr: 3 }}>

  230.                                         <Button

  231.                                             size="large"

  232.                                             variant="contained"

  233.                                             sx={{

  234.                                                 textTransform: 'capitalize',

  235.                                                 alignItems: 'end'

  236.                                             }}

  237.                                             onClick={onEditClick}

  238.                                         >

  239.                                             <Typography variant="h5">Edit</Typography>

  240.                                         </Button>

  241.                                     </Grid>

  242.                                 </>

  243.                             }

  244. 

  245. 

  246.                         </Grid>

  247.                     </Grid>

  248.                     {/*end top button*/}

  249.                     <div style={{ paddingLeft: 24, paddingRight: 24 }}>

  250.                         <Typography variant="h4" sx={{ mt: 3, mb: 2, mr: 3, borderBottom: "1px solid black" }}>

  251.                             Organisation User Details

  252.                         </Typography>

  253.                         <Grid container spacing={1}>

  254.                             <Grid item lg={4}>

  255.                                 {FieldUtils.getTextField({

  256.                                     label: "Username:",

  257.                                     valueName: "username",

  258.                                     disabled: true,

  259.                                     form: formik

  260.                                 })}

  261.                             </Grid>

  262. 

  263.                             <Grid item lg={4}>

  264.                                 {FieldUtils.getTextField({

  265.                                     label: "Name:",

  266.                                     valueName: "contactPerson",

  267.                                     disabled: (!editMode),

  268.                                     form: formik

  269.                                 })}

  270.                             </Grid>

  271. 

  272.                             <Grid item lg={4}>

  273.                                 {FieldUtils.getTextField({

  274.                                     label: "Created Date:",

  275.                                     valueName: "createDate",

  276.                                     disabled: true,

  277.                                     form: formik

  278.                                 })}

  279.                             </Grid>

  280. 

  281.                             <Grid item lg={4}>

  282.                                 {FieldUtils.getTextField({

  283.                                     label: "Email:",

  284.                                     valueName: "emailBus",

  285.                                     disabled: (!editMode),

  286.                                     form: formik

  287.                                 })}

  288.                             </Grid>

  289. 

  290.                             <Grid item lg={4}>

  291.                                 {FieldUtils.getPhoneField({

  292.                                     label: "Contact Tel:",

  293.                                     valueName: {

  294.                                         code: "tel_countryCode",

  295.                                         num: "phoneNumber"

  296.                                     },

  297.                                     disabled: (!editMode),

  298.                                     form: formik

  299.                                 })}

  300.                             </Grid>

  301. 

  302.                             <Grid item lg={4}>

  303.                                 {FieldUtils.getTextField({

  304.                                     label: "Last Updated:",

  305.                                     valueName: "modifieDate",

  306.                                     disabled: true,

  307.                                     form: formik

  308.                                 })}

  309.                             </Grid>

  310. 

  311.                             <Grid item lg={4}>

  312.                                 {FieldUtils.getComboField({

  313.                                     label: "Organisation:",

  314.                                     valueName: "orgId",

  315.                                     disabled: (!editMode),

  316.                                     dataList: orgData,

  317.                                     filterOptions: (options, state) => {

  318.                                         if (!state || !state.inputValue) return options;

  319.                                         let searchStr = state.inputValue.toLowerCase().toLowerCase().trim();

  320.                                         const displayOptions = options.filter((option) => {

  321.                                             let brNo = option.brNo.toLowerCase().trim();

  322.                                             let enCompanyName = option.enCompanyName ? option.enCompanyName.toLowerCase().trim() : "";

  323.                                             let chCompanyName = option.chCompanyName ? option.chCompanyName.toLowerCase().trim() : "";

  324.                                             return brNo.includes(searchStr) || enCompanyName.includes(searchStr) || chCompanyName.includes(searchStr);

  325.                                         },

  326.                                         );

  327.                                         return displayOptions;

  328.                                     },

  329.                                     getOptionLabel: (item) => item ? typeof item === 'number' ? item + "" : (item["brNo"] ?

  330.                                         <div>BR No.: {item["brNo"]}<div>Org. Name(Eng): {item["enCompanyName"] === null ? "N/A" : item["enCompanyName"]}</div><div>Org. Name(CH): {item["chCompanyName"] === null ? "N/A" : item["chCompanyName"]}</div></div> : "")

  331.                                         : "",

  332.                                     isOptionEqualToValue: (option, newValue, setValue, setInputValue) => {

  333.                                         if (option.id == newValue || option.id == newValue.id) {

  334.                                             setValue(option);

  335.                                             setInputValue(option["brNo"]);

  336.                                             return true;

  337.                                         }

  338.                                         return option == newValue || option.id == newValue.id;

  339.                                     },

  340.                                     onInputChange: (event, newValue, setInputValue) => {

  341.                                         if (newValue !== "[object Object]") {

  342.                                             setInputValue(newValue);

  343.                                         }

  344.                                     },

  345.                                     onChange: (event, newValue) => {

  346.                                         if (newValue == null) {

  347.                                             formik.setFieldValue("orgId", "");

  348.                                             return;

  349.                                         }

  350.                                         formik.setFieldValue("orgId", newValue.id);

  351.                                     },

  352.                                     form: formik

  353.                                 })}

  354.                             </Grid>

  355. 

  356.                             <Grid item lg={4}>

  357.                                 <Grid container alignItems={"center"}>

  358.                                     <Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>

  359.                                         <Typography variant="h5">Verified:</Typography>

  360.                                     </Grid>

  361. 

  362.                                     {

  363.                                         currentUserData.verifiedBy || editMode ?

  364.                                             <Grid item xs={12} md={6} lg={6}>

  365.                                                 {FieldUtils.initField({

  366.                                                     valueName: "verifiedStatus",

  367.                                                     disabled: true,

  368.                                                     form: formik,

  369.                                                 })}

  370.                                             </Grid>

  371.                                             :

  372.                                             <>

  373.                                                 <Grid item xs={10} md={4} lg={4}>

  374.                                                     {FieldUtils.initField({

  375.                                                         valueName: "verifiedStatus",

  376.                                                         disabled: true,

  377.                                                         form: formik,

  378.                                                     })}

  379.                                                 </Grid>

  380.                                                 <Grid item xs={1} md={1} lg={1}>

  381.                                                     <Button

  382.                                                         size="large"

  383.                                                         variant="contained"

  384.                                                         sx={{

  385.                                                             textTransform: 'capitalize',

  386.                                                             alignItems: 'end'

  387.                                                         }}

  388.                                                         onClick={() => { onVerifiedClick() }}

  389.                                                     >

  390.                                                         <Typography variant="h5">Verify</Typography>

  391.                                                     </Button>

  392.                                                 </Grid>

  393.                                             </>

  394.                                     }

  395. 

  396.                                 </Grid>

  397.                             </Grid>

  398. 

  399.                             <Grid item lg={4}>

  400.                                 {FieldUtils.getTextField({

  401.                                     label: "Last Login:",

  402.                                     valueName: "lastLoginDate",

  403.                                     disabled: true,

  404.                                     form: formik

  405.                                 })}

  406.                             </Grid>

  407. 

  408.                             <Grid item lg={8}></Grid>

  409. 

  410.                             <Grid item lg={4}>

  411.                                 <Grid container alignItems={"center"}>

  412.                                     <Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>

  413.                                         <Typography variant="h5">Status:</Typography>

  414.                                     </Grid>

  415.                                     {

  416.                                         editMode ?

  417.                                             <Grid item xs={12} md={6} lg={6}>

  418.                                                 {FieldUtils.initField({

  419.                                                     valueName: "status",

  420.                                                     disabled: true,

  421.                                                     form: formik,

  422.                                                 })}

  423.                                             </Grid>

  424.                                             :

  425.                                             <>

  426. 

  427.                                                 <Grid item xs={10} md={4} lg={4}>

  428.                                                     {FieldUtils.initField({

  429.                                                         valueName: "status",

  430.                                                         disabled: true,

  431.                                                         form: formik,

  432.                                                     })}

  433.                                                 </Grid>

  434. 

  435.                                                 {formik.values.locked ?

  436.                                                     <Grid item xs={1} md={1} lg={1} sx={{ ml: 1 }}>

  437.                                                         <Button

  438.                                                             size="large"

  439.                                                             variant="contained"

  440.                                                             color="success"

  441.                                                             sx={{

  442.                                                                 textTransform: 'capitalize',

  443.                                                                 alignItems: 'end'

  444.                                                             }}

  445.                                                             onClick={doUnlock}

  446.                                                         >

  447.                                                             <Typography variant="h5">Active</Typography>

  448.                                                         </Button>

  449.                                                     </Grid>

  450.                                                     :

  451.                                                     <Grid item xs={1} md={1} lg={1} sx={{ ml: 1 }}>

  452.                                                         <Button

  453.                                                             size="large"

  454.                                                             variant="contained"

  455.                                                             color="error"

  456.                                                             sx={{

  457.                                                                 textTransform: 'capitalize',

  458.                                                                 alignItems: 'end',

  459.                                                             }}

  460.                                                             onClick={doLock}

  461.                                                         >

  462.                                                             <Typography variant="h5">Lock</Typography>

  463.                                                         </Button>

  464.                                                     </Grid>

  465.                                                 }

  466.                                             </>

  467.                                     }

  468.                                 </Grid>

  469.                             </Grid>

  470.                         </Grid>

  471.                     </div>

  472.                     <br />

  473.                     <div style={{ paddingLeft: 24, paddingRight: 24 }}>

  474.                         <Grid container spacing={1} >

  475.                             <Grid item lg={12}>

  476.                                 <Grid container alignItems={"center"}>

  477.                                     {currentUserData.orgId == null ?

  478.                                         <Grid item lg={2} >

  479.                                             <Button variant="contained"

  480.                                                 onClick={createOrgClick}

  481.                                             >

  482.                                                 <Typography variant="h5">Create Organisation</Typography>

  483.                                             </Button>

  484.                                         </Grid>

  485.                                         : null

  486.                                     }

  487.                                 </Grid>

  488.                             </Grid>

  489.                             <Grid item lg={12} >

  490.                                 <Typography variant="h4" sx={{ mt: 3, mb: 2, mr: 3, borderBottom: "1px solid black" }}>

  491.                                     Organisation

  492.                                 </Typography>

  493.                             </Grid>

  494.                             <Grid item lg={4}>

  495.                                 {FieldUtils.getTextField({

  496.                                     label: "Org.Name (English):",

  497.                                     valueName: "enCompanyName",

  498.                                     disabled: true,

  499.                                     form: formik

  500.                                 })}

  501.                             </Grid>

  502. 

  503.                             <Grid item lg={4}>

  504.                                 {FieldUtils.getTextField({

  505.                                     label: "Org.Name (Chinese):",

  506.                                     valueName: "chCompanyName",

  507.                                     disabled: true,

  508.                                     form: formik

  509.                                 })}

  510.                             </Grid>

  511. 

  512.                             <Grid item lg={4}>

  513.                                 {FieldUtils.getTextField({

  514.                                     label: "BR No.:",

  515.                                     valueName: "brNo",

  516.                                     disabled: true,

  517.                                     form: formik

  518.                                 })}

  519.                             </Grid>

  520. 

  521.                             <Grid item lg={4}>

  522.                                 {FieldUtils.getComboField({

  523.                                     label: "Country:",

  524.                                     valueName: "country",

  525.                                     dataList: ComboData.country,

  526.                                     disabled: true,

  527.                                     form: formik

  528.                                 })}

  529.                             </Grid>

  530. 

  531.                             <Grid item lg={4}>

  532.                                 {FieldUtils.getPhoneField({

  533.                                     label: "Fax No.:",

  534.                                     valueName: {

  535.                                         code: "fax_countryCode",

  536.                                         num: "faxNumber"

  537.                                     },

  538.                                     disabled: true,

  539.                                     form: formik

  540.                                 })}

  541.                             </Grid>

  542. 

  543.                             <Grid item lg={4}>

  544.                                 {FieldUtils.getDateField({

  545.                                     label: "BR Expiry Date.:",

  546.                                     valueName: "brExpiryDate",

  547.                                     disabled: true,

  548.                                     form: formik

  549.                                 })}

  550.                             </Grid>

  551. 

  552.                             <Grid item lg={4}>

  553.                                 {FieldUtils.getAddressField({

  554.                                     label: "Address:",

  555.                                     valueName: ["addressLine1", "addressLine2", "addressLine3"],

  556.                                     disabled: true,

  557.                                     form: formik

  558.                                 })}

  559.                             </Grid>

  560. 

  561.                             <Grid item lg={4}>

  562.                                 {FieldUtils.getComboField({

  563.                                     label: "District:",

  564.                                     valueName: "district",

  565.                                     dataList: ComboData.district,

  566.                                     disabled: true,

  567.                                     form: formik

  568.                                 })}

  569.                             </Grid>

  570.                         </Grid>

  571.                     </div>

  572.                     <br />

  573.                 </form>

  574.             }

  575.             <div>

  576.                 <Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)}  >

  577.                     <DialogTitle><Typography variant="h3">Warning</Typography></DialogTitle>

  578.                     <DialogContent style={{ display: 'flex', }}>

  579.                         <Typography variant="h4" style={{ padding: '16px' }}>{warningText}</Typography>

  580.                     </DialogContent>

  581.                     <DialogActions>

  582.                         <Button onClick={() => setIsWarningPopUp(false)}><Typography variant="h5">Close</Typography></Button>

  583.                     </DialogActions>

  584.                 </Dialog>

  585.             </div>

  586.             <div>

  587.                 <Dialog open={isConfirmPopUp} onClose={() => setIsConfirmPopUp(false)}  >

  588.                     <DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>

  589.                     <DialogContent style={{ display: 'flex', }}>

  590.                         <Typography variant="h4" style={{ padding: '16px' }}>{confirmText}</Typography>

  591.                     </DialogContent>

  592.                     <DialogActions>

  593.                         <Button onClick={() => { setIsConfirmPopUp(false) }}><Typography variant="h5">Close</Typography></Button>

  594.                         <Button onClick={() => { confirmAction?.function(); }}><Typography variant="h5">Confirm</Typography></Button>

  595.                     </DialogActions>

  596.                 </Dialog>

  597.             </div>

  598.         </MainCard>

  599.     );

  600. };

  601. 

  602. export default UserInformationCard_Organization;