improvements

Author: lunny

templates/org/team/repositories.tmpl

@@ -12,7 +12,7 @@
 					<div class="ui top attached segment tw-flex tw-flex-wrap tw-gap-2">
 						<form class="ui form ignore-dirty tw-flex-1 tw-flex" action="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/repo/add" method="post">
 							{{.CsrfTokenHtml}}
-							<div id="search-repo-box" data-uid="{{.Org.ID}}" class="ui search">
+							<div data-global-init="initSearchRepoBox" data-uid="{{.Org.ID}}" class="ui search">
 								<div class="ui input">
 									<input class="prompt" name="repo_name" placeholder="{{ctx.Locale.Tr "search.repo_kind"}}" autocomplete="off" required>
 								</div>

templates/package/settings.tmpl

@@ -19,7 +19,7 @@
 			<form class="ui form form-fetch-action ignore-dirty tw-flex-1 tw-flex" action="{{.Link}}" method="post">
 				{{.CsrfTokenHtml}}
 				<input type="hidden" name="action" value="link">
-				<div id="search-repo-box" class="ui search" data-uid="{{.PackageDescriptor.Owner.ID}}">
+				<div data-global-init="initSearchRepoBox" class="ui search" data-uid="{{.PackageDescriptor.Owner.ID}}">
 					<div class="ui input">
 						<input class="prompt" name="repo_name" value="{{.LinkedRepoName}}" placeholder="{{ctx.Locale.Tr "search.repo_kind"}}" autocomplete="off">
 					</div>

web_src/js/features/comp/SearchRepoBox.ts

@@ -3,14 +3,10 @@ import {htmlEscape} from '../../utils/html.ts';
 
 const {appSubUrl} = window.config;
 
-export function initCompSearchRepoBox() {
-  // on the page "page-content organization teams" and "page-content package settings"
-  const searchRepobox = document.querySelector('#search-repo-box');
-  if (!searchRepobox) return;
+export function initCompSearchRepoBox(elSearchRepoBox: HTMLElement) {
+  const uid = elSearchRepoBox.getAttribute('data-uid');
 
-  const uid = searchRepobox.getAttribute('data-uid');
-
-  const $searchRepoBox = fomanticQuery('#search-repo-box');
+  const $searchRepoBox = fomanticQuery(elSearchRepoBox);
   $searchRepoBox.search({
     minCharacters: 2,
     apiSettings: {

web_src/js/features/org-team.ts

@@ -1,5 +1,6 @@
 import {queryElems, toggleElem} from '../utils/dom.ts';
 import {initCompSearchRepoBox} from './comp/SearchRepoBox.ts';
+import {registerGlobalInitFunc} from '../modules/observer.ts';
 
 function initOrgTeamSettings() {
   // on the page "page-content organization new team"
@@ -15,5 +16,5 @@ function initOrgTeamSettings() {
 export function initOrgTeam() {
   if (!document.querySelector('.page-content.organization')) return;
   initOrgTeamSettings();
-  initCompSearchRepoBox();
+  registerGlobalInitFunc('initSearchRepoBox', initCompSearchRepoBox);
 }

web_src/js/features/package-setting.ts

@@ -1,6 +1,6 @@
 import {initCompSearchRepoBox} from './comp/SearchRepoBox.ts';
+import {registerGlobalInitFunc} from '../modules/observer.ts';
 
 export function initPackageSettings() {
-  if (!document.querySelector('.page-content.package.settings')) return;
-  initCompSearchRepoBox();
+  registerGlobalInitFunc('initSearchRepoBox', initCompSearchRepoBox);
 }