Added folders to the sidebar character list

app/imports/ui/creature/creatureList/CreatureFolderHeader.vue

@@ -13,33 +13,38 @@
           dense
           :value="model.name"
           @change="renameFolder"
-          @click.native.stop="()=>{}"
+          @click.native.stop=""
+          @input.native.stop=""
+          @keydown.native.stop=""
+          @keyup.native.stop=""
         />
       </v-list-item-title>
     </v-list-item-content>
-    <v-list-item-action v-if="!selection && (renaming || open)">
-      <v-btn
-        icon
-        style="flex-grow: 0"
-        @click.stop="renaming = !renaming"
-      >
-        <v-icon v-if="renaming">
-          mdi-check
-        </v-icon>
-        <v-icon v-else>
-          mdi-pencil
-        </v-icon>
-      </v-btn>
-    </v-list-item-action>
-    <v-list-item-action v-if="!selection && open">
-      <v-btn
-        icon
-        style="flex-grow: 0"
-        @click.stop="removeFolder"
-      >
-        <v-icon>mdi-delete</v-icon>
-      </v-btn>
-    </v-list-item-action>
+    <template v-if="!selection && !dense">
+      <v-list-item-action v-if="renaming || open">
+        <v-btn
+          icon
+          style="flex-grow: 0"
+          @click.stop="renaming = !renaming"
+        >
+          <v-icon v-if="renaming">
+            mdi-check
+          </v-icon>
+          <v-icon v-else>
+            mdi-pencil
+          </v-icon>
+        </v-btn>
+      </v-list-item-action>
+      <v-list-item-action v-if="open">
+        <v-btn
+          icon
+          style="flex-grow: 0"
+          @click.stop="removeFolder"
+        >
+          <v-icon>mdi-delete</v-icon>
+        </v-btn>
+      </v-list-item-action>
+    </template>
   </v-list-item>
 </template>
 
@@ -57,6 +62,7 @@
       },
       open: Boolean,
       selection: Boolean,
