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