347 dev add/edit grant

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.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/src/Footer.tsx

@@ -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/custom/ActionConfirmation.tsx → frontend/src/components/ActionConfirmation.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>
 

frontend/src/components/Button.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
-        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
+        w-fit 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/SearchBar.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

frontend/src/external/bcanSatchel/actions.ts

@@ -40,6 +40,8 @@ export const logoutUser = action("logoutUser");
  */
 export const removeProfilePic = action("removeProfilePic");
 
+export const clearAllFilters = action("clearAllFilters");
+
 /**
  * Moves along the all grants that are fetched from back end to mutator.
  */

frontend/src/external/bcanSatchel/mutators.ts

@@ -1,11 +1,12 @@
-import { mutator } from 'satcheljs';
+import { mutator } from "satcheljs";
 import {
   setAuthState,
   updateUserProfile,
   logoutUser,
   fetchAllGrants,
   updateFilter,
-  updateStartDateFilter, updateEndDateFilter,
+  updateStartDateFilter,
+  updateEndDateFilter,
   updateSearchQuery,
   updateYearFilter,
   updateUserEmailFilter,
@@ -15,23 +16,23 @@ import {
   updateSort,
   updateUserQuery,
   updateUserSort,
-  removeProfilePic,
-} from './actions';
-import { getAppStore, persistToSessionStorage } from './store';
-import { setActiveUsers, setInactiveUsers } from './actions';
+  clearAllFilters,
+} from "./actions";
+import { getAppStore, persistToSessionStorage } from "./store";
+import { setActiveUsers, setInactiveUsers, removeProfilePic } from "./actions";
 
-/** 
+/**
  * setActiveUsers mutator
-*/
+ */
 mutator(setActiveUsers, (actionMessage) => {
   const store = getAppStore();
   store.activeUsers = actionMessage.users;
   persistToSessionStorage();
 });
 
-/** 
+/**
  * setInactiveUsers mutator
-*/
+ */
 mutator(setInactiveUsers, (actionMessage) => {
   const store = getAppStore();
   store.inactiveUsers = actionMessage.users;
@@ -42,13 +43,13 @@ mutator(setInactiveUsers, (actionMessage) => {
  * setAuthState mutator
  */
 mutator(setAuthState, (actionMessage) => {
-  console.log('=== setAuthState MUTATOR CALLED ===');
+  console.log("=== setAuthState MUTATOR CALLED ===");
   const store = getAppStore();
-  console.log('Setting user:', actionMessage.user);
+  console.log("Setting user:", actionMessage.user);
   store.isAuthenticated = actionMessage.isAuthenticated;
   store.user = actionMessage.user;
   store.accessToken = actionMessage.accessToken;
-  console.log('Calling persistToSessionStorage...');
+  console.log("Calling persistToSessionStorage...");
   persistToSessionStorage();
 });
 
@@ -99,9 +100,23 @@ mutator(logoutUser, () => {
   store.isAuthenticated = false;
   store.user = null;
   store.accessToken = null;
-  sessionStorage.removeItem('bcanAppStore');
+  sessionStorage.removeItem("bcanAppStore");
 });
 
+// Clears all store filters
+mutator(clearAllFilters, () => {
+  const store = getAppStore();
+  store.filterStatus = null;
+  store.startDateFilter = null;
+  store.endDateFilter = null;
+  store.searchQuery = "";
+  store.yearFilter = [];
+  store.userQuery = "";
+  store.emailFilter = false;
+  store.eligibleOnly = false;
+  store.amountMinFilter = null;
+  store.amountMaxFilter = null;
+});
 
 /**
  * Reassigns all grants to new grants from the backend.
@@ -117,16 +132,32 @@ mutator(fetchAllGrants, (actionMessage) => {
 mutator(updateFilter, (actionMessage) => {
   const store = getAppStore();
   store.filterStatus = actionMessage.status;
-})
+});
 
 mutator(updateStartDateFilter, (actionMessage) => {
   const store = getAppStore();
   store.startDateFilter = actionMessage.startDateFilter;
-})
+});
 
 mutator(updateEndDateFilter, (actionMessage) => {
   const store = getAppStore();
   store.endDateFilter = actionMessage.endDateFilter;
+});
+
+mutator(updateUserEmailFilter, (actionMessage) => {
+  const store = getAppStore();
+  store.emailFilter = actionMessage.userEmailFilter;
+})
+
+mutator(updateEligibleOnly, (actionMessage) => {
+  const store = getAppStore();
+  store.eligibleOnly = actionMessage.eligibleOnly;
+})
+
+mutator(updateAmountRange, (actionMessage) => {
+  const store = getAppStore();
+  store.amountMinFilter = actionMessage.amountMinFilter;
+  store.amountMaxFilter = actionMessage.amountMaxFilter;
 })
 
 mutator(updateUserEmailFilter, (actionMessage) => {
@@ -148,33 +179,32 @@ mutator(updateAmountRange, (actionMessage) => {
 mutator(updateSearchQuery, (actionMessage) => {
   const store = getAppStore();
   store.searchQuery = actionMessage.searchQuery;
-})
+});
 
 mutator(updateYearFilter, (actionMessage) => {
   const store = getAppStore();
   store.yearFilter = actionMessage.yearFilter;
-})
+});
 
 mutator(setNotifications, (actionMessage) => {
   const store = getAppStore();
   store.notifications = actionMessage.notifications;
-})
+});
 
 mutator(updateSort, (actionMessage) => {
   const store = getAppStore();
   store.sort = actionMessage.sort;
-})
+});
 
 mutator(updateUserQuery, (actionMessage) => {
   const store = getAppStore();
   store.userQuery = actionMessage.userQuery;
-  console.log('Updated userQuery:', store.userQuery);
-})
+});
 
 mutator(updateUserSort, (actionMessage) => {
   const store = getAppStore();
   store.userSort = actionMessage.sort;
-}) 
+});
 
 mutator(removeProfilePic, () => {
   const store = getAppStore();
@@ -192,4 +222,4 @@ mutator(removeProfilePic, () => {
   }
 
   persistToSessionStorage();
-});
+});