studyTopicForm ui module

feats debounced tag completion

app/views/study/topic.scala

@@ -17,7 +17,7 @@ object topic {
     views.html.base.layout(
       title = "Study topics",
       moreCss = frag(cssTag("study.index"), cssTag("form3"), cssTag("tagify")),
-      moreJs = frag(tagifyTag, jsTag("study/topic-form.js")),
+      moreJs = jsModule("study.topic.form"),
       wrapClass = "full-screen-force"
     ) {
       main(cls := "page-menu")(

public/javascripts/study/topic-form.js

@@ -1,23 +0,0 @@
-$(() => {
-  const tagify = new Tagify(document.getElementById('form3-topics'), {
-    pattern: /.{2,}/,
-    maxTags: 30
-  });
-  let abortCtrl; // for aborting the call
-  tagify.on('input', e => {
-    const term = e.detail.value.trim();
-    if (term.length < 2) return;
-    tagify.settings.whitelist.length = 0; // reset the whitelist
-    abortCtrl && abortCtrl.abort();
-    abortCtrl = new AbortController();
-    // show loading animation and hide the suggestions dropdown
-    tagify.loading(true).dropdown.hide.call(tagify);
-
-    fetch(`/study/topic/autocomplete?term=${encodeURIComponent(term)}`, {signal: abortCtrl.signal})
-      .then(r => r.json())
-      .then(list => {
-        tagify.settings.whitelist.splice(0, list.length, ...list); // update whitelist Array in-place
-        tagify.loading(false).dropdown.show.call(tagify, term); // render the suggestions dropdown
-      })
-  });
-});

ui/@types/lichess/index.d.ts

@@ -380,3 +380,7 @@ declare namespace PowerTip {
     closeEvents?: string[];
   }
 }
+
+declare module '@yaireo/tagify';
+
+declare var lichess: Lichess;

ui/analyse/package.json

@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@badrap/result": "^0.2.6",
+    "@yaireo/tagify": "3.9.3",
     "ceval": "2.0.0",
     "chat": "2.0.0",
     "chess": "2.0.0",

ui/analyse/rollup.config.js

@@ -10,4 +10,8 @@ export default rollupProject({
     input: 'src/plugins/nvui.ts',
     output: 'analysis-board.nvui',
   },
+  studyTopicForm: {
+    input: 'src/plugins/studyTopicForm.ts',
+    output: 'study.topic.form',
+  }
 });

ui/analyse/src/plugins/studyTopicForm.ts

@@ -0,0 +1,25 @@
+import debounce from 'debounce-promise';
+import * as xhr from 'common/xhr';
+import Tagify from '@yaireo/tagify'
+
+lichess.load.then(() => {
+  const tagify = new Tagify(document.getElementById('form3-topics'), {
+    pattern: /.{2,}/,
+    maxTags: 30
+  });
+  const doFetch: (term: string) => Promise<string[]> = debounce(
+    (term: string) => xhr.json(xhr.url('/study/topic/autocomplete', { term })),
+    300
+  );
+  tagify.on('input', e => {
+    const term = e.detail.value.trim();
+    if (term.length < 2) return;
+    tagify.settings.whitelist.length = 0; // reset the whitelist
+    // show loading animation and hide the suggestions dropdown
+    tagify.loading(true).dropdown.hide.call(tagify);
+    doFetch(term).then((list: string[]) => {
+      tagify.settings.whitelist.splice(0, list.length, ...list); // update whitelist Array in-place
+      tagify.loading(false).dropdown.show.call(tagify, term); // render the suggestions dropdown
+    })
+  });
+});

ui/build

@@ -18,7 +18,7 @@ apps2="chess ceval game tree chat nvui"
 apps3="site swiss msg chat cli challenge notify learn insight editor puzzle round analyse lobby tournament tournamentSchedule tournamentCalendar simul dasher speech palantir serviceWorker"
 site_plugins="tvEmbed puzzleEmbed analyseEmbed user modUser clas coordinate captcha expandText team forum account coachForm challengePage checkout login tourForm teamBattleForm dgt gameSearch userComplete infiniteScroll flatpickr teamAdmin"
 round_plugins="keyboardMove nvui"
-analyse_plugins="nvui"
+analyse_plugins="nvui studyTopicForm"
 
 if [ $mode == "upgrade" ]; then
   yarn upgrade --non-interactive