Skip to content

Commit 6d4b814

Browse files
showmentshowment
committed
frontend done, logic is messed up
1 parent 14a39bb commit 6d4b814

File tree

6 files changed

+370
-59
lines changed

6 files changed

+370
-59
lines changed

‎client/src/components/formsHub/DataFormatter.tsx‎

Lines changed: 45 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -82,11 +82,33 @@ export const frontDeskKeyLabelMap: Record<string, string> = {
8282
};
8383

8484
export const caseManagerKeyLabelMap: Record<string, string> = {
85-
role: "Role",
86-
firstName: "First Name",
87-
lastName: "Last Name",
88-
phoneNumber: "Phone Number",
89-
email: "Email"
85+
date: "Date",
86+
cmId: "Case Manager ID",
87+
totalNumberOfContacts: "Total Number of Contacts",
88+
womenBirthdays: "Women's Birthdays",
89+
kidBirthdays: "Kid's Birthdays",
90+
birthdayCards: "Birthday Cards Given",
91+
birthdayCardsValue: "Value of Birthday Cards",
92+
foodCards: "Food Cards Given",
93+
foodCardsValue: "Value of Food Cards",
94+
busPasses: "Bus Passes Given",
95+
busPassesValue: "Value of Bus Passes",
96+
gasCards: "Gas Cards Given",
97+
gasCardsValue: "Value of Gas Cards",
98+
womenHealthcareReferrals: "Women's Healthcare Referrals",
99+
kidHealthcareReferrals: "Kid's Healthcare Referrals",
100+
womenCounselingReferrals: "Women's Counseling Referrals",
101+
kidCounselingReferrals: "Kid's Counseling Referrals",
102+
babiesBorn: "Babies Born",
103+
womenDegreesEarned: "Degrees Earned by Women",
104+
womenEnrolledInSchool: "Women Enrolled in School",
105+
womenLicensesEarned: "Licenses Earned by Women",
106+
reunifications: "Family Reunifications",
107+
numberOfInterviewsConducted: "Interviews Conducted",
108+
numberOfPositiveTests: "Positive Tests",
109+
numberOfNcns: "NCNs",
110+
numberOfOthers: "Other",
111+
numberOfInterviewsAccpeted: "Interviews Accepted"
90112
};
91113

92114
const config: Record<
@@ -122,7 +144,6 @@ export const formatDataWithLabels = (
122144

123145
const readableKey = section.labelMap[key] ?? key;
124146
formatted[readableKey] = value;
125-
console.log("set ", readableKey, "to ", value)
126147
}
127148

128149
return formatted;
@@ -140,3 +161,21 @@ export const getKeyByValue = (
140161
return Object.entries(section.labelMap).find(([_, val]) => val === value)?.[0];
141162
};
142163

164+
export const reverseLabelKeys = (labeledObj: Record<string, any>, title: string): Record<string, any> => {
165+
const section = config[title];
166+
167+
if (!section) return labeledObj;
168+
169+
const labelToKeyMap = Object.fromEntries(
170+
Object.entries(section.labelMap).map(([key, label]) => [label, key])
171+
);
172+
173+
return Object.fromEntries(
174+
Object.entries(labeledObj).map(([label, value]) => {
175+
const originalKey = labelToKeyMap[label];
176+
return [originalKey ?? label, value]; // fallback to original label if no match
177+
})
178+
);
179+
};
180+
181+

‎client/src/components/formsHub/FormPreview.tsx‎

Lines changed: 119 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -19,27 +19,43 @@ import {
1919
Th,
2020
Thead,
2121
Tr,
22+
useToast,
2223
VStack,
2324
} from "@chakra-ui/react";
2425

2526
import { useBackendContext } from "../../contexts/hooks/useBackendContext";
26-
import type { Form } from "../../types/form";
27+
import { useRoleContext } from "../../contexts/hooks/useRoleContext.ts";
2728
import { formatDateString } from "../../utils/dateUtils";
2829
import { downloadCSV } from "../../utils/downloadCSV.ts";
29-
import { formatDataWithLabels, getKeyByValue } from "./DataFormatter.tsx";
30+
import {
31+
formatDataWithLabels,
32+
getKeyByValue, reverseLabelKeys,
33+
} from "./DataFormatter.tsx";
34+
import { RequestFormPreview } from "./RequestFormPreview.tsx";
3035

