Merge pull request #362 from Code-4-Community/347-dev---add-grant

347 dev   add/edit grant

Author: prooflesben

backend/src/grant/grant.controller.ts

@@ -64,7 +64,7 @@ export class GrantController {
     @ApiResponse({ status: 403, description: 'Forbidden - User does not have access to this resource' })
     @ApiResponse({ status: 500, description: 'Internal Server Error', example: 'Internal Server Error' })
     async addGrant(
-      @Body(new ValidationPipe({ whitelist: true, forbidNonWhitelisted: true }))
+      @Body()
       grant: AddGrantBody
     ): Promise<number> {
       this.logger.log(`POST /grant/new-grant - Creating new grant for organization: ${grant.organization}`);

backend/src/grant/grant.service.ts

@@ -384,6 +384,7 @@ export class GrantService {
           amount: grant.amount,
           grant_start_date: grant.grant_start_date,
           application_deadline: grant.application_deadline,
+          application_date: grant.application_date,
           report_deadlines: grant.report_deadlines,
           description: grant.description,
           timeline: grant.timeline,

backend/src/grant/types/grant.types.ts

@@ -22,6 +22,9 @@ export class GrantResponseDto {
 
   @ApiProperty({ description: 'When grant submission is due', example: '2024-06-01T00:00:00.000Z' })
   application_deadline!: string;
+
+  @ApiProperty({ description: 'When grant was submitted', example: '2024-06-01T00:00:00.000Z' })
+  application_date?: string;
 
   @ApiProperty({ description: 'Multiple report dates', type: [String], required: false })
   report_deadlines?: string[];
@@ -75,6 +78,9 @@ export class AddGrantBody {
 
   @ApiProperty({ description: 'When grant submission is due', example: '2024-06-01T00:00:00.000Z' })
   application_deadline!: string;
+
+  @ApiProperty({ description: 'When grant was submitted', example: '2024-06-01T00:00:00.000Z' })
+  application_date?: string;
 
   @ApiProperty({ description: 'Multiple report dates', type: [String], required: false, example: ['2024-12-01T00:00:00.000Z'] })
   report_deadlines?: string[];
@@ -122,6 +128,9 @@ export class UpdateGrantBody {
 
   @ApiProperty({ description: 'When grant submission is due', required: false })
   application_deadline?: string;
+
+  @ApiProperty({ description: 'When grant was submitted', required: false })
+  application_date?: string;
 
   @ApiProperty({ description: 'Multiple report dates', type: [String], required: false })
   report_deadlines?: string[];

frontend/package-lock.json

@@ -48,7 +48,6 @@
     "@types/react-transition-group": "^4.4.12",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.20",
-    "baseline-browser-mapping": "^2.8.29",
     "eslint": "^9.9.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",

frontend/package.json

@@ -4,7 +4,7 @@ import { FooterText } from "./translations/general";
 
 const Footer: React.FC = () => {
   return (
-    <div className="footer flex flex-col items-center justify-center py-10 px-4 text-base text-grey-700">
+    <div className="footer flex flex-col items-center justify-center py-12 pt-16 px-4 text-base text-grey-700">
       <Group className="flex flex-col p-2">
         <Text>
           {FooterText.C4C_Motto}

frontend/src/Footer.tsx

@@ -27,7 +27,7 @@ import { IoIosWarning } from "react-icons/io";
         onClick={onCloseDelete}
       >
         <div 
-          className=" bg-white border-2 rounded-md shadow-2xl p-8 max-w-xl w-full mx-4 transform transition-all duration-300"
+          className=" bg-white rounded-md shadow-2xl p-8 max-w-xl w-full mx-4 transform transition-all duration-300"
           onClick={(e) => e.stopPropagation()}
         >
 
@@ -53,7 +53,7 @@ import { IoIosWarning } from "react-icons/io";
               <IoIosWarning size={24} className="text-red"/>
               <p className="font-bold px-1 text-lg text-red"> Warning </p>
             </div>
-            <p className=" text-left text-lg font-semibold text-red">
+            <p className=" text-left font-semibold text-red">
               {warningMessage}
             </p>
 

…ontend/src/custom/ActionConfirmation.tsx …nd/src/components/ActionConfirmation.tsxfrontend/src/custom/ActionConfirmation.tsx renamed to frontend/src/components/ActionConfirmation.tsx frontend/src/custom/ActionConfirmation.tsx renamed to frontend/src/components/ActionConfirmation.tsx

@@ -2,39 +2,58 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 
 type ButtonProps = {
-    text: string;
-    onClick: () => void;
-    className?: string;
-    logo?: IconProp;
-    logoPosition?: 'left' | 'right';
-    disabled?: boolean;
-    type?: "button" | "submit" | "reset";
-}
-
+  text: string;
+  onClick: () => void;
+  className?: string;
+  logo?: IconProp;
+  logoPosition?: "left" | "right" | "center";
+  disabled?: boolean;
+  type?: "button" | "submit" | "reset";
+};
 
 // Button component where you can pass in text, onClick handler, optional className
 // for styling, and an optional logo with its position.
 //Styling is default, but can be overridden by passing in a className prop
-export default function Button({ text, onClick, className, logo, logoPosition, disabled, type }: ButtonProps) {
+export default function Button({
+  text,
+  onClick,
+  className,
+  logo,
+  logoPosition,
+  disabled,
+  type,
+}: ButtonProps) {
   return (
-    <button onClick={onClick} disabled={disabled || false} type={type || "button"}
-    className={`
-        px-4 py-2 rounded-3xl font-medium text-black border-2 active:bg-primary-900 active:border-primary-900 active:text-white
-        h-fit flex items-center justify-center transition-opacity
-        ${className} ${disabled
-          ? "cursor-not-allowed opacity-50"
-          : "hover:opacity-90"}
+    <button
+      onClick={onClick}
+      disabled={disabled || false}
+      type={type || "button"}
+      className={`
+        px-4 py-2 rounded-3xl font-medium text-black border-2 
+      active:bg-primary-900 active:border-primary-900 active:text-white
+        h-fit flex-grow-0 items-center justify-center     
+        transition-opacity flex whitespace-nowrap
+        ${className} ${
+          disabled ? "cursor-not-allowed opacity-50" : "hover:opacity-90"
+        }
       `}
     >
-      {logo && logoPosition === 'left' &&
-      <span className="mr-2">
-        <FontAwesomeIcon icon={logo} className="text-lg w-4 h-4" />
-      </span>}
+      {logo && logoPosition === "left" && (
+        <span className="mr-2">
+          <FontAwesomeIcon icon={logo} className="" />
+        </span>
+      )}
       {text}
-      {logo && logoPosition === 'right' &&
-      <span className="ml-2">
-        <FontAwesomeIcon icon={logo} className="text-lg w-4 h-4" />
-      </span>}
+      {logo && logoPosition === "right" && (
+        <span className="ml-2">
+          <FontAwesomeIcon icon={logo} className="" />
+        </span>
+      )}
+      {logo && logoPosition === "center" && (
+        <span className="">
+          <FontAwesomeIcon icon={logo} className="" />
+        </span>
+      )}
     </button>
   );
-}
+}

frontend/src/components/Button.tsx

@@ -21,15 +21,15 @@ export default function InputField({
 }: InputFieldProps) {
   return (
     <div className="w-full">
-      <label htmlFor={id} className="block text-left font-semibold">
+      <label htmlFor={id} className="block text-left font-semibold text-sm lg:text-base">
         {label}
         {required && <span className="text-red">*</span>}
       </label>
       <div className="mt-2 flex items-center rounded-md">
         <input
           id={id}
           {...inputProps}
-          className={`block w-full rounded-md py-2.5 pl-4 pr-3 text-base border-2 placeholder:text-grey-500 ${
+          className={`block w-full rounded-md py-2.5 pl-4 pr-3 text-sm lg:text-base border-2 placeholder:text-grey-500 ${
             error ? "border-red bg-red-lightest" : "border-grey-500 bg-grey-100 " 
           }`}
 

frontend/src/components/InputField.tsx

@@ -27,7 +27,7 @@ export default function SearchBar({
       />
       <input
         placeholder={`Search for a ${text}...`}
-        className="w-full px-4 py-2 rounded-3xl font-medium text-black border-2 flex items-center justify-center border-grey-500"
+        className="w-full px-4 py-2 rounded-3xl font-medium text-sm lg:text-base text-black border-2 flex items-center justify-center border-grey-500"
         onChange={handleInputChange}
         value={userInput}
         style={{ paddingLeft: "2rem" }} // make room for the icon