Chirag tool status filter and sort dropdown addition

public/index.css

@@ -171,13 +171,21 @@ body.bm-dashboard-dark .table {
 }
 
 body.dark-mode .table th,
-body.dark-mode .table td,
+body.dark-mode .table td {
+  color: #ffffff !important;
+  border-color: #3a506b;
+}
+
 body.bm-dashboard-dark .table th,
 body.bm-dashboard-dark .table td {
   color: #ffffff !important;
   border-color: #3a506b;
 }
 
+body.bm-dashboard-dark .table th{
+  background-color: #2e5061 !important;
+}
+
 body.dark-mode .table-striped > tbody > tr:nth-of-type(odd),
 body.bm-dashboard-dark .table-striped > tbody > tr:nth-of-type(odd) {
   background-color: rgba(46, 80, 97, 0.5);

src/components/BMDashboard/ItemList/ItemListView.module.css

@@ -1,3 +1,7 @@
+table thead th, table td {
+  vertical-align: middle !important;
+}
+
 .itemsListContainer {
   width: 100%;
   max-width: 1536px;
@@ -24,6 +28,10 @@
   height: 2rem;
 }
 
+.itemsCell td{
+  vertical-align: middle;
+}
+
 .itemsCell button {
   cursor: pointer;
 }
@@ -52,8 +60,7 @@
 
 .selectInput label {
   font-weight: bold;
-  text-align: right;
-  min-width: 100px;
+  text-align: center;
   white-space: nowrap;
   margin-bottom: 8px;
 }
@@ -62,7 +69,7 @@
 .selectInput select {
   height: 38px;
   width: 100%;
-  min-width: 220px;
+  min-width: 180px;
   max-width: 240px;
   padding: 5px;
   border: 1px solid #ccc;

src/components/BMDashboard/ItemList/SelectForm.jsx

@@ -1,14 +1,22 @@
 import { Form, FormGroup, Label, Input } from 'reactstrap';
 import styles from './ItemListView.module.css';
 
-export default function SelectForm({ items, setSelectedProject, setSelectedItem }) {
+export default function SelectForm({
+  items,
+  setSelectedProject,
+  setSelectedItem,
+  setSelectedCondition,
+  setSelectedToolStatus,
+}) {
   let projectsSet = [];
   if (items.length) {
     projectsSet = [...new Set(items.map(el => el.project?.name))];
   }
 
   const handleChange = event => {
     setSelectedItem('all');
+    setSelectedCondition('all');
+    setSelectedToolStatus('all');
     setSelectedProject(event.target.value);
   };
 

src/components/BMDashboard/ItemList/SelectItem.jsx

@@ -6,44 +6,72 @@ export default function SelectItem({
   selectedProject,
   selectedItem,
   setSelectedItem,
+  selectedToolStatus,
+  setSelectedToolStatus,
+  selectedCondition,
+  setSelectedCondition,
   label,
 }) {
   let itemSet = [];
   if (items?.length) {
-    if (selectedProject === 'all') {
-      itemSet = [
-        ...new Set(
-          items
-            .filter(m => m.itemType?.name) // Filter out items with null/undefined names
-            .map(m => m.itemType.name),
-        ),
-      ];
-    } else {
-      itemSet = [
-        ...new Set(
-          items
-            .filter(mat => mat.project?.name === selectedProject && mat.itemType?.name)
-            .map(m => m.itemType.name),
-        ),
-      ];
+    if (label === 'Tool') {
+      if (selectedProject === 'all') {
+        itemSet = [...new Set(items.filter(m => m.itemType?.name).map(m => m.itemType.name))];
+      } else {
+        itemSet = [
+          ...new Set(
+            items
+              .filter(mat => mat.project?.name === selectedProject && mat.itemType?.name)
+              .map(m => m.itemType.name),
+          ),
+        ];
+      }
+    } else if (label === 'Tool Status') {
+      itemSet = ['Using', 'Available', 'Under Maintenance'];
+    } else if (label === 'Condition') {
+      if (selectedProject === 'all') {
+        itemSet = [...new Set(items.filter(m => m.condition).map(m => m.condition))];
+      } else {
+        itemSet = [
+          ...new Set(
+            items
+              .filter(mat => mat.project?.name === selectedProject && mat.condition)
+              .map(m => m.condition),
+          ),
+        ];
+      }
     }
   }
 
   return (
     <Form>
-      <FormGroup className={`${styles.selectInput}`}>
-        <Label htmlFor="select-material" style={{ marginLeft: '10px' }}>
-          {label ? `${label}:` : 'Material:'}
-        </Label>
+      <FormGroup className={styles.selectInput}>
+        <Label htmlFor="select-material">{label ? `${label}:` : 'Material:'}</Label>
+
         <Input
           id="select-item"
           name="select-item"
           type="select"
-          value={selectedItem}
-          onChange={e => setSelectedItem(e.target.value)}
-          disabled={!items.length}
+          value={
+            label === 'Condition'
+              ? selectedCondition
+              : label === 'Tool Status'
+              ? selectedToolStatus
+              : selectedItem
+          }
+          onChange={e => {
+            const val = e.target.value;
+            if (label === 'Tool Status') {
+              setSelectedToolStatus(val);
+            } else if (label === 'Condition') {
+              setSelectedCondition(val);
+            } else {
+              setSelectedItem(val);
+            }
+          }}
+          disabled={!itemSet.length}
         >
-          {items.length ? (
+          {itemSet.length ? (
             <>
               <option value="all" key="all-option">
                 All

src/components/BMDashboard/ToolItemList/ToolItemListView.jsx

@@ -16,30 +16,75 @@ export function ToolItemListView({
   const [filteredItems, setFilteredItems] = useState(items);
   const [selectedProject, setSelectedProject] = useState('all');
   const [selectedItem, setSelectedItem] = useState('all');
+  const [selectedToolStatus, setSelectedToolStatus] = useState('all');
+  const [selectedCondition, setSelectedCondition] = useState('all');
   const [isError, setIsError] = useState(false);
 
+  useEffect(() => {
+    try {
+      const sp = sessionStorage.getItem('toolsSelectedProject');
+      const si = sessionStorage.getItem('toolsSelectedItem');
+      const sts = sessionStorage.getItem('toolsSelectedStatus');
+      const sc = sessionStorage.getItem('toolsSelectedCondition');
+
+      if (sp) setSelectedProject(sp);
+      if (si) setSelectedItem(si);
+      if (sts) setSelectedToolStatus(sts);
+      if (sc) setSelectedCondition(sc);
+    } catch (e) {}
+  }, []);
+
+  // Save filters / sort whenever they change
+  useEffect(() => {
+    try {
+      sessionStorage.setItem('toolsSelectedProject', selectedProject);
+      sessionStorage.setItem('toolsSelectedItem', selectedItem);
+      sessionStorage.setItem('toolsSelectedStatus', selectedToolStatus);
+      sessionStorage.setItem('toolsSelectedCondition', selectedCondition);
+    } catch (e) {
+      // ignore
+    }
+  }, [selectedProject, selectedItem, selectedToolStatus, selectedCondition]);
+
   useEffect(() => {
     if (items) setFilteredItems([...items]);
   }, [items]);
 
   useEffect(() => {
-    let filterItems;
     if (!items) return;
-    if (selectedProject === 'all' && selectedItem === 'all') {
-      setFilteredItems([...items]);
-    } else if (selectedProject !== 'all' && selectedItem === 'all') {
-      filterItems = items.filter(item => item.project?.name === selectedProject);
-      setFilteredItems([...filterItems]);
-    } else if (selectedProject === 'all' && selectedItem !== 'all') {
-      filterItems = items.filter(item => item.itemType?.name === selectedItem);
-      setFilteredItems([...filterItems]);
-    } else {
-      filterItems = items.filter(
-        item => item.project?.name === selectedProject && item.itemType?.name === selectedItem,
-      );
-      setFilteredItems([...filterItems]);
+
+    let filterItems = [...items];
+
+    if (selectedProject !== 'all') {
+      filterItems = filterItems.filter(item => item.project?.name === selectedProject);
+    }
+
+    if (selectedItem !== 'all') {
+      filterItems = filterItems.filter(item => item.itemType?.name === selectedItem);
+    }
+
+    if (selectedToolStatus !== 'all') {
+      filterItems = filterItems.filter(item => {
+        if (selectedToolStatus === 'Using') {
+          return item.itemType?.using?.includes(item._id);
+        } else if (selectedToolStatus === 'Available') {
+          return (
+            item.itemType?.available?.includes(item._id) &&
+            item.condition !== 'Lost' &&
+            item.condition !== 'Needs Replacing'
+          );
+        } else if (selectedToolStatus === 'Under Maintenance') {
+          return item.condition === 'Worn' || item.condition === 'Damaged';
+        }
+      });
+    }
+
+    if (selectedCondition !== 'all') {
+      filterItems = filterItems.filter(item => item.condition === selectedCondition);
     }
-  }, [selectedProject, selectedItem, items]);
+
+    setFilteredItems(filterItems);
+  }, [items, selectedProject, selectedItem, selectedToolStatus, selectedCondition]);
 
   useEffect(() => {
     setIsError(Object.entries(errors).length > 0);
@@ -64,21 +109,51 @@ export function ToolItemListView({
                 items={items}
                 setSelectedProject={setSelectedProject}
                 setSelectedItem={setSelectedItem}
+                setSelectedCondition={setSelectedCondition}
+                setSelectedToolStatus={setSelectedToolStatus}
               />
               <SelectItem
                 items={items}
                 selectedProject={selectedProject}
                 selectedItem={selectedItem}
                 setSelectedItem={setSelectedItem}
+                selectedToolStatus={selectedToolStatus}
+                setSelectedToolStatus={setSelectedToolStatus}
+                selectedCondition={selectedCondition}
+                setSelectedCondition={setSelectedCondition}
                 label="Tool"
               />
+              <SelectItem
+                items={items}
+                selectedProject={selectedProject}
+                selectedItem={selectedItem}
+                setSelectedItem={setSelectedItem}
+                selectedToolStatus={selectedToolStatus}
+                setSelectedToolStatus={setSelectedToolStatus}
+                selectedCondition={selectedCondition}
+                setSelectedCondition={setSelectedCondition}
+                label="Tool Status"
+              />
+              <SelectItem
+                items={items}
+                selectedProject={selectedProject}
+                selectedItem={selectedItem}
+                setSelectedItem={setSelectedItem}
+                selectedToolStatus={selectedToolStatus}
+                setSelectedToolStatus={setSelectedToolStatus}
+                selectedCondition={selectedCondition}
+                setSelectedCondition={setSelectedCondition}
+                label="Condition"
+              />
             </>
           )}
         </span>
         {filteredItems && (
           <ToolItemsTable
             selectedProject={selectedProject}
             selectedItem={selectedItem}
+            selectedToolStatus={selectedToolStatus}
+            selectedCondition={selectedCondition}
             filteredItems={filteredItems}
             UpdateItemModal={UpdateItemModal}
             dynamicColumns={dynamicColumns}

src/components/BMDashboard/ToolItemList/ToolItemListView.module.css

@@ -7,6 +7,7 @@
 
 .itemsTableContainer {
   overflow-x: scroll;
+  align-items: center;
 }
 
 .itemsListContainer section {
@@ -20,7 +21,7 @@
   font-size: small;
 }
 
-.itemsListContainer th {
+.itemsTable th {
   height: 2rem;
 }
 
@@ -47,8 +48,8 @@
 }
 
 .conditionCell {
-  padding-left: 15px;
+  vertical-align: middle;
   display: flex;
   gap: 20px;
-  justify-content: flex-start;
+  justify-content: center;
 }