Refactor index.js to webcomponents

Gemfile

@@ -20,8 +20,8 @@ gem 'jsbundling-rails', '~> 1.0.2'
 # This is still used for all javascript in app/assets/javascripts
 gem 'sprockets-rails', '~> 3.4.2'
 
-# Use Uglifier as compressor for JavaScript assets
-gem 'uglifier', '>= 4.1.20'
+# Use Terser as compressor for JavaScript assets
+gem 'terser', '>= 1.1.1'
 
 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
 gem 'jbuilder', '~> 2.11.5'

Gemfile.lock

@@ -467,14 +467,14 @@ GEM
       activesupport (>= 3)
       attr_required (>= 0.0.5)
       httpclient (>= 2.4)
+    terser (1.1.8)
+      execjs (>= 0.3.0, < 3)
     test-prof (1.0.8)
     thor (1.2.1)
     tilt (2.0.10)
     timeout (0.2.0)
     tzinfo (2.0.4)
       concurrent-ruby (~> 1.0)
-    uglifier (4.2.0)
-      execjs (>= 0.3.0, < 3)
     unicode-display_width (2.1.0)
     validate_email (0.1.6)
       activemodel (>= 3.0)
@@ -582,9 +582,9 @@ DEPENDENCIES
   slack-notifier (~> 2.4.0)
   sprockets-rails (~> 3.4.2)
   stackprof (~> 0.2.19)
+  terser (>= 1.1.1)
   test-prof (~> 1.0.8)
   tzinfo-data
-  uglifier (>= 4.1.20)
   web-console (~> 4.2.0)
   webmock
   will_paginate (~> 3.3.1)

app/assets/javascripts/components/dropdown_filter.ts

