Changes credential update to use more specific channel names.

app/Events/CredentialUpdated.php

@@ -15,7 +15,7 @@ class CredentialUpdated implements ShouldBroadcast
 {
     use Dispatchable, InteractsWithSockets, SerializesModels;
 
-    public $data;
+    public $credential;
 
     /**
      * Create a new event instance.
@@ -24,7 +24,7 @@ class CredentialUpdated implements ShouldBroadcast
      */
     public function __construct($credential)
     {
-        $this->data = $credential->toJson();
+        $this->credential = $credential;
     }
 
     /**
@@ -34,6 +34,6 @@ class CredentialUpdated implements ShouldBroadcast
      */
     public function broadcastOn()
     {
-        return new Channel('credentials');
+        return new Channel('credential.'.$this->credential->credid);
     }
 }

app/Http/Controllers/Api/CredentialsController.php

@@ -82,6 +82,7 @@ class CredentialsController extends Controller
      */
     public function destroy(Credential $credential)
     {
-        //
+        $credential->delete();
+        return response()->json("", 204);
     }
 }

public/js/app.js

@@ -2387,6 +2387,18 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 /* harmony default export */ __webpack_exports__["default"] = ({
   props: ['credential', 'descriptions'],
   data: function data() {
@@ -2398,7 +2410,8 @@ __webpack_require__.r(__webpack_exports__);
   mounted: function mounted() {
     var _this = this;
 
-    Echo.channel('credentials').listen('CredentialUpdated', function (e) {
+    console.log('credential.' + this.data.credid);
+    Echo.channel('credential.' + this.data.credid).listen('CredentialUpdated', function (e) {
       // This part could potentially use a refactor.
       // Probably needs a credential list component to listen for this
       // even and update the corresponding credential. Currently every
@@ -2410,12 +2423,19 @@ __webpack_require__.r(__webpack_exports__);
       // There would still be multiples of those on the group credentials page, but an
       // order of magnitude less of those than of individual credentials.
       // It also may not be a big deal performance wise to do it like this, not sure.
-      var eData = JSON.parse(e.data);
-
-      if (_this.data.credid === eData.credid) {
-        _this.data = eData;
-      }
+      _this.data = e.credential;
     });
+  },
+  methods: {
+    deleteCredential: function deleteCredential() {
+      var _this2 = this;
+
+      axios["delete"]('/api/credentials/' + this.data.credid, this.data).then(function (response) {
+        $('#credential' + _this2.data.credid + 'deleteModal').modal('hide');
+      })["catch"](function (error) {
+        console.error(error);
+      });
+    }
   }
 });
 
@@ -49562,6 +49582,59 @@ var render = function() {
         }
       }),
       _vm._v(" "),
+      _c(
+        "modal",
+        {
+          attrs: {
+            id: "credential" + this.data.credid + "deleteModal",
+            tabindex: "-1"
+          }
+        },
+        [
+          _c(
+            "h5",
+            {
+              staticClass: "modal-title",
+              attrs: {
+                slot: "header",
+                id: "credential" + this.data.credid + "deleteModalLabel"
+              },
+              slot: "header"
+            },
+            [_vm._v("\r\n            Delete Credential\r\n        ")]
+          ),
+          _vm._v(" "),
+          _c("div", { attrs: { slot: "body" }, slot: "body" }, [
+            _vm._v("\r\n            Are you sure?\r\n        ")
+          ]),
+          _vm._v(" "),
+          _c("div", { attrs: { slot: "footer" }, slot: "footer" }, [
+            _c(
+              "button",
+              {
+                staticClass: "btn btn-secondary",
+                attrs: { type: "button", "data-dismiss": "modal" }
+              },
+              [_vm._v("Cancel")]
+            ),
+            _vm._v(" "),
+            _c(
+              "button",
+              {
+                staticClass: "btn btn-danger",
+                attrs: { type: "button" },
+                on: {
+                  click: function($event) {
+                    return _vm.deleteCredential()
+                  }
+                }
+              },
+              [_vm._v("Confirm")]
+            )
+          ])
+        ]
+      ),
+      _vm._v(" "),
       _c("div", { staticClass: "row no-gutters" }, [
         _c("div", { staticClass: "h5 col-3 text-left" }, [
           _vm._v(_vm._s(this.data.creddesc))
@@ -49647,7 +49720,19 @@ var render = function() {
               [_c("i", { staticClass: "fas fa-fw fa-edit" })]
             ),
             _vm._v(" "),
-            _vm._m(2)
+            _c(
+              "button",
+              {
+                staticClass: "btn btn-sm btn-danger p-lg-1",
+                attrs: {
+                  type: "button",
+                  "data-toggle": "modal",
+                  "data-target":
+                    "#credential" + this.data.credid + "deleteModal"
+                }
+              },
+              [_c("i", { staticClass: "fas fa-fw fa-trash-alt" })]
+            )
           ]
         )
       ])
@@ -49671,19 +49756,6 @@ var staticRenderFns = [
     return _c("label", { attrs: { for: "password" } }, [
       _c("i", { staticClass: "fas fa-fw fa-key" })
     ])
-  },
-  function() {
-    var _vm = this
-    var _h = _vm.$createElement
-    var _c = _vm._self._c || _h
-    return _c(
-      "button",
-      {
-        staticClass: "btn btn-sm btn-danger p-lg-1",
-        attrs: { type: "button" }
-      },
-      [_c("i", { staticClass: "fas fa-fw fa-trash-alt" })]
-    )
   }
 ]
 render._withStripped = true
