fix filter checkbox in dashboard

Author: yp05327

templates/user/dashboard/repolist.tmpl

@@ -48,22 +48,22 @@
 						<div class="menu">
 							<div class="item">
 								<a @click="toggleArchivedFilter()">
-									<div class="ui checkbox" id="archivedFilterCheckbox" title="{{.locale.Tr "home.show_both_archived_unarchived"}}" v-if="archivedFilter === 'both'">
-										<input type="checkbox">
+									<div class="ui checkbox indeterminate" id="archivedFilterCheckbox" title="{{.locale.Tr "home.show_both_archived_unarchived"}}" v-if="archivedFilter === 'both'">
+										<input type="checkbox" v-bind.prop="getArchivedFilterCheckboxState()">
 										<label>
 											{{svg "octicon-archive" 16 "mr-2"}}
 											{{.locale.Tr "home.show_archived"}}
 										</label>
 									</div>
 									<div class="ui checkbox" id="archivedFilterCheckbox" title="{{.locale.Tr "home.show_only_unarchived"}}" v-if="archivedFilter === 'unarchived'">
-										<input type="checkbox">
+										<input type="checkbox" v-bind.prop="getArchivedFilterCheckboxState()">
 										<label>
 											{{svg "octicon-archive" 16 "mr-2"}}
 											{{.locale.Tr "home.show_archived"}}
 										</label>
 									</div>
-									<div class="ui checkbox" id="archivedFilterCheckbox" title="{{.locale.Tr "home.show_only_archived"}}" v-if="archivedFilter === 'archived'">
-										<input type="checkbox">
+									<div class="ui checkbox checked" id="archivedFilterCheckbox" title="{{.locale.Tr "home.show_only_archived"}}" v-if="archivedFilter === 'archived'">
+										<input type="checkbox" v-bind.prop="getArchivedFilterCheckboxState()">
 										<label>
 											{{svg "octicon-archive" 16 "mr-2"}}
 											{{.locale.Tr "home.show_archived"}}
@@ -73,22 +73,22 @@
 							</div>
 							<div class="item">
 								<a @click="togglePrivateFilter()">
-									<div class="ui checkbox" id="privateFilterCheckbox" title="{{.locale.Tr "home.show_both_private_public"}}" v-if="privateFilter === 'both'">
-										<input type="checkbox">
+									<div class="ui checkbox indeterminate" id="privateFilterCheckbox" title="{{.locale.Tr "home.show_both_private_public"}}" v-if="privateFilter === 'both'">
+										<input type="checkbox" v-bind.prop="getPrivateFilterCheckboxState()">
 										<label>
 											{{svg "octicon-lock" 16 "mr-2"}}
 											{{.locale.Tr "home.show_private"}}
 										</label>
 									</div>
 									<div class="ui checkbox" id="privateFilterCheckbox" title="{{.locale.Tr "home.show_only_public"}}" v-if="privateFilter === 'public'">
-										<input type="checkbox">
+										<input type="checkbox" v-bind.prop="getPrivateFilterCheckboxState()">
 										<label>
 											{{svg "octicon-lock" 16 "mr-2"}}
 											{{.locale.Tr "home.show_private"}}
 										</label>
 									</div>
-									<div class="ui checkbox" id="privateFilterCheckbox" title="{{.locale.Tr "home.show_only_private"}}" v-if="privateFilter === 'private'">
-										<input type="checkbox">
+									<div class="ui checkbox checked" id="privateFilterCheckbox" title="{{.locale.Tr "home.show_only_private"}}" v-if="privateFilter === 'private'">
+										<input type="checkbox" v-bind.prop="getPrivateFilterCheckboxState()">
 											<label>
 												{{svg "octicon-lock" 16 "mr-2"}}
 												{{.locale.Tr "home.show_private"}}

web_src/js/components/DashboardRepoList.js

@@ -144,7 +144,6 @@ function initVueComponents(app) {
         initTooltip(elTooltip);
       }
       $(el).find('.dropdown').dropdown();
-      this.setCheckboxes();
       nextTick(() => {
         this.$refs.search.focus();
       });
@@ -156,36 +155,55 @@ function initVueComponents(app) {
         this.updateHistory();
       },
 
-      setCheckboxes() {
+      getArchivedFilterCheckboxState() {
         switch (this.archivedFilter) {
           case 'unarchived':
-            $('#archivedFilterCheckbox').checkbox('set unchecked');
-            break;
+            return {
+              checked: false,
+              indeterminate: false
+            }
           case 'archived':
-            $('#archivedFilterCheckbox').checkbox('set checked');
-            break;
+            return {
+              checked: true,
+              indeterminate: false
+            }
           case 'both':
-            $('#archivedFilterCheckbox').checkbox('set indeterminate');
-            break;
+            return {
+              checked: false,
+              indeterminate: true
+            }
           default:
             this.archivedFilter = 'unarchived';
-            $('#archivedFilterCheckbox').checkbox('set unchecked');
-            break;
+            return {
+              checked: false,
+              indeterminate: true
+            }
         }
+      },
+
+      getPrivateFilterCheckboxState() {
         switch (this.privateFilter) {
           case 'public':
-            $('#privateFilterCheckbox').checkbox('set unchecked');
-            break;
+            return {
+              checked: false,
+              indeterminate: false
+            }
           case 'private':
-            $('#privateFilterCheckbox').checkbox('set checked');
-            break;
+            return {
+              checked: true,
+              indeterminate: false
+            }
           case 'both':
-            $('#privateFilterCheckbox').checkbox('set indeterminate');
-            break;
+            return {
+              checked: false,
+              indeterminate: true
+            }
           default:
             this.privateFilter = 'both';
-            $('#privateFilterCheckbox').checkbox('set indeterminate');
-            break;
+            return {
+              checked: false,
+              indeterminate: true
+            }
         }
       },
 
@@ -261,7 +279,6 @@ function initVueComponents(app) {
         }
         this.page = 1;
         this.repos = [];
-        this.setCheckboxes();
         this.counts[`${this.reposFilter}:${this.archivedFilter}:${this.privateFilter}`] = 0;
         this.searchRepos();
       },
@@ -283,7 +300,6 @@ function initVueComponents(app) {
         }
         this.page = 1;
         this.repos = [];
-        this.setCheckboxes();
         this.counts[`${this.reposFilter}:${this.archivedFilter}:${this.privateFilter}`] = 0;
         this.searchRepos();
       },