Added basic visibility feature

public/api/services/jsonBuilder.inc.php

@@ -86,7 +86,8 @@ class JsonBuilder
             "record_tag_id" => "",
             "name" => "",
             "user_id" => "",
-            "visible" => ""
+            "visible" => "",
+            "bundle" => ""
         );
 
         $this->jsonData['record_tags'] = array();

public/api/services/jugglDbApi.inc.php

@@ -248,7 +248,7 @@ function updateRecordTag($user_id, $tag)
 
     // Update given parameters
     $data = [];
-    $props = ["name", "visible"];
+    $props = ["name", "visible", "bundle"];
     foreach ($props as $p) {
         if (array_key_exists ($p, $tag)) {
             $data[$p] = $tag[$p];
@@ -373,7 +373,9 @@ function getRecordExternalData($record)
         $data = [
             "record_tag_id" => $tag["record_tag_id"],
             "name" => $tag["name"],
-            "user_id" => $tag["user_id"]
+            "user_id" => $tag["user_id"],
+            "visible" => $tag["visible"],
+            "bundle" => $tag["bundle"]
         ];
         $tags[] = $data;
     }

src/components/forms/FormTagDetails.vue

@@ -88,7 +88,6 @@ export default {
   created: function() {
     this.form.record_tag_id = this.tag.record_tag_id;
     this.form.name = this.tag.name;
-    console.log(this.tag);
     this.form.visible = this.tag.visible;
   }
 };

src/components/juggl/JugglRecordsList.vue

@@ -1,6 +1,6 @@
 <template>
   <b-table
-    :items="records"
+    :items="shownRecords"
     hover
     :busy="isLoading"
     :fields="fields"
@@ -27,7 +27,10 @@
     </template>
 
     <template #cell(tags)="data">
-      <JugglTagField :recordId="data.item.record_id" />
+      <JugglTagField
+        :recordId="data.item.record_id"
+        :onlyVisible="onlyVisibleTags"
+      />
     </template>
 
     <template #cell(details)="data">
@@ -90,6 +93,16 @@ export default {
       required: false,
       type: Boolean,
       default: false
+    },
+    onlyVisibleTags: {
+      required: false,
+      type: Boolean,
+      default: true
+    },
+    onlyVisibleProjects: {
+      required: false,
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -137,6 +150,24 @@ 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/components/juggl/JugglTagField.vue

@@ -1,5 +1,6 @@
 <template>
   <div :id="containerId" class="tag-container">
+    <!-- Tag item list -->
     <div
       class="tag-item"
       v-for="tag in addedTags"
@@ -9,10 +10,12 @@
       {{ tag.name }}
     </div>
 
+    <!-- Add-button -->
     <div :id="btnId">
       <b-icon icon="plus" />
     </div>
 
+    <!-- Popover -->
     <b-popover
       :target="btnId"
       triggers="click"
@@ -53,6 +56,11 @@ export default {
   props: {
     recordId: {
       required: true
+    },
+    onlyVisible: {
+      required: false,
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -95,10 +103,17 @@ export default {
       );
     },
     allTags: function() {
-      return store.getters.tags;
+      if (this.onlyVisible) {
+        return store.getters.getFilteredTags({ visible: true });
+      } else {
+        return store.getters.tags;
+      }
     },
     addedTags: function() {
-      return this.record.tags;
+      Object.values(this.record.tags).forEach(t => console.log(t.visible));
+      return Object.values(this.record.tags).filter(
+        t => !this.onlyVisible || t.visible
+      );
     },
     usedTagIds: function() {
       var ids = [];

src/store/modules/juggl.js

@@ -73,10 +73,10 @@ export const juggl = {
       return getters.projectIds.filter(id => !runningProjectIds.includes(id));
     },
     finishedProjects: (state, getters) => {
-      var ids = getters.finishedProjectIds;
-      return Object.values(state.projects).filter(project =>
-        ids.includes(project.project_id)
-      );
+      return getters.getFilteredProjects({ finished: true });
+    },
+    visibleProjects: (state, getters) => {
+      return getters.getFilteredProjects({ visible: true });
     },
     runningProjects: (state, getters) => {
       var ids = getters.runningProjectIds;
@@ -89,6 +89,43 @@ export const juggl = {
         project => project.project_id === id
       );
     },
+    getFilteredProjects: (state, getters) => ({
+      finished = undefined,
+      visible = undefined,
+      projects = undefined
+    }) => {
+      if (projects == undefined) {
+        projects = getters.projects;
+      }
+
+      var runningIds = getters.runningProjectIds;
+      return Object.values(projects).filter(project => {
+        var projectFinished = !runningIds.includes(project.project_id);
+
+        if (finished !== undefined && finished !== projectFinished) {
+          return false;
+        }
+        if (visible !== undefined && visible !== project.visible) {
+          return false;
+        }
+        return true;
+      });
+    },
+    getFilteredTags: (state, getters) => ({
+      visible = undefined,
+      tags = undefined
+    }) => {
+      if (tags == undefined) {
+        tags = getters.tags;
+      }
+
+      return Object.values(tags).filter(tag => {
+        if (visible != undefined && visible !== tag.visible) {
+          return false;
+        }
+        return true;
+      });
+    },
     getTagById: (state, getters) => id => {
       return Object.values(getters.tags).find(tag => tag.record_tag_id === id);
     },

src/views/Home.vue

@@ -4,8 +4,8 @@
       <JugglRecordsList :records="runningRecords" running />
     </BaseSection>
     <BaseSection title="Projects">
-      <div v-if="finishedProjects.length > 0">
-        <JugglProjectsPanel :projects="finishedProjects" />
+      <div v-if="availableProjects.length > 0">
+        <JugglProjectsPanel :projects="availableProjects" />
       </div>
       <div id="add-project-form">
         <FormProjectAdd />
@@ -43,8 +43,8 @@ export default {
     BaseSection
   },
   computed: {
-    finishedProjects: () => {
-      return store.getters.finishedProjects;
+    availableProjects: () => {
+      return store.getters.getFilteredProjects({finished: true, visible: true});
     },
     finishedRecords: () => {
       return store.getters.finishedRecords;