Allow easy re-use of annotations

Gemfile

@@ -120,9 +120,6 @@ gem 'has_scope', '~> 0.8.0'
 # generating zip files
 gem 'rubyzip', '~> 2.3.2'
 
-# add request server timings to the devtools
-gem 'rails_server_timings', '~> 1.0.8'
-
 # bootstrap tokenizer
 gem 'bootstrap_tokenfield_rails', '~> 0.12.1'
 

Gemfile.lock

@@ -392,8 +392,6 @@ GEM
     rails-i18n (7.0.3)
       i18n (>= 0.7, < 2)
       railties (>= 6.0.0, < 8)
-    rails_server_timings (1.0.8)
-      railties (>= 3.0.0)
     railties (7.0.3)
       actionpack (= 7.0.3)
       activesupport (= 7.0.3)
@@ -572,7 +570,6 @@ DEPENDENCIES
   rails (~> 7.0.3)
   rails-controller-testing (~> 1.0.5)
   rails-i18n (~> 7.0.3)
-  rails_server_timings (~> 1.0.8)
   rb-readline (~> 0.5.5)
   rouge (= 3.29.0)
   rubocop-rails (~> 2.15.0)

app/assets/javascripts/code_listing/annotation.ts

@@ -1,3 +1,5 @@
+import { NewSavedAnnotation } from "components/saved_annotations/new_saved_annotation";
+
 export type AnnotationType = "error" | "info" | "user" | "warning" | "question";
 export type QuestionState = "unanswered" | "answered" | "in_progress";
 
