Merge pull request #2954 from nextcloud/feature/orgChart

Add organization charts

package.json

@@ -53,6 +53,8 @@
  "@nextcloud/vue": "^v7.0.0-beta.5",
  "b64-to-blob": "^1.2.19",
  "camelcase": "^7.0.0",
+ "d3": "^7.4.4",
+ "d3-org-chart": "^2.6.0",
  "debounce": "^1.2.1",
  "downloadjs": "^1.4.7",
  "ical.js": "^1.5.0",

src/components/AppContent/ChartContent.vue

@@ -0,0 +1,58 @@
+<template>
+ <AppContent>
+ <OrgChart :data="transformData" />
+ </AppContent>
+</template>
+
+<script>
+import AppContent from '@nextcloud/vue/dist/Components/NcAppContent'
+
+import OrgChart from '../OrgChart.vue'
+import { getChart, transformNode } from '../../utils/chartUtils'
+
+export default {
+ name: 'ChartContent',
+ components: {
+ AppContent,
+ OrgChart,
+ },
+ props: {
+ contactsList: {
+ type: Object,
+ required: true,
+ },
+ },
+ data() {
+ return {
+ data: [],
+ searchQuery: '',
+ }
+ },
+ computed: {
+ transformData() {
+ const contactsByUid = {}
+ const contacts = Object.keys(this.contactsList).map(key => {
+ const [uid, addressbook] = key.split('~')
+ if (!contactsByUid[addressbook]) {
+ contactsByUid[addressbook] = {}
+ }
+ return (contactsByUid[addressbook][uid] = this.contactsList[key])
+ })
+
+ const headManagers = []
+ const tempContacts = contacts.filter(contact => contact.managersName).reduce((prev, contact) => {
+ prev.push(transformNode(contact))
+
+ const manager = contactsByUid[contact.addressbook.id][contact.managersName]
+ if (manager && !manager.managersName && !headManagers.includes(manager.uid)) {
+ prev.push(transformNode(manager))
+ headManagers.push(manager.uid)
+ }
+ return prev
+ }, [])
+
+ return headManagers.map(uid => getChart(tempContacts, uid))
+ },
+ },
+}
+</script>

src/components/AppContent/ContactsContent.vue

@@ -70,7 +70,7 @@
  </template>
 
  <!-- main contacts details -->
- <ContactDetails :contact-key="selectedContact" />
+ <ContactDetails :contact-key="selectedContact" :contacts="sortedContacts" />
  </AppContent>
 </template>
 <script>

src/components/AppNavigation/RootNavigation.vue

@@ -45,6 +45,16 @@
  </AppNavigationCounter>
  </AppNavigationItem>
 
+ <!-- Organization chart -->
+ <AppNavigationItem v-if="existChart"
+ id="chart"
+ :title="CHART_ALL_CONTACTS"
+ :to="{
+ name: 'chart',
+ params: { selectedChart: GROUP_ALL_CONTACTS },
+ }"
+ icon="icon-category-monitoring" />
+
  <!-- Not grouped group -->
  <AppNavigationItem
  v-if="ungroupedContacts.length > 0"
@@ -170,7 +180,7 @@
 </template>
 
 <script>
-import { GROUP_ALL_CONTACTS, GROUP_NO_GROUP_CONTACTS, GROUP_RECENTLY_CONTACTED, ELLIPSIS_COUNT, CIRCLE_DESC } from '../../models/constants.ts'
+import { GROUP_ALL_CONTACTS, CHART_ALL_CONTACTS, GROUP_NO_GROUP_CONTACTS, GROUP_RECENTLY_CONTACTED, ELLIPSIS_COUNT, CIRCLE_DESC } from '../../models/constants.ts'
 
 import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
 import ActionInput from '@nextcloud/vue/dist/Components/NcActionInput'
