Skip to content

Commit

Permalink
Merge pull request #26 from Hoogkamer/develop
Browse files Browse the repository at this point in the history
Develop
  • Loading branch information
Hoogkamer authored Jul 28, 2020
2 parents 8473568 + 585dbe0 commit ad6f3fe
Show file tree
Hide file tree
Showing 40 changed files with 1,124 additions and 541 deletions.
16 changes: 3 additions & 13 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,8 @@ module.exports = {
parserOptions: {
parser: 'babel-eslint'
},
extends: [
'plugin:vue/recommended',
'plugin:prettier/recommended'
],
// required to lint *.vue files
plugins: [
'vue',
'prettier'
],
extends: ['plugin:vue/recommended', 'plugin:prettier/recommended'],
plugins: ['vue', 'prettier'],
// add your custom rules here
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
rules: {}
}
File renamed without changes.
4 changes: 3 additions & 1 deletion .prettierrc
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
{
"semi": false,
"singleQuote": true
"singleQuote": true,
"printWidth": 70,
"endOfLine": "auto"
}
3 changes: 2 additions & 1 deletion .vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,6 @@
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
},
"editor.formatOnSave": true
}
10 changes: 6 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
[Demo](https://hoogkamer.github.io/vue-org-chart/)

![Screenshot](/assets/img/Screenshot1.PNG?raw=true 'Screenshot')
![Chart](/assets/img/Screenshot1.PNG?raw=true 'chart')
![Profile](/assets/img/profile.png?raw=true 'profile')

\
**Do you want to show your (Agile) teams instead of an orgchart? Try: [Teamviewer](https://github.com/Hoogkamer/TeamViewer) open source.**
Expand All @@ -20,10 +21,10 @@
- Panzoom and interactive expansion of subdepartments
- Deeplinks to departments
- Save as image
- Search for departments and managers
- Search for departments and people
- Add employees to departments
- Use photo's from api (not included), or local folder
- Click on employee to link to api (not included) or local folder
- Click on employee to link to api (not included) or show profile information (**new**)

## Use as static website

Expand Down Expand Up @@ -70,7 +71,8 @@ The config file is in /config.js
For these locations it is fetched from "prefix" + photo + "suffix". So if you have photo P0001, it will be fetched from "photos/P0001.png". If you have an api or other locations which delivers photo's based on the photo field you can change that here.

- linkUrl
It will open a new tab to navigate to that page when clicked in the sidescreen on a person. In this example it will just fetch the photo in a new tab, but if you have an api which shows a user profile page you can enter the location here.
It will open a new tab to navigate to that page when clicked in the sidescreen on a person. If you have an api which shows a user profile page you can enter the location here.
Don't specify this object if you want to see the profile information from this application (default)

- startView
Sets the inital options (the user can change them in the menu bar)
Expand Down
Binary file added assets/img/profile.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
203 changes: 203 additions & 0 deletions components/DepartmentDetails.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,203 @@
<template lang='pug'>
div
.property
span.label Name
br
input.name(v-if='editMode' :class="{error:!activeDepartment_name}" v-model="activeDepartment_name")
span(v-else).text {{activeDepartment_name}}

.property
span.label Manager
i.material-icons.edit(v-if='editMode' v-on:click='personPicker="manager"') edit
br
span.text(v-if='activeDepartment.manager.name') {{activeDepartment.manager.name}}
span.untext(v-else) No manager
.property
span.label Description
br
textarea.description(v-if='editMode' v-model="activeDepartment_description")
span(v-else).text {{activeDepartment_description}}

.property(v-for="field in activeDepartment.dataFields" v-if="field.value")
span.label {{field.name}}
br
template(v-if='editMode')
// todo edit extra properties
templage(v-else)
template(v-if='field.type==="url"')
a(:href="field.value" target="_blank") Link
template(v-else)
span.text {{field.value}}

.property
template(v-if='!editMode')
span.label Department type
br
span(v-if='activeDepartment_isStaff') Staff department
span(v-else) Normal department
template(v-else)
span.label Staff department:
input.isstaff(type='checkbox' v-model="activeDepartment_isStaff" :disabled="!editMode")
.property
span.label Hierarchy
ul
li.clickable(v-for='(parent, pnr) in parents' v-on:click="setActiveDepartment(parent)")
span(v-for="n in pnr") &nbsp
i(v-if="pnr !==0").material-icons.sub subdirectory_arrow_right
span {{parent.name}}
li.clickable(v-on:click="setActiveDepartment(activeDepartment)")
span(v-for="n in parents.length") &nbsp
i(v-if="parents.length").material-icons.sub subdirectory_arrow_right
span.this-department {{activeDepartment.name}}
li.clickable(v-for='child in activeDepartment.children' v-on:click="setActiveDepartment(child)")
span(v-for="n in parents.length+5") &nbsp
span {{child.name}}
img.profile(:src='config.photoUrl.prefix+activeDepartment.manager.photo+config.photoUrl.suffix' v-on:click='visitProfile(activeDepartment.manager)' title='Goto profile')
person-picker(v-if='personPicker' type='manager' v-on:close='personPicker=null')
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex'
import PersonPicker from '~/components/PersonPicker.vue'
export default {
components: { PersonPicker },
data: function() {
return {
personPicker: null,
activeTab: 1,
noPhotos: []
}
},
computed: {
...mapState([
'showSideScreen',
'activeDepartment',
'editMode',
'people',
'config'
]),
activeDepartment_name: {
get: function() {
return this.$store.state.activeDepartment.name
},
set: function(val) {
this.$store.commit('updateActiveDepartmentName', val)
}
},
activeDepartment_description: {
get: function() {
return this.$store.state.activeDepartment.description
},
set: function(val) {
this.$store.commit('updateActiveDepartmentDescription', val)
}
},
activeDepartment_isStaff: {
get: function() {
return this.$store.state.activeDepartment.isStaff
},
set: function(val) {
this.updateActiveDepartmentIsStaff(val)
}
},
parents: function() {
var parents = []
var department = this.activeDepartment
while (department.parent) {
department = department.parent
parents.unshift(department)
}
return parents
},
children: function() {
return this.activeDepartment.children
}
},
methods: {
...mapActions([
'setShowDepartment',
'updateActiveDepartmentIsStaff'
]),
...mapMutations(['setShowPerson', 'updateRole']),
setActiveDepartment(department) {
this.setShowDepartment(department)
},
visitProfile(person) {
this.setShowPerson(person)
}
}
}
</script>

<style scoped>
.profile {
width: 80px;
max-height: 80px;
min-height: 60px;
position: absolute;
right: 16px;
top: 154px;
border: 1px solid grey;
cursor: pointer;
}
.profile:hover {
border: 2px solid orange;
}
.name {
font-size: 16px;
}
.property {
margin-bottom: 20px;
}
.clickable {
cursor: pointer;
font-size: 14px;
}
input.name {
width: calc(100% - 10px);
}
textarea.description {
width: calc(100% - 10px);
height: 80px;
}
.clickable:hover {
background-color: lightblue;
}
.noclickable {
cursor: default;
}
.label {
font-weight: 600;
text-decoration: underline;
}
.untext {
color: grey;
font-style: italic;
}
ul {
list-style: none;
background-color: white;
padding: 5px;
}
.this-department {
font-weight: 600;
}
.sub {
font-size: 16px;
margin: -8px 0px;
}
.isstaff {
margin: 0px 10px;
}
.material-icons.edit {
font-size: 16px;
cursor: pointer;
}
</style>
9 changes: 2 additions & 7 deletions components/DeptBox.vue
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
div.hidden_dept.down(v-if='!departmentData.showChildren' v-on:click="doShowChildren(true)" title='Nr of subdepartments') {{departmentData.children.length}}
div.hidden_dept.up(v-if='departmentData.showChildren' v-on:click="doShowChildren(false)" title='Nr of subdepartments') {{departmentData.children.length}}
template(v-if="showNrPeople")
div.ppl_count(v-if='count_department_people(departmentData)' title='Nr of people in department') {{count_department_people(departmentData)}}
div.ppl_count(v-if='departmentData.employees.length' title='Nr of people in department') {{departmentData.employees.length}}

i.material-icons.view_button(v-if="displaySiblingIcon" v-on:click="showViewMenu(departmentData, $event)" title="view options") visibility
i.material-icons.hidden_parents1(v-if="hiddenParents" v-on:click="setHideParents(false)") more_vert
Expand All @@ -42,7 +42,7 @@
div.hidden_dept.down(v-if='!departmentData.showChildren' v-on:click="doShowChildren(true)" title='Nr of subdepartments') {{departmentData.children.length}}
div.hidden_dept.up(v-if='departmentData.showChildren' v-on:click="doShowChildren(false)" title='Nr of subdepartments') {{departmentData.children.length}}
template(v-if="showNrPeople")
div.ppl_count(v-if='count_department_people(departmentData)' title='Nr of people in department') {{count_department_people(departmentData)}}
div.ppl_count(v-if='departmentData.employees.length' title='Nr of people in department') {{departmentData.employees.length}}

i.material-icons.view_button(v-if="displaySiblingIcon" v-on:click="showViewMenu(departmentData, $event)" title="view options") visibility
i.material-icons.hidden_parents(v-if="hiddenParents" v-on:click="setHideParents(false)") more_vert
Expand Down Expand Up @@ -86,7 +86,6 @@ export default {
'editMode',
'config',
'chart',
'assignments',
'showNrPeople',
'showNrDepartments'
]),
Expand Down Expand Up @@ -155,10 +154,6 @@ export default {
},
hideSiblings() {
this.setHideSiblings(this.departmentData)
},
count_department_people: function(dept) {
var person_ids = this.assignments.filter(a => a.department_id == dept.id)
return person_ids.length
}
}
}
Expand Down
20 changes: 16 additions & 4 deletions components/EditMenu.vue
Original file line number Diff line number Diff line change
Expand Up @@ -18,22 +18,34 @@
import { mapState, mapActions } from 'vuex'
export default {
computed: {
...mapState(['chart', 'showEditMenu', 'activeDepartment', 'moveDepartment'])
...mapState([
'chart',
'showEditMenu',
'activeDepartment',
'moveDepartment'
])
},
mounted: function() {
var d = document.getElementById('edit_menu')
var chartpos = document.getElementById('chart').getBoundingClientRect()
var chartpos = document
.getElementById('chart')
.getBoundingClientRect()
var x = document.getElementById('chart')
var scalex = 1 / (x.getBoundingClientRect().width / x.offsetWidth)
d.style.display = 'inline-block'
d.style.left = this.showEditMenu.clientX - 0 * chartpos.left + 'px'
d.style.left =
this.showEditMenu.clientX - 0 * chartpos.left + 'px'
d.style.top = this.showEditMenu.clientY - 0 * chartpos.top + 'px'
console.log(scalex, this.showEditMenu.clientX, chartpos.left)
},
methods: {
...mapActions(['deleteDepartment', 'addDepartment', 'doMoveDepartment']),
...mapActions([
'deleteDepartment',
'addDepartment',
'doMoveDepartment'
]),
removeDept: function() {
var confirmed = true
if (this.activeDepartment.children.length) {
Expand Down
Loading

0 comments on commit ad6f3fe

Please sign in to comment.