Resolve "Frontend for Models"

Closes #1 (closed)

aleksis/apps/lesrooster/frontend/components/timetable_management/LessonCard.vue

+<script>
+import {defineComponent} from 'vue'
+
+export default defineComponent({
+  name: "LessonCard",
+  extends: "v-card",
+  props: {
+    lesson: {
+      type: Object,
+      required: true,
+    }
+  },
+  computed: {
+    subject() {
+      return this.lesson.subject || this.lesson.course?.subject || {name: ""};
+    },
+    teachers() {
+      return this.firstNonEmpty(this.lesson.teachers, this.lesson.course?.teachers);
+    },
+    groups() {
+      return this.firstNonEmpty(this.lesson.groups, this.lesson.course?.groups);
+    },
+    color() {
+      return this.subject.colourFg;
+    },
+    background() {
+      return this.subject.colourBg;
+    },
+    loading() {
+      return this.lesson.id.toString().startsWith("temporary");
+    }
+  },
+  methods: {
+    firstNonEmpty(...arrays) {
+      return arrays.find(array => Array.isArray(array) && array.length > 0) || [];
+    }
+  },
+})
+</script>
+
+<template>
+  <v-card
+      class="color no-select h-100 fill-height d-flex align-center justify-center"
+      :color="background"
+      v-bind="$attrs"
+      v-on="$listeners"
+      :disabled="loading"
+  >
+    <v-card-text v-if="!loading">
+      <v-card-title class="color">
+        {{ subject.name }}
+      </v-card-title>
+      <v-card-subtitle class="color">
+        <span v-for="(teacher, index) in teachers">
+          <span v-if="index !== 0">, </span>
+          <span>{{ teacher.shortName }}</span>
+        </span>
+        <span v-for="(room, index) in lesson.rooms">
+          <span v-if="index !== 0">, </span>
+          <span>{{ room.shortName }}</span>
+        </span>
+      </v-card-subtitle>
+      <slot/>
+    </v-card-text>
+    <div class="text-center" v-if="loading">
+      <v-progress-circular
+          indeterminate
+          :color="color"
+      />
+    </div>
+  </v-card>
+</template>
+
+<style scoped>
+.color {
+  color: v-bind(color);
+}
+
+.no-select {
+  user-select: none;
+}
+</style>
\ No newline at end of file