Refactor repo-new.ts (#33070)

1. merge `repo-template.ts` into `repo-new.ts` (they are all for "/repo/create")
2. remove jquery
3. fix an anonying fomantic dropdown bug, see the comment of `onResponseKeepSelectedItem`

web_src/js/features/repo-new.ts

@@ -1,10 +1,53 @@
-import {hideElem, showElem} from '../utils/dom.ts';
+import {hideElem, showElem, toggleElem} from '../utils/dom.ts';
+import {htmlEscape} from 'escape-goat';
+import {fomanticQuery} from '../modules/fomantic/base.ts';
+
+const {appSubUrl} = window.config;
+
+function initRepoNewTemplateSearch(form: HTMLFormElement) {
+  const inputRepoOwnerUid = form.querySelector<HTMLInputElement>('#uid');
+  const elRepoTemplateDropdown = form.querySelector<HTMLInputElement>('#repo_template_search');
+  const inputRepoTemplate = form.querySelector<HTMLInputElement>('#repo_template');
+  const elTemplateUnits = form.querySelector('#template_units');
+  const elNonTemplate = form.querySelector('#non_template');
+  const checkTemplate = function () {
+    const hasSelectedTemplate = inputRepoTemplate.value !== '' && inputRepoTemplate.value !== '0';
+    toggleElem(elTemplateUnits, hasSelectedTemplate);
+    toggleElem(elNonTemplate, !hasSelectedTemplate);
+  };
+  inputRepoTemplate.addEventListener('change', checkTemplate);
+  checkTemplate();
+
+  const $dropdown = fomanticQuery(elRepoTemplateDropdown);
+  const onChangeOwner = function () {
+    $dropdown.dropdown('setting', {
+      apiSettings: {
+        url: `${appSubUrl}/repo/search?q={query}&template=true&priority_owner_id=${inputRepoOwnerUid.value}`,
+        onResponse(response) {
+          const results = [];
+          results.push({name: '', value: ''}); // empty item means not using template
+          for (const tmplRepo of response.data) {
+            results.push({
+              name: htmlEscape(tmplRepo.repository.full_name),
+              value: String(tmplRepo.repository.id),
+            });
+          }
+          $dropdown.fomanticExt.onResponseKeepSelectedItem($dropdown, inputRepoTemplate.value);
+          return {results};
+        },
+        cache: false,
+      },
+    });
+  };
+  inputRepoOwnerUid.addEventListener('change', onChangeOwner);
+  onChangeOwner();
+}
 
 export function initRepoNew() {
   const pageContent = document.querySelector('.page-content.repository.new-repo');
   if (!pageContent) return;
 
-  const form = document.querySelector('.new-repo-form');
+  const form = document.querySelector<HTMLFormElement>('.new-repo-form');
   const inputGitIgnores = form.querySelector<HTMLInputElement>('input[name="gitignores"]');
   const inputLicense = form.querySelector<HTMLInputElement>('input[name="license"]');
   const inputAutoInit = form.querySelector<HTMLInputElement>('input[name="auto_init"]');
@@ -32,4 +75,6 @@ export function initRepoNew() {
   };
   inputRepoName.addEventListener('input', updateUiRepoName);
   updateUiRepoName();
+
+  initRepoNewTemplateSearch(form);
 }

web_src/js/features/repo-template.ts

@@ -1,51 +0,0 @@
-import $ from 'jquery';
-import {htmlEscape} from 'escape-goat';
-import {hideElem, showElem} from '../utils/dom.ts';
-
-const {appSubUrl} = window.config;
-
-export function initRepoTemplateSearch() {
-  const $repoTemplate = $('#repo_template');
-  const checkTemplate = function () {
-    const $templateUnits = $('#template_units');
-    const $nonTemplate = $('#non_template');
-    if ($repoTemplate.val() !== '' && $repoTemplate.val() !== '0') {
-      showElem($templateUnits);
-      hideElem($nonTemplate);
-    } else {
-      hideElem($templateUnits);
-      showElem($nonTemplate);
-    }
-  };
-  $repoTemplate.on('change', checkTemplate);
-  checkTemplate();
-
-  const changeOwner = function () {
-    $('#repo_template_search')
-      .dropdown({
-        apiSettings: {
-          url: `${appSubUrl}/repo/search?q={query}&template=true&priority_owner_id=${$('#uid').val()}`,
-          onResponse(response) {
-            const filteredResponse = {success: true, results: []};
-            filteredResponse.results.push({
-              name: '',
-              value: '',
-            });
-            // Parse the response from the api to work with our dropdown
-            $.each(response.data, (_r, repo) => {
-              filteredResponse.results.push({
-                name: htmlEscape(repo.repository.full_name),
-                value: repo.repository.id,
-              });
-            });
-            return filteredResponse;
-          },
-          cache: false,
-        },
-
-        fullTextSearch: true,
-      });
-  };
-  $('#uid').on('change', changeOwner);
-  changeOwner();
-}