@@ -243,6 +253,7 @@ export default {
  CIRCLE_DESC,
  ELLIPSIS_COUNT,
  GROUP_ALL_CONTACTS,
+ CHART_ALL_CONTACTS,
  GROUP_NO_GROUP_CONTACTS,
  GROUP_RECENTLY_CONTACTED,
 
@@ -286,6 +297,11 @@ export default {
  return this.sortedContacts.filter(contact => this.contacts[contact.key].groups && this.contacts[contact.key].groups.length === 0)
  },
 
+ // check if any contact has manager, if not then is no need for organization chart menu
+ existChart() {
+ return !!Object.keys(this.contacts).filter(key => this.contacts[key].managersName).length
+ },
+
  // generate groups menu from the groups store
  groupsMenu() {
  const menu = this.groups.map(group => {

src/components/ChartTemplate.vue

@@ -0,0 +1,123 @@
+<template>
+ <div class="org-chart-node">
+ <div class="inner-box">
+ <router-link :to="{
+ name: 'contact',
+ params: {
+ selectedGroup: selectedChart,
+ selectedContact: data.key,
+ },
+ }">
+ <Avatar
+ :disable-tooltip="true"
+ :display-name="data.fullName"
+ :is-no-user="true"
+ :size="60"
+ :url="data.photoUrl"
+ class="org-chart-node__avatar" />
+ </router-link>
+ <div class="panel" />
+ <div class="main-container">
+ <h3 class="fullName">
+ {{ data.fullName }}
+ </h3>
+ <h4 class="title">
+ {{ data.title }}
+ </h4>
+ </div>
+ <div class="description">
+ <p v-if="data._directSubordinates">
+ {{ t('contacts', 'Manages') }}: {{ data._directSubordinates }}
+ </p>
+ <p v-if="data._totalSubordinates">
+ {{ t('contacts', 'Oversees') }}: {{ data._totalSubordinates }}
+ </p>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import Avatar from '@nextcloud/vue/dist/Components/NcAvatar'
+
+export default {
+ name: 'ChartTemplate',
+ components: {
+ Avatar,
+ },
+ props: {
+ data: {
+ type: Object,
+ default: () => {},
+ },
+ onAvatarClick: {
+ type: Function,
+ default: () => {},
+ },
+ },
+ computed: {
+ selectedChart() {
+ return this.$route.params.selectedChart
+ },
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+.org-chart-node {
+ background-color: var(--color-main-background);
+ padding-top: 1px;
+ height: 175px;
+ border-radius: var(--border-radius-large);
+ overflow: visible;
+
+ &__avatar {
+ margin-top: -30px;
+ margin-left: 95px;
+ border: 1px solid var(--color-border);
+ }
+
+ .inner-box {
+ display: flex;
+ flex-direction: column;
+ height: 175px;
+ padding-top: 0;
+ border: 1px solid var(--color-border);
+ border-radius: var(--border-radius-large);
+ background-color: var(--color-main-background);
+
+ .main-container {
+ padding: 20px;
+ text-align: center;
+ flex: 1;
+
+ .fullName {
+ color: var(--color-primary-element);
+ font-weight: bold;
+ }
+
+ .title {
+ margin-top: 4px;
+ }
+ }
+
+ .description {
+ display: flex;
+ justify-content: space-between;
+ padding: 15px;
+ }
+ }
+
+ .inner-box-highlight {
+ border: 2px solid var(--color-primary) !important;
+ }
+
+ .panel {
+ margin: -34px -1px 0 -1px;
+ background-color: var(--color-primary);
+ height: 15px;
+ border-top-left-radius: var(--border-radius-large);
+ border-top-right-radius: var(--border-radius-large);
+ }
+}
+</style>

src/components/ContactDetails.vue

@@ -208,6 +208,7 @@
  :contact="contact"
  :local-contact="localContact"
  :update-contact="debounceUpdateContact"
+ :contacts="contacts"
  @resize="debounceRedrawMasonry" />
  </div>
 
@@ -311,6 +312,10 @@ export default {
  type: String,
  default: undefined,
  },
+ contacts: {
+ type: Array,
+ default: () => [],
+ },
  },
 
  data() {

src/components/ContactDetails/ContactDetailsAddNewProp.vue

@@ -43,6 +43,7 @@
 import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 import rfcProps from '../../models/rfcProps'
 import Contact from '../../models/contact'
+import OrgChartsMixin from '../../mixins/OrgChartsMixin'
 import PropertyTitle from '../Properties/PropertyTitle'
 import ICAL from 'ical.js'
 
@@ -54,6 +55,10 @@ export default {
  PropertyTitle,
  },
 
+ mixins: [
+ OrgChartsMixin,
+ ],
+
  props: {
  contact: {
  type: Contact,
@@ -108,8 +113,17 @@ export default {
  * @param {object} data destructuring object
  * @param {string} data.id the id of the property. e.g fn
  */
- addProp({ id }) {
- if (this.properties[id] && this.properties[id].defaultjCal
+ async addProp({ id }) {
+ if (id === 'x-managersname') {
+ const others = this.otherContacts(this.contact)
+ if (others.length === 1) {
+ // Pick the first and only other contact
+ this.contact.vCard.addPropertyWithValue(id, others[0].key)
+ await this.$store.dispatch('updateContact', this.contact)
+ } else {
+ this.contact.vCard.addPropertyWithValue(id, '')
+ }
+ } else if (this.properties[id] && this.properties[id].defaultjCal
  && this.properties[id].defaultjCal[this.contact.version]) {
  const defaultjCal = this.properties[id].defaultjCal[this.contact.version]
  const property = new ICAL.Property([id, ...defaultjCal])

src/components/ContactDetails/ContactDetailsProperty.vue

@@ -37,7 +37,7 @@
  :local-contact="localContact"
  :prop-name="propName"
  :prop-type="propType"
- :options="sortedModelOptions"
+ :options="propName === 'x-managersname' ? contactsOptions : sortedModelOptions"
  :is-read-only="isReadOnly"
  @delete="onDelete"
  @resize="onResize"
@@ -49,6 +49,7 @@ import { Property } from 'ical.js'
 import rfcProps from '../../models/rfcProps'
 import Contact from '../../models/contact'
 
+import OrgChartsMixin from '../../mixins/OrgChartsMixin'
 import PropertyText from '../Properties/PropertyText'
 import PropertyMultipleText from '../Properties/PropertyMultipleText'
 import PropertyDateTime from '../Properties/PropertyDateTime'
@@ -57,6 +58,10 @@ import PropertySelect from '../Properties/PropertySelect'
 export default {
  name: 'ContactDetailsProperty',
 
+ mixins: [
+ OrgChartsMixin,
+ ],
+
  props: {
  property: {
  type: Property,
@@ -94,6 +99,10 @@ export default {
  type: Function,
  default: () => {},
  },
+ contacts: {
+ type: Array,
+ default: () => [],
+ },
  },
 
  computed: {
@@ -203,6 +212,31 @@ export default {
  return this.localContact.vCard.getFirstProperty(`${this.propGroup[0]}.x-ablabel`)
  },
 
+ /**
+ * Return the options of contacts for x-managersname select
+ *
+ * @return {object[]}
+ */
+ contactsOptions() {
+ if (this.propName !== 'x-managersname') {
+ return []
+ }
+
+ // Only allow contacts of the same address book
+ const otherContacts = this.otherContacts(this.contact)
+ // Reduce to an object to eliminate duplicates
+ return Object.values(otherContacts.reduce((prev, { key, value }) => {
+ const contact = this.$store.getters.getContact(key)
+ return {
+ ...prev,
+ [contact.uid]: {
+ id: contact.uid,
+ name: contact.displayName,
+ },
+ }
+ }, this.selectType ? { [this.selectType.value]: this.selectType } : {}))
+ },
+
  /**
  * Returns the closest match to the selected type
  * or return the default selected as a new object if