From 48dafcd28b7e0d0d1d335c1286db196b23b2fc79 Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Tue, 14 Aug 2018 15:19:54 +0900
Subject: [PATCH] Update delete project

---
 app/db.sqlite3                       | Bin 241664 -> 241664 bytes
 app/server/static/bundle/projects.js |   2 +-
 app/server/static/js/projects.js     |   5 +++++
 app/server/templates/projects.html   |  22 +++++++++++++++++++++-
 4 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/app/db.sqlite3 b/app/db.sqlite3
index 5c274dc9bf3b72d2c17e0beb12255dc2983ee289..d2821b4a5a28b1b47eac0ee1c43ab5b3b92905d4 100644
GIT binary patch
delta 185
zcmZp8z}N7AZ-O-Aw23m#jMFwI)ayxc3kfi5G8U&6m8BNN7Zl}Zr6!kf$_g>tGfr2C
zWs+<b(%&wm&-nYkHzx;!v^1}yqh(@oN?Lwq7L+nFFtpG$u+TL$Q7|yGGPJNVHPkaR
zGchqR#wBBHzCD7UsZM~6n}vaqlXLqWd8YsVOq|@?@8&bH3V;|->X{e?7`fY@^)qdM
J*3T@Z008rQG9>^2

delta 185
zcmZp8z}N7AZ-O*q*F+g-#;%PC^?Fk5LITX1jK!%%WvNB+1x5K;smUd*vO>)EjMEij
znIxNq^tTJ?GycBs&C0<bEzRrbXqi}?l9r#D1w<g0k%6Iwu7QQFp^1WlnU#U5m7$@Y
zfq|)sg#iv3Q$wTe5&TSb0&MIo42+zt+waIT{r6{LW#4``pNUlf#CTHA#3;bX-u|qg
LY5TK&W+?>#&$}_c

diff --git a/app/server/static/bundle/projects.js b/app/server/static/bundle/projects.js
index f2a3cf3b..6d1498fe 100644
--- a/app/server/static/bundle/projects.js
+++ b/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?");
 
 /***/ })
 
diff --git a/app/server/static/js/projects.js b/app/server/static/js/projects.js
index d5cce819..fd4829be 100644
--- a/app/server/static/js/projects.js
+++ b/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);
       });
     },
 
diff --git a/app/server/templates/projects.html b/app/server/templates/projects.html
index 88e60780..c7f33eb9 100644
--- a/app/server/templates/projects.html
+++ b/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>