#60 (#95): add filtering for package info in deliveries for couriers

SaintAngeLs · Jan 16, 2024 · e167b78 · e167b78
1 parent 5f5637b
commit e167b78
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 4 deletions.
diff --git a/SwiftParcel.Web/frontend/src/components/modals/deliveries/filterDeliveriesModal.tsx b/SwiftParcel.Web/frontend/src/components/modals/deliveries/filterDeliveriesModal.tsx
@@ -235,6 +235,40 @@ import {
     </div>
   );
 
+  const PackageInfoFilterSection = ({ filterData, handleNumberChange }) => (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <TextInputWithLabel
+            id="volume-min"
+            label="Minimum volume:"
+            type="number"
+            value={filterData.minVolume}
+            onChange={handleNumberChange('minVolume')}
+        />
+        <TextInputWithLabel
+            id="volume-max"
+            label="Maximum volume:"
+            type="number"
+            value={filterData.maxVolume}
+            onChange={handleNumberChange('maxVolume')}
+        />
+
+        <TextInputWithLabel
+            id="weight-min"
+            label="Minimum weight:"
+            type="number"
+            value={filterData.minWeight}
+            onChange={handleNumberChange('minWeight')}
+        />
+        <TextInputWithLabel
+            id="weight-max"
+            label="Maximum weight:"
+            type="number"
+            value={filterData.maxWeight}
+            onChange={handleNumberChange('maxWeight')}
+        />
+    </div>
+  );
+
   const AddressFilterSection = ({ prefix, filterData, handleStringChange }) => (
     <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
         <TextInputWithLabel
@@ -426,6 +460,13 @@ import {
         (filteringDetails.filterPriority == "all" || (filteringDetails.filterPriority == element.priority)) &&
         (filteringDetails.filterAtWeekend == "all" || (filteringDetails.filterAtWeekend == booleanToString(element.atWeekend))) &&
 
+        // filtering of package info section
+        (filteringDetails.minVolume == null || element.volume >= filteringDetails.minVolume) &&
+        (filteringDetails.maxVolume == null || element.volume <= filteringDetails.maxVolume) &&
+
+        (filteringDetails.minWeight == null || element.weight >= filteringDetails.minWeight) &&
+        (filteringDetails.maxWeight == null || element.weight <= filteringDetails.maxWeight) &&
+
         // filtering of source address section
         (filteringDetails.keywordSourceStreet == "" || element.source.street.toLowerCase().includes(filteringDetails.keywordSourceStreet.toLowerCase())) &&
         (filteringDetails.keywordSourceBuildingNumber == "" || element.source.buildingNumber.toLowerCase().includes(filteringDetails.keywordSourceBuildingNumber.toLowerCase())) &&
@@ -471,27 +512,36 @@ import {
                     <div className="space-y-6 w-full" style={{ display: 'flex', justifyContent: 'center' }}>
                         <Button onClick={clearDetails}>Clear filtering details</Button>
                     </div>
+                    <div style={{ marginBottom: '20px' }}></div>
 
                     <SectionTitle title="Id info" />
                     <IdInfoFilterSection
                         filterData={filteringDetails}
                         handleStringChange={handleStringChange}
                     />
+                    <div style={{ marginBottom: '20px' }}></div>
 
                     <SectionTitle title="Status info" />
                     <StatusInfoFilterSection
                         filterData={filteringDetails}
                         handleStringChange={handleStringChange}
                         handleDateChange={handleDateChange}
                     />
+                    <div style={{ marginBottom: '20px' }}></div>
 
                     <SectionTitle title="Order info" />
                     <OrderInfoFilterSection
                         filterData={filteringDetails}
                         handleDateChange={handleDateChange}
                         handleStringChange={handleStringChange}
                     />
+                    <div style={{ marginBottom: '40px' }}></div>
 
+                    <SectionTitle title="Package info" />
+                    <PackageInfoFilterSection
+                        filterData={filteringDetails}
+                        handleNumberChange={handleNumberChange}
+                    />
                     <div style={{ marginBottom: '20px' }}></div>
 
                     <SectionTitle title="Source address" />
@@ -500,14 +550,14 @@ import {
                         filterData={filteringDetails}
                         handleStringChange={handleStringChange}
                     />
+                    <div style={{ marginBottom: '20px' }}></div>
 
                     <SectionTitle title="Destination address" />
                     <AddressFilterSection
                         prefix="Destination"
                         filterData={filteringDetails}
                         handleStringChange={handleStringChange}
                     />
-
                     <div style={{ marginBottom: '20px' }}></div>
 
                     <div className="space-y-6 w-full" style={{ display: 'flex', justifyContent: 'center' }}>

diff --git a/SwiftParcel.Web/frontend/src/pages/orders/orders.tsx b/SwiftParcel.Web/frontend/src/pages/orders/orders.tsx
@@ -164,14 +164,14 @@ export default function Orders() {
           <h1 className="mb-2 text-3xl font-bold text-gray-900 dark:text-white" style={tableHeaderStyle.left}>
           Your orders
           </h1>
-
+          
           <Button className="mr-2" onClick={() => setShowFilterOrdersModal(true)}>
             <span className="hidden sm:flex">Filter data</span>
           </Button>
         </div>
         <p className="mb-5">
-              To see details of an order or check its full status, click button in the last column of the table.
-            </p>
+          To see details of an order or check its full status, click button in the last column of the table.
+        </p>
         <FilterOrdersModal
           show={showFilterOrdersModal}
           setShow={setShowFilterOrdersModal}