From 8c3710cda330f74281b3ed125164c6644c161246 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Tue, 2 Mar 2021 00:24:54 +0200
Subject: [PATCH] Started work on single page libraries

---
 app/imports/server/publications/library.js    |  24 +--
 app/imports/ui/library/LibraryBrowser.vue     |  17 +-
 .../ui/library/LibraryContentsContainer.vue   |  35 ++++
 app/imports/ui/library/SingleLibrary.vue      | 165 ++++++++++--------
 app/imports/ui/pages/SingleLibraryPage.vue    |   8 +-
 5 files changed, 141 insertions(+), 108 deletions(-)

diff --git a/app/imports/server/publications/library.js b/app/imports/server/publications/library.js
index 271df4a8..ef68d79f 100644
--- a/app/imports/server/publications/library.js
+++ b/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);
-      }
+    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},
       }),
diff --git a/app/imports/ui/library/LibraryBrowser.vue b/app/imports/ui/library/LibraryBrowser.vue
index b1f9238c..5bc60287 100644
--- a/app/imports/ui/library/LibraryBrowser.vue
+++ b/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', {
diff --git a/app/imports/ui/library/LibraryContentsContainer.vue b/app/imports/ui/library/LibraryContentsContainer.vue
index 114cae5b..3f2bca15 100644
--- a/app/imports/ui/library/LibraryContentsContainer.vue
+++ b/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);
 			},
diff --git a/app/imports/ui/library/SingleLibrary.vue b/app/imports/ui/library/SingleLibrary.vue
index b01525ab..c569f8fa 100644
--- a/app/imports/ui/library/SingleLibrary.vue
+++ b/app/imports/ui/library/SingleLibrary.vue
@@ -1,20 +1,21 @@
 <template lang="html">
-  <div
-    class="layout row"
-    style="background-color: inherit;"
-  >
+  <tree-detail-layout>
     <div
+      slot="tree"
       class="layout column"
       style="
-          background-color: inherit;
-          width: initial;
-          max-width: 100%;
-          min-width: 320px;
-        "
+        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,95 +26,107 @@
         />
       </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"
-        />
-        <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>
+      <library-node-dialog
+        :_id="selected"
+        embedded
+        @removed="selected = undefined"
+      />
     </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: {
-		LibraryContentsContainer,
-		PropertyViewer,
-		PropertyIcon,
-	},
-	data(){ return {
-		organize: false,
-		selected: undefined,
-	};},
-	watch:{
-		selectedNode(val){
-			this.$emit('selected', val)
-		},
+  components: {
+    TreeDetailLayout,
+    LibraryContentsContainer,
+    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)
+    },
     'library.name'(value){
       this.$store.commit('setPageTitle', value || 'Library');
     },
-	},
-	methods: {
-		editLibraryNode(){
-			this.$store.commit('pushDialogStack', {
-				component: 'library-node-edit-dialog',
-				elementId: 'selected-node-card',
-				data: {_id: this.selected},
-			});
-		},
-		getPropertyName,
-	},
-	meteor: {
-		$subscribe: {
-			'libraries': [],
-		},
+  },
+  methods: {
+    editLibraryNode(){
+      this.$store.commit('pushDialogStack', {
+        component: 'library-node-edit-dialog',
+        elementId: 'selected-node-card',
+        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: {
     library(){
       return Libraries.findOne(this.$route.params.id);
     },
-		selectedNode(){
-			return LibraryNodes.findOne({
-				_id: this.selected,
-				removed: {$ne: true}
-			});
-		}
-	}
+    selectedNode(){
+      return LibraryNodes.findOne({
+        _id: this.selected,
+        removed: {$ne: true}
+      });
+    },
+  }
 };
 </script>
 
diff --git a/app/imports/ui/pages/SingleLibraryPage.vue b/app/imports/ui/pages/SingleLibraryPage.vue
index dc15640e..77134ee8 100644
--- a/app/imports/ui/pages/SingleLibraryPage.vue
+++ b/app/imports/ui/pages/SingleLibraryPage.vue
@@ -1,9 +1,7 @@
 <template lang="html">
-  <div>
-    <v-card class="ma-4">
-      <single-library />
-    </v-card>
-  </div>
+  <single-card-layout>
+    <single-library />
+  </single-card-layout>
 </template>
 
 <script>