Make note read-only after saving

Resolves MS-880 #Complete

client/cypress/e2e/frontend/modules/highlights.cy.ts

@@ -201,4 +201,28 @@ describe('Highlights', () => {
 
     markText();
   });
+
+  it('visits a module and highlights some text, then adds a note', () => {
+    cy.mockGraphqlOps({
+      operations: {
+        ...operations,
+        ModuleDetailsQuery: {
+          module: getModule(defaultContents),
+        },
+      },
+    });
+
+    cy.visit('/module/my-module');
+
+    markText();
+    cy.getByDataCy('highlight-note').click();
+    cy.wait('@AddHighlight');
+    const note = 'Some noteworthy stuff';
+    cy.getByDataCy('highlight-note-input').should('have.value', '').type(note);
+    cy.getByDataCy('highlight-note-save').click();
+    cy.wait('@UpdateHighlight');
+
+    cy.getByDataCy('highlight-note-save').should('not.exist');
+    cy.getByDataCy('highlight-note-text').should('have.text', note);
+  });
 });

client/cypress/fixtures/mocks.ts

@@ -118,4 +118,7 @@ export default {
     id: getInstrumentId(),
     bookmarks: null,
   }),
+  HighlightNode: () => ({
+    note: null,
+  }),
 };

client/src/components/highlights/HighlightSidebar.vue

@@ -22,19 +22,39 @@
     </div>
     <div class="highlight-sidebar__section highlight-sidebar__note">
       <h2 class="heading-4">Meine Notiz</h2>
-      <div class="form-with-border highlight-sidebar__note-form">
+      <div
+        class="form-with-border highlight-sidebar__note-form"
+        v-if="inEditMode"
+      >
         <textarea
           class="borderless-textarea"
           placeholder="Notiz erfassen..."
+          data-cy="highlight-note-input"
           v-model="note"
           v-auto-grow
         ></textarea>
         <a
           class="button button--primary"
-          @click="$emit('update-text', note)"
+          data-cy="highlight-note-save"
+          @click.stop="save"
           >Speichern</a
         >
       </div>
+      <div v-else>
+        <!-- .stop to prevent the click handler to close the sidebar (as the element won't be a child of the
+            sidebar anymore once the event handler checks) -->
+        <p
+          data-cy="highlight-note-text"
+          class="highlight-sidebar__note"
+        >
+          {{ note }}
+        </p>
+        <a
+          class="inline-title highlight-sidebar__edit-note"
+          @click.stop="enableEditMode"
+          >Notiz bearbeiten</a
+        >
+      </div>
     </div>
   </div>
 </template>
@@ -58,10 +78,22 @@ const props = defineProps<Props>();
 const highlightMark = ref<HTMLElement | null>(null);
 
 const Cross = defineAsyncComponent(() => import('@/components/icons/CrossIcon.vue'));
+const inEditMode = ref(false);
 
 onMounted(() => {
   note.value = props.highlight.note?.text || '';
+  // enable edit mode if note does not yet exist from a previous save
+  inEditMode.value = note.value == '';
 });
+
+const enableEditMode = () => {
+  inEditMode.value = true;
+};
+
+const save = () => {
+  emits('update-text', note.value);
+  inEditMode.value = false;
+};
 </script>
 
 <style scoped lang="postcss">
@@ -122,5 +154,14 @@ onMounted(() => {
   &__note-form {
     min-height: 100px;
   }
+
+  &__note {
+    white-space: pre-line; /* display newlines as linebreaks */
+    margin-bottom: var(--medium-spacing);
+  }
+
+  &__edit-note {
+    cursor: pointer;
+  }
 }
 </style>

client/src/styles/css/typography.css

@@ -42,3 +42,8 @@
   font-weight: var(--regular-font-weight);
   line-height: var(--paragraph-line-height);
 }
+
+.inline-title {
+  @reuse .regular-text;
+  color: var(--color-silver-dark);
+}

client/src/styles/css/variables.css

@@ -13,6 +13,7 @@
 
   --color-white: #ffffff;
   --color-silver: #d0d0d0;
+  --color-silver-dark: #aaaaaa;
   --color-charcoal-dark: #333333;
 
   --sans-serif-font-family: 'Montserrat', Arial, sans-serif;