Frontend support for entities deletion

platypush/backend/http/webapp/src/components/panels/Entities/Index.vue

@@ -256,6 +256,16 @@ export default {
       this.entities[entityId] = entity
     },
 
+    onEntityDelete(event) {
+      const entityId = event.entity?.id
+      if (entityId == null)
+        return
+      if (entityId === this.modalEntityId)
+        this.modalEntityId = null
+      if (this.entities[entityId])
+        delete this.entities[entityId]
+    },
+
     onEntityModal(entityId) {
       if (entityId) {
         this.modalEntityId = entityId
@@ -274,6 +284,12 @@ export default {
       'platypush.message.event.entities.EntityUpdateEvent'
     )
 
+    this.subscribe(
+      this.onEntityDelete,
+      'on-entity-delete',
+      'platypush.message.event.entities.EntityDeleteEvent'
+    )
+
     this.sync()
   },
 }

platypush/backend/http/webapp/src/components/panels/Entities/Modal.vue

@@ -1,5 +1,12 @@
 <template>
   <Modal :visible="visible" :title="entity.name || entity.external_id">
+    <ConfirmDialog ref="deleteConfirmDiag" title="Confirm entity deletion" @input="onDelete">
+      Are you <b>sure</b> that you want to delete this entity? <br/><br/>
+      Note: you should only delete an entity if its plugin has been disabled
+      or the entity is no longer reachable.<br/><br/>
+      Otherwise, the entity will simply be created again upon the next scan.
+    </ConfirmDialog>
+
     <div class="table-row">
       <div class="title">
         Name
@@ -78,12 +85,22 @@
       <div class="title">Updated at</div>
       <div class="value" v-text="formatDateTime(entity.updated_at)" />
     </div>
+
+    <div class="table-row delete-entity-container">
+      <div class="title">Delete Entity</div>
+      <div class="value">
+        <button @click="$refs.deleteConfirmDiag.show()">
+          <i class="fas fa-trash" />
+        </button>
+      </div>
+    </div>
   </Modal>
 </template>
 
 <script>
 import Modal from "@/components/Modal";
 import Icon from "@/components/elements/Icon";
+import ConfirmDialog from "@/components/elements/ConfirmDialog";
 import EditButton from "@/components/elements/EditButton";
 import NameEditor from "@/components/elements/NameEditor";
 import Utils from "@/Utils";
@@ -91,7 +108,7 @@ import meta from './meta.json'
 
 export default {
   name: "Entity",
-  components: {Modal, EditButton, NameEditor, Icon},
+  components: {Modal, EditButton, NameEditor, Icon, ConfirmDialog},
   mixins: [Utils],
   emits: ['input', 'loading'],
   props: {
@@ -128,6 +145,16 @@ export default {
       }
     },
 
+    async onDelete() {
+      this.loading = true
+
+      try {
+        await this.request('entities.delete', [this.entity.id])
+      } finally {
+        this.loading = false
+      }
+    },
+
     async onIconEdit(newIcon) {
       this.loading = true
 
@@ -207,5 +234,12 @@ export default {
   .help {
     font-size: 0.75em;
   }
+
+  .delete-entity-container {
+    color: $error-fg;
+    button {
+      color: $error-fg;
+    }
+  }
 }
 </style>