add saving and deletion of PointClouds

PoinCloudWeb.Web/src/components/ScanItem.vue

@@ -5,16 +5,25 @@
     <div id="settings" ref="settings" class="collapsed">
       <div id="settings-container" ref="settings-container">
         <div>
-          <input type="text" value="Scan Name" />
+          <input
+            ref="focusElement"
+            type="text"
+            v-model="editPcName"
+            @keyup.enter="onEnter()"
+          />
 
-          <button>
+          <button @click="onClickSave()">
             <font-awesome-icon class="icon" icon="edit"></font-awesome-icon>
             <p>Save</p>
           </button>
           <button @click="onClickEdit()">
-            <font-awesome-icon class="icon" icon="edit"></font-awesome-icon>
+            <font-awesome-icon class="icon" icon="times"></font-awesome-icon>
             <p>Cancel</p>
           </button>
+          <button @click="onClickDelete()">
+            <font-awesome-icon class="icon" icon="trash"></font-awesome-icon>
+            <p>Delete</p>
+          </button>
         </div>
       </div>
     </div>
@@ -29,22 +38,41 @@ export default {
     return {
       isVisible: true,
       isCollapsed: true,
+      editPcName: "",
     };
   },
   methods: {
     onClickVisible() {
       this.isVisible = !this.isVisible;
     },
+    onEnter() {
+      this.onClickSave();
+    },
     onClickEdit() {
       this.isCollapsed = !this.isCollapsed;
 
       if (this.isCollapsed) {
         this.$refs.settings.style.height = 0;
       } else {
+        this.editPcName = this.item.name;
         this.$refs.settings.style.height =
           this.outerHeight(this.$refs["settings-container"]) + "px";
+        setTimeout(() => this.$refs.focusElement.focus(), 100);
       }
     },
+    onClickSave() {
+      this.$store.dispatch("pci/updatePointCloud", {
+        id: this.item.id,
+        name: this.editPcName,
+      });
+      this.onClickEdit();
+    },
+    onClickDelete() {
+      this.$store.dispatch("pci/deletePointCloud", {
+        id: this.item.id,
+        name: this.editPcName,
+      });
+    },
     outerHeight(el) {
       var width = el.offsetHeight;
       const style = getComputedStyle(el);
@@ -78,11 +106,11 @@ p {
 }
 
 #settings {
-  -moz-transition: height 0.3s;
+  -moz-transition: height 0.1s;
-  -ms-transition: height 0.3s;
+  -ms-transition: height 0.1s;
-  -o-transition: height 0.3s;
+  -o-transition: height 0.1s;
-  -webkit-transition: height 0.3s;
+  -webkit-transition: height 0.1s;
-  transition: height 0.3s;
+  transition: height 0.1s;
   height: 0;
   overflow: hidden;
 }

PoinCloudWeb.Web/src/globals.js

@@ -0,0 +1,3 @@
+export default {
+    API_URL: 'http://localhost:35588/'
+}

PoinCloudWeb.Web/src/main.js

@@ -2,11 +2,11 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faEdit, faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons'
+import { faEdit, faEye, faEyeSlash, faTrash, faTimes } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import store from "./store/store.js"
 
-library.add(faEdit, faEye, faEyeSlash)
+library.add(faEdit, faEye, faEyeSlash, faTrash, faTimes)
 
 
 //Vue.config.productionTip = false

PoinCloudWeb.Web/src/store/pointCloudInfo/store.js

@@ -1,4 +1,5 @@
 import axios from 'axios'
+import globals from '@/globals.js'
 
 export default {
     namespaced: true,
@@ -17,17 +18,56 @@ export default {
         },
         SET_LOADING(state, loading) {
             state.loading = loading
+        },
+        UPDATE_PC(state, pointCloud) {
+            const index = state.pointClouds.findIndex(x => x.id === pointCloud.data.id);
+            if (index === -1)
+                return;
+
+            if (pointCloud.action === "update") {
+                state.pointClouds[index] = pointCloud.data;
             }
+            else if (pointCloud.action === "remove") {
+                state.pointClouds.splice(index, 1);
+            }
+        },
     },
     actions: {
         loadPointClouds({ commit }) {
             commit('SET_LOADING', true)
             axios
-                .get('http://localhost:5000/pointcloudinfo')
+                .get(globals.API_URL + 'pointcloudinfo')
                 .then(response => {
-                    commit('SET_POINT_CLOUDS', response.data)
+                    commit('SET_POINT_CLOUDS', response.data);
+                    commit('SET_LOADING', false);
+                }).catch(() => {
+                    commit('SET_LOADING', false);
+                })
+        },
+        updatePointCloud({ commit }, pointCloudInfo) {
+            commit('SET_LOADING', true);
+            axios
+                .put(globals.API_URL + 'pointcloudinfo', pointCloudInfo)
+                .then(response => {
+                    setTimeout(() => {
+                        commit('UPDATE_PC', { action: "update", data: response.data });
+                        commit('SET_LOADING', false);
+                    }, 80)();
+                }).catch(() => {
                     commit('SET_LOADING', false)
                 })
+        },
+        deletePointCloud({ commit }, pointCloudInfo) {
+            commit('SET_LOADING', true);
+            axios
+                .delete(globals.API_URL + 'pointcloudinfo/' + pointCloudInfo.id)
+                .then(() => {
+                    commit('UPDATE_PC', { action: "remove", data: pointCloudInfo });
+                    commit('SET_LOADING', false);
+                }).catch(e => {
+                    alert(e);
+                    commit('SET_LOADING', false);
+                })
         }
     }
 }

PointCloudWeb.Server/PointCloudWeb.Server/Controllers/PointCloudInfoController.cs

@@ -40,6 +40,17 @@ namespace PointCloudWeb.Server.Controllers
             return ConvertPointCloudToDto(pc);
         }
 
+        [HttpDelete]
+        [Route("{id:Guid}")]
+        public ActionResult RemoveById(Guid id)
+        {
+            if (pointCloudService.GetById(id) == null)
+                return new NotFoundResult();
+
+            pointCloudService.RemoveById(id);
+            return new OkResult();
+        }
+
         [HttpPut]
         public ActionResult<PointCloudInfoDto> UpdatePointCloud([FromBody] PointCloudInfoDto newPc)
         {

PointCloudWeb.Server/PointCloudWeb.Server/Models/PointCloud.cs

@@ -122,7 +122,7 @@ namespace PointCloudWeb.Server.Models
 
         public PointCloud GetById(Guid id)
         {
-            return this.Find(pc => pc.Id == id);
+            return Find(pc => pc.Id == id);
         }
 
         public void RemoveById(Guid id)

PointCloudWeb.Server/PointCloudWeb.Server/Services/PointCloudService.cs

@@ -68,5 +68,10 @@ namespace PointCloudWeb.Server.Services
             foreach (var pointCloud in pointClouds)
                 RegisterPointCloud(pointCloud.Id);
         }
+
+        public void RemoveById(Guid id)
+        {
+            pointClouds.RemoveById(id);
+        }
     }
 }

PointCloudWeb.Server/PointCloudWeb.Server/Startup.cs

@@ -32,8 +32,11 @@ namespace PointCloudWeb.Server
             }
 
             app.UseRouting();
-            app.UseCors(options => {
+            app.UseCors(options =>
+            {
                 options.AllowAnyOrigin();
+                options.AllowAnyMethod();
+                options.AllowAnyHeader();
             });
 
             //app.UseAuthorization();