add a menu for selecting parent group to repo creation page

Author: GamerGirlandCo

templates/repo/create.tmpl

@@ -43,6 +43,16 @@
 					<span class="help tw-hidden" data-help-for-repo-name=".profile">{{ctx.Locale.Tr "repo.repo_name_profile_public_hint"}}</span>
 					<span class="help tw-hidden" data-help-for-repo-name=".profile-private">{{ctx.Locale.Tr "repo.repo_name_profile_private_hint"}}</span>
 				</div>
+				<div class="inline field">
+					<label>{{ctx.Locale.Tr "repo.group"}}</label>
+					<div id="group_selector" class="ui search dropdown">
+						<span class="text truncated-item-container" title="{{ctx.Locale.Tr "group.parent.none_selected"}}"></span>
+						<input type="hidden" id="gid" name="parent_group_id" value="0" required>
+						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+						<div class="menu">
+						</div>
+					</div>
+				</div>
 
 				<div class="inline field">
 					<label>{{ctx.Locale.Tr "repo.visibility"}}</label>

web_src/js/features/repo-new.ts

@@ -58,6 +58,36 @@ function initRepoNewTemplateSearch(form: HTMLFormElement) {
   onChangeOwner();
 }
 
+function initRepoGroupSelector(form: HTMLFormElement) {
+  const inputRepoOwnerUid = form.querySelector<HTMLInputElement>('#uid');
+  const elGroupDropdown = form.querySelector<HTMLInputElement>('#group_selector');
+  const $dropdown = fomanticQuery(elGroupDropdown);
+  const onChangeRepoOwner = function () {
+    $dropdown.dropdown('setting', {
+      apiSettings: {
+        url: `${appSubUrl}/group/search?uid=${inputRepoOwnerUid.value}&recurse=true`,
+        onResponse(response) {
+          const results = [];
+          results.push({name: '', value: ''}); // empty item means not using template
+          const forEachFn = function({group, subgroups}, depth: number) {
+            results.push({name: group.name, value: String(group.id)});
+            for (const sg of subgroups) {
+              forEachFn(sg, depth + 1);
+            }
+          };
+          for (const g of response.data.subgroups) {
+            forEachFn(g, 0);
+          }
+          return {results};
+        },
+        cache: false,
+      },
+    });
+  };
+  inputRepoOwnerUid.addEventListener('change', onChangeRepoOwner);
+  onChangeRepoOwner();
+}
+
 export function initRepoNew() {
   const pageContent = document.querySelector('.page-content.repository.new-repo');
   if (!pageContent) return;
@@ -96,4 +126,5 @@ export function initRepoNew() {
   updateUiRepoName();
 
   initRepoNewTemplateSearch(form);
+  initRepoGroupSelector(form);
 }