Merge pull request #523 from fabiopbx/bugfix-522

correct display of incident updates on delete, fixes #522. Includes #514

frontend/src/components/Dashboard/Incidents.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="col-12">
-        <div v-for="(incident, i) in incidents" class="card contain-card text-black-50 bg-white mb-4">
+
+        <div v-for="incident in incidents" :key="incident.id" class="card contain-card text-black-50 bg-white mb-4">
             <div class="card-header">Incident: {{incident.title}}
                 <button @click="deleteIncident(incident)" class="btn btn-sm btn-danger float-right">
                     <font-awesome-icon icon="times" />  Delete
@@ -44,20 +45,20 @@
                 </form>
             </div>
         </div>
+        
     </div>
 </template>
 
 <script>
-import Api from "../../API";
+    import Api from "../../API";
-import FormIncidentUpdates from "@/forms/IncidentUpdates";
+    import FormIncidentUpdates from "@/forms/IncidentUpdates";
 
-export default {
+    export default {
         name: 'Incidents',
         components: {FormIncidentUpdates},
         data() {
             return {
-            service_id: 0,
+                serviceID: 0,
-              ready: false,
                 incidents: [],
                 incident: {
                     title: "",
@@ -66,37 +67,48 @@ export default {
                   }
               }
           },
-  computed:{
+
-    theID() {
+    created() {
-      return this.$route.params.id
+        this.serviceID = Number(this.$route.params.id);
-    }
+        this.incident.service = Number(this.$route.params.id);
     },
+
     async mounted() {
         await this.loadIncidents()
     },
+
     methods: {
-      async getIncidents() {
+
-        return await Api.incidents_service(this.theID)
-      },
         async deleteIncident(incident) {
             let c = confirm(`Are you sure you want to delete '${incident.title}'?`)
             if (c) {
-          await Api.incident_delete(incident)
+                this.res = await Api.incident_delete(incident)
-          await this.loadIncidents()
+                if (this.res.status === "success") {
+                    this.incidents = this.incidents.filter(obj => obj.id !== incident.id); // this is better in terms of not having to querry the db to get a fresh copy of all updates
+                    //await this.loadIncidents()
+                } // TODO: further error checking here... maybe alert user it failed with modal or so
             }
         },
-      async loadIncidents() {
+
-        this.incidents = await Api.incidents_service(this.service_id)
-      },
         async createIncident() {
-        await Api.incident_create(this.theID, this.incident)
+            this.res = await Api.incident_create(this.serviceID, this.incident)
-        await this.loadIncidents()
+            if (this.res.status === "success") {
+                this.incidents.push(this.res.output) // this is better in terms of not having to querry the db to get a fresh copy of all updates
+                //await this.loadIncidents()
+            } // TODO: further error checking here... maybe alert user it failed with modal or so
+
+            // reset the form data
             this.incident = {
                 title: "",
                 description: "",
-          service: this.service_id,
+                service: this.serviceID,
             }
+        },
+
+        async loadIncidents() {
+            this.incidents = await Api.incidents_service(this.serviceID)
         }
+
     }
 }
 </script>

frontend/src/forms/IncidentUpdates.vue

@@ -5,7 +5,7 @@
             No updates found, create a new Incident Update below.
         </div>
 
-        <div v-for="(update, i) in updates">
+        <div v-for="update in updates" :key="update.id">
             <div class="alert alert-light" role="alert">
                 <span class="badge badge-pill badge-info text-uppercase">{{update.type}}</span>
                 <span class="float-right font-2">{{ago(update.created_at)}} ago</span>
@@ -16,6 +16,7 @@
                 </span>
             </div>
         </div>
+
         <form class="row" @submit.prevent="createIncidentUpdate">
             <div class="col-3">
                 <select v-model="incident_update.type" class="form-control">
@@ -37,6 +38,7 @@
                 </button>
             </div>
         </form>
+
     </div>
 </template>
 
@@ -47,9 +49,7 @@
 
     export default {
         name: 'FormIncidentUpdates',
-  components: {
+        components: {},
-
-  },
         props: {
             incident: {
                 type: Object,
@@ -58,34 +58,50 @@
         },
         data () {
             return {
-      updates: this.incident.updates,
+                updates: [],
                 incident_update: {
                     incident: this.incident.id,
                     message: "",
-            type: ""
+                    type: "Investigating" // TODO: default to something.. theres is no error checking for blank submission...
                 }
             }
         },
-    beforeRouteUpdate (to, from, next) {
 
-    },
         async mounted() {
             await this.loadUpdates()
         },
+
         methods: {
+
             async delete_update(update) {
-        await Api.incident_update_delete(update)
+                this.res = await Api.incident_update_delete(update)
-        await this.loadUpdates()
+                if (this.res.status === "success") {
+                    this.updates = this.updates.filter(obj => obj.id !== update.id); // this is better in terms of not having to querry the db to get a fresh copy of all updates
+                    //await this.loadUpdates()
+                }
             },
+
             async createIncidentUpdate() {
-              await Api.incident_update_create(this.incident_update)
+                this.res = await Api.incident_update_create(this.incident_update)
-                await this.loadUpdates()
+                if (this.res.status === "success") {
+                    this.updates.push(this.res.output) // this is better in terms of not having to querry the db to get a fresh copy of all updates
+                    //await this.loadUpdates()
+                } // TODO: further error checking here... maybe alert user it failed with modal or so
+
+                // reset the form data
+                this.incident_update = {
+                    incident: this.incident.id,
+                    message: "",
+                    type: "Investigating"
+                }
+
             },
+
             async loadUpdates() {
                 this.updates = await Api.incident_updates(this.incident)
             }
         }
-}
+    }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->