Add UI for saved annotation re-use

dodona-edu · May 12, 2022 · dc86204 · dc86204
1 parent 1562985
commit dc86204
Show file tree

Hide file tree

Showing 13 changed files with 106 additions and 23 deletions.
diff --git a/app/assets/javascripts/code_listing/annotation.ts b/app/assets/javascripts/code_listing/annotation.ts
@@ -189,6 +189,10 @@ export abstract class Annotation {
         return this.text;
     }
 
+    public get savedAnnotationId(): number | null {
+        return null;
+    }
+
     public get removable(): boolean {
         return false;
     }

diff --git a/app/assets/javascripts/code_listing/code_listing.ts b/app/assets/javascripts/code_listing/code_listing.ts
@@ -1,4 +1,4 @@
-import { initTooltips } from "util.js";
+import { initTooltips, fetch } from "util.js";
 import { Annotation, AnnotationType } from "code_listing/annotation";
 import { MachineAnnotation, MachineAnnotationData } from "code_listing/machine_annotation";
 import {
@@ -40,6 +40,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 +59,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 +382,41 @@ 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-text annotation-control-button annotation-delete-button" type="button">
-                    ${I18n.t("js.user_annotation.delete")}
-                  </button>
-                ` : ""}
-            <button class="btn-text annotation-control-button annotation-cancel-button" type="button">
-              ${I18n.t("js.user_annotation.cancel")}
-            </button>
-            <button class="btn btn-text btn-primary 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 ? "" : `
+              <input type="hidden" class="saved-annotation-id" value="${annotation?.savedAnnotationId || ""}"/>
+              <span class="dropdown">
+                <input class="dropdown-toggle form-control annotation-search-saved" placeholder="${I18n.t("js.user_annotation.use_saved")}">
+                <ul class="dropdown-menu">
+                </ul>
+              </span>
+            `}
+            <span class="annotation-submission-button-container">
+              ${annotation && annotation.removable ? `
+                    <button class="btn-text annotation-control-button annotation-delete-button" type="button">
+                      ${I18n.t("js.user_annotation.delete")}
+                    </button>
+                  ` : ""}
+              <button class="btn-text annotation-control-button annotation-cancel-button" type="button">
+                ${I18n.t("js.user_annotation.cancel")}
+              </button>
+              <button class="btn btn-text btn-primary 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 saveSearchField = form.querySelector<HTMLInputElement>(".annotation-search-saved");
+        const searchDropdown = new bootstrap.Dropdown(form.querySelector<HTMLButtonElement>(".dropdown-toggle"));
+        const searchResults = form.querySelector<HTMLUListElement>(".dropdown-menu");
+        const savedAnnotationField = form.querySelector<HTMLInputElement>(".saved-annotation-id");
+
+        this.setupSaveAutocomplete(saveSearchField, inputField, savedAnnotationField, searchDropdown, searchResults);
 
         if (annotation !== null) {
             inputField.rows = annotation.rawText.split("\n").length + 1;
@@ -451,9 +473,36 @@ export class CodeListing {
         return form;
     }
 
+    private setupSaveAutocomplete(input: HTMLInputElement, textField: HTMLTextAreaElement, savedAnnotationField: HTMLInputElement, dropdown: bootstrap.Dropdown, resultsContainer: HTMLUListElement) {
+        input.addEventListener("input", async () => {
+            fetch(`/saved_annotations.json?course_id=${this.courseId}&exercise_id=${this.exerciseId}&user_id=${this.userId}&filter=${input.value}`)
+                .then(response => response.json())
+                .then(results => {
+                    resultsContainer.innerHTML = "";
+                    results.forEach(savedAnnotation => {
+                        const element = document.createElement<HTMLLIElement>("li");
+                        const innerElement = document.createElement<HTMLAnchorElement>("a");
+                        innerElement.classList.add("dropdown-item");
+                        innerElement.innerText = savedAnnotation.title;
+                        innerElement.addEventListener("click", () => {
+                            input.value = savedAnnotation.title;
+                            textField.value = savedAnnotation.annotation_text;
+                            savedAnnotationField.value = savedAnnotation.id;
+                            dropdown.hide();
+                        });
+                        element.appendChild(innerElement);
+                        resultsContainer.appendChild(element);
+                    });
+                    dropdown.show();
+                });
+        });
+
+    }
+
     private createNewAnnotationForm(line: number | null): HTMLFormElement {
         const onSubmit = async (form: HTMLFormElement): Promise<void> => {
             const inputField = form.querySelector<HTMLTextAreaElement>("textarea");
+            const savedAnnotationField = form.querySelector<HTMLInputElement>(".saved-annotation-id");
             inputField.classList.remove("validation-error");
 
             // Run client side validations.
@@ -464,7 +513,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": savedAnnotationField.value || undefined,
             };
 
             try {
@@ -486,6 +536,7 @@ export class CodeListing {
         callback: CallableFunction): HTMLFormElement {
         const onSubmit = async (form: HTMLFormElement): Promise<void> => {
             const inputField = form.querySelector<HTMLTextAreaElement>("textarea");
+            const savedAnnotationField = form.querySelector<HTMLInputElement>(".saved-annotation-id");
 
             // Run client side validations.
             if (!inputField.reportValidity()) {
@@ -494,8 +545,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": savedAnnotationField.value || undefined,
             };
 
             try {

diff --git a/app/assets/javascripts/code_listing/user_annotation.ts b/app/assets/javascripts/code_listing/user_annotation.ts
@@ -35,6 +35,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 +53,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 +69,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;
@@ -109,6 +113,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;
     }

diff --git a/app/assets/javascripts/i18n/translations.js b/app/assets/javascripts/i18n/translations.js
diff --git a/app/assets/stylesheets/components/code_listing.css.scss b/app/assets/stylesheets/components/code_listing.css.scss
@@ -295,6 +295,12 @@ $annotation-info: $info-500;
       margin-bottom: 0;
     }
 
+    .annotation-controls-block {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
     .annotation-submission-button-container {
       margin-top: 12px;
       margin-bottom: 12px;

diff --git a/app/controllers/saved_annotations_controller.rb b/app/controllers/saved_annotations_controller.rb
@@ -1,6 +1,11 @@
 class SavedAnnotationsController < ApplicationController
   before_action :set_saved_annotation, only: %i[show update destroy]
 
+  has_scope :by_user, as: 'user_id'
+  has_scope :by_course, as: 'course_id'
+  has_scope :by_exercise, as: 'exercise_id'
+  has_scope :by_filter, as: 'filter'
+
   def index
     authorize SavedAnnotation
     @saved_annotations = apply_scopes(policy_scope(SavedAnnotation.all))

diff --git a/app/helpers/renderers/feedback_code_renderer.rb b/app/helpers/renderers/feedback_code_renderer.rb
@@ -92,7 +92,7 @@ def add_messages(submission, messages, user)
     @builder.script(type: 'application/javascript') do
       @builder << <<~HEREDOC
         window.MathJax.startup.promise.then(() => {
-          window.dodona.codeListing = new window.dodona.codeListingClass(#{submission.id}, #{@code.to_json}, #{@code.lines.length}, #{user_is_student});
+          window.dodona.codeListing = new window.dodona.codeListingClass(#{submission.id}, #{submission.course_id}, #{submission.exercise_id}, #{user.id}, #{@code.to_json}, #{@code.lines.length}, #{user_is_student});
           window.dodona.codeListing.addMachineAnnotations(#{messages.to_json});
           #{'window.dodona.codeListing.initAnnotateButtons();' if user_perm}
           window.dodona.codeListing.loadUserAnnotations();

diff --git a/app/models/saved_annotation.rb b/app/models/saved_annotation.rb
@@ -20,4 +20,9 @@ class SavedAnnotation < ApplicationRecord
   belongs_to :course
 
   has_many :annotations, dependent: :nullify
+
+  scope :by_user, ->(user_id) { where user_id: user_id }
+  scope :by_course, ->(course_id) { where course_id: course_id }
+  scope :by_exercise, ->(exercise_id) { where exercise_id: exercise_id }
+  scope :by_filter, ->(filter) { where 'title LIKE ?', "%#{filter}%" }
 end
diff --git a/app/policies/annotation_policy.rb b/app/policies/annotation_policy.rb
@@ -41,10 +41,10 @@ def transition?(_from, _to = nil)
   end
 
   def permitted_attributes_for_create
-    %i[annotation_text line_nr evaluation_id]
+    %i[annotation_text saved_annotation_id line_nr evaluation_id]
   end
 
   def permitted_attributes_for_update
-    %i[annotation_text]
+    %i[annotation_text saved_annotation_id]
   end
 end
diff --git a/app/views/annotations/_annotation.json.jbuilder b/app/views/annotations/_annotation.json.jbuilder
@@ -1,4 +1,4 @@
-json.extract! annotation, :id, :line_nr, :annotation_text, :user_id, :submission_id, :created_at, :updated_at
+json.extract! annotation, :id, :line_nr, :annotation_text, :user_id, :submission_id, :saved_annotation_id, :created_at, :updated_at
 if annotation.is_a?(Question)
   json.extract! annotation, :question_state
   json.newer_submission_url(annotation.newer_submission&.yield_self { |s| submission_url(s) })

diff --git a/app/views/saved_annotations/index.json.jbuilder b/app/views/saved_annotations/index.json.jbuilder
@@ -0,0 +1,3 @@
+json.array! @saved_annotations do |saved_annotation|
+  json.extract! saved_annotation, :id, :title, :annotation_text, :user_id, :exercise_id, :course_id, :created_at, :updated_at
+end
diff --git a/config/locales/js/en.yml b/config/locales/js/en.yml
@@ -143,6 +143,7 @@ en:
       delete: 'Delete'
       edit: 'Edit comment'
       save: 'Save comment'
+      use_saved: 'Saved comment'
       help: 'Press Shift + Enter to send. <a href="https://docs.dodona.be/en/references/exercise-description/#markdown" target="_blank">Markdown</a> is supported.'
       fields:
         annotation_text: 'Comment'

diff --git a/config/locales/js/nl.yml b/config/locales/js/nl.yml
@@ -143,6 +143,7 @@ nl:
       delete: 'Verwijderen'
       edit: 'Opmerking bewerken'
       save: 'Opmerking opslaan'
+      use_saved: 'Opgeslagen opmerking'
       help: 'Druk Shift + Enter om te verzenden. <a href="https://docs.dodona.be/nl/references/exercise-description/#markdown" target="_blank">Markdown</a> wordt ondersteund.'
       fields:
         annotation_text: 'Opmerking'