Merge pull request #44 from Hoogkamer/develop

Develop
Hoogkamer · Oct 10, 2020 · 30bc47a · 30bc47a
2 parents f80116f + 3746a83
commit 30bc47a
Show file tree

Hide file tree

Showing 10 changed files with 74 additions and 14 deletions.
diff --git a/components/EditMenu.vue b/components/EditMenu.vue
@@ -55,7 +55,7 @@ export default {
       }
       this.$store.commit('showEditMenu', null)
       if (confirmed) {
-        this.deleteDepartment()
+        this.deleteDepartment(this.activeDepartment)
       }
     },
     addDept: function() {

diff --git a/components/ShowPerson.vue b/components/ShowPerson.vue
@@ -59,6 +59,7 @@
                   span.role {{assignment.role}}
         div
           button.btn1(v-if="showPerson.new" @click='addEmployee(showPerson)' :disabled='!employeeID || !employeeName') ADD
+          button.btn2(v-if="editMode" @click='deleteEmployee1(showPerson)' title='Removes the user from all departments and completely deletes the user') Delete this user
 
 </template>
 
@@ -134,7 +135,8 @@ export default {
       'setShowPersonProperty',
       'addPerson',
       'updateActiveDepartmentManager',
-      'addAssignment'
+      'addAssignment',
+      'deleteEmployee'
     ]),
     ...mapActions(['setShowDepartment']),
     goto(d) {
@@ -162,6 +164,15 @@ export default {
         value: value
       })
     },
