Add tokens for labels on activity edit page

app/assets/javascripts/components/labels_search_bar.ts

@@ -0,0 +1,124 @@
+import { customElement, property } from "lit/decorators.js";
+import { html, TemplateResult } from "lit";
+import { Option } from "components/datalist_input";
+import "components/datalist_input";
+import { i18n } from "i18n/i18n";
+import { DodonaElement } from "components/meta/dodona_element";
+/**
+ * This component represents a list of the selected labels
+ *
+ * @element d-course-labels
+ * @prop {string[]} labels - the labels of a user in a certain course
+ * @prop {string} name - the name of the input field (used in form submit)
+ */
+@customElement("d-labels")
+export class LabelTokens extends DodonaElement {
+    @property({ type: Array })
+    labels: string[];
+    @property({ type: String })
+    name: string;
+
+    removeLabel(label: string): void {
+        this.dispatchEvent(new CustomEvent("remove-label", {
+            detail: {
+                value: label,
+            },
+        }));
+    }
+
+    render(): TemplateResult {
+        if (!this.labels) {
+            return html``;
+        }
+
+        return html`
+            ${ this.labels.length > 0 ? html`
+                <div class="labels">
+                    ${ this.labels.map( label => html`
+                        <span class="token accent-orange">${label}
+                            <a href="#" class="close" tabindex="-1"  @click=${() => this.removeLabel(label)}>×</a>
+                        </span>
+                    `)}
+                </div>
+            ` : html`` }
+            <input type="hidden" name="${this.name}" .value="${this.labels.join(",")}">
+        `;
+    }
+}
+
+/**
+ * This component represents a search bar for labels, also showing a list of already selected labels.
+ * It allows for searching existing labels, or creating new ones, and adding them to the user of a certain course
+ *
+ * @element d-labels-search-bar
+ *
+ * @prop {{id: number, name: string}[]} labels - all the labels already used in a course
+ * @prop {string[]} selected_labels - the labels that have been added to the user
+ * @prop {string} Name - the name of the input field (used in form submit)
+ */
+@customElement("d-labels-search-bar")
+export class LabelsSearchBar extends DodonaElement {
+    @property({ type: Array })
+    labels: {id: number, name: string}[];
+    @property({ type: Array })
+    selected_labels: string[];
+    @property({ type: String })
+    name: string;
+
+    @property({ state: true })
+    selected_label: string;
+    @property({ state: true })
+    filter: string;
+
+    get options(): Option[] {
+        return this.labels
+            .filter(i => !this.selected_labels.includes(i.name))
+            .map(i => ({ label: i.name, value: i.id.toString() }));
+    }
+
+    addLabel(): void {
+        const selectedLabel = this.selected_label.trim();
+        if (selectedLabel.length > 0 && !this.selected_labels.includes(selectedLabel)) {
+            this.selected_labels = [...this.selected_labels, selectedLabel];
+            this.filter = "";
+        }
+    }
+
+    handleInput(e: CustomEvent): void {
+        this.selected_label = e.detail.label;
+        this.filter = e.detail.label;
+    }
+
+    handleKeyDown(e: KeyboardEvent): void {
+        if (e.key === "Enter" || e.key === "Tab") {
+            this.addLabel();
+        }
+    }
+
+    removeLabel(label: string): void {
+        this.selected_labels = this.selected_labels.filter(i => i !== label);
+    }
+
+    render(): TemplateResult {
+        return html`
+            <div>
+                <d-labels
+                    .labels=${this.selected_labels}
+                    .name=${this.name}
+                    @remove-label=${(e: CustomEvent) => this.removeLabel(e.detail.value)}
+                ></d-labels>
+                <div class="labels-searchbar-group input-group autocomplete">
+                    <d-datalist-input
+                        .filter="${this.filter}"
+                        .options=${this.options}
+                        @input=${e => this.handleInput(e)}
+                        @keydown=${e => this.handleKeyDown(e)}
+                        placeholder="${i18n.t("js.labels_search_bar.placeholder")}"
+                    ></d-datalist-input>
+                    <a type="button" class="btn btn-filled add-button" @click="${this.addLabel}">${i18n.t("js.labels_search_bar.add")}</a>
+                </div>
+                <span class="help-block">${i18n.t("js.labels_search_bar.edit_explanation")}</span>
+            </div>
+        `;
+    }
+}

app/assets/javascripts/i18n/translations.json

@@ -181,11 +181,6 @@
       "course-removed-failed": "Removing course failed",
       "course-removed-success": "Course removed",
       "course_labels": "Member labels",
-      "course_labels_search_bar": {
-        "add": "Add",
-        "edit_explanation": "Add an existing userlabel or create a new one.",
-        "placeholder": "Label"
-      },
       "courses": "Courses",
       "ctimeseries_desc": "This graph shows the evolution of the percentage of students that correctly solved each exercise.",
       "ctimeseries_title": "Users with at least one correct submission",
@@ -241,6 +236,11 @@
       "judges": "Judges",
       "label-undeletable": "This label can't be deleted because it was set in the dirconfig file of a parent directory of the learning activity.",
       "labels": "Labels",
