From 42b82884b34ff8a49c15e0fbc1fc2f69efe8642d Mon Sep 17 00:00:00 2001
From: Kasen IO <kasenvr@gmail.com>
Date: Wed, 20 May 2020 18:32:59 -0400
Subject: [PATCH] Update main sorting.

---
 scripts/system/inventory/src/App.vue          |  68 +++++---
 .../inventory/src/components/ItemIterator.vue | 161 +++++++++---------
 scripts/system/inventory/src/plugins/store.js |  50 ++++--
 3 files changed, 154 insertions(+), 125 deletions(-)

diff --git a/scripts/system/inventory/src/App.vue b/scripts/system/inventory/src/App.vue
index 82a61b6008..aa867c445e 100644
--- a/scripts/system/inventory/src/App.vue
+++ b/scripts/system/inventory/src/App.vue
@@ -25,11 +25,42 @@
             
             <v-spacer></v-spacer>
             
-            <v-btn medium color="primary" fab @click="sortTopInventory('top')">
+            <!-- <v-btn medium color="primary" fab @click="sortTopInventory('az')">
                 <v-icon>
                     mdi-ab-testing
                 </v-icon>
-            </v-btn>
+            </v-btn> -->
+            
+            <v-menu bottom left>
+                <template v-slot:activator="{ on }">
+                    <v-btn 
+                        large
+                        color="primary"
+                        v-on="on"
+                    >
+                        <h4>Sort</h4>
+                    </v-btn>
+                </template>
+
+                <v-list color="grey darken-3">
+                    <v-list-item
+                        @click="sortTopInventory('az')"
+                    >
+                        <v-list-item-title>A-Z</v-list-item-title>
+                        <v-list-item-action>
+                            <v-icon large>mdi-sort-alphabetical-ascending</v-icon>
+                        </v-list-item-action>
+                    </v-list-item>
+                    <v-list-item
+                        @click="sortTopInventory('za')"
+                    >
+                        <v-list-item-title>Z-A</v-list-item-title>
+                        <v-list-item-action>
+                            <v-icon large>mdi-sort-alphabetical-descending</v-icon>
+                        </v-list-item-action>
+                    </v-list-item>
+                </v-list>
+            </v-menu>
           
         </v-app-bar>
 
@@ -668,7 +699,7 @@ export default {
                 ],
             },
         },
-        appVersion: "1.3",
+        appVersion: "2.0",
         darkTheme: true,
         drawer: false,
         disabledProp: true,
@@ -708,7 +739,7 @@ export default {
                 "name": name,
                 "folder": folder,
                 "url": url,
-                "uuid": uuid
+                "uuid": uuidToUse
             });
             
             if (folder !== null && folder !== "No Folder") {
@@ -772,10 +803,7 @@ export default {
                 "uuid": this.createUUID()
             });
             
