Started work on single page libraries

app/imports/server/publications/library.js

@@ -32,31 +32,25 @@ Meteor.publish('libraries', function(){
 });
 
 let libraryIdSchema = new SimpleSchema({
-  libraryIds: {
-    type: Array,
-  },
-  'libraryIds.$':{
+  libraryId:{
     type: String,
     regEx: SimpleSchema.RegEx.Id,
   },
 });
 
-Meteor.publish('libraryNodes', function(libraryIds){
-  libraryIdSchema.validate({libraryIds});
-  if (!libraryIds.length) return [];
+Meteor.publish('libraryNodes', function(libraryId){
+  if (!libraryId) return [];
+  libraryIdSchema.validate({libraryId});
   this.autorun(function (){
     let userId = this.userId;
-    for (let i in libraryIds){
-      let libraryId = libraryIds[i];
     let library = Libraries.findOne(libraryId);
     try { assertViewPermission(library, userId) }
     catch(e){
       return this.error(e);
     }
-    }
     return [
       LibraryNodes.find({
-        'ancestors.id': {$in: libraryIds},
+        'ancestors.id': libraryId,
       }, {
         sort: {order: 1},
       }),

app/imports/ui/library/LibraryBrowser.vue

@@ -11,7 +11,7 @@
       expand
     >
       <v-expansion-panel-content
-        v-for="library in libraries"
+        v-for="(library, index) in libraries"
         :key="library._id"
         lazy
         :data-id="library._id"
@@ -27,6 +27,7 @@
             :organize-mode="organizeMode"
             :edit-mode="editMode"
             :selected-node-id="selectedNodeId"
+            :should-subscribe="isExpanded(index)"
             @selected="e => $emit('selected', e)"
           />
           <v-card-actions>
@@ -94,17 +95,6 @@ export default {
   meteor: {
     $subscribe: {
       'libraries': [],
-      'libraryNodes'(){
-        if (!this.expandedLibrary) return [[]];
-        let libraryIds = [];
-        this.expandedLibrary.forEach((expanded, index) => {
-          if (expanded){
-            let library = this.libraries[index];
-            if (library) libraryIds.push(library._id)
-          }
-        });
-        return [libraryIds];
-      }
     },
     libraries(){
       return Libraries.find({}, {
@@ -127,6 +117,9 @@ export default {
     },
   },
   methods: {
+    isExpanded(index){
+      return this.expandedLibrary && this.expandedLibrary[index];
+    },
     insertLibrary(){
       if (this.paidBenefits){
         this.$store.commit('pushDialogStack', {

app/imports/ui/library/LibraryContentsContainer.vue

@@ -1,5 +1,6 @@
 <template lang="html">
   <tree-node-list
+    v-if="$subReady.libraryNodes"
     group="library"
     :children="libraryChildren"
     :organize="organizeMode"
@@ -8,6 +9,12 @@
     @reordered="reordered"
     @reorganized="reorganized"
   />
+  <v-progress-circular
+    v-else
+    color="primary"
+    indeterminate
+    style="width: 95%;"
+  />
 </template>
 
 <script>
@@ -25,8 +32,36 @@
 			libraryId: String,
 			organizeMode: Boolean,
 			selectedNodeId: String,
+      shouldSubscribe: Boolean,
+		},
+    data(){return {
+      slowShouldSubscribe: this.shouldSubscribe,
+    };},
+    watch:{
+      shouldSubscribe(newValue){
+        if (this.timeoutId){
+          clearTimeout(this.timeoutId);
+          delete this.timeoutId;
+        }
+        if (newValue){
+          this.slowShouldSubscribe = newValue
+        } else {
+          this.timeoutId = setTimeout(()=>{
+            this.slowShouldSubscribe = newValue
+          }, 2000);
+        }
+      }
     },
 		meteor: {
+      $subscribe: {
+        'libraryNodes'(){
+          if (this.slowShouldSubscribe){
+            return [this.libraryId];
+          } else {
+            return [];
+          }
+        }
+      },
 			library(){
 				return Libraries.findOne(this.libraryId);
 			},

app/imports/ui/library/SingleLibrary.vue

@@ -1,20 +1,21 @@
 <template lang="html">
+  <tree-detail-layout>
     <div
-    class="layout row"
-    style="background-color: inherit;"
-  >
-    <div
+      slot="tree"
       class="layout column"
       style="
         background-color: inherit;
         width: initial;
         max-width: 100%;
         min-width: 320px;
+        height: 100%;
       "
     >
       <v-toolbar
-        dense
         flat
+        :color="selectedNode && selectedNode.color || 'secondary'"
+        :dark="isToolbarDark"
+        :light="!isToolbarDark"
       >
         <v-spacer />
         <v-switch
@@ -25,63 +26,59 @@
         />
       </v-toolbar>
       <library-contents-container
-        :library-id="$route.params.id"
+        :library-id="library._id"
         :organize-mode="organize"
+        :edit-mode="editMode"
         :selected-node-id="selected"
-        @selected="e => selected = e"
+        should-subscribe
+        style="overflow-y: auto;"
+        @selected="clickNode"
       />
     </div>
-    <v-divider vertical />
     <div
-      style="width: 100%; background-color: inherit;"
+      slot="detail"
       data-id="selected-node-card"
+      style="overflow: hidden;"
     >
-      <v-toolbar
-        dense
-        flat
-      >
-        <property-icon
-          :model="selectedNode"
-          class="mr-2"
+      <library-node-dialog
+        :_id="selected"
+        embedded
+        @removed="selected = undefined"
       />
-        <div class="title">
-          {{ getPropertyName(selectedNode && selectedNode.type) }}
-        </div>
-        <v-spacer />
-        <v-btn
-          v-if="selectedNode"
-          flat
-          icon
-          @click="editLibraryNode"
-        >
-          <v-icon>create</v-icon>
-        </v-btn>
-      </v-toolbar>
-      <v-card-text style="overflow-y: auto;">
-        <property-viewer :model="selectedNode" />
-      </v-card-text>
-    </div>
     </div>
+  </tree-detail-layout>
 </template>
 
 <script>
-import PropertyViewer from '/imports/ui/properties/shared/PropertyViewer.vue';
+import TreeDetailLayout from '/imports/ui/components/TreeDetailLayout.vue';
+import LibraryNodeDialog from '/imports/ui/library/LibraryNodeDialog.vue';
 import LibraryNodes from '/imports/api/library/LibraryNodes.js';
 import Libraries from '/imports/api/library/Libraries.js';
-import PropertyIcon from '/imports/ui/properties/shared/PropertyIcon.vue';
 import { getPropertyName } from '/imports/constants/PROPERTIES.js';
+import isDarkColor from '/imports/ui/utility/isDarkColor.js';
 import LibraryContentsContainer from '/imports/ui/library/LibraryContentsContainer.vue';
 
 export default {
   components: {
+    TreeDetailLayout,
     LibraryContentsContainer,
-		PropertyViewer,
-		PropertyIcon,
+    LibraryNodeDialog,
+  },
+  props: {
+    selection: Boolean,
   },
   data(){ return {
     organize: false,
     selected: undefined,
   };},
+  computed: {
+    isToolbarDark(){
+      return isDarkColor(
+        this.selectedNode && this.selectedNode.color ||
+        this.$vuetify.theme.secondary
+      );
+    }
+  },
   watch:{
     selectedNode(val){
       this.$emit('selected', val)
@@ -98,12 +95,28 @@ export default {
         data: {_id: this.selected},
       });
     },
+    clickNode(id){
+      if (this.$vuetify.breakpoint.mdAndUp){
+        this.selected = id;
+      } else {
+        this.$store.commit('pushDialogStack', {
+          component: 'library-node-dialog',
+          elementId: `tree-node-${id}`,
+          data: {
+            _id: id,
+            selection: this.selection,
+          },
+          callback: result => {
+            if (result){
+              this.selected = id;
+            }
+          },
+        });
+      }
+    },
     getPropertyName,
   },
   meteor: {
-		$subscribe: {
-			'libraries': [],
-		},
     library(){
       return Libraries.findOne(this.$route.params.id);
     },
@@ -112,7 +125,7 @@ export default {
         _id: this.selected,
         removed: {$ne: true}
       });
-		}
+    },
   }
 };
 </script>

app/imports/ui/pages/SingleLibraryPage.vue

@@ -1,9 +1,7 @@
 <template lang="html">
-  <div>
-    <v-card class="ma-4">
+  <single-card-layout>
     <single-library />
-    </v-card>
-  </div>
+  </single-card-layout>
 </template>
 
 <script>