Add success/error indicator for topic field

aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue

@@ -49,7 +49,7 @@
           <v-list max-width="100%" class="pt-0 mt-n1">
             <v-list-item
               v-for="doc in day.slice(1)"
-              :key="'documentation-' + doc.id"
+              :key="'documentation-' + (doc.oldId || doc.id)"
             >
               <documentation-modal
                 :documentation="doc"

aleksis/apps/alsijil/frontend/components/coursebook/coursebook.graphql

@@ -58,6 +58,7 @@ query documentationsForCoursebook(
     datetimeEnd
     dateStart
     dateEnd
+    oldId
     canEdit
     canDelete
   }
@@ -70,6 +71,7 @@ mutation createOrUpdateDocumentations($input: [DocumentationInputType]!) {
       topic
       homework
       groupNote
+      oldId
     }
   }
 }

aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonSummary.vue

@@ -16,7 +16,13 @@
         @keydown.enter="saveAndBlur"
         :loading="loading"
         :readonly="!documentation.canEdit"
-      />
+        >
+        <template #append>
+          <v-scroll-x-transition>
+            <v-icon v-if="appendIcon" :color="appendIconColor">{{ appendIcon }}</v-icon>
+          </v-scroll-x-transition>
+        </template>
+      </v-text-field>
       <div :class="{ 'flex-grow-1 max-width': true, 'full-width': $vuetify.breakpoint.mobile }">
         <v-card
           v-bind="dialogActivator.attrs"
@@ -90,6 +96,7 @@ export default {
       topic: null,
       homework: null,
       groupNote: null,
+      appendIcon: null,
     };
   },
   methods: {
@@ -102,11 +109,16 @@ export default {
             (o) => o[itemId] === this.documentation.id,
           );
           // merged with the incoming partial documentation
-          cached[index] = { ...this.documentation, ...object };
+          // set ID of documentation currently being edited as oldID so that key in coursebook doesn't change
+          cached[index] = { ...this.documentation, ...object, oldId: this.documentation.id };
         }
         return cached;
       };
     },
+    handleAppendIconSuccess() {
+      this.appendIcon = "$success";
+      setTimeout(() => {this.appendIcon = ""}, 3000);
+    },
     save() {
       if (this.topic !== null || this.homework !== null || this.groupNote !== null) {
         const topic = this.topic !== null ? { topic: this.topic } : {};
@@ -131,6 +143,9 @@ export default {
       this.save();
       event.target.blur();
     },
+    handleError() {
+      this.appendIcon = "$error";
+    },
   },
   computed: {
     homeworkIcon() {
@@ -158,8 +173,14 @@ export default {
     },
     maxWidth() {
       return this.$vuetify.breakpoint.mobile ? "100%" : "20ch";
+    },
+    appendIconColor() {
+      return {"$success": "success", "$error": "error"}[this.appendIcon] || "primary";
     }
   },
+  mounted() {
+    this.$on("save", this.handleAppendIconSuccess);
+  },
 };
 </script>
 

aleksis/apps/alsijil/schema/documentation.py

@@ -50,6 +50,8 @@ class DocumentationType(PermissionsTypeMixin, DjangoFilterMixin, DjangoObjectTyp
     course = graphene.Field(CourseType, required=False)
     subject = graphene.Field(SubjectType, required=False)
 
+    old_id = graphene.ID(required=False)
+
     @staticmethod
     def resolve_teachers(root: Documentation, info, **kwargs):
         if not str(root.pk).startswith("DUMMY") and hasattr(root, "teachers"):