From 7d1bcc9cb9494175cf3246d60a68932ad6aa6061 Mon Sep 17 00:00:00 2001
From: Kasen IO <kasenvr@gmail.com>
Date: Wed, 8 Apr 2020 00:55:46 -0400
Subject: [PATCH] Add draggable v0.5, fix some formatting.

---
 scripts/system/inventory/package-lock.json    |  13 +
 scripts/system/inventory/package.json         |   1 +
 scripts/system/inventory/src/App.vue          | 330 +++++++++---------
 .../inventory/src/assets/styles/styles.css    |  13 +
 4 files changed, 196 insertions(+), 161 deletions(-)
 create mode 100644 scripts/system/inventory/src/assets/styles/styles.css

diff --git a/scripts/system/inventory/package-lock.json b/scripts/system/inventory/package-lock.json
index b04877a4ac..8617b7774e 100644
--- a/scripts/system/inventory/package-lock.json
+++ b/scripts/system/inventory/package-lock.json
@@ -10093,6 +10093,11 @@
         "is-plain-obj": "^1.0.0"
       }
     },
+    "sortablejs": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
+      "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
+    },
     "source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -11274,6 +11279,14 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuedraggable": {
+      "version": "2.23.2",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.23.2.tgz",
+      "integrity": "sha512-PgHCjUpxEAEZJq36ys49HfQmXglattf/7ofOzUrW2/rRdG7tu6fK84ir14t1jYv4kdXewTEa2ieKEAhhEMdwkQ==",
+      "requires": {
+        "sortablejs": "^1.10.1"
+      }
+    },
     "vuetify": {
       "version": "2.2.20",
       "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.2.20.tgz",
diff --git a/scripts/system/inventory/package.json b/scripts/system/inventory/package.json
index 1634fec234..9cc0f18df2 100644
--- a/scripts/system/inventory/package.json
+++ b/scripts/system/inventory/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "core-js": "^3.6.4",
     "vue": "^2.6.11",
+    "vuedraggable": "^2.23.2",
     "vuetify": "^2.2.11"
   },
   "devDependencies": {
diff --git a/scripts/system/inventory/src/App.vue b/scripts/system/inventory/src/App.vue
index eac50a03ca..cc2466dcee 100644
--- a/scripts/system/inventory/src/App.vue
+++ b/scripts/system/inventory/src/App.vue
@@ -10,82 +10,89 @@
 //
 -->
 
+<style>
+    @import './assets/styles/styles.css';
+</style>
+
 <template>
     <v-app>
         <v-app-bar
-          app
+            app
         >
+            <v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>
 
-          <v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>
-
-          <v-toolbar-title>Inventory</v-toolbar-title>
+            <v-toolbar-title>Inventory</v-toolbar-title>
           
         </v-app-bar>
 
         <v-navigation-drawer
-          v-model="drawer"
-          fixed
-          temporary
+            v-model="drawer"
+            fixed
+            temporary
         >
-          <v-list
-              nav
-              class="pt-5"
-          >
-              <v-list-item-group>
-                      
-                  <v-slider
-                      v-model="settings.displayDensity.size"
-                      :tick-labels="settings.displayDensity.labels"
-                      :max="2"
-                      step="1"
-                      ticks="always"
-                      tick-size="3"
-                  ></v-slider>
+            <v-list
+                nav
+                class="pt-5"
+            >
+                <v-list-item-group>
 
-                  <v-list-item @click="addDialog.show = true">
-                      <v-list-item-icon>
-                          <v-icon>mdi-plus</v-icon>
-                      </v-list-item-icon>
-                      <v-list-item-title>Add Item</v-list-item-title>
-                  </v-list-item>
-                  
-                  <v-list-item @click="createFolderDialog.show = true">
-                      <v-list-item-icon>
-                          <v-icon>mdi-folder-plus</v-icon>
-                      </v-list-item-icon>
-                      <v-list-item-title>Create Folder</v-list-item-title>
-                  </v-list-item>
+                <v-slider
+                    v-model="settings.displayDensity.size"
+                    :tick-labels="settings.displayDensity.labels"
+                    :max="2"
+                    step="1"
+                    ticks="always"
+                    tick-size="3"
+                ></v-slider>
 
-              </v-list-item-group>
-          </v-list>
+                <v-list-item @click="addDialog.show = true">
+                    <v-list-item-icon>
+                        <v-icon>mdi-plus</v-icon>
+                    </v-list-item-icon>
+                    <v-list-item-title>Add Item</v-list-item-title>
+                    </v-list-item>
+
+                    <v-list-item @click="createFolderDialog.show = true">
+                    <v-list-item-icon>
+                        <v-icon>mdi-folder-plus</v-icon>
+                    </v-list-item-icon>
+                    <v-list-item-title>Create Folder</v-list-item-title>
+                </v-list-item>
+
+                </v-list-item-group>
+            </v-list>
         </v-navigation-drawer>
 
         <v-content>
-          <v-container fluid>
-              <v-data-iterator
-                  :items="items"
-                  hide-default-footer
-              >
-                  <template>
-                      <v-row>
-                          <v-col
-                              v-for="item in items"
-                              v-bind:key="item.uuid"
-                              cols="12"
-                              sm="6"
-                              md="4"
-                              lg="3"
-                              class="py-1"
-                          >
-                              <v-card
-                                  class="mx-auto"
-                                  max-width="344"
-                                  outlined
-                                  v-if="!item.folder"
-                              >
-                                  <v-list-item one-line>
+            <v-container fluid>
+                <v-data-iterator
+                    :items="items"
+                    hide-default-footer
+                >
+                    <template>
+                        
+                          <draggable tag="v-row" :list="items">
+                            <v-col
+                                v-for="item in items"
+                                v-bind:key="item.uuid"
+                                cols="12"
+                                sm="6"
+                                md="4"
+                                lg="3"
+                                class="py-1 draggable-card"
+                            >
+                           
+                                <v-list-item 
+                                    one-line 
+                                    v-if="!item.folder"
+                                    class="mx-auto top-level-item"
+                                    max-width="344"
+                                    outlined
+                                >
                                       
-                                      <v-list-item-content class="pb-1 pt-2">
+                                      <v-list-item-content 
+                                          class="pb-1 pt-2" 
+                                      >
                                           <div v-show="settings.displayDensity.size > 0" class="overline" style="font-size: 0.825rem !important;">{{item.type}}</div>
                                           <v-list-item-title class="subtitle-1 mb-1">{{item.name}}</v-list-item-title>
                                           <v-list-item-subtitle v-show="settings.displayDensity.size == 2">{{item.url}}</v-list-item-subtitle>
@@ -162,115 +169,111 @@
                                       
                                   </v-list-item>
 
-                              </v-card>
+                            
+                                <!-- The Folder Card -->
+                                <v-list-group
+                                    value="true"
+                                    v-if="item.folder"
+                                    class="top-level-folder"
+                                >
                               
-                              <!-- The Folder Card -->
-                              <v-card
-                                  class="mx-auto"
-                                  max-width="344"
-                                  outlined
-                                  v-if="item.folder"
-                                  color="blue darken-5"
-                              >
-                              <v-list-group
-                                  value="true"
-                                  color=""
-                              >
-                              
-                                  <template v-slot:activator>
-                                      <v-list-item one-line color="orange">
-                                          Test {{item.name}}
-                                      </v-list-item>
-                                  </template>
+                                    <template v-slot:activator>
+                                        <v-list-item 
+                                            one-line 
+                                            class="mx-auto"
+                                            max-width="344"
+                                            outlined
+                                        >
+                                            Test {{item.name}}
+                                        </v-list-item>
+                                    </template>
                                   
                                           <v-col
                                               v-for="item in item.items"
                                               v-bind:key="item.uuid"
                                               class="py-1"
                                           >
-                                              <v-card
-                                                  class="mx-auto"
-                                                  max-width="344"
-                                                  outlined
-                                              >
-                                                  <v-list-item one-line>
-                                                      
-                                                      <v-list-item-content class="pb-1 pt-2">
-                                                          <v-list-item-title class="subtitle-1 mb-1">{{item.name}}</v-list-item-title>
-                                                          <v-list-item-subtitle v-show="settings.displayDensity.size == 2">{{item.url}}</v-list-item-subtitle>
-                                                      </v-list-item-content>
-                                                      
-                                                      <v-menu bottom left>
-                                                      <template v-slot:activator="{ on }">
-                                                          <v-btn 
-                                                              :style="{backgroundColor: (getIconColor(item.type)) }"
-                                                              small
-                                                              fab
-                                                              dark
-                                                              v-on="on"
-                                                          >
-                                                              <v-icon>{{displayIcon(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="
-                                                                  editDialog.show = true; 
-                                                                  editDialog.uuid = item.uuid;
-                                                                  editDialog.data.type = item.type;
-                                                                  editDialog.data.name = item.name;
-                                                                  editDialog.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="shareDialog.show = true; shareDialog.data.url = item.url; shareDialog.data.uuid = item.uuid; sendAppMessage('web-to-script-request-nearby-users', '')"
-                                                          >
-                                                              <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="removeDialog.show = true; removeDialog.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>
+                                        <v-list-item 
+                                            one-line
+                                            class="mx-auto second-level-item"
+                                            max-width="344"
+                                            outlined
+                                        >
 
-                                          </v-card>
-                                          
-                                      </v-col>
-                                      
-                                  </v-list-group>
-                                  
-                              </v-card>
+                                            <v-list-item-content class="pb-1 pt-2">
+                                                <v-list-item-title class="subtitle-1 mb-1">{{item.name}}</v-list-item-title>
+                                                <v-list-item-subtitle v-show="settings.displayDensity.size == 2">{{item.url}}</v-list-item-subtitle>
+                                            </v-list-item-content>
 
-                          </v-col>
-                      </v-row>
-                  </template>
-              </v-data-iterator>
-          </v-container>
+                                            <v-menu bottom left>
+                                                <template v-slot:activator="{ on }">
+                                                    <v-btn 
+                                                        :style="{backgroundColor: (getIconColor(item.type)) }"
+                                                        small
+                                                        fab
+                                                        dark
+                                                        v-on="on"
+                                                    >
+                                                        <v-icon>{{displayIcon(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="
+                                                            editDialog.show = true; 
+                                                            editDialog.uuid = item.uuid;
+                                                            editDialog.data.type = item.type;
+                                                            editDialog.data.name = item.name;
+                                                            editDialog.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="shareDialog.show = true; shareDialog.data.url = item.url; shareDialog.data.uuid = item.uuid; sendAppMessage('web-to-script-request-nearby-users', '')"
+                                                    >
+                                                        <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="removeDialog.show = true; removeDialog.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>      
+                                    </v-col>
+                                </v-list-group>
+                            </v-col>
+                        </draggable>
+                    </template>
+                </v-data-iterator>
+            </v-container>
         </v-content>
 
         <v-dialog
@@ -682,8 +685,13 @@ if (!browserDevelopment()) {
     
 }
 
+import draggable from 'vuedraggable'
+
 export default {
     name: 'App',
+    components: {
+        draggable,
+    },
     data: () => ({
         items: [
             {
@@ -1054,7 +1062,7 @@ export default {
                 // eslint-disable-next-line
                 EventBridge.emitWebEvent(JSON.stringify(JSONtoSend));
             } else {
-                alert(JSON.stringify(JSONtoSend));
+                // alert(JSON.stringify(JSONtoSend));
             }
         },
     },
diff --git a/scripts/system/inventory/src/assets/styles/styles.css b/scripts/system/inventory/src/assets/styles/styles.css
new file mode 100644
index 0000000000..68e92182fe
--- /dev/null
+++ b/scripts/system/inventory/src/assets/styles/styles.css
@@ -0,0 +1,13 @@
+.top-level-item {
+    background-color: rgba(39,39,39, 1.0);
+}
+
+.top-level-folder {
+    background-color: rgba(39,39,39, 1.0);
+}
+
+.second-level-item {
+    background-color: rgba(39,39,39, 0.7);
+}
+
+.inventoryApp::-webkit-scrollbar { width: 0 !important }
\ No newline at end of file