@@ -1,46 +1,15 @@
-import { html, LitElement, TemplateResult } from "lit";
+import { html, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
-
-type Label = { id: string | number, name: string };
+import { FilterCollection, Label, FilterCollectionElement } from "components/filter_collection_element";
+import { ShadowlessLitElement } from "components/shadowless_lit_element";
 
 @customElement("dodona-dropdown-filter")
-export class DropdownFilter extends LitElement {
-    @property({ type: Boolean })
-    multi: boolean;
-    @property({ type: Array })
-    labels: Array<Label> = [];
+export class DropdownFilter extends FilterCollectionElement {
     @property()
     color: (s: Label) => string;
-    @property({ type: Array })
-    selected: string[];
     @property()
     type: string;
 
-    // don't use shadow dom
-    createRenderRoot(): Element {
-        return this;
-    }
-
-    toggleLabel(s: Label): void {
-        if (this.isSelected(s)) {
-            if (dodona.deleteTokenFromSearch) {
-                dodona.deleteTokenFromSearch(this.type, s.name);
-            }
-        } else {
-            if (dodona.addTokenToSearch) {
-                dodona.addTokenToSearch(this.type, s.name);
-            }
-        }
-    }
-
-    isSelected(s: Label): boolean {
-        return this.selected.includes(s.name);
-    }
-
-    getSelectedLabels(): Array<Label> {
-        return this.labels.filter(s => this.isSelected(s));
-    }
-
     render(): TemplateResult {
         if (this.labels.length === 0) {
             return html``;
@@ -58,8 +27,8 @@ export class DropdownFilter extends LitElement {
                     ${this.labels.map(s => html`
                             <li><span class="dropdown-item-text ">
                                 <div class="form-check">
-                                    <input class="form-check-input" type="${this.multi?"checkbox":"radio"}" .checked=${this.isSelected(s)} @click="${() => this.toggleLabel(s)}" id="check-${this.type}-${s.id}">
-                                    <label class="form-check-label" for="check-${this.type}-${s.id}">
+                                    <input class="form-check-input" type="${this.multi?"checkbox":"radio"}" .checked=${this.isSelected(s)} @click="${() => this.toggle(s)}" id="check-${this.param}-${s.id}">
+                                    <label class="form-check-label" for="check-${this.param}-${s.id}">
                                         ${s.name}
                                     </label>
                                 </div>
@@ -70,3 +39,29 @@ export class DropdownFilter extends LitElement {
         `;
     }
 }
+
+@customElement("dodona-dropdown-filters")
+export class DropdownFilters extends ShadowlessLitElement {
+    @property( { type: Array })
+    filterCollections: [string, FilterCollection][];
+
+    render(): TemplateResult {
+        if (!this.filterCollections) {
+            return html``;
+        }
+
+        return html`
+            ${this.filterCollections.map(([type, c]) => html`
+                <dodona-dropdown-filter
+                    .labels=${c.data}
+                    .color=${c.color}
+                    .paramVal=${c.paramVal}
+                    .param=${c.param}
+                    .multi=${c.multi}
+                    .type=${type}
+                >
+                </dodona-dropdown-filter>
+            `)}
+        `;
+    }
+}

app/assets/javascripts/components/filter_button.ts

@@ -0,0 +1,84 @@
+import { customElement, property } from "lit/decorators.js";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { ref } from "lit/directives/ref.js";
+import { searchQuery } from "search";
+import { ShadowlessLitElement } from "components/shadowless_lit_element";
+
+/**
+ * This is a very simple clickable component
+ * It sets a given query param to a given value when clicked
+ * multi should be specified in case of array query params
+ */
+@customElement("dodona-filter-button")
+export class FilterButton extends LitElement {
+    @property({ type: String })
+    param: string;
+    @property({ type: String })
+    value: string;
+    @property({ type: Boolean })
+    multi = false;
+
+    static styles = css`
+        :host {
+          cursor: pointer;
+        }
+    `;
+
+    addFilter(): void {
+        if (this.multi) {
+            const selected = new Set(searchQuery.arrayQueryParams.params.get(this.param));
+            selected.add(this.value);
+            searchQuery.arrayQueryParams.updateParam(this.param, Array.from(selected));
+        } else {
+            searchQuery.queryParams.updateParam(this.param, this.value);
+        }
+    }
+
+    render(): TemplateResult {
+        return html`<slot @click=${() => this.addFilter()}></slot>`;
+    }
+}
+
+/**
+ * This is a clickable filter icon
+ * When clicked it sets the query param 'filter' to the given value
+ */
+@customElement("dodona-filter-icon")
+export class FilterIcon extends ShadowlessLitElement {
+    @property({ type: String })
+    value: string;
+    @property({ type: String })
+    title: string;
+
+    element: Element;
+
+    initialiseTooltip(e: Element): void {
+        if (e) {
+            this.element = e;
+            const tooltip = window.bootstrap.Tooltip.getInstance(this.element);
+            if (!tooltip) {
+                new window.bootstrap.Tooltip(this.element);
+            }
+        }
+    }
+
+    disconnectedCallback(): void {
+        const tooltip = window.bootstrap.Tooltip.getInstance(this.element);
+        tooltip.hide();
+        super.disconnectedCallback();
+    }
+
+    render(): TemplateResult {
+        return html`
+        <dodona-filter-button param="filter" .value=${this.value}>
+            <i class="mdi mdi-filter-outline mdi-18 filter-icon"
+               title="${this.title}"
+               data-bs-toggle="tooltip"
+               data-bs-placement="top"
+               ${ref(r => this.initialiseTooltip(r))}
+            >
+            </i>
+        </dodona-filter-button>
+        `;
+    }
+}

app/assets/javascripts/components/filter_collection_element.ts

@@ -0,0 +1,103 @@
+import { property } from "lit/decorators.js";
+import { searchQuery } from "search";
+import { ShadowlessLitElement } from "components/shadowless_lit_element";
+
+export type Label = {id: string, name: string};
+export type FilterCollection = {
+    data: Label[],
+    multi: boolean,
+    color: (l: Label) => string,
+    paramVal: (l: Label) => string,
+    param: string
+};
+
+export class FilterCollectionElement extends ShadowlessLitElement {
+    @property()
+    param: string;
+    @property({ type: Boolean })
+    multi: boolean;
+    @property()
+    paramVal: (l: Label) => string;
+    @property({ type: Array })
+    labels: Array<Label> = [];
+    @property({ state: true })
+    private multiSelected: string[] = [];
+    @property({ state: true })
+    private singleSelected = "";
+
+    update(changedProperties: Map<string, unknown>): void {
+        if ((changedProperties.has("param") || changedProperties.has("multi")) &&
+            this.param !== undefined && this.multi !== undefined) {
+            if (this.multi) {
+                this.multiSubscribeToQueryParams();
+                this.select = this.multiSelect;
+                this.unSelect = this.multiUnSelect;
+                this.isSelected = this.multiIsSelected;
+            } else {
+                this.singleSubscribeToQueryParams();
+                this.select = this.singleSelect;
+                this.unSelect = this.singleUnSelect;
+                this.isSelected = this.singleIsSelected;
+            }
+        }
+        super.update(changedProperties);
+    }
+
+    private str(label: Label): string {
+        return this.paramVal(label).toString();
+    }
+
+    private multiUnSelect(label: Label): void {
+        searchQuery.arrayQueryParams.updateParam(this.param, this.multiSelected.filter(s => s !== this.str(label)));
+    }
+
+    private multiIsSelected(label: Label): boolean {
+        return this.multiSelected.includes(this.str(label));
+    }
+
+    private multiSelect(label: Label): void {
+        searchQuery.arrayQueryParams.updateParam(this.param, [...this.multiSelected, this.str(label)]);
+        searchQuery.queryParams.updateParam("filter", undefined);
+    }
+
+    private multiSubscribeToQueryParams(): void {
+        this.multiSelected = searchQuery.arrayQueryParams.params.get(this.param) || [];
+        searchQuery.arrayQueryParams.subscribeByKey(this.param, (k, o, n) => {
+            this.multiSelected = n || [];
+        });
+    }
+
+    private singleUnSelect(label: Label): void {
+        searchQuery.queryParams.updateParam(this.param, undefined);
+    }
+
+    private singleSelect(label: Label): void {
+        searchQuery.queryParams.updateParam(this.param, this.str(label));
+        searchQuery.queryParams.updateParam("filter", undefined);
+    }
+
+    private singleIsSelected(label: Label): boolean {
+        return this.singleSelected === this.str(label);
+    }
+
+    private singleSubscribeToQueryParams(): void {
+        this.singleSelected = searchQuery.queryParams.params.get(this.param);
+        searchQuery.queryParams.subscribeByKey(this.param, (k, o, n) => this.singleSelected = n || "");
+    }
+
+    isSelected = this.singleIsSelected;
+    unSelect = this.singleUnSelect;
+    select = this.singleSelect;
+
+    toggle(label: Label): void {
+        if (this.isSelected(label)) {
+            this.unSelect(label);
+        } else {
+            this.select(label);
+        }
+    }
+
+    getSelectedLabels(): Label[] {
+        return this.labels.filter( l => this.isSelected(l));
+    }
+}