Feature/new own booking view

desks-web-app/src/components/booking-components/AvailabilityCard.vue

@@ -106,7 +106,7 @@ export default defineComponent({
 
       return "success"
 
-    }
+    },
   }
 });
 </script>

desks-web-app/src/components/booking-components/BookingsCards.vue

@@ -0,0 +1,97 @@
+<template>
+<v-row class="bookingsRow justify-start flex-0-0">
+  <v-col
+      v-for="item in [...bookings].sort(compareBookingsByTime)"
+      :key="item.id"
+    class="bookingsCol">
+    <v-card
+        :variant="'flat'"
+        class="card"
+    >
+      <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("DD.MM.YYYY") }}
+      </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>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+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: "BookingsCards",
+  components: {BookingContextMenu},
+  // type inference enabled
+  props: {
+    bookings: Array
+  },
+  methods: {
+    ...mapActions("bookings", ["leaveEarly", "deleteBooking"]),
+    editBooking(booking: Booking) {
+      this.$emit("editBooking", booking)
+    },
+    moment: () => moment(),
+
+    compareBookingsByTime(a: Booking, b: Booking): number {
+      return moment(a.start).diff(moment(b.start))
+    },
+
+    isOngoing(booking:Booking): boolean{
+      return moment().isBetween(booking.start,booking.end)
+    },
+    dateConverter(d: Date): Moment {
+      return moment(d);
+    },
+    onEdite() {
+      this.$emit("edit")
+    }
+  }
+
+})
+</script>
+
+<style>
+
+@media screen and (min-device-width: 970px) {
+  .bookingsRow {
+    min-width: 20%;
+    width: fit-content;
+  }
+}
+
+.bookingsCol {
+  flex-grow: 0;
+}
+
+.card {
+  width: max-content;
+}
+</style>

desks-web-app/src/components/views/BookingsView.vue

@@ -41,19 +41,17 @@
       </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.
               </v-alert>
             </v-card-text>
-            <BookingsTable
+            <BookingsCards
                 v-else
                 :bookings="myUpcomingBookings"
                 @editBooking="(booking) => openEditeBookingDialog(booking)"
                 @openBooking="(booking) => openShowBookingDialog(booking)"
-            ></BookingsTable>
-          </v-card>
+            ></BookingsCards>
         </v-col>
       </v-row>
 
@@ -68,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";
@@ -88,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,