vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor #3924 - For OrganizationChart

Browse source
This commit is contained in:
Tuğçe Küçükoğlu 2023-05-10 11:07:14 +03:00
parent 15131bf13b
commit 413fb026d6
5 changed files with 188 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

53
components/lib/organizationchart/OrganizationChartNode.vue
View file

@ -1,37 +1,37 @@
<template>
<table class="p-organizationchart-table">
<tbody>
<tr v-if="node">
<td :colspan="colspan">
<div :class="nodeContentClass" @click="onNodeClick">
<table class="p-organizationchart-table" v-bind="ptm('table')">
<tbody v-bind="ptm('body')">
<tr v-if="node" v-bind="ptm('row')">
<td :colspan="colspan" v-bind="ptm('cell')">
<div :class="nodeContentClass" @click="onNodeClick" v-bind="getPTOptions('node')">
<component :is="templates[node.type] || templates['default']" :node="node" />
<a v-if="toggleable" tabindex="0" class="p-node-toggler" @click="toggleNode" @keydown="onKeydown">
<a v-if="toggleable" tabindex="0" class="p-node-toggler" @click="toggleNode" @keydown="onKeydown" v-bind="getPTOptions('nodeToggler')">
<component v-if="templates.togglericon" :is="templates.togglericon" :expanded="expanded" class="p-node-toggler-icon" />
<component v-else :is="expanded ? 'ChevronDownIcon' : 'ChevronUpIcon'" class="p-node-toggler-icon" />
<component v-else :is="expanded ? 'ChevronDownIcon' : 'ChevronUpIcon'" class="p-node-toggler-icon" v-bind="getPTOptions('nodeTogglerIcon')" />
</a>
</div>
</td>
</tr>
<tr :style="childStyle" class="p-organizationchart-lines">
<tr :style="childStyle" class="p-organizationchart-lines" v-bind="ptm('lines')">
<td :colspan="colspan">
<div class="p-organizationchart-line-down"></div>
<div class="p-organizationchart-line-down" v-bind="ptm('lineDown')"></div>
</td>
</tr>
<tr :style="childStyle" class="p-organizationchart-lines">
<tr :style="childStyle" class="p-organizationchart-lines" v-bind="ptm('lines')">
<template v-if="node.children && node.children.length === 1">
<td :colspan="colspan">
<div class="p-organizationchart-line-down"></div>
<td :colspan="colspan" v-bind="ptm('lineCell')">
<div class="p-organizationchart-line-down" v-bind="ptm('lineDown')"></div>
</td>
</template>
<template v-if="node.children && node.children.length > 1">
<template v-for="(child, i) of node.children" :key="child.key">
<td class="p-organizationchart-line-left" :class="{ 'p-organizationchart-line-top': !(i === 0) }">&nbsp;</td>
<td class="p-organizationchart-line-right" :class="{ 'p-organizationchart-line-top': !(i === node.children.length - 1) }">&nbsp;</td>
<td class="p-organizationchart-line-left" :class="{ 'p-organizationchart-line-top': !(i === 0) }" v-bind="getNodeOptions(!(i === 0), 'lineLeft')">&nbsp;</td>
<td class="p-organizationchart-line-right" :class="{ 'p-organizationchart-line-top': !(i === node.children.length - 1) }" v-bind="getNodeOptions(!(i === node.children.length - 1), 'lineRight')">&nbsp;</td>
</template>
</template>
</tr>
<tr :style="childStyle" class="p-organizationchart-nodes">
<td v-for="child of node.children" :key="child.key" colspan="2">
<tr :style="childStyle" class="p-organizationchart-nodes" v-bind="ptm('nodes')">
<td v-for="child of node.children" :key="child.key" colspan="2" v-bind="ptm('nodeCell')">
<OrganizationChartNode
:node="child"
:templates="templates"
@ -41,6 +41,7 @@
:selectionMode="selectionMode"
:selectionKeys="selectionKeys"
@node-click="onChildNodeClick"
:pt="pt"
/>
</td>
</tr>
@ -49,12 +50,14 @@
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import ChevronDownIcon from 'primevue/icons/chevrondown';
import ChevronUpIcon from 'primevue/icons/chevronup';
import { DomHandler } from 'primevue/utils';
export default {
name: 'OrganizationChartNode',
extends: BaseComponent,
emits: ['node-click', 'node-toggle'],
props: {
node: {
@ -83,6 +86,24 @@ export default {
}
},
methods: {
getPTOptions(key) {
return this.ptm(key, {
context: {
expanded: this.expanded,
selectable: this.selectable,
selected: this.selected,
toggleable: this.toggleable,
active: this.selected
}
});
},
getNodeOptions(lineTop, key) {
return this.ptm(key, {
context: {
lineTop
}
});
},
onNodeClick(event) {
if (DomHandler.hasClass(event.target, 'p-node-toggler') || DomHandler.hasClass(event.target, 'p-node-toggler-icon')) {
return;