+      dense: Boolean,
     },
     data(){return {
       renaming: false,

app/imports/ui/creature/creatureList/CreatureFolderList.vue

@@ -1,9 +1,12 @@
 <template lang="html">
-  <v-list expand>
+  <v-list
+    expand
+  >
     <creature-list
       :creatures="creatures"
       :selection="selection"
       :selected-creature="selectedCreature"
+      :dense="dense"
       @creature-selected="id => $emit('creature-selected', id)"
     />
     <v-list-group
@@ -17,6 +20,7 @@
           :open="openFolders[folder._id]"
           :model="folder"
           :selection="selection"
+          :dense="dense"
         />
       </template>
       <creature-list
@@ -24,6 +28,7 @@
         :folder-id="folder._id"
         :selection="selection"
         :selected-creature="selectedCreature"
+        :dense="dense"
         @creature-selected="id => $emit('creature-selected', id)"
       />
     </v-list-group>
@@ -53,6 +58,7 @@ export default {
       type: String,
       default: undefined,
     },
+    dense: Boolean,
   },
   data(){return{
     openFolders: {},

app/imports/ui/creature/creatureList/CreatureList.vue

@@ -18,6 +18,7 @@
       :selection="selection"
       :is-selected="selectedCreature === creature._id"
       v-bind="selection ? {} : {to: creature.url}"
+      :dense="dense"
       @click="$emit('creature-selected', creature._id)"
     />
   </draggable>
@@ -48,6 +49,7 @@
         type: String,
         default: undefined,
       },
+      dense: Boolean,
     },
     data(){return {
       dataCreatures: [],

app/imports/ui/creature/creatureList/CreatureListTile.vue

@@ -32,16 +32,16 @@
       <v-list-item-title>
         {{ model.name }}
       </v-list-item-title>
-      <v-list-item-subtitle>
+      <v-list-item-subtitle v-if="!dense">
         {{ model.alignment }} {{ model.gender }} {{ model.race }}
       </v-list-item-subtitle>
     </v-list-item-content>
-    <v-list-item-action>
+    <v-list-item-action v-if="!dense">
       <shared-icon :model="model" />
     </v-list-item-action>
     <v-list-item-action>
       <v-icon
-        v-if="!selection"
+        v-if="!selection && !dense"
         style="height: 100%; width: 40px; cursor: move;"
         class="handle"
       >
@@ -65,6 +65,7 @@ export default {
     },
     selection: Boolean,
     isSelected: Boolean,
+    dense: Boolean,
   }
 }
 </script>

app/imports/ui/layouts/Sidebar.vue

@@ -54,68 +54,28 @@
       </v-list-item>
       <v-divider />
     </v-list>
-    <v-list
-      avatar
-    >
-      <v-list-item
-        v-for="character in CreaturesWithNoParty"
-        :key="character._id"
-        :to="character.url"
-      >
-        <v-list-item-avatar :color="character.color || 'grey'">
-          <img
-            v-if="character.avatarPicture"
-            :src="character.avatarPicture"
-            :alt="character.name"
-          >
-          <template v-else>
-            {{ character.initial }}
-          </template>
-        </v-list-item-avatar>
-        <v-list-item-title>
-          {{ character.name }}
-        </v-list-item-title>
-      </v-list-item>
-      <!--
-      <v-list-group
-        v-for="party in parties"
-        :key="party._id"
-      >
-        <v-list-item slot="activator">
-          <v-list-item-title>
-            {{ party.name }}
-          </v-list-item-title>
-        </v-list-item>
-        <v-list-item
-          v-for="character in characterDocs"
-          :key="character._id"
-          :to="character.url"
-        >
-          <v-list-item-avatar :color="character.color || 'grey'">
-            <img
-              v-if="character.avatarPicture"
-              :src="character.avatarPicture"
-              :alt="character.name"
-            >
-            <template v-else>
-              {{ character.initial }}
-            </template>
-          </v-list-item-avatar>
-          <v-list-item-title>
-            {{ character.name }}
-          </v-list-item-title>
-        </v-list-item>
-      </v-list-group>
-    -->
-    </v-list>
+    <creature-folder-list
+      dense
+      :creatures="CreaturesWithNoParty"
+      :folders="folders"
+    />
   </div>
 </template>
 
 <script lang="js">
   import Creatures from '/imports/api/creature/creatures/Creatures.js';
-  import Parties from '/imports/api/creature/creatureFolders/CreatureFolders.js';
+  import CreatureFolders from '/imports/api/creature/creatureFolders/CreatureFolders.js';
+  import CreatureFolderList from '/imports/ui/creature/creatureList/CreatureFolderList.vue';
 
+  const characterTransform = function(char){
+    char.url = `/character/${char._id}/${char.urlName || '-'}`;
+    char.initial = char.name && char.name[0] || '?';
+    return char;
+  };
   export default {
+    components: {
+      CreatureFolderList
+    },
     meteor: {
       $subscribe: {
         'characterList': [],
@@ -142,21 +102,36 @@
         ];
         return links.filter(link => !link.requireLogin || isLoggedIn);
       },
+      folders(){
+        const userId = Meteor.userId();
+        let folders =  CreatureFolders.find(
+          {owner: userId, archived: {$ne: true}},
+          {sort: {order: 1}},
+        ).map(folder => {
+          folder.creatures = Creatures.find(
+            {
+              _id: {$in: folder.creatures || []},
+              $or: [{readers: userId}, {writers: userId}, {owner: userId}],
+            }, {
+              sort: {name: 1},
+            }
+          ).map(characterTransform);
+          return folder;
+        });
+        folders = folders.filter(folder => !!folder.creatures.length);
+        return folders;
+      },
       CreaturesWithNoParty() {
         var userId = Meteor.userId();
-        var charArrays = Parties.find({owner: userId}).map(p => p.creatures);
-        var partyChars = _.uniq(_.flatten(charArrays));
+        var charArrays = CreatureFolders.find({owner: userId}).map(p => p.creatures);
+        var folderChars = _.uniq(_.flatten(charArrays));
         return Creatures.find(
           {
-            _id: {$nin: partyChars},
+            _id: {$nin: folderChars},
             $or: [{readers: userId}, {writers: userId}, {owner: userId}],
           },
           {sort: {name: 1}}
-        ).map(char => {
-          char.url = `/character/${char._id}/${char.urlName || '-'}`;
-          char.initial = char.name && char.name[0] || '?';
-          return char;
-        });
+        ).map(characterTransform);
       },
     },
   };