Use status-based chips for teachers

aleksis/apps/chronos/frontend/components/substitutions/SubstitutionCard.vue

@@ -31,16 +31,40 @@ import createOrPatchMixin from "aleksis.core/mixins/createOrPatchMixin.js";
         item-text="fullName"
         item-value="id"
         :disabled="loading"
-        @input="save"
+        @input="saveTeachers"
       >
         <template #prepend-inner>
           <v-chip
-            v-for="teacher in teachersWithStatus(substitution).filter(
+            v-for="teacher in teachersWithStatus.filter(
               (t) => t.status === 'removed',
             )"
-            class="text-decoration-line-through text--secondary mb-2"
-            >{{ teacher.fullName }}</v-chip
+            outlined
+            color="error"
+            class="mb-2"
+            close
+            close-icon="mdi-reload"
+            @click:close="addTeacher(teacher)"
           >
+            <v-icon left>
+              $cancel
+            </v-icon>
+            <div class="text-decoration-line-through">{{ teacher.fullName }}</div>
+          </v-chip>
+        </template>
+        <template #selection="data">
+          <v-chip
+            v-bind="data.attrs"
+            :input-value="data.selected"
+            close
+            :outlined="getTeacherStatus(data.item) === 'new'"
+            :color="getTeacherStatus(data.item) === 'new' ? 'success' : ''"
+            @click:close="removeTeacher(data.item)"
+          >
+            <v-icon left v-if="getTeacherStatus(data.item) === 'new'">
+              mdi-plus
+            </v-icon>
+            {{ data.item.fullName }}
+          </v-chip>
         </template>
       </v-autocomplete>
 
@@ -92,26 +116,21 @@ export default {
     },
   },
   methods: {
-    teachersWithStatus(lesson) {
-      let oldIds = lesson.amends.teachers.map((teacher) => teacher.id);
-      let newIds = lesson.teachers.map((teacher) => teacher.id);
-      let teachersWithStatus = lesson.amends.teachers
-        .concat(lesson.teachers)
-        .map((teacher) => {
-          let status = "regular";
-          if (newIds.includes(teacher.id) && !oldIds.includes(teacher.id)) {
-            status = "new";
-          } else if (
-            !newIds.includes(teacher.id) &&
-            oldIds.includes(teacher.id)
-          ) {
-            status = "removed";
-          }
-          return { ...teacher, status: status };
-        });
-      return teachersWithStatus;
+    getTeacherStatus(teacher) {
+      return this.teachersWithStatus.find((t) => t.id === teacher.id)?.status;
+    },
+    addTeacher(teacher) {
+      this.teachers.push(teacher.id);
+      this.saveTeachers();
     },
-    save() {
+    removeTeacher(teacher) {
+      const index = this.teachers.indexOf(teacher.id);
+      if (index >= 0) {
+        this.teachers.splice(index, 1);
+        this.saveTeachers();
+      }
+    },
+    saveTeachers() {
       this.createOrPatch([
         {
           id: this.substitution.id,
@@ -128,6 +147,27 @@ export default {
       ]);
     },
   },
+  computed: {
+    teachersWithStatus() {
+      const oldIds = this.substitution.amends.teachers.map((teacher) => teacher.id);
+      const newIds = this.substitution.teachers.map((teacher) => teacher.id);
+      const allTeachers = new Set(this.substitution.amends.teachers.concat(this.substitution.teachers));
+      let teachersWithStatus = Array.from(allTeachers)
+        .map((teacher) => {
+          let status = "regular";
+          if (newIds.includes(teacher.id) && !oldIds.includes(teacher.id)) {
+            status = "new";
+          } else if (
+            !newIds.includes(teacher.id) &&
+            oldIds.includes(teacher.id)
+          ) {
+            status = "removed";
+          }
+          return { ...teacher, status: status };
+        });
+      return teachersWithStatus;
+    },
+  },
   apollo: {
     amendableTeachers: gqlPersons,
   },