Merge pull request #20 from ComputerScienceHouse/table-sorting

Add Table Sorting By Column

Author: jabbate19

src/frontend/src/components/CarRow.vue

@@ -51,4 +51,8 @@ tr:hover > * {
 .rotated {
   transform: rotate(90deg);
 }
+
+tr {
+  cursor: pointer;
+}
 </style>

src/frontend/src/components/CarTable.vue

@@ -2,8 +2,9 @@
 import CarRowGroup from './CarRowGroup.vue';
 import LeaveCarModal from './LeaveCarModal.vue';
 import Loading from './LoadingWheel.vue';
-
-const eventStore = useEventStore();
+import CaretUp from './icons/CaretUp.vue';
+import CaretDown from './icons/CaretDown.vue';
+import BlankIcon from './icons/BlankIcon.vue';
 </script>
 
 <template>
@@ -12,23 +13,34 @@ const eventStore = useEventStore();
     <table class="table">
       <thead>
         <tr>
-          <th scope="col">Driver</th>
-          <th scope="col">Capacity</th>
-          <th scope="col">Departure</th>
-          <th scope="col">Return</th>
+          <th scope="col" @click="changeSort('driver')">
+            Driver <CaretUp v-if="sortingOrder.fieldName == 'driver' && sortingOrder.asc" />
+            <CaretDown v-if="sortingOrder.fieldName == 'driver' && !sortingOrder.asc" />
+            <BlankIcon v-if="sortingOrder.fieldName != 'driver'" />
+          </th>
+          <th scope="col" @click="changeSort('capacity')">
+            Capacity <CaretUp v-if="sortingOrder.fieldName == 'capacity' && sortingOrder.asc" />
+            <CaretDown v-if="sortingOrder.fieldName == 'capacity' && !sortingOrder.asc" />
+            <BlankIcon v-if="sortingOrder.fieldName != 'capacity'" />
+          </th>
+          <th scope="col" @click="changeSort('departure')">
+            Departure <CaretUp v-if="sortingOrder.fieldName == 'departure' && sortingOrder.asc" />
+            <CaretDown v-if="sortingOrder.fieldName == 'departure' && !sortingOrder.asc" />
+            <BlankIcon v-if="sortingOrder.fieldName != 'departure'" />
+          </th>
+          <th scope="col" @click="changeSort('return')">
+            Return <CaretUp v-if="sortingOrder.fieldName == 'return' && sortingOrder.asc" />
+            <CaretDown v-if="sortingOrder.fieldName == 'return' && !sortingOrder.asc" />
+            <BlankIcon v-if="sortingOrder.fieldName != 'return'" />
+          </th>
           <th scope="col"></th>
         </tr>
       </thead>
       <tbody>
-        <CarRowGroup
-          v-for="car in eventStore.selectedEventCars"
-          :car="car"
-          :eventId="eventId"
-          :key="car.id"
-        />
+        <CarRowGroup v-for="car in sortedCars" :car="car" :eventId="eventId" :key="car.id" />
       </tbody>
     </table>
-    <LeaveCarModal v-for="car in eventStore.selectedEventCars" :carId="car!.id" :key="car!.id" />
+    <LeaveCarModal v-for="car in sortedCars" :carId="car!.id" :key="car!.id" />
   </div>
 </template>
 
@@ -38,13 +50,22 @@ import { defineComponent } from 'vue';
 import { useEventStore } from '@/stores/events';
 import { usePopupStore } from '@/stores/popup';
 
+interface SortingOrder {
+  fieldName: string;
+  asc: boolean;
+}
+
 export default defineComponent({
   props: {
     eventId: Number
   },
   data() {
     return {
-      loading: true
+      loading: true,
+      sortingOrder: {
+        fieldName: 'driver',
+        asc: true
+      } as SortingOrder
     };
   },
   methods: {
@@ -67,10 +88,47 @@ export default defineComponent({
         const popupStore = usePopupStore();
         popupStore.addPopup(PopupType.Danger, 'Failed to Get Cars. An unknown error occured.');
       }
+    },
+    changeSort(field: string) {
+      if (this.sortingOrder.fieldName === field) {
+        this.sortingOrder.asc = !this.sortingOrder.asc;
+      } else {
+        this.sortingOrder.fieldName = field;
+        this.sortingOrder.asc = true;
+      }
     }
   },
   created() {
     this.fetchCarData(); // Fetch card data when the component is created
+  },
+  computed: {
+    sortedCars() {
+      const eventStore = useEventStore();
+      const { fieldName, asc } = this.sortingOrder;
+      return [...(eventStore.selectedEventCars || [])].sort((a, b) => {
+        const compare = (valA: string | number, valB: string | number) => {
+          if (valA < valB) return asc ? -1 : 1;
+          if (valA > valB) return asc ? 1 : -1;
+          return 0;
+        };
+
+        switch (fieldName) {
+          case 'driver':
+            return compare(a.driver.name, b.driver.name);
+          case 'capacity':
+            return compare(a.riders.length, b.riders.length);
+          case 'departure':
+            return compare(
+              new Date(a.departureTime).getTime(),
+              new Date(b.departureTime).getTime()
+            );
+          case 'return':
+            return compare(new Date(a.returnTime).getTime(), new Date(b.returnTime).getTime());
+          default:
+            return 0;
+        }
+      });
+    }
   }
 });
 </script>
@@ -97,4 +155,8 @@ export default defineComponent({
   opacity: 0;
   transform: translateY(-30px);
 }
+
+th {
+  cursor: pointer;
+}
 </style>

src/frontend/src/components/icons/BlankIcon.vue

@@ -0,0 +1,10 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="currentColor"
+    class="bi bi-blank"
+    viewBox="0 0 16 16"
+  ></svg>
+</template>

src/frontend/src/components/icons/CaretUp.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="currentColor"
+    class="bi bi-caret-up-fill"
+    viewBox="0 0 16 16"
+  >
+    <path
+      d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"
+    />
+  </svg>
+</template>