@@ -10,6 +12,7 @@ export abstract class Annotation {
     public readonly line: number | null;
     public readonly text: string;
     public readonly type: AnnotationType;
+    public readonly id: number;
 
     protected constructor(line: number | null, text: string, type: AnnotationType) {
         this.__html = null;
@@ -81,16 +84,22 @@ export abstract class Annotation {
 
         // Update button.
         if (this.modifiable) {
-            const link = document.createElement("a");
-            link.addEventListener("click", () => this.edit());
-            link.classList.add("btn", "btn-icon", "annotation-control-button", "annotation-edit");
-            link.title = this.editTitle;
+            const editLink = document.createElement("a");
+            editLink.addEventListener("click", () => this.edit());
+            editLink.classList.add("btn", "btn-icon", "annotation-control-button", "annotation-edit");
+            editLink.title = this.editTitle;
 
-            const icon = document.createElement("i");
-            icon.classList.add("mdi", "mdi-pencil");
-            link.appendChild(icon);
+            const editIcon = document.createElement("i");
+            editIcon.classList.add("mdi", "mdi-pencil");
+            editLink.appendChild(editIcon);
 
-            header.appendChild(link);
+            header.appendChild(editLink);
+
+            const saveLink = new NewSavedAnnotation();
+            saveLink.fromAnnotationId = this.id;
+            saveLink.annotationText = this.rawText;
+
+            header.appendChild(saveLink);
         }
 
         if (this.transitionable("answered")) {
@@ -174,6 +183,10 @@ export abstract class Annotation {
         return this.text;
     }
 
+    public get savedAnnotationId(): number | null {
+        return null;
+    }
+
     public get removable(): boolean {
         return false;
     }

app/assets/javascripts/code_listing/code_listing.ts

@@ -7,6 +7,8 @@ import {
     UserAnnotationFormData
 } from "code_listing/user_annotation";
 import { createUserAnnotation, getAllUserAnnotations } from "code_listing/question_annotation";
+import "components/saved_annotations/saved_annotation_input";
+import { SavedAnnotationInput } from "components/saved_annotations/saved_annotation_input";
 
 const annotationGlobalAdd = "#add_global_annotation";
 const annotationsGlobal = "#feedback-table-global-annotations";
@@ -40,6 +42,9 @@ export class CodeListing {
     public readonly code: string;
     public readonly codeLines: number;
     public readonly submissionId: number;
+    public readonly courseId: number;
+    public readonly exerciseId: number;
+    public readonly userId: number;
 
     private readonly markingClass: string = "marked";
     private evaluationId: number;
@@ -56,11 +61,14 @@ export class CodeListing {
 
     private readonly questionMode: boolean;
 
-    constructor(submissionId: number, code: string, codeLines: number, questionMode = false) {
+    constructor(submissionId: number, courseId: number, exerciseId: number, userId: number, code: string, codeLines: number, questionMode = false) {
         this.annotations = new Map<number, Annotation[]>();
         this.code = code;
         this.codeLines = codeLines;
         this.submissionId = submissionId;
+        this.courseId = courseId;
+        this.exerciseId = exerciseId;
+        this.userId = userId;
         this.questionMode = questionMode;
 
         this.badge = document.querySelector<HTMLSpanElement>(badge);
@@ -376,25 +384,47 @@ export class CodeListing {
             <span class='help-block'>${I18n.t("js.user_annotation.help")}</span>
             <span class="help-block float-end"><span class="used-characters">0</span> / ${I18n.toNumber(maxLength, { precision: 0 })}</span>
           </div>
-          <div class="annotation-submission-button-container">
-            ${annotation && annotation.removable ? `
-                  <button class="btn btn-text annotation-control-button annotation-delete-button" type="button">
-                    ${I18n.t("js.user_annotation.delete")}
-                  </button>
-                ` : ""}
-            <button class="btn btn-text annotation-control-button annotation-cancel-button" type="button">
-              ${I18n.t("js.user_annotation.cancel")}
-            </button>
-            <button class="btn btn-filled annotation-control-button annotation-submission-button" type="button">
-                ${(annotation !== null ? I18n.t(`js.${type}.update`) : I18n.t(`js.${type}.send`))}
-            </button>
+          <div class="annotation-controls-block">
+            ${this.questionMode ? "" : `
+              <d-saved-annotation-input
+                name="saved_annotation_id"
+                course-id="${this.courseId}"
+                exercise-id="${this.exerciseId}"
+                user-id="${this.userId}"
+                class="saved-annotation-input annotation-submission-button-container"
+                value="${annotation?.savedAnnotationId || ""}"
+                title="${I18n.t("js.saved_annotation.input.title")}"
+                annotation-text="${annotation?.rawText}"
+              ></d-saved-annotation-input>
+            `}
+            <span class="annotation-submission-button-container">
+              ${annotation && annotation.removable ? `
+                    <button class="btn btn-text annotation-control-button annotation-delete-button" type="button">
+                      ${I18n.t("js.user_annotation.delete")}
+                    </button>
+                  ` : ""}
+              <button class="btn btn-text annotation-control-button annotation-cancel-button" type="button">
+                ${I18n.t("js.user_annotation.cancel")}
+              </button>
+              <button class="btn btn-filled annotation-control-button annotation-submission-button" type="button">
+                  ${(annotation !== null ? I18n.t(`js.${type}.update`) : I18n.t(`js.${type}.send`))}
+              </button>
+            </span>
           </div>
         `;
 
         const cancelButton = form.querySelector<HTMLButtonElement>(annotationFormCancel);
         const deleteButton = form.querySelector<HTMLButtonElement>(annotationFormDelete);
         const sendButton = form.querySelector<HTMLButtonElement>(annotationFormSubmit);
         const inputField = form.querySelector<HTMLTextAreaElement>("textarea");
+        const savedAnnotationInput = form.querySelector<SavedAnnotationInput>(".saved-annotation-input");
+
+        savedAnnotationInput?.addEventListener("input", (e: CustomEvent) => {
+            if (e.detail.text) {
+                inputField.value = e.detail.text;
+                savedAnnotationInput.annotationText = inputField.value;
+            }
+        });
 
         if (annotation !== null) {
             inputField.rows = annotation.rawText.split("\n").length + 1;
@@ -407,6 +437,9 @@ export class CodeListing {
         // Update value while typing.
         inputField.addEventListener("input", () => {
             usedCharacters.innerHTML = I18n.toNumber(inputField.value.length, { precision: 0 });
+            if (savedAnnotationInput) {
+                savedAnnotationInput.annotationText = inputField.value;
+            }
         });
 
         // Cancellation handler.
@@ -464,7 +497,8 @@ export class CodeListing {
             const annotationData: UserAnnotationFormData = {
                 "annotation_text": inputField.value,
                 "line_nr": (line === null ? null : line - 1),
-                "evaluation_id": this.evaluationId || undefined
+                "evaluation_id": this.evaluationId || undefined,
+                "saved_annotation_id": new FormData(form).get("saved_annotation_id") as string || undefined,
             };
 
             try {
@@ -494,8 +528,7 @@ export class CodeListing {
 
             const annotationData: UserAnnotationFormData = {
                 "annotation_text": inputField.value,
-                "line_nr": (annotation.line === null ? null : annotation.line - 1),
-                "evaluation_id": annotation.evaluationId || undefined
+                "saved_annotation_id": new FormData(form).get("saved_annotation_id") as string || undefined
             };
 
             try {

app/assets/javascripts/code_listing/user_annotation.ts

@@ -5,9 +5,11 @@ export interface UserAnnotationFormData {
     // eslint-disable-next-line camelcase
     annotation_text: string;
     // eslint-disable-next-line camelcase
-    line_nr: number | null;
+    line_nr?: number | null;
     // eslint-disable-next-line camelcase
-    evaluation_id: number | undefined;
+    evaluation_id?: number | undefined;
+    // eslint-disable-next-line camelcase
+    saved_annotation_id?: string;
 }
 
 export type UserAnnotationEditor = (ua: UserAnnotation, cb: CallableFunction) => HTMLElement;
@@ -35,6 +37,8 @@ export interface UserAnnotationData {
     rendered_markdown: string;
     // eslint-disable-next-line camelcase
     evaluation_id: number | null;
+    // eslint-disable-next-line camelcase
+    saved_annotation_id: number | null;
     url: string;
     user: UserAnnotationUserData;
     type: string;
@@ -51,6 +55,7 @@ export class UserAnnotation extends Annotation {
     private readonly __rawText: string;
     public readonly released: boolean;
     public readonly evaluationId: number | null;
+    private readonly __savedAnnotationId: number | null;
     public readonly url: string;
     public readonly user: UserAnnotationUserData;
     public readonly lastUpdatedBy: UserAnnotationUserData;
@@ -66,6 +71,7 @@ export class UserAnnotation extends Annotation {
         this.released = data.released;
         this.__rawText = data.annotation_text;
         this.evaluationId = data.evaluation_id;
+        this.__savedAnnotationId = data.saved_annotation_id;
         this.url = data.url;
         this.user = data.user;
         this.lastUpdatedBy = data.last_updated_by;
@@ -99,6 +105,10 @@ export class UserAnnotation extends Annotation {
         return this.__rawText;
     }
 
+    public get savedAnnotationId(): number | null {
+        return this.__savedAnnotationId;
+    }
+
     public get removable(): boolean {
         return this.permissions.destroy;
     }

app/assets/javascripts/components/datalist_input.ts

@@ -9,18 +9,24 @@ import { ref, Ref, createRef } from "lit/directives/ref.js";
  * @element d-datalist-input
  *
  * @prop {String} name - name of the input field (used in form submit)
- * @prop {[{label: string, value: string}]} options - The label is used to match the user input, while the value is sent to the server.
+ * @prop {[{label: string, value: string, extra?: string}]} options - The label is used to match the user input, while the value is sent to the server.
  *          If the user input does not match any label, the value sent to the server wil be ""
+ *          The extra string is added in the options and also used to match the input
  * @prop {String} value - the initial value for this field
+ * @prop {String} placeholder - placeholder text shown in input
+ *
+ * @fires input - on value change, event details contain {label: string, value: string}
  */
 @customElement("d-datalist-input")
 export class DatalistInput extends ShadowlessLitElement {
     @property({ type: String })
     name: string;
     @property({ type: Array })
-    options: [{label: string, value: string}];
+    options: [{label: string, value: string, extra?: string}];
     @property({ type: String })
     value: string;
+    @property({ type: String })
+    placeholder: string;
 
     inputRef: Ref<HTMLInputElement> = createRef();
     hiddenInputRef: Ref<HTMLInputElement> = createRef();
@@ -30,16 +36,23 @@ export class DatalistInput extends ShadowlessLitElement {
         return option?.label;
     }
 
-    processInput(): void {
+    processInput(e): void {
         const option = this.options.find(option => option.label === this.inputRef.value.value);
         this.hiddenInputRef.value.value = option ? option.value : "";
+        const event = new CustomEvent("input", {
+            detail: { value: this.hiddenInputRef.value.value, label: this.inputRef.value.value },
+            bubbles: true,
+            composed: true }
+        );
+        this.dispatchEvent(event);
+        e.stopPropagation();
     }
 
     render(): TemplateResult {
         return html`
-            <input class="form-control" type="text" list="${this.name}-datalist-hidden" ${ref(this.inputRef)} @input=${() => this.processInput()}  value="${this.label}">
+            <input class="form-control" type="text" list="${this.name}-datalist-hidden" ${ref(this.inputRef)} @input=${e => this.processInput(e)}  value="${this.label}" placeholder="${this.placeholder}" autocomplete="off">
             <datalist id="${this.name}-datalist-hidden">
-                ${this.options.map(option => html`<option value="${option.label}">${option.label}</option>`)}
+                ${this.options.map(option => html`<option value="${option.label}">${option.label}${option.extra ? ": " + option.extra : ""}</option>`)}
             </datalist>
             <input type="hidden" name="${this.name}" ${ref(this.hiddenInputRef)} value="${this.value}">
         `;

app/assets/javascripts/components/modal_mixin.ts

@@ -0,0 +1,83 @@
+import { html, TemplateResult, render } from "lit";
+import { ref } from "lit/directives/ref.js";
+import { Modal as Modal } from "bootstrap";
+import { ShadowlessLitElement } from "components/shadowless_lit_element";
+
+/**
+ * This mixin adds support for rendering bootstrap modals within a webcomponent.
+ * This is implemented as a mixin instead of a separate component because bootstrap modals have issues rendering when nested within other html components.
+ *
+ * In practice it adds a single modal to `#modal-container`.
+ * Upon calls of `showModal` the `filledModalTemplate` gets rendered and displayed
+ */
+export declare abstract class ModalMixinInterface {
+    modalTemplate(title: TemplateResult, body: TemplateResult, footer: TemplateResult): TemplateResult;
+    /**
+     * Should be generated using `modalTemplate`
+     */
+    abstract get filledModalTemplate() :TemplateResult;
+    showModal(): void;
+    hideModal(): void;
+}
+
+type Constructor<T> = abstract new (...args: any[]) => T;
+
+export function modalMixin<T extends Constructor<ShadowlessLitElement>>(superClass: T): Constructor<ModalMixinInterface> & T {
+    abstract class ModalMixinClass extends superClass implements ModalMixinInterface {
+        modal: Modal;
+
+        private initModal(el: Element): void {
+            if (!this.modal) {
+                this.modal = new Modal(el);
+            } else {
+                this.modal.handleUpdate();
+            }
+        }
+
+        modalTemplate(title: TemplateResult, body: TemplateResult, footer: TemplateResult): TemplateResult {
+            return html`
+                <div class="modal fade" ${ref(el => this.initModal(el))} tabindex="-1" role="dialog">
+                    <div class="modal-dialog" role="document">
+                        <div class="modal-content">
+                            <div class="modal-header">
+                                <h4 class="modal-title">${title}</h4>
+                                <button type="button" class="btn-close" data-bs-dismiss="modal" @click=${() => this.hideModal()}></button>
+                            </div>
+                            <div class="modal-body">
+                                ${body}
+                            </div>
+                            <div class="modal-footer">
+                                ${footer}
+                            </div>
+                        </div>
+                    </div>
+                </div>`;
+        }
+
+        abstract get filledModalTemplate() :TemplateResult;
+
+        // On each update of the component, the modal template is also rerendered, making the modal content responsive
+        // This can cause unexpected behaviour if update is triggered on a modal component which is different from the currently active modalcomponent
+        // (As there is only one real html modal, the wrong `filledModalTemplate` will be displayed)
+        // This could be solved by tracking which modalcomponent is currently active
+        update(changedProperties: Map<string, any>): void {
+            super.update(changedProperties);
+            this.renderModal();
+        }
+
+        private renderModal(): void {
+            render(this.filledModalTemplate, document.getElementById("modal-container"), { host: this });
+        }
+
+        showModal(): void {
+            this.renderModal();
+            this.modal?.show();
+        }
+
+        hideModal(): void {
+            this.modal?.hide();
+        }
+    }
+
+    return ModalMixinClass as Constructor<ModalMixinInterface> & T;
+}