Refactor toolbar into v-authorship tab

frontend/src/index.jade

@@ -41,13 +41,10 @@ html
             i.fas.fa-caret-right
           .tab-content
             .tab-panes
-              #tab-authorship.tab-pane(v-if="isTabAuthorship")
-                .toolbar(v-if="tabInfo.tabAuthorship.totalCommits > 0")
-                    a(v-if="isCollapsed", v-on:click="expand(true)") Expand all
-                    a(v-else, v-on:click="expand(false)") Collapse all
-                v_authorship(
-                  v-bind:key="generateKey(tabInfo.tabAuthorship)",
-                  v-bind:info="tabInfo.tabAuthorship")
+              v_authorship#tab-authorship.tab-pane(
+                v-if="tabType === 'authorship'"
+                v-bind:key="generateKey(tabInfo.tabAuthorship)",
+                v-bind:info="tabInfo.tabAuthorship")
               #tab-empty.tab-pane(v-else)
                 .title
                   span To view the code attributed to a specific author, click the  
@@ -199,6 +196,10 @@ html
 
     vuetemplate#v_authorship
       #authorship
+        // TODO: remove in #524
+        .toolbar(v-if="info.totalCommits > 0")
+            a(v-if="activeFileCount === 0", v-on:click="expandAll(true)") Expand all
+            a(v-else, v-on:click="expandAll(false)") Collapse all
         .title
           a.repoName(
             v-bind:href="info.location", target="_blank",
@@ -226,11 +227,11 @@ html
                   span.bloc(v-bind:title="getFileBlankLineInfo(format)") ({{ filesBlankLinesObj[format] }})
 
         .files(v-if="isLoaded")
-          .empty(v-if="files.length===0") nothing to see here :(
+          .empty(v-if="files.length === 0") nothing to see here :(
           template(v-for="file in selectedFiles")
             .file.active(v-bind:key="file.path")
               .title
-                span.path(onclick="toggleNext(this.parentNode)") {{ file.path }} 
+                span.path(onclick="toggleNext(this.parentNode)", v-on:click="updateCount") {{ file.path }} 
                 span.loc ({{ file.lineCount }} lines)
                 a(
                   v-bind:href="getFileLink(file, 'commits')", target="_blank",

frontend/src/static/js/main.js

@@ -99,10 +99,10 @@ window.app = new window.Vue({
 
     isLoading: false,
     isCollapsed: false,
-    isTabActive: true,
-    isTabAuthorship: false,
+    isTabActive: true, // to force tab wrapper to load
+
+    tabType: 'empty',
     tabInfo: {},
-    tabAuthorship: {},
     creationDate: '',
   },
   methods: {
@@ -154,26 +154,22 @@ window.app = new window.Vue({
       });
       return full;
     },
-    deactivateTabs() {
-      this.isTabAuthorship = false;
+
+    deactivateTab() {
+      this.isTabActive = false;
+      if (document.getElementById('tabs-wrapper')) {
+        document.getElementById('tabs-wrapper').scrollTop = 0;
+      }
     },
 
     updateTabAuthorship(obj) {
-      this.deactivateTabs();
+      this.deactivateTab();
       this.tabInfo.tabAuthorship = Object.assign({}, obj);
 
       this.isTabActive = true;
-      this.isTabAuthorship = true;
       this.isCollapsed = false;
-      if (document.getElementById('tabs-wrapper')) {
-        document.getElementById('tabs-wrapper').scrollTop = 0;
-      }
-    },
 
-    /* global expandAll */
-    expand(isActive) {
-      this.isCollapsed = !isActive;
-      expandAll(isActive);
+      this.tabType = 'authorship';
     },
 
     generateKey(dataObj) {

frontend/src/static/js/v_authorship.js

@@ -13,26 +13,6 @@ window.toggleNext = function toggleNext(ele) {
   }
 
   parent.className = classes.join(' ');
-
-  // Update expand/collapse all button
-  window.updateToggleButton();
-};
-
-window.updateToggleButton = function updateToggleButton() {
-  if (document.getElementsByClassName('file active').length === document.getElementsByClassName('file').length) {
-    window.app.isCollapsed = false;
-  } else if (document.getElementsByClassName('file active').length === 0) {
-    window.app.isCollapsed = true;
-  }
-};
-
-window.expandAll = function expandAll(isActive) {
-  const renameValue = isActive ? 'file active' : 'file';
-
-  const files = document.getElementsByClassName('file');
-  Array.from(files).forEach((file) => {
-    file.className = renameValue;
-  });
 };
 
 const repoCache = [];
@@ -51,6 +31,7 @@ window.vAuthorship = {
       filesBlankLinesObj: {},
       totalLineCount: '',
       totalBlankLineCount: '',
+      activeFilesCount: 0,
       filterSearch: '*',
     };
   },
@@ -75,6 +56,21 @@ window.vAuthorship = {
       }
     },
 
+    expandAll(isActive) {
+      const renameValue = isActive ? 'file active' : 'file';
+
+      const files = document.getElementsByClassName('file');
+      Array.from(files).forEach((file) => {
+        file.className = renameValue;
+      });
+
+      this.activeFilesCount = isActive ? this.selectedFiles.length : 0;
+    },
+
+    updateCount() {
+      this.activeFilesCount = document.getElementsByClassName('file active').length;
+    },
+
     splitSegments(lines) {
       // split into segments separated by authored
       let lastState;
@@ -144,6 +140,8 @@ window.vAuthorship = {
       this.filesBlankLinesObj = filesBlanksInfoObj;
       this.files = res;
       this.isLoaded = true;
+
+      this.activeFilesCount = this.selectedFiles.length;
     },
 
     addBlankLineCountToFileFormat(path, lineCount, filesInfoObj) {
@@ -160,8 +158,10 @@ window.vAuthorship = {
     selectAll() {
       if (!this.isSelectAllChecked) {
         this.selectedFileFormats = this.fileFormats.slice();
+        this.activeFilesCount = this.files.length;
       } else {
         this.selectedFileFormats = [];
+        this.activeFilesCount = 0;
       }
     },
 
@@ -180,6 +180,8 @@ window.vAuthorship = {
       } else if (this.selectedFileFormats.length === 0) {
         this.isSelectAllChecked = false;
       }
+
+      setTimeout(this.updateCount, 0);
     },
 
     updateFilterSearch(evt) {
@@ -260,8 +262,4 @@ window.vAuthorship = {
   created() {
     this.initiate();
   },
-
-  updated() {
-    window.updateToggleButton();
-  },
 };