3136
export const FormPreview = ({
32-
formItem,
37+
formItemId,
38+
formItemTitle,
39+
formItemName,
40+
formItemDate,
3341
isOpen,
3442
onClose,
3543
}: {
36-
formItem: Form;
44+
formItemId: number;
45+
formItemTitle: string;
46+
formItemName: string;
47+
formItemDate: string;
3748
isOpen: boolean;
3849
onClose: () => void;
3950
}) => {
4051
const { backend } = useBackendContext();
52+
const { role } = useRoleContext();
53+
54+
const toast = useToast();
4155

4256
const [formData, setFormData] = useState({});
57+
const [newFormData, setNewFormData] = useState({});
58+
4359
const [newFormattedFormData, setNewFormattedFormData] = useState({});
4460
const [formattedFormData, setFormattedFormData] = useState({});
4561
const [isEditing, setIsEditing] = useState(false);
@@ -48,35 +64,37 @@ export const FormPreview = ({
4864
useEffect(() => {
4965
const getData = async () => {
5066
let endpoint = "";
51-
console.log(formItem)
5267

53-
switch (formItem.title) {
68+
switch (formItemTitle) {
5469
case "Initial Screeners":
55-
endpoint = `/initialInterview/get-interview/${formItem.id}`;
70+
endpoint = `/initialInterview/get-interview/${formItemId}`;
5671
break;
5772
case "Client Tracking Statistics (Intake Statistics)":
58-
endpoint = `/intakeStats/${formItem.id}`;
73+
endpoint = `/intakeStats/${formItemId}`;
5974
break;
6075
case "Front Desk Monthly Statistics":
61-
endpoint = `/frontDesk/${formItem.id}`;
76+
endpoint = `/frontDesk/${formItemId}`;
6277
break;
6378
case "Case Manager Monthly Statistics":
64-
endpoint = `/caseManagerMonthlyStats/${formItem.id}`;
79+
endpoint = `/caseManagerMonthlyStats/${formItemId}`;
6580
break;
6681
default:
67-
console.error("Unknown form title:", formItem.title);
82+
console.error("Unknown form title:", formItemTitle);
6883
setIsLoading(false);
6984
return;
7085
}
7186

7287
try {
7388
setIsLoading(true);
89+
7490
const response = await backend.get(endpoint);
75-
console.log(response)
76-
const data = await formatDataWithLabels(response.data[0], formItem.title);
77-
console.log(data)
91+
const data = formatDataWithLabels(response.data[0], formItemTitle);
92+
93+
console.log(response.data[0]);
7894

7995
setFormData(response.data[0]);
96+
setNewFormData(response.data[0]);
97+
8098
setFormattedFormData(data);
8199
setNewFormattedFormData(data);
82100
} catch (error) {
@@ -87,16 +105,61 @@ export const FormPreview = ({
87105
};
88106

89107
getData();
90-
}, [backend, formItem]);
108+
}, [backend, formItemTitle, formItemId]);
91109

92110
const handleSaveForm = async () => {
93-
// do the put requests and error handling
111+
let endpoint = "";
112+
113+
switch (formItemTitle) {
114+
case "Initial Screeners":
115+
endpoint = `/initialInterview/`;
116+
break;
117+
case "Front Desk Monthly Statistics":
118+
endpoint = `/frontDesk/`;
119+
break;
120+
case "Case Manager Monthly Statistics":
121+
endpoint = `/caseManagerMonthlyStats/`;
122+
break;
123+
default:
124+
console.error("Unknown form title:", formItemTitle);
125+
return;
126+
}
127+
128+
try {
129+
console.log(reverseLabelKeys(newFormattedFormData, formItemTitle))
130+
await backend.post(endpoint, reverseLabelKeys(newFormattedFormData, formItemTitle));
131+
} catch (error) {
132+
console.error("Error updating form:", error);
133+
134+
toast({
135+
title: "Did Not Save Changes",
136+
description: `There was an error while saving changes`,
137+
status: "error",
138+
duration: 9000,
139+
isClosable: true,
140+
});
141+
142+
return;
143+
}
144+
145+
toast({
146+
title: "Successfully submitted form",
147+
description: `${formItemTitle} Form - ${new Date().toLocaleString()}`,
148+
status: "success",
149+
duration: 9000,
150+
isClosable: true,
151+
});
152+
153+
onClose();
154+
setFormattedFormData(newFormattedFormData);
155+
setFormData(newFormData)
156+
setIsEditing(false);
94157
};
95158

96-
const isDate = (value: any) => {
159+
const isDate = (value: string) => {
97160
return (
98-
Object.prototype.toString.call(value) === "[object Date]" ||
99-
(typeof value === "string" && !isNaN(Date.parse(value)))
161+
Object.prototype.toString.call(value) === "[object String]" &&
162+
!isNaN(Date.parse(value))
100163
);
101164
};
102165

@@ -106,6 +169,8 @@ export const FormPreview = ({
106169
placement="right"
107170
onClose={() => {
108171
onClose();
172+
setNewFormattedFormData(formattedFormData);
173+
setNewFormData(formData);
109174
setIsEditing(false);
110175
}}
111176
size="xl"
@@ -120,6 +185,8 @@ export const FormPreview = ({
120185
aria-label="Close drawer"
121186
onClick={() => {
122187
onClose();
188+
setNewFormattedFormData(formattedFormData);
189+
setNewFormData(formData);
123190
setIsEditing(false);
124191
}}
125192
variant="ghost"
@@ -131,7 +198,8 @@ export const FormPreview = ({
131198
color="gray.600"
132199
fontSize="md"
133200
>
134-
{formItem.name && `${formItem.name} - `}{formItem.title} {formatDateString(formItem.date)}
201+
{formItemName && `${formItemName} - `}
202+
{formItemTitle} {formatDateString(formItemDate)}
135203
</Text>
136204
</HStack>
137205
</DrawerHeader>
@@ -149,6 +217,10 @@ export const FormPreview = ({
149217
/>
150218
<Text>Loading...</Text>
151219
</VStack>
220+
) : role === "user" &&
221+
formItemTitle ===
222+
"Client Tracking Statistics (Intake Statistics)" ? (
223+
RequestFormPreview()
152224
) : (
153225
<VStack
154226
marginTop="12px"
@@ -197,6 +269,7 @@ export const FormPreview = ({
197269
size="lg"
198270
onClick={() => {
199271
setNewFormattedFormData(formattedFormData);
272+
setNewFormData(formData);
200273
setIsEditing(false);
201274
}}
202275
>
@@ -206,9 +279,7 @@ export const FormPreview = ({
206279
colorScheme="blue"
207280
size="lg"
208281
onClick={() => {
209-
setFormattedFormData(newFormattedFormData);
210-
handleSaveForm();
211-
setIsEditing(false);
282+
handleSaveForm().then();
212283
}}
213284
>
214285
Save
@@ -246,17 +317,28 @@ export const FormPreview = ({
246317
<Td fontSize="medium">{key}</Td>
247318
<Td fontSize="medium">
248319
{!isEditing ? (
249-
<>{value}</>
320+
<>
321+
{isDate(value)
322+
? formatDateString(value)
323+
: value}
324+
</>
250325
) : (
251326
<Input
252-
value={value ?? ""}
327+
value={value}
253328
onChange={(event) => {
254-
const originalValue =
255-
formattedFormData[key];
329+
const realKey = getKeyByValue(
330+
key,
331+
formItemTitle
332+
);
333+
const originalValue = formData[realKey];
256334

257335
// event.target.value is a string
258336
// it needs to be casted to match the type in the actual form
259-
let newValue: any = event.target.value;
337+
let newValue:
338+
| string
339+
| number
340+
| boolean
341+
| Date = event.target.value;
260342

261343
if (typeof originalValue === "number") {
262344
newValue = Number(newValue);
@@ -273,6 +355,15 @@ export const FormPreview = ({
273355
}
274356
}
275357

358+
if(isNaN(newValue)) {
359+
return;
360+
}
361+
362+
setNewFormData((prev) => ({
363+
...prev,
364+
[realKey]: newValue,
365+
}));
366+
276367
setNewFormattedFormData((prev) => ({
277368
...prev,
278369
[key]: newValue,

0 commit comments

Comments
 (0)