Skip to content

Commit aea04d6

Browse files
MrMelon1232MrMelon1232
authored
Merge pull request #559 from janong24/inputBoxAdjustments
Adjusted css styling of boxes for all input forms
2 parents 5f26c94 + a289ed7 commit aea04d6

File tree

13 files changed

+3739
-3770
lines changed

13 files changed

+3739
-3770
lines changed

‎client/app/createActivityJournal/createActivityJournalPage.tsx‎

Lines changed: 161 additions & 162 deletions
Original file line numberDiff line numberDiff line change
@@ -10,173 +10,172 @@ import { useProp } from "../contexts/PropContext";
1010
import { createActivityJournal } from "../http/activityJournalAPI";
1111

1212
export default function CreateActivityJournalPage() {
13-
const logger = require("../../logger");
14-
const router = useRouter();
15-
const { handlePopUp } = useProp();
13+
const logger = require("../../logger");
14+
const router = useRouter();
15+
const { handlePopUp } = useProp();
1616

17-
const formik = useFormik({
18-
initialValues: {
19-
date: "",
20-
time: "",
21-
activity: "",
22-
duration: 0,
23-
notes: "",
24-
},
17+
const formik = useFormik({
18+
initialValues: {
19+
date: "",
20+
time: "",
21+
activity: "",
22+
duration: 0,
23+
notes: "",
24+
},
2525

26-
onSubmit: async (values) => {
27-
try {
28-
const data = {
29-
date: values.date,
30-
time: values.time,
31-
activity: values.activity,
32-
duration: values.duration,
33-
notes: values.notes,
34-
};
35-
const result = await createActivityJournal(data).then(
36-
(result) => {
37-
router.push("/getActivityJournals");
38-
}
39-
);
40-
} catch (error) {
41-
handlePopUp("error", "Error creating activity journal entry:");
42-
}
43-
},
44-
});
26+
onSubmit: async (values) => {
27+
try {
28+
const data = {
29+
date: values.date,
30+
time: values.time,
31+
activity: values.activity,
32+
duration: values.duration,
33+
notes: values.notes,
34+
};
35+
const result = await createActivityJournal(data).then((result) => {
36+
router.push("/getActivityJournals");
37+
});
38+
} catch (error) {
39+
handlePopUp("error", "Error creating activity journal entry:");
40+
}
41+
},
42+
});
4543

46-
return (
47-
<div className="bg-eggshell min-h-screen flex flex-col">
48-
<SpanHeader
49-
onClick={() => router.push("/getActivityJournals")}
50-
headerText="Create Activity Journal"></SpanHeader>
44+
return (
45+
<div className="bg-eggshell min-h-screen flex flex-col">
46+
<SpanHeader
47+
onClick={() => router.push("/getActivityJournals")}
48+
headerText="Create Activity Journal"
49+
></SpanHeader>
5150

52-
<form
53-
className="rounded-3xl bg-white flex flex-col mb-8 w-full md:max-w-[800px] md:min-h-[550px] p-8 shadow-[0_32px_64px_0_rgba(44,39,56,0.08),0_16px_32px_0_rgba(44,39,56,0.04)]"
54-
onSubmit={formik.handleSubmit}>
55-
<div className="mt-3 mb-3">
56-
<FormLabel htmlFor={"date"} label={"Date"}></FormLabel>
57-
<Input
58-
name="date"
59-
id="date"
60-
type="date"
61-
style={{ width: "100%" }}
62-
onChange={formik.handleChange}
63-
value={formik.values.date}
64-
onBlur={formik.handleBlur}
65-
required={true}
66-
/>
67-
{formik.touched.date && !formik.values.date && (
68-
<p className="text-red text-[14px]">
69-
This field can't be left empty.
70-
</p>
71-
)}{" "}
72-
</div>
73-
<div className="mt-3">
74-
<FormLabel htmlFor={"time"} label={"Time"}></FormLabel>
75-
<Input
76-
name="time"
77-
id="time"
78-
type="time"
79-
style={{ width: "100%" }}
80-
onChange={formik.handleChange}
81-
value={formik.values.time}
82-
onBlur={formik.handleBlur}
83-
/>
84-
{formik.touched.time && !formik.values.time && (
85-
<p className="text-red text-[14px]">
86-
This field can't be left empty.
87-
</p>
88-
)}
89-
</div>
51+
<form
52+
className="rounded-3xl bg-white flex flex-col mb-8 w-full md:max-w-[800px] md:min-h-[550px] p-8 shadow-[0_32px_64px_0_rgba(44,39,56,0.08),0_16px_32px_0_rgba(44,39,56,0.04)]"
53+
onSubmit={formik.handleSubmit}
54+
>
55+
<div className="mt-3 mb-3">
56+
<FormLabel htmlFor={"date"} label={"Date"}></FormLabel>
57+
<Input
58+
name="date"
59+
id="date"
60+
type="date"
61+
style={{ width: "100%" }}
62+
onChange={formik.handleChange}
63+
value={formik.values.date}
64+
onBlur={formik.handleBlur}
65+
required={true}
66+
/>
67+
{formik.touched.date && !formik.values.date && (
68+
<p className="text-red text-[14px]">
69+
This field can't be left empty.
70+
</p>
71+
)}{" "}
72+
</div>
73+
<div className="mt-3">
74+
<FormLabel htmlFor={"time"} label={"Time"}></FormLabel>
75+
<Input
76+
name="time"
77+
id="time"
78+
type="time"
79+
style={{ width: "100%" }}
80+
onChange={formik.handleChange}
81+
value={formik.values.time}
82+
onBlur={formik.handleBlur}
83+
/>
84+
{formik.touched.time && !formik.values.time && (
85+
<p className="text-red text-[14px]">
86+
This field can't be left empty.
87+
</p>
88+
)}
89+
</div>
9090

91-
<div className="flex">
92-
<div className="mt-3">
93-
<FormLabel
94-
htmlFor={"activity"}
95-
label={"Activity"}></FormLabel>
96-
<Input
97-
name="activity"
98-
id="activity"
99-
type="text"
100-
style={{ width: "100%" }}
101-
onChange={formik.handleChange}
102-
value={formik.values.activity}
103-
onBlur={formik.handleBlur}
104-
/>
105-
{/* Check if the field is touched */}
106-
{formik.touched.activity &&
107-
// Check if the field is empty
108-
!formik.values.activity && (
109-
<p className="text-red text-[14px]">
110-
This field can't be left empty.
111-
</p>
112-
)}
113-
</div>
114-
</div>
115-
<div className="mt-3">
116-
<FormLabel
117-
htmlFor={"duration"}
118-
label={"Duration (in minutes)"}></FormLabel>
119-
<Input
120-
name="duration"
121-
id="duration"
122-
type="number"
123-
style={{ width: "100%" }}
124-
onChange={formik.handleChange}
125-
value={formik.values.duration.toString()}
126-
onBlur={formik.handleBlur}
127-
/>
128-
{/* Check if the field is touched */}
129-
{formik.touched.duration &&
130-
// Check if the field is empty
131-
((!formik.values.duration && (
132-
<p className="text-red text-[14px]">
133-
This field can't be left empty or zero.
134-
</p>
135-
)) ||
136-
// Check if the field is less than or equal to zero
137-
(formik.values.duration <= 0 && (
138-
<p className="text-red text-[14px]">
139-
You can't enter a negative duration or a
140-
duration of zero.
141-
</p>
142-
)))}
143-
</div>
91+
<div className="flex">
92+
<div className="flex-1 mt-3">
93+
<FormLabel htmlFor={"activity"} label={"Activity"}></FormLabel>
94+
<Input
95+
name="activity"
96+
id="activity"
97+
type="text"
98+
style={{ width: "100%" }}
99+
onChange={formik.handleChange}
100+
value={formik.values.activity}
101+
onBlur={formik.handleBlur}
102+
/>
103+
{/* Check if the field is touched */}
104+
{formik.touched.activity &&
105+
// Check if the field is empty
106+
!formik.values.activity && (
107+
<p className="text-red text-[14px]">
108+
This field can't be left empty.
109+
</p>
110+
)}
111+
</div>
112+
</div>
113+
<div className="mt-3">
114+
<FormLabel
115+
htmlFor={"duration"}
116+
label={"Duration (in minutes)"}
117+
></FormLabel>
118+
<Input
119+
name="duration"
120+
id="duration"
121+
type="number"
122+
style={{ width: "100%" }}
123+
onChange={formik.handleChange}
124+
value={formik.values.duration.toString()}
125+
onBlur={formik.handleBlur}
126+
/>
127+
{/* Check if the field is touched */}
128+
{formik.touched.duration &&
129+
// Check if the field is empty
130+
((!formik.values.duration && (
131+
<p className="text-red text-[14px]">
132+
This field can't be left empty or zero.
133+
</p>
134+
)) ||
135+
// Check if the field is less than or equal to zero
136+
(formik.values.duration <= 0 && (
137+
<p className="text-red text-[14px]">
138+
You can't enter a negative duration or a duration of zero.
139+
</p>
140+
)))}
141+
</div>
144142

145-
<FormInput
146-
label="Notes"
147-
onChange={formik.handleChange}
148-
value={formik.values.notes}
149-
onBlur={formik.handleBlur}></FormInput>
150-
<div className="mt-10 pb-4 self-center">
151-
<div className="mt-5 mb-5 space-x-2">
152-
<Button
153-
type="button"
154-
text="Cancel"
155-
style={{
156-
width: "140px",
157-
backgroundColor: "var(--Red, #FF7171)",
158-
}}
159-
onClick={() => router.push("/getActivityJournals")}
160-
/>
143+
<FormInput
144+
label="Notes"
145+
onChange={formik.handleChange}
146+
value={formik.values.notes}
147+
onBlur={formik.handleBlur}
148+
></FormInput>
149+
<div className="mt-10 pb-4 self-center">
150+
<div className="mt-5 mb-5 space-x-2">
151+
<Button
152+
type="button"
153+
text="Cancel"
154+
style={{
155+
width: "140px",
156+
backgroundColor: "var(--Red, #FF7171)",
157+
}}
158+
onClick={() => router.push("/getActivityJournals")}
159+
/>
161160

162-
<Button
163-
type="submit"
164-
text="Submit"
165-
disabled={
166-
!(formik.isValid && formik.dirty) || // Check if the form is valid and dirty
167-
formik.values.duration === 0 || // Check if duration is zero
168-
formik.values.duration < 0 || // Check if duration is less than zero
169-
!formik.values.date || // Check if date is missing or empty
170-
!formik.values.time || // Check if time is missing or empty
171-
!formik.values.activity || // Check if activity is missing or empty
172-
!formik.values.duration // Check if duration is missing or empty
173-
}
174-
style={{ width: "140px" }}
175-
onClick={() => router.push("/getActivityJournals")}
176-
/>
177-
</div>
178-
</div>
179-
</form>
180-
</div>
181-
);
161+
<Button
162+
type="submit"
163+
text="Submit"
164+
disabled={
165+
!(formik.isValid && formik.dirty) || // Check if the form is valid and dirty
166+
formik.values.duration === 0 || // Check if duration is zero
167+
formik.values.duration < 0 || // Check if duration is less than zero
168+
!formik.values.date || // Check if date is missing or empty
169+
!formik.values.time || // Check if time is missing or empty
170+
!formik.values.activity || // Check if activity is missing or empty
171+
!formik.values.duration // Check if duration is missing or empty
172+
}
173+
style={{ width: "140px" }}
174+
onClick={() => router.push("/getActivityJournals")}
175+
/>
176+
</div>
177+
</div>
178+
</form>
179+
</div>
180+
);
182181
}

0 commit comments

Comments
 (0)