add multiselect and sort options to service list

webapp/package.json

@@ -15,6 +15,7 @@
     "bootstrap": "5.2.x",
     "core-js": "3.x",
     "vue": "^3.4.29",
+    "vue-multiselect": "^3.0.0",
     "vue-router": "^4.3.3"
   },
   "devDependencies": {

webapp/src/views/ServiceList.vue

@@ -1,21 +1,32 @@
 <template>
   <div class="container">
     <h1>Dienstzuteilung</h1>
+    <multiselect
+      v-model="selectedServices"
+      placeholder="Bitte Auswählen"
+      label="name"
+      track-by="id"
+      :options="services"
+      :multiple="true"
+      @select="fetchServiceHistory"
+      @remove="fetchServiceHistory"
+      v-if="services?.length > 0"
+    ></multiselect>
 
-    <select
-      class="form-select"
-      aria-label="Default select example"
-      @change="fetchServiceHistory(($event.target as HTMLSelectElement).value)"
-    >
-      <option disabled selected>Bitte auswählen</option>
-      <option
-        v-for="(service, index) in services"
-        :key="index"
-        :value="service.id"
-      >
-        {{ service.name }}
-      </option>
-    </select>
+    <div>
+      <label class="typo__label">Sortieren nach:</label>
+      <multiselect
+        v-model="selectedOption"
+        :options="sortOptions"
+        label="text"
+        track-by="id"
+        :searchable="false"
+        :show-labels="false"
+        :allow-empty="false"
+        @select="sortServiceHistory"
+        placeholder="Pick a value"
+      ></multiselect>
+    </div>
 
     <table class="table table-striped" v-if="serviceHistory">
       <thead>
@@ -46,26 +57,78 @@
         </tr>
       </tbody>
     </table>
+    <div
+      class="d-flex justify-content-center"
+      v-if="!serviceHistory && selectedServices.length > 0"
+    >
+      <div class="spinner-border" role="status">
+        <span class="visually-hidden">Loading...</span>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import type { ServiceHistory, Services } from "@/services/service"
 import { onMounted, ref } from "vue"
 import { getServiceHistory, getServices } from "@/services/service"
+import Multiselect from "vue-multiselect"
 
 const services = ref<Services[] | null>(null)
 const serviceHistory = ref<ServiceHistory[] | null>(null)
+const selectedServices = ref<Services[]>([])
+
+const sortOptions = [
+  { id: 0, text: "am längsten ohne Dienst" },
+  { id: 1, text: "am wenigsten Dienste" },
+]
+
+const selectedOption = ref(sortOptions[0])
 
 onMounted(async () => {
   services.value = await getServices()
 })
 
-const fetchServiceHistory = async function (id: string) {
-  serviceHistory.value = await getServiceHistory([parseInt(id)])
+const fetchServiceHistory = async function () {
+  const ids = selectedServices.value.map((service) => service.id)
+  if (ids.length === 0) {
+    serviceHistory.value = null
+    return
+  }
+  serviceHistory.value = await getServiceHistory(ids)
+  sortServiceHistory()
+}
+
+const sortServiceHistory = function () {
+  serviceHistory.value = serviceHistory.value?.sort((a, b) => {
+    // Helper function to find the most recent past date
+    const getLastPastServiceDate = (serviceDates) => {
+      const pastDates = serviceDates
+        .map((dateObj) => new Date(dateObj.date))
+        .filter((date) => date <= new Date())
+
+      if (pastDates.length === 0) {
+        return new Date(0) // Return a very old date if there are no past dates
+      }
+
+      return new Date(Math.max(...pastDates))
+    }
+
+    const lastPastDateA = getLastPastServiceDate(a.serviceDates)
+    const lastPastDateB = getLastPastServiceDate(b.serviceDates)
+
+    return lastPastDateA - lastPastDateB
+  })
+  if (selectedOption.value.id === 1) {
+    serviceHistory.value = serviceHistory.value?.sort((a, b) => {
+      return a.serviceDates.length - b.serviceDates.length
+    })
+  }
 }
 </script>
 
+<style src="node_modules/vue-multiselect/dist/vue-multiselect.css"></style>
+
 <style scoped>
 tr.requested td {
   color: var(--bs-secondary);