@@ -62529,6 +62601,7 @@ window.Pusher = __webpack_require__(/*! pusher-js */ "./node_modules/pusher-js/d
 window.Echo = new laravel_echo__WEBPACK_IMPORTED_MODULE_0__["default"]({
   broadcaster: 'pusher',
   key: "upccrt",
+  authEndpoint: '/broadcasting/auth',
   wsHost: window.location.hostname,
   wsPort: 6001,
   disableStats: true

resources/js/bootstrap.js

@@ -36,6 +36,7 @@ window.Pusher = require('pusher-js');
 window.Echo = new Echo({
     broadcaster: 'pusher',
     key: process.env.MIX_PUSHER_APP_KEY,
+    authEndpoint: '/broadcasting/auth',
     wsHost: window.location.hostname,
     wsPort: 6001,
     disableStats: true,

resources/js/components/credential.vue

@@ -1,6 +1,18 @@
 <template>
 <div class="bg-lightgray m-1 p-2 border rounded container-fluid">
     <credential-form-modal :descriptions="creddescList" :modal-id="'credential'+this.data.credid+'editModal'" :populateWith="this.data"></credential-form-modal>
+    <modal :id="'credential'+this.data.credid+'deleteModal'" tabindex="-1">
+        <h5 slot="header" class="modal-title" :id="'credential'+this.data.credid+'deleteModalLabel'">
+            Delete Credential
+        </h5>
+        <div slot="body">
+            Are you sure?
+        </div>
+        <div slot="footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+            <button type="button" class="btn btn-danger" @click=deleteCredential()>Confirm</button>
+        </div>
+    </modal>
     <div class="row no-gutters">
         <div class="h5 col-3 text-left">{{this.data.creddesc}}</div>
         <div class="col-9 text-right">{{this.data.creddate}}</div>
@@ -24,7 +36,7 @@
         </div>
         <div class="btn-group col-lg-2 align-self-end w-25 w-lg-auto" role="group" aria-label="Edit and Delete">
             <button type="button" class="btn btn-sm btn-secondary p-lg-1" data-toggle="modal" :data-target="'#credential'+this.data.credid+'editModal'"><i class="fas fa-fw fa-edit"></i></button>
-            <button type="button" class="btn btn-sm btn-danger p-lg-1"><i class="fas fa-fw fa-trash-alt"></i></button>
+            <button type="button" class="btn btn-sm btn-danger p-lg-1" data-toggle="modal" :data-target="'#credential'+this.data.credid+'deleteModal'"><i class="fas fa-fw fa-trash-alt"></i></button>
         </div>
     </div>
 </div>
@@ -39,7 +51,8 @@ export default {
         }
     },
     mounted() {
-        Echo.channel('credentials')
+        console.log('credential.'+this.data.credid)
+        Echo.channel('credential.'+this.data.credid)
             .listen('CredentialUpdated', (e) => {
                 // This part could potentially use a refactor.
                 // Probably needs a credential list component to listen for this
@@ -52,11 +65,16 @@ export default {
                 // There would still be multiples of those on the group credentials page, but an
                 // order of magnitude less of those than of individual credentials.
                 // It also may not be a big deal performance wise to do it like this, not sure.
-                let eData = JSON.parse(e.data);
-                if (this.data.credid === eData.credid) {
-                    this.data = eData;
-                }
+                this.data = e.credential;
             });
+    },
+    methods: {
+        deleteCredential() {
+            axios.delete('/api/credentials/' + this.data.credid, this.data)
+                .then(response => {
+                    $('#credential'+this.data.credid+'deleteModal').modal('hide');
+                }).catch(error => { console.error(error) })
+        }
     }
 }
 </script>

routes/api.php

@@ -28,6 +28,7 @@ Route::middleware('auth:api')->group( function() {
 
     Route::post('/credentials', 'Api\CredentialsController@store');
     Route::put('/credentials/{credential}', 'Api\CredentialsController@update');
+    Route::delete('/credentials/{credential}', 'Api\CredentialsController@destroy');
 
     Route::get('credtypes', 'Api\CredDescController@index');