Untitled
user_6104052
javascript
7 days ago
41 kB
2
Indexable
Never
import React, { useEffect, useRef, useState } from "react"; import { useDispatch } from "react-redux"; import DatePickerKendoRct from "src/control-components/date-picker/date-picker"; import DropDownKendoRct from "src/control-components/drop-down/drop-down"; import TextAreaKendo from "src/control-components/kendo-text-area/kendo-text-area"; import { json } from "stream/consumers"; import { useLocation, useNavigate } from "react-router"; import { clientServices } from "src/services/clientServices"; import { SaveDefaultClientObj } from "src/dataModels/clientDataModel"; import { ClinicDefaultGoalData } from "src/dataModels/clinicResponseModels"; import { loaderAction } from "src/redux/actions"; import moment from "moment"; import TextAreaKendoRct from "src/control-components/text-area/text-area"; import InputKendoRctV1 from "src/control-components/input/inputV1"; import { DropDownList } from "@progress/kendo-react-dropdowns"; import { ClientService } from "src/services/clientService"; import MultiSelectDropDown from 'src/control-components/multi-select-drop-down/multi-select-drop-down'; const AddNewDefaultGoals = () => { const frequencyData = [ { key: "Daily", value: "Daily" }, { key: "Weekly", value: "Weekly" }, { key: "Monthly", value: "Monthly" }, { key: "Bi-Monthly", value: "Bi-Monthly" }, { key: "Semi-Annually", value: "Semi-Annually" }, { key: "Quarterly", value: "Quarterly" }, { key: "Yearly", value: "Yearly" }, ]; let [fields, setFields] = useState( { staffTypeId: [], serviceTypeId: [] } ) const cletreatmentPlanObj: SaveDefaultClientObj[] = [{ defaultGoalObjective: [{ defaultGoalObjectiveInterventions: [{ freq: frequencyData[0].value, staffTypeIds: fields.staffTypeId,serviceTypeIds: fields.serviceTypeId }] }] }] const [goalList, setGoalList] = useState<SaveDefaultClientObj[]>(cletreatmentPlanObj) const navigate = useNavigate() const [errors, setErrors] = useState<any>({ Goalname: '* Goal Name is Required', startDate: "* Start date is required" ,objective:"* Objective is required",interventions:"* Interventions is required",numFreq:"* Frequency is required"}); const [btnPressed, setBtnPressed] = useState(false) const [isEdit, setIsEdit] = useState(false) const location = useLocation(); const dispatch = useDispatch() const [tpServicetypes, setTpServiceTypes] = useState([]) const [isTpFetched, setTpFetched] = useState(false) const [tpStaffTypes, setTpStaffTypes] = useState([]) useEffect(() => { setBtnPressed(false) }, [goalList]) useEffect(() => { if (!isTpFetched) { getTpServicetypes() getTpStaffTypes() setTpFetched(true) } }, [isTpFetched]) const getTpServicetypes = async () => { await ClientService.getTpServicetypes() .then(result => { let TpServicetypes = result?.resultData setTpServiceTypes(TpServicetypes) }).catch(error => { // renderErrors(error); }); } const getTpStaffTypes = async () => { await ClientService.getTpStaffType() .then(result => { let TpStaffTypes = result?.resultData setTpStaffTypes(TpStaffTypes) }).catch(error => { // renderErrors(error); }); } function renderToItem(li, itemProps) { const itemChildren = ( <span> <input type="checkbox" name={itemProps.dataItem} checked={itemProps.selected} onChange={(e) => itemProps.onClick(itemProps.index, e)} /> {li.props.children} </span> ); return React.cloneElement(li, li.props, itemChildren); } const handleChange = (e) => { const name = e.target.name; const value = e.target.value; setFields({ ...fields, [name]: value, }); }; useEffect(() => { if (location.state && location.state.id) { setIsEdit(true) const stateData: ClinicDefaultGoalData = location.state const creatorObj: SaveDefaultClientObj = { id: stateData.id, goalName: stateData.goalName, defaultGoalObjective: stateData.defaultGoalObjective ? stateData.defaultGoalObjective : [{ defaultGoalObjectiveInterventions: [{ freq: frequencyData[0].value, staffTypeIds: fields.staffTypeId,serviceTypeIds: fields.serviceTypeId }] }], startDate: stateData.startDate && new Date(stateData.startDate), endDate: stateData.endDate && new Date(stateData.endDate), } setGoalList([creatorObj]) } }, [location.state]) const handleCancel = () => { navigate(-1); }; const handleDeleteIntervention = (indexGoal, currentList) => { setGoalList(list => list.map((item, i) => i === indexGoal ? { ...item, defaultGoalObjective: currentList } : item )); } const saveGoalsData = async () => { setBtnPressed(true); if (goalList.length > 0) { const newObjectList: any[] = []; let isValid = true; for (const element of goalList) { if (!element.goalName?.length || element.goalName.length < 1 || !element.startDate) { isValid = false; break; } const isObjectiveValid = element.defaultGoalObjective?.length > 0 && element.defaultGoalObjective.every(obj => obj.objective && obj.objective.trim() !== ''); const isInterventionValid = element.defaultGoalObjective?.every(obj => obj.defaultGoalObjectiveInterventions && obj.defaultGoalObjectiveInterventions.length > 0 && obj.defaultGoalObjectiveInterventions.every(int => int.intervention && int.intervention.trim() !== '' && int.numFreq && int.numFreq.trim() !== '' ) ); if (!isObjectiveValid || !isInterventionValid) { isValid = false; break; } const preparedElement = { ...element, startDate: moment(element.startDate).format("YYYY-MM-DD"), defaultGoalObjective: (element.defaultGoalObjective ?? []).map(obj => ({ ...obj, defaultGoalObjectiveInterventions: (obj.defaultGoalObjectiveInterventions ?? []).map(int => ({ ...int, freq:int.freq ?? frequencyData[0].value, staffTypeIds: int.staffTypeIds ?? [], serviceTypeIds: int.serviceTypeIds ?? [] })) })) }; newObjectList.push(preparedElement); } if (isValid && newObjectList.length > 0) { try { dispatch(loaderAction(true)); if (isEdit) { await clientServices.updateDefaultGoals(newObjectList); } else { await clientServices.saveClientDefaultGoals(newObjectList); } dispatch(loaderAction(false)); handleCancel(); } catch (error) { dispatch(loaderAction(false)); } } else { dispatch(loaderAction(false)); } } }; return (<div> <div className="my-4 hrBorder "> <div className="d-flex align-items-center justify-content-between"> <h4 className="address-title text-grey "> <span className="f-24"> {isEdit ? 'Update Default Goal' : 'Add New Default Goals'}</span> </h4> </div> { goalList.map((selectedGoal, indexGoal) => <div className="pieGoal boxSHADOWADD"> <div className="row mt-3 borderTop align-items-center"> <div className="mb-2 col-lg-6 col-md-6 position-relative" style={{ height: 100 }}> <TextAreaKendo txtValue={selectedGoal.goalName} onChange={(handleTextChange) => { setGoalList(list => list.map((item, i) => i === indexGoal ? { ...item, goalName: handleTextChange.value! } : item )); } } name="custAuthId" label="Goal Name" error={(btnPressed && (!selectedGoal.goalName || selectedGoal.goalName === '')) && errors.Goalname} /> </div> <div className="col-lg-2 col-md-4" style={{ height: 110 }}> <DatePickerKendoRct placeholder="" value={selectedGoal.startDate && selectedGoal.startDate} onChange={(selectedClientDate) => { setGoalList(list => list.map((item, i) => i === indexGoal ? { ...item, startDate: selectedClientDate.value! } : item )); }} title={"Start Date"} label={"Start Date"} required={true} error={(btnPressed && (!selectedGoal.startDate)) && errors.startDate} /> </div> <div className="mb-2 col-lg-6 col-md-6 col-6"> <TextAreaKendoRct name="goalDescription" txtValue={selectedGoal.goalDescription} onChange={(handleTextChange) => { setGoalList(list => list.map((item, i) => i === indexGoal ? { ...item, goalDescription: handleTextChange.value! } : item )); }} label="Description" /> </div> {/* <div className="col-lg-2 col-md-4"> <DatePickerKendoRct placeholder="" value={selectedGoal.endDate && selectedGoal.endDate} onChange={(selectedClientDate) => { setGoalList(list => list.map((item, i) => i === indexGoal ? { ...item, endDate: selectedClientDate.value! } : item )); }} title={"End Date"} label={"End Date"} required={true} /> </div> */} {(!isEdit && goalList.length > 1) && <div className="col-lg-2 col-md-2 col-sm-2 mb-2 "> <button className="btn-transaprent "> <i onClick={ () => { setGoalList(goalList.filter((item, i) => i !== indexGoal)); } } className="fa-solid fa-trash cross-red"></i> {/* <i class="fa-solid fa-trash"></i> */} </button> </div> } </div> {/* Here starts the Objective Part */} <div className="pieGoal"> { selectedGoal?.defaultGoalObjective?.map((selectedObjective, indexObjective) => <div className="row mt-3 borderTop"> <div className="mb-2 col-md-6 col-12 position-relative"> <TextAreaKendo required={true} txtValue={selectedObjective.objective} onChange={(handleTextChange) => { const currentObjective = selectedGoal.defaultGoalObjective; currentObjective![indexObjective].objective = handleTextChange.value! setGoalList(list => list.map((item, i) => i === indexGoal ? { ...item, defaultGoalObjective: currentObjective! } : item )); } } name="custAuthId" label="Objective" error={(btnPressed && (!selectedObjective.objective || selectedObjective.objective === '')) && errors.objective} /> {(!isEdit && selectedGoal.defaultGoalObjective && selectedGoal.defaultGoalObjective.length > 1) && <button className=" btn-transaprent"> <i onClick={ () => { const objectivesOfGoal = selectedGoal.defaultGoalObjective; const removeIndexedItem = objectivesOfGoal?.filter((item, i) => i !== indexObjective) setGoalList(list => list.map((item, i) => i === indexGoal ? { ...item, defaultGoalObjective: removeIndexedItem! } : item )); } } className="fa-solid fa-xmark cross-red"></i> </button>} </div> <div className="pieGoal col-md-6 col-12"> { selectedObjective?.defaultGoalObjectiveInterventions?.map((selectedIntervention, indexIntervention) => <> <div className="position-relative intervationButton"> <TextAreaKendo required={true} txtValue={selectedIntervention.intervention && selectedIntervention.intervention} onChange={(handleTextChange) => { const interventionList = selectedObjective.defaultGoalObjectiveInterventions; interventionList![indexIntervention].intervention = handleTextChange.value; const currentObjective = selectedGoal.defaultGoalObjective; currentObjective![indexObjective]!.defaultGoalObjectiveInterventions = interventionList! setGoalList(list => list.map((item, i) => i === indexGoal ? { ...item, defaultGoalObjective: currentObjective! } : item )); } } name="custAuthId" label="Interventions" error={(btnPressed && (!selectedIntervention.intervention || selectedIntervention.intervention === '')) && errors.interventions} /> <div className="col-md-12 d-flex gap-4 p-0"> <div className='col-md-6 pl-0'> <MultiSelectDropDown label="Service Type" // onChange={handleChange} // serviceTypeId // value={fields?.serviceTypeId} value={selectedIntervention.serviceTypeIds && tpServicetypes.filter((obj: any) => { return obj.serviceTypeId === selectedIntervention.serviceTypeIds; })[0]} textField="serviceTypes" name="serviceTypeId" data={tpServicetypes} dataItemKey="serviceTypeId" itemRender={renderToItem} onChange={(e) => { const interventionList = selectedObjective.defaultGoalObjectiveInterventions; interventionList![indexIntervention].serviceTypeIds = e.target.value.map((item)=>item.serviceTypeId); const currentObjective = selectedGoal.defaultGoalObjective; currentObjective![indexObjective]!.defaultGoalObjectiveInterventions = interventionList! setGoalList(list => list.map((item, i) => i === indexGoal ? { ...item, defaultGoalObjective: currentObjective! } : item )); }} // required={true} // validityStyles={settingError} // error={!fields.status && errors.status} /> </div> <div className='col-md-6 pl-0'> <MultiSelectDropDown label="Staff Types" error={errors.typeName} data={tpStaffTypes} // value={fields?.staffTypeId} value={selectedIntervention.staffTypeIds && tpStaffTypes.filter((obj: any) => { return obj.staffTypeIds === selectedIntervention.staffTypeIds; })[0]} textField="typeName" name="staffTypeId" dataItemKey="id" itemRender={renderToItem} autoClose={false} // onChange={handleChange} onChange={(e) => { const selectedIds = e.target.value.map(item => item.id); const interventionList = selectedObjective.defaultGoalObjectiveInterventions; interventionList![indexIntervention].staffTypeIds = selectedIds; const currentObjective = selectedGoal.defaultGoalObjective; currentObjective![indexObjective]!.defaultGoalObjectiveInterventions = interventionList! setGoalList(list => list.map((item, i) => i === indexGoal ? { ...item, defaultGoalObjective: currentObjective! } : item )); }} /> </div> </div> <div className='col-md-12 pl-0'> {/* <div className="frequency mb-3"> */} {/* <div className="row mb-2"> */} {/* <div className="col-md-12"> */} <label className="mb-0">Frequency</label> {/* </div> */} {/* </div> */} <div className=""> <div className="col-md-12 d-flex gap-4 p-0"> <div className='col-md-6 pl-0'> <InputKendoRctV1 value={selectedIntervention.numFreq && selectedIntervention.numFreq} onChange={(handleTextChange) => { const interventionList = selectedObjective.defaultGoalObjectiveInterventions; interventionList![indexIntervention].numFreq = handleTextChange.value; const currentObjective = selectedGoal.defaultGoalObjective; currentObjective![indexObjective]!.defaultGoalObjectiveInterventions = interventionList! setGoalList(list => list.map((item, i) => i === indexGoal ? { ...item, defaultGoalObjective: currentObjective! } : item )); }} className="w-100 width-input" style={{ width: "100% !important" }} required={true} error={(btnPressed && (!selectedIntervention.numFreq || selectedIntervention.numFreq === '')) && errors.numFreq} /> </div> <div className='col-md-6 pr-0'> <DropDownList data={frequencyData} // defaultItem={frequencyData[0]} textField="value" dataItemKey="key" value={selectedIntervention.freq ? frequencyData.filter(obj => { return obj.value === selectedIntervention.freq; })[0] : frequencyData[0]} onChange={(e) => { const interventionList = selectedObjective.defaultGoalObjectiveInterventions; interventionList![indexIntervention].freq = e.target.value.value; const currentObjective = selectedGoal.defaultGoalObjective; currentObjective![indexObjective]!.defaultGoalObjectiveInterventions = interventionList! setGoalList(list => list.map((item, i) => i === indexGoal ? { ...item, defaultGoalObjective: currentObjective! } : item )); }} name="freq" className="w-100 width-input frequency-drop " style={{ width: "100% !important" }} required={true} // error={!fields.freq && errors.freq} /> {/* {!fields.freq && <Error>{errors.freq}</Error>} */} </div> </div> </div></div> {(!isEdit && selectedObjective.defaultGoalObjectiveInterventions && selectedObjective.defaultGoalObjectiveInterventions.length > 1) && <button className="btn-transaprent"> <i onClick={ () => { const interventionList = selectedObjective.defaultGoalObjectiveInterventions; const removeIndexedItem = interventionList?.filter((item, i) => i !== indexIntervention) const currentObjective = selectedGoal.defaultGoalObjective; currentObjective![indexObjective]!.defaultGoalObjectiveInterventions = removeIndexedItem setGoalList(list => list.map((item, i) => i === indexGoal ? { ...item, defaultGoalObjective: currentObjective! } : item )); } } className="fa-solid fa-xmark cross-red"></i> </button>} </div> </> ) } {(!isEdit) && <div className="text-right"> <button onClick={() => { const currentListInterventions = selectedObjective.defaultGoalObjectiveInterventions; currentListInterventions?.push({ freq: frequencyData[0].value }) const currentList = selectedGoal.defaultGoalObjective; currentList![indexObjective].defaultGoalObjectiveInterventions = currentListInterventions handleDeleteIntervention(indexGoal, currentList) } } className="AddMore"><i className="fa-solid fa-plus"></i> Add Interventions</button> </div>} </div> </div> ) } </div> {(!isEdit) && <div className="text-right col-md-6"> <button onClick={() => { const currentList = selectedGoal.defaultGoalObjective; currentList?.push({ defaultGoalObjectiveInterventions: [{}] }) setGoalList(list => list.map((item, i) => i === indexGoal ? { ...item, defaultGoalObjective: currentList } : item )); } } className="AddMore"><i className="fa-solid fa-plus"></i> Add Objectives </button> </div>} </div> ) } { (!isEdit) && <button onClick={() => { setGoalList(oldArray => [...oldArray, { defaultGoalObjective: [{ defaultGoalObjectiveInterventions: [{ freq: frequencyData[0].value, staffTypeIds: [],serviceTypeIds: [] }] }] }]); }} className="AddMore mt-3"><i className="fa-solid fa-plus"></i> Add Another Goal</button>} </div> <div className="row mt-4 ml-1 "> <div className="d-flex"> <div> <button onClick={saveGoalsData} className="btn blue-primary text-white " > Submit </button> </div> <div> <button className="btn grey-secondary text-white mx-3" onClick={handleCancel} > Cancel </button> </div> </div> </div> </div>) }; export default AddNewDefaultGoals;
Leave a Comment