Skip to content

Commit 0f4b0cf

Browse files
wxiaoguangwxiaoguang
authored
Refactor some frontend problems (#32646)
1. correct the modal usage on "admin email list" page (then `web_src/js/features/admin/emails.ts` is removed) 2. use `addDelegatedEventListener` instead of `jQuery().on` 3. more jQuery related changes and remove jQuery from `web_src/js/features/common-button.ts` 4. improve `confirmModal` to make it support header, and remove incorrect double-escaping 5. fix more typescript related types 6. fine tune devtest pages and add more tests
1 parent 722e703 commit 0f4b0cf

22 files changed

+192
-183
lines changed

‎routers/web/admin/emails.go‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@ func ActivateEmail(ctx *context.Context) {
154154

155155
// DeleteEmail serves a POST request for delete a user's email
156156
func DeleteEmail(ctx *context.Context) {
157-
u, err := user_model.GetUserByID(ctx, ctx.FormInt64("Uid"))
157+
u, err := user_model.GetUserByID(ctx, ctx.FormInt64("uid"))
158158
if err != nil || u == nil {
159159
ctx.ServerError("GetUserByID", err)
160160
return

‎routers/web/devtest/devtest.go‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,12 @@ func List(ctx *context.Context) {
2424
var subNames []string
2525
for _, tmplName := range templateNames {
2626
subName := strings.TrimSuffix(tmplName, ".tmpl")
27-
if subName != "list" {
27+
if !strings.HasPrefix(subName, "devtest-") {
2828
subNames = append(subNames, subName)
2929
}
3030
}
3131
ctx.Data["SubNames"] = subNames
32-
ctx.HTML(http.StatusOK, "devtest/list")
32+
ctx.HTML(http.StatusOK, "devtest/devtest-list")
3333
}
3434

3535
func FetchActionTest(ctx *context.Context) {

‎templates/admin/emails/list.tmpl‎

Lines changed: 20 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -50,20 +50,21 @@
5050
<td>{{svg (Iif .IsPrimary "octicon-check" "octicon-x")}}</td>
5151
<td>
5252
{{if .CanChange}}
53-
<a class="link-email-action" href data-uid="{{.UID}}"
54-
data-email="{{.Email}}"
55-
data-primary="{{if .IsPrimary}}1{{else}}0{{end}}"
56-
data-activate="{{if .IsActivated}}0{{else}}1{{end}}">
53+
<a class="show-modal" href data-modal="#change-email-modal" data-modal-uid="{{.UID}}"
54+
data-modal-email="{{.Email}}"
55+
data-modal-primary="{{if .IsPrimary}}1{{else}}0{{end}}"
56+
data-modal-activate="{{if .IsActivated}}0{{else}}1{{end}}">
5757
{{svg (Iif .IsActivated "octicon-check" "octicon-x")}}
5858
</a>
5959
{{else}}
6060
{{svg (Iif .IsActivated "octicon-check" "octicon-x")}}
6161
{{end}}
6262
</td>
6363
<td>
64-
<div class="tw-flex tw-gap-2">
65-
<a class="delete-button" href="" data-url="{{$.Link}}/delete" data-id="{{.ID}}" data-data-uid="{{.UID}}">{{svg "octicon-trash"}}</a>
66-
</div>
64+
<a class="link-action negative" href data-url="{{$.Link}}/delete?id={{.ID}}&uid={{.UID}}"
65+
data-modal-confirm-header="{{ctx.Locale.Tr "admin.emails.delete"}}"
66+
data-modal-confirm-content="{{ctx.Locale.Tr "admin.emails.delete_desc"}}"
67+
>{{svg "octicon-trash"}}</a>
6768
</td>
6869
</tr>
6970
{{end}}
@@ -77,40 +78,24 @@
7778
<div class="header">
7879
{{ctx.Locale.Tr "admin.emails.change_email_header"}}
7980
</div>
80-
<div class="content">
81+
<form class="content ui form" action="{{AppSubUrl}}/-/admin/emails/activate" method="post">
8182
<p class="center">{{ctx.Locale.Tr "admin.emails.change_email_text"}}</p>
8283

83-
<form class="ui form" id="email-action-form" action="{{AppSubUrl}}/-/admin/emails/activate" method="post">
84-
{{$.CsrfTokenHtml}}
84+
{{$.CsrfTokenHtml}}
8585

86-
<input type="hidden" id="query-sort" name="sort" value="{{.SortType}}">
87-
<input type="hidden" id="query-keyword" name="q" value="{{.Keyword}}">
88-
<input type="hidden" id="query-primary" name="is_primary" value="{{.IsPrimary}}" required>
89-
<input type="hidden" id="query-activated" name="is_activated" value="{{.IsActivated}}" required>
86+
<input type="hidden" name="sort" value="{{.SortType}}">
87+
<input type="hidden" name="q" value="{{.Keyword}}">
88+
<input type="hidden" name="is_primary" value="{{.IsPrimary}}">
89+
<input type="hidden" name="is_activated" value="{{.IsActivated}}">
9090

91-
<input type="hidden" id="form-uid" name="uid" value="" required>
92-
<input type="hidden" id="form-email" name="email" value="" required>
93-
<input type="hidden" id="form-primary" name="primary" value="" required>
94-
<input type="hidden" id="form-activate" name="activate" value="" required>
91+
<input type="hidden" name="uid">
92+
<input type="hidden" name="email">
93+
<input type="hidden" name="primary">
94+
<input type="hidden" name="activate">
9595

96-
<div class="center">
97-
{{template "base/modal_actions_confirm" .}}
98-
</div>
99-
</form>
100-
</div>
96+
{{template "base/modal_actions_confirm" .}}
97+
</form>
10198
</div>
102-
103-
</div>
104-
105-
<div class="ui g-modal-confirm delete modal">
106-
<div class="header">
107-
{{svg "octicon-trash"}}
108-
{{ctx.Locale.Tr "admin.emails.delete"}}
109-
</div>
110-
<div class="content">
111-
{{ctx.Locale.Tr "admin.emails.delete_desc"}}
11299
</div>
113-
{{template "base/modal_actions_confirm" .}}
114-
</div>
115100

116101
{{template "admin/layout_footer" .}}

‎templates/devtest/devtest-footer.tmpl‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{{/* TODO: the devtest.js is isolated from index.js, so no module is shared and many index.js functions do not work in devtest.ts */}}
2+
<script src="{{AssetUrlPrefix}}/js/devtest.js?v={{AssetVersion}}"></script>
3+
{{template "base/footer" dict}}

‎templates/devtest/devtest-header.tmpl‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
{{template "base/head" dict}}
2+
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">

‎templates/devtest/list.tmpl‎ renamed to ‎templates/devtest/devtest-list.tmpl‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
{{template "base/head" .}}
2-
1+
{{template "devtest/devtest-header"}}
32
<ul>
43
{{range .SubNames}}
54
<li><a href="{{AppSubUrl}}/devtest/{{.}}">{{.}}</a></li>
@@ -11,5 +10,4 @@ ul {
1110
line-height: 2em;
1211
}
1312
</style>
14-
15-
{{template "base/footer" .}}
13+
{{template "devtest/devtest-footer"}}

‎templates/devtest/fetch-action.tmpl‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
{{template "base/head" .}}
1+
{{template "devtest/devtest-header"}}
22
<div class="page-content devtest ui container">
33
{{template "base/alert" .}}
44
<div>
@@ -11,6 +11,7 @@
1111
<button class="link-action" data-url="fetch-action-test?k=1">test action</button>
1212
<button class="link-action" data-url="fetch-action-test?k=1" data-modal-confirm="confirm?">test with confirm</button>
1313
<button class="ui red button link-action" data-url="fetch-action-test?k=1" data-modal-confirm="confirm?">test with risky confirm</button>
14+
<button class="ui button link-action" data-url="fetch-action-test?k=1" data-modal-confirm-header="confirm header" data-modal-confirm-content="confirm content">test with confirm header</button>
1415
</div>
1516
</div>
1617
<div>
@@ -41,4 +42,4 @@
4142
border: 1px red dashed; /* show the border for demo purpose */
4243
}
4344
</style>
44-
{{template "base/footer" .}}
45+
{{template "devtest/devtest-footer"}}

‎templates/devtest/flex-list.tmpl‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
{{template "base/head" .}}
2-
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
1+
{{template "devtest/devtest-header"}}
32
<div class="page-content devtest">
43
<div class="ui container">
54
<h1>Flex List (standalone)</h1>
@@ -112,4 +111,4 @@
112111
</div>
113112
</div>
114113
</div>
115-
{{template "base/footer" .}}
114+
{{template "devtest/devtest-footer"}}

‎templates/devtest/fomantic-dropdown.tmpl‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
{{template "base/head" .}}
2-
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
1+
{{template "devtest/devtest-header"}}
32
<div class="page-content devtest ui container">
43
<div>
54
<h2>Dropdown</h2>
@@ -128,4 +127,4 @@
128127
</div>
129128
</div>
130129
</div>
131-
{{template "base/footer" .}}
130+
{{template "devtest/devtest-footer"}}

‎templates/devtest/fomantic-modal.tmpl‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
{{template "base/head" .}}
1+
{{template "devtest/devtest-header"}}
22
<div class="page-content devtest ui container">
33
{{template "base/alert" .}}
44
<div class="modal-buttons flex-text-block tw-flex-wrap"></div>
55
<script type="module">
6-
for (const el of $('.ui.modal')) {
6+
for (const el of $('.ui.modal:not([data-skip-button])')) {
77
const $btn = $('<button class="ui button">').text(`${el.id}`).on('click', () => {
88
$(el).modal({onApprove() {alert('confirmed')}}).modal('show');
99
});
@@ -69,5 +69,27 @@
6969
<div class="content">hello, this is the modal dialog content, this is a dangerous operation</div>
7070
{{template "base/modal_actions_confirm" (dict "ModalButtonDangerText" "I know and must do this is dangerous operation")}}
7171
</div>
72+
73+
<div class="divider"></div>
74+
75+
<button class="show-modal" data-modal="#test-modal-fill-values"
76+
data-modal-fill-by-id="value for id"
77+
data-modal-fill-by-name="value for name"
78+
data-modal-fill-by-class="value for class"
79+
data-modal-p="value for tag"
80+
data-modal-a.text-content="fill with attr"
81+
>test-modal-fill-values</button>
82+
83+
<div id="test-modal-fill-values" class="ui mini modal" data-skip-button>
84+
<div class="header">Modal dialog (fill values)</div>
85+
<form class="content">
86+
<div id="fill-by-id"></div>
87+
<input name="fill-by-name">
88+
<div class="fill-by-class"></div>
89+
<p></p>
90+
<a href="#">link</a>
91+
{{template "base/modal_actions_confirm" dict}}
92+
</form>
93+
</div>
7294
</div>
73-
{{template "base/footer" .}}
95+
{{template "devtest/devtest-footer"}}

0 commit comments

Comments
 (0)