diff options
Diffstat (limited to 'src/components/ChartTemplate.vue')
-rw-r--r-- | src/components/ChartTemplate.vue | 123 |
1 files changed, 123 insertions, 0 deletions
diff --git a/src/components/ChartTemplate.vue b/src/components/ChartTemplate.vue new file mode 100644 index 00000000..e8585aff --- /dev/null +++ b/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> |