Fix action class applied to all filters too often

WileyLabs · Apr 3, 2017 · 942777a · 942777a
1 parent a0a46a2
commit 942777a
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 19 deletions.
diff --git a/dist/index.js b/dist/index.js
@@ -5966,25 +5966,24 @@ window.app = new Vue({
       }
     },
     applyFilter: function() {
-      this.filtered = true;
+      if (this.filter.subject === ''
+        && this.filter.predicate === ''
+        && this.filter.object === '') {
+        this.filtered = false;
+      } else {
+        this.filtered = true;
+      }
       this.displayTriples(this.actual_filter);
     },
     removeFilter: function(filter) {
-      console.log('filter', filter, this.filter);
       if (undefined === filter) {
         this.filter = {
           subject: '',
           predicate: '',
           object: ''
         };
-        this.filtered = false;
       } else {
         this.filter[filter] = '';
-        if (this.filter.subject === ''
-          && this.filter.predicate === ''
-          && this.filter.object === '') {
-          this.filtered = false;
-        }
       }
       this.applyFilter();
     },

diff --git a/index.html b/index.html
@@ -104,7 +104,7 @@ <h1 class="ui dividing page header">
         </tr>
         <tr>
           <th>
-            <div class="ui fluid input" :class="{action: filtered}">
+            <div class="ui fluid input" :class="{action: filtered && filter.subject}">
               <input v-model="filter.subject" @keyup.enter="applyFilter()">
               <button class="ui basic icon button"
                 v-if="filtered && filter.subject" @click="removeFilter('subject')">
@@ -113,7 +113,7 @@ <h1 class="ui dividing page header">
             </div>
           </th>
           <th>
-            <div class="ui fluid input" :class="{action: filtered}">
+            <div class="ui fluid input" :class="{action: filtered && filter.predicate}">
               <input v-model="filter.predicate" @keyup.enter="applyFilter()">
               <button class="ui basic icon button"
                 v-if="filtered && filter.predicate" @click="removeFilter('predicate')">
@@ -122,7 +122,7 @@ <h1 class="ui dividing page header">
             </div>
           </th>
           <th>
-            <div class="ui fluid input" :class="{action: filtered}">
+            <div class="ui fluid input" :class="{action: filtered & filter.object}">
               <input v-model="filter.object" @keyup.enter="applyFilter()">
               <button class="ui basic icon button"
                 v-if="filtered && filter.object" @click="removeFilter('object')">

diff --git a/index.js b/index.js
@@ -185,25 +185,24 @@ window.app = new Vue({
       }
     },
     applyFilter: function() {
-      this.filtered = true;
+      if (this.filter.subject === ''
+        && this.filter.predicate === ''
+        && this.filter.object === '') {
+        this.filtered = false;
+      } else {
+        this.filtered = true;
+      }
       this.displayTriples(this.actual_filter);
     },
     removeFilter: function(filter) {
-      console.log('filter', filter, this.filter);
       if (undefined === filter) {
         this.filter = {
           subject: '',
           predicate: '',
           object: ''
         };
-        this.filtered = false;
       } else {
         this.filter[filter] = '';
-        if (this.filter.subject === ''
-          && this.filter.predicate === ''
-          && this.filter.object === '') {
-          this.filtered = false;
-        }
       }
       this.applyFilter();
     },