Rewrites credential delete so it live-updates for everyone.

Removes unecessary code from previous implementation.

app/Events/CredentialDeleted.php

@@ -0,0 +1,44 @@
+<?php
+
+namespace App\Events;
+
+use Illuminate\Broadcasting\Channel;
+use Illuminate\Broadcasting\InteractsWithSockets;
+use Illuminate\Broadcasting\PresenceChannel;
+use Illuminate\Broadcasting\PrivateChannel;
+use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
+use Illuminate\Foundation\Events\Dispatchable;
+use Illuminate\Queue\SerializesModels;
+use App\Credential;
+
+class CredentialDeleted implements ShouldBroadcast
+{
+    use Dispatchable, InteractsWithSockets, SerializesModels;
+
+    public $credential;
+
+    /**
+     * Create a new event instance.
+     *
+     * @return void
+     */
+    public function __construct($credential)
+    {
+        $array = json_decode($credential, true);
+        $this->credential = $array;
+    }
+
+    /**
+     * Get the channels the event should broadcast on.
+     *
+     * @return \Illuminate\Broadcasting\Channel|array
+     */
+    public function broadcastOn()
+    {
+        if ($this->credential['pcid'] != 0) {
+            return new Channel('credlist.pcid.'.$this->credential['pcid']);
+        } else {
+            return new Channel('credlist.groupid.'.$this->credential['groupid']);
+        }
+    }
+}

app/Http/Controllers/Api/CredentialsController.php

@@ -82,7 +82,9 @@ class CredentialsController extends Controller
      */
     public function destroy(Credential $credential)
     {
+        $deletedCred = $credential->toJson();
         $credential->delete();
+        event(new \App\Events\CredentialDeleted($deletedCred));
         return response()->json("", 204);
     }
 }

public/js/app.js

@@ -2345,7 +2345,38 @@ __webpack_require__.r(__webpack_exports__);
   },
   methods: {
     deleteCred: function deleteCred(index) {
-      console.log(this.credentials.splice(index, 1));
+      this.credentials.splice(index, 1);
+    }
+  },
+  mounted: function mounted() {
+    var _this = this;
+
+    if (this.pcid) {
+      Echo.channel('credlist.pcid.' + this.pcid).listen('CredentialDeleted', function (e) {
+        var deletedCred = e.credential;
+
+        var index = _this.credentials.findIndex(function (credential) {
+          return credential.pcid === deletedCred['pcid'];
+        });
+
+        $('#credential' + deletedCred['credid'] + 'deleteModal').modal('hide');
+
+        _this.deleteCred(index);
+      });
+    }
+
+    if (this.groupid) {
+      Echo.channel('credlist.groupid.' + this.groupid).listen('CredentialDeleted', function (e) {
+        var deletedCred = e.credential;
+
+        var index = _this.credentials.findIndex(function (credential) {
+          return credential.groupid === deletedCred['groupid'];
+        });
+
+        $('#credential' + deletedCred['credid'] + 'deleteModal').modal('hide');
+
+        _this.deleteCred(index);
+      });
     }
   }
 });
@@ -2415,7 +2446,6 @@ __webpack_require__.r(__webpack_exports__);
   mounted: function mounted() {
     var _this = this;
 
-    console.log('credential.' + this.data.credid);
     Echo.channel('credential.' + this.data.credid).listen('CredentialUpdated', function (e) {
       _this.data = e.credential;
     });
@@ -2426,8 +2456,6 @@ __webpack_require__.r(__webpack_exports__);
 
       axios["delete"]('/api/credentials/' + this.data.credid, this.data).then(function (response) {
         $('#credential' + _this2.data.credid + 'deleteModal').modal('hide');
-
-        _this2.$emit('delete-cred');
       })["catch"](function (error) {
         console.error(error);
       });
@@ -49528,18 +49556,13 @@ var render = function() {
         [_vm._v("New Credential")]
       ),
       _vm._v(" "),
-      _vm._l(_vm.credentials, function(credential, index) {
+      _vm._l(_vm.credentials, function(credential) {
         return _c(
           "div",
-          { key: index },
+          { key: credential.credid },
           [
             _c("credential", {
-              attrs: { credential: credential, descriptions: _vm.creddescList },
-              on: {
-                "delete-cred": function($event) {
-                  return _vm.deleteCred(index)
-                }
-              }
+              attrs: { credential: credential, descriptions: _vm.creddescList }
             })
           ],
           1

resources/js/components/credential-list.vue

@@ -2,8 +2,8 @@
     <div>
         <credential-form-modal modal-id="newCredentialModal" :descriptions="creddescList" :create="true" :pcid="pcid"></credential-form-modal>
         <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#newCredentialModal">New Credential</button>
-        <div v-for="(credential, index) in credentials" :key="index">
-            <credential :credential="credential" :descriptions="creddescList" @delete-cred="deleteCred(index)"></credential>
+        <div v-for="credential in credentials" :key="credential.credid">
+            <credential :credential="credential" :descriptions="creddescList"></credential>
         </div>
     </div>
 </template>
@@ -41,7 +41,31 @@ export default {
     },
     methods: {
         deleteCred: function(index) {
-            console.log(this.credentials.splice(index, 1));
+            this.credentials.splice(index, 1);
+        }
+    },
+    mounted () {
+        if (this.pcid) {
+            Echo.channel('credlist.pcid.'+this.pcid)
+                .listen('CredentialDeleted', (e) => {
+                    let deletedCred = e.credential
+                    let index = this.credentials.findIndex((credential) => {
+                        return credential.pcid === deletedCred['pcid']
+                    })
+                    $('#credential'+deletedCred['credid']+'deleteModal').modal('hide');
+                    this.deleteCred(index);
+                })
+        }
+        if (this.groupid) {
+            Echo.channel('credlist.groupid.'+this.groupid)
+                .listen('CredentialDeleted', (e) => {
+                    let deletedCred = e.credential
+                    let index = this.credentials.findIndex((credential) => {
+                        return credential.groupid === deletedCred['groupid']
+                    })
+                    $('#credential'+deletedCred['credid']+'deleteModal').modal('hide');
+                    this.deleteCred(index);
+                })
         }
     }
 }

resources/js/components/credential.vue

@@ -51,7 +51,6 @@ export default {
         }
     },
     mounted() {
-        console.log('credential.'+this.data.credid)
         Echo.channel('credential.'+this.data.credid)
             .listen('CredentialUpdated', (e) => {
                 this.data = e.credential;
@@ -62,7 +61,6 @@ export default {
             axios.delete('/api/credentials/' + this.data.credid, this.data)
                 .then(response => {
                     $('#credential'+this.data.credid+'deleteModal').modal('hide');
-                    this.$emit('delete-cred');
                 }).catch(error => { console.error(error) })
         }
     }