+    deleteEmployee1(person) {
+      console.log('Deleting', person)
+      if (
+        confirm('This will remove the person completely. Continue?')
+      ) {
+        this.deleteEmployee(person)
+        this.setShowPerson(null)
+      }
+    },
     addEmployee(person) {
       console.log('adding', person)
       if (this.people.find(p => p.id == person.id)) {
@@ -307,6 +318,14 @@ table td * {
   background-color: lightgrey;
   cursor: not-allowed;
 }
+.btn2 {
+  padding: 5px 20px;
+  border: 2px solid red;
+  border-radius: 5px;
+  color: white;
+  background-color: red;
+  cursor: pointer;
+}
 .nophoto {
   font-size: 200px;
   color: lightgrey;

diff --git a/docs/200.html b/docs/200.html
@@ -1,9 +1,9 @@
 <!doctype html>
 <html>
   <head>
-    <title>Organization chart</title><meta data-n-head="1" charset="utf-8"><meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="1" data-hid="description" name="description" content="Free Organization Chart generator and viewer"><meta data-n-head="1" data-hid="keywords" name="keywords" content="vuejs, nuxt, javascript, orgchart, organization, open-source"><meta data-n-head="1" name="google-site-verification" content="faMBWsCcw7RZQp1wVNh-Hgy7aQ8D2KMMNpwg0LKtsu4"><link data-n-head="1" rel="icon" type="image/x-icon" href="/favicon.ico"><script data-n-head="1" src="data.js"></script><script data-n-head="1" src="config.js"></script><link rel="preload" href="./_nuxt/runtime.2448e05.js" as="script"><link rel="preload" href="./_nuxt/vendors/commons.2fea336.js" as="script"><link rel="preload" href="./_nuxt/app.1026d72.js" as="script">
+    <title>Organization chart</title><meta data-n-head="1" charset="utf-8"><meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="1" data-hid="description" name="description" content="Free Organization Chart generator and viewer"><meta data-n-head="1" data-hid="keywords" name="keywords" content="vuejs, nuxt, javascript, orgchart, organization, open-source"><meta data-n-head="1" name="google-site-verification" content="faMBWsCcw7RZQp1wVNh-Hgy7aQ8D2KMMNpwg0LKtsu4"><link data-n-head="1" rel="icon" type="image/x-icon" href="/favicon.ico"><script data-n-head="1" src="data.js"></script><script data-n-head="1" src="config.js"></script><link rel="preload" href="./_nuxt/runtime.ec132c0.js" as="script"><link rel="preload" href="./_nuxt/vendors/commons.2fea336.js" as="script"><link rel="preload" href="./_nuxt/app.07b450f.js" as="script">
   </head>
   <body>
     <div id="__nuxt"><style>#__nuxt,body,html{background:#fff;width:100%;height:100%;display:flex;justify-content:center;align-items:center;margin:0;padding:0}.sk-circle{width:40px;height:40px;position:relative}.sk-circle .sk-child{width:100%;height:100%;position:absolute;left:0;top:0}.sk-circle .sk-child:before{content:'';display:block;margin:0 auto;width:15%;height:15%;background-color:#05668d;border-radius:100%;-webkit-animation:sk-circleBounceDelay 1.2s infinite ease-in-out both;animation:sk-circleBounceDelay 1.2s infinite ease-in-out both}.sk-circle .sk-circle2{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.sk-circle .sk-circle3{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg)}.sk-circle .sk-circle4{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sk-circle .sk-circle5{-webkit-transform:rotate(120deg);-ms-transform:rotate(120deg);transform:rotate(120deg)}.sk-circle .sk-circle6{-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg)}.sk-circle .sk-circle7{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.sk-circle .sk-circle8{-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);transform:rotate(210deg)}.sk-circle .sk-circle9{-webkit-transform:rotate(240deg);-ms-transform:rotate(240deg);transform:rotate(240deg)}.sk-circle .sk-circle10{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.sk-circle .sk-circle11{-webkit-transform:rotate(300deg);-ms-transform:rotate(300deg);transform:rotate(300deg)}.sk-circle .sk-circle12{-webkit-transform:rotate(330deg);-ms-transform:rotate(330deg);transform:rotate(330deg)}.sk-circle .sk-circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.sk-circle .sk-circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s}.sk-circle .sk-circle4:before{-webkit-animation-delay:-.9s;animation-delay:-.9s}.sk-circle .sk-circle5:before{-webkit-animation-delay:-.8s;animation-delay:-.8s}.sk-circle .sk-circle6:before{-webkit-animation-delay:-.7s;animation-delay:-.7s}.sk-circle .sk-circle7:before{-webkit-animation-delay:-.6s;animation-delay:-.6s}.sk-circle .sk-circle8:before{-webkit-animation-delay:-.5s;animation-delay:-.5s}.sk-circle .sk-circle9:before{-webkit-animation-delay:-.4s;animation-delay:-.4s}.sk-circle .sk-circle10:before{-webkit-animation-delay:-.3s;animation-delay:-.3s}.sk-circle .sk-circle11:before{-webkit-animation-delay:-.2s;animation-delay:-.2s}.sk-circle .sk-circle12:before{-webkit-animation-delay:-.1s;animation-delay:-.1s}@-webkit-keyframes sk-circleBounceDelay{0%,100%,80%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes sk-circleBounceDelay{0%,100%,80%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}</style><div class="sk-circle">  <div class="sk-circle1 sk-child"></div>  <div class="sk-circle2 sk-child"></div>  <div class="sk-circle3 sk-child"></div>  <div class="sk-circle4 sk-child"></div>  <div class="sk-circle5 sk-child"></div>  <div class="sk-circle6 sk-child"></div>  <div class="sk-circle7 sk-child"></div>  <div class="sk-circle8 sk-child"></div>  <div class="sk-circle9 sk-child"></div>  <div class="sk-circle10 sk-child"></div>  <div class="sk-circle11 sk-child"></div>  <div class="sk-circle12 sk-child"></div></div></div><script>window.__NUXT__={config:{},staticAssetsBase:void 0}</script>
-  <script src="./_nuxt/runtime.2448e05.js"></script><script src="./_nuxt/vendors/commons.2fea336.js"></script><script src="./_nuxt/app.1026d72.js"></script></body>
+  <script src="./_nuxt/runtime.ec132c0.js"></script><script src="./_nuxt/vendors/commons.2fea336.js"></script><script src="./_nuxt/app.07b450f.js"></script></body>
 </html>
diff --git a/docs/_nuxt/app.07b450f.js b/docs/_nuxt/app.07b450f.js
diff --git a/docs/_nuxt/app.1026d72.js b/docs/_nuxt/app.1026d72.js
diff --git a/docs/_nuxt/pages/index.0fb5a9f.js → docs/_nuxt/pages/index.9fa7279.js b/docs/_nuxt/pages/index.0fb5a9f.js → docs/_nuxt/pages/index.9fa7279.js
diff --git a/docs/_nuxt/runtime.2448e05.js → docs/_nuxt/runtime.ec132c0.js b/docs/_nuxt/runtime.2448e05.js → docs/_nuxt/runtime.ec132c0.js
diff --git a/docs/index.html b/docs/index.html
@@ -1,9 +1,9 @@
 <!doctype html>
 <html>
   <head>
-    <title>Organization chart</title><meta data-n-head="1" charset="utf-8"><meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="1" data-hid="description" name="description" content="Free Organization Chart generator and viewer"><meta data-n-head="1" data-hid="keywords" name="keywords" content="vuejs, nuxt, javascript, orgchart, organization, open-source"><meta data-n-head="1" name="google-site-verification" content="faMBWsCcw7RZQp1wVNh-Hgy7aQ8D2KMMNpwg0LKtsu4"><link data-n-head="1" rel="icon" type="image/x-icon" href="/favicon.ico"><script data-n-head="1" src="data.js"></script><script data-n-head="1" src="config.js"></script><link rel="preload" href="./_nuxt/runtime.2448e05.js" as="script"><link rel="preload" href="./_nuxt/vendors/commons.2fea336.js" as="script"><link rel="preload" href="./_nuxt/app.1026d72.js" as="script">
+    <title>Organization chart</title><meta data-n-head="1" charset="utf-8"><meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="1" data-hid="description" name="description" content="Free Organization Chart generator and viewer"><meta data-n-head="1" data-hid="keywords" name="keywords" content="vuejs, nuxt, javascript, orgchart, organization, open-source"><meta data-n-head="1" name="google-site-verification" content="faMBWsCcw7RZQp1wVNh-Hgy7aQ8D2KMMNpwg0LKtsu4"><link data-n-head="1" rel="icon" type="image/x-icon" href="/favicon.ico"><script data-n-head="1" src="data.js"></script><script data-n-head="1" src="config.js"></script><link rel="preload" href="./_nuxt/runtime.ec132c0.js" as="script"><link rel="preload" href="./_nuxt/vendors/commons.2fea336.js" as="script"><link rel="preload" href="./_nuxt/app.07b450f.js" as="script">
   </head>
   <body>
     <div id="__nuxt"><style>#__nuxt,body,html{background:#fff;width:100%;height:100%;display:flex;justify-content:center;align-items:center;margin:0;padding:0}.sk-circle{width:40px;height:40px;position:relative}.sk-circle .sk-child{width:100%;height:100%;position:absolute;left:0;top:0}.sk-circle .sk-child:before{content:'';display:block;margin:0 auto;width:15%;height:15%;background-color:#05668d;border-radius:100%;-webkit-animation:sk-circleBounceDelay 1.2s infinite ease-in-out both;animation:sk-circleBounceDelay 1.2s infinite ease-in-out both}.sk-circle .sk-circle2{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.sk-circle .sk-circle3{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg)}.sk-circle .sk-circle4{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sk-circle .sk-circle5{-webkit-transform:rotate(120deg);-ms-transform:rotate(120deg);transform:rotate(120deg)}.sk-circle .sk-circle6{-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg)}.sk-circle .sk-circle7{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.sk-circle .sk-circle8{-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);transform:rotate(210deg)}.sk-circle .sk-circle9{-webkit-transform:rotate(240deg);-ms-transform:rotate(240deg);transform:rotate(240deg)}.sk-circle .sk-circle10{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.sk-circle .sk-circle11{-webkit-transform:rotate(300deg);-ms-transform:rotate(300deg);transform:rotate(300deg)}.sk-circle .sk-circle12{-webkit-transform:rotate(330deg);-ms-transform:rotate(330deg);transform:rotate(330deg)}.sk-circle .sk-circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.sk-circle .sk-circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s}.sk-circle .sk-circle4:before{-webkit-animation-delay:-.9s;animation-delay:-.9s}.sk-circle .sk-circle5:before{-webkit-animation-delay:-.8s;animation-delay:-.8s}.sk-circle .sk-circle6:before{-webkit-animation-delay:-.7s;animation-delay:-.7s}.sk-circle .sk-circle7:before{-webkit-animation-delay:-.6s;animation-delay:-.6s}.sk-circle .sk-circle8:before{-webkit-animation-delay:-.5s;animation-delay:-.5s}.sk-circle .sk-circle9:before{-webkit-animation-delay:-.4s;animation-delay:-.4s}.sk-circle .sk-circle10:before{-webkit-animation-delay:-.3s;animation-delay:-.3s}.sk-circle .sk-circle11:before{-webkit-animation-delay:-.2s;animation-delay:-.2s}.sk-circle .sk-circle12:before{-webkit-animation-delay:-.1s;animation-delay:-.1s}@-webkit-keyframes sk-circleBounceDelay{0%,100%,80%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes sk-circleBounceDelay{0%,100%,80%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}</style><div class="sk-circle">  <div class="sk-circle1 sk-child"></div>  <div class="sk-circle2 sk-child"></div>  <div class="sk-circle3 sk-child"></div>  <div class="sk-circle4 sk-child"></div>  <div class="sk-circle5 sk-child"></div>  <div class="sk-circle6 sk-child"></div>  <div class="sk-circle7 sk-child"></div>  <div class="sk-circle8 sk-child"></div>  <div class="sk-circle9 sk-child"></div>  <div class="sk-circle10 sk-child"></div>  <div class="sk-circle11 sk-child"></div>  <div class="sk-circle12 sk-child"></div></div></div><script>window.__NUXT__={config:{},staticAssetsBase:void 0}</script>
-  <script src="./_nuxt/runtime.2448e05.js"></script><script src="./_nuxt/vendors/commons.2fea336.js"></script><script src="./_nuxt/app.1026d72.js"></script></body>
+  <script src="./_nuxt/runtime.ec132c0.js"></script><script src="./_nuxt/vendors/commons.2fea336.js"></script><script src="./_nuxt/app.07b450f.js"></script></body>
 </html>
diff --git a/orgchart.zip b/orgchart.zip
diff --git a/store/index.js b/store/index.js
@@ -435,13 +435,19 @@ export const mutations = {
     }
     state.activeDepartment = dept
   },
-  deleteDepartment(state) {
-    var foundDept = findDept(state.chart, state.activeDepartment)
-    if (foundDept && foundDept.parent) {
-      foundDept.parent.children = foundDept.parent.children.filter(
+  deleteDepartment(state, department) {
+    // do not remove if this is the ultimate top department
+    let children = []
+    // unlink this department from the parent
+    if (department.parent) {
+      children = department.parent.children.filter(
         child => child !== state.activeDepartment
       )
+      department.parent.children = children
     }
+
+    delDept(state, department)
+
     state.activeDepartment = null
     state.showEditMenu = null
   },
@@ -625,6 +631,21 @@ export const mutations = {
       state.chart = state.orgArray.find(e => !e.parent)
     }
   },
+  deleteEmployee(state, person) {
+    person.departments.forEach(dept => {
+      let department = dept.department
+      // remove this person as manager of all departments
+      if (department.manager === person) {
+        department.manager = { name: '', id: '', role: '' }
+      }
+      // remove this person as employee of all departments
+      department.employees = department.employees.filter(
+        emp => emp.person !== person
+      )
+    })
+    // remove this person itself
+    state.people = state.people.filter(p => p.id !== person.id)
+  },
   setZoomInstance(state, val) {
     state.zoomInstance = val
   },
@@ -637,6 +658,26 @@ export const mutations = {
   }
 }
 
+function delDept(state, department) {
+  if (department.children.length) {
+    department.children.forEach(child => {
+      delDept(state, child)
+    })
+  }
+  // unassign manager from department
+  department.manager.departments = department.manager.departments.filter(
+    d => d.department !== department
+  )
+  //unassign each employee from department
+  department.employees.forEach(e => {
+    e.person.departments = e.person.departments.filter(
+      pd => pd.department !== department
+    )
+  })
+  // delete department
+  state.orgArray = state.orgArray.filter(d => d !== department)
+}
+
 function updateLines(dept, lines) {
   var svg = document.getElementById('svg')
   var xparent = document.getElementById('chart')