kelvinsuen
/
LIONER-frontend
1
0
Fork 0
Código Incidencias 0 Pull Requests 0 Lanzamientos 0 Wiki Actividad
Explorar el Código

update client & pdf pages

master
kelvinsuen hace 3 semanas
padre
7614f323fd
commit
3cd7e19acd
Se han modificado 5 ficheros con 63 adiciones y 170 borrados
Dividir vista
Opciones de diferencias
Mostrar estadísticas Descargar archivo de parche Descargar archivo de diferencias
  1. +40
    -127
      src/pages/client/ClientMaintainPage/ClientForm.js
  2. +4
    -20
      src/pages/client/ClientSearchPage/ClientSearchForm.js
  3. +13
    -20
      src/pages/client/ClientSearchPage/ClientTable.js
  4. +1
    -1
      src/pages/pdf/PdfSearchPage/PdfTable.js
  5. +5
    -2
      src/pages/pdf/PdfSearchPage/index.js

+ 40
- 127
src/pages/client/ClientMaintainPage/ClientForm.js Ver fichero

@@ -67,26 +67,9 @@ const ClientForm = ({ refClientDetail,

//form data
const {register, getValues, setValue} = useForm();
const [createDate, setCreateDate] = useState(null);
// const [awardDate, setAwardDate] = useState(null);
// const [deadlineDate, setDeadlineDate] = useState(null);
// const [announceDate, setAnnounceDate] = useState(null);
// const [selectedRegion, setSelectedRegion] = useState(null);
// const [selectedType, setSelectedType] = useState(null);
// const [selectedSubDivision, setSelectedSubDivision] = useState([]);
// const [fromDate, setFromDate] = useState(null);
// const [toDate, setToDate] = useState(null);
// const [reminderFlag, setReminderFlag] = useState(false);
// const [isFlagFetched, setIsFlagFetched] = useState(false);

// //reminder option
// const [selectedFrequency, setSelectedFrequency] = useState(null);
// const [nextApplicationDate, setNextApplicationDate] = useState(null);

// //combo list
// const [subDivisionList, setSubDivisionList] = useState([]);

const [createDateError, setCreateDateError] = React.useState(null);
const [dob, setDob] = useState(null);

const [dobError, setDobError] = React.useState(null);
const [awardDateError, setAwardDateError] = React.useState(null);
const [deadlineDateError, setDeadlineDateError] = React.useState(null);
const [announceDateError, setAnnounceDateError] = React.useState(null);
@@ -94,13 +77,13 @@ const ClientForm = ({ refClientDetail,
const [toError, setToError] = React.useState(null);
// const [nextApplicationDateError, setNextApplicationDateError] = React.useState(null);

const createDateErrorMessage = React.useMemo(() => {
switch (createDateError) {
const dobErrorMessage = React.useMemo(() => {
switch (dobError) {
case 'invalidDate': {
return "Invalid date";
}
}
}, [createDateError]);
}, [dobError]);

const awardDateErrorMessage = React.useMemo(() => {
switch (awardDateError) {
@@ -168,13 +151,13 @@ const ClientForm = ({ refClientDetail,
// if(applicationList.length===0){
// validateReminder();
// }
// },[createDate, nextApplicationDate, deadlineDate]);
// },[dob, nextApplicationDate, deadlineDate]);

// const validateReminder = () =>{
// const values = getValues();
// let firstIssueDate = null;
// let reminderDates = [];
// if (createDate !== null &&
// if (dob !== null &&
// nextApplicationDate !== null &&
// values.reminderThreshold !== null &&
// values.reminderInterval !== null &&
@@ -182,7 +165,7 @@ const ClientForm = ({ refClientDetail,
// ) {
// //have value
// if(applicationList.length <=0){
// firstIssueDate = createDate.add(-values.reminderThreshold,'days');
// firstIssueDate = dob.add(-values.reminderThreshold,'days');
// }
// else{
// firstIssueDate = nextApplicationDate.add(-values.reminderThreshold, 'days');
@@ -307,10 +290,8 @@ const ClientForm = ({ refClientDetail,
if (!isObjEmpty(refClient)) {
//checkOvertime();
if(refId !== null){
setValue("fullname", refClient.fullname);
setValue("lastname", refClient.lastname);
setValue("firstname", refClient.firstname);
setValue("title", refClient.title);
setValue("email", refClient.email);
setValue("phone1", refClient.phone1);
setValue("phone2", refClient.phone2);
@@ -318,7 +299,7 @@ const ClientForm = ({ refClientDetail,
setValue("caseManagerId", 1);
setValue("consultantId", 1);
}
setCreateDate(dayjs(getDateString(refClient.created)));
setDob(dayjs(getDateString(refClient.dob)));
}
},[refClient]);

@@ -331,7 +312,7 @@ const ClientForm = ({ refClientDetail,
setIsEditing(true);
}
},[refClient]);
// },[refClient,selectedSubDivision,selectedRegion,selectedType, createDate, deadlineDate]);
// },[refClient,selectedSubDivision,selectedRegion,selectedType, dob, deadlineDate]);

// useEffect(()=>{
// if(selectedFrequency !== null){
@@ -344,19 +325,19 @@ const ClientForm = ({ refClientDetail,
// }

// if (isEditing){
// if (createDate !== null){
// if (dob !== null){
// switch(selectedFrequency.key){
// case 1:
// setNextApplicationDate(createDate.add(1,'month'));
// setNextApplicationDate(dob.add(1,'month'));
// break;
// case 2:
// setNextApplicationDate(createDate.add(3,'month'));
// setNextApplicationDate(dob.add(3,'month'));
// break;
// case 3:
// setNextApplicationDate(createDate.add(1,'year'));
// setNextApplicationDate(dob.add(1,'year'));
// break;
// case 4:
// setNextApplicationDate(createDate.add(6,'month'));
// setNextApplicationDate(dob.add(6,'month'));
// break;
// default:
// setNextApplicationDate(nextApplicationDate);
@@ -365,7 +346,7 @@ const ClientForm = ({ refClientDetail,
// }
// }
// }
// },[selectedFrequency,createDate]);
// },[selectedFrequency,dob]);

// useEffect(() => {
// //if state data are ready and assign to different field
@@ -387,27 +368,18 @@ const ClientForm = ({ refClientDetail,
const values = getValues();
const formErrors = {};

if (isStringEmptyAfterTrim(values.fullname)) {
formErrors.fullname = 'Client Name is required';
if (isStringEmptyAfterTrim(values.lastname)) {
formErrors.lastname = 'Last Name is required';
}


// if (selectedRegion === null ) {
// formErrors.region = 'Client Region is required';
// }

// if (isStringEmptyAfterTrim(values.organization)) {
// formErrors.organization = 'Client Organization is required';
// }

// if (selectedType === null) {
// formErrors.type = 'Client Type is required';
// if (dob === null) {
// formErrors.dob = 'DoB is required';
// }

if (createDate === null) {
formErrors.createDate = 'Create Date is required';
}

// if (deadlineDate === null) {
// formErrors.deadlineDate = 'Deadline Date is required';
// }
@@ -448,7 +420,7 @@ const ClientForm = ({ refClientDetail,

setErrors(formErrors);
// if (Object.keys(formErrors).length === 0 //&&
// !createDateError && !awardDateError &&
// !dobError && !awardDateError &&
// !deadlineDateError && !announceDateError &&
// !fromError && !toError && !nextApplicationDateError
// ) {
@@ -480,7 +452,7 @@ const ClientForm = ({ refClientDetail,
// data["phone1"] = values.phone1;
// data["phone2"] = values.phone2;
// data["remarks"] = values.remarks;
// data["createDate"] = createDate === null ? null : dayjs(createDate).format('YYYY-MM-DD');
// data["dob"] = dob === null ? null : dayjs(dob).format('YYYY-MM-DD');
// setClientDetail(data);
// }
// }
@@ -493,17 +465,15 @@ const ClientForm = ({ refClientDetail,
if (Object.keys(formErrors).length === 0) {
let data = {};
data["id"] = isNewRecord ? params.id : refClientDetail.id;
data["fullname"] = values.fullname;
data["lastname"] = values.lastname;
data["firstname"] = values.firstname;
data["title"] = values.title;
data["email"] = values.email;
data["phone1"] = values.phone1;
data["phone2"] = values.phone2;
data["remarks"] = values.remarks;
data["caseManagerId"] = 1;
data["consultantId"] = 1;
data["createDate"] = createDate === null ? null : dayjs(createDate).format('YYYY-MM-DD');
data["dob"] = dob === null ? null : dayjs(dob).format('YYYY-MM-DD');
setClientDetail(data);
}
else if(isCollectData){
@@ -597,41 +567,7 @@ const ClientForm = ({ refClientDetail,
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3,mt:1, display: 'flex', alignItems: 'flex-start'}}>
<Typography variant="lionerSize" component="span">
Client Name:
<Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
</Typography>
</Grid>

<Grid item xs={7} s={7} md={7} lg={7}>
<TextField
fullWidth
{...register("fullname",
{
value: refClient.fullname,
})}
id='fullname'
required
inputProps={{maxLength: 255, style: {fontSize: '1.1rem'}}}
InputProps={{
style: { minHeight:'42.5px', maxHeight: '50vh' },
}}
multiline
maxRows={3}
error={!!errors.fullname}
helperText={errors.fullname}
disabled={!isEditing}
autoComplete="off"
/>
</Grid>
</Grid>
</Grid>

<Grid item xs={12} s={12} md={12} lg={5.5} sx={{mt:1, ml: 3, mr: 3, mb: 3}}>
<Grid container alignItems={"flex-start"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3,mt:1, display: 'flex', alignItems: 'flex-start'}}>
<Typography variant="lionerSize" component="span">
Last Name:
Last Name: <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
</Typography>
</Grid>

@@ -650,6 +586,8 @@ const ClientForm = ({ refClientDetail,
}}
multiline
maxRows={3}
error={!!errors.lastname}
helperText={errors.lastname}
disabled={!isEditing}
autoComplete="off"
/>
@@ -725,7 +663,7 @@ const ClientForm = ({ refClientDetail,
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
<Typography variant="lionerSize" component="span">
Create Date: <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
Date of Birth:
</Typography>
</Grid>

@@ -733,18 +671,18 @@ const ClientForm = ({ refClientDetail,
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DemoItem components={['DatePicker']}>
<DatePicker
id="createDate"
id="dob"
size="small"
required='true'
value={createDate === null ? null : dayjs(createDate)}
onChange={(newValue) => setCreateDate(newValue)}
required
value={dob === null ? null : dayjs(dob)}
onChange={(newValue) => setDob(newValue)}
format="DD/MM/YYYY"
onError={(newError) => setCreateDateError(newError)}
onError={(newError) => setDobError(newError)}
slotProps={{
field: { clearable: true },
textField: {
error: !!errors.createDate || createDateError,
helperText: createDateError ? createDateErrorMessage : errors.createDate,
error: !!errors.dob || dobError,
helperText: dobError ? dobErrorMessage : errors.dob,
},
}}
disabled={!isEditing}
@@ -755,32 +693,6 @@ const ClientForm = ({ refClientDetail,
</Grid>
</Grid>

<Grid item xs={12} sm={12} md={12} lg={5.5} sx={{ml: 3, mr: 3, mb: 3}}>
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
<Typography variant="lionerSize" component="span">
Title:
</Typography>
</Grid>

<Grid item xs={7} s={7} md={7} lg={6.5}>
<TextField
fullWidth
inputProps={{maxLength: 50}}
size="small"
{...register("title",
{
value: refClient.title,
})}
id='title'
disabled={!isEditing}
autoComplete="off"
/>
</Grid>
</Grid>
</Grid>

<Grid item xs={12} sm={12} md={12} lg={5.5} sx={{ml: 3, mr: 3, mb: 3}}>
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
@@ -1015,7 +927,7 @@ const ClientForm = ({ refClientDetail,
{!isNewRecord && (<Button
variant="contained"
color="delete"
disabled={!ability.can('DELETE','EVENT')}
disabled={!ability.can('MAINTAIN','CLIENT')}
onClick={handleDeleteClick}
>
Delete
@@ -1072,7 +984,7 @@ const ClientForm = ({ refClientDetail,
variant="contained"
color="save"
onClick={updateIsEdit}
disabled={ability.can('EDIT','ALL_RECORD')? false : !ability.can('EDIT','EVENT')}
disabled={!ability.can('MAINTAIN','CLIENT')}
>
Edit
</Button>
@@ -1082,9 +994,10 @@ const ClientForm = ({ refClientDetail,
variant="contained"
color="cancel"
onClick={returnSearchPage}
disabled={ability.can('EDIT','ALL_RECORD')? false : !ability.can('EDIT','EVENT')}
disabled={!ability.can('VIEW','CLIENT')}
>
Back </Button>
Back
</Button>
</Grid>
</Grid>
</Grid>


+ 4
- 20
src/pages/client/ClientSearchPage/ClientSearchForm.js Ver fichero

@@ -11,7 +11,7 @@ import {useContext, useState} from "react";
import Autocomplete from '@mui/material/Autocomplete';
import * as React from "react";
// import axios from "axios";
// import {apiPath, getUserData} from "../../../auth/utils";
import {apiPath, getUserData} from "../../../auth/utils";
// import {
// GET_CONSULTANT_COMBO_LIST, GET_EVENT_EXPORT,
// GET_SUB_CONSULTANT_COMBO_LIST, POST_SEARCH_TEMPLATE_PATH, VALIDATE_TEMPLATE_NAME_PATH,
@@ -203,10 +203,6 @@ const ClientSearchForm = ({applySearch, setExpanded,expanded}) => {
// }, [userConsultant,consultantList]);

function resetForm(){
// setSelectedCaseManager([]);
// setSelectedConsultants([]);
// setSelectedRegion(null);
// setSelectedType(null);
setCreateDateFrom(null);
setCreateDateTo(null);
// setToDate(null);
@@ -244,18 +240,6 @@ const ClientSearchForm = ({applySearch, setExpanded,expanded}) => {
<ThemeProvider theme={LIONER_FORM_THEME}>
{/*row 2*/}
<Grid container alignItems={"flex-start"} >
<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:0.5}}>
<InputLabel htmlFor="clientName">Client Name</InputLabel>
<TextField
fullWidth
{...register("fullname")}
id='fullname'
inputProps={{maxLength: 255}}
// label="Client Name"
autoComplete="off"
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:0.5}}>
<InputLabel htmlFor="clientLastName">Client Last Name</InputLabel>
<TextField
@@ -356,7 +340,7 @@ const ClientSearchForm = ({applySearch, setExpanded,expanded}) => {
/>
</Grid> */}

<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:0.5}}>
{/* <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:0.5}}>
<InputLabel htmlFor="createDateFrom">Create Date</InputLabel>

<Grid container>
@@ -406,7 +390,7 @@ const ClientSearchForm = ({applySearch, setExpanded,expanded}) => {
</LocalizationProvider>
</Grid>
</Grid>
</Grid>
</Grid> */}

<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:0.5}}>
<InputLabel htmlFor="remarks">Remarks</InputLabel>
@@ -463,7 +447,7 @@ const ClientSearchForm = ({applySearch, setExpanded,expanded}) => {

<Grid item>
<Grid container>
{ability.can('EDIT','EVENT') ?
{ability.can('MAINTAIN','CLIENT') ?
<Grid item sx={{ml:3, mr:3, mb:0.5}}>
<Button
variant="contained"


+ 13
- 20
src/pages/client/ClientSearchPage/ClientTable.js Ver fichero

@@ -95,30 +95,23 @@ export default function ClientTable({recordList, pageSize}) {
renderCell: (params) => {
return (
<div style={{display: 'flex', alignItems: 'center', justifyContent: 'center', whiteSpace: 'normal', wordBreak: 'break-word'}}>
{params.value}
{/* {params.row.title ? `(${params.row.title})` : ''} {params.value} */}
{params.row.firstname ? ` ${params.row.lastname} ${params.row.firstname}` : `Mr/Ms ${params.row.lastname}`}
</div>
);
}
},
{
id: 'title',
field: 'title',
headerName: 'Title',
flex: 1.5,
},
{
id: 'created',
field: 'created',
headerName: 'Create Date',
flex: 1,
sortComparator: dateComparator,
renderCell: (params) => (
<div>
{getDateString(params.row.created, 'dd/MM/yyyy')}
</div>
),
},
// {
// id: 'created',
// field: 'created',
// headerName: 'Create Date',
// flex: 1,
// sortComparator: dateComparator,
// renderCell: (params) => (
// <div>
// {getDateString(params.row.created, 'dd/MM/yyyy')}
// </div>
// ),
// },
// {
// id: 'lastname',
// field: 'lastname',


+ 1
- 1
src/pages/pdf/PdfSearchPage/PdfTable.js Ver fichero

@@ -108,7 +108,7 @@ export default function PdfTable({recordList}) {
{
id: 'createDate',
field: 'createDate',
headerName: 'Create Date',
headerName: 'Create Datetime',
flex: 1,
sortComparator: dateComparator,
renderCell: (params) => (


+ 5
- 2
src/pages/pdf/PdfSearchPage/index.js Ver fichero

@@ -70,7 +70,7 @@ const PdfSearchPage = () => {
)
.then((response) => {
if (response.status === 200) {
setClientInfo(response.data);
setClientInfo(response.data.data);
}
})
.catch(error => {
@@ -101,7 +101,10 @@ const PdfSearchPage = () => {
<Grid container maxWidth justifyContent="space-between" sx={{mt:-2, width:CARD_MAX_WIDTH}} >
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ mb: 2, display: 'flex', alignItems: 'center'}}>
<Typography variant="h2">{clientInfo.data? clientInfo.data.fullname:""}</Typography>
<Typography variant="h2"> {clientInfo?
clientInfo.firstname ? ` ${clientInfo.lastname} ${clientInfo.firstname}` : `Mr/Ms ${clientInfo.lastname}`
:""}
</Typography>
</Grid>
</Grid>
</Grid>


Escribir Vista previa
Cargando…
Cancelar
Guardar