From 65191063b6ac960d8125a1b0a3ae0ed3feb72535 Mon Sep 17 00:00:00 2001
From: Beniox <37512887+Beniox@users.noreply.github.com>
Date: Mon, 5 Aug 2024 19:20:38 +0200
Subject: [PATCH] display the sort selection in the same line as the service
 selection

---
 webapp/src/views/ServiceList.vue | 66 +++++++++++++++++++++-----------
 1 file changed, 43 insertions(+), 23 deletions(-)

diff --git a/webapp/src/views/ServiceList.vue b/webapp/src/views/ServiceList.vue
index 749dc7a..51cf456 100644
--- a/webapp/src/views/ServiceList.vue
+++ b/webapp/src/views/ServiceList.vue
@@ -1,32 +1,35 @@
 <template>
   <div class="container">
     <h1>Dienstzuteilung</h1>
-    <multiselect
-      v-model="selectedServices"
-      placeholder="Bitte Auswählen"
-      label="name"
-      track-by="id"
-      :options="services"
-      :multiple="true"
-      :close-on-select="false"
-      @select="fetchServiceHistory"
-      @remove="fetchServiceHistory"
-      v-if="services != null && services.length > 0"
-    ></multiselect>
-
-    <div>
-      <label>Sortieren nach:</label>
+    <div class="selection-bar">
       <multiselect
-        v-model="selectedOption"
-        :options="sortOptions"
-        label="text"
+        class="selection-service"
+        v-model="selectedServices"
+        placeholder="Bitte Auswählen"
+        label="name"
         track-by="id"
-        :searchable="false"
-        :show-labels="false"
-        :allow-empty="false"
-        @select="sortServiceHistory"
-        placeholder="Pick a value"
+        :options="services"
+        :multiple="true"
+        :close-on-select="false"
+        @select="fetchServiceHistory"
+        @remove="fetchServiceHistory"
+        v-if="services != null && services.length > 0"
       ></multiselect>
+
+      <div class="selection-sort">
+        <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>
     </div>
 
     <table class="table table-striped" v-if="serviceHistory">
@@ -153,4 +156,21 @@ tr.todelete td {
   color: var(--bs-danger);
   text-decoration: line-through;
 }
+
+.selection-bar {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}
+
+.selection-sort {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  width: 400px;
+}
+
+.selection-service {
+  flex-grow: 2;
+}
 </style>