revert all drowpdowns and handlers

oss-slu · Dec 2, 2024 · a058dea · a058dea
1 parent 6809227
commit a058dea
Show file tree

Hide file tree

Showing 2 changed files with 139 additions and 17 deletions.
diff --git a/client-app/src/Components/DonatedItemsList.tsx b/client-app/src/Components/DonatedItemsList.tsx
@@ -80,11 +80,27 @@ const DonatedItemsList: React.FC = () => {
         const filtered = donatedItems.filter(
             item =>
                 item.id.toString().includes(searchTerm) ||
-            item.itemType.toLowerCase().includes(searchTerm) ||
-            item.donor?.firstName.toLowerCase().includes(searchTerm)
+                item.itemType.toLowerCase().includes(searchTerm) ||
+                item.donor?.firstName.toLowerCase().includes(searchTerm),
         );
         setFilteredItems(filtered);
     };
+    const handleSort = (event: React.ChangeEvent<HTMLSelectElement>): void => {
+        const value = event.target.value;
+        const sorted = [...donatedItems].sort((a, b) => {
+            const dateA = new Date(a.dateDonated);
+            const dateB = new Date(b.dateDonated);
+
+            if (value === 'dateAsc') {
+                return dateA.getTime() - dateB.getTime();
+            } else if (value === 'dateDesc') {
+                return dateB.getTime() - dateA.getTime();
+            }
+            return 0;
+        });
+        setFilteredItems(sorted);
+    };
+
     const handleBarcodeClick = (itemId: number): void => {
         const selectedItem = donatedItems.find(item => item.id === itemId);
         if (selectedItem) {
@@ -96,6 +112,50 @@ const DonatedItemsList: React.FC = () => {
         setModalIsOpen(true);
     };
 
+    const handleFilterByItemName = (
+        event: React.ChangeEvent<HTMLSelectElement>,
+    ): void => {
+        if (!event.target.value) {
+            setFilteredItems([]);
+            return;
+        }
+        const filtered = donatedItems.filter(
+            item =>
+                item.itemType.toLowerCase() ===
+                event.target.value.toLowerCase(),
+        );
+        setFilteredItems(filtered);
+    };
+
+    const handleFilterByProgram = (
+        event: React.ChangeEvent<HTMLSelectElement>,
+    ): void => {
+        if (!event.target.value) {
+            setFilteredItems([]);
+            return;
+        }
+        const programId = parseInt(event.target.value);
+        const filtered = donatedItems.filter(
+            item => item.programId === programId,
+        );
+        setFilteredItems(filtered);
+    };
+
+    const handleFilterByStatus = (
+        event: React.ChangeEvent<HTMLSelectElement>,
+    ): void => {
+        if (!event.target.value) {
+            setFilteredItems([]);
+            return;
+        }
+        const filtered = donatedItems.filter(
+            item =>
+                item.currentStatus.toLowerCase() ===
+                event.target.value.toLowerCase(),
+        );
+        setFilteredItems(filtered);
+    };
+
     const handleAddNewDonationClick = (): void => {
         navigate('/adddonation');
     };
@@ -153,9 +213,56 @@ const DonatedItemsList: React.FC = () => {
                         >
                             <FaSearch />
                         </button>
-                    </div>  
+                    </div>
+                    <div className="dropdowns">
+                        <select className="sort-options" onChange={handleSort}>
+                            <option value="" disabled defaultValue="">
+                                Sort
+                            </option>
+                            <option value="dateAsc">Date Ascending</option>
+                            <option value="dateDesc">Date Descending</option>
+                        </select>
+
+                        <select
+                            className="filter-options"
+                            onChange={handleFilterByItemName}
+                        >
+                            <option value="" disabled>
+                                Filter by Item Type
+                            </option>
+                            {Array.from(itemTypes).map(type => (
+                                <option key={type} value={type}>
+                                    {type}
+                                </option>
+                            ))}
+                        </select>
+
+                        <select
+                            className="filter-options"
+                            onChange={handleFilterByProgram}
+                        >
+                            <option value="" disabled>
+                                Filter by Program
+                            </option>
+                            {programOptions.map(program => (
+                                <option key={program.id} value={program.id}>
+                                    {program.name}
+                                </option>
+                            ))}
+                        </select>
+
+                        <select
+                            className="filter-options"
+                            onChange={handleFilterByStatus}
+                        >
+                            <option value="" disabled>
+                                Filter by Status
+                            </option>
+                            <option value="RECEIVED">Received</option>
+                        </select>
+                    </div>
                 </div>
-            </div> 
+            </div>
 
             <div className="div-updateprogram">
                 <button onClick={handleAddNewDonationClick}>
@@ -171,7 +278,7 @@ const DonatedItemsList: React.FC = () => {
                         <th>Item Name</th>
                         <th>Status</th>
                         <th>Donation Date</th>
-                        <th>Barcode</th>  
+                        <th>Barcode</th>
                     </tr>
                 </thead>
                 <tbody>

diff --git a/client-app/src/css/AdminHeader.css b/client-app/src/css/AdminHeader.css
@@ -21,21 +21,15 @@
 .search-bar {
     display: flex;
     align-items: center;
-    width: 100%; 
-    margin-right: 20px;
-    padding: 5px;
-    border-radius: 5px;
+    position: relative;
+    width: 100%;
 }
 
 .search-bar input {
     padding: 10px;
     border: 1px solid #ddd;
     border-radius: 4px;
-    width: 100%;
-    color: #333;
-    font-size: 16px;
-    box-sizing: border-box;
-
+    width: 75%;
 }
 
 .search-button {
@@ -44,13 +38,34 @@
     border: none;
     border-radius: 5px;
     cursor: pointer;
-    right: 5px;
+    right: 0;
     padding: 8px;
-    padding: 8px 15px; 
+    width: 15%;
     height: 45px;
-    margin-left: 10px;
+    margin: -10px 5px 5px 5px;
 }
 
+.dropdowns {
+    display: flex;
+}
+
+.sort-options,
+.filters-options {
+    padding: 5px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    width: 150px;
+    margin-right: 10px;
+}
+
+.set-program-button {
+    background-color: #6a5acd;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    padding: 8px 16px;
+}
 
 .item-list {
     width: 100%;