Fixed Record visibility architecture

src/components/juggl/JugglRecordsList.vue

@@ -1,6 +1,6 @@
 <template>
   <b-table
-    :items="shownRecords"
+    :items="records"
     hover
     :busy="isLoading"
     :fields="fields"
@@ -98,11 +98,6 @@ export default {
       required: false,
       type: Boolean,
       default: true
-    },
-    onlyVisibleProjects: {
-      required: false,
-      type: Boolean,
-      default: true
     }
   },
   data() {
@@ -150,24 +145,6 @@ export default {
       }
 
       return fields;
-    },
-    shownRecords: function() {
-      if (!this.onlyVisibleProjects) {
-        return this.records;
-      }
-
-      // Only return records from visible projects
-      var visibleProjects = store.getters.visibleProjects;
-      var visibleIds = [];
-      Object.values(visibleProjects)
-        .filter(p => p.visible)
-        .forEach(p => {
-          visibleIds.push(p.project_id);
-        });
-
-      return Object.values(this.records).filter(r =>
-        visibleIds.includes(r.project_id)
-      );
     }
   },
   methods: {

src/store/modules/juggl.js

@@ -44,6 +44,34 @@ export const juggl = {
     finishedRecords: state => {
       return Object.values(state.records).filter(record => !record.running);
     },
+    getFilteredRecords: (state, getters) => ({
+      running = undefined,
+      projectVisible = undefined,
+      records = undefined
+    }) => {
+      if (records == undefined) {
+        records = getters.records;
+      }
+
+      var visibleProjects = getters.visibleProjects;
+      var visibleIds = [];
+      Object.values(visibleProjects)
+        .filter(p => p.visible)
+        .forEach(p => {
+          visibleIds.push(p.project_id);
+        });
+
+      return Object.values(records).filter(rec => {
+        if (running !== undefined && running !== rec.running) {
+          return false;
+        }
+        var recProjectVisible = visibleIds.includes(rec.project_id);
+        if (projectVisible !== undefined && projectVisible !== recProjectVisible) {
+          return false;
+        }
+        return true;
+      });
+    },
     auth: state => state.auth,
     apiUrl: state => state.apiUrl,
     user: state => state.user,

src/views/Home.vue

@@ -47,10 +47,10 @@ export default {
       return store.getters.getFilteredProjects({finished: true, visible: true});
     },
     finishedRecords: () => {
-      return store.getters.finishedRecords;
+      return store.getters.getFilteredRecords({running: false, projectVisible: true});
     },
     runningRecords: () => {
-      return store.getters.runningRecords;
+      return store.getters.getFilteredRecords({running: true, projectVisible: true});
     }
   },
   created: () => {