+      "labels_search_bar": {
+        "add": "Add",
+        "edit_explanation": "Add an existing label or create a new one.",
+        "placeholder": "Label"
+      },
       "loading": "Loading...",
       "machine_annotation": {
         "external_url": "more information"
@@ -706,11 +706,6 @@
       "course-removed-failed": "Cursus verwijderen mislukt",
       "course-removed-success": "Cursus verwijderd",
       "course_labels": "Gebruikerlabels",
-      "course_labels_search_bar": {
-        "add": "Toevoegen",
-        "edit_explanation": "Voeg een bestaand gebruikerlabel toe of maak een nieuwe aan.",
-        "placeholder": "Label"
-      },
       "courses": "Cursussen",
       "ctimeseries_desc": "Deze grafiek geeft de evolutie weer van het percentage studenten dat een oefening correct had.",
       "ctimeseries_title": "Gebruikers met minstens één correcte oplossing",
@@ -766,6 +761,11 @@
       "judges": "Judges",
       "label-undeletable": "Dit label kan niet verwijderd worden omdat het werd ingesteld in het dirconfig bestand van een bovenliggende map.",
       "labels": "Labels",
+      "labels_search_bar": {
+        "add": "Toevoegen",
+        "edit_explanation": "Voeg een bestaand label toe of maak een nieuwe aan.",
+        "placeholder": "Label"
+      },
       "loading": "Aan het laden...",
       "machine_annotation": {
         "external_url": "meer informatie"

app/assets/stylesheets/components/courselabel-edit.css.scss

@@ -1,6 +1,14 @@
-d-course-labels-search-bar {
-  .labels-searchbar-group {
-    padding-top: 10px;
+d-labels-search-bar {
+  .labels {
+    margin-bottom: 10px;
+  }
+
+  d-datalist-input {
+    flex: auto;
+
+    input {
+      height: 33.5px;
+    }
   }
 
   .add-button {

app/javascript/packs/label_search_bar.js

@@ -0,0 +1 @@
+import "components/labels_search_bar";

app/views/activities/_form.html.erb

@@ -1,3 +1,6 @@
+<% content_for :javascripts do %>
+  <% javascript_include_tag 'label_search_bar' %>
+<% end %>
 <%= form_for(activity.becomes(Activity), :url => activity_scoped_path(activity: activity, course: @course, series: @series), :html => {:class => 'form-horizontal'}) do |f| %>
   <% if activity.errors.any? %>
    <div class="callout callout-danger" id="error_explanation">
@@ -23,8 +26,13 @@
   </div>
   <div class="field form-group row">
     <%= f.label :labels, :class => "col-sm-3 col-12 col-form-label" %>
-    <div class="col-sm-6 col-12"><%= f.text_field :labels, class: 'form-control', disable: !f.permission?(:labels), value: activity.labels.map(&:name).join(','), placeholder: t(".labels") %></div>
-    <span class="help-block offset-sm-3 col-sm-6 col-12"><%= t '.labels_delimiter' %></span>
+    <div class="col-sm-6 col-12">
+      <d-labels-search-bar
+        labels="<%= activity.repository.labels.map{|l| {id: l.id, name: l.name}}.to_json %>"
+        selected_labels="<%=  activity.labels.map(&:name).to_json %>"
+        name="activity[labels]"
+      ></d-labels-search-bar>
+    </div>
   </div>
   <div class="field form-group row">
     <label class="col-sm-3 col-12 col-form-label"><%= t ".edit_activity" %></label>

app/views/course_members/_form.html.erb

@@ -1,5 +1,5 @@
 <% content_for :javascripts do %>
-  <% javascript_include_tag 'course_membership' %>
+  <% javascript_include_tag 'label_search_bar' %>
 <% end %>
 <%= form_for(course_membership, :url => course_member_path(course, user), :html => {:class => 'form-horizontal'}) do |f| %>
   <% if course_membership.errors.any? %>
@@ -16,10 +16,11 @@
     <div class="row">
       <%= f.label :course_labels, :class => 'col-sm-2 col-10 col-form-label' %>
       <div class="col-sm-10 col-10">
-        <d-course-labels-search-bar
+        <d-labels-search-bar
           labels="<%= @course_labels.map{|cl| {id: cl.id, name: cl.name}}.to_json %>"
           selected_labels="<%= @course_membership.course_labels.map(&:name).to_json %>"
-        ></d-course-labels-search-bar>
+          name="course_membership[course_labels]"
+        ></d-labels-search-bar>
       </div>
     </div>
   </div>

config/locales/js/en.yml

@@ -297,10 +297,10 @@ en:
     sign_in_search_bar:
       institution_search: "Type to search for your institution"
       log_in: Sign in
-    course_labels_search_bar:
+    labels_search_bar:
       placeholder: "Label"
       add: "Add"
-      edit_explanation: "Add an existing userlabel or create a new one."
+      edit_explanation: "Add an existing label or create a new one."
     progress_bar:
       series-admin-progress:
         key: ".singular |||| .plural"

config/locales/js/nl.yml

@@ -297,10 +297,10 @@ nl:
     sign_in_search_bar:
       institution_search: "Typ om jouw school te vinden"
       log_in: Aanmelden
-    course_labels_search_bar:
+    labels_search_bar:
       placeholder: "Label"
       add: "Toevoegen"
-      edit_explanation: "Voeg een bestaand gebruikerlabel toe of maak een nieuwe aan."
+      edit_explanation: "Voeg een bestaand label toe of maak een nieuwe aan."
     progress_bar:
       series-admin-progress:
         key: ".singular |||| .plural"