From f5317d67e1ed4ba6d29b7c2eeb687f50ab4423b2 Mon Sep 17 00:00:00 2001
From: Bastian Rickmann <info@bastianrickmann.de>
Date: Wed, 22 Mar 2023 02:52:25 +0100
Subject: [PATCH 1/5] feat: new own booking view

---
 .../booking-components/AvailabilityCard.vue   |  2 +-
 .../booking-components/BookingsTable.vue      | 59 ++++++++++++++++++-
 .../src/components/views/BookingsView.vue     |  2 -
 3 files changed, 58 insertions(+), 5 deletions(-)

diff --git a/desks-web-app/src/components/booking-components/AvailabilityCard.vue b/desks-web-app/src/components/booking-components/AvailabilityCard.vue
index 6262f2c..f77adec 100644
--- a/desks-web-app/src/components/booking-components/AvailabilityCard.vue
+++ b/desks-web-app/src/components/booking-components/AvailabilityCard.vue
@@ -106,7 +106,7 @@ export default defineComponent({
 
       return "success"
 
-    }
+    },
   }
 });
 </script>
diff --git a/desks-web-app/src/components/booking-components/BookingsTable.vue b/desks-web-app/src/components/booking-components/BookingsTable.vue
index ecc3446..baa2016 100644
--- a/desks-web-app/src/components/booking-components/BookingsTable.vue
+++ b/desks-web-app/src/components/booking-components/BookingsTable.vue
@@ -1,5 +1,41 @@
 <template>
-  <v-table>
+<v-row>
+  <v-col
+      v-for="item in [...bookings].sort(compareBookingsByTime)"
+      :key="item.id"
+    :style="{maxWidth: '478px'}">
+    <v-card
+        :variant="'flat'"
+    >
+      <template v-slot:append>
+        <v-btn icon elevation="0" >
+          <v-icon>mdi-dots-vertical</v-icon>
+          <booking-context-menu activator="parent" :booking="item" @edit="editBooking(item)"></booking-context-menu>
+        </v-btn>
+      </template>
+      <template v-slot:title v-if="dateConverter(item.start).startOf('day').isSame(moment().startOf('day'))">
+        Today
+      </template>
+      <template v-slot:title v-else-if="dateConverter(item.start).isSameOrBefore(dateConverter(item.start).add(1, 'week'))">
+        {{ dateConverter(item.start).format("dddd") }}
+      </template>
+      <template v-slot:title v-else>
+        {{ $format.date(item.start) }}
+      </template>
+      <template v-slot:subtitle>
+        {{ item.room.name }}
+      </template>
+
+
+      <v-card-text>
+
+         <v-chip>{{ $format.time(item.start) }} - {{ $format.time(item.end) }}</v-chip>
+
+      </v-card-text>
+    </v-card>
+  </v-col>
+</v-row>
+  <!-- <v-table>
     <thead>
     <tr>
       <th class="text-left w-33">
@@ -41,6 +77,7 @@
     </tr>
     </tbody>
   </v-table>
+-->
 </template>
 
 <script lang="ts">
@@ -49,6 +86,7 @@ import Booking from "@/models/Booking";
 import BookingContextMenu from "@/components/booking-components/BookingContextMenu.vue";
 import moment from "moment/moment";
 import {mapActions} from "vuex";
