Created event bus, fixed use item, receivingItemDialog non-working.

scripts/system/inventory/package-lock.json

@@ -1022,6 +1022,11 @@
         "postcss": "^7.0.0"
       }
     },
+    "@mdi/font": {
+      "version": "4.8.95",
+      "resolved": "https://registry.npmjs.org/@mdi/font/-/font-4.8.95.tgz",
+      "integrity": "sha512-mfEjd6kkuheZ15CBU7g/q+De9+dah/SEgVH0uZsgCJTSYa+CkXIen35aNyHoixgcEfPV4Or0NLJvyYM5CXUnbQ=="
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",

scripts/system/inventory/package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@mdi/font": "^4.8.95",
     "core-js": "^3.6.4",
     "vue": "^2.6.11",
     "vuedraggable": "^2.23.2",

scripts/system/inventory/public/inventory.js

@@ -13,12 +13,16 @@ var AppUi = Script.require('appUi');
 var ui;
 var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
 
+// VARIABLES
 var inventoryDataSettingString = "inventoryApp.data";
 var inventoryData;
 
 var inventorySettingsString = "inventoryApp.settings";
 var inventorySettings;
 
+var RECEIVING_ITEM_QUEUE_LIMIT = 5;
+var receivingItemQueue = [];
+
 // APP EVENT AND MESSAGING ROUTING
 
 function onWebAppEventReceived(event) {
@@ -50,6 +54,10 @@ function onWebAppEventReceived(event) {
             sendNearbyUsers();
         }
         
+        if (eventJSON.command == "web-to-script-request-receiving-item-queue") {
+            sendReceivingItemQueue();
+        }
+        
     }
 }
 
@@ -73,7 +81,7 @@ function onMessageReceived(channel, message, sender, localOnly) {
         // Window.alert("Passed 0 " + messageJSON.recipient + " vs " + MyAvatar.sessionUUID);
         if (messageJSON.command == "share-item" && messageJSON.recipient == MyAvatar.sessionUUID) { // We are receiving an item.
             // Window.alert("Passed 1 " + messageJSON.recipient + " vs " + MyAvatar.sessionUUID);            
-            receivingItem(sender, messageJSON.type, messageJSON.name, messageJSON.url);
+            pushReceivedItemToQueue(sender, messageJSON.type, messageJSON.name, messageJSON.url);
         } 
     }
     // print("Message received:");
@@ -131,7 +139,7 @@ function loadSettings() {
     inventorySettings = Settings.getValue(inventorySettingsString);
 }
 
