Resolve "Frontend for Models"

Closes #1 (closed)

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

@@ -33,7 +33,7 @@ export default defineComponent({
       return this.subject.colourBg;
     },
     loading() {
-      return this.lesson.id.toString().startsWith("temporary");
+      return this.lesson.isOptimistic || this.lesson.id.toString().startsWith("temporary");
     },
   },
   methods: {
@@ -57,21 +57,21 @@ export default defineComponent({
     <div v-if="!loading" class="d-flex flex-column align-center my-1">
       <v-card-title class="color text-center px-3 py-0 ma-0">
         {{ subject.name }}
+        <v-card-subtitle class="caption px-3 py-0 ma-0 text-center">
+          {{ "course" in lesson ? lesson.course.name : lesson.name }}
+        </v-card-subtitle>
       </v-card-title>
-      <v-card-subtitle class="caption px-3 py-0 ma-0 text-center">
-        {{ "course" in lesson ? lesson.course.name : lesson.name }}
-      </v-card-subtitle>
       <v-card-subtitle class="color pa-0 ma-0">
         <span v-for="(teacher, index) in teachers" :key="teacher.id">
-          <v-chip :color="background" @click="$emit('click:teacher', teacher)">
+          <v-chip :color="background" :text-color="color" @click="$emit('click:teacher', teacher)">
             {{ teacher.shortName }}
           </v-chip>
         </span>
-        ·
+        <span v-if="teachers && teachers.length > 0 && lesson.rooms && lesson.rooms.length > 0">·</span>
         <span v-for="(room, index) in lesson.rooms" :key="room.id">
           <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
           <span v-if="index !== 0">, </span>
-          <v-chip :color="background" @click="$emit('click:room', room)">
+          <v-chip :color="background" :text-color="color" @click="$emit('click:room', room)">
             {{ room.shortName }}
           </v-chip>
         </span>