Initiated Organization Chart
parent
bd8d3c7869
commit
87963bf9c8
|
@ -59,6 +59,7 @@
|
|||
<router-link to="/dataview">● DataView</router-link>
|
||||
<router-link to="/fullcalendar">● FullCalendar</router-link>
|
||||
<router-link to="/orderlist">● OrderList</router-link>
|
||||
<router-link to="/organizationchart">● Org Chart</router-link>
|
||||
<router-link to="/paginator">● Paginator</router-link>
|
||||
<router-link to="/picklist">● PickList</router-link>
|
||||
</div>
|
||||
|
|
|
@ -0,0 +1,74 @@
|
|||
<template>
|
||||
<div class="p-organizationchart p-component">
|
||||
<OrganizationChartNode :node="value" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OrganizationChartNode from './OrganizationChartNode';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: null,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'OrganizationChartNode': OrganizationChartNode
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.p-organizationchart .p-organizationchart-table {
|
||||
border-spacing: 0;
|
||||
border-collapse: separate;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.p-organizationchart .p-organizationchart-table > tbody > tr > td {
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
padding: 0;
|
||||
padding: 0 .75em;
|
||||
}
|
||||
|
||||
.p-organizationchart .p-organizationchart-node-content {
|
||||
padding: .5em .75em;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-organizationchart .p-organizationchart-node-content .p-node-toggler {
|
||||
position: absolute;
|
||||
bottom: -9px;
|
||||
margin-left: -8px;
|
||||
z-index: 2;
|
||||
left: 50%;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.p-organizationchart .p-organizationchart-line-down {
|
||||
margin: 0 auto;
|
||||
height: 20px;
|
||||
width: 1px;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.p-organizationchart .p-organizationchart-line-right {
|
||||
float: none;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.p-organizationchart .p-organizationchart-line-left {
|
||||
float: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,83 @@
|
|||
<template>
|
||||
<table class="p-organizationchart-table">
|
||||
<tbody>
|
||||
<tr v-if="node">
|
||||
<td :colspan="colspan">
|
||||
<div :class="nodeContentClass" @click="onNodeClick">
|
||||
{{node.label}}
|
||||
<a v-if="!leaf" tabindex="0" class="p-node-toggler" @click="toggleNode" @keydown.enter="toggleNode">
|
||||
<i class="p-node-toggler-icon pi" :class="{'pi-chevron-down': node.expanded, 'pi-chevron-up': !node.expanded}"></i>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr :style="childStyle" class="p-organizationchart-lines">
|
||||
<td :colspan="colspan">
|
||||
<div class="p-organizationchart-line-down"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr :style="childStyle" class="p-organizationchart-lines">
|
||||
<template v-if="node.children && node.children.length === 1">
|
||||
<td :colspan="colspan">
|
||||
<div class="p-organizationchart-line-down"></div>
|
||||
</td>
|
||||
</template>
|
||||
<template v-if="node.children && node.children.length > 1">
|
||||
<template v-for="(child,i) of node.children">
|
||||
<td :key="(child.key || child.label) + '_left'" class="p-organizationchart-line-left" :class="{'p-organizationchart-line-top': !(i === 0)}"> </td>
|
||||
<td :key="(child.key || child.label) + '_right'" class="p-organizationchart-line-right" :class="{'p-organizationchart-line-top': !(i === (node.children.length - 1))}"> </td>
|
||||
</template>
|
||||
</template>
|
||||
</tr>
|
||||
<tr :style="childStyle" class="p-organizationchart-nodes">
|
||||
<td v-for="child of node.children" :key="child.key || child.label" colspan="2">
|
||||
<sub-node :node="child" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'sub-node',
|
||||
props: {
|
||||
node: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
selected: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
selectable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onNodeClick() {
|
||||
|
||||
},
|
||||
toggleNode() {
|
||||
|
||||
}
|
||||
},
|
||||
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);
|
||||
},
|
||||
colspan() {
|
||||
return (this.node.children && this.node.children.length) ? this.node.children.length * 2: null;
|
||||
},
|
||||
childStyle() {
|
||||
return {
|
||||
visibility: !this.leaf && this.node.expanded ? 'inherit' : 'hidden'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -29,6 +29,7 @@ import Menu from './components/menu/Menu';
|
|||
import Message from './components/message/Message';
|
||||
import MultiSelect from './components/multiselect/MultiSelect';
|
||||
import OrderList from './components/orderlist/OrderList';
|
||||
import OrganizationChart from './components/organizationchart/OrganizationChart';
|
||||
import OverlayPanel from './components/overlaypanel/OverlayPanel';
|
||||
import Paginator from './components/paginator/Paginator';
|
||||
import Panel from './components/panel/Panel';
|
||||
|
@ -95,6 +96,7 @@ Vue.component('Menu', Menu);
|
|||
Vue.component('Message', Message);
|
||||
Vue.component('MultiSelect', MultiSelect);
|
||||
Vue.component('OrderList', OrderList);
|
||||
Vue.component('OrganizationChart', OrganizationChart);
|
||||
Vue.component('OverlayPanel', OverlayPanel);
|
||||
Vue.component('Paginator', Paginator);
|
||||
Vue.component('Panel', Panel);
|
||||
|
|
|
@ -256,6 +256,11 @@ export default new Router({
|
|||
name: 'orderlist',
|
||||
component: () => import('./views/orderlist/OrderListDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/organizationchart',
|
||||
name: 'organizationchart',
|
||||
component: () => import('./views/organizationchart/OrganizationChartDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/overlaypanel',
|
||||
name: 'overlaypanel',
|
||||
|
|
|
@ -0,0 +1,128 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>OrganizationChart</h1>
|
||||
<p>OrganizationChart visualizes hierarchical organization data.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Advanced</h3>
|
||||
<OrganizationChart :value="data1" />
|
||||
</div>
|
||||
|
||||
<OrganizationChartDoc />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import OrganizationChartDoc from './OrganizationChartDoc';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data1: {
|
||||
label: 'CEO',
|
||||
type: 'person',
|
||||
className: 'p-person',
|
||||
expanded: true,
|
||||
data: {name:'Walter White', 'avatar': 'walter.jpg'},
|
||||
children: [
|
||||
{
|
||||
label: 'CFO',
|
||||
type: 'person',
|
||||
className: 'p-person',
|
||||
expanded: true,
|
||||
data: {name:'Saul Goodman', 'avatar': 'saul.jpg'},
|
||||
children:[{
|
||||
label: 'Tax',
|
||||
className: 'department-cfo'
|
||||
},
|
||||
{
|
||||
label: 'Legal',
|
||||
className: 'department-cfo'
|
||||
}],
|
||||
},
|
||||
{
|
||||
label: 'COO',
|
||||
type: 'person',
|
||||
className: 'p-person',
|
||||
expanded: true,
|
||||
data: {name:'Mike E.', 'avatar': 'mike.jpg'},
|
||||
children:[{
|
||||
label: 'Operations',
|
||||
className: 'department-coo'
|
||||
}]
|
||||
},
|
||||
{
|
||||
label: 'CTO',
|
||||
type: 'person',
|
||||
className: 'p-person',
|
||||
expanded: true,
|
||||
data: {name:'Jesse Pinkman', 'avatar': 'jesse.jpg'},
|
||||
children:[{
|
||||
label: 'Development',
|
||||
className: 'department-cto',
|
||||
expanded: true,
|
||||
children:[{
|
||||
label: 'Analysis',
|
||||
className: 'department-cto'
|
||||
},
|
||||
{
|
||||
label: 'Front End',
|
||||
className: 'department-cto'
|
||||
},
|
||||
{
|
||||
label: 'Back End',
|
||||
className: 'department-cto'
|
||||
}]
|
||||
},
|
||||
{
|
||||
label: 'QA',
|
||||
className: 'department-cto'
|
||||
},
|
||||
{
|
||||
label: 'R&D',
|
||||
className: 'department-cto'
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
data2 : [{
|
||||
label: 'F.C Barcelona',
|
||||
expanded: true,
|
||||
children: [
|
||||
{
|
||||
label: 'F.C Barcelona',
|
||||
expanded: true,
|
||||
children: [
|
||||
{
|
||||
label: 'Chelsea FC'
|
||||
},
|
||||
{
|
||||
label: 'F.C. Barcelona'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Real Madrid',
|
||||
expanded: true,
|
||||
children: [
|
||||
{
|
||||
label: 'Bayern Munich'
|
||||
},
|
||||
{
|
||||
label: 'Real Madrid'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}],
|
||||
selection: []
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'OrganizationChartDoc': OrganizationChartDoc
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -0,0 +1,194 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<h3>Import</h3>
|
||||
<CodeHighlight lang="javascript">
|
||||
import Panel from 'primevue/panel';
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Getting Started</h3>
|
||||
<p>Panel is a container component that accepts content as its children.</p>
|
||||
<CodeHighlight>
|
||||
<Panel header="Godfather I">
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
</Panel>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Custom Header</h3>
|
||||
<p>Header of the panel is either defined with the <i>header</i> property or the header template.</p>
|
||||
<CodeHighlight>
|
||||
<Panel>
|
||||
<template #header>
|
||||
Header Content
|
||||
</template>
|
||||
Content
|
||||
</Panel>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Toggleable</h3>
|
||||
<p>Content of the panel can be expanded and collapsed using <i>toggleable</i> option.</p>
|
||||
<CodeHighlight>
|
||||
<Panel header="Godfather I" :toggleable="true">
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
</Panel>
|
||||
</CodeHighlight>
|
||||
|
||||
<p>To control the initial state of the toggleable panel, use the <i>collapsed</i> property.</p>
|
||||
<CodeHighlight>
|
||||
<Panel header="Header Text" :toggleable="true" :collapsed="true">
|
||||
Content
|
||||
</Panel>
|
||||
</CodeHighlight>
|
||||
|
||||
<p>Use the sync operator to enable two-way binding.</p>
|
||||
|
||||
<CodeHighlight>
|
||||
<button type="button" @click="isCollapsed = !isCollapsed">Toggle Programmatically</button>
|
||||
<Panel header="Header Text" :toggleable="true" :collapsed.sync="isCollapsed">
|
||||
Content
|
||||
</Panel>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Properties</h3>
|
||||
<p>Any attribute such as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>header</td>
|
||||
<td>string</td>
|
||||
<td>null</td>
|
||||
<td>Header text of the panel.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>toggleable</td>
|
||||
<td>boolean</td>
|
||||
<td>null</td>
|
||||
<td>Defines if content of panel can be expanded and collapsed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>collapsed</td>
|
||||
<td>boolean</td>
|
||||
<td>null</td>
|
||||
<td>Defines the initial state of panel content.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Events</h3>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Parameters</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>toggle</td>
|
||||
<td>event.originalEvent: browser event <br />
|
||||
event.value: collapsed state as a boolean
|
||||
</td>
|
||||
<td>Callback to invoke when a tab toggle.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Styling</h3>
|
||||
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Element</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>p-panel</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-panel-titlebar</td>
|
||||
<td>Header section.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-panel-title</td>
|
||||
<td>Title text of panel.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-panel-titlebar-toggler</td>
|
||||
<td>Toggle icon.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-panel-content</td>
|
||||
<td>Content of panel.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Dependencies</h3>
|
||||
<p>None.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/panel" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Panel</h1>
|
||||
<p>Panel is a grouping component with the optional content toggle feature.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Regular</h3>
|
||||
<Panel header="Godfather I">
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
</Panel>
|
||||
|
||||
<h3>Toggleable</h3>
|
||||
<Panel header="Godfather I" :toggleable="true">
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
</Panel>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</template>
|
Loading…
Reference in New Issue