-function receivingItem(sender, type, name, url) {
+function pushReceivedItemToQueue(sender, type, name, url) {
     var packageRequest = {
         "sender": sender,
         "data": {
@@ -141,7 +149,15 @@ function receivingItem(sender, type, name, url) {
         }
     }
     
-    sendToWeb("script-to-web-receiving-item", packageRequest);
+    if (receivingItemQueue.length === RECEIVING_ITEM_QUEUE_LIMIT) {
+        receivingItemQueue = receivingItemQueue.slice(1, 5);
+    }
+    
+    receivingItemQueue.push(packageRequest);
+}
+
+function sendReceivingItemQueue() {
+    sendToWeb("script-to-web-receiving-item-queue", receivingItemQueue);
 }
 
 function sendNearbyUsers() {
@@ -220,6 +236,7 @@ function shareItem(data) {
 function initializeInventoryApp() {
     sendSettings();
     sendInventory();
+    sendReceivingItemQueue();
 }
 
 function onOpened() {

scripts/system/inventory/src/App.vue

@@ -25,11 +25,26 @@
             
             <v-spacer></v-spacer>
             
-            <!-- <v-btn medium color="primary" fab @click="sortTopInventory('az')">
+            <v-badge
-                <v-icon>
+                bordered
-                    mdi-ab-testing
+                color="primary"
-                </v-icon>
+                :value="receivingItemQueueLength"
-            </v-btn> -->
+                :content="receivingItemQueueLength"
+                v-show="receivingItemQueueLength > 0"
+                overlap
+                class="mx-5"
+            >
+                <v-btn
+                    small 
+                    color="red" 
+                    fab 
+                    @click="receivingItemsDialog.show = true;"
+                >
+                    <v-icon>
+                        mdi-tray-full
+                    </v-icon>
+                </v-btn>
+            </v-badge>
             
             <v-menu bottom left>
                 <template v-slot:activator="{ on }">
@@ -118,6 +133,46 @@
             </v-container>
         </v-content>
 
+        <v-dialog
+            v-model="receivingItemsDialog.show"
+            max-width="380"
+        >
+            <v-card>
+                <v-card-title class="headline">Receiving Items</v-card-title>
+
+                <v-card-text>
+                  A list of all items being received currently.
+                </v-card-text>
+
+                <v-card-actions>
+                    <v-list
+                        nav
+                        class="pt-5"
+                        max-width="370"
+                    >
+
+                        <v-list-item
+                            two-line
+                            v-for="item in receivingItemsDialog.data.receivingItemQueue" 
+                            v-bind:key="item.data.uuid"
+                        >
+                            <v-list-item-content>
+                                <v-list-item-title>{{item.data.name}}</v-list-item-title>
+                                <v-list-item-subtitle>Sent by {{item.sender}}</v-list-item-subtitle>
+                            </v-list-item-content>
+                                <v-btn color="success" @click="acceptReceivingItem(item)">
+                                    <v-icon>mdi-plus</v-icon>
+                                </v-btn>
+                                <v-btn text color="red" @click="removeReceivingItem(item.data.uuid)">
+                                    <v-icon>mdi-minus</v-icon>
+                                </v-btn>
+                        </v-list-item>
+
+                    </v-list>
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
+
         <v-dialog
           v-model="removeDialogStore.show"
           max-width="290"
@@ -528,7 +583,7 @@
                           color="blue"
                           class="px-3"
                           :disabled="!$store.state.receiveDialog.valid"
-                          @click="receiveDialogStore.show = false; acceptItem();"
+                          @click="receiveDialogStore.show = false; confirmItemReceipt();"
                       >
                           Accept
                       </v-btn>
@@ -642,9 +697,9 @@ if (!browserDevelopment()) {
                 vue_this.receiveInventory(receivedCommand.data);
             }
     
-            if (receivedCommand.command == 'script-to-web-receiving-item') {
+            if (receivedCommand.command == 'script-to-web-receiving-item-queue') {
-                // alert("RECEIVING ITEM OFFER:" + JSON.stringify(receivedCommand.data));
+                // alert("RECEIVING ITEM QUEUE:" + JSON.stringify(receivedCommand.data));
-                vue_this.receivingItem(receivedCommand.data);
+                vue_this.receiveReceivingItemQueue(receivedCommand.data);
             }
     
             if (receivedCommand.command == 'script-to-web-nearby-users') {
@@ -662,16 +717,45 @@ if (!browserDevelopment()) {
     
 }
 
-// import draggable from 'vuedraggable'
+import { EventBus } from './plugins/event-bus.js';
+
+EventBus.$on('use-item', data => {
+    vue_this.useItem(data.type, data.url);
+});
+
 import itemiterator from './components/ItemIterator'
 
 export default {
     name: 'App',
     components: {
-        // draggable,
         itemiterator
     },
     data: () => ({
+        receivingItemsDialog: {
+            show: false,
+            data: {
+                receivingItemQueue: [
+                    {
+                        "sender": "URMUM",
+                        "data": {
+                            "type": "script",
+                            "name": "This Is A Real Script",
+                            "url": "https://urmum.com/lol.js",
+                            "uuid": "This Is A Real Script",
+                        }
+                    },
+                    {
+                        "sender": "URMUM2",
+                        "data": {
+                            "type": "script",
+                            "name": "REALLYLONGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG",
+                            "url": "https://urmum.com/looool.js",
+                            "uuid": "REALLYLONNGGGGGGGG",
+                        }
+                    },
+                ],
+            },
+        },
         folderList: [],
         recursiveFolderHoldingList: [],
         nearbyUsers: [
@@ -890,37 +974,50 @@ export default {
             }
 
         },
-        receivingItem: function(data) {
+        acceptReceivingItem: function(data) {
-            if (this.$store.state.receiveDialog.show != true) { // Do not accept offers if the user is already receiving an offer.
+            this.removeReceivingItem(data.data.uuid);
             
-                this.$store.commit('mutate', {
+            this.$store.commit('mutate', {
-                    property: 'receiveDialog.data.user', 
+                property: 'receiveDialog.data.user', 
-                    with: data.data.user
+                with: data.sender
-                });
+            });
-                
+            
-                this.$store.commit('mutate', {
+            this.$store.commit('mutate', {
-                    property: 'receiveDialog.data.type', 
+                property: 'receiveDialog.data.type', 
-                    with: data.data.type
+                with: data.data.type
-                });
+            });
-                
+            
-                this.$store.commit('mutate', {
+            this.$store.commit('mutate', {
-                    property: 'receiveDialog.data.name', 
+                property: 'receiveDialog.data.name', 
-                    with: data.data.name
+                with: data.data.name
-                });
+            });
-                
+            
-                this.$store.commit('mutate', {
+            this.$store.commit('mutate', {
-                    property: 'receiveDialog.data.url', 
+                property: 'receiveDialog.data.url', 
-                    with: data.data.url
+                with: data.data.url
-                });
+            });
-                
+            
-                this.getFolderList("add");
+            this.getFolderList("add");
-                                
+                            
-                this.$store.commit('mutate', {
+            this.$store.commit('mutate', {
-                    property: 'receiveDialog.show', 
+                property: 'receiveDialog.show', 
-                    with: true
+                with: true
-                });
+            });
+    
+        },
+        removeReceivingItem: function(uuid) {
+            for (var i = 0; i < this.receivingItemsDialog.data.receivingItemQueue.length; i++) {
+                if (this.receivingItemsDialog.data.receivingItemQueue[i].data.uuid === uuid) {
+                    this.receivingItemsDialog.data.receivingItemQueue.splice(i, 1);
+                    if (this.receivingItemsDialog.data.receivingItemQueue.length === 0) {
+                        this.receivingItemsDialog.show = false; // Close the dialog if there's nothing left.
+                    }
+                }
             }
         },
+        receiveReceivingItemQueue: function(data) {
+            this.receivingItemsDialog.data.receivingItemQueue = data;
+        },
         shareItem: function(uuid) {        
             var findItem = this.searchForItem(uuid);
             var typeToShare = findItem.returnedItem.type;
@@ -934,7 +1031,7 @@ export default {
                 "recipient": this.$store.state.shareDialog.data.recipient,
             });
         },
-        acceptItem: function() {
+        confirmItemReceipt: function() {
             this.pushToItems(
                 this.checkItemType(this.$store.state.receiveDialog.data.type), 
                 this.$store.state.receiveDialog.data.name,
@@ -1250,6 +1347,11 @@ export default {
                     with: value
                 });
             },
+        },
+        receivingItemQueueLength: {
+            get() {
+                return this.receivingItemsDialog.data.receivingItemQueue.length;
+            }
         }
     },
     watch: {

scripts/system/inventory/src/components/ItemIterator.vue

@@ -62,7 +62,7 @@
 
                       <v-list color="grey darken-3">
                           <v-list-item
-                              @click="useItem(item.type, item.url)"
+                              @click="sendEvent('use-item', { 'type': item.type, 'url': item.url })"
                           >
                               <v-list-item-title>Use</v-list-item-title>
                               <v-list-item-action>
@@ -195,6 +195,7 @@
 
 <script>
 
+import { EventBus } from '../plugins/event-bus.js';
 import draggable from 'vuedraggable'
 
 export default {
@@ -253,17 +254,6 @@ export default {
                 });
             },
         },
-        receiveDialogStore: {
-            get() {
-                return this.$store.state.receiveDialog;
-            },
-            set(value) {
-                this.$store.commit('mutate', {
-                    property: 'receiveDialog', 
-                    with: value
-                });
-            },
-        },
         shareDialogStore: {
             get() {
                 return this.$store.state.shareDialog;
@@ -307,6 +297,9 @@ export default {
         }
     },
     methods: {
+        sendEvent: function(command, data) {
+            EventBus.$emit(command, data);
+        },
         getIcon: function(itemType) {
             itemType = itemType.toUpperCase();
             var returnedItemIcon;

scripts/system/inventory/src/plugins/event-bus.js

@@ -0,0 +1,12 @@
+/*
+    event-bus.js
+
+    Created by Kalila L. on 21 May 2020.
+    Copyright 2020 Vircadia and contributors.
+    
+    Distributed under the Apache License, Version 2.0.
+    See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+*/
+
+import Vue from 'vue';
+export const EventBus = new Vue();