[#504] CodeView: add glob pattern search box (#532)

The addition of #170 provides users with the convenience of filtering
the files in code view by formats using tick boxes. However, this does
not solve the problem of finding specific file(s) by name, folder or
path.

As a solution, let's add a search box to provide users with an
additional option of filtering files by glob patterns. E.g.
**/test/*.java.

build.gradle

@@ -64,11 +64,13 @@ shadowJar {
     destinationDir = file("${buildDir}/jar/")
 }
 
-task zipReport(dependsOn: 'npmRunSpuild', type: Zip) {
+task zipReport(dependsOn: 'npmRunBrowserify', type: Zip) {
     from 'frontend/build/'
     baseName = 'templateZip'
     destinationDir = file('src/main/resources')
 }
+
+tasks.npmRunBrowserify.dependsOn('npmRunSpuild');
 tasks.shadowJar.dependsOn('zipReport');
 tasks.compileJava.dependsOn('zipReport');
 tasks.run.dependsOn('compileJava');

docs/UserGuide.md

@@ -82,7 +82,9 @@ The `Chart Panel` (an example is shown above) contains _Ramp Charts_ and _Contri
 
 The `Code Panel` allows users to see the code attributed to a specific author. Click on the name of the author in the `Chart Panel` to display the `Code Panel` on the right.
 * The Code Panel shows the files that contain author's contributions, sorted by the number of lines written.
-* Select the checkboxes to include files of preferred file extensions.
+* Select the radio button to enable one of the following 2 filters. Note that only 1 of the 2 filters is active at any time.
+    * Type file path glob in glob filter to include files matching the glob expression.
+    * Select the checkboxes to include files of preferred file extensions.
 * Clicking the file title toggles the file content.
 * Clicking the first icon beside the file title opens the history view of the file on github.
 * Clicking the second icon beside the file title opens the blame view of the file on github.

frontend/src/index.jade

@@ -172,16 +172,23 @@ html
             v-bind:title="'Click to open the repo'"
           ) {{ info.repo }}
           .author {{ info.name }} ({{ info.author }}) contribution from {{ info.minDate }} to {{ info.maxDate }}
-          .contribution(v-if="isLoaded")
+          .contribution(v-if="isLoaded && files.length!=0")
+            input.radio-button--search(type="radio", name="filter", value="search", v-on:click="enableSearchBar()")
+            form.file-picker.mui-form--inline(onsubmit="return false")
+              input#search(type="search", placeholder="Filter by glob", v-on:change="updateFilterSearch", disabled)
+              button#submit-button(type="submit", disabled) Filter
+            input.radio-button--checkbox(type="radio", name="filter", value="checkboxes", v-on:click="enableCheckBoxes()",
+                checked)
             div.checkboxes.mui-form--inline(v-if="files.length > 0")
               label
-                input(type="checkbox" v-on:click="selectAll" v-model="isSelectAllChecked").mui-checkbox
+                input.mui-checkbox--filetype(type="checkbox" v-on:click="selectAll" v-model="isSelectAllChecked")
                 span.select(v-bind:title="getTotalFileBlankLineInfo()") All: 
                 span.loc(v-bind:title="getTotalFileBlankLineInfo()") {{ totalLineCount }} 
                 span.bloc(v-bind:title="getTotalFileBlankLineInfo()") ({{ totalBlankLineCount }})
               template(v-for="type in Object.keys(filesLinesObj)")
                 label
-                  input(type="checkbox" :checked="selectedFileTypes.includes(type)" v-on:change="selectFileType(type)").mui-checkbox
+                  input.mui-checkbox--filetype(type="checkbox" :checked="selectedFileTypes.includes(type)"
+                      v-on:change="selectFileType(type)")
                   span(v-bind:title="getFileBlankLineInfo(type)") {{ type }}: {{ filesLinesObj[type] }} 
                   span.bloc(v-bind:title="getFileBlankLineInfo(type)") ({{ filesBlankLinesObj[type] }})
 

frontend/src/static/css/style.scss

@@ -275,6 +275,33 @@ header{
             margin-top:0.1rem;
             color:mui-color("red");
 
+            .radio-button--search{
+                float:left;
+                margin:1.5rem 2.0rem 0rem 0rem;
+            }
+
+            .radio-button--checkbox{
+                float:left;
+                margin:0.25rem 2.0rem 0rem 0rem;
+            }
+
+            #search{
+                padding:0.5rem 1.0rem 0.25rem 1.0rem;
+                margin-top:1.0rem;
+                width: 30%;
+            }
+
+            #submit-button{
+                background-color:mui-color("blue");
+                color:mui-color("white");
+                margin:1.0rem 0rem 0rem 0.25rem;
+                padding:0.5rem 1.0rem 0.25rem 1.0rem;
+            }
+
+            #submit-button[disabled]{
+                background-color:mui-color("grey");
+            }
+
             .select {
               font-weight:bold;
             }

frontend/src/static/js/v_authorship.js

@@ -36,6 +36,8 @@ window.expandAll = function expandAll(isActive) {
 };
 
 const repoCache = [];
+const minimatch = require('minimatch');
+
 window.vAuthorship = {
   props: ['info'],
   template: window.$('v_authorship').innerHTML,
@@ -50,6 +52,7 @@ window.vAuthorship = {
       filesBlankLinesObj: {},
       totalLineCount: '',
       totalBlankLineCount: '',
+      filterSearch: '*',
     };
   },
 
@@ -188,6 +191,43 @@ window.vAuthorship = {
       }
     },
 
+    updateFilterSearch(evt) {
+      this.filterSearch = (evt.target.value.length !== 0) ? evt.target.value : '*';
+    },
+
+    tickAllCheckboxes() {
+      this.selectedFileTypes = this.fileTypes.slice();
+      this.isSelectAllChecked = true;
+      this.filterSearch = '*';
+    },
+
+    enableSearchBar() {
+      const searchBar = document.getElementById('search');
+      const submitButton = document.getElementById('submit-button');
+      searchBar.disabled = false;
+      submitButton.disabled = false;
+
+      this.tickAllCheckboxes();
+      const checkboxes = document.getElementsByClassName('mui-checkbox--filetype');
+      Array.from(checkboxes).forEach((checkbox) => {
+        checkbox.disabled = true;
+      });
+    },
+
+    enableCheckBoxes() {
+      const searchBar = document.getElementById('search');
+      const submitButton = document.getElementById('submit-button');
+      searchBar.value = '';
+      searchBar.disabled = true;
+      submitButton.disabled = true;
+
+      this.tickAllCheckboxes();
+      const checkboxes = document.getElementsByClassName('mui-checkbox--filetype');
+      Array.from(checkboxes).forEach((checkbox) => {
+        checkbox.disabled = false;
+      });
+    },
+
     isSelected(filePath) {
       const fileExt = filePath.split('.').pop();
       return this.selectedFileTypes.includes(fileExt);
@@ -214,7 +254,8 @@ window.vAuthorship = {
 
   computed: {
     selectedFiles() {
-      return this.files.filter((file) => this.isSelected(file.path));
+      return this.files.filter((file) => this.isSelected(file.path)
+          && minimatch(file.path, this.filterSearch, { matchBase: true }));
     },
   },
 

package.json

@@ -8,6 +8,7 @@
   },
   "scripts": {
     "lint": "eslint",
+    "browserify": "browserify -t vueify -e frontend/src/static/js/v_authorship.js -o frontend/build/static/js/v_authorship.js",
     "spuild": "spuild frontend"
   },
   "repository": {
@@ -21,11 +22,14 @@
   },
   "homepage": "https://github.com/reposense/RepoSense#readme",
   "dependencies": {
+    "minimatch": "^3.0.4",
     "spuild": "1.0.2"
   },
   "devDependencies": {
+    "browserify": "^16.2.3",
     "eslint": "^4.19.1",
     "eslint-config-airbnb-base": "^13.0.0",
-    "eslint-plugin-import": "^2.13.0"
+    "eslint-plugin-import": "^2.13.0",
+    "vueify": "^9.4.1"
   }
 }