Resolve "Frontend for Models"

Closes #1 (closed)

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

@@ -12,27 +12,41 @@ export default defineComponent({
   },
   computed: {
     subject() {
-      return this.lesson.subject || this.lesson.course.subject || {name: ""};
+      return this.lesson.subject || this.lesson.course?.subject || {name: ""};
     },
     teachers() {
-      return this.lesson.teachers || this.lesson.course.teachers || [];
+      return this.firstNonEmpty(this.lesson.teachers, this.lesson.course?.teachers);
     },
     groups() {
-      return this.lesson.groups || this.lesson.course.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 h-100 fill-height" :color="background" v-bind="$attrs">
-    <v-card-text>
+  <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>
@@ -48,6 +62,12 @@ export default defineComponent({
       </v-card-subtitle>
       <slot/>
     </v-card-text>
+    <div class="text-center" v-if="loading">
+      <v-progress-circular
+          indeterminate
+          :color="color"
+      />
+    </div>
   </v-card>
 </template>
 
@@ -55,4 +75,8 @@ export default defineComponent({
 .color {
   color: v-bind(color);
 }
+
+.no-select {
+  user-select: none;
+}
 </style>
\ No newline at end of file