Add tooltip for topic status icon

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

 <template>
   <v-card outlined dense rounded="lg" v-bind="$attrs" v-on="$listeners">
     <div class="font-weight-medium mr-2">
-      {{ $t("alsijil.coursebook.summary.topic") }}:
+      {{ $t("alsijil.coursebook.summary.topic.label") }}:
     </div>
     <div class="text-truncate">{{ documentation.topic || "–" }}</div>
 

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

@@ -2,7 +2,7 @@
   <div v-bind="$attrs" v-on="$listeners">
     <v-card outlined dense rounded="lg" class="mb-2">
       <v-card-title class="text-subtitle-2 pb-1 font-weight-medium">
-        {{ $t("alsijil.coursebook.summary.topic") }}
+        {{ $t("alsijil.coursebook.summary.topic.label") }}
       </v-card-title>
       <v-card-text>{{ documentation.topic || "–" }}</v-card-text>
     </v-card>

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

@@ -46,7 +46,7 @@
         }"
         hide-details
         outlined
-        :label="$t('alsijil.coursebook.summary.topic')"
+        :label="$t('alsijil.coursebook.summary.topic.label')"
         :value="documentation.topic"
         @input="topic = $event"
         @focusout="save"
@@ -54,11 +54,16 @@
         :loading="loading"
       >
         <template #append>
-          <v-scroll-x-transition>
-            <v-icon v-if="appendIcon" :color="appendIconColor">{{
-              appendIcon
-            }}</v-icon>
-          </v-scroll-x-transition>
+            <v-tooltip bottom>
+              <template v-slot:activator="{ on, attrs }">
+                <v-scroll-x-transition>
+                  <v-icon v-if="appendIcon" :color="appendIconColor" v-on="on" v-bind="attrs">{{
+                    appendIcon
+                  }}</v-icon>
+                </v-scroll-x-transition>
+              </template>
+              <span>{{ appendIconTooltip }}</span>
+            </v-tooltip>
         </template>
       </v-text-field>
       <div
@@ -97,7 +102,7 @@
     <v-text-field
       filled
       v-if="!compact && documentation.canEdit"
-      :label="$t('alsijil.coursebook.summary.topic')"
+      :label="$t('alsijil.coursebook.summary.topic.label')"
       :value="documentation.topic"
       @input="topic = $event"
     />
@@ -148,6 +153,7 @@ export default {
       homework: null,
       groupNote: null,
       appendIcon: null,
+      topicError: null,
     };
   },
   methods: {
@@ -174,6 +180,7 @@ export default {
       };
     },
     handleAppendIconSuccess() {
+      this.topicError = null;
       this.appendIcon = "$success";
       setTimeout(() => {
         this.appendIcon = "";
@@ -209,8 +216,9 @@ export default {
       this.save();
       event.target.blur();
     },
-    handleError() {
+    handleError(error) {
       this.appendIcon = "$error";
+      this.topicError = error;
     },
   },
   computed: {
@@ -245,6 +253,11 @@ export default {
         { $success: "success", $error: "error" }[this.appendIcon] || "primary"
       );
     },
+    appendIconTooltip() {
+      return (
+        { $success: this.$t("alsijil.coursebook.summary.topic.status.success"), $error: this.$t("alsijil.coursebook.summary.topic.status.error", { error: this.topicError }) }[this.appendIcon] || ""
+      );
+    },
   },
   mounted() {
     this.$on("save", this.handleAppendIconSuccess);

aleksis/apps/alsijil/frontend/messages/de.json

@@ -45,7 +45,13 @@
         "pending": "Stunde in der Zukunft"
       },
       "summary": {
-        "topic": "Thema",
+        "topic": {
+          "label": "Topic",
+          "status": {
+            "success": "Topic saved successfully",
+            "error": "There has been an error while saving the topic: {error}"
+          }
+        },
         "homework": {
           "label": "Hausaufgaben",
           "value": "HA: {homework}",

aleksis/apps/alsijil/frontend/messages/en.json

@@ -45,7 +45,13 @@
         "pending": "Lesson pending"
       },
       "summary": {
-        "topic": "Topic",
+        "topic": {
+          "label": "Topic",
+          "status": {
+            "success": "Topic saved successfully",
+            "error": "There has been an error while saving the topic: {error}"
+          }
+        },
         "homework": {
           "label": "Homework",
           "value": "HW: {homework}",