alex
/
PNSPS-frontend-MaterialUI
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
493 Commits
5 Branches
19 MiB
 
 
Tree: 81b986cfe9
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '81b986cfe9'
${ noResults }
PNSPS-frontend-MaterialUI/src/pages/Organization/DetailPage/OrganizationCard.js

423 lines
19 KiB
Raw Blame History 

  1. // material-ui

  2. import {

  3.     Grid, Button, Checkbox, FormControlLabel, Typography,

  4.     Dialog, DialogTitle, DialogContent, DialogActions,

  5. } from '@mui/material';

  6. // import { FormControlLabel } from '@material-ui/core';

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

  8. import * as React from "react";

  9. import { useFormik } from 'formik';

  10. import * as yup from 'yup';

  11. import { useEffect, useState } from "react";

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

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

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

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

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

  17. import Loadable from 'components/Loadable';

  18. import { lazy } from 'react';

  19. import { notifySaveSuccess } from 'utils/CommonFunction';

  20. 

  21. // ==============================|| DASHBOARD - DEFAULT ||============================== //

  22. 

  23. 

  24. const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {

  25. 

  26.     const [creditorConfirmPopUp, setCreditorConfirmPopUp] = React.useState(false);

  27.     const [nonCreditorConfirmPopUp, setNonCreditorConfirmPopUp] = React.useState(false);

  28. 

  29.     const [currentUserData, setCurrentUserData] = useState({});

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

  31.     const [createMode, setCreateMode] = useState(false);

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

  33. 

  34.     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.             enCompanyName: yup.string().max(255).required(displayErrorMsg('請輸入英文名稱')),

  51.             chCompanyName: yup.string().max(255, displayErrorMsg('請輸入中文名稱')).nullable(),

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

  53.             addressLine2: yup.string().max(255, displayErrorMsg("length must <= 255")),

  54.             addressLine3: yup.string().max(255, displayErrorMsg("length must <= 255")),

  55.             fax_countryCode: yup.string().min(3, displayErrorMsg('請輸入國際區號')).nullable(),

  56.             tel_countryCode: yup.string().min(3, displayErrorMsg('請輸入國際區號')),

  57.             phoneNumber: yup.string().min(8, displayErrorMsg('請輸入有效聯絡電話')).required(displayErrorMsg('請輸入聯絡電話')),

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

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

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

  61.                 var brNo_pattern = /[0-9]{8}/

  62.                 if (value !== undefined) {

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

  64.                         return true

  65.                     } else {

  66.                         return false

  67.                     }

  68.                 }

  69.             }),

  70.         }),

  71.         onSubmit: vaule => {

  72.             console.log(vaule)

  73.             HttpUtils.post({

  74.                 url: UrlUtils.POST_ORG_SAVE_PATH,

  75.                 params: {

  76.                     id: id > 0 ? id : null,

  77.                     enCompanyName: vaule.enCompanyName,

  78.                     chCompanyName: vaule.chCompanyName,

  79.                     brNo: vaule.brNo,

  80.                     brExpiryDate: vaule.brExpiryDate,

  81.                     enCompanyNameTemp: vaule.enCompanyNameTemp,

  82.                     chCompanyNameTemp: vaule.chCompanyNameTemp,

  83.                     brExpiryDateTemp: vaule.brExpiryDateTemp,

  84.                     contactPerson: vaule.contactPerson,

  85.                     contactTel: {

  86.                         countryCode: vaule.tel_countryCode,

  87.                         phoneNumber: vaule.phoneNumber

  88.                     },

  89.                     faxNo: {

  90.                         countryCode: vaule.fax_countryCode,

  91.                         faxNumber: vaule.faxNumber

  92.                     },

  93.                     addressTemp: {

  94.                         country: vaule.country,

  95.                         district: vaule.district,

  96.                         addressLine1: vaule.addressLine1,

  97.                         addressLine2: vaule.addressLine2,

  98.                         addressLine3: vaule.addressLine3,

  99.                     },

  100.                     //creditor: vaule.creditor,

  101.                 },

  102.                 onSuccess: function () {

  103.                     notifySaveSuccess()

  104.                     loadDataFun();

  105.                     setEditMode(false);

  106.                 }

  107.             });

  108.         }

  109.     });

  110. 

  111.     useEffect(()=>{

  112.         setEditModeFun(editMode);

  113.     },[editMode]);

  114. 

  115.     useEffect(() => {

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

  117.             setCreateMode(id <= 0);

  118.             setEditMode(id <= 0);

  119.             setCurrentUserData(userData);

  120.         }

  121.     }, [userData]);

  122. 

  123.     // useEffect(() => {

  124.     //     if (Object.keys(userData).length > 0) {

  125.     //         if(userData.creditor === undefined||userData.creditor === null){

  126.     //             userData.creditor = false

  127.     //         }

  128.     //         setCurrentUserData(userData);

  129.     //     }

  130.     // }, []);

  131. 

  132.     const onEditClick = () => {

  133.         setEditMode(true);

  134.     };

  135. 

  136.     const markAsCreditor = () => {

  137.         setCreditorConfirmPopUp(false);

  138.         HttpUtils.get({

  139.             url: UrlUtils.GET_ORG_MARK_AS_CREDITOR + "/" + id,

  140.             onSuccess: () => {

  141.                 loadDataFun();

  142.             }

  143.         });

  144.     }

  145. 

  146.     const markAsNonCreditor = () => {

  147.         setNonCreditorConfirmPopUp(false);

  148.         HttpUtils.get({

  149.             url: UrlUtils.GET_ORG_MARK_AS_NON_CREDITOR + "/" + id,

  150.             onSuccess: () => {

  151.                 loadDataFun();

  152.             }

  153.         });

  154.     }

  155. 

  156.     return (

  157.         <MainCard elevation={0}

  158.             border={false}

  159.             content={false}

  160.         >

  161. 

  162.             <form onSubmit={formik.handleSubmit} style={{ padding: 24 }}>

  163. 

  164.                 {/*top*/}

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

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

  167. 

  168.                         {editMode ?

  169.                             <>

  170.                                 {createMode ?

  171.                                     <>

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

  173.                                             <Button

  174.                                                 size="large"

  175.                                                 variant="contained"

  176.                                                 type="submit"

  177.                                                 sx={{

  178.                                                     textTransform: 'capitalize',

  179.                                                     alignItems: 'end'

  180.                                                 }}

  181.                                             >

  182.                                                 <Typography variant="h5">Create</Typography>

  183.                                             </Button>

  184.                                         </Grid>

  185.                                     </> :

  186.                                     <>

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

  188.                                             <Button

  189.                                                 size="large"

  190.                                                 variant="contained"

  191.                                                 onClick={loadDataFun}

  192.                                                 sx={{

  193.                                                     textTransform: 'capitalize',

  194.                                                     alignItems: 'end'

  195.                                                 }}

  196.                                             >

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

  198.                                             </Button>

  199.                                         </Grid>

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

  201.                                             <Button

  202.                                                 size="large"

  203.                                                 variant="contained"

  204.                                                 type="submit"

  205.                                                 color="success"

  206.                                                 sx={{

  207.                                                     textTransform: 'capitalize',

  208.                                                     alignItems: 'end'

  209.                                                 }}

  210.                                             >

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

  212.                                             </Button>

  213.                                         </Grid>

  214.                                     </>

  215.                                 }

  216.                             </>

  217.                             :

  218.                             <>

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

  220.                                     <Button

  221.                                         size="large"

  222.                                         variant="contained"

  223.                                         sx={{

  224.                                             textTransform: 'capitalize',

  225.                                             alignItems: 'end'

  226.                                         }}

  227.                                         onClick={onEditClick}

  228.                                     >

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

  230.                                     </Button>

  231.                                 </Grid>

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

  233.                                     <Button

  234.                                         size="large"

  235.                                         variant="contained"

  236.                                         color="orange"

  237.                                         onClick={()=>setCreditorConfirmPopUp(true)}

  238.                                         sx={{

  239.                                             textTransform: 'capitalize',

  240.                                             alignItems: 'end'

  241.                                         }}

  242.                                     >

  243.                                         <Typography variant="h5">Mark as Creditor</Typography>

  244.                                     </Button>

  245.                                 </Grid>

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

  247.                                     <Button

  248.                                         size="large"

  249.                                         variant="contained"

  250.                                         color="error"

  251.                                         onClick={()=>setNonCreditorConfirmPopUp(true)}

  252.                                         sx={{

  253.                                             textTransform: 'capitalize',

  254.                                             alignItems: 'end'

  255.                                         }}

  256.                                     >

  257.                                         <Typography variant="h5">Mark as Non-Creditor</Typography>

  258.                                     </Button>

  259.                                 </Grid>

  260.                             </>

  261.                         }

  262.                     </Grid>

  263.                 </Grid>

  264.                 {/*top*/}

  265. 

  266.                 {!onReady ?

  267.                     <LoadingComponent />

  268.                     :

  269.                     <Grid container spacing={1}>

  270.                         <Grid item xs={12}>

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

  272.                                 Organisation Details

  273.                             </Typography>

  274.                         </Grid>

  275.                         <Grid item lg={4} >

  276.                             {FieldUtils.getTextField({

  277.                                 label: FieldUtils.notNullFieldLabel("BR No.:"),

  278.                                 valueName: "brNo",

  279.                                 disabled: (!editMode && !createMode),

  280.                                 form: formik

  281.                             })}

  282.                         </Grid>

  283. 

  284.                         <Grid item lg={4} >

  285.                             <FormControlLabel

  286.                                 control={<Checkbox checked={formik.values.creditor} />}

  287.                                 label="is Creditor"

  288.                                 name="creditor"

  289.                                 onChange={() => {

  290.                                     formik.setFieldValue("creditor", !formik.values.creditor);

  291.                                 }}

  292.                                 disabled={true}

  293.                             //disabled={!editMode && !createMode}

  294.                             />

  295.                         </Grid>

  296. 

  297.                         <Grid item lg={4} ></Grid>

  298. 

  299.                         <Grid item lg={4} >

  300.                             {FieldUtils.getTextField({

  301.                                 label: FieldUtils.notNullFieldLabel("Name (Eng):"),

  302.                                 valueName: "enCompanyName",

  303.                                 disabled: (!editMode && !createMode),

  304.                                 form: formik

  305.                             })}

  306.                         </Grid>

  307. 

  308.                         <Grid item lg={4} >

  309.                             {FieldUtils.getTextField({

  310.                                 label: "Name (Ch):",

  311.                                 valueName: "chCompanyName",

  312.                                 disabled: (!editMode && !createMode),

  313.                                 form: formik

  314.                             })}

  315.                         </Grid>

  316. 

  317.                         <Grid item lg={4} >

  318.                             {FieldUtils.getDateField({

  319.                                 label: FieldUtils.notNullFieldLabel("Expiry Date:"),

  320.                                 valueName: "brExpiryDate",

  321.                                 disabled: (!editMode && !createMode),

  322.                                 form: formik

  323.                             })}

  324.                         </Grid>

  325. 

  326.                         <Grid item lg={4} >

  327.                             {FieldUtils.getTextField({

  328.                                 label: FieldUtils.notNullFieldLabel("Contact Person:"),

  329.                                 valueName: "contactPerson",

  330.                                 disabled: (!editMode && !createMode),

  331.                                 form: formik

  332.                             })}

  333.                         </Grid>

  334. 

  335.                         <Grid item lg={4} >

  336.                             {FieldUtils.getPhoneField({

  337.                                 label: FieldUtils.notNullFieldLabel("Contact Tel:"),

  338.                                 valueName: {

  339.                                     code: "tel_countryCode",

  340.                                     num: "phoneNumber"

  341.                                 },

  342.                                 disabled: (!editMode && !createMode),

  343.                                 form: formik

  344.                             })}

  345.                         </Grid>

  346. 

  347.                         <Grid item lg={4} >

  348.                             {FieldUtils.getPhoneField({

  349.                                 label: "Fax No:",

  350.                                 valueName: {

  351.                                     code: "fax_countryCode",

  352.                                     num: "faxNumber"

  353.                                 },

  354.                                 disabled: (!editMode && !createMode),

  355.                                 form: formik

  356.                             })}

  357.                         </Grid>

  358. 

  359.                         <Grid item lg={4} >

  360.                             {FieldUtils.getComboField({

  361.                                 label: FieldUtils.notNullFieldLabel("Country:"),

  362.                                 valueName: "country",

  363.                                 disabled: (!editMode && !createMode),

  364.                                 dataList: ComboData.country,

  365.                                 form: formik

  366.                             })}

  367.                         </Grid>

  368. 

  369.                         <Grid item lg={4} >

  370.                             {FieldUtils.getComboField({

  371.                                 label: FieldUtils.notNullFieldLabel("District:"),

  372.                                 valueName: "district",

  373.                                 disabled: (!editMode && !createMode),

  374.                                 dataList: ComboData.district,

  375.                                 form: formik

  376.                             })}

  377.                         </Grid>

  378. 

  379. 

  380.                         <Grid item lg={4} >

  381.                             {FieldUtils.getAddressField({

  382.                                 label: FieldUtils.notNullFieldLabel("Address:"),

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

  384.                                 disabled: (!editMode && !createMode),

  385.                                 form: formik

  386.                             })}

  387.                         </Grid>

  388. 

  389.                         <Grid item lg={12} ></Grid>

  390. 

  391.                     </Grid>

  392.                 }

  393.             </form>

  394.             <div>

  395.                 <Dialog open={creditorConfirmPopUp} onClose={() => setCreditorConfirmPopUp(false)}  >

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

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

  398.                         <Typography variant="h4" style={{ padding: '16px' }}>Are you sure mark as Creditor?</Typography>

  399.                     </DialogContent>

  400.                     <DialogActions>

  401.                     <Button onClick={() => setCreditorConfirmPopUp(false)}><Typography variant="h5">Cancel</Typography></Button>

  402.                         <Button onClick={() => markAsCreditor()}><Typography variant="h5">Confirm</Typography></Button>

  403.                     </DialogActions>

  404.                 </Dialog>

  405.             </div>

  406.             <div>

  407.                 <Dialog open={nonCreditorConfirmPopUp} onClose={() => setNonCreditorConfirmPopUp(false)}  >

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

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

  410.                         <Typography variant="h4" style={{ padding: '16px' }}>Are you sure mark as Non-Creditor?</Typography>

  411.                     </DialogContent>

  412.                     <DialogActions>

  413.                     <Button onClick={() => setNonCreditorConfirmPopUp(false)}><Typography variant="h5">Cancel</Typography></Button>

  414.                         <Button onClick={() => markAsNonCreditor()}><Typography variant="h5">Confirm</Typography></Button>

  415.                     </DialogActions>

  416.                 </Dialog>

  417.             </div>

  418.         </MainCard>

  419.     );

  420. };

  421. 

  422. export default OrganizationCard;