From e7326c026358da3b3bed5262fe98447be40ab563 Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Thu, 24 Mar 2022 15:39:02 +0100 Subject: [PATCH 01/73] Add lit --- .../javascripts/components/sort_button.ts | 0 babel.config.js | 1 + package.json | 2 + yarn.lock | 70 +++++++++++++++++++ 4 files changed, 73 insertions(+) create mode 100644 app/assets/javascripts/components/sort_button.ts diff --git a/app/assets/javascripts/components/sort_button.ts b/app/assets/javascripts/components/sort_button.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/babel.config.js b/babel.config.js index 2ca6b6b065..67e01e629f 100644 --- a/babel.config.js +++ b/babel.config.js @@ -42,6 +42,7 @@ module.exports = function (api) { isTestEnv && "babel-plugin-dynamic-import-node", "@babel/plugin-transform-destructuring", ["@babel/plugin-proposal-class-properties", { loose: true }], + ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }], ["@babel/plugin-proposal-private-methods", { loose: true }], ["@babel/plugin-proposal-object-rest-spread", { useBuiltIns: true }], ["@babel/plugin-proposal-private-property-in-object", { loose: true }], diff --git a/package.json b/package.json index a9076d8e15..cfe74eb079 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "@babel/core": "^7.17.8", + "@babel/plugin-proposal-decorators": "^7.17.8", "@babel/plugin-transform-runtime": "^7.17.0", "@babel/preset-env": "^7.16.11", "@babel/preset-typescript": "^7.16.7", @@ -31,6 +32,7 @@ "glob": "^7.2.0", "iframe-resizer": "^4.3.2", "jquery": "^3.6.0", + "lit": "2.2.1", "moment": "^2.29.1", "sass": "^1.49.9", "typeahead.js": "^0.11.1", diff --git a/yarn.lock b/yarn.lock index adcc6a706e..4b8afc27e6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -99,6 +99,19 @@ "@babel/helper-replace-supers" "^7.16.7" "@babel/helper-split-export-declaration" "^7.16.7" +"@babel/helper-create-class-features-plugin@^7.17.6": + version "7.17.6" + resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.6.tgz#3778c1ed09a7f3e65e6d6e0f6fbfcc53809d92c9" + integrity sha512-SogLLSxXm2OkBbSsHZMM4tUi8fUzjs63AT/d0YQIzr6GSd8Hxsbk2KYDX0k0DweAzGMj/YWeiCsorIdtdcW8Eg== + dependencies: + "@babel/helper-annotate-as-pure" "^7.16.7" + "@babel/helper-environment-visitor" "^7.16.7" + "@babel/helper-function-name" "^7.16.7" + "@babel/helper-member-expression-to-functions" "^7.16.7" + "@babel/helper-optimise-call-expression" "^7.16.7" + "@babel/helper-replace-supers" "^7.16.7" + "@babel/helper-split-export-declaration" "^7.16.7" + "@babel/helper-create-regexp-features-plugin@^7.16.7": version "7.17.0" resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.17.0.tgz#1dcc7d40ba0c6b6b25618997c5dbfd310f186fe1" @@ -331,6 +344,17 @@ "@babel/helper-plugin-utils" "^7.16.7" "@babel/plugin-syntax-class-static-block" "^7.14.5" +"@babel/plugin-proposal-decorators@^7.17.8": + version "7.17.8" + resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.17.8.tgz#4f0444e896bee85d35cf714a006fc5418f87ff00" + integrity sha512-U69odN4Umyyx1xO1rTII0IDkAEC+RNlcKXtqOblfpzqy1C+aOplb76BQNq0+XdpVkOaPlpEDwd++joY8FNFJKA== + dependencies: + "@babel/helper-create-class-features-plugin" "^7.17.6" + "@babel/helper-plugin-utils" "^7.16.7" + "@babel/helper-replace-supers" "^7.16.7" + "@babel/plugin-syntax-decorators" "^7.17.0" + charcodes "^0.2.0" + "@babel/plugin-proposal-dynamic-import@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.16.7.tgz#c19c897eaa46b27634a00fee9fb7d829158704b2" @@ -461,6 +485,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.14.5" +"@babel/plugin-syntax-decorators@^7.17.0": + version "7.17.0" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.17.0.tgz#a2be3b2c9fe7d78bd4994e790896bc411e2f166d" + integrity sha512-qWe85yCXsvDEluNP0OyeQjH63DlhAR3W7K9BxxU1MvbDb48tgBG+Ao6IJJ6smPDrrVzSQZrbF6donpkFBMcs3A== + dependencies: + "@babel/helper-plugin-utils" "^7.16.7" + "@babel/plugin-syntax-dynamic-import@^7.8.3": version "7.8.3" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3" @@ -1215,6 +1246,11 @@ "@jridgewell/resolve-uri" "^3.0.3" "@jridgewell/sourcemap-codec" "^1.4.10" +"@lit/reactive-element@^1.3.0": + version "1.3.1" + resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-1.3.1.tgz#3021ad0fa30a75a41212c5e7f1f169c5762ef8bb" + integrity sha512-nOJARIr3pReqK3hfFCSW2Zg/kFcFsSAlIE7z4a0C9D2dPrgD/YSn3ZP2ET/rxKB65SXyG7jJbkynBRm+tGlacw== + "@nodelib/fs.scandir@2.1.5": version "2.1.5" resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5" @@ -1622,6 +1658,11 @@ resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c" integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw== +"@types/trusted-types@^2.0.2": + version "2.0.2" + resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.2.tgz#fc25ad9943bcac11cceb8168db4f275e0e72e756" + integrity sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg== + "@types/yargs-parser@*": version "20.2.1" resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-20.2.1.tgz#3b9ce2489919d9e4fea439b76916abc34b2df129" @@ -2342,6 +2383,11 @@ char-regex@^1.0.2: resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf" integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw== +charcodes@^0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/charcodes/-/charcodes-0.2.0.tgz#5208d327e6cc05f99eb80ffc814707572d1f14e4" + integrity sha512-Y4kiDb+AM4Ecy58YkuZrrSRJBDQdQ2L+NyS1vHHFtNtUjgutcZfx3yp1dAONI/oPaPmyGfCLx5CxL+zauIMyKQ== + "chokidar@>=3.0.0 <4.0.0": version "3.5.3" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd" @@ -4565,6 +4611,30 @@ lines-and-columns@^1.1.6: resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632" integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg== +lit-element@^3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-3.2.0.tgz#9c981c55dfd9a8f124dc863edb62cc529d434db7" + integrity sha512-HbE7yt2SnUtg5DCrWt028oaU4D5F4k/1cntAFHTkzY8ZIa8N0Wmu92PxSxucsQSOXlODFrICkQ5x/tEshKi13g== + dependencies: + "@lit/reactive-element" "^1.3.0" + lit-html "^2.2.0" + +lit-html@^2.2.0: + version "2.2.1" + resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-2.2.1.tgz#762f112a8b54eaf0bbae3f516de935a25dcc12d1" + integrity sha512-AiJ/Rs0awjICs2FioTnHSh+Np5dhYSkyRczKy3wKjp8qjLhr1Ov+GiHrUQNdX8ou1LMuznpIME990AZsa/tR8g== + dependencies: + "@types/trusted-types" "^2.0.2" + +lit@2.2.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/lit/-/lit-2.2.1.tgz#4b679e1d8cb6c7977b64921b1ea3eca7850ca1dd" + integrity sha512-dSe++R50JqrvNGXmI9OE13de1z5U/Y3J2dTm/9GC86vedI8ILoR8ZGnxfThFpvQ9m0lR0qRnIR4IiKj/jDCfYw== + dependencies: + "@lit/reactive-element" "^1.3.0" + lit-element "^3.2.0" + lit-html "^2.2.0" + loader-runner@^4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.2.0.tgz#d7022380d66d14c5fb1d496b89864ebcfd478384" From a527d22a3dacd97a151a5274b262d90eb1f3e3b6 Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Thu, 24 Mar 2022 17:12:03 +0100 Subject: [PATCH 02/73] Create frontend sortbutons --- .../javascripts/components/sort_button.ts | 66 +++++++++++++++++++ .../stylesheets/material_icons.css.scss | 14 ++++ app/javascript/packs/application_pack.js | 3 + .../submissions/_submissions_table.html.erb | 12 ++-- 4 files changed, 89 insertions(+), 6 deletions(-) diff --git a/app/assets/javascripts/components/sort_button.ts b/app/assets/javascripts/components/sort_button.ts index e69de29bb2..eba2a7ffaa 100644 --- a/app/assets/javascripts/components/sort_button.ts +++ b/app/assets/javascripts/components/sort_button.ts @@ -0,0 +1,66 @@ +import { html, LitElement, TemplateResult } from "lit"; +import { customElement, property } from "lit/decorators.js"; + +export class SortQuery { + active_column: string; + ascending: boolean; + buttons: Array = []; + + registerSortButton(b: SortButton): void { + this.buttons.push(b); + } + + notifySortButtons(): void { + this.buttons.forEach(b => { + b.active_column = this.active_column; + b.ascending = this.ascending; + }); + } + + sortBy(column: string, ascending: boolean): void { + this.active_column = column; + this.ascending = ascending; + console.log(this.active_column, this.ascending ? "ASC" : "DESC"); + this.notifySortButtons(); + } +} + +dodona.sort_query = new SortQuery(); + +@customElement("dodona-sort-button") +export class SortButton extends LitElement { + @property({ type: String }) + column: string; + @property({ type: String }) + active_column: string; + @property({ type: Boolean }) + ascending: boolean; + + // don't use shadow dom + createRenderRoot(): Element { + return this; + } + + isActive(): boolean { + return this.column === this.active_column; + } + + getSortIcon(): string { + return this.isActive() ? this.ascending ? "sort-ascending" : "sort-descending" : "sort"; + } + + sort(): void { + dodona.sort_query.sortBy(this.column, !this.isActive() || !this.ascending); + } + + constructor() { + super(); + dodona.sort_query.registerSortButton(this); + } + + render(): TemplateResult { + return html` + this.sort()}> + `; + } +} diff --git a/app/assets/stylesheets/material_icons.css.scss b/app/assets/stylesheets/material_icons.css.scss index 73e45ff03e..cacdd86520 100644 --- a/app/assets/stylesheets/material_icons.css.scss +++ b/app/assets/stylesheets/material_icons.css.scss @@ -8,6 +8,11 @@ line-height: 14px; } +.mdi.mdi-16::before { + font-size: 16px; + line-height: 18px; +} + .mdi.mdi-18::before { font-size: 18px; line-height: 20px; @@ -145,6 +150,15 @@ a.btn-fab .mdi::before { } } +.sort-icon { + color: $text-secondary; + cursor: pointer; + + &:hover { + color: $text-color; + } +} + .custom-material-icons { display: inline-block; width: 24px; diff --git a/app/javascript/packs/application_pack.js b/app/javascript/packs/application_pack.js index 30bb8f420f..c50a67601f 100644 --- a/app/javascript/packs/application_pack.js +++ b/app/javascript/packs/application_pack.js @@ -27,6 +27,9 @@ const bootstrap = { Alert, Button, Collapse, Dropdown, Modal, Popover, Tab, Tool window.bootstrap = bootstrap; import "polyfills.js"; + +import "components/sort_button.ts"; + import { Drawer } from "drawer"; import { Toast } from "toast"; import { Notification } from "notification"; diff --git a/app/views/submissions/_submissions_table.html.erb b/app/views/submissions/_submissions_table.html.erb index 10720945df..c2642d7c25 100644 --- a/app/views/submissions/_submissions_table.html.erb +++ b/app/views/submissions/_submissions_table.html.erb @@ -3,16 +3,16 @@ - + <% if user.nil? && (current_user.admin? || current_user.administrating_courses.any?) %> - <%= t ".user" %> + <%= t ".user" %> <% end %> <% unless exercise.present? %> - <%= t ".exercise" %> + <%= t ".exercise" %> <% end %> - <%= t ".time" %> - <%= t ".status" %> - <%= t ".summary" %> + <%= t ".time" %> + <%= t ".status" %> + <%= t ".summary" %> From a5fac1e13dbf79dd075a62f4022efe3682db4ce4 Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Fri, 25 Mar 2022 10:28:25 +0100 Subject: [PATCH 03/73] Allow sorting in the backend --- app/controllers/submissions_controller.rb | 6 ++++++ app/models/submission.rb | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/app/controllers/submissions_controller.rb b/app/controllers/submissions_controller.rb index aef513c0dd..3dddef933f 100644 --- a/app/controllers/submissions_controller.rb +++ b/app/controllers/submissions_controller.rb @@ -21,6 +21,12 @@ class SubmissionsController < ApplicationController end end + has_scope :order_by_number + has_scope :order_by_user + has_scope :order_by_exercise + has_scope :order_by_created_at + has_scope :order_by_status + content_security_policy only: %i[show] do |policy| # allow sandboxed tutor policy.frame_src -> { [sandbox_url] } diff --git a/app/models/submission.rb b/app/models/submission.rb index d98f36e858..1fef5e67e8 100644 --- a/app/models/submission.rb +++ b/app/models/submission.rb @@ -98,6 +98,12 @@ class Submission < ApplicationRecord correct.group(:exercise_id, :user_id).least_recent } + scope :order_by_number, ->(direction) { reorder number: direction, id: :desc } + scope :order_by_user, ->(direction) { includes(:user).reorder 'user.first_name': direction, id: :desc } + scope :order_by_exercise, ->(direction) { includes(:exercise).reorder 'activities.name_nl': direction, id: :desc } + scope :order_by_created_at, ->(direction) { reorder 'created_at': direction, id: :desc } + scope :order_by_status, ->(direction) { reorder 'status': direction, id: :desc } + def initialize(params) raise 'please explicitly tell whether you want to evaluate this submission' unless params.key? :evaluate From b52e6ea50c08b1c6f9bee55bbdad8a5834b62134 Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Wed, 30 Mar 2022 09:34:27 +0200 Subject: [PATCH 04/73] Refactor index.js to query param state with listeners --- .../javascripts/components/search_actions.ts | 148 ++++++++++++++++++ .../javascripts/components/sort_button.ts | 48 +++++- app/assets/javascripts/search.ts | 98 ++++++++++++ 3 files changed, 286 insertions(+), 8 deletions(-) create mode 100644 app/assets/javascripts/components/search_actions.ts create mode 100644 app/assets/javascripts/search.ts diff --git a/app/assets/javascripts/components/search_actions.ts b/app/assets/javascripts/components/search_actions.ts new file mode 100644 index 0000000000..33616bb404 --- /dev/null +++ b/app/assets/javascripts/components/search_actions.ts @@ -0,0 +1,148 @@ +import { html, LitElement, TemplateResult } from "lit"; +import { customElement, property } from "lit/decorators.js"; +import { Toast } from "toast"; +import { fetch } from "util.js"; + +type SearchOption = {search: Record, type: string, text: string}; +type SearchAction = { + url: string, + type: string, + text: string, + action: string, + js: string, + confirm: string, + icon: string +}; + +@customElement("dodona-search-option") +export class SearchOptionElement extends LitElement { + @property() + searchOption: SearchOption; + @property() + key: number; + @state() + private _active = false; + + // don't use shadow dom + createRenderRoot(): Element { + return this; + } + + constructor() { + super(); + Object.keys(this.searchOption.search).forEach(k => { + dodona.search_query.query_params.subscribeByKey(k, () => this.setActive()); + }); + } + + setActive(): void { + this._active = Object.entries(this.searchOption.search).every(([key, value]) => { + return dodona.search_query.query_params.params.get(key) == value; + }); + } + + performSearch(): void { + Object.entries(this.searchOption.search).forEach(([key, value]) => { + dodona.search_query.query_params.updateParam(key, value); + }); + } + + render(): TemplateResult { + return html` +
  • +
    + + +
    +
    • + `; + } +} + +@customElement("dodona-search-actions") +export class SearchActions extends LitElement { + @property() + searchOptions: Array; + @property() + searchActions: Array; + + // don't use shadow dom + createRenderRoot(): Element { + return this; + } + + performAction(action: SearchAction): boolean { + if (!action.action && !action.js) { + return true; + } + + if (!action.action) { + eval(action.js); + return false; + } + + if (action.confirm === undefined || window.confirm(action.confirm)) { + const url: string = dodona.search_query.addParametersToUrl(action.action); + + fetch(url, { + method: "POST", + headers: { "Content-Type": "application/json" } + }).then( data => { + new Toast(data.message); + if (data.js) { + eval(data.js); + } else { + dodona.search_query.resetAllQueryParams(); + } + }); + } + + return false; + } + + + render(): TemplateResult { + return html` + + `; + } +} + + diff --git a/app/assets/javascripts/components/sort_button.ts b/app/assets/javascripts/components/sort_button.ts index eba2a7ffaa..dc0aecf314 100644 --- a/app/assets/javascripts/components/sort_button.ts +++ b/app/assets/javascripts/components/sort_button.ts @@ -1,3 +1,4 @@ +import "search.ts"; import { html, LitElement, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators.js"; @@ -6,6 +7,28 @@ export class SortQuery { ascending: boolean; buttons: Array = []; + constructor() { + dodona.search_query.query_params.subscribe((k, o, n) => { + if ( + k.startsWith("sort_by_") && + !(k === this.getQueryKey() && n === this.getQueryValue()) && + (n === "ASC" || n === "DESC") + ) { + this.active_column = k.substring(8); + this.ascending = n === "ASC"; + this.notifySortButtons(); + } + }); + } + + getQueryKey(): string { + return "sort_by_" + this.active_column; + } + + getQueryValue(): string { + return this.ascending ? "ASC" : "DESC"; + } + registerSortButton(b: SortButton): void { this.buttons.push(b); } @@ -18,22 +41,29 @@ export class SortQuery { } sortBy(column: string, ascending: boolean): void { - this.active_column = column; + if (this.active_column === column && this.ascending === ascending){ + return; + } + + if (this.active_column !== column) { + dodona.search_query.query_params.updateParam(this.getQueryKey(), undefined); + this.active_column = column; + } this.ascending = ascending; - console.log(this.active_column, this.ascending ? "ASC" : "DESC"); this.notifySortButtons(); + dodona.search_query.query_params.updateParam(this.getQueryKey(), this.getQueryValue()); } } - -dodona.sort_query = new SortQuery(); +dodona.state = {}; +dodona.state.sort_query = new SortQuery(); @customElement("dodona-sort-button") export class SortButton extends LitElement { @property({ type: String }) column: string; - @property({ type: String }) + // @state() active_column: string; - @property({ type: Boolean }) + // @state() ascending: boolean; // don't use shadow dom @@ -50,12 +80,14 @@ export class SortButton extends LitElement { } sort(): void { - dodona.sort_query.sortBy(this.column, !this.isActive() || !this.ascending); + dodona.state.sort_query.sortBy(this.column, !this.isActive() || !this.ascending); } constructor() { super(); - dodona.sort_query.registerSortButton(this); + dodona.state.sort_query.registerSortButton(this); + this.ascending = dodona.state.sort_query.ascending; + this.active_column = dodona.state.sort_query.active_column; } render(): TemplateResult { diff --git a/app/assets/javascripts/search.ts b/app/assets/javascripts/search.ts new file mode 100644 index 0000000000..6996184258 --- /dev/null +++ b/app/assets/javascripts/search.ts @@ -0,0 +1,98 @@ +import { fetch, updateArrayURLParameter, updateURLParameter } from "util.js"; + + +export class QueryParameters { + params: Map = new Map(); + listeners_by_key: Mapvoid>> = new Map(); + listeners: Array<(k: string, o: T, n: T)=>void> = []; + + resetParams(): void { + this.params.forEach((v, k) => { + if (v !== undefined) { + this.updateParam(k, undefined); + } + }); + } + + updateParam(key: string, value: T ): void { + console.log(key, value); + const old: T = this.params.get(key); + this.params.set(key, value); + + this.listeners.forEach(f => f(key, old, value)); + const listeners = this.listeners_by_key.get(key); + if (listeners) { + listeners.forEach(f => f(key, old, value)); + } + } + + subscribeByKey(key: string, listener: (k: string, o: T, n: T)=>void): void { + const listeners = this.listeners_by_key.get(key); + if (listeners) { + listeners.push(listener); + } else { + this.listeners_by_key.set(key, [listener]); + } + } + + subscribe(listener: (k: string, o: T, n: T)=>void): void { + this.listeners.push(listener); + } +} + +export class SearchQuery { + baseUrl: string; + searchIndex = 0; + appliedIndex = 0; + array_query_params: QueryParameters = new QueryParameters(); + query_params: QueryParameters = new QueryParameters(); + + constructor(baseUrl?: string) { + this.baseUrl = baseUrl || window.location.href; + this.array_query_params.subscribe(this.search); + this.query_params.subscribe(k => this.search(k)); + } + + addParametersToUrl(baseUrl?: string): string { + let url: string = baseUrl || this.baseUrl; + this.query_params.params.forEach((v, k) => url = updateURLParameter(url, k, v)); + this.array_query_params.params.forEach((v, k) => url = updateArrayURLParameter(url, k, v)); + + return url; + } + + resetAllQueryParams(): void { + this.query_params.resetParams(); + this.array_query_params.resetParams(); + } + + search(key?: string): void { + if (key === "page") { + return; + } + this.query_params.updateParam("page", "1"); + + const url = this.addParametersToUrl(); + const localIndex = ++this.searchIndex; + + // TODO CHECK REASON FOR if (updateAddressBar) + window.history.replaceState(null, "Dodona", url); + document.getElementById("progress-filter").style.visibility = "visible"; + fetch(updateURLParameter(url, "format", "js"), { + headers: { + "accept": "text/javascript" + }, + credentials: "same-origin", + }) + .then(resp => resp.text()) + .then(data => { + if (this.appliedIndex < localIndex) { + this.appliedIndex = localIndex; + eval(data); + } + document.getElementById("progress-filter").style.visibility = "hidden"; + }); + } +} + +dodona.search_query = new SearchQuery(); From e8f62209423486f675f8906f1b3262015284d91f Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Wed, 30 Mar 2022 10:18:18 +0200 Subject: [PATCH 05/73] Initialise query params on page refresh --- app/assets/javascripts/components/sort_button.ts | 11 +++++++++++ app/assets/javascripts/search.ts | 13 +++++++++++-- tsconfig.json | 1 + 3 files changed, 23 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/components/sort_button.ts b/app/assets/javascripts/components/sort_button.ts index dc0aecf314..bfd39b20b2 100644 --- a/app/assets/javascripts/components/sort_button.ts +++ b/app/assets/javascripts/components/sort_button.ts @@ -8,6 +8,17 @@ export class SortQuery { buttons: Array = []; constructor() { + const sortParams = [...dodona.search_query.query_params.params.entries()].filter( + ([k, v]) => k.startsWith("sort_by_") && (v=== "ASC" || v === "DESC") + ); + + if (sortParams.length > 0) { + this.active_column = sortParams[0][0].substring(8); + this.ascending = sortParams[0][1] === "ASC"; + sortParams.slice(1).forEach(([k, _]) => { + dodona.search_query.query_params.updateParam(k, undefined); + }); + } dodona.search_query.query_params.subscribe((k, o, n) => { if ( k.startsWith("sort_by_") && diff --git a/app/assets/javascripts/search.ts b/app/assets/javascripts/search.ts index 6996184258..3198fe3bb8 100644 --- a/app/assets/javascripts/search.ts +++ b/app/assets/javascripts/search.ts @@ -48,8 +48,17 @@ export class SearchQuery { query_params: QueryParameters = new QueryParameters(); constructor(baseUrl?: string) { - this.baseUrl = baseUrl || window.location.href; - this.array_query_params.subscribe(this.search); + const _url = baseUrl || window.location.href; + const url = new URL(_url.replace(/%5B%5D/g, "[]"), window.location.origin); + this.baseUrl = url.href; + for (const key of url.searchParams.keys()) { + if (key.endsWith("[]")) { + this.array_query_params.updateParam(key.substring(0, -2), url.searchParams.getAll(key)); + } else { + this.query_params.updateParam(key, url.searchParams.get(key)); + } + } + this.array_query_params.subscribe(k => this.search(k)); this.query_params.subscribe(k => this.search(k)); } diff --git a/tsconfig.json b/tsconfig.json index 82a0400ef3..94b468e5e8 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -12,6 +12,7 @@ "moduleResolution": "node", "sourceMap": true, "target": "es5", + "downlevelIteration": true, "baseUrl": "app", "paths": { "*": ["assets/javascripts/*"] From b5ded393aba19d0065dc554b91d5bd944af24b0d Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Wed, 30 Mar 2022 10:51:16 +0200 Subject: [PATCH 06/73] Allow sort to interact correctly with backend --- app/assets/javascripts/components/sort_button.ts | 11 ++++++----- app/assets/javascripts/search.ts | 8 ++++---- app/models/submission.rb | 2 +- app/views/submissions/_submissions_table.html.erb | 4 ++-- 4 files changed, 13 insertions(+), 12 deletions(-) diff --git a/app/assets/javascripts/components/sort_button.ts b/app/assets/javascripts/components/sort_button.ts index bfd39b20b2..7ab5df8207 100644 --- a/app/assets/javascripts/components/sort_button.ts +++ b/app/assets/javascripts/components/sort_button.ts @@ -9,23 +9,24 @@ export class SortQuery { constructor() { const sortParams = [...dodona.search_query.query_params.params.entries()].filter( - ([k, v]) => k.startsWith("sort_by_") && (v=== "ASC" || v === "DESC") + ([k, v]) => k.startsWith("order_by_") && (v=== "ASC" || v === "DESC") ); if (sortParams.length > 0) { - this.active_column = sortParams[0][0].substring(8); + this.active_column = sortParams[0][0].substring(9); this.ascending = sortParams[0][1] === "ASC"; + console.log(this.active_column, this.ascending); sortParams.slice(1).forEach(([k, _]) => { dodona.search_query.query_params.updateParam(k, undefined); }); } dodona.search_query.query_params.subscribe((k, o, n) => { if ( - k.startsWith("sort_by_") && + k.startsWith("order_by_") && !(k === this.getQueryKey() && n === this.getQueryValue()) && (n === "ASC" || n === "DESC") ) { - this.active_column = k.substring(8); + this.active_column = k.substring(9); this.ascending = n === "ASC"; this.notifySortButtons(); } @@ -33,7 +34,7 @@ export class SortQuery { } getQueryKey(): string { - return "sort_by_" + this.active_column; + return "order_by_" + this.active_column; } getQueryValue(): string { diff --git a/app/assets/javascripts/search.ts b/app/assets/javascripts/search.ts index 3198fe3bb8..40bafbb84d 100644 --- a/app/assets/javascripts/search.ts +++ b/app/assets/javascripts/search.ts @@ -1,4 +1,4 @@ -import { fetch, updateArrayURLParameter, updateURLParameter } from "util.js"; +import { createDelayer, fetch, updateArrayURLParameter, updateURLParameter } from "util.js"; export class QueryParameters { @@ -15,7 +15,6 @@ export class QueryParameters { } updateParam(key: string, value: T ): void { - console.log(key, value); const old: T = this.params.get(key); this.params.set(key, value); @@ -58,8 +57,9 @@ export class SearchQuery { this.query_params.updateParam(key, url.searchParams.get(key)); } } - this.array_query_params.subscribe(k => this.search(k)); - this.query_params.subscribe(k => this.search(k)); + const delay = createDelayer(); + this.array_query_params.subscribe(k => delay(() => this.search(k), 100)); + this.query_params.subscribe(k => delay(() => this.search(k), 100)); } addParametersToUrl(baseUrl?: string): string { diff --git a/app/models/submission.rb b/app/models/submission.rb index 1fef5e67e8..e54aba70cf 100644 --- a/app/models/submission.rb +++ b/app/models/submission.rb @@ -99,7 +99,7 @@ class Submission < ApplicationRecord } scope :order_by_number, ->(direction) { reorder number: direction, id: :desc } - scope :order_by_user, ->(direction) { includes(:user).reorder 'user.first_name': direction, id: :desc } + scope :order_by_user, ->(direction) { includes(:user).reorder 'users.first_name': direction, 'users.last_name': direction, id: :desc } scope :order_by_exercise, ->(direction) { includes(:exercise).reorder 'activities.name_nl': direction, id: :desc } scope :order_by_created_at, ->(direction) { reorder 'created_at': direction, id: :desc } scope :order_by_status, ->(direction) { reorder 'status': direction, id: :desc } diff --git a/app/views/submissions/_submissions_table.html.erb b/app/views/submissions/_submissions_table.html.erb index c2642d7c25..6b12147e97 100644 --- a/app/views/submissions/_submissions_table.html.erb +++ b/app/views/submissions/_submissions_table.html.erb @@ -10,9 +10,9 @@ <% unless exercise.present? %> <%= t ".exercise" %> <% end %> - <%= t ".time" %> + <%= t ".time" %> <%= t ".status" %> - <%= t ".summary" %> + <%= t ".summary" %> From 8b6a456a639119e3a1362164c832335bc5879199 Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Wed, 30 Mar 2022 11:04:19 +0200 Subject: [PATCH 07/73] Allow removing sort and make listerners more abstract --- .../javascripts/components/sort_button.ts | 43 +++++++++++-------- 1 file changed, 25 insertions(+), 18 deletions(-) diff --git a/app/assets/javascripts/components/sort_button.ts b/app/assets/javascripts/components/sort_button.ts index 7ab5df8207..b35e6c667d 100644 --- a/app/assets/javascripts/components/sort_button.ts +++ b/app/assets/javascripts/components/sort_button.ts @@ -5,7 +5,7 @@ import { customElement, property } from "lit/decorators.js"; export class SortQuery { active_column: string; ascending: boolean; - buttons: Array = []; + listeners: Array<(c: string, a: boolean) => void> = []; constructor() { const sortParams = [...dodona.search_query.query_params.params.entries()].filter( @@ -28,7 +28,7 @@ export class SortQuery { ) { this.active_column = k.substring(9); this.ascending = n === "ASC"; - this.notifySortButtons(); + this.notify(); } }); } @@ -41,19 +41,16 @@ export class SortQuery { return this.ascending ? "ASC" : "DESC"; } - registerSortButton(b: SortButton): void { - this.buttons.push(b); + subscribe(listener: (c: string, a: boolean) => void): void { + this.listeners.push(listener); } - notifySortButtons(): void { - this.buttons.forEach(b => { - b.active_column = this.active_column; - b.ascending = this.ascending; - }); + notify(): void { + this.listeners.forEach(f => f(this.active_column, this.ascending)); } sortBy(column: string, ascending: boolean): void { - if (this.active_column === column && this.ascending === ascending){ + if (this.active_column === column && this.ascending === ascending) { return; } @@ -62,8 +59,10 @@ export class SortQuery { this.active_column = column; } this.ascending = ascending; - this.notifySortButtons(); - dodona.search_query.query_params.updateParam(this.getQueryKey(), this.getQueryValue()); + this.notify(); + if (this.active_column) { + dodona.search_query.query_params.updateParam(this.getQueryKey(), this.getQueryValue()); + } } } dodona.state = {}; @@ -73,10 +72,9 @@ dodona.state.sort_query = new SortQuery(); export class SortButton extends LitElement { @property({ type: String }) column: string; - // @state() - active_column: string; - // @state() - ascending: boolean; + + active_column: string; + ascending: boolean; // don't use shadow dom createRenderRoot(): Element { @@ -92,14 +90,23 @@ export class SortButton extends LitElement { } sort(): void { - dodona.state.sort_query.sortBy(this.column, !this.isActive() || !this.ascending); + if (!this.isActive()) { + dodona.state.sort_query.sortBy(this.column, true); + } else if (this.ascending) { + dodona.state.sort_query.sortBy(this.column, false); + } else { + dodona.state.sort_query.sortBy(undefined, undefined); + } } constructor() { super(); - dodona.state.sort_query.registerSortButton(this); this.ascending = dodona.state.sort_query.ascending; this.active_column = dodona.state.sort_query.active_column; + dodona.state.sort_query.subscribe((c, a) => { + this.active_column = c; + this.ascending = a; + }); } render(): TemplateResult { From a72a05952fb16f19c770691267f0174a8503efaa Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Thu, 31 Mar 2022 09:11:33 +0200 Subject: [PATCH 08/73] Fix searchfilter options --- .../javascripts/components/search_actions.ts | 67 ++++++++++++------- .../javascripts/components/sort_button.ts | 1 - app/assets/javascripts/index.js | 4 +- app/assets/javascripts/search.ts | 42 +++++++++++- app/javascript/packs/application_pack.js | 1 + app/views/layouts/_searchbar.html.erb | 17 +++-- 6 files changed, 96 insertions(+), 36 deletions(-) diff --git a/app/assets/javascripts/components/search_actions.ts b/app/assets/javascripts/components/search_actions.ts index 33616bb404..de6d7375a3 100644 --- a/app/assets/javascripts/components/search_actions.ts +++ b/app/assets/javascripts/components/search_actions.ts @@ -14,13 +14,16 @@ type SearchAction = { icon: string }; +const isSearchOption = (opt): opt is SearchOption => (opt as SearchOption).search !== undefined; +const isSearchAction= (action): action is SearchAction => (action as SearchAction).js !== undefined || (action as SearchAction).action !== undefined || (action as SearchAction).url !== undefined; + @customElement("dodona-search-option") export class SearchOptionElement extends LitElement { - @property() - searchOption: SearchOption; - @property() - key: number; - @state() + @property({ type: Object }) + searchOption: SearchOption; + @property( { type: Number }) + key: number; + private _active = false; // don't use shadow dom @@ -28,23 +31,33 @@ export class SearchOptionElement extends LitElement { return this; } - constructor() { - super(); - Object.keys(this.searchOption.search).forEach(k => { - dodona.search_query.query_params.subscribeByKey(k, () => this.setActive()); - }); + update(changedProperties: Map): void { + if (changedProperties.has("searchOption") && this.searchOption) { + console.log(this.searchOption); + this.setActive(); + Object.keys(this.searchOption.search).forEach(k => { + dodona.search_query.query_params.subscribeByKey(k, () => this.setActive()); + }); + } + super.update(changedProperties); } setActive(): void { this._active = Object.entries(this.searchOption.search).every(([key, value]) => { - return dodona.search_query.query_params.params.get(key) == value; + return dodona.search_query.query_params.params.get(key) == value.toString(); }); } performSearch(): void { - Object.entries(this.searchOption.search).forEach(([key, value]) => { - dodona.search_query.query_params.updateParam(key, value); - }); + if (!this._active) { + Object.entries(this.searchOption.search).forEach(([key, value]) => { + dodona.search_query.query_params.updateParam(key, value.toString()); + }); + } else { + Object.keys(this.searchOption.search).forEach(key => { + dodona.search_query.query_params.updateParam(key, undefined); + }); + } } render(): TemplateResult { @@ -69,10 +82,16 @@ export class SearchOptionElement extends LitElement { @customElement("dodona-search-actions") export class SearchActions extends LitElement { - @property() - searchOptions: Array; - @property() - searchActions: Array; + @property({ type: Array }) + actions: (SearchOption|SearchAction)[] = []; + + getSearchOptions(): Array { + return this.actions.filter(isSearchOption); + } + + getSearchActions(): Array { + return this.actions.filter(isSearchAction); + } // don't use shadow dom createRenderRoot(): Element { @@ -111,23 +130,23 @@ export class SearchActions extends LitElement { render(): TemplateResult { return html` - @@ -183,5 +185,6 @@ filterCollections, "<%= local_assigns.fetch :refresh_element, "" %>" ); + dodona.search_query.setRefreshElement("<%= local_assigns.fetch :refresh_element, "" %>"); }); From cb0887329349eb87612399e52047f6cbaef0ed95 Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Thu, 31 Mar 2022 10:04:11 +0200 Subject: [PATCH 09/73] Create search field component --- .../javascripts/components/search_field.ts | 52 +++++++++++++++++++ app/javascript/packs/application_pack.js | 1 + app/views/layouts/_searchbar.html.erb | 1 + 3 files changed, 54 insertions(+) create mode 100644 app/assets/javascripts/components/search_field.ts diff --git a/app/assets/javascripts/components/search_field.ts b/app/assets/javascripts/components/search_field.ts new file mode 100644 index 0000000000..cb0e90b72a --- /dev/null +++ b/app/assets/javascripts/components/search_field.ts @@ -0,0 +1,52 @@ +import { customElement, property } from "lit/decorators.js"; +import { html, LitElement, TemplateResult } from "lit"; +import { createDelayer } from "util.js"; + +@customElement("dodona-search-field") +export class SearchField extends LitElement { + @property({ type: String }) + placeholder: string; + @property({ type: Boolean }) + eager: boolean; + + filter?: string = ""; + delay: (f: () => void, s: number) => void; + + // don't use shadow dom + createRenderRoot(): Element { + return this; + } + + constructor() { + super(); + dodona.search_query.query_params.subscribeByKey("filter", (k, o, n) => this.filter = n || ""); + this.filter = dodona.search_query.query_params.params.get("filter") || ""; + this.delay = createDelayer(); + } + + update(changedProperties: Map): void { + if (changedProperties.has("eager") && this.eager) { + dodona.search_query.search(); + } + super.update(changedProperties); + } + + keyup(e: KeyboardEvent): void { + this.filter = (e.target as HTMLInputElement).value; + this.delay(() => dodona.search_query.query_params.updateParam("filter", this.filter), 300); + } + + render(): TemplateResult { + return html` + this.keyup(e)} + /> + `; + } +} diff --git a/app/javascript/packs/application_pack.js b/app/javascript/packs/application_pack.js index 890eb113bf..dfd83dcae7 100644 --- a/app/javascript/packs/application_pack.js +++ b/app/javascript/packs/application_pack.js @@ -30,6 +30,7 @@ import "polyfills.js"; import "components/sort_button.ts"; import "components/search_actions.ts"; +import "components/search_field.ts"; import { Drawer } from "drawer"; import { Toast } from "toast"; diff --git a/app/views/layouts/_searchbar.html.erb b/app/views/layouts/_searchbar.html.erb index 71db6073f3..30fa250d9f 100644 --- a/app/views/layouts/_searchbar.html.erb +++ b/app/views/layouts/_searchbar.html.erb @@ -6,6 +6,7 @@
    +
    From 40557d2419b90bcf61ba8626199a44948e5b4ab0 Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Fri, 1 Apr 2022 10:12:33 +0200 Subject: [PATCH 10/73] Create searchable dropdown --- .../javascripts/components/search_field.ts | 125 +++++++++++++++++- app/assets/javascripts/index.js | 2 +- app/assets/javascripts/search.ts | 2 +- app/assets/stylesheets/components.css.scss | 1 + .../components/search_field.css.scss | 7 + app/views/layouts/_searchbar.html.erb | 11 +- 6 files changed, 142 insertions(+), 6 deletions(-) create mode 100644 app/assets/stylesheets/components/search_field.css.scss diff --git a/app/assets/javascripts/components/search_field.ts b/app/assets/javascripts/components/search_field.ts index cb0e90b72a..eef6d51ce7 100644 --- a/app/assets/javascripts/components/search_field.ts +++ b/app/assets/javascripts/components/search_field.ts @@ -1,6 +1,103 @@ import { customElement, property } from "lit/decorators.js"; import { html, LitElement, TemplateResult } from "lit"; import { createDelayer } from "util.js"; +import { unsafeHTML } from "lit/directives/unsafe-html.js"; + +type Label = {id: string, name: string}; +export abstract class SearchFieldSuggestion extends LitElement { + @property() + labels: Label[] = []; + @property() + type: string; + @property() + filter: string; + @property() + paramVal: (l: Label) => string; + @property() + param: string; + + abstract select(label: string): void; + abstract isSelected(label: string): boolean; + abstract subscribeToQueryParams(): void; + + // don't use shadow dom + createRenderRoot(): Element { + return this; + } + + update(changedProperties: Map): void { + if (changedProperties.has("type") && this.type) { + this.subscribeToQueryParams(); + } + super.update(changedProperties); + } + + getFilterRegExp(): RegExp { + return new RegExp(this.filter, "gi"); + } + + getFilteredLabels(): Label[] { + return this.labels + .filter( l => !this.isSelected(this.paramVal(l))) + .filter(l => l.name.match(this.getFilterRegExp())); + } + + getHighlightedLabel(label: string): string { + return label.replace(this.getFilterRegExp(), str => `${str}`); + } + + render(): TemplateResult { + return this.getFilteredLabels().length == 0 ? html`` : html` +
  • ${I18n.t(`js.${this.type}`)}
    • + ${ this.getFilteredLabels().map( label => html` +
  • this.select(this.paramVal(label))}> + ${unsafeHTML(this.getHighlightedLabel(label.name))} +
    • + `)} + `; + } +} + +@customElement("dodona-single-search-field-suggestion") +export class SingleSearchFieldSuggestion extends SearchFieldSuggestion { + @property({ state: true }) + selected = ""; + + select(label: string): void { + dodona.search_query.query_params.updateParam(this.param, label); + } + + isSelected(label: string): boolean { + return this.selected === label; + } + + subscribeToQueryParams(): void { + this.selected = dodona.search_query.query_params.params.get(this.param); + dodona.search_query.query_params.subscribeByKey(this.param, (k, o, n) => this.selected = n || ""); + } +} + +@customElement("dodona-multi-search-field-suggestion") +export class MultiSearchFieldSuggestion extends SearchFieldSuggestion { + @property({ state: true }) + selected: string[] = []; + + select(label: string): void { + dodona.search_query.array_query_params.updateParam(this.param, [...this.selected, label]); + } + + isSelected(label: string): boolean { + return this.selected.includes(label); + } + + subscribeToQueryParams(): void { + this.selected = dodona.search_query.array_query_params.params.get(this.param) || []; + dodona.search_query.array_query_params.subscribeByKey(this.param, (k, o, n) => { + this.selected = n || []; + }); + } +} + @customElement("dodona-search-field") export class SearchField extends LitElement { @@ -8,8 +105,11 @@ export class SearchField extends LitElement { placeholder: string; @property({ type: Boolean }) eager: boolean; + @property( { type: Array }) + filterCollections: Record string, param: string }>; - filter?: string = ""; + @property({ state: true }) + filter?: string = ""; delay: (f: () => void, s: number) => void; // don't use shadow dom @@ -40,13 +140,34 @@ export class SearchField extends LitElement { return html` this.keyup(e)} /> +
      + ${Object.entries(this.filterCollections).map(([type, c]) => c.multi ? html` + + + ` : html` + + + `)} +
    `; } } diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js index 234c44d7b4..29108ca874 100644 --- a/app/assets/javascripts/index.js +++ b/app/assets/javascripts/index.js @@ -35,7 +35,7 @@ function initFilterIndex(_baseUrl, eager, actions, doInitFilter, filterCollectio const updateAddressBar = !_baseUrl; function init() { - initTokens(); + // initTokens(); if (doInitFilter) { initFilter(updateAddressBar, _baseUrl, eager, filterCollections); diff --git a/app/assets/javascripts/search.ts b/app/assets/javascripts/search.ts index fd2f468845..78e3f21a02 100644 --- a/app/assets/javascripts/search.ts +++ b/app/assets/javascripts/search.ts @@ -74,7 +74,7 @@ export class SearchQuery { // initialise present parameters for (const key of url.searchParams.keys()) { if (key.endsWith("[]")) { - this.array_query_params.updateParam(key.substring(0, -2), url.searchParams.getAll(key)); + this.array_query_params.updateParam(key.substring(0, key.length-2), url.searchParams.getAll(key)); } else { this.query_params.updateParam(key, url.searchParams.get(key)); } diff --git a/app/assets/stylesheets/components.css.scss b/app/assets/stylesheets/components.css.scss index d85812e32b..a1300f9cec 100644 --- a/app/assets/stylesheets/components.css.scss +++ b/app/assets/stylesheets/components.css.scss @@ -20,6 +20,7 @@ @import "components/tokenfield.css.scss"; @import "components/tutor.css.scss"; @import "components/visualisations.css.scss"; +@import "components/search_field.css.scss"; .flex-spacer { flex-grow: 1; diff --git a/app/assets/stylesheets/components/search_field.css.scss b/app/assets/stylesheets/components/search_field.css.scss new file mode 100644 index 0000000000..bcebbfeb89 --- /dev/null +++ b/app/assets/stylesheets/components/search_field.css.scss @@ -0,0 +1,7 @@ +.search-filter:focus + .show-search-dropdown { + display: block; +} + +.show-search-dropdown:focus, .show-search-dropdown:active, .show-search-dropdown:target { + display: block; +} diff --git a/app/views/layouts/_searchbar.html.erb b/app/views/layouts/_searchbar.html.erb index 30fa250d9f..7778ce364c 100644 --- a/app/views/layouts/_searchbar.html.erb +++ b/app/views/layouts/_searchbar.html.erb @@ -4,9 +4,9 @@
    - + - +
    @@ -187,5 +187,12 @@ "<%= local_assigns.fetch :refresh_element, "" %>" ); dodona.search_query.setRefreshElement("<%= local_assigns.fetch :refresh_element, "" %>"); + + const searchField = document.createElement("dodona-search-field"); + searchField.filterCollections = filterCollections; + searchField.eager = <%= local_assigns.fetch :eager, false %>; + searchField.placeholder = '<%#= t("layout.search.search") %>'; + + document.getElementById("test-long-id-x12d59f4").appendChild(searchField); }); From 887303f6df468823a016ae1dbd91992547879ed6 Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Fri, 1 Apr 2022 11:20:28 +0200 Subject: [PATCH 11/73] Add tab completion --- .../javascripts/components/search_field.ts | 41 ++++++++++++++++++- 1 file changed, 39 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/components/search_field.ts b/app/assets/javascripts/components/search_field.ts index eef6d51ce7..e7b6989da7 100644 --- a/app/assets/javascripts/components/search_field.ts +++ b/app/assets/javascripts/components/search_field.ts @@ -2,6 +2,7 @@ import { customElement, property } from "lit/decorators.js"; import { html, LitElement, TemplateResult } from "lit"; import { createDelayer } from "util.js"; import { unsafeHTML } from "lit/directives/unsafe-html.js"; +import { ref } from "lit/directives/ref.js"; type Label = {id: string, name: string}; export abstract class SearchFieldSuggestion extends LitElement { @@ -15,6 +16,8 @@ export abstract class SearchFieldSuggestion extends LitElement { paramVal: (l: Label) => string; @property() param: string; + @property({ type: Number }) + index: number; abstract select(label: string): void; abstract isSelected(label: string): boolean; @@ -110,8 +113,21 @@ export class SearchField extends LitElement { @property({ state: true }) filter?: string = ""; + @property({ state: true }) + suggestionFields: SearchFieldSuggestion[] = []; + @property({ state: true }) + hasSuggestions: boolean; + delay: (f: () => void, s: number) => void; + tabComplete(): void { + if (this.hasSuggestions) { + const field = this.suggestionFields.find(s => s.getFilteredLabels().length > 0); + field.select(field.getFilteredLabels()[0].name); + this.filter = ""; + } + } + // don't use shadow dom createRenderRoot(): Element { return this; @@ -131,11 +147,27 @@ export class SearchField extends LitElement { super.update(changedProperties); } + keydown(e: KeyboardEvent): void { + if (e.key === "Tab") { + e.preventDefault(); + } + } + keyup(e: KeyboardEvent): void { this.filter = (e.target as HTMLInputElement).value; + if (e.key === "Tab") { + this.tabComplete(); + } this.delay(() => dodona.search_query.query_params.updateParam("filter", this.filter), 300); } + suggestionFieldChanged(field?: SearchFieldSuggestion): void { + if (field) { + this.suggestionFields[field.index] = field; + this.hasSuggestions = this.suggestionFields.some(s => s.getFilteredLabels().length > 0); + } + } + render(): TemplateResult { return html` this.keyup(e)} + @keydown=${e => this.keydown(e)} /> -
      - ${Object.entries(this.filterCollections).map(([type, c]) => c.multi ? html` +
        + ${Object.entries(this.filterCollections).map(([type, c], i) => c.multi ? html` ` : html` @@ -164,6 +199,8 @@ export class SearchField extends LitElement { .filter=${this.filter} .paramVal=${c.paramVal} .param=${c.param} + .index=${i} + ${ref(this.suggestionFieldChanged)} > `)} From cdc0620b9d0054c65acdae3754358adeac8f3b05 Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Fri, 1 Apr 2022 16:23:25 +0200 Subject: [PATCH 12/73] Add search tokens --- .../javascripts/components/search_field.ts | 8 +- .../javascripts/components/search_token.ts | 123 ++++++++++++++++++ .../components/tokenfield.css.scss | 114 +--------------- app/javascript/packs/application_pack.js | 1 + app/views/layouts/_searchbar.html.erb | 27 ++-- 5 files changed, 144 insertions(+), 129 deletions(-) create mode 100644 app/assets/javascripts/components/search_token.ts diff --git a/app/assets/javascripts/components/search_field.ts b/app/assets/javascripts/components/search_field.ts index e7b6989da7..bb07f54ce7 100644 --- a/app/assets/javascripts/components/search_field.ts +++ b/app/assets/javascripts/components/search_field.ts @@ -29,7 +29,7 @@ export abstract class SearchFieldSuggestion extends LitElement { } update(changedProperties: Map): void { - if (changedProperties.has("type") && this.type) { + if (changedProperties.has("param") && this.param) { this.subscribeToQueryParams(); } super.update(changedProperties); @@ -123,7 +123,7 @@ export class SearchField extends LitElement { tabComplete(): void { if (this.hasSuggestions) { const field = this.suggestionFields.find(s => s.getFilteredLabels().length > 0); - field.select(field.getFilteredLabels()[0].name); + field.select(field.paramVal(field.getFilteredLabels()[0])); this.filter = ""; } } @@ -169,6 +169,10 @@ export class SearchField extends LitElement { } render(): TemplateResult { + if (!this.filterCollections) { + return html``; + } + return html` string; + @property() + paramVal: (l: Label) => string; + @property() + param: string; + + abstract unSelect(label: string): void; + abstract isSelected(label: string): boolean; + abstract subscribeToQueryParams(): void; + + // don't use shadow dom + createRenderRoot(): Element { + return this; + } + + update(changedProperties: Map): void { + if (changedProperties.has("param") && this.param) { + this.subscribeToQueryParams(); + } + super.update(changedProperties); + } + + getSelectedLabels(): Label[] { + return this.labels.filter( l => this.isSelected(this.paramVal(l))); + } + + render(): TemplateResult { + return html` + ${ this.getSelectedLabels().map( label => html` +
        + ${label.name} + this.unSelect(label.name)}>× +
        + `)} + `; + } +} + +@customElement("dodona-single-search-token") +export class SingleSearchToken extends SearchToken { + @property({ state: true }) + selected = ""; + + unSelect(): void { + dodona.search_query.query_params.updateParam(this.param, undefined); + } + + isSelected(label: string): boolean { + return this.selected === label; + } + + subscribeToQueryParams(): void { + this.selected = dodona.search_query.query_params.params.get(this.param); + dodona.search_query.query_params.subscribeByKey(this.param, (k, o, n) => this.selected = n || ""); + } +} + +@customElement("dodona-multi-search-token") +export class MultiSearchToken extends SearchToken { + @property({ state: true }) + selected: string[] = []; + + unSelect(label: string): void { + dodona.search_query.array_query_params.updateParam(this.param, this.selected.filter(s => s !== label)); + } + + isSelected(label: string): boolean { + return this.selected.includes(label); + } + + subscribeToQueryParams(): void { + this.selected = dodona.search_query.array_query_params.params.get(this.param) || []; + dodona.search_query.array_query_params.subscribeByKey(this.param, (k, o, n) => { + this.selected = n || []; + }); + } +} + +@customElement("dodona-search-tokens") +export class SearchTokens extends LitElement { + @property( { type: Array }) + filterCollections: Record string, paramVal: (l: Label) => string, param: string }>; + + // don't use shadow dom + createRenderRoot(): Element { + return this; + } + + render(): TemplateResult { + if (!this.filterCollections) { + return html``; + } + + return html` + ${Object.values(this.filterCollections).map(c => c.multi ? html` + + + ` : html` + + + `)} + `; + } +} + diff --git a/app/assets/stylesheets/components/tokenfield.css.scss b/app/assets/stylesheets/components/tokenfield.css.scss index 217d3b5b51..26551ff705 100644 --- a/app/assets/stylesheets/components/tokenfield.css.scss +++ b/app/assets/stylesheets/components/tokenfield.css.scss @@ -5,118 +5,10 @@ */ @use "sass:math"; -.tokenfield { - height: auto; - min-height: 34px; - padding-bottom: 0px; - z-index: 1; -} -.tokenfield.focus { - border-color: #66afe9; - outline: 0; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), - 0 0 8px rgba(102, 175, 233, 0.6); -} -.tokenfield .token-input { - background: none; - width: 60px; - min-width: 60px; - border: 0; - height: 20px; - padding: 0; - margin-bottom: 6px; - box-shadow: none; -} -.tokenfield .token-input:focus { - border-color: transparent; - outline: 0; - box-shadow: none; -} -.tokenfield.disabled { - cursor: not-allowed; - background-color: #eeeeee; -} -.tokenfield.disabled .token-input { - cursor: not-allowed; -} -.tokenfield.disabled .token:hover { - cursor: not-allowed; - border-color: #d9d9d9; -} -.tokenfield.disabled .token:hover .close { - cursor: not-allowed; - opacity: 0.2; - filter: alpha(opacity=20); -} -.has-warning .tokenfield.focus { - border-color: #66512c; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; -} -.has-error .tokenfield.focus { - border-color: #843534; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; -} -.has-success .tokenfield.focus { - border-color: #2b542c; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; -} -.tokenfield.form-control-sm, -.input-group-sm .tokenfield { - min-height: 30px; - padding-bottom: 0px; -} -.input-group-sm .token, -.tokenfield.form-control-sm .token { - height: 20px; - margin-bottom: 4px; -} -.input-group-sm .token-input, -.tokenfield.form-control-sm .token-input { - height: 18px; - margin-bottom: 5px; -} -.tokenfield.form-control-lg, -.input-group-lg .tokenfield { - height: auto; - min-height: 45px; - padding-bottom: 4px; -} -.input-group-lg .token, -.tokenfield.form-control-lg .token { - height: 25px; -} -.input-group-lg .token-label, -.tokenfield.form-control-lg .token-label { - line-height: 23px; -} -.input-group-lg .token .close, -.tokenfield.form-control-lg .token .close { - line-height: 1.3em; -} -.input-group-lg .token-input, -.tokenfield.form-control-lg .token-input { - height: 23px; - line-height: 23px; - margin-bottom: 6px; - vertical-align: top; -} -.tokenfield.rtl { - direction: rtl; - text-align: right; -} -.tokenfield.rtl .token { - margin: -1px 0 5px 5px; -} -.tokenfield.rtl .token .token-label { - padding-left: 0px; - padding-right: 4px; -} - -.tokenfield .token { - margin-bottom: 8px; - padding-right: 8px; -} .token { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.3846153846; $token-height: 32px; display: inline-flex; align-items: center; diff --git a/app/javascript/packs/application_pack.js b/app/javascript/packs/application_pack.js index dfd83dcae7..557d4e476c 100644 --- a/app/javascript/packs/application_pack.js +++ b/app/javascript/packs/application_pack.js @@ -31,6 +31,7 @@ import "polyfills.js"; import "components/sort_button.ts"; import "components/search_actions.ts"; import "components/search_field.ts"; +import "components/search_token.ts"; import { Drawer } from "drawer"; import { Toast } from "toast"; diff --git a/app/views/layouts/_searchbar.html.erb b/app/views/layouts/_searchbar.html.erb index 7778ce364c..c92442bf5f 100644 --- a/app/views/layouts/_searchbar.html.erb +++ b/app/views/layouts/_searchbar.html.erb @@ -2,11 +2,11 @@ <%= javascript_include_tag 'index' %> <% end %>
        +
        - - - + + ">
        @@ -14,14 +14,6 @@
        <% if local_assigns[:actions]&.any? %> - - - - - - - - <% end %>
        @@ -188,11 +180,14 @@ ); dodona.search_query.setRefreshElement("<%= local_assigns.fetch :refresh_element, "" %>"); - const searchField = document.createElement("dodona-search-field"); - searchField.filterCollections = filterCollections; - searchField.eager = <%= local_assigns.fetch :eager, false %>; - searchField.placeholder = '<%#= t("layout.search.search") %>'; + const searchFields = Array.from(document.getElementsByTagName("dodona-search-field")); + searchFields.forEach( searchField => { + searchField.filterCollections = filterCollections; + searchField.eager = <%= local_assigns.fetch :eager, false %>; + searchField.placeholder = '<%= t("layout.search.search") %>'; + }); - document.getElementById("test-long-id-x12d59f4").appendChild(searchField); + const searchTokens = Array.from(document.getElementsByTagName("dodona-search-tokens")); + searchTokens.forEach(st => st.filterCollections = filterCollections); }); From fb644dac5b0ae2e0fb59ecdf2ccd965d4a30e9cf Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Fri, 1 Apr 2022 16:57:10 +0200 Subject: [PATCH 13/73] Clear filter after selecting token --- app/assets/javascripts/components/search_field.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/assets/javascripts/components/search_field.ts b/app/assets/javascripts/components/search_field.ts index bb07f54ce7..bab25821e1 100644 --- a/app/assets/javascripts/components/search_field.ts +++ b/app/assets/javascripts/components/search_field.ts @@ -68,6 +68,7 @@ export class SingleSearchFieldSuggestion extends SearchFieldSuggestion { select(label: string): void { dodona.search_query.query_params.updateParam(this.param, label); + dodona.search_query.query_params.updateParam("filter", undefined); } isSelected(label: string): boolean { @@ -87,6 +88,7 @@ export class MultiSearchFieldSuggestion extends SearchFieldSuggestion { select(label: string): void { dodona.search_query.array_query_params.updateParam(this.param, [...this.selected, label]); + dodona.search_query.query_params.updateParam("filter", undefined); } isSelected(label: string): boolean { From 19e049a0a7161c0589bb2f1cac59362630762ed2 Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Mon, 4 Apr 2022 16:05:34 +0200 Subject: [PATCH 14/73] Create filter icon component --- .../javascripts/components/filter_button.ts | 73 +++++++++++++++++++ .../javascripts/components/search_token.ts | 2 +- app/assets/javascripts/index.js | 2 +- app/assets/javascripts/search.ts | 1 - .../components/tokenfield.css.scss | 3 - app/javascript/packs/application_pack.js | 1 + .../_read_states_table.html.erb | 24 +----- .../annotations/_questions_table.html.erb | 15 +--- app/views/submissions/_submission.html.erb | 16 +--- .../submissions/_submissions_table.html.erb | 7 -- 10 files changed, 82 insertions(+), 62 deletions(-) create mode 100644 app/assets/javascripts/components/filter_button.ts diff --git a/app/assets/javascripts/components/filter_button.ts b/app/assets/javascripts/components/filter_button.ts new file mode 100644 index 0000000000..00f8521c83 --- /dev/null +++ b/app/assets/javascripts/components/filter_button.ts @@ -0,0 +1,73 @@ +import { customElement, property } from "lit/decorators.js"; +import { html, LitElement, TemplateResult } from "lit"; +import { Tooltip } from "bootstrap"; +import { ref } from "lit/directives/ref.js"; + +@customElement("dodona-filter-button") +export class FilterButton extends LitElement { + @property({ type: String }) + param: string; + @property({ type: String }) + value: string; + @property({ type: Boolean }) + multi = false; + + addFilter(): void { + if (this.multi) { + const selected = new Set(dodona.search_query.array_query_params.params.get(this.param)); + selected.add(this.value); + dodona.search_query.array_query_params.updateParam(this.param, Array.from(selected)); + } else { + dodona.search_query.query_params.updateParam(this.param, this.value); + } + } + + render(): TemplateResult { + return html` this.addFilter()}>`; + } +} + +@customElement("dodona-filter-icon") +export class FilterIcon extends LitElement { + @property({ type: String }) + value: string; + @property({ type: String }) + title: string; + + element: Element; + + // don't use shadow dom + createRenderRoot(): Element { + return this; + } + + initialiseTooltip(e: Element): void { + if (e) { + this.element = e; + const tooltip = Tooltip.getInstance(this.element); + if (!tooltip) { + new Tooltip(this.element); + } + } + } + + disconnectedCallback(): void { + const tooltip = Tooltip.getInstance(this.element); + tooltip.hide(); + super.disconnectedCallback(); + } + + render(): TemplateResult { + return html` + + this.initialiseTooltip(r))} + > + + + `; + } +} diff --git a/app/assets/javascripts/components/search_token.ts b/app/assets/javascripts/components/search_token.ts index 7decab6cda..35d1eb71d5 100644 --- a/app/assets/javascripts/components/search_token.ts +++ b/app/assets/javascripts/components/search_token.ts @@ -37,7 +37,7 @@ export abstract class SearchToken extends LitElement { ${ this.getSelectedLabels().map( label => html`
        ${label.name} - this.unSelect(label.name)}>× + this.unSelect(this.paramVal(label))}>×
        `)} `; diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js index 29108ca874..df1829afe2 100644 --- a/app/assets/javascripts/index.js +++ b/app/assets/javascripts/index.js @@ -38,7 +38,7 @@ function initFilterIndex(_baseUrl, eager, actions, doInitFilter, filterCollectio // initTokens(); if (doInitFilter) { - initFilter(updateAddressBar, _baseUrl, eager, filterCollections); + // initFilter(updateAddressBar, _baseUrl, eager, filterCollections); } if (actions) { diff --git a/app/assets/javascripts/search.ts b/app/assets/javascripts/search.ts index 78e3f21a02..7d9d14f9dd 100644 --- a/app/assets/javascripts/search.ts +++ b/app/assets/javascripts/search.ts @@ -103,7 +103,6 @@ export class SearchQuery { } refresh(value: string): void { - console.log(value); if (this.periodicReload) { if (value === "true") { this.periodicReload.start(); diff --git a/app/assets/stylesheets/components/tokenfield.css.scss b/app/assets/stylesheets/components/tokenfield.css.scss index 26551ff705..6a3da38bc3 100644 --- a/app/assets/stylesheets/components/tokenfield.css.scss +++ b/app/assets/stylesheets/components/tokenfield.css.scss @@ -22,9 +22,6 @@ white-space: nowrap; cursor: default; } -.token + .token { - margin-left: 8px; -} .token .close { margin-left: 8px; color: $text-on-bg-color; diff --git a/app/javascript/packs/application_pack.js b/app/javascript/packs/application_pack.js index 557d4e476c..f5b7e4475b 100644 --- a/app/javascript/packs/application_pack.js +++ b/app/javascript/packs/application_pack.js @@ -32,6 +32,7 @@ import "components/sort_button.ts"; import "components/search_actions.ts"; import "components/search_field.ts"; import "components/search_token.ts"; +import "components/filter_button.ts"; import { Drawer } from "drawer"; import { Toast } from "toast"; diff --git a/app/views/activity_read_states/_read_states_table.html.erb b/app/views/activity_read_states/_read_states_table.html.erb index b163bba9d7..a7f25d8508 100644 --- a/app/views/activity_read_states/_read_states_table.html.erb +++ b/app/views/activity_read_states/_read_states_table.html.erb @@ -18,13 +18,7 @@ <% if @user.nil? && (current_user.admin? || current_user.administrating_courses.any?) %> <% unless @activity.present? %> - - + <% end %> <% if read_state.course.nil? %> <%= read_state.user.full_name %> @@ -35,13 +29,7 @@ <% end %> <% unless @activity.present? %> - - + <% if read_state.course.nil? %> <%= link_to read_state.activity.name, activity_path(read_state.activity) %> <% else %> @@ -65,11 +53,3 @@ %>
        <%= page_navigation_links read_states, true, 'activity_read_states', params %>
        - - diff --git a/app/views/annotations/_questions_table.html.erb b/app/views/annotations/_questions_table.html.erb index 1f4bfa4250..9a5d9d59d5 100644 --- a/app/views/annotations/_questions_table.html.erb +++ b/app/views/annotations/_questions_table.html.erb @@ -16,11 +16,7 @@ <% questions.each do |question| %> - + <%= link_to question.user.full_name, course_member_path(question.submission.course, question.user), title: question.user.full_name, class: "ellipsis-overflow" %> <% unless @course.present? %>
        @@ -31,11 +27,7 @@ <% end %> - + <%= link_to question.submission.exercise.name, course_exercise_path(question.submission.course, question.submission.exercise) %>
        <%= question.question_text %> @@ -85,9 +77,6 @@ diff --git a/app/views/submissions/_submission.html.erb b/app/views/submissions/_submission.html.erb index 52376dc8a9..391b6a5b0b 100644 --- a/app/views/submissions/_submission.html.erb +++ b/app/views/submissions/_submission.html.erb @@ -14,13 +14,7 @@ <% if user.nil? && (current_user.admin? || current_user.administrating_courses.any?) %> - - + <% if submission.course.nil? %> <%= submission.user.full_name %> <% else %> @@ -30,13 +24,7 @@ <% end %> <% if !exercise %> - - + <% if submission.course.nil? %> <%= link_to submission.exercise.name, activity_path(submission.exercise) %> <% else %> diff --git a/app/views/submissions/_submissions_table.html.erb b/app/views/submissions/_submissions_table.html.erb index 6b12147e97..45b1d78128 100644 --- a/app/views/submissions/_submissions_table.html.erb +++ b/app/views/submissions/_submissions_table.html.erb @@ -29,10 +29,3 @@ %>
        <%= page_navigation_links submissions, true, 'submissions', params %>
        - From aee51742b39876e9e454507e0ddb3714b3b6cc78 Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Tue, 5 Apr 2022 11:41:49 +0200 Subject: [PATCH 15/73] Replace tokens by filter buttons --- .../javascripts/components/search_token.ts | 4 ++-- app/views/activities/_activities_table.html.erb | 15 +++++++-------- app/views/activities/_labels.html.erb | 17 ++++++++++++----- 3 files changed, 21 insertions(+), 15 deletions(-) diff --git a/app/assets/javascripts/components/search_token.ts b/app/assets/javascripts/components/search_token.ts index 35d1eb71d5..4727be1371 100644 --- a/app/assets/javascripts/components/search_token.ts +++ b/app/assets/javascripts/components/search_token.ts @@ -29,7 +29,7 @@ export abstract class SearchToken extends LitElement { } getSelectedLabels(): Label[] { - return this.labels.filter( l => this.isSelected(this.paramVal(l))); + return this.labels.filter( l => this.isSelected(this.paramVal(l).toString())); } render(): TemplateResult { @@ -37,7 +37,7 @@ export abstract class SearchToken extends LitElement { ${ this.getSelectedLabels().map( label => html`
        ${label.name} - this.unSelect(this.paramVal(label))}>× + this.unSelect(this.paramVal(label).toString())}>×
        `)} `; diff --git a/app/views/activities/_activities_table.html.erb b/app/views/activities/_activities_table.html.erb index 4b9643fb7f..fa2dccf1d4 100644 --- a/app/views/activities/_activities_table.html.erb +++ b/app/views/activities/_activities_table.html.erb @@ -67,15 +67,19 @@ <% if policy(activity).info? %>
        - <%= activity.repository.name %>: <%= activity.path %> - + + + <%= activity.repository.name %>: <%= activity.path %> + + +
        <% end %>
        - <%= raw activity.description_languages.map {|language| "#{language}"}.join(", ") %> + <%= raw activity.description_languages.map {|language| "#{language} "}.join(", ") %>
        @@ -150,8 +154,3 @@ <% if activities.try(:total_pages) %>
        <%= page_navigation_links activities, true, "activities" %>
        <% end %> - diff --git a/app/views/activities/_labels.html.erb b/app/views/activities/_labels.html.erb index ff2c3933f7..ad798d3212 100644 --- a/app/views/activities/_labels.html.erb +++ b/app/views/activities/_labels.html.erb @@ -1,4 +1,8 @@ -" data-type="programming_languages" data-name="<%= activity.programming_language&.name %>"><%= activity.programming_language&.name || "" %> +<% if activity.programming_language %> + + <%= activity.programming_language&.name%> + +<% end %>
        <%# We can't just use activity.labels because a search by labels might restrict the loaded labels %> <% labels = Label.includes(:activities).where(activities: {id: activity.id}).to_a %> @@ -6,13 +10,16 @@ <% if labels.count > 5 %> "> <% labels.first(5).each do |label| %> - <%= label.name %>, + + <%= label.name %>, + <% end %> ... <% elsif labels.any? %> - <%= labels.first.name %>, - <% labels.drop(1).first(4).each do |label| %> - <%= label.name %>, + <% labels.each do |label| %> + + <%= label.name %>, + <% end %> <% end %> From 0750af6fca207bc51b32c933ae2825014066c232 Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Tue, 5 Apr 2022 13:49:03 +0200 Subject: [PATCH 16/73] Use clickable tokens on all relevant pages --- .../javascripts/components/filter_button.ts | 8 +++++++- app/assets/javascripts/series.js | 5 +---- app/assets/javascripts/util.js | 17 ----------------- .../stylesheets/components/tokenfield.css.scss | 4 ---- app/javascript/packs/activities.js | 3 --- app/javascript/packs/questions.js | 2 -- app/views/activities/_activities_table.html.erb | 9 ++------- app/views/activities/_labels.html.erb | 6 +++--- .../_series_activities_add_table.html.erb | 6 ++++-- app/views/annotations/_questions_table.html.erb | 11 +++++------ 10 files changed, 22 insertions(+), 49 deletions(-) delete mode 100644 app/javascript/packs/activities.js diff --git a/app/assets/javascripts/components/filter_button.ts b/app/assets/javascripts/components/filter_button.ts index 00f8521c83..a43cf535f9 100644 --- a/app/assets/javascripts/components/filter_button.ts +++ b/app/assets/javascripts/components/filter_button.ts @@ -1,5 +1,5 @@ import { customElement, property } from "lit/decorators.js"; -import { html, LitElement, TemplateResult } from "lit"; +import { css, html, LitElement, TemplateResult } from "lit"; import { Tooltip } from "bootstrap"; import { ref } from "lit/directives/ref.js"; @@ -12,6 +12,12 @@ export class FilterButton extends LitElement { @property({ type: Boolean }) multi = false; + static styles = css` + :host { + cursor: pointer; + } + `; + addFilter(): void { if (this.multi) { const selected = new Set(dodona.search_query.array_query_params.params.get(this.param)); diff --git a/app/assets/javascripts/series.js b/app/assets/javascripts/series.js index e3a6f60880..517e2fb5a9 100644 --- a/app/assets/javascripts/series.js +++ b/app/assets/javascripts/series.js @@ -3,7 +3,6 @@ import { Dutch } from "flatpickr/dist/l10n/nl.js"; import { Toast } from "./toast"; import { initDragAndDrop } from "./drag_and_drop.js"; -import { initTokenClickables } from "./util.js"; import { ViolinGraph } from "visualisations/violin.ts"; import { StackedStatusGraph } from "visualisations/stacked_status.ts"; @@ -23,14 +22,12 @@ const DRAG_AND_DROP_ARGS = { function initSeriesEdit() { function init() { - initAddButtons(); - initTokenClickables(); + initAddButtons() initRemoveButtons(); initDragAndDrop(DRAG_AND_DROP_ARGS); // export function dodona.seriesEditActivitiesLoaded = () => { initAddButtons(); - initTokenClickables(); }; } diff --git a/app/assets/javascripts/util.js b/app/assets/javascripts/util.js index 2012df3d47..661079a2d8 100644 --- a/app/assets/javascripts/util.js +++ b/app/assets/javascripts/util.js @@ -116,22 +116,6 @@ function fetch(url, options = {}) { return window.fetch(url, options); } -/** - * Initializes any element with the clickable-token class to use its data for searching - */ -function initTokenClickables() { - const $clickableTokens = $(".clickable-token"); - $clickableTokens.off("click"); - $clickableTokens.on("click", function () { - const $htmlElement = $(this); - const type = $htmlElement.data("type"); - const name = $htmlElement.data("name"); - if (dodona.addTokenToSearch) { - dodona.addTokenToSearch(type, name); - } - }); -} - /** * Make an element invisible by applying "visibility: hidden". * @@ -172,7 +156,6 @@ export { initCSRF, tooltip, initTooltips, - initTokenClickables, makeInvisible, makeVisible, setDocumentTitle diff --git a/app/assets/stylesheets/components/tokenfield.css.scss b/app/assets/stylesheets/components/tokenfield.css.scss index 6a3da38bc3..5c3f955585 100644 --- a/app/assets/stylesheets/components/tokenfield.css.scss +++ b/app/assets/stylesheets/components/tokenfield.css.scss @@ -117,7 +117,3 @@ .tokenfield.form-control { background-color: transparent; } - -.clickable-token { - cursor: pointer; -} diff --git a/app/javascript/packs/activities.js b/app/javascript/packs/activities.js deleted file mode 100644 index 2444c27800..0000000000 --- a/app/javascript/packs/activities.js +++ /dev/null @@ -1,3 +0,0 @@ -import { initTokenClickables } from "util.js"; - -window.dodona.initTokenClickables = initTokenClickables; diff --git a/app/javascript/packs/questions.js b/app/javascript/packs/questions.js index fcc6eec8f2..088cd7474f 100644 --- a/app/javascript/packs/questions.js +++ b/app/javascript/packs/questions.js @@ -1,5 +1,3 @@ -import { initTokenClickables } from "util.js"; import { QuestionTable } from "question_table"; -window.dodona.initTokenClickables = initTokenClickables; window.dodona.questionTable = QuestionTable; diff --git a/app/views/activities/_activities_table.html.erb b/app/views/activities/_activities_table.html.erb index fa2dccf1d4..e4601c6356 100644 --- a/app/views/activities/_activities_table.html.erb +++ b/app/views/activities/_activities_table.html.erb @@ -1,6 +1,3 @@ -<% content_for :javascripts do %> - <%= javascript_include_tag 'activities' %> -<% end %> <% get_activity_path ||= method(:activity_path) %> <% if defined? user user = user || current_user @@ -67,10 +64,8 @@ <% if policy(activity).info? %>
        - - + <%= activity.repository.name %>: <%= activity.path %> -
        @@ -79,7 +74,7 @@
        - <%= raw activity.description_languages.map {|language| "#{language} "}.join(", ") %> + <%= raw activity.description_languages.map {|language| "#{language} "}.join(", ") %>
        diff --git a/app/views/activities/_labels.html.erb b/app/views/activities/_labels.html.erb index ad798d3212..917290d014 100644 --- a/app/views/activities/_labels.html.erb +++ b/app/views/activities/_labels.html.erb @@ -1,6 +1,6 @@ <% if activity.programming_language %> - <%= activity.programming_language&.name%> + <%= activity.programming_language&.name%> <% end %>
        @@ -11,14 +11,14 @@ "> <% labels.first(5).each do |label| %> - <%= label.name %>, + <%= label.name %>, <% end %> ... <% elsif labels.any? %> <% labels.each do |label| %> - <%= label.name %>, + <%= label.name %>, <% end %> <% end %> diff --git a/app/views/activities/_series_activities_add_table.html.erb b/app/views/activities/_series_activities_add_table.html.erb index c0765a484a..9a24242b0c 100644 --- a/app/views/activities/_series_activities_add_table.html.erb +++ b/app/views/activities/_series_activities_add_table.html.erb @@ -33,13 +33,15 @@
        - <%= activity.repository.name %>: <%= activity.path %> + + <%= activity.repository.name %>: <%= activity.path %> +
        - <%= raw activity.description_languages.map {|language| "#{language}"}.join(", ") %> + <%= raw activity.description_languages.map {|language| "#{language} "}.join(", ") %>
        diff --git a/app/views/annotations/_questions_table.html.erb b/app/views/annotations/_questions_table.html.erb index 9a5d9d59d5..b124827a27 100644 --- a/app/views/annotations/_questions_table.html.erb +++ b/app/views/annotations/_questions_table.html.erb @@ -20,9 +20,9 @@ <%= link_to question.user.full_name, course_member_path(question.submission.course, question.user), title: question.user.full_name, class: "ellipsis-overflow" %> <% unless @course.present? %>
        - - <%= question.submission.course.name %> - + + <%= question.submission.course.name %> +
        <% end %> @@ -35,9 +35,9 @@ <% status = Question.human_enum_name(:question_state, question.question_state) %> - + <%= t "courses.questions.last_edited_by.#{question.question_state}", who: question.last_updated_by.full_name %> - + @@ -76,7 +76,6 @@ <% end %> From 29512bcc5909e91c4c819deecb0d63cf4249ffd5 Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Tue, 5 Apr 2022 15:56:56 +0200 Subject: [PATCH 17/73] Fix course list page --- app/assets/javascripts/course.js | 14 +++++--------- app/views/courses/index.html.erb | 8 ++++---- app/views/layouts/_searchbar.html.erb | 24 ++++++++++++------------ 3 files changed, 21 insertions(+), 25 deletions(-) diff --git a/app/assets/javascripts/course.js b/app/assets/javascripts/course.js index 63c678eb65..d5188dab8c 100644 --- a/app/assets/javascripts/course.js +++ b/app/assets/javascripts/course.js @@ -293,21 +293,17 @@ function initCourseNew() { } function initCoursesListing(firstTab) { - let baseUrl = ""; initCourseTabs(firstTab); function initCourseTabs(firstTab) { - const courseTabs = document.getElementById("course-tabs"); - baseUrl = courseTabs.dataset.baseurl; - document.querySelectorAll("#course-tabs li a").forEach(tab => { tab.addEventListener("click", () => selectTab(tab)); }); // If the url hash is a valid tab, use that, otherwise use the given tab - const hash = window.location.hash; - const tab = document.querySelector(`a[href='${hash}']`) ?? - document.querySelector(`a[href='#${firstTab}']`); + const hash = dodona.search_query.query_params.params.get("tab"); + const tab = document.querySelector(`a[data-tab='${hash}']`) ?? + document.querySelector(`a[data-tab='${firstTab}']`); selectTab(tab); } @@ -315,14 +311,14 @@ function initCoursesListing(firstTab) { // If the current tab is already loaded or if it's blank, do nothing if (!tab || tab.classList.contains("active")) return; - const state = tab.getAttribute("href").substr(1); + const state = tab.getAttribute("data-tab"); loadCourses(state); document.querySelector("#course-tabs a.active")?.classList?.remove("active"); tab.classList.add("active"); } function loadCourses(tab) { - setBaseUrl(`${baseUrl}?tab=${tab}`); + dodona.search_query.query_params.updateParam("tab", tab); } } diff --git a/app/views/courses/index.html.erb b/app/views/courses/index.html.erb index 4a8e8b1a14..34e86afd88 100644 --- a/app/views/courses/index.html.erb +++ b/app/views/courses/index.html.erb @@ -20,12 +20,12 @@
        diff --git a/app/views/layouts/_searchbar.html.erb b/app/views/layouts/_searchbar.html.erb index c92442bf5f..6b6c6f4572 100644 --- a/app/views/layouts/_searchbar.html.erb +++ b/app/views/layouts/_searchbar.html.erb @@ -25,7 +25,7 @@ <% if local_assigns.fetch :labels, false %> filterCollections["labels"] = { param: "labels", - paramVal: function(l) { return l.name; }, + paramVal: function(l) { return l.name.toString(); }, multi: true, data: <%= raw render template: 'labels/index', formats: :json %>, color: function (label) { @@ -36,7 +36,7 @@ <% if local_assigns.fetch :programming_languages, false %> filterCollections["programming_languages"] = { param: "programming_language", - paramVal: function(p) { return p.name; }, + paramVal: function(p) { return p.name.toString(); }, multi: false, data: <%= raw render template: 'programming_languages/index', formats: :json %>, color: function () { @@ -47,7 +47,7 @@ <% if local_assigns.fetch :repositories, false %> filterCollections["repositories"] = { param: "repository_id", - paramVal: function(r) { return r.id; }, + paramVal: function(r) { return r.id.toString(); }, multi: false, data: <%= raw render template: 'repositories/index', formats: :json %>, color: function () { @@ -58,7 +58,7 @@ <% if local_assigns.fetch(:institutions, []).length > 1 %> filterCollections["institutions"] = { param: "institution_id", - paramVal: function(i) { return i.id; }, + paramVal: function(i) { return i.id.toString(); }, multi: false, data: <%= raw local_assigns.fetch(:institutions, []).map{|i| {id: i.id, name: i.name}}.to_json %>, color: function () { @@ -70,7 +70,7 @@ filterCollections["course_labels"] = { param: "course_labels", paramVal: function (cl) { - return cl.name; + return cl.name.toString(); }, multi: true, data: <%= raw local_assigns.fetch(:course_labels, []).map{|cl| {id: cl.id, name: cl.name}}.to_json %>, @@ -83,7 +83,7 @@ filterCollections["statuses"] = { param: "status", paramVal: function (s) { - return s.id; + return s.id.toString(); }, multi: false, data: <%= raw local_assigns.fetch(:statuses, []).map{|s| {id: s, name: Submission.human_enum_name(:status, s)}}.to_json %>, @@ -96,7 +96,7 @@ filterCollections["question_states"] = { param: "question_state", paramVal: function (s) { - return s.id; + return s.id.toString(); }, multi: false, data: <%= raw local_assigns.fetch(:question_states, []).map{|s| {id: s, name: Question.human_enum_name(:question_state, s)}}.to_json %>, @@ -109,7 +109,7 @@ filterCollections["event_types"] = { param: "type", paramVal: function (s) { - return s.id; + return s.id.toString(); }, multi: false, data: <%= raw local_assigns.fetch(:event_types, []).map{|s| {id: s, name: Event.human_enum_name(:event_type, s)}}.to_json %>, @@ -122,7 +122,7 @@ filterCollections["activity_types"] = { param: "type", paramVal: function (s) { - return s.id; + return s.id.toString(); }, multi: false, data: <%= raw local_assigns.fetch(:activity_types, []).map{|s| {id: s.name, name: s.model_name.human}}.to_json %>, @@ -135,7 +135,7 @@ filterCollections["description_languages"] = { param: "description_languages", paramVal: function (lang) { - return lang.id; + return lang.id.toString(); }, multi: true, data: <%= raw local_assigns.fetch(:description_languages, []).map{|l| {id: l, name: t("js.#{l}")}}.to_json %>, @@ -148,7 +148,7 @@ filterCollections["judges"] = { param: "judge_id", paramVal: function(judge) { - return judge.id; + return judge.id.toString(); }, multi: false, data: <%= raw local_assigns.fetch(:judges, []).map{|judge| {id: judge.id, name: "#{judge.name}-judge"}}.to_json %>, @@ -161,7 +161,7 @@ filterCollections["courses"] = { param: "course_id", paramVal: function(course) { - return course.id; + return course.id.toString(); }, multi: false, data: <%= raw local_assigns.fetch(:courses, []).map{|course| {id: course.id, name: course.name}}.to_json %>, From 78f212c03c81391f761d6a1589fccf46b49f2cb6 Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Thu, 7 Apr 2022 09:51:10 +0200 Subject: [PATCH 18/73] Let course membership tabs use query params --- app/assets/javascripts/course.js | 12 +++++------- app/views/course_members/index.html.erb | 6 +++--- app/views/courses/index.html.erb | 8 ++++---- 3 files changed, 12 insertions(+), 14 deletions(-) diff --git a/app/assets/javascripts/course.js b/app/assets/javascripts/course.js index d5188dab8c..15415a1134 100644 --- a/app/assets/javascripts/course.js +++ b/app/assets/javascripts/course.js @@ -1,12 +1,10 @@ -import { setBaseUrl } from "./index.js"; import { initDragAndDrop } from "./drag_and_drop.js"; import { fetch, getURLParameter } from "./util.js"; import { ScrollSpy } from "./scrollspy"; function loadUsers(_baseUrl, _status) { - const baseUrl = _baseUrl || $("#user-tabs").data("baseurl"); const status = _status || getURLParameter("status"); - setBaseUrl(baseUrl + "?status=" + status); + dodona.search_query.query_params.updateParam("status", status); } function initCourseMembers() { @@ -23,7 +21,7 @@ function initCourseMembers() { // Select tab and load users const selectTab = $tab => { const $kebab = $("#kebab-menu"); - const status = $tab.attr("href").substr(1); + const status = $tab.attr("data-status"); const $kebabItems = $kebab.find("li a.action"); let anyShown = false; for (const item of $kebabItems) { @@ -55,11 +53,11 @@ function initCourseMembers() { }); // Determine which tab to show first - const hash = window.location.hash; - let $tab = $("a[href='" + hash + "']"); + const status = dodona.search_query.query_params.params.get("status"); + let $tab = $("a[data-status='" + status + "']"); if ($tab.length === 0) { // Default to enrolled (subscribed) - $tab = $("a[href='#enrolled']"); + $tab = $("a[data-status='enrolled']"); } selectTab($tab); } diff --git a/app/views/course_members/index.html.erb b/app/views/course_members/index.html.erb index 81a1479823..06ddf55cb0 100644 --- a/app/views/course_members/index.html.erb +++ b/app/views/course_members/index.html.erb @@ -11,13 +11,13 @@
        <% content_for :modal do %> diff --git a/app/views/courses/index.html.erb b/app/views/courses/index.html.erb index 34e86afd88..0bedffc89a 100644 --- a/app/views/courses/index.html.erb +++ b/app/views/courses/index.html.erb @@ -20,12 +20,12 @@
        From d140facce9b7504e1f587bb436e70c92ccf21271 Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Thu, 7 Apr 2022 10:31:44 +0200 Subject: [PATCH 19/73] Fix toggled dropdown --- app/assets/javascripts/components/search_actions.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/javascripts/components/search_actions.ts b/app/assets/javascripts/components/search_actions.ts index de6d7375a3..2d856ea831 100644 --- a/app/assets/javascripts/components/search_actions.ts +++ b/app/assets/javascripts/components/search_actions.ts @@ -150,7 +150,7 @@ export class SearchActions extends LitElement {
      • this.performAction(action)} > From 04356beb21938c15364eced9a49bc877abbf3d27 Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Thu, 7 Apr 2022 10:54:04 +0200 Subject: [PATCH 20/73] Allow setting of baseUrl --- app/assets/javascripts/index.js | 43 ---------------------- app/assets/javascripts/search.ts | 13 +++++-- app/javascript/packs/index.js | 4 +- app/views/evaluations/refresh_users.js.erb | 2 +- app/views/layouts/_searchbar.html.erb | 17 +++++---- 5 files changed, 21 insertions(+), 58 deletions(-) diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js index df1829afe2..5651abcaaa 100644 --- a/app/assets/javascripts/index.js +++ b/app/assets/javascripts/index.js @@ -21,32 +21,11 @@ const FILTER_DATA = "filter"; const LABEL_UNIQUE_ATTR = "label-id"; const RELOAD_SECONDS = 2; -window.dodona.index = {}; -window.dodona.index.baseUrl = window.location.href; -window.dodona.index.periodicReload = null; -window.dodona.index.doSearch = () => { }; - -function setBaseUrl(_baseUrl) { - window.dodona.index.baseUrl = _baseUrl; - window.dodona.index.doSearch(); -} function initFilterIndex(_baseUrl, eager, actions, doInitFilter, filterCollections, refreshElement = null) { const updateAddressBar = !_baseUrl; - function init() { - // initTokens(); - - if (doInitFilter) { - // initFilter(updateAddressBar, _baseUrl, eager, filterCollections); - } - if (actions) { - // initActions(); - } - - // initRefresh(); - } function addParametersToUrl(baseUrl, _query, _filterCollections, _extraParams) { const filterCollections = _filterCollections || {}; @@ -418,27 +397,5 @@ function initFilterIndex(_baseUrl, eager, actions, doInitFilter, filterCollectio init(); } -function initFilterButtons() { - function init() { - const $filterButtons = $(FILTER_ICONS_CLASS); - $filterButtons.on("click", filter); - $filterButtons.tooltip(); // initialize the tooltips of the buttons - } - - function filter() { - const $element = $(this); - const $searchbar = $(QUERY_FILTER_ID); - $searchbar.typeahead("val", $element.data(FILTER_DATA)); // search for value requested by user - $(".tooltip").tooltip("hide"); // prevent tooltip from displaying when table is re-rendered - window.dodona.index.doSearch(); - } - - init(); -} - -function toggleIndexReload() { - window.dodona.index.periodicReload.toggle(); -} -export { initFilterButtons, initFilterIndex, setBaseUrl, toggleIndexReload }; diff --git a/app/assets/javascripts/search.ts b/app/assets/javascripts/search.ts index 7d9d14f9dd..5b20fde05c 100644 --- a/app/assets/javascripts/search.ts +++ b/app/assets/javascripts/search.ts @@ -42,6 +42,7 @@ export class QueryParameters { } export class SearchQuery { + updateAddressBar= true; baseUrl: string; refreshElement: string; periodicReload: InactiveTimeout; @@ -67,7 +68,8 @@ export class SearchQuery { } } - constructor(baseUrl?: string, refreshElement?: string) { + setBaseUrl(baseUrl?: string): void { + this.updateAddressBar = !baseUrl; const _url = baseUrl || window.location.href; const url = new URL(_url.replace(/%5B%5D/g, "[]"), window.location.origin); this.baseUrl = url.href; @@ -79,6 +81,10 @@ export class SearchQuery { this.query_params.updateParam(key, url.searchParams.get(key)); } } + } + + constructor(baseUrl?: string, refreshElement?: string) { + this.setBaseUrl(baseUrl); // subscribe relevant listeners const delay = createDelayer(); @@ -121,8 +127,9 @@ export class SearchQuery { const url = this.addParametersToUrl(); const localIndex = ++this.searchIndex; - // TODO CHECK REASON FOR if (updateAddressBar) - window.history.replaceState(null, "Dodona", url); + if (this.updateAddressBar) { + window.history.replaceState(null, "Dodona", url); + } document.getElementById("progress-filter").style.visibility = "visible"; fetch(updateURLParameter(url, "format", "js"), { headers: { diff --git a/app/javascript/packs/index.js b/app/javascript/packs/index.js index 083aa441bf..9f1025e652 100644 --- a/app/javascript/packs/index.js +++ b/app/javascript/packs/index.js @@ -1,5 +1,3 @@ -import { initFilterIndex, initFilterButtons, toggleIndexReload } from "index.js"; +import { toggleIndexReload } from "index.js"; -window.dodona.initFilterIndex = initFilterIndex; -window.dodona.initFilterButtons = initFilterButtons; window.dodona.toggleIndexReload = toggleIndexReload; diff --git a/app/views/evaluations/refresh_users.js.erb b/app/views/evaluations/refresh_users.js.erb index cb19105856..6077956808 100644 --- a/app/views/evaluations/refresh_users.js.erb +++ b/app/views/evaluations/refresh_users.js.erb @@ -1,3 +1,3 @@ -window.dodona.index.doSearch(); +window.dodona.search_query.search(); $('#users-count-wrapper').html("<%= t('evaluations.edit_users.users_selected_html', count: @evaluation.users.count) %>") $('#short-users-count-wrapper').text("<%= t('evaluations.edit_users.short_users_selected', count: @evaluation.users.count) %>") diff --git a/app/views/layouts/_searchbar.html.erb b/app/views/layouts/_searchbar.html.erb index 6b6c6f4572..e17377bce9 100644 --- a/app/views/layouts/_searchbar.html.erb +++ b/app/views/layouts/_searchbar.html.erb @@ -170,15 +170,16 @@ } }; <% end %> - dodona.initFilterIndex( - "<%= local_assigns.fetch :baseUrl, "" %>", - <%= local_assigns.fetch :eager, false %>, - <%= raw (local_assigns.fetch :actions, false).to_json %>, - <%= local_assigns.fetch :init_filter, true %>, - filterCollections, - "<%= local_assigns.fetch :refresh_element, "" %>" - ); + + + + + + + + dodona.search_query.setRefreshElement("<%= local_assigns.fetch :refresh_element, "" %>"); + dodona.search_query.setBaseUrl("<%= local_assigns.fetch :baseUrl, "" %>"); const searchFields = Array.from(document.getElementsByTagName("dodona-search-field")); searchFields.forEach( searchField => { From 142b5788f3a899838e3d653430f21f2f9d3ba662 Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Thu, 7 Apr 2022 15:12:14 +0200 Subject: [PATCH 21/73] Remove refactored index file --- app/assets/javascripts/index.js | 401 -------------------------- app/javascript/packs/index.js | 3 - app/views/evaluations/new.html.erb | 1 - app/views/layouts/_searchbar.html.erb | 11 - 4 files changed, 416 deletions(-) delete mode 100644 app/assets/javascripts/index.js delete mode 100644 app/javascript/packs/index.js diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js deleted file mode 100644 index 5651abcaaa..0000000000 --- a/app/assets/javascripts/index.js +++ /dev/null @@ -1,401 +0,0 @@ -/* globals Bloodhound */ -import { Toast } from "./toast"; -import { - delay, - getArrayURLParameter, - getURLParameter, - updateArrayURLParameter, - updateURLParameter, - fetch -} from "./util.js"; -import { InactiveTimeout } from "./auto_reload"; - -const FILTER_PARAM = "filter"; -const TOKENS_FILTER_ID = "#filter-query"; -const QUERY_FILTER_ID = "#filter-query-tokenfield"; - -/* constants for element-keys that are used when filtering */ -const FILTER_ICONS_CLASS = ".filter-icon"; -const FILTER_DATA = "filter"; - -const LABEL_UNIQUE_ATTR = "label-id"; -const RELOAD_SECONDS = 2; - - -function initFilterIndex(_baseUrl, eager, actions, doInitFilter, filterCollections, refreshElement = null) { - const updateAddressBar = !_baseUrl; - - - - function addParametersToUrl(baseUrl, _query, _filterCollections, _extraParams) { - const filterCollections = _filterCollections || {}; - const query = _query || $(QUERY_FILTER_ID).val(); - const extraParams = _extraParams || {}; - - let url = updateURLParameter(baseUrl || window.location.href, FILTER_PARAM, query); - - const tokens = $(TOKENS_FILTER_ID).tokenfield("getTokens"); - Object.entries(filterCollections).forEach(([type, value]) => { - if (value.multi) { - url = updateArrayURLParameter( - url, - value.param, - tokens.filter(el => el.type === type).map(e => value.paramVal(e)) - ); - } else { - const elem = tokens.filter(e => e.type === type)[0]; - url = updateURLParameter(url, value.param, elem ? value.paramVal(elem) : ""); - } - }); - Object.entries(extraParams).forEach(([key, value]) => { - url = updateURLParameter(url, key, value); - }); - - return url; - } - - let searchIndex = 0; - let appliedIndex = 0; - - function search(updateAddressBar, baseUrl, _query, _filterCollections, extraParams) { - let url = addParametersToUrl(baseUrl, _query, _filterCollections, extraParams); - url = updateURLParameter(url, "page", 1); - - const localIndex = ++searchIndex; - - if (updateAddressBar) { - window.history.replaceState(null, "Dodona", url); - } - $("#progress-filter").css("visibility", "visible"); - fetch(updateURLParameter(url, "format", "js"), { - headers: { - "accept": "text/javascript" - }, - credentials: "same-origin", - }) - .then(resp => resp.text()) - .then(data => { - if (appliedIndex < localIndex) { - appliedIndex = localIndex; - eval(data); - } - $("#progress-filter").css("visibility", "hidden"); - }); - } - - function initFilter(updateAddressBar, _baseUrl, eager, _filterCollections) { - window.dodona.index.baseUrl = _baseUrl || window.location.href; - const filterCollections = _filterCollections || {}; - const $queryFilter = $(QUERY_FILTER_ID); - window.dodona.index.doSearch = () => - search( - updateAddressBar, - window.dodona.index.baseUrl, - $queryFilter.typeahead("val"), - filterCollections - ); - $queryFilter.on("keyup", () => delay(window.dodona.index.doSearch, 300)); - const param = getURLParameter(FILTER_PARAM); - if (param !== "") { - $queryFilter.typeahead("val", param); - } - - if (eager) { - window.dodona.index.doSearch(); - } - } - - function performAction(action) { - if (action.confirm === undefined || window.confirm(action.confirm)) { - const url = addParametersToUrl( - action.action, - $(QUERY_FILTER_ID).val(), - filterCollections - ); - $.post( - url, - { format: "json" }, - function (data) { - new Toast(data.message); - if (data.js) { - eval(data.js); - } else { - search(updateAddressBar, window.dodona.index.baseUrl); - } - } - ); - } - } - - function urlContainsSearchOpt(searchOption) { - const url = window.dodona.index.baseUrl || window.location.href; - // If the parameters were already contained, the length shouldn't change. - // Note that we can't just compare the urls, since the position of the parameters might change. - return ( - addParametersToUrl(url, undefined, undefined, searchOption.search).length === url.length - ); - } - - function initActions() { - const $actions = $(".table-toolbar-tools .actions"); - const searchOptions = actions.filter(action => action.search); - const searchActions = actions.filter(action => action.url || action.action || action.js); - - function performSearch() { - const extraParams = {}; - searchOptions.forEach((opt, id) => { - if ( - $(`a.action[data-search_opt_id="${id}"]`) - .find("i") - .hasClass("mdi-checkbox-marked-outline") - ) { - Object.entries(opt.search).forEach(([key, value]) => { - extraParams[key] = value; - }); - } else { - Object.keys(opt.search).forEach(key => { - extraParams[key] = null; - }); - } - }); - // Update the search function with the new params. - window.dodona.index.doSearch = () => { - search( - updateAddressBar, - window.dodona.index.baseUrl, - $(QUERY_FILTER_ID).val(), - filterCollections, - extraParams - ); - }; - window.dodona.index.doSearch(); - } - - $actions.removeClass("hidden"); - if (searchOptions.length > 0) { - $actions - .find("ul") - .append(`
      • ${I18n.t("js.options")}
        • `); - searchOptions.forEach(function (action, id) { - const $link = $( - `${ - action.text - }` - ); - $link.appendTo($actions.find("ul")); - $link.wrap("
      • "); - if (urlContainsSearchOpt(action)) { - $link.find("i") - .removeClass("mdi-checkbox-blank-outline") - .addClass("mdi-checkbox-marked-outline"); - } - $link.on("click", () => { - const child = $link.find("i"); - if (child.hasClass("mdi-checkbox-blank-outline")) { - child.removeClass("mdi-checkbox-blank-outline") - .addClass("mdi-checkbox-marked-outline"); - } else { - child.removeClass("mdi-checkbox-marked-outline") - .addClass("mdi-checkbox-blank-outline"); - } - if (action.click) { - eval(action.click); - } - performSearch(); - return false; - }); - }); - } - if (searchActions.length > 0) { - $actions - .find("ul") - .append(`
      • ${I18n.t("js.actions")}
        • `); - searchActions.forEach(function (action) { - const $link = $( - `${action.text}` - ); - $link.appendTo($actions.find("ul")); - $link.wrap("
      • "); - if (action.action) { - $link.on("click", () => { - performAction(action); - return false; - }); - } else if (action.js) { - $link.on("click", () => { - eval(action.js); - return false; - }); - } - }); - } - } - - function initTokens() { - const $field = $(TOKENS_FILTER_ID); - - window.dodona.index.doSearch = function () { - search(updateAddressBar, window.dodona.index.baseUrl, "", filterCollections); - }; - - function validateLabel(e) { - const collection = filterCollections[e.attrs.type]; - if (!collection) { - return false; - } - // check whether we have a label for the input - let valid = collection.data.map(el => el.name).includes(e.attrs.name); - if (valid && collection.multi) { - // if multi, we can have multiple labels but we do not want duplication - // therefore we use an id to distinguish labels and prevent the same label from appearing twice - const newElementId = e.attrs.id.toString(); // ensure comparison is String-based - // The labels have the token html class so we obtain all labels via this query - valid = $(".token").filter(function (_index, el) { - // check if a label with this id is not yet present - return newElementId === $(el).attr(LABEL_UNIQUE_ATTR); - }).length === 0; - } - return valid; - } - - function disableLabel() { - // We need to delay, otherwise tokenfield hasn't finished setting all the right values - delay(window.dodona.index.doSearch, 100); - } - - function enableLabel(e) { - const collection = filterCollections[e.attrs.type]; - $(e.relatedTarget).addClass(`accent-${collection.color(e.attrs)}`) - // add an attribute to identify duplicate labels in the suggestions @see validateLabel - .attr(LABEL_UNIQUE_ATTR, e.attrs.id); - if (!collection.multi) { - const tokens = $field.tokenfield("getTokens"); - const newTokens = tokens - .filter(el => el.type !== e.attrs.type || el.name === e.attrs.name) - .filter( - (el, i, arr) => - i === arr.map(el2 => `${el2.type}${el2.id}`).indexOf(`${el.type}${el.id}`) - ); - if (newTokens.length !== tokens.length) { - $field.tokenfield("setTokens", newTokens); - } - } - // We need to delay, otherwise tokenfield hasn't finished setting all the right values - delay(window.dodona.index.doSearch, 100); - } - - function customWhitespaceTokenizer(datum) { - const result = Bloodhound.tokenizers.whitespace(datum); - $.each(result, (i, val) => { - for (let i = 1; i < val.length; i++) { - result.push(val.substr(i, val.length)); - } - }); - return result; - } - - const typeAheadOpts = [ - { - highlight: true, - minLength: 0, - }, - ]; - - Object.entries(filterCollections).forEach(([type, value]) => { - for (const elem of value.data) { - elem.type = type; - elem.value = elem.name; - } - - const engine = new Bloodhound({ - local: value.data, - identify: d => d.id, - datumTokenizer: d => customWhitespaceTokenizer(d.name), - queryTokenizer: Bloodhound.tokenizers.whitespace, - }); - - typeAheadOpts.push({ - source: engine, - display: d => d.name, - templates: { - header: `${I18n.t(`js.${type}`)}`, - }, - }); - }); - - $field.on("tokenfield:createtoken", validateLabel); - $field.on("tokenfield:createdtoken", enableLabel); - $field.on("tokenfield:removedtoken", disableLabel); - $field.tokenfield({ - beautify: false, - typeahead: typeAheadOpts, - }); - - function addTokenToSearch(type, name) { - const collection = filterCollections[type]; - if (!collection) { - return false; - } - - const element = collection.data.filter(el => el.name === name)[0]; - if (!element) { - return false; - } - - $field.tokenfield("createToken", element); - } - - dodona.addTokenToSearch = addTokenToSearch; - - // Temporarily disable automatic searching when adding new labels - const temp = window.dodona.index.doSearch; - window.dodona.index.doSearch = () => { }; - const allTokens = []; - Object.values(filterCollections).forEach(value => { - if (value.multi) { - const enabledElements = getArrayURLParameter(value.param); - const mapped = value.data.filter(el => - enabledElements.includes(`${value.paramVal(el)}`) - ); - allTokens.push(...mapped); - } else { - const enabledElement = getURLParameter(value.param); - if (enabledElement) { - const mapped = value.data.filter( - el => `${value.paramVal(el)}` === enabledElement - )[0]; - allTokens.push(mapped); - } - } - }); - $field.tokenfield("setTokens", allTokens); - window.dodona.index.doSearch = temp; - } - - function initRefresh() { - if (refreshElement) { - window.dodona.index.periodicReload = new InactiveTimeout( - document.querySelector(refreshElement), - RELOAD_SECONDS * 1000, - () => { - // Don't pass the function directly, since that doesn't update. - window.dodona.index.doSearch(); - } - ); - if (getURLParameter("refresh") === "true") { - window.dodona.index.periodicReload.start(); - } - } - } - - init(); -} - - - diff --git a/app/javascript/packs/index.js b/app/javascript/packs/index.js deleted file mode 100644 index 9f1025e652..0000000000 --- a/app/javascript/packs/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import { toggleIndexReload } from "index.js"; - -window.dodona.toggleIndexReload = toggleIndexReload; diff --git a/app/views/evaluations/new.html.erb b/app/views/evaluations/new.html.erb index 87e58c2ee2..7b0c72451d 100644 --- a/app/views/evaluations/new.html.erb +++ b/app/views/evaluations/new.html.erb @@ -1,7 +1,6 @@ <% content_for :javascripts do %> <%= javascript_include_tag 'evaluation' %> <%= javascript_include_tag 'score_item' %> - <%= javascript_include_tag 'index' %> <% end %>
        diff --git a/app/views/layouts/_searchbar.html.erb b/app/views/layouts/_searchbar.html.erb index e17377bce9..667d83632a 100644 --- a/app/views/layouts/_searchbar.html.erb +++ b/app/views/layouts/_searchbar.html.erb @@ -1,6 +1,3 @@ -<% content_for :javascripts do %> - <%= javascript_include_tag 'index' %> -<% end %>
        @@ -170,14 +167,6 @@ } }; <% end %> - - - - - - - - dodona.search_query.setRefreshElement("<%= local_assigns.fetch :refresh_element, "" %>"); dodona.search_query.setBaseUrl("<%= local_assigns.fetch :baseUrl, "" %>"); From 4b807a3128e14ddecbeea19d287ec7feacc4b614 Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Thu, 7 Apr 2022 15:33:53 +0200 Subject: [PATCH 22/73] Use imports instead of window object --- .../javascripts/components/filter_button.ts | 7 ++--- .../javascripts/components/search_actions.ts | 13 +++++----- .../javascripts/components/search_field.ts | 25 +++++++++--------- .../javascripts/components/search_token.ts | 13 +++++----- .../javascripts/components/sort_button.ts | 26 +++++++++---------- app/assets/javascripts/course.js | 9 ++++--- app/assets/javascripts/search.ts | 2 +- app/javascript/packs/search.js | 3 +++ app/views/evaluations/refresh_users.js.erb | 2 +- app/views/layouts/_searchbar.html.erb | 7 +++-- 10 files changed, 59 insertions(+), 48 deletions(-) create mode 100644 app/javascript/packs/search.js diff --git a/app/assets/javascripts/components/filter_button.ts b/app/assets/javascripts/components/filter_button.ts index a43cf535f9..85d46e1db8 100644 --- a/app/assets/javascripts/components/filter_button.ts +++ b/app/assets/javascripts/components/filter_button.ts @@ -2,6 +2,7 @@ import { customElement, property } from "lit/decorators.js"; import { css, html, LitElement, TemplateResult } from "lit"; import { Tooltip } from "bootstrap"; import { ref } from "lit/directives/ref.js"; +import { searchQuery } from "search"; @customElement("dodona-filter-button") export class FilterButton extends LitElement { @@ -20,11 +21,11 @@ export class FilterButton extends LitElement { addFilter(): void { if (this.multi) { - const selected = new Set(dodona.search_query.array_query_params.params.get(this.param)); + const selected = new Set(searchQuery.array_query_params.params.get(this.param)); selected.add(this.value); - dodona.search_query.array_query_params.updateParam(this.param, Array.from(selected)); + searchQuery.array_query_params.updateParam(this.param, Array.from(selected)); } else { - dodona.search_query.query_params.updateParam(this.param, this.value); + searchQuery.query_params.updateParam(this.param, this.value); } } diff --git a/app/assets/javascripts/components/search_actions.ts b/app/assets/javascripts/components/search_actions.ts index 2d856ea831..ae40737967 100644 --- a/app/assets/javascripts/components/search_actions.ts +++ b/app/assets/javascripts/components/search_actions.ts @@ -2,6 +2,7 @@ import { html, LitElement, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators.js"; import { Toast } from "toast"; import { fetch } from "util.js"; +import { searchQuery } from "search"; type SearchOption = {search: Record, type: string, text: string}; type SearchAction = { @@ -36,7 +37,7 @@ export class SearchOptionElement extends LitElement { console.log(this.searchOption); this.setActive(); Object.keys(this.searchOption.search).forEach(k => { - dodona.search_query.query_params.subscribeByKey(k, () => this.setActive()); + searchQuery.query_params.subscribeByKey(k, () => this.setActive()); }); } super.update(changedProperties); @@ -44,18 +45,18 @@ export class SearchOptionElement extends LitElement { setActive(): void { this._active = Object.entries(this.searchOption.search).every(([key, value]) => { - return dodona.search_query.query_params.params.get(key) == value.toString(); + return searchQuery.query_params.params.get(key) == value.toString(); }); } performSearch(): void { if (!this._active) { Object.entries(this.searchOption.search).forEach(([key, value]) => { - dodona.search_query.query_params.updateParam(key, value.toString()); + searchQuery.query_params.updateParam(key, value.toString()); }); } else { Object.keys(this.searchOption.search).forEach(key => { - dodona.search_query.query_params.updateParam(key, undefined); + searchQuery.query_params.updateParam(key, undefined); }); } } @@ -109,7 +110,7 @@ export class SearchActions extends LitElement { } if (action.confirm === undefined || window.confirm(action.confirm)) { - const url: string = dodona.search_query.addParametersToUrl(action.action); + const url: string = searchQuery.addParametersToUrl(action.action); fetch(url, { method: "POST", @@ -119,7 +120,7 @@ export class SearchActions extends LitElement { if (data.js) { eval(data.js); } else { - dodona.search_query.resetAllQueryParams(); + searchQuery.resetAllQueryParams(); } }); } diff --git a/app/assets/javascripts/components/search_field.ts b/app/assets/javascripts/components/search_field.ts index bab25821e1..992acc7c72 100644 --- a/app/assets/javascripts/components/search_field.ts +++ b/app/assets/javascripts/components/search_field.ts @@ -3,6 +3,7 @@ import { html, LitElement, TemplateResult } from "lit"; import { createDelayer } from "util.js"; import { unsafeHTML } from "lit/directives/unsafe-html.js"; import { ref } from "lit/directives/ref.js"; +import { searchQuery } from "search"; type Label = {id: string, name: string}; export abstract class SearchFieldSuggestion extends LitElement { @@ -67,8 +68,8 @@ export class SingleSearchFieldSuggestion extends SearchFieldSuggestion { selected = ""; select(label: string): void { - dodona.search_query.query_params.updateParam(this.param, label); - dodona.search_query.query_params.updateParam("filter", undefined); + searchQuery.query_params.updateParam(this.param, label); + searchQuery.query_params.updateParam("filter", undefined); } isSelected(label: string): boolean { @@ -76,8 +77,8 @@ export class SingleSearchFieldSuggestion extends SearchFieldSuggestion { } subscribeToQueryParams(): void { - this.selected = dodona.search_query.query_params.params.get(this.param); - dodona.search_query.query_params.subscribeByKey(this.param, (k, o, n) => this.selected = n || ""); + this.selected = searchQuery.query_params.params.get(this.param); + searchQuery.query_params.subscribeByKey(this.param, (k, o, n) => this.selected = n || ""); } } @@ -87,8 +88,8 @@ export class MultiSearchFieldSuggestion extends SearchFieldSuggestion { selected: string[] = []; select(label: string): void { - dodona.search_query.array_query_params.updateParam(this.param, [...this.selected, label]); - dodona.search_query.query_params.updateParam("filter", undefined); + searchQuery.array_query_params.updateParam(this.param, [...this.selected, label]); + searchQuery.query_params.updateParam("filter", undefined); } isSelected(label: string): boolean { @@ -96,8 +97,8 @@ export class MultiSearchFieldSuggestion extends SearchFieldSuggestion { } subscribeToQueryParams(): void { - this.selected = dodona.search_query.array_query_params.params.get(this.param) || []; - dodona.search_query.array_query_params.subscribeByKey(this.param, (k, o, n) => { + this.selected = searchQuery.array_query_params.params.get(this.param) || []; + searchQuery.array_query_params.subscribeByKey(this.param, (k, o, n) => { this.selected = n || []; }); } @@ -137,14 +138,14 @@ export class SearchField extends LitElement { constructor() { super(); - dodona.search_query.query_params.subscribeByKey("filter", (k, o, n) => this.filter = n || ""); - this.filter = dodona.search_query.query_params.params.get("filter") || ""; + searchQuery.query_params.subscribeByKey("filter", (k, o, n) => this.filter = n || ""); + this.filter = searchQuery.query_params.params.get("filter") || ""; this.delay = createDelayer(); } update(changedProperties: Map): void { if (changedProperties.has("eager") && this.eager) { - dodona.search_query.search(); + searchQuery.search(); } super.update(changedProperties); } @@ -160,7 +161,7 @@ export class SearchField extends LitElement { if (e.key === "Tab") { this.tabComplete(); } - this.delay(() => dodona.search_query.query_params.updateParam("filter", this.filter), 300); + this.delay(() => searchQuery.query_params.updateParam("filter", this.filter), 300); } suggestionFieldChanged(field?: SearchFieldSuggestion): void { diff --git a/app/assets/javascripts/components/search_token.ts b/app/assets/javascripts/components/search_token.ts index 4727be1371..b0295e2df7 100644 --- a/app/assets/javascripts/components/search_token.ts +++ b/app/assets/javascripts/components/search_token.ts @@ -1,5 +1,6 @@ import { html, LitElement, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators.js"; +import { searchQuery } from "search"; type Label = {id: string, name: string}; export abstract class SearchToken extends LitElement { @@ -50,7 +51,7 @@ export class SingleSearchToken extends SearchToken { selected = ""; unSelect(): void { - dodona.search_query.query_params.updateParam(this.param, undefined); + searchQuery.query_params.updateParam(this.param, undefined); } isSelected(label: string): boolean { @@ -58,8 +59,8 @@ export class SingleSearchToken extends SearchToken { } subscribeToQueryParams(): void { - this.selected = dodona.search_query.query_params.params.get(this.param); - dodona.search_query.query_params.subscribeByKey(this.param, (k, o, n) => this.selected = n || ""); + this.selected = searchQuery.query_params.params.get(this.param); + searchQuery.query_params.subscribeByKey(this.param, (k, o, n) => this.selected = n || ""); } } @@ -69,7 +70,7 @@ export class MultiSearchToken extends SearchToken { selected: string[] = []; unSelect(label: string): void { - dodona.search_query.array_query_params.updateParam(this.param, this.selected.filter(s => s !== label)); + searchQuery.array_query_params.updateParam(this.param, this.selected.filter(s => s !== label)); } isSelected(label: string): boolean { @@ -77,8 +78,8 @@ export class MultiSearchToken extends SearchToken { } subscribeToQueryParams(): void { - this.selected = dodona.search_query.array_query_params.params.get(this.param) || []; - dodona.search_query.array_query_params.subscribeByKey(this.param, (k, o, n) => { + this.selected = searchQuery.array_query_params.params.get(this.param) || []; + searchQuery.array_query_params.subscribeByKey(this.param, (k, o, n) => { this.selected = n || []; }); } diff --git a/app/assets/javascripts/components/sort_button.ts b/app/assets/javascripts/components/sort_button.ts index 170eb07fd4..e0b07b16f7 100644 --- a/app/assets/javascripts/components/sort_button.ts +++ b/app/assets/javascripts/components/sort_button.ts @@ -1,6 +1,7 @@ import "search.ts"; import { html, LitElement, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators.js"; +import { searchQuery } from "search"; export class SortQuery { active_column: string; @@ -8,7 +9,7 @@ export class SortQuery { listeners: Array<(c: string, a: boolean) => void> = []; constructor() { - const sortParams = [...dodona.search_query.query_params.params.entries()].filter( + const sortParams = [...searchQuery.query_params.params.entries()].filter( ([k, v]) => k.startsWith("order_by_") && (v=== "ASC" || v === "DESC") ); @@ -16,10 +17,10 @@ export class SortQuery { this.active_column = sortParams[0][0].substring(9); this.ascending = sortParams[0][1] === "ASC"; sortParams.slice(1).forEach(([k, _]) => { - dodona.search_query.query_params.updateParam(k, undefined); + searchQuery.query_params.updateParam(k, undefined); }); } - dodona.search_query.query_params.subscribe((k, o, n) => { + searchQuery.query_params.subscribe((k, o, n) => { if ( k.startsWith("order_by_") && !(k === this.getQueryKey() && n === this.getQueryValue()) && @@ -54,18 +55,17 @@ export class SortQuery { } if (this.active_column !== column) { - dodona.search_query.query_params.updateParam(this.getQueryKey(), undefined); + searchQuery.query_params.updateParam(this.getQueryKey(), undefined); this.active_column = column; } this.ascending = ascending; this.notify(); if (this.active_column) { - dodona.search_query.query_params.updateParam(this.getQueryKey(), this.getQueryValue()); + searchQuery.query_params.updateParam(this.getQueryKey(), this.getQueryValue()); } } } -dodona.state = {}; -dodona.state.sort_query = new SortQuery(); +export const sortQuery = new SortQuery(); @customElement("dodona-sort-button") export class SortButton extends LitElement { @@ -90,19 +90,19 @@ export class SortButton extends LitElement { sort(): void { if (!this.isActive()) { - dodona.state.sort_query.sortBy(this.column, true); + sortQuery.sortBy(this.column, true); } else if (this.ascending) { - dodona.state.sort_query.sortBy(this.column, false); + sortQuery.sortBy(this.column, false); } else { - dodona.state.sort_query.sortBy(undefined, undefined); + sortQuery.sortBy(undefined, undefined); } } constructor() { super(); - this.ascending = dodona.state.sort_query.ascending; - this.active_column = dodona.state.sort_query.active_column; - dodona.state.sort_query.subscribe((c, a) => { + this.ascending = sortQuery.ascending; + this.active_column = sortQuery.active_column; + sortQuery.subscribe((c, a) => { this.active_column = c; this.ascending = a; }); diff --git a/app/assets/javascripts/course.js b/app/assets/javascripts/course.js index 15415a1134..4a04df0651 100644 --- a/app/assets/javascripts/course.js +++ b/app/assets/javascripts/course.js @@ -1,10 +1,11 @@ import { initDragAndDrop } from "./drag_and_drop.js"; import { fetch, getURLParameter } from "./util.js"; import { ScrollSpy } from "./scrollspy"; +import { searchQuery } from "./search"; function loadUsers(_baseUrl, _status) { const status = _status || getURLParameter("status"); - dodona.search_query.query_params.updateParam("status", status); + searchQuery.query_params.updateParam("status", status); } function initCourseMembers() { @@ -53,7 +54,7 @@ function initCourseMembers() { }); // Determine which tab to show first - const status = dodona.search_query.query_params.params.get("status"); + const status = searchQuery.query_params.params.get("status"); let $tab = $("a[data-status='" + status + "']"); if ($tab.length === 0) { // Default to enrolled (subscribed) @@ -299,7 +300,7 @@ function initCoursesListing(firstTab) { }); // If the url hash is a valid tab, use that, otherwise use the given tab - const hash = dodona.search_query.query_params.params.get("tab"); + const hash = searchQuery.query_params.params.get("tab"); const tab = document.querySelector(`a[data-tab='${hash}']`) ?? document.querySelector(`a[data-tab='${firstTab}']`); selectTab(tab); @@ -316,7 +317,7 @@ function initCoursesListing(firstTab) { } function loadCourses(tab) { - dodona.search_query.query_params.updateParam("tab", tab); + searchQuery.query_params.updateParam("tab", tab); } } diff --git a/app/assets/javascripts/search.ts b/app/assets/javascripts/search.ts index 5b20fde05c..4b04facf2b 100644 --- a/app/assets/javascripts/search.ts +++ b/app/assets/javascripts/search.ts @@ -148,4 +148,4 @@ export class SearchQuery { } } -dodona.search_query = new SearchQuery(); +export const searchQuery = new SearchQuery(); diff --git a/app/javascript/packs/search.js b/app/javascript/packs/search.js new file mode 100644 index 0000000000..662befa679 --- /dev/null +++ b/app/javascript/packs/search.js @@ -0,0 +1,3 @@ +import { searchQuery } from "search"; + +window.dodona.searchQuery = searchQuery; diff --git a/app/views/evaluations/refresh_users.js.erb b/app/views/evaluations/refresh_users.js.erb index 6077956808..5065ce20d0 100644 --- a/app/views/evaluations/refresh_users.js.erb +++ b/app/views/evaluations/refresh_users.js.erb @@ -1,3 +1,3 @@ -window.dodona.search_query.search(); +window.dodona.searchQuery.search(); $('#users-count-wrapper').html("<%= t('evaluations.edit_users.users_selected_html', count: @evaluation.users.count) %>") $('#short-users-count-wrapper').text("<%= t('evaluations.edit_users.short_users_selected', count: @evaluation.users.count) %>") diff --git a/app/views/layouts/_searchbar.html.erb b/app/views/layouts/_searchbar.html.erb index 667d83632a..88c34e3fe1 100644 --- a/app/views/layouts/_searchbar.html.erb +++ b/app/views/layouts/_searchbar.html.erb @@ -1,3 +1,6 @@ +<%= content_for :javascripts do %> + <%= javascript_include_tag 'search' %> +<% end %>
        @@ -167,8 +170,8 @@ } }; <% end %> - dodona.search_query.setRefreshElement("<%= local_assigns.fetch :refresh_element, "" %>"); - dodona.search_query.setBaseUrl("<%= local_assigns.fetch :baseUrl, "" %>"); + dodona.searchQuery.setRefreshElement("<%= local_assigns.fetch :refresh_element, "" %>"); + dodona.searchQuery.setBaseUrl("<%= local_assigns.fetch :baseUrl, "" %>"); const searchFields = Array.from(document.getElementsByTagName("dodona-search-field")); searchFields.forEach( searchField => { From 136a80f451d080a473ac5381052aa13ea2eb175d Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Fri, 8 Apr 2022 13:44:26 +0200 Subject: [PATCH 23/73] Update address bar on pagination --- .../javascripts/components/search_actions.ts | 1 - app/assets/javascripts/search.ts | 18 +++++++++++++++++- app/helpers/application_helper.rb | 10 +++++++++- 3 files changed, 26 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/components/search_actions.ts b/app/assets/javascripts/components/search_actions.ts index ae40737967..fa2472ca77 100644 --- a/app/assets/javascripts/components/search_actions.ts +++ b/app/assets/javascripts/components/search_actions.ts @@ -34,7 +34,6 @@ export class SearchOptionElement extends LitElement { update(changedProperties: Map): void { if (changedProperties.has("searchOption") && this.searchOption) { - console.log(this.searchOption); this.setActive(); Object.keys(this.searchOption.search).forEach(k => { searchQuery.query_params.subscribeByKey(k, () => this.setActive()); diff --git a/app/assets/javascripts/search.ts b/app/assets/javascripts/search.ts index 4b04facf2b..c9a2e3f55a 100644 --- a/app/assets/javascripts/search.ts +++ b/app/assets/javascripts/search.ts @@ -18,6 +18,10 @@ export class QueryParameters { updateParam(key: string, value: T ): void { const old: T = this.params.get(key); + if (old === value) { + return; + } + this.params.set(key, value); this.listeners.forEach(f => f(key, old, value)); @@ -83,6 +87,17 @@ export class SearchQuery { } } + initPagination(): void { + const remotePaginationButtons = document.querySelectorAll(".page-link[data-remote=true]"); + remotePaginationButtons.forEach( button => button.addEventListener("click", () => { + const href = button.getAttribute("href"); + const page = getURLParameter("page", href); + this.query_params.updateParam("page", page); + const url = this.addParametersToUrl(); + window.history.replaceState(null, "Dodona", url); + })); + } + constructor(baseUrl?: string, refreshElement?: string) { this.setBaseUrl(baseUrl); @@ -148,4 +163,5 @@ export class SearchQuery { } } -export const searchQuery = new SearchQuery(); +dodona.searchQuery = dodona.searchQuery || new SearchQuery(); +export const searchQuery = dodona.searchQuery; diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 2110835e1a..3fc5cb3986 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -233,7 +233,15 @@ class AjaxLinkRenderer < ::ActionView::Base::LinkRenderer protected def html_container(html) - tag :ul, html, container_attributes + container = tag :ul, html, container_attributes + %( + #{container} + + ) end def page_number(page) From 361699135d6096e77fdd4e29713f3af74cc9bed2 Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Fri, 8 Apr 2022 13:57:59 +0200 Subject: [PATCH 24/73] Fix linting --- app/assets/javascripts/series.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/javascripts/series.js b/app/assets/javascripts/series.js index 517e2fb5a9..24c1822cbd 100644 --- a/app/assets/javascripts/series.js +++ b/app/assets/javascripts/series.js @@ -22,7 +22,7 @@ const DRAG_AND_DROP_ARGS = { function initSeriesEdit() { function init() { - initAddButtons() + initAddButtons(); initRemoveButtons(); initDragAndDrop(DRAG_AND_DROP_ARGS); // export function From f659813eaf61edafc53cb95048e6454f4a779935 Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Fri, 8 Apr 2022 14:06:18 +0200 Subject: [PATCH 25/73] Fix rubocop issues --- app/models/submission.rb | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/models/submission.rb b/app/models/submission.rb index e54aba70cf..8771fe35a2 100644 --- a/app/models/submission.rb +++ b/app/models/submission.rb @@ -101,8 +101,8 @@ class Submission < ApplicationRecord scope :order_by_number, ->(direction) { reorder number: direction, id: :desc } scope :order_by_user, ->(direction) { includes(:user).reorder 'users.first_name': direction, 'users.last_name': direction, id: :desc } scope :order_by_exercise, ->(direction) { includes(:exercise).reorder 'activities.name_nl': direction, id: :desc } - scope :order_by_created_at, ->(direction) { reorder 'created_at': direction, id: :desc } - scope :order_by_status, ->(direction) { reorder 'status': direction, id: :desc } + scope :order_by_created_at, ->(direction) { reorder created_at: direction, id: :desc } + scope :order_by_status, ->(direction) { reorder status: direction, id: :desc } def initialize(params) raise 'please explicitly tell whether you want to evaluate this submission' unless params.key? :evaluate From 27244031c2819347a8cb0f917b8aabaa695f346e Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Fri, 8 Apr 2022 14:11:43 +0200 Subject: [PATCH 26/73] Fix tests --- app/views/repositories/show.html.erb | 3 --- test/system/courses_test.rb | 6 +++--- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/app/views/repositories/show.html.erb b/app/views/repositories/show.html.erb index 3959232f45..6906b24dfb 100644 --- a/app/views/repositories/show.html.erb +++ b/app/views/repositories/show.html.erb @@ -1,7 +1,4 @@ <%= render 'navbar_links' %> -<% content_for :javascripts do %> - <%= javascript_include_tag 'activities' %> -<% end %>
        diff --git a/test/system/courses_test.rb b/test/system/courses_test.rb index 19a2c552bf..deede3d47b 100644 --- a/test/system/courses_test.rb +++ b/test/system/courses_test.rb @@ -21,14 +21,14 @@ class CoursesTest < ApplicationSystemTestCase visit(courses_path) assert_selector '#course-tabs li', count: 4 - assert_selector 'a[href="#institution"].active' + assert_selector 'a[data-tab="institution"].active' assert_selector '#courses-table-wrapper tbody tr', count: 2 find('#course-tabs').click_link 'All courses' - assert_selector 'a[href="#all"].active' + assert_selector 'a[data-tab="all"].active' assert_selector '#courses-table-wrapper tbody tr', count: 4 find('#course-tabs').click_link 'My courses' - assert_selector 'a[href="#my"].active' + assert_selector 'a[data-tab="my"].active' assert_selector '#courses-table-wrapper tbody tr', count: 1 end end From 6e43aee85c5edeec420b16033775063599cf1b9f Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Fri, 8 Apr 2022 14:36:33 +0200 Subject: [PATCH 27/73] Fix test --- app/views/courses/index.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/courses/index.html.erb b/app/views/courses/index.html.erb index 0bedffc89a..1633728ecf 100644 --- a/app/views/courses/index.html.erb +++ b/app/views/courses/index.html.erb @@ -20,7 +20,7 @@