+import {Moment} from "moment";
 
 export default defineComponent({
   name: "BookingsTable",
@@ -58,10 +96,15 @@ export default defineComponent({
     bookings: Array
   },
   methods: {
-    ...mapActions("bookings", ["leaveEarly"]),
+    ...mapActions("bookings", ["leaveEarly", "deleteBooking"]),
     editBooking(booking: Booking) {
       this.$emit("editBooking", booking)
     },
+    moment: () => moment(),
+    async onDelete() {
+      await this.deleteBooking(this.booking);
+      this.$emit("deleted")
+    },
 
     compareBookingsByTime(a: Booking, b: Booking): number {
       return moment(a.start).diff(moment(b.start))
@@ -69,6 +112,18 @@ export default defineComponent({
 
     isOngoing(booking:Booking): boolean{
       return moment().isBetween(booking.start,booking.end)
+    },
+    dateConverter(d: Date): Moment {
+      return moment(d);
+    },
+    onEdite() {
+      this.$emit("edit")
+    },
+    isCurrentOrPastBooking(): boolean {
+      return moment(this.booking?.start).isBefore(moment.now())
+    },
+    isAllowedToEdit(): boolean {
+      return moment(this.booking?.end).isBefore(moment.now())
     }
   }
 
diff --git a/desks-web-app/src/components/views/BookingsView.vue b/desks-web-app/src/components/views/BookingsView.vue
index fb09105..4a4e489 100644
--- a/desks-web-app/src/components/views/BookingsView.vue
+++ b/desks-web-app/src/components/views/BookingsView.vue
@@ -41,7 +41,6 @@
       </v-row>
       <v-row>
         <v-col cols="12">
-          <v-card variant="flat">
             <v-card-text v-if="myUpcomingBookings.length <= 0">
               <v-alert>
                 You have no upcoming desk bookings.
@@ -53,7 +52,6 @@
                 @editBooking="(booking) => openEditeBookingDialog(booking)"
                 @openBooking="(booking) => openShowBookingDialog(booking)"
             ></BookingsTable>
-          </v-card>
         </v-col>
       </v-row>
 

From 6119098cd89a89a2184cdbe2e9ff9cce708f3267 Mon Sep 17 00:00:00 2001
From: "Rickmann, Bastian" <bastian.rickmann@umlaut.com>
Date: Wed, 22 Mar 2023 14:33:31 +0100
Subject: [PATCH 2/5] feat: improve styling

---
 .../booking-components/BookingsTable.vue      | 66 +++----------------
 1 file changed, 9 insertions(+), 57 deletions(-)

diff --git a/desks-web-app/src/components/booking-components/BookingsTable.vue b/desks-web-app/src/components/booking-components/BookingsTable.vue
index baa2016..2443dbd 100644
--- a/desks-web-app/src/components/booking-components/BookingsTable.vue
+++ b/desks-web-app/src/components/booking-components/BookingsTable.vue
@@ -1,9 +1,8 @@
 <template>
-<v-row>
+<v-row class="bookingsRow">
   <v-col
       v-for="item in [...bookings].sort(compareBookingsByTime)"
-      :key="item.id"
-    :style="{maxWidth: '478px'}">
+      :key="item.id">
     <v-card
         :variant="'flat'"
     >
@@ -35,49 +34,6 @@
     </v-card>
   </v-col>
 </v-row>
-  <!-- <v-table>
-    <thead>
-    <tr>
-      <th class="text-left w-33">
-        Room
-      </th>
-      <th class="text-left w-25">
-        Date
-      </th>
-      <th class="text-left">
-        Start
-      </th>
-      <th class="text-left">
-        End
-      </th>
-      <th></th>
-    </tr>
-    </thead>
-    <tbody>
-
-    <tr
-        v-for="item in [...bookings].sort(compareBookingsByTime)"
-        :key="item.id"
-        @click="$emit('openBooking', item)"
-    >
-      <td>{{ item.room.name }}</td>
-      <td>{{ $format.date(item.start) }}</td>
-      <td>{{ $format.time(item.start) }}</td>
-      <td>{{ $format.time(item.end) }}</td>
-      <td class="d-flex justify-end align-center">
-        <v-btn v-if="isOngoing(item)" @click.stop.prevent="() => leaveEarly(item)" variant="flat">Leave now</v-btn>
-        <v-btn
-            icon
-            elevation="0"
-        >
-          <v-icon>mdi-dots-vertical</v-icon>
-          <booking-context-menu activator="parent" :booking="item" @edit="editBooking(item)"></booking-context-menu>
-        </v-btn>
-      </td>
-    </tr>
-    </tbody>
-  </v-table>
--->
 </template>
 
 <script lang="ts">
@@ -101,10 +57,6 @@ export default defineComponent({
       this.$emit("editBooking", booking)
     },
     moment: () => moment(),
-    async onDelete() {
-      await this.deleteBooking(this.booking);
-      this.$emit("deleted")
-    },
 
     compareBookingsByTime(a: Booking, b: Booking): number {
       return moment(a.start).diff(moment(b.start))
@@ -118,18 +70,18 @@ export default defineComponent({
     },
     onEdite() {
       this.$emit("edit")
-    },
-    isCurrentOrPastBooking(): boolean {
-      return moment(this.booking?.start).isBefore(moment.now())
-    },
-    isAllowedToEdit(): boolean {
-      return moment(this.booking?.end).isBefore(moment.now())
     }
   }
 
 })
 </script>
 
-<style scoped>
+<style>
 
+@media screen and (min-device-width: 970px) {
+  .bookingsRow {
+    min-width: 20%;
+    width: fit-content;
+  }
+}
 </style>

From bf6333f567f18cc83b4198a9edc6d7893dff4b6c Mon Sep 17 00:00:00 2001
From: Bastian Rickmann <info@bastianrickmann.de>
Date: Sun, 11 Jun 2023 02:13:54 +0200
Subject: [PATCH 3/5] feature: adjust cards

---
 .../booking-components/BookingsTable.vue           | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/desks-web-app/src/components/booking-components/BookingsTable.vue b/desks-web-app/src/components/booking-components/BookingsTable.vue
index 2443dbd..1dd77aa 100644
--- a/desks-web-app/src/components/booking-components/BookingsTable.vue
+++ b/desks-web-app/src/components/booking-components/BookingsTable.vue
@@ -1,10 +1,12 @@
 <template>
-<v-row class="bookingsRow">
+<v-row class="bookingsRow justify-start flex-0-0">
   <v-col
       v-for="item in [...bookings].sort(compareBookingsByTime)"
-      :key="item.id">
+      :key="item.id"
+    class="bookingsCol">
     <v-card
         :variant="'flat'"
+        class="card"
     >
       <template v-slot:append>
         <v-btn icon elevation="0" >
@@ -84,4 +86,12 @@ export default defineComponent({
     width: fit-content;
   }
 }
+
+.bookingsCol {
+  flex-grow: 0;
+}
+
+.card {
+  width: max-content;
+}
 </style>

From bcba944204fa048891e47d339de41e3fef9904e0 Mon Sep 17 00:00:00 2001
From: Bastian Rickmann <info@bastianrickmann.de>
Date: Sun, 11 Jun 2023 02:24:14 +0200
Subject: [PATCH 4/5] feature: rename component

---
 .../{BookingsTable.vue => BookingsCards.vue}              | 2 +-
 desks-web-app/src/components/views/BookingsView.vue       | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)
 rename desks-web-app/src/components/booking-components/{BookingsTable.vue => BookingsCards.vue} (98%)

diff --git a/desks-web-app/src/components/booking-components/BookingsTable.vue b/desks-web-app/src/components/booking-components/BookingsCards.vue
similarity index 98%
rename from desks-web-app/src/components/booking-components/BookingsTable.vue
rename to desks-web-app/src/components/booking-components/BookingsCards.vue
index 1dd77aa..90285c9 100644
--- a/desks-web-app/src/components/booking-components/BookingsTable.vue
+++ b/desks-web-app/src/components/booking-components/BookingsCards.vue
@@ -47,7 +47,7 @@ import {mapActions} from "vuex";
 import {Moment} from "moment";
 
 export default defineComponent({
-  name: "BookingsTable",
+  name: "BookingsCards",
   components: {BookingContextMenu},
   // type inference enabled
   props: {
diff --git a/desks-web-app/src/components/views/BookingsView.vue b/desks-web-app/src/components/views/BookingsView.vue
index 4a4e489..beec7c8 100644
--- a/desks-web-app/src/components/views/BookingsView.vue
+++ b/desks-web-app/src/components/views/BookingsView.vue
@@ -46,12 +46,12 @@
                 You have no upcoming desk bookings.
               </v-alert>
             </v-card-text>
-            <BookingsTable
+            <BookingsCards
                 v-else
                 :bookings="myUpcomingBookings"
                 @editBooking="(booking) => openEditeBookingDialog(booking)"
                 @openBooking="(booking) => openShowBookingDialog(booking)"
-            ></BookingsTable>
+            ></BookingsCards>
         </v-col>
       </v-row>
 
@@ -66,7 +66,7 @@
 
 import {defineComponent} from "vue";
 import {mapActions, mapGetters, mapState} from "vuex";
-import BookingsTable from "@/components/booking-components/BookingsTable.vue";
+import BookingsCards from "@/components/booking-components/BookingsCards.vue";
 import Booking from "@/models/Booking";
 import BookingDetails from "@/components/booking-components/BookingDetails.vue";
 import BookingFormDialogue from "@/components/booking-components/BookingFormDialogue.vue";
@@ -86,7 +86,7 @@ interface bookingViewData {
 
 export default defineComponent({
   name: "BookingsView",
-  components: {DeskAvailabilty, BookingFormDialogue, BookingDetails, BookingsTable, Loading},
+  components: {DeskAvailabilty, BookingFormDialogue, BookingDetails, BookingsCards, Loading},
   data: (): bookingViewData => ({
     showBookingFormDialog: false,
     bookingToEdit: null,

From 41cd7b618b65d4c4589a188cf9f83bb07a8c3ebf Mon Sep 17 00:00:00 2001
From: Bastian Rickmann <info@bastianrickmann.de>
Date: Sun, 11 Jun 2023 02:27:37 +0200
Subject: [PATCH 5/5] feature: change to date in card

---
 .../src/components/booking-components/BookingsCards.vue         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/desks-web-app/src/components/booking-components/BookingsCards.vue b/desks-web-app/src/components/booking-components/BookingsCards.vue
index 90285c9..b983ab2 100644
--- a/desks-web-app/src/components/booking-components/BookingsCards.vue
+++ b/desks-web-app/src/components/booking-components/BookingsCards.vue
@@ -18,7 +18,7 @@
         Today
       </template>
       <template v-slot:title v-else-if="dateConverter(item.start).isSameOrBefore(dateConverter(item.start).add(1, 'week'))">
-        {{ dateConverter(item.start).format("dddd") }}
+        {{ dateConverter(item.start).format("DD.MM.YYYY") }}
       </template>
       <template v-slot:title v-else>
         {{ $format.date(item.start) }}