Merge pull request #26261 from ruchamahabal/org-chart
feat: Organizational Chart
This commit is contained in:
Nabin Hait
GitHub
commit
f8031d3d79
@ -147,10 +147,15 @@
|
||||
"Chart": true,
|
||||
"Cypress": true,
|
||||
"cy": true,
|
||||
"describe": true,
|
||||
"expect": true,
|
||||
"it": true,
|
||||
"context": true,
|
||||
"before": true,
|
||||
"beforeEach": true,
|
||||
"onScan": true
|
||||
"onScan": true,
|
||||
"html2canvas": true,
|
||||
"extend_cscript": true,
|
||||
"localforage": true
|
||||
}
|
||||
}
|
||||
|
||||
2
.github/helper/install.sh
vendored
2
.github/helper/install.sh
vendored
@ -42,5 +42,5 @@ sed -i 's/socketio:/# socketio:/g' Procfile
|
||||
sed -i 's/redis_socketio:/# redis_socketio:/g' Procfile
|
||||
|
||||
bench get-app erpnext "${GITHUB_WORKSPACE}"
|
||||
bench start &
|
||||
bench start &> bench_run_logs.txt &
|
||||
bench --site test_site reinstall --yes
|
||||
|
||||
108
.github/workflows/ui-tests.yml
vendored
Normal file
108
.github/workflows/ui-tests.yml
vendored
Normal file
@ -0,0 +1,108 @@
|
||||
name: UI
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
test:
|
||||
runs-on: ubuntu-18.04
|
||||
|
||||
strategy:
|
||||
fail-fast: false
|
||||
|
||||
name: UI Tests (Cypress)
|
||||
|
||||
services:
|
||||
mysql:
|
||||
image: mariadb:10.3
|
||||
env:
|
||||
MYSQL_ALLOW_EMPTY_PASSWORD: YES
|
||||
ports:
|
||||
- 3306:3306
|
||||
options: --health-cmd="mysqladmin ping" --health-interval=5s --health-timeout=2s --health-retries=3
|
||||
|
||||
steps:
|
||||
- name: Clone
|
||||
uses: actions/checkout@v2
|
||||
|
||||
- name: Setup Python
|
||||
uses: actions/setup-python@v2
|
||||
with:
|
||||
python-version: 3.7
|
||||
|
||||
- uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: 14
|
||||
check-latest: true
|
||||
|
||||
- name: Add to Hosts
|
||||
run: |
|
||||
echo "127.0.0.1 test_site" | sudo tee -a /etc/hosts
|
||||
|
||||
- name: Cache pip
|
||||
uses: actions/cache@v2
|
||||
with:
|
||||
path: ~/.cache/pip
|
||||
key: ${{ runner.os }}-pip-${{ hashFiles('**/requirements.txt') }}
|
||||
restore-keys: |
|
||||
${{ runner.os }}-pip-
|
||||
${{ runner.os }}-
|
||||
|
||||
- name: Cache node modules
|
||||
uses: actions/cache@v2
|
||||
env:
|
||||
cache-name: cache-node-modules
|
||||
with:
|
||||
path: ~/.npm
|
||||
key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
|
||||
restore-keys: |
|
||||
${{ runner.os }}-build-${{ env.cache-name }}-
|
||||
${{ runner.os }}-build-
|
||||
${{ runner.os }}-
|
||||
|
||||
- name: Get yarn cache directory path
|
||||
id: yarn-cache-dir-path
|
||||
run: echo "::set-output name=dir::$(yarn cache dir)"
|
||||
|
||||
- uses: actions/cache@v2
|
||||
id: yarn-cache
|
||||
with:
|
||||
path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
|
||||
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
|
||||
restore-keys: |
|
||||
${{ runner.os }}-yarn-
|
||||
|
||||
- name: Cache cypress binary
|
||||
uses: actions/cache@v2
|
||||
with:
|
||||
path: ~/.cache
|
||||
key: ${{ runner.os }}-cypress-
|
||||
restore-keys: |
|
||||
${{ runner.os }}-cypress-
|
||||
${{ runner.os }}-
|
||||
|
||||
- name: Install
|
||||
run: bash ${GITHUB_WORKSPACE}/.github/helper/install.sh
|
||||
env:
|
||||
DB: mariadb
|
||||
TYPE: ui
|
||||
|
||||
- name: Site Setup
|
||||
run: cd ~/frappe-bench/ && bench --site test_site execute erpnext.setup.utils.before_tests
|
||||
|
||||
- name: cypress pre-requisites
|
||||
run: cd ~/frappe-bench/apps/frappe && yarn add cypress-file-upload@^5 --no-lockfile
|
||||
|
||||
|
||||
- name: Build Assets
|
||||
run: cd ~/frappe-bench/ && bench build
|
||||
|
||||
- name: UI Tests
|
||||
run: cd ~/frappe-bench/ && bench --site test_site run-ui-tests erpnext --headless
|
||||
env:
|
||||
CYPRESS_RECORD_KEY: 60a8e3bf-08f5-45b1-9269-2b207d7d30cd
|
||||
|
||||
- name: Show bench console if tests failed
|
||||
if: ${{ failure() }}
|
||||
run: cat ~/frappe-bench/bench_run_logs.txt
|
||||
11
cypress.json
Normal file
11
cypress.json
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"baseUrl": "http://test_site:8000",
|
||||
"projectId": "da59y9",
|
||||
"adminPassword": "admin",
|
||||
"defaultCommandTimeout": 20000,
|
||||
"pageLoadTimeout": 15000,
|
||||
"retries": {
|
||||
"runMode": 2,
|
||||
"openMode": 2
|
||||
}
|
||||
}
|
||||
5
cypress/fixtures/example.json
Normal file
5
cypress/fixtures/example.json
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"name": "Using fixtures to represent data",
|
||||
"email": "hello@cypress.io",
|
||||
"body": "Fixtures are a great way to mock data for responses to routes"
|
||||
}
|
||||
13
cypress/integration/test_customer.js
Normal file
13
cypress/integration/test_customer.js
Normal file
@ -0,0 +1,13 @@
|
||||
|
||||
context('Customer', () => {
|
||||
before(() => {
|
||||
cy.login();
|
||||
});
|
||||
it('Check Customer Group', () => {
|
||||
cy.visit(`app/customer/`);
|
||||
cy.get('.primary-action').click();
|
||||
cy.wait(500);
|
||||
cy.get('.custom-actions > .btn').click();
|
||||
cy.get_field('customer_group', 'Link').should('have.value', 'All Customer Groups');
|
||||
});
|
||||
});
|
||||
111
cypress/integration/test_organizational_chart_desktop.js
Normal file
111
cypress/integration/test_organizational_chart_desktop.js
Normal file
@ -0,0 +1,111 @@
|
||||
context('Organizational Chart', () => {
|
||||
before(() => {
|
||||
cy.login();
|
||||
cy.visit('/app/website');
|
||||
cy.awesomebar('Organizational Chart');
|
||||
|
||||
cy.window().its('frappe.csrf_token').then(csrf_token => {
|
||||
return cy.request({
|
||||
url: `/api/method/erpnext.tests.ui_test_helpers.create_employee_records`,
|
||||
method: 'POST',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
'X-Frappe-CSRF-Token': csrf_token
|
||||
},
|
||||
timeout: 60000
|
||||
}).then(res => {
|
||||
expect(res.status).eq(200);
|
||||
cy.get('.frappe-control[data-fieldname=company] input').focus().as('input');
|
||||
cy.get('@input')
|
||||
.clear({ force: true })
|
||||
.type('Test Org Chart{enter}', { force: true })
|
||||
.blur({ force: true });
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('renders root nodes and loads children for the first expandable node', () => {
|
||||
// check rendered root nodes and the node name, title, connections
|
||||
cy.get('.hierarchy').find('.root-level ul.node-children').children()
|
||||
.should('have.length', 2)
|
||||
.first()
|
||||
.as('first-child');
|
||||
|
||||
cy.get('@first-child').get('.node-name').contains('Test Employee 1');
|
||||
cy.get('@first-child').get('.node-info').find('.node-title').contains('CEO');
|
||||
cy.get('@first-child').get('.node-info').find('.node-connections').contains('· 2 Connections');
|
||||
|
||||
cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(employee_records => {
|
||||
// children of 1st root visible
|
||||
cy.get(`div[data-parent="${employee_records.message[0]}"]`).as('child-node');
|
||||
cy.get('@child-node')
|
||||
.should('have.length', 1)
|
||||
.should('be.visible');
|
||||
cy.get('@child-node').get('.node-name').contains('Test Employee 3');
|
||||
|
||||
// connectors between first root node and immediate child
|
||||
cy.get(`path[data-parent="${employee_records.message[0]}"]`)
|
||||
.should('be.visible')
|
||||
.invoke('attr', 'data-child')
|
||||
.should('equal', employee_records.message[2]);
|
||||
});
|
||||
});
|
||||
|
||||
it('hides active nodes children and connectors on expanding sibling node', () => {
|
||||
cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(employee_records => {
|
||||
// click sibling
|
||||
cy.get(`#${employee_records.message[1]}`)
|
||||
.click()
|
||||
.should('have.class', 'active');
|
||||
|
||||
// child nodes and connectors hidden
|
||||
cy.get(`[data-parent="${employee_records.message[0]}"]`).should('not.be.visible');
|
||||
cy.get(`path[data-parent="${employee_records.message[0]}"]`).should('not.be.visible');
|
||||
});
|
||||
});
|
||||
|
||||
it('collapses previous level nodes and refreshes connectors on expanding child node', () => {
|
||||
cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(employee_records => {
|
||||
// click child node
|
||||
cy.get(`#${employee_records.message[3]}`)
|
||||
.click()
|
||||
.should('have.class', 'active');
|
||||
|
||||
// previous level nodes: parent should be on active-path; other nodes should be collapsed
|
||||
cy.get(`#${employee_records.message[0]}`).should('have.class', 'collapsed');
|
||||
cy.get(`#${employee_records.message[1]}`).should('have.class', 'active-path');
|
||||
|
||||
// previous level connectors refreshed
|
||||
cy.get(`path[data-parent="${employee_records.message[1]}"]`)
|
||||
.should('have.class', 'collapsed-connector');
|
||||
|
||||
// child node's children and connectors rendered
|
||||
cy.get(`[data-parent="${employee_records.message[3]}"]`).should('be.visible');
|
||||
cy.get(`path[data-parent="${employee_records.message[3]}"]`).should('be.visible');
|
||||
});
|
||||
});
|
||||
|
||||
it('expands previous level nodes', () => {
|
||||
cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(employee_records => {
|
||||
cy.get(`#${employee_records.message[0]}`)
|
||||
.click()
|
||||
.should('have.class', 'active');
|
||||
|
||||
cy.get(`[data-parent="${employee_records.message[0]}"]`)
|
||||
.should('be.visible');
|
||||
|
||||
cy.get('ul.hierarchy').children().should('have.length', 2);
|
||||
cy.get(`#connectors`).children().should('have.length', 1);
|
||||
});
|
||||
});
|
||||
|
||||
it('edit node navigates to employee master', () => {
|
||||
cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(employee_records => {
|
||||
cy.get(`#${employee_records.message[0]}`).find('.btn-edit-node')
|
||||
.click();
|
||||
|
||||
cy.url().should('include', `/employee/${employee_records.message[0]}`);
|
||||
});
|
||||
});
|
||||
});
|
||||
190
cypress/integration/test_organizational_chart_mobile.js
Normal file
190
cypress/integration/test_organizational_chart_mobile.js
Normal file
@ -0,0 +1,190 @@
|
||||
context('Organizational Chart Mobile', () => {
|
||||
before(() => {
|
||||
cy.login();
|
||||
cy.viewport(375, 667);
|
||||
cy.visit('/app/website');
|
||||
cy.awesomebar('Organizational Chart');
|
||||
|
||||
cy.window().its('frappe.csrf_token').then(csrf_token => {
|
||||
return cy.request({
|
||||
url: `/api/method/erpnext.tests.ui_test_helpers.create_employee_records`,
|
||||
method: 'POST',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
'X-Frappe-CSRF-Token': csrf_token
|
||||
},
|
||||
timeout: 60000
|
||||
}).then(res => {
|
||||
expect(res.status).eq(200);
|
||||
cy.get('.frappe-control[data-fieldname=company] input').focus().as('input');
|
||||
cy.get('@input')
|
||||
.clear({ force: true })
|
||||
.type('Test Org Chart{enter}', { force: true })
|
||||
.blur({ force: true });
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('renders root nodes', () => {
|
||||
// check rendered root nodes and the node name, title, connections
|
||||
cy.get('.hierarchy-mobile').find('.root-level').children()
|
||||
.should('have.length', 2)
|
||||
.first()
|
||||
.as('first-child');
|
||||
|
||||
cy.get('@first-child').get('.node-name').contains('Test Employee 1');
|
||||
cy.get('@first-child').get('.node-info').find('.node-title').contains('CEO');
|
||||
cy.get('@first-child').get('.node-info').find('.node-connections').contains('· 2');
|
||||
});
|
||||
|
||||
it('expands root node', () => {
|
||||
cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(employee_records => {
|
||||
cy.get(`#${employee_records.message[1]}`)
|
||||
.click()
|
||||
.should('have.class', 'active');
|
||||
|
||||
// other root node removed
|
||||
cy.get(`#${employee_records.message[0]}`).should('not.exist');
|
||||
|
||||
// children of active root node
|
||||
cy.get('.hierarchy-mobile').find('.level').first().find('ul.node-children').children()
|
||||
.should('have.length', 2);
|
||||
|
||||
cy.get(`div[data-parent="${employee_records.message[1]}"]`).first().as('child-node');
|
||||
cy.get('@child-node').should('be.visible');
|
||||
|
||||
cy.get('@child-node')
|
||||
.get('.node-name')
|
||||
.contains('Test Employee 4');
|
||||
|
||||
// connectors between root node and immediate children
|
||||
cy.get(`path[data-parent="${employee_records.message[1]}"]`).as('connectors');
|
||||
cy.get('@connectors')
|
||||
.should('have.length', 2)
|
||||
.should('be.visible');
|
||||
|
||||
cy.get('@connectors')
|
||||
.first()
|
||||
.invoke('attr', 'data-child')
|
||||
.should('eq', employee_records.message[3]);
|
||||
});
|
||||
});
|
||||
|
||||
it('expands child node', () => {
|
||||
cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(employee_records => {
|
||||
cy.get(`#${employee_records.message[3]}`)
|
||||
.click()
|
||||
.should('have.class', 'active')
|
||||
.as('expanded_node');
|
||||
|
||||
// 2 levels on screen; 1 on active path; 1 collapsed
|
||||
cy.get('.hierarchy-mobile').children().should('have.length', 2);
|
||||
cy.get(`#${employee_records.message[1]}`).should('have.class', 'active-path');
|
||||
|
||||
// children of expanded node visible
|
||||
cy.get('@expanded_node')
|
||||
.next()
|
||||
.should('have.class', 'node-children')
|
||||
.as('node-children');
|
||||
|
||||
cy.get('@node-children').children().should('have.length', 1);
|
||||
cy.get('@node-children')
|
||||
.first()
|
||||
.get('.node-card')
|
||||
.should('have.class', 'active-child')
|
||||
.contains('Test Employee 7');
|
||||
|
||||
// orphan connectors removed
|
||||
cy.get(`#connectors`).children().should('have.length', 2);
|
||||
});
|
||||
});
|
||||
|
||||
it('renders sibling group', () => {
|
||||
cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(employee_records => {
|
||||
// sibling group visible for parent
|
||||
cy.get(`#${employee_records.message[1]}`)
|
||||
.next()
|
||||
.as('sibling_group');
|
||||
|
||||
cy.get('@sibling_group')
|
||||
.should('have.attr', 'data-parent', 'undefined')
|
||||
.should('have.class', 'node-group')
|
||||
.and('have.class', 'collapsed');
|
||||
|
||||
cy.get('@sibling_group').get('.avatar-group').children().as('siblings');
|
||||
cy.get('@siblings').should('have.length', 1);
|
||||
cy.get('@siblings')
|
||||
.first()
|
||||
.should('have.attr', 'title', 'Test Employee 1');
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
it('expands previous level nodes', () => {
|
||||
cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(employee_records => {
|
||||
cy.get(`#${employee_records.message[6]}`)
|
||||
.click()
|
||||
.should('have.class', 'active');
|
||||
|
||||
// clicking on previous level node should remove all the nodes ahead
|
||||
// and expand that node
|
||||
cy.get(`#${employee_records.message[3]}`).click();
|
||||
cy.get(`#${employee_records.message[3]}`)
|
||||
.should('have.class', 'active')
|
||||
.should('not.have.class', 'active-path');
|
||||
|
||||
cy.get(`#${employee_records.message[6]}`).should('have.class', 'active-child');
|
||||
cy.get('.hierarchy-mobile').children().should('have.length', 2);
|
||||
cy.get(`#connectors`).children().should('have.length', 2);
|
||||
});
|
||||
});
|
||||
|
||||
it('expands sibling group', () => {
|
||||
cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(employee_records => {
|
||||
// sibling group visible for parent
|
||||
cy.get(`#${employee_records.message[6]}`).click();
|
||||
|
||||
cy.get(`#${employee_records.message[3]}`)
|
||||
.next()
|
||||
.click();
|
||||
|
||||
// siblings of parent should be visible
|
||||
cy.get('.hierarchy-mobile').prev().as('sibling_group');
|
||||
cy.get('@sibling_group')
|
||||
.should('exist')
|
||||
.should('have.class', 'sibling-group')
|
||||
.should('not.have.class', 'collapsed');
|
||||
|
||||
cy.get(`#${employee_records.message[1]}`)
|
||||
.should('be.visible')
|
||||
.should('have.class', 'active');
|
||||
|
||||
cy.get(`[data-parent="${employee_records.message[1]}"]`)
|
||||
.should('be.visible')
|
||||
.should('have.length', 2)
|
||||
.should('have.class', 'active-child');
|
||||
});
|
||||
});
|
||||
|
||||
it('goes to the respective level after clicking on non-collapsed sibling group', () => {
|
||||
cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(() => {
|
||||
// click on non-collapsed sibling group
|
||||
cy.get('.hierarchy-mobile')
|
||||
.prev()
|
||||
.click();
|
||||
|
||||
// should take you to that level
|
||||
cy.get('.hierarchy-mobile').find('li.level .node-card').should('have.length', 2);
|
||||
});
|
||||
});
|
||||
|
||||
it('edit node navigates to employee master', () => {
|
||||
cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(employee_records => {
|
||||
cy.get(`#${employee_records.message[0]}`).find('.btn-edit-node')
|
||||
.click();
|
||||
|
||||
cy.url().should('include', `/employee/${employee_records.message[0]}`);
|
||||
});
|
||||
});
|
||||
});
|
||||
17
cypress/plugins/index.js
Normal file
17
cypress/plugins/index.js
Normal file
@ -0,0 +1,17 @@
|
||||
// ***********************************************************
|
||||
// This example plugins/index.js can be used to load plugins
|
||||
//
|
||||
// You can change the location of this file or turn off loading
|
||||
// the plugins file with the 'pluginsFile' configuration option.
|
||||
//
|
||||
// You can read more here:
|
||||
// https://on.cypress.io/plugins-guide
|
||||
// ***********************************************************
|
||||
|
||||
// This function is called when a project is opened or re-opened (e.g. due to
|
||||
// the project's config changing)
|
||||
|
||||
module.exports = () => {
|
||||
// `on` is used to hook into various events Cypress emits
|
||||
// `config` is the resolved Cypress config
|
||||
};
|
||||
31
cypress/support/commands.js
Normal file
31
cypress/support/commands.js
Normal file
@ -0,0 +1,31 @@
|
||||
// ***********************************************
|
||||
// This example commands.js shows you how to
|
||||
// create various custom commands and overwrite
|
||||
// existing commands.
|
||||
//
|
||||
// For more comprehensive examples of custom
|
||||
// commands please read more here:
|
||||
// https://on.cypress.io/custom-commands
|
||||
// ***********************************************
|
||||
//
|
||||
//
|
||||
// -- This is a parent command --
|
||||
// Cypress.Commands.add("login", (email, password) => { ... });
|
||||
//
|
||||
//
|
||||
// -- This is a child command --
|
||||
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... });
|
||||
//
|
||||
//
|
||||
// -- This is a dual command --
|
||||
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... });
|
||||
//
|
||||
//
|
||||
// -- This is will overwrite an existing command --
|
||||
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... });
|
||||
|
||||
const slug = (name) => name.toLowerCase().replace(" ", "-");
|
||||
|
||||
Cypress.Commands.add("go_to_doc", (doctype, name) => {
|
||||
cy.visit(`/app/${slug(doctype)}/${encodeURIComponent(name)}`);
|
||||
});
|
||||
26
cypress/support/index.js
Normal file
26
cypress/support/index.js
Normal file
@ -0,0 +1,26 @@
|
||||
// ***********************************************************
|
||||
// This example support/index.js is processed and
|
||||
// loaded automatically before your test files.
|
||||
//
|
||||
// This is a great place to put global configuration and
|
||||
// behavior that modifies Cypress.
|
||||
//
|
||||
// You can change the location of this file or turn off
|
||||
// automatically serving support files with the
|
||||
// 'supportFile' configuration option.
|
||||
//
|
||||
// You can read more here:
|
||||
// https://on.cypress.io/configuration
|
||||
// ***********************************************************
|
||||
|
||||
// Import commands.js using ES2015 syntax:
|
||||
import './commands';
|
||||
import '../../../frappe/cypress/support/commands' // eslint-disable-line
|
||||
|
||||
|
||||
// Alternatively you can use CommonJS syntax:
|
||||
// require('./commands')
|
||||
|
||||
Cypress.Cookies.defaults({
|
||||
preserve: 'sid'
|
||||
});
|
||||
12
cypress/tsconfig.json
Normal file
12
cypress/tsconfig.json
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"allowJs": true,
|
||||
"baseUrl": "../node_modules",
|
||||
"types": [
|
||||
"cypress"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"**/*.*"
|
||||
]
|
||||
}
|
||||
0
erpnext/hr/page/organizational_chart/__init__.py
Normal file
0
erpnext/hr/page/organizational_chart/__init__.py
Normal file
21
erpnext/hr/page/organizational_chart/organizational_chart.js
Normal file
21
erpnext/hr/page/organizational_chart/organizational_chart.js
Normal file
@ -0,0 +1,21 @@
|
||||
frappe.pages['organizational-chart'].on_page_load = function(wrapper) {
|
||||
frappe.ui.make_app_page({
|
||||
parent: wrapper,
|
||||
title: __('Organizational Chart'),
|
||||
single_column: true
|
||||
});
|
||||
|
||||
$(wrapper).bind('show', () => {
|
||||
frappe.require('/assets/js/hierarchy-chart.min.js', () => {
|
||||
let organizational_chart = undefined;
|
||||
let method = 'erpnext.hr.page.organizational_chart.organizational_chart.get_children';
|
||||
|
||||
if (frappe.is_mobile()) {
|
||||
organizational_chart = new erpnext.HierarchyChartMobile('Employee', wrapper, method);
|
||||
} else {
|
||||
organizational_chart = new erpnext.HierarchyChart('Employee', wrapper, method);
|
||||
}
|
||||
organizational_chart.show();
|
||||
});
|
||||
});
|
||||
};
|
||||
@ -0,0 +1,26 @@
|
||||
{
|
||||
"content": null,
|
||||
"creation": "2021-05-25 10:53:10.107241",
|
||||
"docstatus": 0,
|
||||
"doctype": "Page",
|
||||
"idx": 0,
|
||||
"modified": "2021-05-25 10:53:18.201931",
|
||||
"modified_by": "Administrator",
|
||||
"module": "HR",
|
||||
"name": "organizational-chart",
|
||||
"owner": "Administrator",
|
||||
"page_name": "Organizational Chart",
|
||||
"roles": [
|
||||
{
|
||||
"role": "HR User"
|
||||
},
|
||||
{
|
||||
"role": "HR Manager"
|
||||
}
|
||||
],
|
||||
"script": null,
|
||||
"standard": "Yes",
|
||||
"style": null,
|
||||
"system_page": 0,
|
||||
"title": "Organizational Chart"
|
||||
}
|
||||
47
erpnext/hr/page/organizational_chart/organizational_chart.py
Normal file
47
erpnext/hr/page/organizational_chart/organizational_chart.py
Normal file
@ -0,0 +1,47 @@
|
||||
from __future__ import unicode_literals
|
||||
import frappe
|
||||
|
||||
@frappe.whitelist()
|
||||
def get_children(parent=None, company=None, exclude_node=None):
|
||||
filters = [['status', '!=', 'Left']]
|
||||
if company and company != 'All Companies':
|
||||
filters.append(['company', '=', company])
|
||||
|
||||
if parent and company and parent != company:
|
||||
filters.append(['reports_to', '=', parent])
|
||||
else:
|
||||
filters.append(['reports_to', '=', ''])
|
||||
|
||||
if exclude_node:
|
||||
filters.append(['name', '!=', exclude_node])
|
||||
|
||||
employees = frappe.get_list('Employee',
|
||||
fields=['employee_name as name', 'name as id', 'reports_to', 'image', 'designation as title'],
|
||||
filters=filters,
|
||||
order_by='name'
|
||||
)
|
||||
|
||||
for employee in employees:
|
||||
is_expandable = frappe.db.count('Employee', filters={'reports_to': employee.get('id')})
|
||||
employee.connections = get_connections(employee.id)
|
||||
employee.expandable = 1 if is_expandable else 0
|
||||
|
||||
return employees
|
||||
|
||||
|
||||
def get_connections(employee):
|
||||
num_connections = 0
|
||||
|
||||
connections = frappe.get_list('Employee', filters=[
|
||||
['reports_to', '=', employee]
|
||||
])
|
||||
num_connections += len(connections)
|
||||
|
||||
while connections:
|
||||
for entry in connections:
|
||||
connections = frappe.get_list('Employee', filters=[
|
||||
['reports_to', '=', entry.name]
|
||||
])
|
||||
num_connections += len(connections)
|
||||
|
||||
return num_connections
|
||||
@ -3,7 +3,8 @@
|
||||
"public/less/erpnext.less",
|
||||
"public/less/hub.less",
|
||||
"public/scss/call_popup.scss",
|
||||
"public/scss/point-of-sale.scss"
|
||||
"public/scss/point-of-sale.scss",
|
||||
"public/scss/hierarchy_chart.scss"
|
||||
],
|
||||
"css/marketplace.css": [
|
||||
"public/less/hub.less"
|
||||
@ -43,7 +44,8 @@
|
||||
"public/js/call_popup/call_popup.js",
|
||||
"public/js/utils/dimension_tree_filter.js",
|
||||
"public/js/telephony.js",
|
||||
"public/js/templates/call_link.html"
|
||||
"public/js/templates/call_link.html",
|
||||
"public/js/templates/node_card.html"
|
||||
],
|
||||
"js/item-dashboard.min.js": [
|
||||
"stock/dashboard/item_dashboard.html",
|
||||
@ -66,5 +68,9 @@
|
||||
"public/js/bank_reconciliation_tool/data_table_manager.js",
|
||||
"public/js/bank_reconciliation_tool/number_card.js",
|
||||
"public/js/bank_reconciliation_tool/dialog_manager.js"
|
||||
],
|
||||
"js/hierarchy-chart.min.js": [
|
||||
"public/js/hierarchy_chart/hierarchy_chart_desktop.js",
|
||||
"public/js/hierarchy_chart/hierarchy_chart_mobile.js"
|
||||
]
|
||||
}
|
||||
|
||||
591
erpnext/public/js/hierarchy_chart/hierarchy_chart_desktop.js
Normal file
591
erpnext/public/js/hierarchy_chart/hierarchy_chart_desktop.js
Normal file
@ -0,0 +1,591 @@
|
||||
import html2canvas from 'html2canvas';
|
||||
erpnext.HierarchyChart = class {
|
||||
/* Options:
|
||||
- doctype
|
||||
- wrapper: wrapper for the hierarchy view
|
||||
- method:
|
||||
- to get the data for each node
|
||||
- this method should return id, name, title, image, and connections for each node
|
||||
*/
|
||||
constructor(doctype, wrapper, method) {
|
||||
this.page = wrapper.page;
|
||||
this.method = method;
|
||||
this.doctype = doctype;
|
||||
|
||||
this.setup_page_style();
|
||||
this.page.main.addClass('frappe-card');
|
||||
|
||||
this.nodes = {};
|
||||
this.setup_node_class();
|
||||
}
|
||||
|
||||
setup_page_style() {
|
||||
this.page.main.css({
|
||||
'min-height': '300px',
|
||||
'max-height': '600px',
|
||||
'overflow': 'auto',
|
||||
'position': 'relative'
|
||||
});
|
||||
}
|
||||
|
||||
setup_node_class() {
|
||||
let me = this;
|
||||
this.Node = class {
|
||||
constructor({
|
||||
id, parent, parent_id, image, name, title, expandable, connections, is_root // eslint-disable-line
|
||||
}) {
|
||||
// to setup values passed via constructor
|
||||
$.extend(this, arguments[0]);
|
||||
|
||||
this.expanded = 0;
|
||||
|
||||
me.nodes[this.id] = this;
|
||||
me.make_node_element(this);
|
||||
|
||||
if (!me.all_nodes_expanded) {
|
||||
me.setup_node_click_action(this);
|
||||
}
|
||||
|
||||
me.setup_edit_node_action(this);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
make_node_element(node) {
|
||||
let node_card = frappe.render_template('node_card', {
|
||||
id: node.id,
|
||||
name: node.name,
|
||||
title: node.title,
|
||||
image: node.image,
|
||||
parent: node.parent_id,
|
||||
connections: node.connections,
|
||||
is_mobile: false
|
||||
});
|
||||
|
||||
node.parent.append(node_card);
|
||||
node.$link = $(`#${node.id}`);
|
||||
}
|
||||
|
||||
show() {
|
||||
frappe.breadcrumbs.add('HR');
|
||||
|
||||
this.setup_actions();
|
||||
if ($(`[data-fieldname="company"]`).length) return;
|
||||
let me = this;
|
||||
|
||||
let company = this.page.add_field({
|
||||
fieldtype: 'Link',
|
||||
options: 'Company',
|
||||
fieldname: 'company',
|
||||
placeholder: __('Select Company'),
|
||||
default: frappe.defaults.get_default('company'),
|
||||
only_select: true,
|
||||
reqd: 1,
|
||||
change: () => {
|
||||
me.company = undefined;
|
||||
|
||||
if (company.get_value() && me.company != company.get_value()) {
|
||||
me.company = company.get_value();
|
||||
|
||||
// svg for connectors
|
||||
me.make_svg_markers();
|
||||
me.setup_hierarchy();
|
||||
me.render_root_nodes();
|
||||
me.all_nodes_expanded = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
company.refresh();
|
||||
$(`[data-fieldname="company"]`).trigger('change');
|
||||
}
|
||||
|
||||
setup_actions() {
|
||||
let me = this;
|
||||
this.page.add_inner_button(__('Export'), function() {
|
||||
me.export_chart();
|
||||
});
|
||||
|
||||
this.page.add_inner_button(__('Expand All'), function() {
|
||||
me.load_children(me.root_node, true);
|
||||
me.all_nodes_expanded = true;
|
||||
|
||||
me.page.remove_inner_button(__('Expand All'));
|
||||
me.page.add_inner_button(__('Collapse All'), function() {
|
||||
me.setup_hierarchy();
|
||||
me.render_root_nodes();
|
||||
me.all_nodes_expanded = false;
|
||||
|
||||
me.page.remove_inner_button(__('Collapse All'));
|
||||
me.setup_actions();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export_chart() {
|
||||
this.page.main.css({
|
||||
'min-height': '',
|
||||
'max-height': '',
|
||||
'overflow': 'visible',
|
||||
'position': 'fixed',
|
||||
'left': '0',
|
||||
'top': '0'
|
||||
});
|
||||
|
||||
$('.node-card').addClass('exported');
|
||||
|
||||
html2canvas(document.querySelector('#hierarchy-chart-wrapper'), {
|
||||
scrollY: -window.scrollY,
|
||||
scrollX: 0
|
||||
}).then(function(canvas) {
|
||||
// Export the canvas to its data URI representation
|
||||
let dataURL = canvas.toDataURL('image/png');
|
||||
|
||||
// download the image
|
||||
let a = document.createElement('a');
|
||||
a.href = dataURL;
|
||||
a.download = 'hierarchy_chart';
|
||||
a.click();
|
||||
});
|
||||
|
||||
this.setup_page_style();
|
||||
$('.node-card').removeClass('exported');
|
||||
}
|
||||
|
||||
setup_hierarchy() {
|
||||
if (this.$hierarchy)
|
||||
this.$hierarchy.remove();
|
||||
|
||||
$(`#connectors`).empty();
|
||||
|
||||
// setup hierarchy
|
||||
this.$hierarchy = $(
|
||||
`<ul class="hierarchy">
|
||||
<li class="root-level level">
|
||||
<ul class="node-children"></ul>
|
||||
</li>
|
||||
</ul>`);
|
||||
|
||||
this.page.main
|
||||
.find('#hierarchy-chart-wrapper')
|
||||
.append(this.$hierarchy);
|
||||
this.nodes = {};
|
||||
}
|
||||
|
||||
make_svg_markers() {
|
||||
$('#hierarchy-chart-wrapper').remove();
|
||||
|
||||
this.page.main.append(`
|
||||
<div id="hierarchy-chart-wrapper">
|
||||
<svg id="arrows" width="100%" height="100%">
|
||||
<defs>
|
||||
<marker id="arrowhead-active" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="6" markerHeight="6" orient="auto" fill="var(--blue-500)">
|
||||
<path d="M 0 0 L 10 5 L 0 10 z"></path>
|
||||
</marker>
|
||||
<marker id="arrowhead-collapsed" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="6" markerHeight="6" orient="auto" fill="var(--blue-300)">
|
||||
<path d="M 0 0 L 10 5 L 0 10 z"></path>
|
||||
</marker>
|
||||
|
||||
<marker id="arrowstart-active" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="8" markerHeight="8" orient="auto" fill="var(--blue-500)">
|
||||
<circle cx="4" cy="4" r="3.5" fill="white" stroke="var(--blue-500)"/>
|
||||
</marker>
|
||||
<marker id="arrowstart-collapsed" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="8" markerHeight="8" orient="auto" fill="var(--blue-300)">
|
||||
<circle cx="4" cy="4" r="3.5" fill="white" stroke="var(--blue-300)"/>
|
||||
</marker>
|
||||
</defs>
|
||||
<g id="connectors" fill="none">
|
||||
</g>
|
||||
</svg>
|
||||
</div>`);
|
||||
}
|
||||
|
||||
render_root_nodes(expanded_view=false) {
|
||||
let me = this;
|
||||
|
||||
frappe.call({
|
||||
method: me.method,
|
||||
args: {
|
||||
company: me.company
|
||||
}
|
||||
}).then(r => {
|
||||
if (r.message.length) {
|
||||
let expand_node = undefined;
|
||||
let node = undefined;
|
||||
|
||||
$.each(r.message, (i, data) => {
|
||||
node = new me.Node({
|
||||
id: data.id,
|
||||
parent: $('<li class="child-node"></li>').appendTo(me.$hierarchy.find('.node-children')),
|
||||
parent_id: undefined,
|
||||
image: data.image,
|
||||
name: data.name,
|
||||
title: data.title,
|
||||
expandable: true,
|
||||
connections: data.connections,
|
||||
is_root: true
|
||||
});
|
||||
|
||||
if (!expand_node && data.connections)
|
||||
expand_node = node;
|
||||
});
|
||||
|
||||
if (!expanded_view) {
|
||||
me.root_node = expand_node;
|
||||
me.expand_node(expand_node);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
expand_node(node) {
|
||||
const is_sibling = this.selected_node && this.selected_node.parent_id === node.parent_id;
|
||||
this.set_selected_node(node);
|
||||
this.show_active_path(node);
|
||||
this.collapse_previous_level_nodes(node);
|
||||
|
||||
// since the previous node collapses, all connections to that node need to be rebuilt
|
||||
// if a sibling node is clicked, connections don't need to be rebuilt
|
||||
if (!is_sibling) {
|
||||
// rebuild outgoing connections
|
||||
this.refresh_connectors(node.parent_id);
|
||||
|
||||
// rebuild incoming connections
|
||||
let grandparent = $(`#${node.parent_id}`).attr('data-parent');
|
||||
this.refresh_connectors(grandparent);
|
||||
}
|
||||
|
||||
if (node.expandable && !node.expanded) {
|
||||
return this.load_children(node);
|
||||
}
|
||||
}
|
||||
|
||||
collapse_node() {
|
||||
if (this.selected_node.expandable) {
|
||||
this.selected_node.$children.hide();
|
||||
$(`path[data-parent="${this.selected_node.id}"]`).hide();
|
||||
this.selected_node.expanded = false;
|
||||
}
|
||||
}
|
||||
|
||||
show_active_path(node) {
|
||||
// mark node parent on active path
|
||||
$(`#${node.parent_id}`).addClass('active-path');
|
||||
}
|
||||
|
||||
load_children(node, deep=false) {
|
||||
if (!deep) {
|
||||
frappe.run_serially([
|
||||
() => this.get_child_nodes(node.id),
|
||||
(child_nodes) => this.render_child_nodes(node, child_nodes)
|
||||
]);
|
||||
} else {
|
||||
frappe.run_serially([
|
||||
() => this.setup_hierarchy(),
|
||||
() => this.render_root_nodes(true),
|
||||
() => this.get_all_nodes(node.id, node.name),
|
||||
(data_list) => this.render_children_of_all_nodes(data_list)
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
get_child_nodes(node_id) {
|
||||
return new Promise(resolve => {
|
||||
frappe.call({
|
||||
method: this.method,
|
||||
args: {
|
||||
parent: node_id,
|
||||
company: this.company
|
||||
}
|
||||
}).then(r => resolve(r.message));
|
||||
});
|
||||
}
|
||||
|
||||
render_child_nodes(node, child_nodes) {
|
||||
const last_level = this.$hierarchy.find('.level:last').index();
|
||||
const current_level = $(`#${node.id}`).parent().parent().parent().index();
|
||||
|
||||
if (last_level === current_level) {
|
||||
this.$hierarchy.append(`
|
||||
<li class="level"></li>
|
||||
`);
|
||||
}
|
||||
|
||||
if (!node.$children) {
|
||||
node.$children = $('<ul class="node-children"></ul>')
|
||||
.hide()
|
||||
.appendTo(this.$hierarchy.find('.level:last'));
|
||||
|
||||
node.$children.empty();
|
||||
|
||||
if (child_nodes) {
|
||||
$.each(child_nodes, (_i, data) => {
|
||||
this.add_node(node, data);
|
||||
setTimeout(() => {
|
||||
this.add_connector(node.id, data.id);
|
||||
}, 250);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
node.$children.show();
|
||||
$(`path[data-parent="${node.id}"]`).show();
|
||||
node.expanded = true;
|
||||
}
|
||||
|
||||
get_all_nodes(node_id, node_name) {
|
||||
return new Promise(resolve => {
|
||||
frappe.call({
|
||||
method: 'erpnext.utilities.hierarchy_chart.get_all_nodes',
|
||||
args: {
|
||||
method: this.method,
|
||||
company: this.company,
|
||||
parent: node_id,
|
||||
parent_name: node_name
|
||||
},
|
||||
callback: (r) => {
|
||||
resolve(r.message);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
render_children_of_all_nodes(data_list) {
|
||||
let entry = undefined;
|
||||
let node = undefined;
|
||||
|
||||
while (data_list.length) {
|
||||
// to avoid overlapping connectors
|
||||
entry = data_list.shift();
|
||||
node = this.nodes[entry.parent];
|
||||
if (node) {
|
||||
this.render_child_nodes_for_expanded_view(node, entry.data);
|
||||
} else {
|
||||
data_list.push(entry);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render_child_nodes_for_expanded_view(node, child_nodes) {
|
||||
node.$children = $('<ul class="node-children"></ul>');
|
||||
|
||||
const last_level = this.$hierarchy.find('.level:last').index();
|
||||
const node_level = $(`#${node.id}`).parent().parent().parent().index();
|
||||
|
||||
if (last_level === node_level) {
|
||||
this.$hierarchy.append(`
|
||||
<li class="level"></li>
|
||||
`);
|
||||
node.$children.appendTo(this.$hierarchy.find('.level:last'));
|
||||
} else {
|
||||
node.$children.appendTo(this.$hierarchy.find('.level:eq(' + (node_level + 1) + ')'));
|
||||
}
|
||||
|
||||
node.$children.hide().empty();
|
||||
|
||||
if (child_nodes) {
|
||||
$.each(child_nodes, (_i, data) => {
|
||||
this.add_node(node, data);
|
||||
setTimeout(() => {
|
||||
this.add_connector(node.id, data.id);
|
||||
}, 250);
|
||||
});
|
||||
}
|
||||
|
||||
node.$children.show();
|
||||
$(`path[data-parent="${node.id}"]`).show();
|
||||
node.expanded = true;
|
||||
}
|
||||
|
||||
add_node(node, data) {
|
||||
return new this.Node({
|
||||
id: data.id,
|
||||
parent: $('<li class="child-node"></li>').appendTo(node.$children),
|
||||
parent_id: node.id,
|
||||
image: data.image,
|
||||
name: data.name,
|
||||
title: data.title,
|
||||
expandable: data.expandable,
|
||||
connections: data.connections,
|
||||
children: undefined
|
||||
});
|
||||
}
|
||||
|
||||
add_connector(parent_id, child_id) {
|
||||
// using pure javascript for better performance
|
||||
const parent_node = document.querySelector(`#${parent_id}`);
|
||||
const child_node = document.querySelector(`#${child_id}`);
|
||||
|
||||
let path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||||
|
||||
// we need to connect right side of the parent to the left side of the child node
|
||||
const pos_parent_right = {
|
||||
x: parent_node.offsetLeft + parent_node.offsetWidth,
|
||||
y: parent_node.offsetTop + parent_node.offsetHeight / 2
|
||||
};
|
||||
const pos_child_left = {
|
||||
x: child_node.offsetLeft - 5,
|
||||
y: child_node.offsetTop + child_node.offsetHeight / 2
|
||||
};
|
||||
|
||||
const connector = this.get_connector(pos_parent_right, pos_child_left);
|
||||
|
||||
path.setAttribute('d', connector);
|
||||
this.set_path_attributes(path, parent_id, child_id);
|
||||
|
||||
document.getElementById('connectors').appendChild(path);
|
||||
}
|
||||
|
||||
get_connector(pos_parent_right, pos_child_left) {
|
||||
if (pos_parent_right.y === pos_child_left.y) {
|
||||
// don't add arcs if it's a straight line
|
||||
return "M" +
|
||||
(pos_parent_right.x) + "," + (pos_parent_right.y) + " " +
|
||||
"L"+
|
||||
(pos_child_left.x) + "," + (pos_child_left.y);
|
||||
} else {
|
||||
let arc_1 = "";
|
||||
let arc_2 = "";
|
||||
let offset = 0;
|
||||
|
||||
if (pos_parent_right.y > pos_child_left.y) {
|
||||
// if child is above parent on Y axis 1st arc is anticlocwise
|
||||
// second arc is clockwise
|
||||
arc_1 = "a10,10 1 0 0 10,-10 ";
|
||||
arc_2 = "a10,10 0 0 1 10,-10 ";
|
||||
offset = 10;
|
||||
} else {
|
||||
// if child is below parent on Y axis 1st arc is clockwise
|
||||
// second arc is anticlockwise
|
||||
arc_1 = "a10,10 0 0 1 10,10 ";
|
||||
arc_2 = "a10,10 1 0 0 10,10 ";
|
||||
offset = -10;
|
||||
}
|
||||
|
||||
return "M" + (pos_parent_right.x) + "," + (pos_parent_right.y) + " " +
|
||||
"L" +
|
||||
(pos_parent_right.x + 40) + "," + (pos_parent_right.y) + " " +
|
||||
arc_1 +
|
||||
"L" +
|
||||
(pos_parent_right.x + 50) + "," + (pos_child_left.y + offset) + " " +
|
||||
arc_2 +
|
||||
"L"+
|
||||
(pos_child_left.x) + "," + (pos_child_left.y);
|
||||
}
|
||||
}
|
||||
|
||||
set_path_attributes(path, parent_id, child_id) {
|
||||
path.setAttribute("data-parent", parent_id);
|
||||
path.setAttribute("data-child", child_id);
|
||||
const parent = $(`#${parent_id}`);
|
||||
|
||||
if (parent.hasClass('active')) {
|
||||
path.setAttribute("class", "active-connector");
|
||||
path.setAttribute("marker-start", "url(#arrowstart-active)");
|
||||
path.setAttribute("marker-end", "url(#arrowhead-active)");
|
||||
} else {
|
||||
path.setAttribute("class", "collapsed-connector");
|
||||
path.setAttribute("marker-start", "url(#arrowstart-collapsed)");
|
||||
path.setAttribute("marker-end", "url(#arrowhead-collapsed)");
|
||||
}
|
||||
}
|
||||
|
||||
set_selected_node(node) {
|
||||
// remove active class from the current node
|
||||
if (this.selected_node)
|
||||
this.selected_node.$link.removeClass('active');
|
||||
|
||||
// add active class to the newly selected node
|
||||
this.selected_node = node;
|
||||
node.$link.addClass('active');
|
||||
}
|
||||
|
||||
collapse_previous_level_nodes(node) {
|
||||
let node_parent = $(`#${node.parent_id}`);
|
||||
let previous_level_nodes = node_parent.parent().parent().children('li');
|
||||
let node_card = undefined;
|
||||
|
||||
previous_level_nodes.each(function() {
|
||||
node_card = $(this).find('.node-card');
|
||||
|
||||
if (!node_card.hasClass('active-path')) {
|
||||
node_card.addClass('collapsed');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
refresh_connectors(node_parent) {
|
||||
if (!node_parent) return;
|
||||
|
||||
$(`path[data-parent="${node_parent}"]`).remove();
|
||||
|
||||
frappe.run_serially([
|
||||
() => this.get_child_nodes(node_parent),
|
||||
(child_nodes) => {
|
||||
if (child_nodes) {
|
||||
$.each(child_nodes, (_i, data) => {
|
||||
this.add_connector(node_parent, data.id);
|
||||
});
|
||||
}
|
||||
}
|
||||
]);
|
||||
}
|
||||
|
||||
setup_node_click_action(node) {
|
||||
let me = this;
|
||||
let node_element = $(`#${node.id}`);
|
||||
|
||||
node_element.click(function() {
|
||||
const is_sibling = me.selected_node.parent_id === node.parent_id;
|
||||
|
||||
if (is_sibling) {
|
||||
me.collapse_node();
|
||||
} else if (node_element.is(':visible')
|
||||
&& (node_element.hasClass('collapsed') || node_element.hasClass('active-path'))) {
|
||||
me.remove_levels_after_node(node);
|
||||
me.remove_orphaned_connectors();
|
||||
}
|
||||
|
||||
me.expand_node(node);
|
||||
});
|
||||
}
|
||||
|
||||
setup_edit_node_action(node) {
|
||||
let node_element = $(`#${node.id}`);
|
||||
let me = this;
|
||||
|
||||
node_element.find('.btn-edit-node').click(function() {
|
||||
frappe.set_route('Form', me.doctype, node.id);
|
||||
});
|
||||
}
|
||||
|
||||
remove_levels_after_node(node) {
|
||||
let level = $(`#${node.id}`).parent().parent().parent().index();
|
||||
|
||||
level = $('.hierarchy > li:eq('+ level + ')');
|
||||
level.nextAll('li').remove();
|
||||
|
||||
let nodes = level.find('.node-card');
|
||||
let node_object = undefined;
|
||||
|
||||
$.each(nodes, (_i, element) => {
|
||||
node_object = this.nodes[element.id];
|
||||
node_object.expanded = 0;
|
||||
node_object.$children = undefined;
|
||||
});
|
||||
|
||||
nodes.removeClass('collapsed active-path');
|
||||
}
|
||||
|
||||
remove_orphaned_connectors() {
|
||||
let paths = $('#connectors > path');
|
||||
$.each(paths, (_i, path) => {
|
||||
const parent = $(path).data('parent');
|
||||
const child = $(path).data('child');
|
||||
|
||||
if ($(`#${parent}`).length && $(`#${child}`).length)
|
||||
return;
|
||||
|
||||
$(path).remove();
|
||||
});
|
||||
}
|
||||
};
|
||||
551
erpnext/public/js/hierarchy_chart/hierarchy_chart_mobile.js
Normal file
551
erpnext/public/js/hierarchy_chart/hierarchy_chart_mobile.js
Normal file
@ -0,0 +1,551 @@
|
||||
erpnext.HierarchyChartMobile = class {
|
||||
/* Options:
|
||||
- doctype
|
||||
- wrapper: wrapper for the hierarchy view
|
||||
- method:
|
||||
- to get the data for each node
|
||||
- this method should return id, name, title, image, and connections for each node
|
||||
*/
|
||||
constructor(doctype, wrapper, method) {
|
||||
this.page = wrapper.page;
|
||||
this.method = method;
|
||||
this.doctype = doctype;
|
||||
|
||||
this.page.main.css({
|
||||
'min-height': '300px',
|
||||
'max-height': '600px',
|
||||
'overflow': 'auto',
|
||||
'position': 'relative'
|
||||
});
|
||||
this.page.main.addClass('frappe-card');
|
||||
|
||||
this.nodes = {};
|
||||
this.setup_node_class();
|
||||
}
|
||||
|
||||
setup_node_class() {
|
||||
let me = this;
|
||||
this.Node = class {
|
||||
constructor({
|
||||
id, parent, parent_id, image, name, title, expandable, connections, is_root // eslint-disable-line
|
||||
}) {
|
||||
// to setup values passed via constructor
|
||||
$.extend(this, arguments[0]);
|
||||
|
||||
this.expanded = 0;
|
||||
|
||||
me.nodes[this.id] = this;
|
||||
me.make_node_element(this);
|
||||
me.setup_node_click_action(this);
|
||||
me.setup_edit_node_action(this);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
make_node_element(node) {
|
||||
let node_card = frappe.render_template('node_card', {
|
||||
id: node.id,
|
||||
name: node.name,
|
||||
title: node.title,
|
||||
image: node.image,
|
||||
parent: node.parent_id,
|
||||
connections: node.connections,
|
||||
is_mobile: true
|
||||
});
|
||||
|
||||
node.parent.append(node_card);
|
||||
node.$link = $(`#${node.id}`);
|
||||
node.$link.addClass('mobile-node');
|
||||
}
|
||||
|
||||
show() {
|
||||
frappe.breadcrumbs.add('HR');
|
||||
|
||||
let me = this;
|
||||
if ($(`[data-fieldname="company"]`).length) return;
|
||||
|
||||
let company = this.page.add_field({
|
||||
fieldtype: 'Link',
|
||||
options: 'Company',
|
||||
fieldname: 'company',
|
||||
placeholder: __('Select Company'),
|
||||
default: frappe.defaults.get_default('company'),
|
||||
only_select: true,
|
||||
reqd: 1,
|
||||
change: () => {
|
||||
me.company = undefined;
|
||||
|
||||
if (company.get_value() && me.company != company.get_value()) {
|
||||
me.company = company.get_value();
|
||||
|
||||
// svg for connectors
|
||||
me.make_svg_markers();
|
||||
|
||||
if (me.$sibling_group)
|
||||
me.$sibling_group.remove();
|
||||
|
||||
// setup sibling group wrapper
|
||||
me.$sibling_group = $(`<div class="sibling-group mt-4 mb-4"></div>`);
|
||||
me.page.main.append(me.$sibling_group);
|
||||
|
||||
me.setup_hierarchy();
|
||||
me.render_root_nodes();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
company.refresh();
|
||||
$(`[data-fieldname="company"]`).trigger('change');
|
||||
}
|
||||
|
||||
make_svg_markers() {
|
||||
$('#arrows').remove();
|
||||
|
||||
this.page.main.prepend(`
|
||||
<svg id="arrows" width="100%" height="100%">
|
||||
<defs>
|
||||
<marker id="arrowhead-active" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="6" markerHeight="6" orient="auto" fill="var(--blue-500)">
|
||||
<path d="M 0 0 L 10 5 L 0 10 z"></path>
|
||||
</marker>
|
||||
<marker id="arrowhead-collapsed" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="6" markerHeight="6" orient="auto" fill="var(--blue-300)">
|
||||
<path d="M 0 0 L 10 5 L 0 10 z"></path>
|
||||
</marker>
|
||||
|
||||
<marker id="arrowstart-active" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="8" markerHeight="8" orient="auto" fill="var(--blue-500)">
|
||||
<circle cx="4" cy="4" r="3.5" fill="white" stroke="var(--blue-500)"/>
|
||||
</marker>
|
||||
<marker id="arrowstart-collapsed" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="8" markerHeight="8" orient="auto" fill="var(--blue-300)">
|
||||
<circle cx="4" cy="4" r="3.5" fill="white" stroke="var(--blue-300)"/>
|
||||
</marker>
|
||||
</defs>
|
||||
<g id="connectors" fill="none">
|
||||
</g>
|
||||
</svg>`);
|
||||
}
|
||||
|
||||
setup_hierarchy() {
|
||||
$(`#connectors`).empty();
|
||||
if (this.$hierarchy)
|
||||
this.$hierarchy.remove();
|
||||
|
||||
if (this.$sibling_group)
|
||||
this.$sibling_group.empty();
|
||||
|
||||
this.$hierarchy = $(
|
||||
`<ul class="hierarchy-mobile">
|
||||
<li class="root-level level"></li>
|
||||
</ul>`);
|
||||
|
||||
this.page.main.append(this.$hierarchy);
|
||||
}
|
||||
|
||||
render_root_nodes() {
|
||||
let me = this;
|
||||
|
||||
frappe.call({
|
||||
method: me.method,
|
||||
args: {
|
||||
company: me.company
|
||||
},
|
||||
}).then(r => {
|
||||
if (r.message.length) {
|
||||
let root_level = me.$hierarchy.find('.root-level');
|
||||
root_level.empty();
|
||||
|
||||
$.each(r.message, (_i, data) => {
|
||||
return new me.Node({
|
||||
id: data.id,
|
||||
parent: root_level,
|
||||
parent_id: undefined,
|
||||
image: data.image,
|
||||
name: data.name,
|
||||
title: data.title,
|
||||
expandable: true,
|
||||
connections: data.connections,
|
||||
is_root: true
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
expand_node(node) {
|
||||
const is_same_node = (this.selected_node && this.selected_node.id === node.id);
|
||||
this.set_selected_node(node);
|
||||
this.show_active_path(node);
|
||||
|
||||
if (this.$sibling_group) {
|
||||
const sibling_parent = this.$sibling_group.find('.node-group').attr('data-parent');
|
||||
if (node.parent_id !== undefined && node.parent_id != sibling_parent)
|
||||
this.$sibling_group.empty();
|
||||
}
|
||||
|
||||
if (!is_same_node) {
|
||||
// since the previous/parent node collapses, all connections to that node need to be rebuilt
|
||||
// rebuild outgoing connections of parent
|
||||
this.refresh_connectors(node.parent_id, node.id);
|
||||
|
||||
// rebuild incoming connections of parent
|
||||
let grandparent = $(`#${node.parent_id}`).attr('data-parent');
|
||||
this.refresh_connectors(grandparent, node.parent_id);
|
||||
}
|
||||
|
||||
if (node.expandable && !node.expanded) {
|
||||
return this.load_children(node);
|
||||
}
|
||||
}
|
||||
|
||||
collapse_node() {
|
||||
let node = this.selected_node;
|
||||
if (node.expandable && node.$children) {
|
||||
node.$children.hide();
|
||||
node.expanded = 0;
|
||||
|
||||
// add a collapsed level to show the collapsed parent
|
||||
// and a button beside it to move to that level
|
||||
let node_parent = node.$link.parent();
|
||||
node_parent.prepend(
|
||||
`<div class="collapsed-level d-flex flex-row"></div>`
|
||||
);
|
||||
|
||||
node_parent
|
||||
.find('.collapsed-level')
|
||||
.append(node.$link);
|
||||
|
||||
frappe.run_serially([
|
||||
() => this.get_child_nodes(node.parent_id, node.id),
|
||||
(child_nodes) => this.get_node_group(child_nodes, node.parent_id),
|
||||
(node_group) => node_parent.find('.collapsed-level').append(node_group),
|
||||
() => this.setup_node_group_action()
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
show_active_path(node) {
|
||||
// mark node parent on active path
|
||||
$(`#${node.parent_id}`).addClass('active-path');
|
||||
}
|
||||
|
||||
load_children(node) {
|
||||
frappe.run_serially([
|
||||
() => this.get_child_nodes(node.id),
|
||||
(child_nodes) => this.render_child_nodes(node, child_nodes)
|
||||
]);
|
||||
}
|
||||
|
||||
get_child_nodes(node_id, exclude_node=null) {
|
||||
let me = this;
|
||||
return new Promise(resolve => {
|
||||
frappe.call({
|
||||
method: this.method,
|
||||
args: {
|
||||
parent: node_id,
|
||||
company: me.company,
|
||||
exclude_node: exclude_node
|
||||
}
|
||||
}).then(r => resolve(r.message));
|
||||
});
|
||||
}
|
||||
|
||||
render_child_nodes(node, child_nodes) {
|
||||
if (!node.$children) {
|
||||
node.$children = $('<ul class="node-children"></ul>')
|
||||
.hide()
|
||||
.appendTo(node.$link.parent());
|
||||
|
||||
node.$children.empty();
|
||||
|
||||
if (child_nodes) {
|
||||
$.each(child_nodes, (_i, data) => {
|
||||
this.add_node(node, data);
|
||||
$(`#${data.id}`).addClass('active-child');
|
||||
|
||||
setTimeout(() => {
|
||||
this.add_connector(node.id, data.id);
|
||||
}, 250);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
node.$children.show();
|
||||
node.expanded = 1;
|
||||
}
|
||||
|
||||
add_node(node, data) {
|
||||
var $li = $('<li class="child-node"></li>');
|
||||
|
||||
return new this.Node({
|
||||
id: data.id,
|
||||
parent: $li.appendTo(node.$children),
|
||||
parent_id: node.id,
|
||||
image: data.image,
|
||||
name: data.name,
|
||||
title: data.title,
|
||||
expandable: data.expandable,
|
||||
connections: data.connections,
|
||||
children: undefined
|
||||
});
|
||||
}
|
||||
|
||||
add_connector(parent_id, child_id) {
|
||||
const parent_node = document.querySelector(`#${parent_id}`);
|
||||
const child_node = document.querySelector(`#${child_id}`);
|
||||
|
||||
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||||
|
||||
let connector = undefined;
|
||||
|
||||
if ($(`#${parent_id}`).hasClass('active')) {
|
||||
connector = this.get_connector_for_active_node(parent_node, child_node);
|
||||
} else if ($(`#${parent_id}`).hasClass('active-path')) {
|
||||
connector = this.get_connector_for_collapsed_node(parent_node, child_node);
|
||||
}
|
||||
|
||||
path.setAttribute('d', connector);
|
||||
this.set_path_attributes(path, parent_id, child_id);
|
||||
|
||||
document.getElementById('connectors').appendChild(path);
|
||||
}
|
||||
|
||||
get_connector_for_active_node(parent_node, child_node) {
|
||||
// we need to connect the bottom left of the parent to the left side of the child node
|
||||
let pos_parent_bottom = {
|
||||
x: parent_node.offsetLeft + 20,
|
||||
y: parent_node.offsetTop + parent_node.offsetHeight
|
||||
};
|
||||
let pos_child_left = {
|
||||
x: child_node.offsetLeft - 5,
|
||||
y: child_node.offsetTop + child_node.offsetHeight / 2
|
||||
};
|
||||
|
||||
let connector =
|
||||
"M" +
|
||||
(pos_parent_bottom.x) + "," + (pos_parent_bottom.y) + " " +
|
||||
"L" +
|
||||
(pos_parent_bottom.x) + "," + (pos_child_left.y - 10) + " " +
|
||||
"a10,10 1 0 0 10,10 " +
|
||||
"L" +
|
||||
(pos_child_left.x) + "," + (pos_child_left.y);
|
||||
|
||||
return connector;
|
||||
}
|
||||
|
||||
get_connector_for_collapsed_node(parent_node, child_node) {
|
||||
// we need to connect the bottom left of the parent to the top left of the child node
|
||||
let pos_parent_bottom = {
|
||||
x: parent_node.offsetLeft + 20,
|
||||
y: parent_node.offsetTop + parent_node.offsetHeight
|
||||
};
|
||||
let pos_child_top = {
|
||||
x: child_node.offsetLeft + 20,
|
||||
y: child_node.offsetTop
|
||||
};
|
||||
|
||||
let connector =
|
||||
"M" +
|
||||
(pos_parent_bottom.x) + "," + (pos_parent_bottom.y) + " " +
|
||||
"L" +
|
||||
(pos_child_top.x) + "," + (pos_child_top.y);
|
||||
|
||||
return connector;
|
||||
}
|
||||
|
||||
set_path_attributes(path, parent_id, child_id) {
|
||||
path.setAttribute("data-parent", parent_id);
|
||||
path.setAttribute("data-child", child_id);
|
||||
const parent = $(`#${parent_id}`);
|
||||
|
||||
if (parent.hasClass('active')) {
|
||||
path.setAttribute("class", "active-connector");
|
||||
path.setAttribute("marker-start", "url(#arrowstart-active)");
|
||||
path.setAttribute("marker-end", "url(#arrowhead-active)");
|
||||
} else if (parent.hasClass('active-path')) {
|
||||
path.setAttribute("class", "collapsed-connector");
|
||||
}
|
||||
}
|
||||
|
||||
set_selected_node(node) {
|
||||
// remove .active class from the current node
|
||||
if (this.selected_node)
|
||||
this.selected_node.$link.removeClass('active');
|
||||
|
||||
// add active class to the newly selected node
|
||||
this.selected_node = node;
|
||||
node.$link.addClass('active');
|
||||
}
|
||||
|
||||
setup_node_click_action(node) {
|
||||
let me = this;
|
||||
let node_element = $(`#${node.id}`);
|
||||
|
||||
node_element.click(function() {
|
||||
let el = undefined;
|
||||
|
||||
if (node.is_root) {
|
||||
el = $(this).detach();
|
||||
me.$hierarchy.empty();
|
||||
$(`#connectors`).empty();
|
||||
me.add_node_to_hierarchy(el, node);
|
||||
} else if (node_element.is(':visible') && node_element.hasClass('active-path')) {
|
||||
me.remove_levels_after_node(node);
|
||||
me.remove_orphaned_connectors();
|
||||
} else {
|
||||
el = $(this).detach();
|
||||
me.add_node_to_hierarchy(el, node);
|
||||
me.collapse_node();
|
||||
}
|
||||
|
||||
me.expand_node(node);
|
||||
});
|
||||
}
|
||||
|
||||
setup_edit_node_action(node) {
|
||||
let node_element = $(`#${node.id}`);
|
||||
let me = this;
|
||||
|
||||
node_element.find('.btn-edit-node').click(function() {
|
||||
frappe.set_route('Form', me.doctype, node.id);
|
||||
});
|
||||
}
|
||||
|
||||
setup_node_group_action() {
|
||||
let me = this;
|
||||
|
||||
$('.node-group').on('click', function() {
|
||||
let parent = $(this).attr('data-parent');
|
||||
if (parent === 'undefined') {
|
||||
me.setup_hierarchy();
|
||||
me.render_root_nodes();
|
||||
} else {
|
||||
me.expand_sibling_group_node(parent);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
add_node_to_hierarchy(node_element, node) {
|
||||
this.$hierarchy.append(`<li class="level"></li>`);
|
||||
node_element.removeClass('active-child active-path');
|
||||
this.$hierarchy.find('.level:last').append(node_element);
|
||||
|
||||
let node_object = this.nodes[node.id];
|
||||
node_object.expanded = 0;
|
||||
node_object.$children = undefined;
|
||||
this.nodes[node.id] = node_object;
|
||||
}
|
||||
|
||||
get_node_group(nodes, parent, collapsed=true) {
|
||||
let limit = 2;
|
||||
const display_nodes = nodes.slice(0, limit);
|
||||
const extra_nodes = nodes.slice(limit);
|
||||
|
||||
let html = display_nodes.map(node =>
|
||||
this.get_avatar(node)
|
||||
).join('');
|
||||
|
||||
if (extra_nodes.length === 1) {
|
||||
let node = extra_nodes[0];
|
||||
html += this.get_avatar(node);
|
||||
} else if (extra_nodes.length > 1) {
|
||||
html = `
|
||||
${html}
|
||||
<span class="avatar avatar-small">
|
||||
<div class="avatar-frame standard-image avatar-extra-count"
|
||||
title="${extra_nodes.map(node => node.name).join(', ')}">
|
||||
+${extra_nodes.length}
|
||||
</div>
|
||||
</span>
|
||||
`;
|
||||
}
|
||||
|
||||
if (html) {
|
||||
const $node_group =
|
||||
$(`<div class="node-group card cursor-pointer" data-parent=${parent}>
|
||||
<div class="avatar-group right overlap">
|
||||
${html}
|
||||
</div>
|
||||
</div>`);
|
||||
|
||||
if (collapsed)
|
||||
$node_group.addClass('collapsed');
|
||||
|
||||
return $node_group;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
get_avatar(node) {
|
||||
return `<span class="avatar avatar-small" title="${node.name}">
|
||||
<span class="avatar-frame" src=${node.image} style="background-image: url(${node.image})"></span>
|
||||
</span>`;
|
||||
}
|
||||
|
||||
expand_sibling_group_node(parent) {
|
||||
let node_object = this.nodes[parent];
|
||||
let node = node_object.$link;
|
||||
|
||||
node.removeClass('active-child active-path');
|
||||
node_object.expanded = 0;
|
||||
node_object.$children = undefined;
|
||||
this.nodes[node.id] = node_object;
|
||||
|
||||
// show parent's siblings and expand parent node
|
||||
frappe.run_serially([
|
||||
() => this.get_child_nodes(node_object.parent_id, node_object.id),
|
||||
(child_nodes) => this.get_node_group(child_nodes, node_object.parent_id, false),
|
||||
(node_group) => {
|
||||
if (node_group)
|
||||
this.$sibling_group.empty().append(node_group);
|
||||
},
|
||||
() => this.setup_node_group_action(),
|
||||
() => this.reattach_and_expand_node(node, node_object)
|
||||
]);
|
||||
}
|
||||
|
||||
reattach_and_expand_node(node, node_object) {
|
||||
var el = node.detach();
|
||||
|
||||
this.$hierarchy.empty().append(`
|
||||
<li class="level"></li>
|
||||
`);
|
||||
this.$hierarchy.find('.level').append(el);
|
||||
$(`#connectors`).empty();
|
||||
this.expand_node(node_object);
|
||||
}
|
||||
|
||||
remove_levels_after_node(node) {
|
||||
let level = $(`#${node.id}`).parent().parent().index();
|
||||
|
||||
level = $('.hierarchy-mobile > li:eq('+ level + ')');
|
||||
level.nextAll('li').remove();
|
||||
|
||||
let node_object = this.nodes[node.id];
|
||||
let current_node = level.find(`#${node.id}`).detach();
|
||||
current_node.removeClass('active-child active-path');
|
||||
|
||||
node_object.expanded = 0;
|
||||
node_object.$children = undefined;
|
||||
|
||||
level.empty().append(current_node);
|
||||
}
|
||||
|
||||
remove_orphaned_connectors() {
|
||||
let paths = $('#connectors > path');
|
||||
$.each(paths, (_i, path) => {
|
||||
const parent = $(path).data('parent');
|
||||
const child = $(path).data('child');
|
||||
|
||||
if ($(`#${parent}`).length && $(`#${child}`).length)
|
||||
return;
|
||||
|
||||
$(path).remove();
|
||||
});
|
||||
}
|
||||
|
||||
refresh_connectors(node_parent, node_id) {
|
||||
if (!node_parent) return;
|
||||
|
||||
$(`path[data-parent="${node_parent}"]`).remove();
|
||||
this.add_connector(node_parent, node_id);
|
||||
}
|
||||
};
|
||||
33
erpnext/public/js/templates/node_card.html
Normal file
33
erpnext/public/js/templates/node_card.html
Normal file
@ -0,0 +1,33 @@
|
||||
<div class="node-card card cursor-pointer" id="{%= id %}" data-parent="{%= parent %}">
|
||||
<div class="node-meta d-flex flex-row">
|
||||
<div class="mr-3">
|
||||
<span class="avatar node-image" title="{{ name }}">
|
||||
<span class="avatar-frame" src={{image}} style="background-image: url(\'{%= image %}\')"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="node-name d-flex flex-row mb-1">
|
||||
<span class="ellipsis">{{ name }}</span>
|
||||
<div class="btn-xs btn-edit-node d-flex flex-row">
|
||||
<a class="node-edit-icon">{{ frappe.utils.icon("edit", "xs") }}</a>
|
||||
<span class="edit-chart-node text-xs">{{ __("Edit") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="node-info d-flex flex-row mb-1">
|
||||
<div class="node-title text-muted ellipsis">{{ title }}</div>
|
||||
|
||||
{% if is_mobile %}
|
||||
<div class="node-connections text-muted ml-2 ellipsis">
|
||||
· {{ connections }} <span class="fa fa-level-down"></span>
|
||||
</div>
|
||||
{% else %}
|
||||
{% if connections == 1 %}
|
||||
<div class="node-connections text-muted ml-2 ellipsis">· {{ connections }} Connection</div>
|
||||
{% else %}
|
||||
<div class="node-connections text-muted ml-2 ellipsis">· {{ connections }} Connections</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
308
erpnext/public/scss/hierarchy_chart.scss
Normal file
308
erpnext/public/scss/hierarchy_chart.scss
Normal file
@ -0,0 +1,308 @@
|
||||
.node-card {
|
||||
background: white;
|
||||
stroke: 1px solid var(--gray-200);
|
||||
box-shadow: var(--shadow-base);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
margin-left: 3rem;
|
||||
width: 18rem;
|
||||
overflow: hidden;
|
||||
|
||||
.btn-edit-node {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.edit-chart-node {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.node-edit-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.node-card.exported {
|
||||
box-shadow: none
|
||||
}
|
||||
|
||||
.node-image {
|
||||
width: 3.0rem;
|
||||
height: 3.0rem;
|
||||
}
|
||||
|
||||
.node-name {
|
||||
font-size: 1rem;
|
||||
line-height: 1.72;
|
||||
}
|
||||
|
||||
.node-title {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.node-info {
|
||||
width: 12.7rem;
|
||||
}
|
||||
|
||||
.node-connections {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.node-card.active {
|
||||
background: var(--blue-50);
|
||||
border: 1px solid var(--blue-500);
|
||||
box-shadow: var(--shadow-md);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
width: 18rem;
|
||||
|
||||
.btn-edit-node {
|
||||
display: flex;
|
||||
background: var(--blue-100);
|
||||
color: var(--blue-500);
|
||||
padding: .25rem .5rem;
|
||||
font-size: .75rem;
|
||||
justify-content: center;
|
||||
box-shadow: var(--shadow-sm);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.edit-chart-node {
|
||||
display: block;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.node-edit-icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.node-edit-icon > .icon{
|
||||
stroke: var(--blue-500);
|
||||
}
|
||||
|
||||
.node-name {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 2px;
|
||||
width: 12.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.node-card.active-path {
|
||||
background: var(--blue-100);
|
||||
border: 1px solid var(--blue-300);
|
||||
box-shadow: var(--shadow-sm);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
width: 15rem;
|
||||
height: 3.0rem;
|
||||
|
||||
.btn-edit-node {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.edit-chart-node {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.node-edit-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.node-info {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.node-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.node-connections {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.node-name {
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.node-image {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.node-meta {
|
||||
align-items: baseline;
|
||||
}
|
||||
}
|
||||
|
||||
.node-card.collapsed {
|
||||
background: white;
|
||||
stroke: 1px solid var(--gray-200);
|
||||
box-shadow: var(--shadow-sm);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
width: 15rem;
|
||||
height: 3.0rem;
|
||||
|
||||
.btn-edit-node {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.edit-chart-node {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.node-edit-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.node-info {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.node-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.node-connections {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.node-name {
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.node-image {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.node-meta {
|
||||
align-items: baseline;
|
||||
}
|
||||
}
|
||||
|
||||
// horizontal hierarchy tree view
|
||||
#hierarchy-chart-wrapper {
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.hierarchy {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.hierarchy li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.child-node {
|
||||
margin: 0px 0px 16px 0px;
|
||||
}
|
||||
|
||||
.level {
|
||||
margin-right: 8px;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#arrows {
|
||||
position: absolute;
|
||||
overflow: visible;
|
||||
margin-top: -80px;
|
||||
}
|
||||
|
||||
.active-connector {
|
||||
stroke: var(--blue-500);
|
||||
}
|
||||
|
||||
.collapsed-connector {
|
||||
stroke: var(--blue-300);
|
||||
}
|
||||
|
||||
// mobile
|
||||
|
||||
.hierarchy-mobile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 10px;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.hierarchy-mobile li {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.mobile-node {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.mobile-node.active-path {
|
||||
width: 12.25rem;
|
||||
}
|
||||
|
||||
.active-child {
|
||||
width: 15.5rem;
|
||||
}
|
||||
|
||||
.mobile-node .node-connections {
|
||||
max-width: 80px;
|
||||
}
|
||||
|
||||
.hierarchy-mobile .node-children {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.root-level .node-card {
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
// node group
|
||||
|
||||
.collapsed-level {
|
||||
margin-bottom: 16px;
|
||||
width: 18rem;
|
||||
}
|
||||
|
||||
.node-group {
|
||||
background: white;
|
||||
border: 1px solid var(--gray-300);
|
||||
box-shadow: var(--shadow-sm);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
width: 18rem;
|
||||
height: 3rem;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.node-group .avatar-group {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.node-group .avatar-extra-count {
|
||||
background-color: var(--blue-100);
|
||||
color: var(--blue-500);
|
||||
}
|
||||
|
||||
.node-group .avatar-frame {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.node-group.collapsed {
|
||||
width: 5rem;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.sibling-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
59
erpnext/tests/ui_test_helpers.py
Normal file
59
erpnext/tests/ui_test_helpers.py
Normal file
@ -0,0 +1,59 @@
|
||||
import frappe
|
||||
from frappe.utils import getdate
|
||||
|
||||
@frappe.whitelist()
|
||||
def create_employee_records():
|
||||
create_company()
|
||||
create_missing_designation()
|
||||
|
||||
emp1 = create_employee('Test Employee 1', 'CEO')
|
||||
emp2 = create_employee('Test Employee 2', 'CTO')
|
||||
emp3 = create_employee('Test Employee 3', 'Head of Marketing and Sales', emp1)
|
||||
emp4 = create_employee('Test Employee 4', 'Project Manager', emp2)
|
||||
emp5 = create_employee('Test Employee 5', 'Engineer', emp2)
|
||||
emp6 = create_employee('Test Employee 6', 'Analyst', emp3)
|
||||
emp7 = create_employee('Test Employee 7', 'Software Developer', emp4)
|
||||
|
||||
employees = [emp1, emp2, emp3, emp4, emp5, emp6, emp7]
|
||||
return employees
|
||||
|
||||
@frappe.whitelist()
|
||||
def get_employee_records():
|
||||
return frappe.db.get_list('Employee', filters={
|
||||
'company': 'Test Org Chart'
|
||||
}, pluck='name', order_by='name')
|
||||
|
||||
def create_company():
|
||||
company = frappe.db.exists('Company', 'Test Org Chart')
|
||||
if not company:
|
||||
company = frappe.get_doc({
|
||||
'doctype': 'Company',
|
||||
'company_name': 'Test Org Chart',
|
||||
'country': 'India',
|
||||
'default_currency': 'INR'
|
||||
}).insert().name
|
||||
|
||||
return company
|
||||
|
||||
def create_employee(first_name, designation, reports_to=None):
|
||||
employee = frappe.db.exists('Employee', {'first_name': first_name, 'designation': designation})
|
||||
if not employee:
|
||||
employee = frappe.get_doc({
|
||||
'doctype': 'Employee',
|
||||
'first_name': first_name,
|
||||
'company': 'Test Org Chart',
|
||||
'gender': 'Female',
|
||||
'date_of_birth': getdate('08-12-1998'),
|
||||
'date_of_joining': getdate('01-01-2021'),
|
||||
'designation': designation,
|
||||
'reports_to': reports_to
|
||||
}).insert().name
|
||||
|
||||
return employee
|
||||
|
||||
def create_missing_designation():
|
||||
if not frappe.db.exists('Designation', 'CTO'):
|
||||
frappe.get_doc({
|
||||
'doctype': 'Designation',
|
||||
'designation_name': 'CTO'
|
||||
}).insert()
|
||||
29
erpnext/utilities/hierarchy_chart.py
Normal file
29
erpnext/utilities/hierarchy_chart.py
Normal file
@ -0,0 +1,29 @@
|
||||
# Copyright (c) 2021, Frappe Technologies Pvt. Ltd. and Contributors
|
||||
# MIT License. See license.txt
|
||||
|
||||
from __future__ import unicode_literals
|
||||
import frappe
|
||||
from frappe import _
|
||||
|
||||
@frappe.whitelist()
|
||||
def get_all_nodes(parent, parent_name, method, company):
|
||||
'''Recursively gets all data from nodes'''
|
||||
method = frappe.get_attr(method)
|
||||
|
||||
if method not in frappe.whitelisted:
|
||||
frappe.throw(_('Not Permitted'), frappe.PermissionError)
|
||||
|
||||
data = method(parent, company)
|
||||
result = [dict(parent=parent, parent_name=parent_name, data=data)]
|
||||
|
||||
nodes_to_expand = [{'id': d.get('id'), 'name': d.get('name')} for d in data if d.get('expandable')]
|
||||
|
||||
while nodes_to_expand:
|
||||
parent = nodes_to_expand.pop(0)
|
||||
data = method(parent.get('id'), company)
|
||||
result.append(dict(parent=parent.get('id'), parent_name=parent.get('name'), data=data))
|
||||
for d in data:
|
||||
if d.get('expandable'):
|
||||
nodes_to_expand.append({'id': d.get('id'), 'name': d.get('name')})
|
||||
|
||||
return result
|
||||
@ -15,7 +15,8 @@
|
||||
"snyk": "^1.518.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"onscan.js": "^1.5.2"
|
||||
"onscan.js": "^1.5.2",
|
||||
"html2canvas": "^1.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
"snyk-protect": "snyk protect",
|
||||
|
||||
19
yarn.lock
19
yarn.lock
@ -688,6 +688,11 @@ balanced-match@^1.0.0:
|
||||
resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
|
||||
integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
|
||||
|
||||
base64-arraybuffer@^0.2.0:
|
||||
version "0.2.0"
|
||||
resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz#4b944fac0191aa5907afe2d8c999ccc57ce80f45"
|
||||
integrity sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ==
|
||||
|
||||
base64-js@^1.3.1:
|
||||
version "1.5.1"
|
||||
resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
|
||||
@ -997,6 +1002,13 @@ crypto-random-string@^2.0.0:
|
||||
resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
|
||||
integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
|
||||
|
||||
css-line-break@1.1.1:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/css-line-break/-/css-line-break-1.1.1.tgz#d5e9bdd297840099eb0503c7310fd34927a026ef"
|
||||
integrity sha512-1feNVaM4Fyzdj4mKPIQNL2n70MmuYzAXZ1aytlROFX1JsOo070OsugwGjj7nl6jnDJWHDM8zRZswkmeYVWZJQA==
|
||||
dependencies:
|
||||
base64-arraybuffer "^0.2.0"
|
||||
|
||||
debug@^3.1.0, debug@^3.2.6:
|
||||
version "3.2.6"
|
||||
resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
|
||||
@ -1472,6 +1484,13 @@ hosted-git-info@^3.0.4, hosted-git-info@^3.0.7:
|
||||
dependencies:
|
||||
lru-cache "^6.0.0"
|
||||
|
||||
html2canvas@^1.1.4:
|
||||
version "1.1.4"
|
||||
resolved "https://registry.yarnpkg.com/html2canvas/-/html2canvas-1.1.4.tgz#53ae91cd26e9e9e623c56533cccb2e3f57c8124c"
|
||||
integrity sha512-uHgQDwrXsRmFdnlOVFvHin9R7mdjjZvoBoXxicPR+NnucngkaLa5zIDW9fzMkiip0jSffyTyWedE8iVogYOeWg==
|
||||
dependencies:
|
||||
css-line-break "1.1.1"
|
||||
|
||||
http-cache-semantics@^4.0.0:
|
||||
version "4.1.0"
|
||||
resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz#49e91c5cbf36c9b94bcfcd71c23d5249ec74e390"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user