Skip to content

Commit 856089d

Browse files
wxiaoguangwxiaoguang
committed
fix
1 parent 579a6e1 commit 856089d

File tree

2 files changed

+60
-129
lines changed

2 files changed

+60
-129
lines changed

‎templates/user/dashboard/repolist.tmpl

+32-50
Original file line numberDiff line numberDiff line change
@@ -46,56 +46,38 @@
4646
<div class="ui dropdown icon button" title="{{.locale.Tr "home.filter"}}">
4747
<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
4848
<div class="menu">
49-
<div class="item">
50-
<a @click="toggleArchivedFilter()">
51-
<div class="ui checkbox indeterminate" id="archivedFilterCheckbox" title="{{.locale.Tr "home.show_both_archived_unarchived"}}" v-if="archivedFilter === 'both'">
52-
<input type="checkbox" v-bind.prop="getArchivedFilterCheckboxState()">
53-
<label>
54-
{{svg "octicon-archive" 16 "gt-mr-2"}}
55-
{{.locale.Tr "home.show_archived"}}
56-
</label>
57-
</div>
58-
<div class="ui checkbox" id="archivedFilterCheckbox" title="{{.locale.Tr "home.show_only_unarchived"}}" v-if="archivedFilter === 'unarchived'">
59-
<input type="checkbox" v-bind.prop="getArchivedFilterCheckboxState()">
60-
<label>
61-
{{svg "octicon-archive" 16 "gt-mr-2"}}
62-
{{.locale.Tr "home.show_archived"}}
63-
</label>
64-
</div>
65-
<div class="ui checkbox checked" id="archivedFilterCheckbox" title="{{.locale.Tr "home.show_only_archived"}}" v-if="archivedFilter === 'archived'">
66-
<input type="checkbox" v-bind.prop="getArchivedFilterCheckboxState()">
67-
<label>
68-
{{svg "octicon-archive" 16 "gt-mr-2"}}
69-
{{.locale.Tr "home.show_archived"}}
70-
</label>
71-
</div>
72-
</a>
73-
</div>
74-
<div class="item">
75-
<a @click="togglePrivateFilter()">
76-
<div class="ui checkbox indeterminate" id="privateFilterCheckbox" title="{{.locale.Tr "home.show_both_private_public"}}" v-if="privateFilter === 'both'">
77-
<input type="checkbox" v-bind.prop="getPrivateFilterCheckboxState()">
78-
<label>
79-
{{svg "octicon-lock" 16 "gt-mr-2"}}
80-
{{.locale.Tr "home.show_private"}}
81-
</label>
82-
</div>
83-
<div class="ui checkbox" id="privateFilterCheckbox" title="{{.locale.Tr "home.show_only_public"}}" v-if="privateFilter === 'public'">
84-
<input type="checkbox" v-bind.prop="getPrivateFilterCheckboxState()">
85-
<label>
86-
{{svg "octicon-lock" 16 "gt-mr-2"}}
87-
{{.locale.Tr "home.show_private"}}
88-
</label>
89-
</div>
90-
<div class="ui checkbox checked" id="privateFilterCheckbox" title="{{.locale.Tr "home.show_only_private"}}" v-if="privateFilter === 'private'">
91-
<input type="checkbox" v-bind.prop="getPrivateFilterCheckboxState()">
92-
<label>
93-
{{svg "octicon-lock" 16 "gt-mr-2"}}
94-
{{.locale.Tr "home.show_private"}}
95-
</label>
96-
</div>
97-
</a>
98-
</div>
49+
<a class="item" @click="toggleArchivedFilter()">
50+
<div class="ui checkbox"
51+
ref="checkboxArchivedFilter"
52+
data-title-both="{{.locale.Tr "home.show_both_archived_unarchived"}}"
53+
data-title-unarchived="{{.locale.Tr "home.show_only_unarchived"}}"
54+
data-title-archived="{{.locale.Tr "home.show_only_archived"}}"
55+
:title="checkboxArchivedFilterTitle"
56+
>
57+
<!--the "hidden" is necessary to make the checkbox work without Fomantic UI js,
58+
otherwise if the "input" handles click event for intermediate status, it breaks the internal state-->
59+
<input type="checkbox" class="hidden" v-bind.prop="checkboxArchivedFilterProps">
60+
<label>
61+
{{svg "octicon-archive" 16 "gt-mr-2"}}
62+
{{.locale.Tr "home.show_archived"}}
63+
</label>
64+
</div>
65+
</a>
66+
<a class="item" @click="togglePrivateFilter()">
67+
<div class="ui checkbox"
68+
ref="checkboxPrivateFilter"
69+
data-title-both="{{.locale.Tr "home.show_both_private_public"}}"
70+
data-title-public="{{.locale.Tr "home.show_only_public"}}"
71+
data-title-private="{{.locale.Tr "home.show_only_private"}}"
72+
:title="checkboxPrivateFilterTitle"
73+
>
74+
<input type="checkbox" class="hidden" v-bind.prop="checkboxPrivateFilterProps">
75+
<label>
76+
{{svg "octicon-lock" 16 "gt-mr-2"}}
77+
{{.locale.Tr "home.show_private"}}
78+
</label>
79+
</div>
80+
</a>
9981
</div>
10082
</div>
10183
</div>