-            this.$store.commit('mutate', {
-                property: 'createFolderDialog.data.name', 
-                with: null
-            });
+            this.createFolderDialogStore.data.name = null;
         },
         editFolder: function(uuid) {
             var findFolder = this.searchForItem(uuid);
@@ -806,20 +834,10 @@ export default {
 
             this.pushToItems(itemType, name, folder, url, null);
             
-            this.$store.commit('mutate', {
-                property: 'addDialog.data.name', 
-                with: null
-            });
-            
-            this.$store.commit('mutate', {
-                property: 'addDialog.data.folder', 
-                with: null
-            });
-            
-            this.$store.commit('mutate', {
-                property: 'addDialog.data.url', 
-                with: null
-            });
+            this.addDialogStore.data.name = null;
+            this.addDialogStore.data.folder = null;
+            this.addDialogStore.data.url = null;
+        
         },
         detectFileType: function(url) {    
             // Attempt the pure regex route...
@@ -943,10 +961,8 @@ export default {
         onDragChange: function(ev) {
             console.info("Drag Update.", ev);
         },
-        sortTopInventory: function(level) {
-            if (level == "top") {
-                this.$store.commit('sortTopInventory');
-            }
+        sortTopInventory: function(order) {
+            this.$store.commit('sortTopInventory', { "sort": order });
         },
         getFolderList: function(request) {
             var generateList;
diff --git a/scripts/system/inventory/src/components/ItemIterator.vue b/scripts/system/inventory/src/components/ItemIterator.vue
index 7792d76c3b..c64767a7ef 100644
--- a/scripts/system/inventory/src/components/ItemIterator.vue
+++ b/scripts/system/inventory/src/components/ItemIterator.vue
@@ -22,7 +22,9 @@
                 outlined
             >
                   <div class="handle pa-2">
-                      <v-icon color="orange darken-2">mdi-blur-linear</v-icon>
+                      <!-- <v-icon color="orange darken-2">mdi-blur-linear</v-icon> -->
+                      <!-- <v-icon color="orange darken-2">mdi-package-variant</v-icon> -->
+                      <v-icon color="orange darken-2">mdi-square-medium-outline</v-icon>
                   </div>
                   <v-list-item-content 
                       class="pb-1 pt-2 pl-4" 
@@ -33,80 +35,80 @@
                   </v-list-item-content>
                   
                   <v-menu bottom left>
-                  <template v-slot:activator="{ on }">
-                      <!-- settings.displayDensity.size >= 1 -->
-                      <v-btn 
-                          :style="{backgroundColor: (getIconColor(item.type)) }"
-                          v-show="settings.displayDensity.size >= 1"
-                          medium 
-                          fab 
-                          dark
-                          v-on="on"
-                      >
-                          <v-icon>{{getIcon(item.type)}}</v-icon>
-                      </v-btn>
-                      <!-- settings.displayDensity.size < 1 -->
-                      <v-btn 
-                          :style="{backgroundColor: (getIconColor(item.type)) }"
-                          v-show="settings.displayDensity.size < 1"
-                          small
-                          fab
-                          dark
-                          v-on="on"
-                      >
-                          <v-icon>{{getIcon(item.type)}}</v-icon>
-                      </v-btn>
-                  </template>
+                      <template v-slot:activator="{ on }">
+                          <!-- settings.displayDensity.size >= 1 -->
+                          <v-btn 
+                              :style="{backgroundColor: (getIconColor(item.type)) }"
+                              v-show="settings.displayDensity.size >= 1"
+                              medium 
+                              fab 
+                              dark
+                              v-on="on"
+                          >
+                              <v-icon>{{getIcon(item.type)}}</v-icon>
+                          </v-btn>
+                          <!-- settings.displayDensity.size < 1 -->
+                          <v-btn 
+                              :style="{backgroundColor: (getIconColor(item.type)) }"
+                              v-show="settings.displayDensity.size < 1"
+                              small
+                              fab
+                              dark
+                              v-on="on"
+                          >
+                              <v-icon>{{getIcon(item.type)}}</v-icon>
+                          </v-btn>
+                      </template>
 
-                  <v-list color="grey darken-3">
-                      <v-list-item
-                          @click="useItem(item.type, item.url)"
-                      >
-                          <v-list-item-title>Use</v-list-item-title>
-                          <v-list-item-action>
-                              <v-icon>mdi-play</v-icon>
-                          </v-list-item-action>
-                      </v-list-item>
-                      <v-list-item
-                          @click="
-                              editDialogStore.show = true; 
-                              editDialogStore.uuid = item.uuid;
-                              editDialogStore.data.type = item.type.toUpperCase();
-                              editDialogStore.data.folder = null;
-                              editDialogStore.data.name = item.name;
-                              editDialogStore.data.url = item.url;
-                          "
-                      >
-                          <v-list-item-title>Edit</v-list-item-title>
-                          <v-list-item-action>
-                              <v-icon>mdi-pencil</v-icon>
-                          </v-list-item-action>
-                      </v-list-item>
-                      <v-list-item
-                          @click="
-                            shareDialogStore.show = true; 
-                            shareDialogStore.data.url = item.url; 
-                            shareDialogStore.data.uuid = item.uuid; 
-                          "
-                      >
-                          <v-list-item-title>Share</v-list-item-title>
-                          <v-list-item-action>
-                              <v-icon>mdi-share</v-icon>
-                          </v-list-item-action>
-                      </v-list-item>
-                      <v-list-item
-                          @click="
-                            removeDialogStore.show = true; 
-                            removeDialogStore.uuid = item.uuid;
-                          "
-                          color="red darken-1"
-                      >
-                          <v-list-item-title>Remove</v-list-item-title>
-                          <v-list-item-action>
-                              <v-icon>mdi-minus</v-icon>
-                          </v-list-item-action>
-                      </v-list-item>
-                  </v-list>
+                      <v-list color="grey darken-3">
+                          <v-list-item
+                              @click="useItem(item.type, item.url)"
+                          >
+                              <v-list-item-title>Use</v-list-item-title>
+                              <v-list-item-action>
+                                  <v-icon>mdi-play</v-icon>
+                              </v-list-item-action>
+                          </v-list-item>
+                          <v-list-item
+                              @click="
+                                  editDialogStore.show = true; 
+                                  editDialogStore.uuid = item.uuid;
+                                  editDialogStore.data.type = item.type.toUpperCase();
+                                  editDialogStore.data.folder = null;
+                                  editDialogStore.data.name = item.name;
+                                  editDialogStore.data.url = item.url;
+                              "
+                          >
+                              <v-list-item-title>Edit</v-list-item-title>
+                              <v-list-item-action>
+                                  <v-icon>mdi-pencil</v-icon>
+                              </v-list-item-action>
+                          </v-list-item>
+                          <v-list-item
+                              @click="
+                                shareDialogStore.show = true; 
+                                shareDialogStore.data.url = item.url; 
+                                shareDialogStore.data.uuid = item.uuid; 
+                              "
+                          >
+                              <v-list-item-title>Share</v-list-item-title>
+                              <v-list-item-action>
+                                  <v-icon>mdi-share</v-icon>
+                              </v-list-item-action>
+                          </v-list-item>
+                          <v-list-item
+                              @click="
+                                removeDialogStore.show = true; 
+                                removeDialogStore.uuid = item.uuid;
+                              "
+                              color="red darken-1"
+                          >
+                              <v-list-item-title>Remove</v-list-item-title>
+                              <v-list-item-action>
+                                  <v-icon>mdi-minus</v-icon>
+                              </v-list-item-action>
+                          </v-list-item>
+                      </v-list>
                   </v-menu>
                   
               </v-list-item>
@@ -224,17 +226,6 @@ export default {
                 });
             },
         },
-        createFolderDialogStore: {
-            get() {
-                return this.$store.state.createFolderDialog;
-            },
-            set(value) {
-                this.$store.commit('mutate', {
-                    property: 'createFolderDialog', 
-                    with: value
-                });
-            },
-        },
         receiveDialogStore: {
             get() {
                 return this.$store.state.receiveDialog;
diff --git a/scripts/system/inventory/src/plugins/store.js b/scripts/system/inventory/src/plugins/store.js
index f2a8434c78..ba81dc9924 100644
--- a/scripts/system/inventory/src/plugins/store.js
+++ b/scripts/system/inventory/src/plugins/store.js
@@ -296,20 +296,42 @@ export const store = new Vuex.Store({
             state[payload.property] = payload.with;
             console.info("Payload:", payload.property, "with:", payload.with, "state is now:", this.state);
         },
-        sortTopInventory (state) {
-            state.items.sort(function(a, b) {
-                var nameA = a.name.toUpperCase(); // ignore upper and lowercase
-                var nameB = b.name.toUpperCase(); // ignore upper and lowercase
-                if (nameA < nameB) {
-                    return -1;
-                }
-                if (nameA > nameB) {
-                    return 1;
-                }
-
-                // names must be equal
-                return 0;
-            });
+        sortTopInventory (state, payload) {
+            let { items } = state;
+            
+            if (payload.sort === "az") {
+                state.items.sort(function(a, b) {
+                    var nameA = a.name.toUpperCase(); // ignore upper and lowercase
+                    var nameB = b.name.toUpperCase(); // ignore upper and lowercase
+                    if (nameA < nameB) {
+                        return -1;
+                    }
+                    if (nameA > nameB) {
+                        return 1;
+                    }
+    
+                    // names must be equal
+                    return 0;
+                });
+            } 
+            
+            if (payload.sort === "za") {
+                state.items.sort(function(a, b) {
+                    var nameA = a.name.toUpperCase(); // ignore upper and lowercase
+                    var nameB = b.name.toUpperCase(); // ignore upper and lowercase
+                    if (nameA > nameB) {
+                        return -1;
+                    }
+                    if (nameA < nameB) {
+                        return 1;
+                    }
+    
+                    // names must be equal
+                    return 0;
+                });
+            }
+            
+            Vue.set(state,'items', items);
         },
         pushToItems (state, payload) {
             let { items } = state;