Refactor #3965 - Refactor on OrganizationChart
Bahadır Sofuoğlu
parent
da42a2c4bd
commit
51132d0393
|
|
@ -0,0 +1,111 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const styles = `
|
||||
.p-organizationchart-table {
|
||||
border-spacing: 0;
|
||||
border-collapse: separate;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.p-organizationchart-table > tbody > tr > td {
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
|
||||
.p-organizationchart-node-content {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-organizationchart-node-content .p-node-toggler {
|
||||
position: absolute;
|
||||
bottom: -0.75rem;
|
||||
margin-left: -0.75rem;
|
||||
z-index: 2;
|
||||
left: 50%;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon {
|
||||
position: relative;
|
||||
top: 0.25rem;
|
||||
}
|
||||
|
||||
.p-organizationchart-line-down {
|
||||
margin: 0 auto;
|
||||
height: 20px;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.p-organizationchart-line-right {
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.p-organizationchart-line-left {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.p-organizationchart-selectable-node {
|
||||
cursor: pointer;
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: 'p-organizationchart p-component',
|
||||
table: 'p-organizationchart-table',
|
||||
node: ({ props, instance }) => ['p-organizationchart-node-content', props.node.styleClass, { 'p-organizationchart-selectable-node': instance.selectable, 'p-highlight': instance.selected }],
|
||||
nodeToggler: 'p-node-toggler',
|
||||
nodeTogglerIcon: 'p-node-toggler-icon',
|
||||
lines: 'p-organizationchart-lines',
|
||||
lineDown: 'p-organizationchart-line-down',
|
||||
lines: 'p-organizationchart-lines',
|
||||
lineLeft: ({ context }) => ['p-organizationchart-line-left', { 'p-organizationchart-line-top': !(context.i === 0) }],
|
||||
lineRight: ({ context, props }) => ['p-organizationchart-line-right', { 'p-organizationchart-line-top': !(context.i === props.node.children.length - 1) }],
|
||||
nodes: 'p-organizationchart-nodes'
|
||||
};
|
||||
|
||||
const { load: loadStyle } = useStyle(styles, { id: 'primevue_organizationchart_style', manual: true });
|
||||
|
||||
export default {
|
||||
name: 'BaseOrganizationChart',
|
||||
extends: BaseComponent,
|
||||
props: {
|
||||
value: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
selectionKeys: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
selectionMode: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
collapsible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
collapsedKeys: {
|
||||
type: null,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
css: {
|
||||
classes,
|
||||
loadStyle
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
$parentInstance: this
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -218,6 +218,11 @@ export interface OrganizationChartProps {
|
|||
* @type {OrganizationChartPassThroughOptions}
|
||||
*/
|
||||
pt?: OrganizationChartPassThroughOptions;
|
||||
/**
|
||||
* When enabled, it removes component related styles in the core.
|
||||
* @defaultValue false
|
||||
*/
|
||||
unstyled?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="p-organizationchart p-component" v-bind="ptm('root')">
|
||||
<div :class="cx('root')" v-bind="ptm('root')">
|
||||
<OrganizationChartNode
|
||||
:node="value"
|
||||
:templates="$slots"
|
||||
|
|
@ -10,40 +10,19 @@
|
|||
:selectionMode="selectionMode"
|
||||
:selectionKeys="selectionKeys"
|
||||
:pt="pt"
|
||||
:unstyled="unstyled"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import BaseOrganizationChart from './BaseOrganizationChart.vue';
|
||||
import OrganizationChartNode from './OrganizationChartNode.vue';
|
||||
|
||||
export default {
|
||||
name: 'OrganizationChart',
|
||||
extends: BaseComponent,
|
||||
extends: BaseOrganizationChart,
|
||||
emits: ['node-unselect', 'node-select', 'update:selectionKeys', 'node-expand', 'node-collapse', 'update:collapsedKeys'],
|
||||
props: {
|
||||
value: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
selectionKeys: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
selectionMode: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
collapsible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
collapsedKeys: {
|
||||
type: null,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
d_collapsedKeys: this.collapsedKeys || {}
|
||||
|
|
@ -96,58 +75,3 @@ export default {
|
|||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.p-organizationchart-table {
|
||||
border-spacing: 0;
|
||||
border-collapse: separate;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.p-organizationchart-table > tbody > tr > td {
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
|
||||
.p-organizationchart-node-content {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-organizationchart-node-content .p-node-toggler {
|
||||
position: absolute;
|
||||
bottom: -0.75rem;
|
||||
margin-left: -0.75rem;
|
||||
z-index: 2;
|
||||
left: 50%;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon {
|
||||
position: relative;
|
||||
top: 0.25rem;
|
||||
}
|
||||
|
||||
.p-organizationchart-line-down {
|
||||
margin: 0 auto;
|
||||
height: 20px;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.p-organizationchart-line-right {
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.p-organizationchart-line-left {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.p-organizationchart-selectable-node {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,36 +1,58 @@
|
|||
<template>
|
||||
<table class="p-organizationchart-table" v-bind="ptm('table')">
|
||||
<table :class="cx('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')">
|
||||
<div :class="cx('node')" @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" v-bind="getPTOptions('nodeToggler')">
|
||||
<a v-if="toggleable" tabindex="0" :class="cx('nodeToggler')" @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" v-bind="getPTOptions('nodeTogglerIcon')" />
|
||||
<component v-else :is="expanded ? 'ChevronDownIcon' : 'ChevronUpIcon'" :class="cx('nodeTogglerIcon')" v-bind="getPTOptions('nodeTogglerIcon')" />
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr :style="childStyle" class="p-organizationchart-lines" v-bind="ptm('lines')">
|
||||
<tr :style="childStyle" :class="cx('lines')" v-bind="ptm('lines')">
|
||||
<td :colspan="colspan">
|
||||
<div class="p-organizationchart-line-down" v-bind="ptm('lineDown')"></div>
|
||||
<div :class="cx('lineDown')" v-bind="ptm('lineDown')"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr :style="childStyle" class="p-organizationchart-lines" v-bind="ptm('lines')">
|
||||
<tr :style="childStyle" :class="cx('lines')" v-bind="ptm('lines')">
|
||||
<template v-if="node.children && node.children.length === 1">
|
||||
<td :colspan="colspan" v-bind="ptm('lineCell')">
|
||||
<div class="p-organizationchart-line-down" v-bind="ptm('lineDown')"></div>
|
||||
<div :class="cx('lineDown')" 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) }" v-bind="getNodeOptions(!(i === 0), 'lineLeft')"> </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')"> </td>
|
||||
<td
|
||||
:class="
|
||||
cx('lineLeft', {
|
||||
context: {
|
||||
i
|
||||
}
|
||||
})
|
||||
"
|
||||
v-bind="getNodeOptions(!(i === 0), 'lineLeft')"
|
||||
>
|
||||
|
||||
</td>
|
||||
<td
|
||||
:class="
|
||||
cx('lineRight', {
|
||||
context: {
|
||||
i
|
||||
}
|
||||
})
|
||||
"
|
||||
v-bind="getNodeOptions(!(i === node.children.length - 1), 'lineRight')"
|
||||
>
|
||||
|
||||
</td>
|
||||
</template>
|
||||
</template>
|
||||
</tr>
|
||||
<tr :style="childStyle" class="p-organizationchart-nodes" v-bind="ptm('nodes')">
|
||||
<tr :style="childStyle" :class="cx('nodes')" v-bind="ptm('nodes')">
|
||||
<td v-for="child of node.children" :key="child.key" colspan="2" v-bind="ptm('nodeCell')">
|
||||
<OrganizationChartNode
|
||||
:node="child"
|
||||
|
|
@ -42,6 +64,7 @@
|
|||
:selectionKeys="selectionKeys"
|
||||
@node-click="onChildNodeClick"
|
||||
:pt="pt"
|
||||
:unstyled="unstyled"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -105,7 +128,7 @@ export default {
|
|||
});
|
||||
},
|
||||
onNodeClick(event) {
|
||||
if (DomHandler.hasClass(event.target, 'p-node-toggler') || DomHandler.hasClass(event.target, 'p-node-toggler-icon')) {
|
||||
if (DomHandler.getAttribute(event.target, 'nodeToggler') || DomHandler.getAttribute(event.target, 'nodeTogglerIcon')) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -130,9 +153,6 @@ export default {
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
nodeContentClass() {
|
||||
return ['p-organizationchart-node-content', this.node.styleClass, { 'p-organizationchart-selectable-node': this.selectable, 'p-highlight': this.selected }];
|
||||
},
|
||||
leaf() {
|
||||
return this.node.leaf === false ? false : !(this.node.children && this.node.children.length);
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue