Skip to content

Commit 7133b0e

Browse files
maxn990maxn990
authored
Merge pull request #435 from Code-4-Community/optional-fields
Optional fields
2 parents b8e9bd3 + d3ca519 commit 7133b0e

6 files changed

Lines changed: 68 additions & 35 deletions

File tree

‎frontend/src/components/FieldLabel.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import type { ReactNode } from "react";
2+
3+
type FieldLabelProps = {
4+
isRequired?: boolean;
5+
className?: string;
6+
children: ReactNode;
7+
};
8+
9+
export default function FieldLabel({
10+
isRequired,
11+
className,
12+
children,
13+
}: FieldLabelProps) {
14+
return (
15+
<label className={className}>
16+
{children}
17+
{isRequired && <span className="text-red ml-1">*</span>}
18+
</label>
19+
);
20+
}

‎frontend/src/main-page/grants/edit-grant/EditGrant.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -81,27 +81,30 @@ const EditGrant: React.FC<{
8181
if (!form.organization.trim()) return "Organization Name is required";
8282
if (!form.status) return "Status is required";
8383
if (form.amount == null || form.amount <= 0) return "Amount must be greater than 0";
84-
if (!form.applicationDeadline) return "Due Date is required";
84+
if (!grantToEdit && !form.applicationDeadline) return "Due Date is required";
85+
if (!grantToEdit && !form.grantStartDate) return "Grant Start Date is required";
86+
if (!grantToEdit && !Number.isFinite(form.estimatedCompletionTime)) return "Estimated completion time is required";
8587
if (
8688
form.applicationDate &&
89+
form.applicationDeadline &&
8790
new Date(form.applicationDate).getTime() >
8891
new Date(form.applicationDeadline).getTime()
8992
) {
9093
return "Application Date cannot be after Due Date";
9194
}
92-
if (!form.grantStartDate) return "Grant Start Date is required";
9395
if (
96+
form.grantStartDate &&
97+
form.applicationDeadline &&
9498
new Date(form.grantStartDate).getTime() <
9599
new Date(form.applicationDeadline).getTime()
96100
) {
97101
return "Grant Start Date cannot be before Due Date";
98102
}
99-
if (!form.estimatedCompletionTime || form.estimatedCompletionTime <= 0) return "Estimated completion time must be greater than 0";
103+
if (form.estimatedCompletionTime < 0) return "Estimated completion time cannot be negative";
100104
if (!form.doesBcanQualify) return "BCAN eligibility is required";
101105
if(form.reportDates.length > 0 && !form.reportDates.every((date) => date !== "")) return "Report deadlines must have a value";
102106
if (!form.timeline || form.timeline <= 0) return "Timeline must be greater than 0";
103107
if (!form.bcanPocEmail) return "BCAN contact required";
104-
if (!form.grantProviderPocEmail) return "Grant provider contact required";
105108
if(form.attachments.length > 0 && !form.attachments.every((attachment) => attachment.url !== "")) return "Attachments must have a value";
106109
return null;
107110
};

‎frontend/src/main-page/grants/edit-grant/components/EditGrantContacts.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { Action } from "../processGrantDataEditSave";
77
import { useState } from "react";
88
import AddContactPopup from "./AddContactPopup";
99
import { observer } from "mobx-react-lite";
10+
import FieldLabel from "../../../../components/FieldLabel";
1011

1112
type EditGrantProps = {
1213
form: GrantFormState;
@@ -34,9 +35,9 @@ const EditGrantContacts = ({ dispatch, form }: EditGrantProps) => {
3435

3536
return (
3637
<div className="w-full h-full">
37-
<label className="flex text-gray-700 sm:text-sm lg:text-base mb-1">
38+
<FieldLabel isRequired className="flex text-gray-700 sm:text-sm lg:text-base mb-1">
3839
Contacts
39-
</label>
40+
</FieldLabel>
4041

4142
<div className="grid grid-cols-2 gap-4 min-h-24 w-full lg:w-[80%] ml-2">
4243
{form.bcanPocEmail !== "" && (

‎frontend/src/main-page/grants/edit-grant/components/EditGrantInfo.tsx‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
faSquareXmark,
99
} from "@fortawesome/free-solid-svg-icons";
1010
import EditGrantDeleteItem from "./EditGrantDeleteItem";
11+
import FieldLabel from "../../../../components/FieldLabel";
1112

1213
type EditGrantProps = {
1314
form: GrantFormState;
@@ -18,9 +19,9 @@ export default function EditGrantInfo({ form, dispatch }: EditGrantProps) {
1819
return (
1920
<div className="w-full">
2021
<div className="mb-6">
21-
<label className="flex text-gray-700 sm:text-sm lg:text-base mb-1">
22+
<FieldLabel className="flex text-gray-700 sm:text-sm lg:text-base mb-1">
2223
Description
23-
</label>
24+
</FieldLabel>
2425
<textarea
2526
className="h-32 block w-full text-gray-700 border bg-white border-grey-300 rounded placeholder:text-gray-700 p-2"
2627
placeholder="Enter grant description..."
@@ -39,9 +40,9 @@ export default function EditGrantInfo({ form, dispatch }: EditGrantProps) {
3940
<div className="flex flex-col w-full gap-6 items-start text-left col-span-1">
4041
{/* Amount */}
4142
<div className="w-3/4">
42-
<label className="flex text-gray-700 sm:text-sm lg:text-base mb-1">
43+
<FieldLabel isRequired className="flex text-gray-700 sm:text-sm lg:text-base mb-1">
4344
Amount ($)
44-
</label>
45+
</FieldLabel>
4546
<input
4647
type="number"
4748
min={0}
@@ -59,9 +60,9 @@ export default function EditGrantInfo({ form, dispatch }: EditGrantProps) {
5960

6061
{/* BCAN Eligible */}
6162
<div className="w-fit">
62-
<label className="flex text-gray-700 sm:text-sm lg:text-base mb-1 whitespace-nowrap">
63+
<FieldLabel isRequired className="flex text-gray-700 sm:text-sm lg:text-base mb-1 whitespace-nowrap">
6364
BCAN Eligible?
64-
</label>
65+
</FieldLabel>
6566
<div className="flex flex-col gap-1">
6667
<Button
6768
logo={faCheckSquare}
@@ -97,9 +98,9 @@ export default function EditGrantInfo({ form, dispatch }: EditGrantProps) {
9798
<div className="flex flex-col w-full gap-6 items-start text-left col-span-1">
9899
{/* Due Date */}
99100
<div className="">
100-
<label className="flex text-gray-700 sm:text-sm lg:text-base mb-1">
101+
<FieldLabel className="flex text-gray-700 sm:text-sm lg:text-base mb-1">
101102
Due Date
102-
</label>
103+
</FieldLabel>
103104
<input
104105
type="date"
105106
className="appearance-none block w-full h-[2.25rem] text-gray-700 placeholder:text-gray-700 border border-grey-300 rounded-md py-2 px-4"
@@ -115,9 +116,9 @@ export default function EditGrantInfo({ form, dispatch }: EditGrantProps) {
115116
</div>
116117
{/* Application Date */}
117118
<div className="">
118-
<label className="flex text-gray-700 sm:text-sm lg:text-base mb-1">
119+
<FieldLabel className="flex text-gray-700 sm:text-sm lg:text-base mb-1">
119120
Application Date
120-
</label>
121+
</FieldLabel>
121122
<input
122123
type="date"
123124
className="appearance-none block w-full h-[2.25rem] text-gray-700 placeholder:text-gray-700 border border-grey-300 rounded-md py-2 px-4"
@@ -136,9 +137,9 @@ export default function EditGrantInfo({ form, dispatch }: EditGrantProps) {
136137
<div className="flex flex-col w-full gap-6 items-start text-left col-span-1">
137138
{/* Grant Start Date */}
138139
<div>
139-
<label className="flex text-gray-700 sm:text-sm lg:text-base mb-1">
140+
<FieldLabel className="flex text-gray-700 sm:text-sm lg:text-base mb-1">
140141
Grant Start Date
141-
</label>
142+
</FieldLabel>
142143
<input
143144
type="date"
144145
className="appearance-none block w-full h-[2.25rem] text-gray-700 placeholder:text-gray-700 border border-grey-300 rounded-md py-2 px-4"
@@ -155,9 +156,9 @@ export default function EditGrantInfo({ form, dispatch }: EditGrantProps) {
155156

156157
{/* Report Deadlines */}
157158
<div className="">
158-
<label className="flex text-gray-700 sm:text-sm lg:text-base mb-1">
159+
<FieldLabel className="flex text-gray-700 sm:text-sm lg:text-base mb-1">
159160
Report Deadlines
160-
</label>
161+
</FieldLabel>
161162
<div className="flex flex-col gap-2">
162163
<div className="ml-2 flex flex-col gap-2">
163164
{form.reportDates.map((date, index) => (
@@ -200,9 +201,9 @@ export default function EditGrantInfo({ form, dispatch }: EditGrantProps) {
200201
<div className="flex flex-col w-full gap-6 items-start text-left col-span-1">
201202
{/* Timeline */}
202203
<div className="">
203-
<label className="flex text-gray-700 sm:text-sm lg:text-base mb-1 ">
204+
<FieldLabel isRequired className="flex text-gray-700 sm:text-sm lg:text-base mb-1 ">
204205
Timeline (years)
205-
</label>
206+
</FieldLabel>
206207
<input
207208
type="number"
208209
min="0"
@@ -219,9 +220,9 @@ export default function EditGrantInfo({ form, dispatch }: EditGrantProps) {
219220
</div>
220221
{/* Estimated Completion Time */}
221222
<div className="">
222-
<label className="flex text-gray-700 sm:text-sm lg:text-base mb-1 whitespace-nowrap">
223+
<FieldLabel className="flex text-gray-700 sm:text-sm lg:text-base mb-1 whitespace-nowrap">
223224
Estimated Completion Time (hours)
224-
</label>
225+
</FieldLabel>
225226
<input
226227
type="number"
227228
min="0"

‎frontend/src/main-page/grants/grant-view/GrantView.tsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -189,7 +189,9 @@ const GrantItem: React.FC<GrantItemProps> = observer(({ grant }) => {
189189
},
190190
{
191191
label: "Estimated Completion Time (hours)",
192-
value: grant.estimated_completion_time,
192+
value: grant.estimated_completion_time
193+
? grant.estimated_completion_time
194+
: "N/A",
193195
},
194196
]}
195197
/>
@@ -205,12 +207,16 @@ const GrantItem: React.FC<GrantItemProps> = observer(({ grant }) => {
205207
{
206208
label: "Contacts",
207209
item: (
208-
<div className="grid grid-cols-1 2xl:grid-cols-2 w-full h-full lg:w-[90%] gap-6">
210+
<div
211+
className={`grid ${grant.grantmaker_poc?.POC_email ? "grid-cols-1 2xl:grid-cols-2" : "grid-cols-1"} w-full h-full lg:w-[90%] gap-6`}
212+
>
209213
<ContactCard contact={grant.bcan_poc} type="BCAN" />
210-
<ContactCard
211-
contact={grant.grantmaker_poc}
212-
type="Granter"
213-
/>
214+
{grant.grantmaker_poc?.POC_email && (
215+
<ContactCard
216+
contact={grant.grantmaker_poc}
217+
type="Granter"
218+
/>
219+
)}
214220
</div>
215221
),
216222
},

‎frontend/src/main-page/grants/grant-view/components/GrantCard.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,13 @@ interface GrantCardProps {
1212

1313
const GrantCard: React.FC<GrantCardProps> = ({ grant, isSelected, onClick }) => {
1414

15-
const formattedDate = new Date(grant.application_deadline).toLocaleDateString('en-US', {
16-
month: 'numeric',
17-
day: 'numeric',
18-
year: '2-digit',
19-
});
15+
const formattedDate = grant.application_deadline
16+
? new Date(grant.application_deadline).toLocaleDateString('en-US', {
17+
month: 'numeric',
18+
day: 'numeric',
19+
year: '2-digit',
20+
})
21+
: "N/A";
2022

2123
return (
2224
<div

0 commit comments

Comments
 (0)