Update delete project

app/server/static/bundle/projects.js

@@ -460,7 +460,7 @@ eval("var g;\n\n// This works in non-strict mode\ng = (function() {\n\treturn th
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm.js\");\n/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! axios */ \"./node_modules/axios/index.js\");\n/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(axios__WEBPACK_IMPORTED_MODULE_1__);\n\n\naxios__WEBPACK_IMPORTED_MODULE_1___default.a.defaults.xsrfCookieName = 'csrftoken';\naxios__WEBPACK_IMPORTED_MODULE_1___default.a.defaults.xsrfHeaderName = 'X-CSRFToken';\nconst baseUrl = window.location.href.split('/').slice(0, 3).join('/');\n\n\nconst vm = new vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"]({\n  el: '#projects_root',\n  delimiters: ['[[', ']]'],\n  data: {\n    items: [],\n    selectedType: 'All',\n    isActive: false,\n  },\n\n  methods: {\n    getProjects() {\n      axios__WEBPACK_IMPORTED_MODULE_1___default.a.get(`${baseUrl}/api/projects`).then((response) => {\n        this.items = response.data;\n      });\n    },\n\n    deleteProject(project) {\n      axios__WEBPACK_IMPORTED_MODULE_1___default.a.delete(`${baseUrl}/api/projects/${project.id}/`).then((response) => {\n      });\n    },\n\n    updateSelectedType(type) {\n      this.selectedType = type;\n    },\n  },\n\n  computed: {\n    uniqueProjectTypes() {\n      const types = [];\n      for (let i = 0; i < this.items.length; i++) {\n        const item = this.items[i];\n        types.push(item.project_type);\n      }\n      const uniqueTypes = Array.from(new Set(types));\n\n      return uniqueTypes;\n    },\n\n    filteredProjects() {\n      // filter projects\n      const projects = [];\n      for (let i = 0; i < this.items.length; i++) {\n        const item = this.items[i];\n        if ((this.selectedType === 'All') || (item.project_type === this.selectedType)) {\n          projects.push(item);\n        }\n      }\n      // create nested projects\n      const nestedProjects = [];\n      for (let i = 0; i < Math.ceil(projects.length / 3); i++) {\n        const p = projects.slice(i * 3, (i + 1) * 3);\n        nestedProjects.push(p);\n      }\n      return nestedProjects;\n    },\n  },\n\n  created() {\n    this.getProjects();\n  },\n});\n\n\n//# sourceURL=webpack:///./static/js/projects.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm.js\");\n/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! axios */ \"./node_modules/axios/index.js\");\n/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(axios__WEBPACK_IMPORTED_MODULE_1__);\n\n\n\naxios__WEBPACK_IMPORTED_MODULE_1___default.a.defaults.xsrfCookieName = 'csrftoken';\naxios__WEBPACK_IMPORTED_MODULE_1___default.a.defaults.xsrfHeaderName = 'X-CSRFToken';\nconst baseUrl = window.location.href.split('/').slice(0, 3).join('/');\n\n\nconst vm = new vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"]({\n  el: '#projects_root',\n  delimiters: ['[[', ']]'],\n  data: {\n    items: [],\n    selectedType: 'All',\n    isActive: false,\n    isDelete: false,\n  },\n\n  methods: {\n    getProjects() {\n      axios__WEBPACK_IMPORTED_MODULE_1___default.a.get(`${baseUrl}/api/projects`).then((response) => {\n        this.items = response.data;\n      });\n    },\n\n    deleteProject(project) {\n      axios__WEBPACK_IMPORTED_MODULE_1___default.a.delete(`${baseUrl}/api/projects/${project.id}/`).then((response) => {\n        this.isDelete = false;\n        const index = this.items.indexOf(project);\n        this.items.splice(index, 1);\n      });\n    },\n\n    updateSelectedType(type) {\n      this.selectedType = type;\n    },\n  },\n\n  computed: {\n    uniqueProjectTypes() {\n      const types = [];\n      for (let i = 0; i < this.items.length; i++) {\n        const item = this.items[i];\n        types.push(item.project_type);\n      }\n      const uniqueTypes = Array.from(new Set(types));\n\n      return uniqueTypes;\n    },\n\n    filteredProjects() {\n      // filter projects\n      const projects = [];\n      for (let i = 0; i < this.items.length; i++) {\n        const item = this.items[i];\n        if ((this.selectedType === 'All') || (item.project_type === this.selectedType)) {\n          projects.push(item);\n        }\n      }\n      // create nested projects\n      const nestedProjects = [];\n      for (let i = 0; i < Math.ceil(projects.length / 3); i++) {\n        const p = projects.slice(i * 3, (i + 1) * 3);\n        nestedProjects.push(p);\n      }\n      return nestedProjects;\n    },\n  },\n\n  created() {\n    this.getProjects();\n  },\n});\n\n\n//# sourceURL=webpack:///./static/js/projects.js?");
 
 /***/ })
 

app/server/static/js/projects.js

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import axios from 'axios';
+
 axios.defaults.xsrfCookieName = 'csrftoken';
 axios.defaults.xsrfHeaderName = 'X-CSRFToken';
 const baseUrl = window.location.href.split('/').slice(0, 3).join('/');
@@ -12,6 +13,7 @@ const vm = new Vue({
     items: [],
     selectedType: 'All',
     isActive: false,
+    isDelete: false,
   },
 
   methods: {
@@ -23,6 +25,9 @@ const vm = new Vue({
 
     deleteProject(project) {
       axios.delete(`${baseUrl}/api/projects/${project.id}/`).then((response) => {
+        this.isDelete = false;
+        const index = this.items.indexOf(project);
+        this.items.splice(index, 1);
       });
     },
 

app/server/templates/projects.html

@@ -74,8 +74,11 @@
           </div>
         </div>
 
+        
+
         <div class="columns features" v-for="projects in filteredProjects">
           <div class="column is-4" v-for="project in projects">
+
             <div class="card is-shady">
               <div class="card-image">
                 <figure class="image is-4by3">
@@ -93,9 +96,26 @@
                 </div>
               </div>
               {% if user.is_superuser %}
+              <!-- Modal card for creating project. -->
+              <div class="modal" :class="{ 'is-active': isDelete }">
+                <div class="modal-background"></div>
+                <div class="modal-card">
+                  <header class="modal-card-head">
+                    <p class="modal-card-title">Delete Project</p>
+                    <button class="delete" aria-label="close" @click="isDelete=!isDelete"></button>
+                  </header>
+                  <section class="modal-card-body">
+                    Are you sure you want to delete project?
+                  </section>
+                  <footer class="modal-card-foot" style="background-color:#dbdbdb !important;padding:20px !important;">
+                    <button class="button is-danger" @click="deleteProject(project)">Delete</button>
+                    <button class="button" @click="isDelete=!isDelete">Cancel</button>
+                  </footer>
+                </div>
+              </div>
               <div class="card-footer">
                 <a v-bind:href="'/projects/' + project.id + '/docs'" class="card-footer-item">Edit</a>
-                <a href="" class="card-footer-item has-text-danger" style="font-weight:700" @click="deleteProject(project)">Delete</a>
+                <a href="#1" class="card-footer-item has-text-danger" style="font-weight:700" @click="isDelete=!isDelete">Delete</a>
               </div>
               {% endif %}
             </div>