ChartView: update code for list-rendering (#513)

During list rendering, `v-for` is used with `v-if` which can increase the file processing time, due to additional checks. Let's follow the Vue style guide[1] by replacing these instances with computed properties, where necessary. Data is only updated when changed, instead of being generated every time. [1]: Vue style guide for avoiding use of v-if with for https://vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential
reposense · Feb 27, 2019 · a9ac842 · a9ac842
1 parent 6a85f30
commit a9ac842
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 15 deletions.
diff --git a/frontend/src/index.jade b/frontend/src/index.jade
@@ -104,7 +104,7 @@ html
               input(type="checkbox", v-model="filterGroupRepos").mui-checkbox.summary-picker__checkbox
               span group by repo/branch
         #summary-charts
-          .summary-charts(v-for="repo of filtered", v-if="repo.length>0")
+          .summary-charts(v-for="repo of filteredRepos")
             .summary-charts__title(
               v-if="filterGroupRepos",
             ) {{ repo[0].repoPath }}
@@ -181,7 +181,7 @@ html
                 span.bloc(v-bind:title="getTotalFileBlankLineInfo()") ({{ totalBlankLineCount }})
               template(v-for="type in Object.keys(filesLinesObj)")
                 label
-                  input(type="checkbox" :value="type" v-model="selectedFileTypes" v-on:change="selectFile").mui-checkbox
+                  input(type="checkbox" :checked="selectedFileTypes.includes(type)" v-on:change="selectFileType(type)").mui-checkbox
                   span(v-bind:title="getFileBlankLineInfo(type)") {{ type }}: {{ filesLinesObj[type] }}&nbsp;
                   span.bloc(v-bind:title="getFileBlankLineInfo(type)") ({{ filesBlankLinesObj[type] }})
 

diff --git a/frontend/src/static/js/v_authorship.js b/frontend/src/static/js/v_authorship.js
@@ -46,7 +46,6 @@ window.vAuthorship = {
       isSelectAllChecked: true,
       selectedFileTypes: [],
       fileTypes: [],
-      selectedFiles: [],
       filesLinesObj: {},
       filesBlankLinesObj: {},
       totalLineCount: '',
@@ -144,7 +143,6 @@ window.vAuthorship = {
 
       this.filesBlankLinesObj = filesBlanksInfoObj;
       this.files = res;
-      this.selectedFiles = res;
       this.isLoaded = true;
     },
 
@@ -169,30 +167,32 @@ window.vAuthorship = {
 
     selectAll() {
       if (!this.isSelectAllChecked) {
-        this.selectedFileTypes = this.fileTypes;
-        this.selectedFiles = this.files;
+        this.selectedFileTypes = this.fileTypes.slice();
       } else {
         this.selectedFileTypes = [];
-        this.selectedFiles = [];
       }
     },
 
-    selectFile() {
-      setTimeout(this.getSelectedFiles, 0);
-    },
+    selectFileType(type) {
+      if (this.selectedFileTypes.includes(type)) {
+        const index = this.selectedFileTypes.indexOf(type);
+        this.selectedFileTypes.splice(index, 1);
+      } else {
+        this.selectedFileTypes.push(type);
+      }
 
-    getSelectedFiles() {
       if (this.fileTypes.length === this.selectedFileTypes.length) {
-        this.selectedFiles = this.files;
         this.isSelectAllChecked = true;
       } else if (this.selectedFileTypes.length === 0) {
-        this.selectedFiles = [];
         this.isSelectAllChecked = false;
-      } else {
-        this.selectedFiles = this.files.filter((file) => this.selectedFileTypes.includes((file.path.split('.').pop())));
       }
     },
 
+    isSelected(filePath) {
+      const fileExt = filePath.split('.').pop();
+      return this.selectedFileTypes.includes(fileExt);
+    },
+
     getFileLink(file, path) {
       const repo = window.REPOS[this.info.repo];
 
@@ -212,6 +212,12 @@ window.vAuthorship = {
     },
   },
 
+  computed: {
+    selectedFiles() {
+      return this.files.filter((file) => this.isSelected(file.path));
+    },
+  },
+
   created() {
     this.initiate();
   },

diff --git a/frontend/src/static/js/v_summary.js b/frontend/src/static/js/v_summary.js
@@ -119,6 +119,9 @@ window.vSummary = {
 
       return totalLines / totalCount;
     },
+    filteredRepos() {
+      return this.filtered.filter((repo) => repo.length > 0);
+    },
   },
   methods: {
     // view functions //