‎web_src/js/components/DashboardRepoList.js

+28-79
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ function initVueComponents(app) {
8787
}
8888

8989
return {
90+
hasMounted: false, // accessing $refs in computed() need to wait for mounted
9091
tab,
9192
repos: [],
9293
reposTotalCount: 0,
@@ -134,7 +135,19 @@ function initVueComponents(app) {
134135
},
135136
repoTypeCount() {
136137
return this.counts[`${this.reposFilter}:${this.archivedFilter}:${this.privateFilter}`];
137-
}
138+
},
139+
checkboxArchivedFilterTitle() {
140+
return this.hasMounted && this.$refs.checkboxArchivedFilter?.getAttribute(`data-title-${this.archivedFilter}`);
141+
},
142+
checkboxArchivedFilterProps() {
143+
return {checked: this.archivedFilter === 'archived', indeterminate: this.archivedFilter === 'both'};
144+
},
145+
checkboxPrivateFilterTitle() {
146+
return this.hasMounted && this.$refs.checkboxPrivateFilter?.getAttribute(`data-title-${this.privateFilter}`);
147+
},
148+
checkboxPrivateFilterProps() {
149+
return {checked: this.privateFilter === 'private', indeterminate: this.privateFilter === 'both'};
150+
},
138151
},
139152

140153
mounted() {
@@ -147,6 +160,8 @@ function initVueComponents(app) {
147160
nextTick(() => {
148161
this.$refs.search.focus();
149162
});
163+
164+
this.hasMounted = true;
150165
},
151166

152167
methods: {
@@ -155,58 +170,6 @@ function initVueComponents(app) {
155170
this.updateHistory();
156171
},
157172

158-
getArchivedFilterCheckboxState() {
159-
switch (this.archivedFilter) {
160-
case 'unarchived':
161-
return {
162-
checked: false,
163-
indeterminate: false
164-
};
165-
case 'archived':
166-
return {
167-
checked: true,
168-
indeterminate: false
169-
};
170-
case 'both':
171-
return {
172-
checked: false,
173-
indeterminate: true
174-
};
175-
default:
176-
this.archivedFilter = 'unarchived';
177-
return {
178-
checked: false,
179-
indeterminate: true
180-
};
181-
}
182-
},
183-
184-
getPrivateFilterCheckboxState() {
185-
switch (this.privateFilter) {
186-
case 'public':
187-
return {
188-
checked: false,
189-
indeterminate: false
190-
};
191-
case 'private':
192-
return {
193-
checked: true,
194-
indeterminate: false
195-
};
196-
case 'both':
197-
return {
198-
checked: false,
199-
indeterminate: true
200-
};
201-
default:
202-
this.privateFilter = 'both';
203-
return {
204-
checked: false,
205-
indeterminate: true
206-
};
207-
}
208-
},
209-
210173
changeReposFilter(filter) {
211174
this.reposFilter = filter;
212175
this.repos = [];
@@ -263,19 +226,12 @@ function initVueComponents(app) {
263226
},
264227

265228
toggleArchivedFilter() {
266-
switch (this.archivedFilter) {
267-
case 'both':
268-
this.archivedFilter = 'unarchived';
269-
break;
270-
case 'unarchived':
271-
this.archivedFilter = 'archived';
272-
break;
273-
case 'archived':
274-
this.archivedFilter = 'both';
275-
break;
276-
default:
277-
this.archivedFilter = 'unarchived';
278-
break;
229+
if (this.archivedFilter === 'unarchived') {
230+
this.archivedFilter = 'archived';
231+
} else if (this.archivedFilter === 'archived') {
232+
this.archivedFilter = 'both';
233+
} else { // including both
234+
this.archivedFilter = 'unarchived';
279235
}
280236
this.page = 1;
281237
this.repos = [];
@@ -284,19 +240,12 @@ function initVueComponents(app) {
284240
},
285241

286242
togglePrivateFilter() {
287-
switch (this.privateFilter) {
288-
case 'both':
289-
this.privateFilter = 'public';
290-
break;
291-
case 'public':
292-
this.privateFilter = 'private';
293-
break;
294-
case 'private':
295-
this.privateFilter = 'both';
296-
break;
297-
default:
298-
this.privateFilter = 'both';
299-
break;
243+
if (this.privateFilter === 'both') {
244+
this.privateFilter = 'public';
245+
} else if (this.privateFilter === 'public') {
246+
this.privateFilter = 'private';
247+
} else { // including private
248+
this.privateFilter = 'both';
300249
}
301250
this.page = 1;
302251
this.repos = [];

0 commit comments

Comments
 (0)