Add a new and more intuitive entry for adding members.

Author: kerwin612

routers/web/org/members.go

@@ -67,7 +67,13 @@ func Members(ctx *context.Context) {
 		ctx.ServerError("GetMembers", err)
 		return
 	}
+	teams, err := organization.FindOrgTeams(ctx, org.ID)
+	if err != nil {
+		ctx.ServerError("GetOrgTeams", err)
+		return
+	}
 	ctx.Data["Page"] = pager
+	ctx.Data["Teams"] = teams
 	ctx.Data["Members"] = members
 	ctx.Data["MembersIsPublicMember"] = membersIsPublic
 	ctx.Data["MembersIsUserOrgOwner"] = organization.IsUserOrgOwner(ctx, members, org.ID)

templates/org/member/members.tmpl

@@ -4,6 +4,17 @@
 	<div class="ui container">
 		{{template "base/alert" .}}
 
+		{{if .IsOrganizationOwner}}
+			<div class="flex-text-block tw-justify-end tw-gap-x-1 tw-gap-y-2 tw-mb-4">
+				<button class="ui primary button show-modal" data-modal="#add-member-to-team-modal"
+				>
+					{{svg "octicon-plus"}}
+					{{ctx.Locale.Tr "org.teams.add_team_member"}}
+				</button>
+			</div>
+			<div class="divider"></div>
+		{{end}}
+
 		<div class="flex-list">
 			{{range .Members}}
 				{{$isPublic := index $.MembersIsPublicMember .ID}}
@@ -87,4 +98,38 @@
 	{{template "base/modal_actions_confirm" .}}
 </div>
 
+<div class="ui small modal" id="add-member-to-team-modal">
+	<div class="header">{{ctx.Locale.Tr "org.teams.add_team_member"}}</div>
+	<div class="content">
+		<form class="ui form ignore-dirty" method="post" data-action-base-link="{{$.OrgLink}}">
+			{{.CsrfTokenHtml}}
+			<div class="required field">
+				<label>{{ctx.Locale.Tr "org.teams"}}</label>
+				<div class="ui dropdown selection search team_add_member_team_search">
+					<input name="team" type="hidden">
+					{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+					<div class="text"></div>
+					<div class="menu">
+						{{range .Teams}}
+							<div class="item" data-value="{{.LowerName}}">{{.Name}}</div>
+						{{end}}
+					</div>
+				</div>
+			</div>
+			<div class="required field">
+				<label>{{ctx.Locale.Tr "org.members"}}</label>
+				<div id="search-user-box" class="ui search">
+					<div class="ui input">
+						<input class="prompt" name="uname" placeholder="{{ctx.Locale.Tr "search.user_kind"}}" autocomplete="off" required>
+					</div>
+				</div>
+			</div>
+			<div class="actions">
+				<button class="ui cancel button">{{ctx.Locale.Tr "cancel"}}</button>
+				<button type="submit" class="ui primary button">{{ctx.Locale.Tr "save"}}</button>
+			</div>
+		</form>
+	</div>
+</div>
+
 {{template "base/footer" .}}

web_src/js/features/org-team.ts

@@ -3,6 +3,19 @@ import {fomanticQuery} from '../modules/fomantic/base.ts';
 
 const {appSubUrl} = window.config;
 
+function initOrgTeamAddMember() {
+  const modal = document.querySelector('#add-member-to-team-modal');
+  if (!modal) return;
+  const elDropdown = modal.querySelector('.team_add_member_team_search');
+  const form = elDropdown.closest('form');
+  const baseUrl = form.getAttribute('data-action-base-link');
+  const teamInput = form.querySelector<HTMLInputElement>('input[name=team]');
+  const onChangeTeam = function() {
+    form.setAttribute('action', `${baseUrl}/teams/${teamInput.value}/action/add`);
+  };
+  fomanticQuery(elDropdown).dropdown('setting', 'onChange', onChangeTeam);
+}
+
 function initOrgTeamSettings() {
   // on the page "page-content organization new team"
   const pageContent = document.querySelector('.page-content.organization.new.team');
@@ -39,6 +52,7 @@ function initOrgTeamSearchRepoBox() {
 
 export function initOrgTeam() {
   if (!document.querySelector('.page-content.organization')) return;
+  initOrgTeamAddMember();
   initOrgTeamSettings();
   initOrgTeamSearchRepoBox();
 }