alex
/
PNSPS-frontend-MaterialUI
2
0
Разклонения 0
Код Задачи 0 Заявки за сливане 0 Версии 0 Уики 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.
1648 Ревизии
3 Клонове
16 MiB
 
 
ИН на ревизия: 0294c7c8ad
Клонове Маркери
${ item.name }
Create branch ${ searchTerm }
от '0294c7c8ad'
${ noResults }
PNSPS-frontend-MaterialUI/src/pages/Organization/DetailPage/OrganizationPubCard.js

404 lines
19 KiB
Директен файл Blame История 

  1. // material-ui

  2. import {

  3.     Grid, Button,

  4.     // Checkbox, FormControlLabel,

  5.     Typography,

  6.     Dialog, DialogTitle, DialogContent, DialogActions,

  7.     FormHelperText, CircularProgress,

  8. } from '@mui/material';

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

  10. import MainCard from "components/MainCard";

  11. import * as React from "react";

  12. import { useFormik } from 'formik';

  13. import * as yup from 'yup';

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

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

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

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

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

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

  20. import Loadable from 'components/Loadable';

  21. import { lazy } from 'react';

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

  23. import { FormattedMessage, useIntl } from "react-intl";

  24. import { PNSPS_BUTTON_THEME } from "themes/buttonConst";

  25. import { ThemeProvider } from "@emotion/react";

  26. import { useNavigate } from "react-router-dom";

  27. 

  28. // ==============================|| DASHBOARD - DEFAULT ||============================== //

  29. 

  30. 

  31. const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {

  32.     const intl = useIntl();

  33.     const navigate = useNavigate();

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

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

  36. 

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

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

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

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

  41.     const [errorMsg, setErrorMsg] = useState("");

  42. 

  43.     useEffect(() => {

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

  45.         // console.log(currentApplicationDetailData)

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

  47.             setOnReady(true);

  48.         }

  49.     }, [currentUserData]);

  50. 

  51.     function displayErrorMsg(errorMsg) {

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

  53.     }

  54. 

  55.     const formik = useFormik({

  56.         enableReinitialize: true,

  57.         initialValues: currentUserData,

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

  59.             addressLine1: yup.string().max(40).required(displayErrorMsg(intl.formatMessage({ id: 'validateAddressLine1' }))),

  60.             addressLine2: yup.string().max(40, displayErrorMsg(intl.formatMessage({ id: 'noMoreThen40Words' }))),

  61.             addressLine3: yup.string().max(40, displayErrorMsg(intl.formatMessage({ id: 'noMoreThen40Words' }))),

  62.             tel_countryCode: yup.string().min(3, displayErrorMsg(intl.formatMessage({ id: 'requireDialingCode' }))),

  63.             phoneNumber: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'requiredValidNumber' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requireContactNumber' }))),

  64.             faxNumber: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'require8Number' }))).nullable(),

  65.         }),

  66.         onSubmit: (values) => {

  67.             if (values.country == null) {

  68.                 setErrorMsg(intl.formatMessage({ id: 'pleaseFillInCountry' }))

  69.                 return;

  70.             }

  71.             if (values.country.type == "hongKong" && values.district == null) {

  72.                 setErrorMsg(intl.formatMessage({ id: 'pleaseFillInDistrict' }))

  73.                 return;

  74.             }

  75.             return new Promise((resolve, reject) => {

  76.                 HttpUtils.post({

  77.                     url: UrlUtils.POST_PUB_ORG_SAVE_PATH,

  78.                     params: {

  79.                         contactPerson: values.contactPerson,

  80.                         contactTel: {

  81.                             countryCode: values.tel_countryCode,

  82.                             phoneNumber: values.phoneNumber

  83.                         },

  84.                         faxNo: {

  85.                             countryCode: values.fax_countryCode,

  86.                             faxNumber: values.faxNumber

  87.                         },

  88.                         addressTemp: {

  89.                             country: values.country.type,

  90.                             district: values.district?.type,

  91.                             addressLine1: values.addressLine1,

  92.                             addressLine2: values.addressLine2,

  93.                             addressLine3: values.addressLine3,

  94.                         },

  95.                     },

  96.                     onSuccess: function () {

  97.                         notifySaveSuccess()

  98.                         loadDataFun();

  99.                         setEditMode(false);

  100.                         resolve();

  101.                     },

  102.                     onFail: () => reject(),

  103.                     onError: () => reject(),

  104.                 });

  105.             });

  106.         }

  107.     });

  108. 

  109.     useEffect(() => {

  110.         setEditModeFun(editMode);

  111.     }, [editMode]);

  112. 

  113.     useEffect(() => {

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

  115.             setCreateMode(id <= 0);

  116.             setEditMode(id <= 0);

  117.             setCurrentUserData(userData);

  118.         }

  119.     }, [userData]);

  120. 

  121.     // useEffect(() => {

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

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

  124.     //             userData.creditor = false

  125.     //         }

  126.     //         setCurrentUserData(userData);

  127.     //     }

  128.     // }, []);

  129. 

  130.     const onEditClick = () => {

  131.         setEditMode(true);

  132.     };

  133. 

  134.     return (

  135.         <MainCard elevation={0}

  136.             border={false}

  137.             content={false}

  138.         >

  139. 

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

  141. 

  142.                 {/*top*/}

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

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

  145. 

  146.                         {editMode ?

  147.                             <>

  148.                                 {createMode ?

  149.                                     <>

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

  151.                                             <ThemeProvider theme={PNSPS_BUTTON_THEME}>

  152.                                                 <Button

  153.                                                     variant="contained"

  154.                                                     type="submit"

  155.                                                     color="success"

  156.                                                     disabled={formik.isSubmitting}

  157.                                                     startIcon={formik.isSubmitting ? <CircularProgress color="inherit" size={18} /> : null}

  158.                                                 >

  159.                                                     <FormattedMessage id="create" />

  160.                                                 </Button>

  161.                                             </ThemeProvider>

  162.                                         </Grid>

  163.                                     </> :

  164.                                     <>

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

  166.                                             <ThemeProvider theme={PNSPS_BUTTON_THEME}>

  167.                                                 <Button

  168.                                                     variant="contained"

  169.                                                     color="cancel"

  170.                                                     onClick={loadDataFun}

  171.                                                 >

  172.                                                     <FormattedMessage id="resetAndBack" />

  173.                                                 </Button>

  174.                                             </ThemeProvider>

  175.                                         </Grid>

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

  177.                                             <ThemeProvider theme={PNSPS_BUTTON_THEME}>

  178.                                                 <Button

  179.                                                     variant="contained"

  180.                                                     type="submit"

  181.                                                     color="success"

  182.                                                     disabled={formik.isSubmitting}

  183.                                                     startIcon={formik.isSubmitting ? <CircularProgress color="inherit" size={18} /> : null}

  184.                                                 >

  185.                                                     <FormattedMessage id="save" />

  186.                                                 </Button>

  187.                                             </ThemeProvider>

  188.                                         </Grid>

  189.                                     </>

  190.                                 }

  191.                             </>

  192.                             :

  193.                             <>

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

  195.                                     <ThemeProvider theme={PNSPS_BUTTON_THEME}>

  196.                                         <Button

  197.                                             variant="contained"

  198.                                             onClick={onEditClick}

  199.                                             color="success"

  200.                                         >

  201.                                             <   FormattedMessage id="edit" />

  202.                                         </Button>

  203.                                     </ThemeProvider>

  204.                                 </Grid>

  205.                                 {currentUserData.canSubmitBr ?

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

  207.                                         <ThemeProvider theme={PNSPS_BUTTON_THEME}>

  208.                                             <Button

  209.                                                 variant="contained"

  210.                                                 onClick={() => navigate("/org/submit-br")}

  211.                                                 color="success"

  212.                                             >

  213.                                                 <FormattedMessage id="submitBrCertificate" />

  214.                                             </Button>

  215.                                         </ThemeProvider>

  216.                                     </Grid>

  217.                                     : null}

  218.                             </>

  219.                         }

  220.                     </Grid>

  221.                 </Grid>

  222.                 {/*top*/}

  223. 

  224.                 {!onReady ?

  225.                     <LoadingComponent />

  226.                     :

  227.                     <Grid container spacing={1}>

  228.                         {/* <Grid item xs={12}>

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

  230.                                 <FormattedMessage id="organizationDetails" />

  231.                             </Typography>

  232.                         </Grid> */}

  233.                         <Grid item xs={12}>

  234.                             <FormHelperText error id="helper-text-address1-signup">

  235.                                 <Typography variant="errorMessage1">

  236.                                     {errorMsg}

  237.                                 </Typography>

  238.                             </FormHelperText>

  239.                         </Grid>

  240.                         <Grid item xs={12} lg={4} >

  241.                             {FieldUtils.getTextField({

  242.                                 label: intl.formatMessage({ id: 'brNo' }) + ":",

  243.                                 valueName: "brNo",

  244.                                 disabled: true,

  245.                                 form: formik

  246.                             })}

  247.                         </Grid>

  248.                         <Grid item xs={12} lg={4} >

  249.                             {FieldUtils.getTextField({

  250.                                 label: FieldUtils.notNullFieldLabel(intl.formatMessage({ id: 'expiryDate' }) + ":"),

  251.                                 valueName: "brExpiryDate",

  252.                                 disabled: true,

  253.                                 form: formik,

  254.                                 displayValue: (!editMode && !createMode && currentUserData.brStatus)

  255.                                     ? `${formik.values.brExpiryDate || ""} (${currentUserData.brStatus === "Invalid"

  256.                                         ? intl.formatMessage({ id: "brStatusInvalid" })

  257.                                         : intl.formatMessage({ id: "brStatusValid" })})`.trim()

  258.                                     : undefined

  259.                             })}

  260.                         </Grid>

  261. 

  262.                         <Grid item xs={12} lg={4} >

  263.                             {FieldUtils.getTextField({

  264.                                 label: FieldUtils.notNullFieldLabel(intl.formatMessage({ id: 'nameEng' }) + ":"),

  265.                                 valueName: "enCompanyName",

  266.                                 disabled: true,

  267.                                 form: formik

  268.                             })}

  269.                         </Grid>

  270. 

  271.                         <Grid item xs={12} lg={4} >

  272.                             {FieldUtils.getTextField({

  273.                                 label: intl.formatMessage({ id: 'nameChi' }) + ":",

  274.                                 valueName: "chCompanyName",

  275.                                 disabled: true,

  276.                                 form: formik

  277.                             })}

  278.                         </Grid>

  279. 

  280.                         <Grid item xs={12} lg={4} >

  281. 

  282.                         </Grid>

  283. 

  284.                         <Grid item xs={12} lg={4} >

  285.                             {FieldUtils.getTextField({

  286.                                 label: FieldUtils.notNullFieldLabel(intl.formatMessage({ id: 'contactPerson' }) + ":"),

  287.                                 valueName: "contactPerson",

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

  289.                                 form: formik

  290.                             })}

  291.                         </Grid>

  292. 

  293.                         <Grid item xs={12} lg={4} >

  294.                             {FieldUtils.getPhoneField({

  295.                                 label: FieldUtils.notNullFieldLabel(intl.formatMessage({ id: 'userContactNumber' }) + ":"),

  296.                                 valueName: {

  297.                                     code: "tel_countryCode",

  298.                                     num: "phoneNumber"

  299.                                 },

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

  301.                                 form: formik

  302.                             })}

  303.                         </Grid>

  304. 

  305.                         <Grid item xs={12} lg={4} >

  306.                             {FieldUtils.getPhoneField({

  307.                                 label: intl.formatMessage({ id: 'contactFaxNumber' }) + ":",

  308.                                 valueName: {

  309.                                     code: "fax_countryCode",

  310.                                     num: "faxNumber"

  311.                                 },

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

  313.                                 form: formik

  314.                             })}

  315.                         </Grid>

  316. 

  317.                         <Grid item xs={12} lg={12} >

  318.                             {FieldUtils.getAddressField({

  319.                                 label: FieldUtils.notNullFieldLabel(intl.formatMessage({ id: 'formAddress' }) + ":"),

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

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

  322.                                 form: formik

  323.                             })}

  324.                         </Grid>

  325. 

  326.                         <Grid item xs={12} lg={12} >

  327.                             {FieldUtils.getProfileComboField({

  328.                                 // label: FieldUtils.notNullFieldLabel(""),

  329.                                 label: "",

  330.                                 valueName: "district",

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

  332.                                 dataList: ComboData.district,

  333.                                 getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "",

  334.                                 form: formik

  335.                             })}

  336.                         </Grid>

  337.                         

  338.                         <Grid item xs={12} lg={12} >

  339.                             {FieldUtils.getProfileComboField({

  340.                                 // label: FieldUtils.notNullFieldLabel(""),

  341.                                 label: "",

  342.                                 valueName: "country",

  343.                                 disabled: true,

  344.                                 dataList: ComboData.country,

  345.                                 getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "",

  346.                                 form: formik

  347.                             })}

  348.                         </Grid>

  349. 

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

  351. 

  352.                     </Grid>

  353.                 }

  354.             </form>

  355.             <div>

  356.                 <Dialog

  357.                     open={creditorConfirmPopUp}

  358.                     onClose={() => setCreditorConfirmPopUp(false)}

  359.                     PaperProps={{

  360.                         sx: {

  361.                             minWidth: '40vw',

  362.                             maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },

  363.                             maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }

  364.                         }

  365.                     }}

  366.                 >

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

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

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

  370.                     </DialogContent>

  371.                     <DialogActions>

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

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

  374.                     </DialogActions>

  375.                 </Dialog>

  376.             </div>

  377.             <div>

  378.                 <Dialog

  379.                     open={nonCreditorConfirmPopUp}

  380.                     onClose={() => setNonCreditorConfirmPopUp(false)}

  381.                     PaperProps={{

  382.                         sx: {

  383.                             minWidth: '40vw',

  384.                             maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },

  385.                             maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }

  386.                         }

  387.                     }}

  388.                 >

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

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

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

  392.                     </DialogContent>

  393.                     <DialogActions>

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

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

  396.                     </DialogActions>

  397.                 </Dialog>

  398.             </div>

  399.         </MainCard>

  400.     );

  401. };

  402. 

  403. export default OrganizationPubCard;