mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-11-10 01:05:14 +00:00
Refactor authors dropdown (send get request from frontend to avoid long wait time) (#23890)
Right now the authors search dropdown might take a long time to load if amount of authors is huge. Example: (In the video below, there are about 10000 authors, and it takes about 10 seconds to open the author dropdown) https://user-images.githubusercontent.com/17645053/229422229-98aa9656-3439-4f8c-9f4e-83bd8e2a2557.mov Possible improvements can be made, which will take 2 steps (Thanks to @wolfogre for advice): Step 1： Backend: Add a new api, which returns a limit of 30 posters with matched prefix. Frontend: Change the search behavior from frontend search(fomantic search) to backend search(when input is changed, send a request to get authors matching the current search prefix) Step 2： Backend: Optimize the api in step 1 using indexer to support fuzzy search. This PR is implements the first step. The main changes: 1. Added api: `GET /{type:issues|pulls}/posters` , which return a limit of 30 users with matched prefix (prefix sent as query). If `DEFAULT_SHOW_FULL_NAME` in `custom/conf/app.ini` is set to true, will also include fullnames fuzzy search. 2. Added a tooltip saying "Shows a maximum of 30 users" to the author search dropdown 3. Change the search behavior from frontend search to backend search After: https://user-images.githubusercontent.com/17645053/229430960-f88fafd8-fd5d-4f84-9df2-2677539d5d08.mov Fixes: https://github.com/go-gitea/gitea/issues/22586 --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
Hester Gong
GitHub
parent
08f4a9cca2
commit
6eb678374b
|
|
@ -155,14 +155,25 @@ func GetReviewers(ctx context.Context, repo *Repository, doerID, posterID int64)
|
|||
return users, db.GetEngine(ctx).Where(cond).OrderBy(user_model.GetOrderByName()).Find(&users)
|
||||
}
|
||||
|
||||
// GetIssuePosters returns all users that have authored an issue/pull request for the given repository
|
||||
func GetIssuePosters(ctx context.Context, repo *Repository, isPull bool) ([]*user_model.User, error) {
|
||||
users := make([]*user_model.User, 0, 8)
|
||||
// GetIssuePostersWithSearch returns users with limit of 30 whose username started with prefix that have authored an issue/pull request for the given repository
|
||||
// If isShowFullName is set to true, also include full name prefix search
|
||||
func GetIssuePostersWithSearch(ctx context.Context, repo *Repository, isPull bool, search string, isShowFullName bool) ([]*user_model.User, error) {
|
||||
users := make([]*user_model.User, 0, 30)
|
||||
var prefixCond builder.Cond = builder.Like{"name", search + "%"}
|
||||
if isShowFullName {
|
||||
prefixCond = prefixCond.Or(builder.Like{"full_name", "%" + search + "%"})
|
||||
}
|
||||
|
||||
cond := builder.In("`user`.id",
|
||||
builder.Select("poster_id").From("issue").Where(
|
||||
builder.Eq{"repo_id": repo.ID}.
|
||||
And(builder.Eq{"is_pull": isPull}),
|
||||
).GroupBy("poster_id"),
|
||||
)
|
||||
return users, db.GetEngine(ctx).Where(cond).OrderBy(user_model.GetOrderByName()).Find(&users)
|
||||
).GroupBy("poster_id")).And(prefixCond)
|
||||
|
||||
return users, db.GetEngine(ctx).
|
||||
Where(cond).
|
||||
Cols("id", "name", "full_name", "avatar", "avatar_email", "use_custom_avatar").
|
||||
OrderBy("name").
|
||||
Limit(30).
|
||||
Find(&users)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -933,6 +933,7 @@ delete_preexisting = Delete pre-existing files
|
|||
delete_preexisting_content = Delete files in %s
|
||||
delete_preexisting_success = Deleted unadopted files in %s
|
||||
blame_prior = View blame prior to this change
|
||||
author_search_tooltip = Shows a maximum of 30 users
|
||||
|
||||
transfer.accept = Accept Transfer
|
||||
transfer.accept_desc = Transfer to "%s"
|
||||
|
|
|
|||
23
routers/web/repo/helper.go
Normal file
23
routers/web/repo/helper.go
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
// Copyright 2023 The Gitea Authors. All rights reserved.
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
package repo
|
||||
|
||||
import (
|
||||
"sort"
|
||||
|
||||
"code.gitea.io/gitea/models/user"
|
||||
"code.gitea.io/gitea/modules/context"
|
||||
)
|
||||
|
||||
func makeSelfOnTop(ctx *context.Context, users []*user.User) []*user.User {
|
||||
if ctx.Doer != nil {
|
||||
sort.Slice(users, func(i, j int) bool {
|
||||
if users[i].ID == users[j].ID {
|
||||
return false
|
||||
}
|
||||
return users[i].ID == ctx.Doer.ID // if users[i] is self, put it before others, so less=true
|
||||
})
|
||||
}
|
||||
return users
|
||||
}
|
||||
27
routers/web/repo/helper_test.go
Normal file
27
routers/web/repo/helper_test.go
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
// Copyright 2023 The Gitea Authors. All rights reserved.
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
package repo
|
||||
|
||||
import (
|
||||
"testing"
|
||||
|
||||
"code.gitea.io/gitea/models/user"
|
||||
"code.gitea.io/gitea/modules/context"
|
||||
|
||||
"github.com/stretchr/testify/assert"
|
||||
)
|
||||
|
||||
func TestMakeSelfOnTop(t *testing.T) {
|
||||
users := makeSelfOnTop(&context.Context{}, []*user.User{{ID: 2}, {ID: 1}})
|
||||
assert.Len(t, users, 2)
|
||||
assert.EqualValues(t, 2, users[0].ID)
|
||||
|
||||
users = makeSelfOnTop(&context.Context{Doer: &user.User{ID: 1}}, []*user.User{{ID: 2}, {ID: 1}})
|
||||
assert.Len(t, users, 2)
|
||||
assert.EqualValues(t, 1, users[0].ID)
|
||||
|
||||
users = makeSelfOnTop(&context.Context{Doer: &user.User{ID: 2}}, []*user.User{{ID: 2}, {ID: 1}})
|
||||
assert.Len(t, users, 2)
|
||||
assert.EqualValues(t, 2, users[0].ID)
|
||||
}
|
||||
|
|
@ -303,17 +303,12 @@ func issues(ctx *context.Context, milestoneID, projectID int64, isPullOption uti
|
|||
ctx.Data["CommitStatuses"] = commitStatuses
|
||||
|
||||
// Get assignees.
|
||||
ctx.Data["Assignees"], err = repo_model.GetRepoAssignees(ctx, repo)
|
||||
assigneeUsers, err := repo_model.GetRepoAssignees(ctx, repo)
|
||||
if err != nil {
|
||||
ctx.ServerError("GetAssignees", err)
|
||||
return
|
||||
}
|
||||
|
||||
ctx.Data["Posters"], err = repo_model.GetIssuePosters(ctx, repo, isPullOption.IsTrue())
|
||||
if err != nil {
|
||||
ctx.ServerError("GetIssuePosters", err)
|
||||
ctx.ServerError("GetRepoAssignees", err)
|
||||
return
|
||||
}
|
||||
ctx.Data["Assignees"] = makeSelfOnTop(ctx, assigneeUsers)
|
||||
|
||||
handleTeamMentions(ctx)
|
||||
if ctx.Written() {
|
||||
|
|
@ -479,11 +474,12 @@ func RetrieveRepoMilestonesAndAssignees(ctx *context.Context, repo *repo_model.R
|
|||
return
|
||||
}
|
||||
|
||||
ctx.Data["Assignees"], err = repo_model.GetRepoAssignees(ctx, repo)
|
||||
assigneeUsers, err := repo_model.GetRepoAssignees(ctx, repo)
|
||||
if err != nil {
|
||||
ctx.ServerError("GetAssignees", err)
|
||||
ctx.ServerError("GetRepoAssignees", err)
|
||||
return
|
||||
}
|
||||
ctx.Data["Assignees"] = makeSelfOnTop(ctx, assigneeUsers)
|
||||
|
||||
handleTeamMentions(ctx)
|
||||
}
|
||||
|
|
@ -3354,3 +3350,46 @@ func handleTeamMentions(ctx *context.Context) {
|
|||
ctx.Data["MentionableTeamsOrg"] = ctx.Repo.Owner.Name
|
||||
ctx.Data["MentionableTeamsOrgAvatar"] = ctx.Repo.Owner.AvatarLink(ctx)
|
||||
}
|
||||
|
||||
type userSearchInfo struct {
|
||||
UserID int64 `json:"user_id"`
|
||||
UserName string `json:"username"`
|
||||
AvatarLink string `json:"avatar_link"`
|
||||
FullName string `json:"full_name"`
|
||||
}
|
||||
|
||||
type userSearchResponse struct {
|
||||
Results []*userSearchInfo `json:"results"`
|
||||
}
|
||||
|
||||
// IssuePosters get posters for current repo's issues/pull requests
|
||||
func IssuePosters(ctx *context.Context) {
|
||||
repo := ctx.Repo.Repository
|
||||
isPullList := ctx.Params(":type") == "pulls"
|
||||
search := strings.TrimSpace(ctx.FormString("q"))
|
||||
posters, err := repo_model.GetIssuePostersWithSearch(ctx, repo, isPullList, search, setting.UI.DefaultShowFullName)
|
||||
if err != nil {
|
||||
ctx.JSON(http.StatusInternalServerError, err)
|
||||
return
|
||||
}
|
||||
|
||||
if search == "" && ctx.Doer != nil {
|
||||
// the returned posters slice only contains limited number of users,
|
||||
// to make the current user (doer) can quickly filter their own issues, always add doer to the posters slice
|
||||
if !util.SliceContainsFunc(posters, func(user *user_model.User) bool { return user.ID == ctx.Doer.ID }) {
|
||||
posters = append(posters, ctx.Doer)
|
||||
}
|
||||
}
|
||||
|
||||
posters = makeSelfOnTop(ctx, posters)
|
||||
|
||||
resp := &userSearchResponse{}
|
||||
resp.Results = make([]*userSearchInfo, len(posters))
|
||||
for i, user := range posters {
|
||||
resp.Results[i] = &userSearchInfo{UserID: user.ID, UserName: user.Name, AvatarLink: user.AvatarLink(ctx)}
|
||||
if setting.UI.DefaultShowFullName {
|
||||
resp.Results[i].FullName = user.FullName
|
||||
}
|
||||
}
|
||||
ctx.JSON(http.StatusOK, resp)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -792,10 +792,13 @@ func ViewPullFiles(ctx *context.Context) {
|
|||
|
||||
setCompareContext(ctx, baseCommit, commit, ctx.Repo.Owner.Name, ctx.Repo.Repository.Name)
|
||||
|
||||
if ctx.Data["Assignees"], err = repo_model.GetRepoAssignees(ctx, ctx.Repo.Repository); err != nil {
|
||||
ctx.ServerError("GetAssignees", err)
|
||||
assigneeUsers, err := repo_model.GetRepoAssignees(ctx, ctx.Repo.Repository)
|
||||
if err != nil {
|
||||
ctx.ServerError("GetRepoAssignees", err)
|
||||
return
|
||||
}
|
||||
ctx.Data["Assignees"] = makeSelfOnTop(ctx, assigneeUsers)
|
||||
|
||||
handleTeamMentions(ctx)
|
||||
if ctx.Written() {
|
||||
return
|
||||
|
|
|
|||
|
|
@ -333,13 +333,12 @@ func NewRelease(ctx *context.Context) {
|
|||
}
|
||||
}
|
||||
ctx.Data["IsAttachmentEnabled"] = setting.Attachment.Enabled
|
||||
var err error
|
||||
// Get assignees.
|
||||
ctx.Data["Assignees"], err = repo_model.GetRepoAssignees(ctx, ctx.Repo.Repository)
|
||||
assigneeUsers, err := repo_model.GetRepoAssignees(ctx, ctx.Repo.Repository)
|
||||
if err != nil {
|
||||
ctx.ServerError("GetAssignees", err)
|
||||
ctx.ServerError("GetRepoAssignees", err)
|
||||
return
|
||||
}
|
||||
ctx.Data["Assignees"] = makeSelfOnTop(ctx, assigneeUsers)
|
||||
|
||||
upload.AddUploadContext(ctx, "release")
|
||||
ctx.HTML(http.StatusOK, tplReleaseNew)
|
||||
|
|
@ -496,11 +495,12 @@ func EditRelease(ctx *context.Context) {
|
|||
ctx.Data["attachments"] = rel.Attachments
|
||||
|
||||
// Get assignees.
|
||||
ctx.Data["Assignees"], err = repo_model.GetRepoAssignees(ctx, rel.Repo)
|
||||
assigneeUsers, err := repo_model.GetRepoAssignees(ctx, rel.Repo)
|
||||
if err != nil {
|
||||
ctx.ServerError("GetAssignees", err)
|
||||
ctx.ServerError("GetRepoAssignees", err)
|
||||
return
|
||||
}
|
||||
ctx.Data["Assignees"] = makeSelfOnTop(ctx, assigneeUsers)
|
||||
|
||||
ctx.HTML(http.StatusOK, tplReleaseNew)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1228,7 +1228,10 @@ func RegisterRoutes(m *web.Route) {
|
|||
|
||||
m.Group("/{username}/{reponame}", func() {
|
||||
m.Group("", func() {
|
||||
m.Get("/{type:issues|pulls}", repo.Issues)
|
||||
m.Group("/{type:issues|pulls}", func() {
|
||||
m.Get("", repo.Issues)
|
||||
m.Get("/posters", repo.IssuePosters)
|
||||
})
|
||||
m.Get("/{type:issues|pulls}/{index}", repo.ViewIssue)
|
||||
m.Group("/{type:issues|pulls}/{index}/content-history", func() {
|
||||
m.Get("/overview", repo.GetContentHistoryOverview)
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{{template "base/head" .}}
|
||||
<div role="main" aria-label="{{.Title}}" class="page-content repository">
|
||||
<div role="main" aria-label="{{.Title}}" class="page-content repository issue-list">
|
||||
{{template "repo/header" .}}
|
||||
<div class="ui container">
|
||||
<div class="ui three column grid issue-list-headers">
|
||||
|
|
@ -117,7 +117,11 @@
|
|||
</div>
|
||||
|
||||
<!-- Author -->
|
||||
<div class="ui {{if not .Posters}}disabled{{end}} dropdown jump item">
|
||||
<div class="ui dropdown jump item user-remote-search" data-tooltip-content="{{.locale.Tr "repo.author_search_tooltip"}}"
|
||||
data-search-url="{{$.Link}}/posters"
|
||||
data-selected-user-id="{{$.PosterID}}"
|
||||
data-action-jump-url="{{$.Link}}?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{$.SelectLabels}}&milestone={{$.MilestoneID}}&project={{$.ProjectID}}&assignee={{$.AssigneeID}}&poster={user_id}"
|
||||
>
|
||||
<span class="text">
|
||||
{{.locale.Tr "repo.issues.filter_poster"}}
|
||||
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
||||
|
|
@ -127,12 +131,7 @@
|
|||
<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
|
||||
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_poster"}}">
|
||||
</div>
|
||||
<a class="item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&project={{$.ProjectID}}&assignee={{$.AssigneeID}}">{{.locale.Tr "repo.issues.filter_poster_no_select"}}</a>
|
||||
{{range .Posters}}
|
||||
<a class="{{if eq $.PosterID .ID}}active selected{{end}} item gt-df" href="{{$.Link}}?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{$.SelectLabels}}&milestone={{$.MilestoneID}}&project={{$.ProjectID}}&assignee={{$.AssigneeID}}&poster={{.ID}}">
|
||||
{{avatar $.Context .}}{{template "repo/search_name" .}}
|
||||
</a>
|
||||
{{end}}
|
||||
<a class="item" data-value="0">{{.locale.Tr "repo.issues.filter_poster_no_select"}}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -150,7 +149,7 @@
|
|||
<a class="item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&project={{$.ProjectID}}&poster={{$.PosterID}}">{{.locale.Tr "repo.issues.filter_assginee_no_select"}}</a>
|
||||
{{range .Assignees}}
|
||||
<a class="{{if eq $.AssigneeID .ID}}active selected{{end}} item gt-df" href="{{$.Link}}?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{$.SelectLabels}}&milestone={{$.MilestoneID}}&project={{$.ProjectID}}&assignee={{.ID}}&poster={{$.PosterID}}">
|
||||
{{avatar $.Context .}}{{template "repo/search_name" .}}
|
||||
{{avatar $.Context . 20}}{{template "repo/search_name" .}}
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
|
|
@ -299,7 +298,7 @@
|
|||
</div>
|
||||
{{range .Assignees}}
|
||||
<div class="item issue-action" data-element-id="{{.ID}}" data-url="{{$.RepoLink}}/issues/assignee">
|
||||
{{avatar $.Context .}} {{.GetDisplayName}}
|
||||
{{avatar $.Context . 20}} {{.GetDisplayName}}
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{{template "base/head" .}}
|
||||
<div role="main" aria-label="{{.Title}}" class="page-content repository">
|
||||
<div role="main" aria-label="{{.Title}}" class="page-content repository milestone-issue-list">
|
||||
{{template "repo/header" .}}
|
||||
<div class="ui container">
|
||||
<div class="ui two column stackable grid">
|
||||
|
|
@ -71,7 +71,11 @@
|
|||
</div>
|
||||
|
||||
<!-- Author -->
|
||||
<div class="ui {{if not .Posters}}disabled{{end}} dropdown jump item">
|
||||
<div class="ui dropdown jump item user-remote-search" data-tooltip-content="{{.locale.Tr "repo.author_search_tooltip"}}"
|
||||
data-search-url="{{$.RepoLink}}/issues/posters"
|
||||
data-selected-user-id="{{$.PosterID}}"
|
||||
data-action-jump-url="{{$.Link}}?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{$.SelectLabels}}&assignee={{$.AssigneeID}}&poster={user_id}"
|
||||
>
|
||||
<span class="text">
|
||||
{{.locale.Tr "repo.issues.filter_poster"}}
|
||||
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
||||
|
|
@ -81,12 +85,7 @@
|
|||
<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
|
||||
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_poster"}}">
|
||||
</div>
|
||||
<a class="item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&assignee={{$.AssigneeID}}">{{.locale.Tr "repo.issues.filter_poster_no_select"}}</a>
|
||||
{{range .Posters}}
|
||||
<a class="{{if eq $.PosterID .ID}}active selected{{end}} item" href="{{$.Link}}?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{$.SelectLabels}}&assignee={{$.AssigneeID}}&poster={{.ID}}">
|
||||
{{avatar $.Context .}}{{template "repo/search_name" .}}
|
||||
</a>
|
||||
{{end}}
|
||||
<a class="item" data-value="0">{{.locale.Tr "repo.issues.filter_poster_no_select"}}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -104,7 +103,7 @@
|
|||
<a class="item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&poster={{$.PosterID}}">{{.locale.Tr "repo.issues.filter_assginee_no_select"}}</a>
|
||||
{{range .Assignees}}
|
||||
<a class="{{if eq $.AssigneeID .ID}}active selected{{end}} item" href="{{$.Link}}?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{$.SelectLabels}}&assignee={{.ID}}&poster={{$.PosterID}}">
|
||||
{{avatar $.Context . 28 "gt-mr-2"}}{{template "repo/search_name" .}}
|
||||
{{avatar $.Context . 20}}{{template "repo/search_name" .}}
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
|
|
@ -190,7 +189,7 @@
|
|||
</div>
|
||||
{{range .Assignees}}
|
||||
<div class="item issue-action" data-element-id="{{.ID}}" data-url="{{$.RepoLink}}/issues/assignee">
|
||||
{{avatar $.Context . 28 "gt-mr-2"}}
|
||||
{{avatar $.Context . 20}}
|
||||
{{.GetDisplayName}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
|
|
|||
|
|
@ -254,7 +254,7 @@
|
|||
{{end}}
|
||||
<span class="octicon-check {{if not $checked}}invisible{{end}}">{{svg "octicon-check"}}</span>
|
||||
<span class="text">
|
||||
{{avatar $.Context . 28 "gt-mr-3"}}{{template "repo/search_name" .}}
|
||||
{{avatar $.Context . 20 "gt-mr-3"}}{{template "repo/search_name" .}}
|
||||
</span>
|
||||
</a>
|
||||
{{end}}
|
||||
|
|
|
|||
|
|
@ -72,8 +72,8 @@
|
|||
max-height: 500px;
|
||||
}
|
||||
|
||||
.repository .metas .ui.list.assignees .icon {
|
||||
line-height: 2em;
|
||||
.repository .metas .ui.list.assignees .item {
|
||||
line-height: 2.5em;
|
||||
}
|
||||
|
||||
.repository .metas .ui.list.assignees .teamavatar {
|
||||
|
|
|
|||
|
|
@ -1,59 +0,0 @@
|
|||
import $ from 'jquery';
|
||||
import {updateIssuesMeta} from './repo-issue.js';
|
||||
import {toggleElem} from '../utils/dom.js';
|
||||
|
||||
export function initCommonIssue() {
|
||||
const $issueSelectAll = $('.issue-checkbox-all');
|
||||
const $issueCheckboxes = $('.issue-checkbox');
|
||||
|
||||
const syncIssueSelectionState = () => {
|
||||
const $checked = $issueCheckboxes.filter(':checked');
|
||||
const anyChecked = $checked.length !== 0;
|
||||
const allChecked = anyChecked && $checked.length === $issueCheckboxes.length;
|
||||
|
||||
if (allChecked) {
|
||||
$issueSelectAll.prop({'checked': true, 'indeterminate': false});
|
||||
} else if (anyChecked) {
|
||||
$issueSelectAll.prop({'checked': false, 'indeterminate': true});
|
||||
} else {
|
||||
$issueSelectAll.prop({'checked': false, 'indeterminate': false});
|
||||
}
|
||||
// if any issue is selected, show the action panel, otherwise show the filter panel
|
||||
toggleElem($('#issue-filters'), !anyChecked);
|
||||
toggleElem($('#issue-actions'), anyChecked);
|
||||
// there are two panels but only one select-all checkbox, so move the checkbox to the visible panel
|
||||
$('#issue-filters, #issue-actions').filter(':visible').find('.column:first').prepend($issueSelectAll);
|
||||
};
|
||||
|
||||
$issueCheckboxes.on('change', syncIssueSelectionState);
|
||||
|
||||
$issueSelectAll.on('change', () => {
|
||||
$issueCheckboxes.prop('checked', $issueSelectAll.is(':checked'));
|
||||
syncIssueSelectionState();
|
||||
});
|
||||
|
||||
$('.issue-action').on('click', async function (e) {
|
||||
e.preventDefault();
|
||||
let action = this.getAttribute('data-action');
|
||||
let elementId = this.getAttribute('data-element-id');
|
||||
const url = this.getAttribute('data-url');
|
||||
const issueIDs = $('.issue-checkbox:checked').map((_, el) => {
|
||||
return el.getAttribute('data-issue-id');
|
||||
}).get().join(',');
|
||||
if (elementId === '0' && url.slice(-9) === '/assignee') {
|
||||
elementId = '';
|
||||
action = 'clear';
|
||||
}
|
||||
if (action === 'toggle' && e.altKey) {
|
||||
action = 'toggle-alt';
|
||||
}
|
||||
updateIssuesMeta(
|
||||
url,
|
||||
action,
|
||||
issueIDs,
|
||||
elementId
|
||||
).then(() => {
|
||||
window.location.reload();
|
||||
});
|
||||
});
|
||||
}
|
||||
124
web_src/js/features/repo-issue-list.js
Normal file
124
web_src/js/features/repo-issue-list.js
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
import $ from 'jquery';
|
||||
import {updateIssuesMeta} from './repo-issue.js';
|
||||
import {toggleElem} from '../utils/dom.js';
|
||||
import {htmlEscape} from 'escape-goat';
|
||||
|
||||
function initRepoIssueListCheckboxes() {
|
||||
const $issueSelectAll = $('.issue-checkbox-all');
|
||||
const $issueCheckboxes = $('.issue-checkbox');
|
||||
|
||||
const syncIssueSelectionState = () => {
|
||||
const $checked = $issueCheckboxes.filter(':checked');
|
||||
const anyChecked = $checked.length !== 0;
|
||||
const allChecked = anyChecked && $checked.length === $issueCheckboxes.length;
|
||||
|
||||
if (allChecked) {
|
||||
$issueSelectAll.prop({'checked': true, 'indeterminate': false});
|
||||
} else if (anyChecked) {
|
||||
$issueSelectAll.prop({'checked': false, 'indeterminate': true});
|
||||
} else {
|
||||
$issueSelectAll.prop({'checked': false, 'indeterminate': false});
|
||||
}
|
||||
// if any issue is selected, show the action panel, otherwise show the filter panel
|
||||
toggleElem($('#issue-filters'), !anyChecked);
|
||||
toggleElem($('#issue-actions'), anyChecked);
|
||||
// there are two panels but only one select-all checkbox, so move the checkbox to the visible panel
|
||||
$('#issue-filters, #issue-actions').filter(':visible').find('.column:first').prepend($issueSelectAll);
|
||||
};
|
||||
|
||||
$issueCheckboxes.on('change', syncIssueSelectionState);
|
||||
|
||||
$issueSelectAll.on('change', () => {
|
||||
$issueCheckboxes.prop('checked', $issueSelectAll.is(':checked'));
|
||||
syncIssueSelectionState();
|
||||
});
|
||||
|
||||
$('.issue-action').on('click', async function (e) {
|
||||
e.preventDefault();
|
||||
let action = this.getAttribute('data-action');
|
||||
let elementId = this.getAttribute('data-element-id');
|
||||
const url = this.getAttribute('data-url');
|
||||
const issueIDs = $('.issue-checkbox:checked').map((_, el) => {
|
||||
return el.getAttribute('data-issue-id');
|
||||
}).get().join(',');
|
||||
if (elementId === '0' && url.slice(-9) === '/assignee') {
|
||||
elementId = '';
|
||||
action = 'clear';
|
||||
}
|
||||
if (action === 'toggle' && e.altKey) {
|
||||
action = 'toggle-alt';
|
||||
}
|
||||
updateIssuesMeta(
|
||||
url,
|
||||
action,
|
||||
issueIDs,
|
||||
elementId
|
||||
).then(() => {
|
||||
window.location.reload();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function initRepoIssueListAuthorDropdown() {
|
||||
const $searchDropdown = $('.user-remote-search');
|
||||
if (!$searchDropdown.length) return;
|
||||
|
||||
let searchUrl = $searchDropdown.attr('data-search-url');
|
||||
const actionJumpUrl = $searchDropdown.attr('data-action-jump-url');
|
||||
const selectedUserId = $searchDropdown.attr('data-selected-user-id');
|
||||
if (!searchUrl.includes('?')) searchUrl += '?';
|
||||
|
||||
$searchDropdown.dropdown('setting', {
|
||||
fullTextSearch: true,
|
||||
selectOnKeydown: false,
|
||||
apiSettings: {
|
||||
cache: false,
|
||||
url: `${searchUrl}&q={query}`,
|
||||
onResponse(resp) {
|
||||
// the content is provided by backend IssuePosters handler
|
||||
const processedResults = []; // to be used by dropdown to generate menu items
|
||||
for (const item of resp.results) {
|
||||
let html = `<img class="ui avatar gt-vm" src="${htmlEscape(item.avatar_link)}" aria-hidden="true" alt="" width="20" height="20"><span class="gt-ellipsis">${htmlEscape(item.username)}</span>`;
|
||||
if (item.full_name) html += `<span class="search-fullname gt-ml-3">${htmlEscape(item.full_name)}</span>`;
|
||||
processedResults.push({value: item.user_id, name: html});
|
||||
}
|
||||
resp.results = processedResults;
|
||||
return resp;
|
||||
},
|
||||
},
|
||||
action: (_text, value) => {
|
||||
window.location.href = actionJumpUrl.replace('{user_id}', encodeURIComponent(value));
|
||||
},
|
||||
onShow: () => {
|
||||
$searchDropdown.dropdown('filter', ' '); // trigger a search on first show
|
||||
},
|
||||
});
|
||||
|
||||
// we want to generate the dropdown menu items by ourselves, replace its internal setup functions
|
||||
const dropdownSetup = {...$searchDropdown.dropdown('internal', 'setup')};
|
||||
const dropdownTemplates = $searchDropdown.dropdown('setting', 'templates');
|
||||
$searchDropdown.dropdown('internal', 'setup', dropdownSetup);
|
||||
dropdownSetup.menu = function (values) {
|
||||
const $menu = $searchDropdown.find('> .menu');
|
||||
$menu.find('> .dynamic-item').remove(); // remove old dynamic items
|
||||
|
||||
const newMenuHtml = dropdownTemplates.menu(values, $searchDropdown.dropdown('setting', 'fields'), true /* html */, $searchDropdown.dropdown('setting', 'className'));
|
||||
if (newMenuHtml) {
|
||||
const $newMenuItems = $(newMenuHtml);
|
||||
$newMenuItems.addClass('dynamic-item');
|
||||
$menu.append('<div class="ui divider dynamic-item"></div>', ...$newMenuItems);
|
||||
}
|
||||
$searchDropdown.dropdown('refresh');
|
||||
// defer our selection to the next tick, because dropdown will set the selection item after this `menu` function
|
||||
setTimeout(() => {
|
||||
$menu.find('.item.active, .item.selected').removeClass('active selected');
|
||||
$menu.find(`.item[data-value="${selectedUserId}"]`).addClass('selected');
|
||||
}, 0);
|
||||
};
|
||||
}
|
||||
|
||||
export function initRepoIssueList() {
|
||||
if (!document.querySelectorAll('.page-content.repository.issue-list, .page-content.repository.milestone-issue-list').length) return;
|
||||
initRepoIssueListCheckboxes();
|
||||
initRepoIssueListAuthorDropdown();
|
||||
}
|
||||
|
|
@ -86,7 +86,7 @@ export function initRepoIssueDue() {
|
|||
});
|
||||
}
|
||||
|
||||
export function initRepoIssueList() {
|
||||
export function initRepoIssueSidebarList() {
|
||||
const repolink = $('#repolink').val();
|
||||
const repoId = $('#repoId').val();
|
||||
const crossRepoSearch = $('#crossRepoSearch').val();
|
||||
|
|
|
|||
|
|
@ -31,13 +31,12 @@ import {
|
|||
} from './features/repo-diff.js';
|
||||
import {
|
||||
initRepoIssueDue,
|
||||
initRepoIssueList,
|
||||
initRepoIssueReferenceRepositorySearch,
|
||||
initRepoIssueTimeTracking,
|
||||
initRepoIssueWipTitle,
|
||||
initRepoPullRequestMergeInstruction,
|
||||
initRepoPullRequestAllowMaintainerEdit,
|
||||
initRepoPullRequestReview,
|
||||
initRepoPullRequestReview, initRepoIssueSidebarList,
|
||||
} from './features/repo-issue.js';
|
||||
import {
|
||||
initRepoEllipsisButton,
|
||||
|
|
@ -77,7 +76,6 @@ import {initRepoEditor} from './features/repo-editor.js';
|
|||
import {initCompSearchUserBox} from './features/comp/SearchUserBox.js';
|
||||
import {initInstall} from './features/install.js';
|
||||
import {initCompWebHookEditor} from './features/comp/WebHookEditor.js';
|
||||
import {initCommonIssue} from './features/common-issue.js';
|
||||
import {initRepoBranchButton} from './features/repo-branch.js';
|
||||
import {initCommonOrganization} from './features/common-organization.js';
|
||||
import {initRepoWikiForm} from './features/repo-wiki.js';
|
||||
|
|
@ -89,6 +87,7 @@ import {initRepositoryActionView} from './components/RepoActionView.vue';
|
|||
import {initGlobalTooltips} from './modules/tippy.js';
|
||||
import {initGiteaFomantic} from './modules/fomantic.js';
|
||||
import {onDomReady} from './utils/dom.js';
|
||||
import {initRepoIssueList} from './features/repo-issue-list.js';
|
||||
|
||||
// Run time-critical code as soon as possible. This is safe to do because this
|
||||
// script appears at the end of <body> and rendered HTML is accessible at that point.
|
||||
|
|
@ -109,7 +108,6 @@ onDomReady(() => {
|
|||
initGlobalFormDirtyLeaveConfirm();
|
||||
initGlobalLinkActions();
|
||||
|
||||
initCommonIssue();
|
||||
initCommonOrganization();
|
||||
|
||||
initCompSearchUserBox();
|
||||
|
|
@ -163,6 +161,7 @@ onDomReady(() => {
|
|||
initRepoIssueContentHistory();
|
||||
initRepoIssueDue();
|
||||
initRepoIssueList();
|
||||
initRepoIssueSidebarList();
|
||||
initRepoIssueReferenceRepositorySearch();
|
||||
initRepoIssueTimeTracking();
|
||||
initRepoIssueWipTitle();
|
||||
|
|
|
|||
|
|
@ -132,6 +132,11 @@ function attachInit($dropdown) {
|
|||
const $focusable = $textSearch.length ? $textSearch : $dropdown; // the primary element for focus, see comment above
|
||||
if (!$focusable.length) return;
|
||||
|
||||
// as a combobox, the input should not have autocomplete by default
|
||||
if ($textSearch.length && !$textSearch.attr('autocomplete')) {
|
||||
$textSearch.attr('autocomplete', 'off');
|
||||
}
|
||||
|
||||
let $menu = $dropdown.find('> .menu');
|
||||
if (!$menu.length) {
|
||||
// some "multiple selection" dropdowns don't have a static menu element in HTML, we need to pre-create it to make it have correct aria attributes
|
||||
|
|
|
|||
|
|
@ -19,7 +19,48 @@ export function initGiteaFomantic() {
|
|||
return escape(text, preserveHTML) + svg('octicon-x', 16, `${className.delete} icon`);
|
||||
};
|
||||
|
||||
initFomanticApiPatch();
|
||||
|
||||
// Use the patches to improve accessibility, these patches are designed to be as independent as possible, make it easy to modify or remove in the future.
|
||||
initAriaCheckboxPatch();
|
||||
initAriaDropdownPatch();
|
||||
}
|
||||
|
||||
function initFomanticApiPatch() {
|
||||
//
|
||||
// Fomantic API module has some very buggy behaviors:
|
||||
//
|
||||
// If encodeParameters=true, it calls `urlEncodedValue` to encode the parameter.
|
||||
// However, `urlEncodedValue` just tries to "guess" whether the parameter is already encoded, by decoding the parameter and encoding it again.
|
||||
//
|
||||
// There are 2 problems:
|
||||
// 1. It may guess wrong, and skip encoding a parameter which looks like encoded.
|
||||
// 2. If the parameter can't be decoded, `decodeURIComponent` will throw an error, and the whole request will fail.
|
||||
//
|
||||
// This patch only fixes the second error behavior at the moment.
|
||||
//
|
||||
const patchKey = '_giteaFomanticApiPatch';
|
||||
const oldApi = $.api;
|
||||
$.api = $.fn.api = function(...args) {
|
||||
const apiCall = oldApi.bind(this);
|
||||
const ret = oldApi.apply(this, args);
|
||||
|
||||
if (typeof args[0] !== 'string') {
|
||||
const internalGet = apiCall('internal', 'get');
|
||||
if (!internalGet.urlEncodedValue[patchKey]) {
|
||||
const oldUrlEncodedValue = internalGet.urlEncodedValue;
|
||||
internalGet.urlEncodedValue = function (value) {
|
||||
try {
|
||||
return oldUrlEncodedValue(value);
|
||||
} catch {
|
||||
// if Fomantic API module's `urlEncodedValue` throws an error, we encode it by ourselves.
|
||||
return encodeURIComponent(value);
|
||||
}
|
||||
};
|
||||
internalGet.urlEncodedValue[patchKey] = true;
|
||||
}
|
||||
}
|
||||
return ret;
|
||||
};
|
||||
$.api.settings = oldApi.settings;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue