Browse Source

Dec 07: [ADD] Initial commit 'hierarchical_chart_widget'

pull/309/head
Cybrosys Technologies 5 months ago
parent
commit
a5ce3c2062
  1. 50
      hierarchical_chart_widget/README.rst
  2. 22
      hierarchical_chart_widget/__init__.py
  3. 61
      hierarchical_chart_widget/__manifest__.py
  4. 7
      hierarchical_chart_widget/doc/RELEASE_NOTES.md
  5. 22
      hierarchical_chart_widget/models/__init__.py
  6. 71
      hierarchical_chart_widget/models/hr_department.py
  7. BIN
      hierarchical_chart_widget/static/description/assets/icons/check.png
  8. BIN
      hierarchical_chart_widget/static/description/assets/icons/chevron.png
  9. BIN
      hierarchical_chart_widget/static/description/assets/icons/cogs.png
  10. BIN
      hierarchical_chart_widget/static/description/assets/icons/consultation.png
  11. BIN
      hierarchical_chart_widget/static/description/assets/icons/ecom-black.png
  12. BIN
      hierarchical_chart_widget/static/description/assets/icons/education-black.png
  13. BIN
      hierarchical_chart_widget/static/description/assets/icons/hotel-black.png
  14. BIN
      hierarchical_chart_widget/static/description/assets/icons/license.png
  15. BIN
      hierarchical_chart_widget/static/description/assets/icons/lifebuoy.png
  16. BIN
      hierarchical_chart_widget/static/description/assets/icons/manufacturing-black.png
  17. BIN
      hierarchical_chart_widget/static/description/assets/icons/pos-black.png
  18. BIN
      hierarchical_chart_widget/static/description/assets/icons/puzzle.png
  19. BIN
      hierarchical_chart_widget/static/description/assets/icons/restaurant-black.png
  20. BIN
      hierarchical_chart_widget/static/description/assets/icons/service-black.png
  21. BIN
      hierarchical_chart_widget/static/description/assets/icons/trading-black.png
  22. BIN
      hierarchical_chart_widget/static/description/assets/icons/training.png
  23. BIN
      hierarchical_chart_widget/static/description/assets/icons/update.png
  24. BIN
      hierarchical_chart_widget/static/description/assets/icons/user.png
  25. BIN
      hierarchical_chart_widget/static/description/assets/icons/wrench.png
  26. BIN
      hierarchical_chart_widget/static/description/assets/misc/Cybrosys R.png
  27. BIN
      hierarchical_chart_widget/static/description/assets/misc/categories.png
  28. BIN
      hierarchical_chart_widget/static/description/assets/misc/check-box.png
  29. BIN
      hierarchical_chart_widget/static/description/assets/misc/compass.png
  30. BIN
      hierarchical_chart_widget/static/description/assets/misc/corporate.png
  31. BIN
      hierarchical_chart_widget/static/description/assets/misc/customer-support.png
  32. BIN
      hierarchical_chart_widget/static/description/assets/misc/cybrosys-logo.png
  33. BIN
      hierarchical_chart_widget/static/description/assets/misc/features.png
  34. BIN
      hierarchical_chart_widget/static/description/assets/misc/logo.png
  35. BIN
      hierarchical_chart_widget/static/description/assets/misc/pictures.png
  36. BIN
      hierarchical_chart_widget/static/description/assets/misc/pie-chart.png
  37. BIN
      hierarchical_chart_widget/static/description/assets/misc/right-arrow.png
  38. BIN
      hierarchical_chart_widget/static/description/assets/misc/star.png
  39. BIN
      hierarchical_chart_widget/static/description/assets/misc/support.png
  40. BIN
      hierarchical_chart_widget/static/description/assets/misc/whatsapp.png
  41. BIN
      hierarchical_chart_widget/static/description/assets/modules/1banner.jpg
  42. BIN
      hierarchical_chart_widget/static/description/assets/modules/2banner.jpg
  43. BIN
      hierarchical_chart_widget/static/description/assets/modules/3banner.png
  44. BIN
      hierarchical_chart_widget/static/description/assets/modules/44banner.png
  45. BIN
      hierarchical_chart_widget/static/description/assets/modules/5banner.jpg
  46. BIN
      hierarchical_chart_widget/static/description/assets/modules/banner.jpg
  47. BIN
      hierarchical_chart_widget/static/description/assets/screenshots/hero.gif
  48. BIN
      hierarchical_chart_widget/static/description/assets/screenshots/hier-0.png
  49. BIN
      hierarchical_chart_widget/static/description/assets/screenshots/hier1.png
  50. BIN
      hierarchical_chart_widget/static/description/assets/screenshots/hier44.png
  51. BIN
      hierarchical_chart_widget/static/description/banner.jpg
  52. BIN
      hierarchical_chart_widget/static/description/icon.png
  53. 668
      hierarchical_chart_widget/static/description/index.html
  54. 59
      hierarchical_chart_widget/static/src/js/org_chart.js
  55. 19
      hierarchical_chart_widget/static/src/scss/org_template_style.scss
  56. 57
      hierarchical_chart_widget/static/src/xml/org_chart_template.xml
  57. 32
      hierarchical_chart_widget/views/hr_department_views.xml

50
hierarchical_chart_widget/README.rst

@ -0,0 +1,50 @@
.. image:: https://img.shields.io/badge/license-LGPL--3-green.svg
:target: https://www.gnu.org/licenses/lgpl-3.0-standalone.html
:alt: License: LGPL-3
Hierarchical Chart Widget
=========================
* This module ensure smart management of Department with the widget view
Configuration
============
- www.odoo.com/documentation/17.0/setup/install.html
- Install our custom addon
Company
-------
* `Cybrosys Techno Solutions <https://cybrosys.com/>`__
License
-------
General Public License, Version 3 (LGPL v3).
(https://www.gnu.org/licenses/lgpl-3.0-standalone.html)
Credits
-------
* Developer: (V17) Dhanya B, odoo@cybrosys.com
Contacts
--------
* Mail Contact : odoo@cybrosys.com
* Website : https://cybrosys.com
Bug Tracker
-----------
Bugs are tracked on GitHub Issues. In case of trouble, please check there if your issue has already been reported.
Maintainer
--------
This module is maintained by Cybrosys Technologies.
For support and more information, please visit https://www.cybrosys.com
.. image:: https://cybrosys.com/images/logo.png
:target: https://cybrosys.com"
Further Information
-----------
HTML Description: `<static/description/index.html>`__

22
hierarchical_chart_widget/__init__.py

@ -0,0 +1,22 @@
# -*- coding: utf-8 -*-
#############################################################################
#
# Cybrosys Technologies Pvt. Ltd.
#
# Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
# Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
#
# You can modify it under the terms of the GNU LESSER
# GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
#
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
# GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
#
# You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
# (LGPL v3) along with this program.
# If not, see <http://www.gnu.org/licenses/>.
#
#############################################################################
from . import models

61
hierarchical_chart_widget/__manifest__.py

@ -0,0 +1,61 @@
# -*- coding: utf-8 -*-
#############################################################################
#
# Cybrosys Technologies Pvt. Ltd.
#
# Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
# Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
#
# You can modify it under the terms of the GNU LESSER
# GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
#
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
# GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
#
# You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
# (LGPL v3) along with this program.
# If not, see <http://www.gnu.org/licenses/>.
#
#############################################################################
{
'name': 'Hierarchical Chart Widget',
'version': '17.0.1.0.0',
'category': 'Productivity',
'summary': 'Organization Chart Widget that displays parent and child'
' relationships',
'description': 'The user is looking for an Organization Chart Widget'
'that displays both parent and child relationships within'
' an organizations structure.',
'author': 'Cybrosys Techno Solutions',
'company': 'Cybrosys Techno Solutions',
'maintainer': 'Cybrosys Techno Solutions',
'website': 'https://www.cybrosys.com',
'depends': ['hr'],
'data': [
'views/hr_department_views.xml'
],
"assets":
{
"web.assets_backend": [
'/hierarchical_chart_widget/static/src/js/org_chart.js',
'/hierarchical_chart_widget/static/src/xml/org_chart_template.xml',
'/hierarchical_chart_widget/static/src/scss/org_template_style.scss',
],
"web.assets_frontend": [
'/hierarchical_chart_widget/static/src/scss/org_template_style.scss',
]
},
'images': [
'static/description/banner.png',
'static/description/icon.png'
],
'license': 'LGPL-3',
'images': [
'static/description/banner.jpg',
],
'installable': True,
'auto_install': False,
'application': False,
}

7
hierarchical_chart_widget/doc/RELEASE_NOTES.md

@ -0,0 +1,7 @@
## Module <hierarchical_chart_widget>
#### 11.11.2024
#### Version 17.0.1.0.0
#### ADD
- Initial Commit Hierarchical Chart Widget

22
hierarchical_chart_widget/models/__init__.py

@ -0,0 +1,22 @@
# -*- coding: utf-8 -*-
#############################################################################
#
# Cybrosys Technologies Pvt. Ltd.
#
# Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
# Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
#
# You can modify it under the terms of the GNU LESSER
# GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
#
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
# GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
#
# You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
# (LGPL v3) along with this program.
# If not, see <http://www.gnu.org/licenses/>.
#
#############################################################################
from . import hr_department

71
hierarchical_chart_widget/models/hr_department.py

@ -0,0 +1,71 @@
# -*- coding: utf-8 -*-
#############################################################################
#
# Cybrosys Technologies Pvt. Ltd.
#
# Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
# Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
#
# You can modify it under the terms of the GNU LESSER
# GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
#
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
# GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
#
# You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
# (LGPL v3) along with this program.
# If not, see <http://www.gnu.org/licenses/>.
#
#############################################################################
from odoo import api, fields, models
class HrDepartment(models.Model):
"""This model is used for storing a field in contacts"""
_inherit = 'hr.department'
child_org_ids = fields.One2many('hr.department',
'master_department_id',
help='Department Lines')
is_parent_child = fields.Boolean(string='Is parent ',
help='Check this if the record represents'
' a parent.'
)
@api.model
def get_child_dept(self, department_id, model):
"""Fetching the datas to widget"""
model_id = self.env['ir.model'].search([('model', '=', model)])
department_id = self.env[model_id.model].browse(department_id)
parent_id = department_id.parent_id
child_data = [{'name': child.name, 'id': child.id} for child in
department_id.child_ids]
result = {
'parent': {
'name': parent_id.name,
'id': parent_id.id
} if parent_id else None,
'self': department_id.name,
'child': child_data
}
return result
@api.model_create_multi
def create(self, vals_list):
"""To show the widget at the time of creation"""
res = super(HrDepartment, self).create(vals_list)
for record in res:
if record.parent_id or record.child_ids:
record.is_parent_child = True
else:
record.is_parent_child = False
return res
def write(self, values):
"""To update the widget at the time of update"""
res = super(HrDepartment, self).write(values)
if 'parent_id' in values:
self.is_parent_child = True
return res

BIN
hierarchical_chart_widget/static/description/assets/icons/check.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
hierarchical_chart_widget/static/description/assets/icons/chevron.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 310 B

BIN
hierarchical_chart_widget/static/description/assets/icons/cogs.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
hierarchical_chart_widget/static/description/assets/icons/consultation.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
hierarchical_chart_widget/static/description/assets/icons/ecom-black.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 576 B

BIN
hierarchical_chart_widget/static/description/assets/icons/education-black.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 733 B

BIN
hierarchical_chart_widget/static/description/assets/icons/hotel-black.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 911 B

BIN
hierarchical_chart_widget/static/description/assets/icons/license.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
hierarchical_chart_widget/static/description/assets/icons/lifebuoy.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
hierarchical_chart_widget/static/description/assets/icons/manufacturing-black.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 673 B

BIN
hierarchical_chart_widget/static/description/assets/icons/pos-black.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 878 B

BIN
hierarchical_chart_widget/static/description/assets/icons/puzzle.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 653 B

BIN
hierarchical_chart_widget/static/description/assets/icons/restaurant-black.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 905 B

BIN
hierarchical_chart_widget/static/description/assets/icons/service-black.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 839 B

BIN
hierarchical_chart_widget/static/description/assets/icons/trading-black.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 427 B

BIN
hierarchical_chart_widget/static/description/assets/icons/training.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 627 B

BIN
hierarchical_chart_widget/static/description/assets/icons/update.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
hierarchical_chart_widget/static/description/assets/icons/user.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 988 B

BIN
hierarchical_chart_widget/static/description/assets/icons/wrench.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
hierarchical_chart_widget/static/description/assets/misc/Cybrosys R.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB

BIN
hierarchical_chart_widget/static/description/assets/misc/categories.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
hierarchical_chart_widget/static/description/assets/misc/check-box.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
hierarchical_chart_widget/static/description/assets/misc/compass.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
hierarchical_chart_widget/static/description/assets/misc/corporate.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
hierarchical_chart_widget/static/description/assets/misc/customer-support.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
hierarchical_chart_widget/static/description/assets/misc/cybrosys-logo.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
hierarchical_chart_widget/static/description/assets/misc/features.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 589 B

BIN
hierarchical_chart_widget/static/description/assets/misc/logo.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
hierarchical_chart_widget/static/description/assets/misc/pictures.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
hierarchical_chart_widget/static/description/assets/misc/pie-chart.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
hierarchical_chart_widget/static/description/assets/misc/right-arrow.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 967 B

BIN
hierarchical_chart_widget/static/description/assets/misc/star.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
hierarchical_chart_widget/static/description/assets/misc/support.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
hierarchical_chart_widget/static/description/assets/misc/whatsapp.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
hierarchical_chart_widget/static/description/assets/modules/1banner.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 95 KiB

BIN
hierarchical_chart_widget/static/description/assets/modules/2banner.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 118 KiB

BIN
hierarchical_chart_widget/static/description/assets/modules/3banner.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

BIN
hierarchical_chart_widget/static/description/assets/modules/44banner.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 108 KiB

BIN
hierarchical_chart_widget/static/description/assets/modules/5banner.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 83 KiB

BIN
hierarchical_chart_widget/static/description/assets/modules/banner.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 87 KiB

BIN
hierarchical_chart_widget/static/description/assets/screenshots/hero.gif

Binary file not shown.

After

Width:  |  Height:  |  Size: 71 KiB

BIN
hierarchical_chart_widget/static/description/assets/screenshots/hier-0.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

BIN
hierarchical_chart_widget/static/description/assets/screenshots/hier1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 65 KiB

BIN
hierarchical_chart_widget/static/description/assets/screenshots/hier44.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

BIN
hierarchical_chart_widget/static/description/banner.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 87 KiB

BIN
hierarchical_chart_widget/static/description/icon.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.7 KiB

668
hierarchical_chart_widget/static/description/index.html

@ -0,0 +1,668 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Odoo App 3 Index</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
rel="stylesheet">
</head>
<body>
<section>
<div class="container"
style="font-family: 'Inter', sans-serif !important;background-color: #fff !important;">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 d-flex justify-content-between flex-wrap align-items-sm-center"
style="border-bottom:1px solid rgba(0, 0, 0, 0.22)">
<div class="my-3">
<img src="assets/misc/Cybrosys R.png"
style="width:auto !important; height:40px !important">
</div>
<div class="my-3 d-flex align-items-center">
<div class="text-center"
style="background-color:#017E84 !important;font-size: 0.8rem !important; color:#fff !important; font-weight:500 !important; padding:4px !important; margin:0 3px !important; border-radius:50px !important; min-width: 120px !important;">
Community
</div>
<div class="text-center"
style="background-color:#875A7B !important; color:#fff !important;font-size: 0.8rem !important; font-weight:500 !important; padding:4px !important; margin:0 3px !important; border-radius:50px !important;min-width: 120px !important;">
Enterprise
</div>
<div class="text-center"
style="background-color:#7C7BAD !important; color:#fff !important;font-size: 0.8rem !important; font-weight:500 !important; padding:4px !important; margin:0 3px !important; border-radius:50px !important; min-width: 120px !important;">
Odoo.sh
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 text-center d-flex align-items-center flex-column"
style="margin: 80px 0px !important;">
<h1 style="font-size: 2.8rem;font-weight: 700; color:
#1A202C;">
Hierarchical Chart Widget</h1>
<p class="my-3 mb-4"
style="max-width: 80%; font-weight: 400 !important; line-height: 32px; color: #718096;"> Hierarchical
display of Parent/Child Model
</p>
<div style="width: 80%; margin-top: 3rem;">
<img src="assets/screenshots/hero.gif"
class="img-responsive" width="100%" height="auto">
</div>
</div>
</div>
<div class="container mt-5 mb-5">
<div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mt-4">
<p class="m-0"
style="font-weight: 600; font-size: 24px; color:#714b67 !important">
Key Highlights
</p>
</div>
<div class="row py-4">
<div class="col-md-6 col-sm-12 p-3">
<div class="d-flex h-100" style="padding: 30px;border-radius: 12px;
background: #FFF;
box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.25); ">
<div style="width: 36px; height: 36px; border-radius: 50%; background: #714B67;
display: flex; justify-content: center; align-items: center;
margin-right: 10px; flex-shrink: 0;">
<i class="fa-solid fa-star "
style="color: #fff;font-size:14px;"></i>
</div>
<div>
<p style="color: #1A202C;font-weight: 600;
font-size: 1.2rem; margin-bottom: 2px;">
Better and simpler view of the model's child/parents.</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 p-3">
<div class="d-flex h-100" style="padding: 30px;border-radius: 12px;
background: #FFF;
box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.25); ">
<div style="width: 36px; height: 36px; border-radius: 50%; background: #714B67;
display: flex; justify-content: center; align-items: center;
margin-right: 10px; flex-shrink: 0;">
<i class="fa-solid fa-star "
style="color: #fff;font-size:14px;"></i>
</div>
<div>
<p style="color: #1A202C;font-weight: 600;
font-size: 1.2rem; margin-bottom: 2px;">
Traverse into Parent node and Child node</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 p-3">
<div class="d-flex h-100" style="padding: 30px;border-radius: 12px;
background: #FFF;
box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.25); ">
<div style="width: 36px; height: 36px; border-radius: 50%; background: #714B67;
display: flex; justify-content: center; align-items: center;
margin-right: 10px; flex-shrink: 0;">
<i class="fa-solid fa-star "
style="color: #fff;font-size:14px;"></i>
</div>
<div>
<p style="color: #1A202C;font-weight: 600;
font-size: 1.2rem; margin-bottom: 2px;">
Ability to view model's parent/child by their relations in a form of hierarchy
chart.</p>
</div>
</div>
</div>
</div>
</div>
<div class="container rounded">
<ul class="nav nav-tabs d-flex"
style="width: fit-content;margin: 0 auto;gap: 1rem;">
<li class="col text-center py-2 text-nowrap "
style="color: #fff; background-color: #714B67;border-radius: 6px 6px 0px 0px;">
<a
class="active show" data-toggle="tab" href="#tab1"
style="color: #fff;font-weight: 500; background-color: #714B67; text-decoration: none;">
<i class="fa-regular fa-image pr-2"
style="color: #fff;"></i>
Screenshots</a></li>
<li class="col text-center py-2 text-nowrap "
style="color: #fff; background-color: #714B67;border-radius: 6px 6px 0px 0px;">
<a
data-toggle="tab" href="#tab2"
style="color: #fff;font-weight: 500; text-decoration: none;"><i
class="fa-solid fa-star pr-2"
style="color: #fff;"></i>Features</a></li>
<li class="col text-center py-2 text-nowrap "
style="color: #fff; background-color: #714B67;border-radius: 6px 6px 0px 0px;">
<a
data-toggle="tab" href="#tab3"
style="color: #fff;font-weight: 500; text-decoration: none; background-color: #714B67;"><i
class="fa-solid fa-book-open pr-2"
style="color: #fff;"></i>Released Notes</a></li>
</ul>
<div class="tab-content"
style="background-color: rgba(121, 113, 119, 0.04);">
<div id="tab1" class="tab-pane fade in active show">
<div class="col-lg-12 py-2"
style="padding: 1rem 4rem !important;">
<div
style="border: 1px solid #d8d6d6; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
<div class="row justify-content-center p-3 w-100 m-0">
<img src="assets/screenshots/hier-0.png"
class="img-responsive" width="100%"
height="auto">
</div>
<div class="px-3">
<p>When we choose parent for the department, We can see the hierarchical view of the
Department.
</p>
</div>
</div>
</div>
<div class="col-lg-12 py-2"
style="padding: 1rem 4rem !important;">
<div
style="border: 1px solid #d8d6d6; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
<div class="row justify-content-center p-3 w-100 m-0">
<img src="assets/screenshots/hier1.png"
class="img-responsive" width="100%"
height="auto">
</div>
<div class="px-3">
<p>We can navigate through the nodes to reach the respective page.</p>
</div>
</div>
</div>
<div class="col-lg-12 py-2"
style="padding: 1rem 4rem !important;">
<div
style="border: 1px solid #d8d6d6; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
<div class="row justify-content-center p-3 w-100 m-0">
<img src="assets/screenshots/hier44.png"
class="img-responsive" width="100%"
height="auto">
</div>
<div class="px-3">
<p>Based on parent department we can see the respective hierarchy of the department.
</p>
</div>
</div>
</div>
</div>
<div id="tab2" class="tab-pane fade">
<div class="col-mg-12" style="padding: 1rem 4rem;">
<ul style="list-style: none; padding: 1rem 0;font-weight: 500;">
<li class="py-3"
style="font-weight: 500;background-color: #fff; border-radius: 4px; padding: 1rem; margin-bottom: 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
<span style="margin-right: 12px;"><img
src="assets/misc/star (1) 2.svg"
alt=""
width="16px"></span>Ability to view model's parent/child by their relations
in a form of hierarchy chart.
</li>
<li class="py-3"
style="font-weight: 500;background-color: #fff; border-radius: 4px; padding: 1rem; margin-bottom: 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
<span style="margin-right: 12px;"><img
src="assets/misc/star (1) 2.svg"
alt=""
width="16px"></span>Traverse into Parent node and Child node
</li>
</ul>
</div>
</div>
<div id="tab3" class="tab-pane fade">
<div class="col-mg-12 active" style="padding: 1rem 4rem;">
<div class="py-3"
style="font-weight: 500;background-color: #fff; border-radius: 4px; padding: 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
<div class="d-flex mb-3"
style="font-size: 0.8rem; font-weight: 500;"><span>Version
17.0.1.0.0</span><span
class="px-2">|</span><span
style="color: #714B67;font-weight: 600;">Released on:28th November 2023</span>
</div>
<p class="m-0"
style=" color:#718096!important; font-size:1rem !important;line-height: 28px;">
Initial Commit for Hierarchical Chart Widget.</p>
</div>
</div>
</div>
</div>
</div>
<div class="container mt-5">
<div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mt-5">
<p class="m-0"
style="font-weight: 600; font-size: 24px; color:#000 !important">
Related Products</p>
</div>
</div>
<div id="myCarousel" class="carousel slide py-3" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row p-4">
<div class="col">
<div class="p-3">
<a href="https://apps.odoo.com/apps/modules/17.0/odoo_dynamic_dashboard"
style="color: #000; text-decoration: none;">
<div style="border:1px solid #CBCBCB !important;border-radius: 4px;">
<div style="width: 300px; ">
<img src="assets/modules/banner.jpg"
alt="" width="100%"
height="auto">
</div>
</div>
</a>
</div>
</div>
<div class="col">
<div class="p-3">
<a href="https://apps.odoo.com/apps/modules/17.0/advanced_dynamic_dashboard"
style="color: #000; text-decoration: none;">
<div style="border:1px solid #CBCBCB !important;border-radius: 4px;">
<div style="width: 300px; ">
<img src="assets/modules/1banner.jpg"
alt="" width="100%"
height="auto">
</div>
</div>
</a>
</div>
</div>
<div class="col">
<div class="p-3">
<a href="https://apps.odoo.com/apps/modules/17.0/statement_report"
style="color: #000; text-decoration: none;">
<div style="border:1px solid #CBCBCB !important;border-radius: 4px;">
<div style="width: 300px; ">
<img src="assets/modules/44banner.png"
alt="" width="100%"
height="auto">
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row p-4">
<div class="col">
<div class="p-3">
<a href="https://apps.odoo.com/apps/modules/17.0/model_access_rights"
style="color: #000; text-decoration: none;">
<div style="border:1px solid #CBCBCB !important;border-radius: 4px;">
<div style="width: 300px; ">
<img src="assets/modules/2banner.jpg"
alt="" width="100%"
height="auto">
</div>
</div>
</a>
</div>
</div>
<div class="col">
<div class="p-3">
<a href="https://apps.odoo.com/apps/modules/17.0/inventory_report_generator"
style="color: #000; text-decoration: none;">
<div style="border:1px solid #CBCBCB !important;border-radius: 4px;">
<div style="width: 300px;">
<img src="assets/modules/3banner.png"
alt="" width="100%"
height="auto">
</div>
</div>
</a>
</div>
</div>
<div class="col">
<div class="p-3">
<a href="https://apps.odoo.com/apps/modules/17.0/product_profit_report"
style="color: #000; text-decoration: none;">
<div style="border:1px solid #CBCBCB !important;border-radius: 4px;">
<div style="width: 300px;">
<img src="assets/modules/5banner.jpg"
alt="" width="100%"
height="auto">
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel"
data-slide="prev" style="width: 35px; color: #000;">
<span class="carousel-control-prev-icon">
<i class="fa fa-chevron-left"
style="font-size: 24px;"></i>
</span>
</a>
<a class="carousel-control-next" href="#myCarousel"
data-slide="next" style="width: 35px; color: #000;">
<span class="carousel-control-next-icon">
<i class="fa fa-chevron-right"
style="font-size: 24px;"></i>
</span>
</a>
</div>
<div class="container mt-5">
<div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mt-4">
<p class="m-0"
style="font-weight: 600; font-size: 24px; color:#000 !important">
Our Services</p>
</div>
</div>
<div class="container my-5">
<div class="row py-3">
<div class="col-md-4 col-sm-6 px-4 py-4">
<div
style="background-color: #fff; padding: 25px; text-align: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative;border-radius: 4px;">
<div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
<div style="background-color:#13EA36 ; border-radius: 50%; padding: 15px; width: 68px;
height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
<img src="assets/icons/cogs.png"
alt="service-icon" width="38px"
height="auto">
</div>
</div>
<p style="margin-top: 20px; font-weight: bold;">Odoo
Customization</p>
</div>
</div>
<div class="col-md-4 col-sm-6 px-4 py-4">
<div
style="background-color: #fff; padding: 25px; text-align: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative;border-radius: 4px;">
<div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
<div style="background-color:#DBC711; border-radius: 50%; padding: 15px; width: 68px;
height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
<img src="assets/icons/wrench.png"
alt="service-icon" width="38px"
height="auto">
</div>
</div>
<p style="margin-top: 20px; font-weight: bold;">Odoo
Implementation</p>
</div>
</div>
<div class="col-md-4 col-sm-6 px-4 py-4">
<div
style="background-color: #fff; padding: 25px; text-align: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative; border-radius: 4px;">
<div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
<div style="background-color:#FF6B6B ; border-radius: 50%; padding: 15px; width: 68px;
height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
<img src="assets/icons/lifebuoy.png"
alt="service-icon" width="38px"
height="auto">
</div>
</div>
<p style="margin-top: 20px; font-weight: bold;">Odoo
Support</p>
</div>
</div>
<div class="col-md-4 col-sm-6 px-4 py-4">
<div
style="background-color: #fff; padding: 25px; text-align: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative; border-radius: 4px;">
<div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
<div style="background-color:#FFA801 ; border-radius: 50%; padding: 15px; width: 68px;
height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
<img src="assets/icons/user.png"
alt="service-icon" width="38px"
height="auto">
</div>
</div>
<p style="margin-top: 20px; font-weight: bold;">Hire
Odoo Developer</p>
</div>
</div>
<div class="col-md-4 col-sm-6 px-4 py-4">
<div
style="background-color: #fff; padding: 25px; text-align: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative; border-radius: 4px;">
<div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
<div style="background-color:#54A0FF; border-radius: 50%; padding: 15px; width: 68px;
height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
<img src="assets/icons/puzzle.png"
alt="service-icon" width="38px"
height="auto">
</div>
</div>
<p style="margin-top: 20px; font-weight: bold;">Odoo
Integration</p>
</div>
</div>
<div class="col-md-4 col-sm-6 px-4 py-4">
<div
style="background-color: #fff; padding: 25px; text-align: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative;border-radius: 4px;">
<div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
<div style="background-color:#6D7680 ; border-radius: 50%; padding: 15px; width: 68px;
height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
<img src="assets/icons/update.png"
alt="service-icon" width="38px"
height="auto">
</div>
</div>
<p style="margin-top: 20px; font-weight: bold;">Odoo
Migration</p>
</div>
</div>
<div class="col-md-4 col-sm-6 px-4 py-4">
<div
style="background-color: #fff; padding: 25px; text-align: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative;border-radius: 4px;">
<div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
<div style="background-color:#786FA6 ; border-radius: 50%; padding: 15px; width: 68px;
height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
<img src="assets/icons/consultation.png"
alt="service-icon" width="38px"
height="auto">
</div>
</div>
<p style="margin-top: 20px; font-weight: bold;">Odoo
Consultancy</p>
</div>
</div>
<div class="col-md-4 col-sm-6 px-4 py-4">
<div
style="background-color: #fff; padding: 25px; text-align: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;position: relative;border-radius: 4px;">
<div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
<div style="background-color:#F8A5C2 ; border-radius: 50%; padding: 15px; width: 68px;
height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
<img src="assets/icons/training.png"
alt="service-icon" width="38px"
height="auto">
</div>
</div>
<p style="margin-top: 20px; font-weight: bold;">Odoo
Implementation</p>
</div>
</div>
<div class="col-md-4 col-sm-6 px-4 py-4">
<div
style="background-color: #fff; padding: 25px; text-align: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative;border-radius: 4px;">
<div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
<div style="background-color:#E6BE26; border-radius: 50%; padding: 15px; width: 68px;
height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
<img src="assets/icons/license.png"
alt="service-icon" width="38px"
height="auto">
</div>
</div>
<p style="margin-top: 20px; font-weight: bold;">Odoo
Licensing Consultancy</p>
</div>
</div>
</div>
</div>
<div class="container mt-5">
<div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mt-4">
<p class="m-0"
style="font-weight: 600; font-size: 24px; color:#000 !important">
Our Industries</p>
</div>
</div>
<div class="container">
<div class="row my-5 py-4">
<div class="col-md-3 col-sm-6 p-0">
<div class="d-flex flex-column h-100 "
style="border-right: 1px solid rgb(209, 209, 209); border-bottom: 1px solid rgb(209, 209, 209); padding: 30px; box-shadow: 6px 0 10px rgba(228, 227, 227, 0.373);">
<img src="assets/icons/trading-black.png" width="42px"
height="auto" alt="">
<p style="color: #714B67;font-weight: 600; margin-top: 10px;
font-size: 1.2rem; margin-bottom: 2px;">Trading</p>
<p>Easily procure and sell your products</p>
</div>
</div>
<div class="col-md-3 col-sm-6 p-0">
<div class="d-flex flex-column h-100"
style="border-right: 1px solid rgb(209, 209, 209);border-bottom: 1px solid rgb(209, 209, 209); padding: 30px;">
<img src="assets/icons/pos-black.png" width="42px"
height="auto" alt="">
<p style="color: #714B67;font-weight: 600; margin-top: 10px;
font-size: 1.2rem; margin-bottom: 2px;">POS</p>
<p>Easy configuration and convivial experience</p>
</div>
</div>
<div class="col-md-3 col-sm-6 p-0">
<div class="d-flex flex-column h-100"
style="border-right: 1px solid rgb(209, 209, 209);border-bottom: 1px solid rgba(0, 0, 0, 0.2); padding: 30px; box-shadow: 0 5px 10px rgba(228, 227, 227, 0.373)">
<img src="assets/icons/education-black.png" width="42px"
height="auto" alt="">
<p style="color: #714B67;font-weight: 600; margin-top: 10px;
font-size: 1.2rem; margin-bottom: 2px;">
Education</p>
<p>A platform for educational management</p>
</div>
</div>
<div class="col-md-3 col-sm-6 p-0">
<div class="d-flex flex-column h-100"
style="border-bottom: 1px solid rgb(209, 209, 209); padding: 30px; ">
<img src="assets/icons/manufacturing-black.png"
width="42px" height="auto" alt="">
<p style="color: #714B67;font-weight: 600; margin-top: 10px;
font-size: 1.2rem; margin-bottom: 2px;">
Manufacturing</p>
<p>Plan, track and schedule your operations</p>
</div>
</div>
<div class="col-md-3 col-sm-6 p-0">
<div class="d-flex flex-column h-100"
style="border-right: 1px solid rgb(209, 209, 209); padding: 30px;">
<img src="assets/icons/ecom-black.png" width="42px"
height="auto" alt="">
<p style="color: #714B67;font-weight: 600; margin-top: 10px;
font-size: 1.2rem; margin-bottom: 2px;">E-commerce &
Website</p>
<p>Mobile friendly, awe-inspiring product pages</p>
</div>
</div>
<div class="col-md-3 col-sm-6 p-0">
<div class="d-flex flex-column h-100"
style="border-right: 1px solid rgb(209, 209, 209); padding: 30px;box-shadow: 0 -5px 10px rgba(228, 227, 227, 0.373);">
<img src="assets/icons/service-black.png" width="42px"
height="auto" alt="">
<p style="color: #714B67;font-weight: 600; margin-top: 10px;
font-size: 1.2rem; margin-bottom: 2px;">Service
Management</p>
<p>Keep track of services and invoice</p>
</div>
</div>
<div class="col-md-3 col-sm-6 p-0">
<div class="d-flex flex-column h-100"
style="border-right: 1px solid rgb(209, 209, 209); padding: 30px; ">
<img src="assets/icons/restaurant-black.png"
width="42px" height="auto" alt="">
<p style="color: #714B67;font-weight: 600; margin-top: 10px;
font-size: 1.2rem; margin-bottom: 2px;">
Restaurant</p>
<p>Run your bar or restaurant methodically</p>
</div>
</div>
<div class="col-md-3 col-sm-6 p-0">
<div class="d-flex flex-column h-100"
style=" padding: 30px;box-shadow: -5px 0 10px rgba(228, 227, 227, 0.373);">
<img src="assets/icons/hotel-black.png" width="42px"
height="auto" alt="">
<p style="color: #714B67;font-weight: 600; margin-top: 10px;
font-size: 1.2rem; margin-bottom: 2px;">Hotel
Management</p>
<p>An all-inclusive hotel management application</p>
</div>
</div>
</div>
</div>
<div class="container mt-5">
<div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mt-5">
<p class="m-0"
style="font-weight: 600; font-size: 24px; color:#000 !important">
Support</p>
</div>
</div>
<div class="container my-5">
<div class="row" style="background-color: #FFFAFE;">
<div class="col-md-6 pb-4 d-flex align-items-center justify-content-center"
style="border-right: 1px solid #D9D9D9;">
<div style="padding: 30px;">
<div class="d-flex align-items-center">
<img src="assets/misc/support (1) 1.svg" alt=""
width="60px" style="margin-right: 12px;">
<div style="padding: 0px 8px;">
<span
style="color: #714B67;font-size: 24px;font-weight: 600;padding-bottom: 1rem;">Need
Help?</span>
<p class="m-0" style="color:#718096;">Got
questions or need help? Get in touch.</p>
<div style="font-weight: 400;"><span><img
src="assets/misc/support-email.svg"
alt=""
width="18px"
style="filter: invert(1);margin-right: 0.8rem;"></span>odoo@cybrosys.com
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 pb-4 d-flex align-items-center justify-content-center">
<div style="padding: 30px;">
<div class="d-flex align-items-center">
<img src="assets/misc/whatsapp 1.svg" alt=""
width="60px" style="margin-right: 12px;">
<div>
<span style="color: #714B67;font-size: 24px;font-weight: 600;">WhatsApp</span>
<p class="m-0" style="color:#718096;">Say hi to
us on WhatsApp!</p>
<div style="font-weight: 400; font-size: 16px;"><span><img
src="assets/misc/phone.svg"
alt="" width="14px"
style="filter: invert(1); margin-right: 0.8rem;"></span>+91
99456767686
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

59
hierarchical_chart_widget/static/src/js/org_chart.js

@ -0,0 +1,59 @@
/** @odoo-module **/
import { registry } from "@web/core/registry";
import { Component } from "@odoo/owl";
import { useService } from "@web/core/utils/hooks";
import { onWillStart, onWillUpdateProps, useState } from "@odoo/owl";
import { standardFieldProps } from "@web/views/fields/standard_field_props";
import { _t } from "@web/core/l10n/translation";
export class OrgChart extends Component {
static template = "hierarchical_chart_widget.CustomerChartWidget";
static props = { ...standardFieldProps };
setup() {
super.setup();
this.orm = useService('orm');
this.OrgState = useState({
data: {},
});
onWillStart(async () => {
const model = this.props.record.resModel;
console.log(model,'model model')
await this.DepartmentDetails(this.props.record.evalContextWithVirtualIds.active_id, model);
});
onWillUpdateProps(async (nextProps) => {
const model = nextProps.record.resModel;
await this.DepartmentDetails(nextProps.record.evalContextWithVirtualIds.active_id, model);
});
}
async DepartmentDetails(department_id, model) {
// Fetching the details for the template
this.OrgState.data = await this.orm.call(
'hr.department',
'get_child_dept',
[department_id, model]
);
}
onChildClick(id, ev) {
// On clicking the nodes it will be redirected to their page
const action = {
type: 'ir.actions.act_window',
res_model: ev.props.record.resModel,
res_id: id,
domain: [],
views: [
[false, "form"],
[false, "list"],
],
name: "Schedule Log",
target: 'current',
};
ev.env.services.action.doAction(action);
}
}
export const orgChart = {
component: OrgChart,
displayName: _t("Widget"),
supportedTypes: ["many2one"],
extractProps: ({ attrs }) => ({}),
};
registry.category("fields").add("org_chart", orgChart);

19
hierarchical_chart_widget/static/src/scss/org_template_style.scss

@ -0,0 +1,19 @@
/* CSS for Organization Chart */
/* Base styles for organization chart container */
.org-chart {
position: relative;
}
/* Styles for children nodes */
.org-children {
top: 90px; /* Adjust as needed */
left: 0;
width: 100%;
justify-content: space-around;
}
/* Styles for child nodes */
.child-node {
margin-top: px;
}

57
hierarchical_chart_widget/static/src/xml/org_chart_template.xml

@ -0,0 +1,57 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates>
<!-- Template for Widget org Chart -->
<t t-name="hierarchical_chart_widget.CustomerChartWidget">
<div class="org-chart">
<span>
<t t-log="OrgState.data['child'].length"/>
<t t-if="OrgState.data['parent'] || OrgState.data['child'].length != 0">
<p style="margin-top:20px;width:max-content;font-weight: 500;"><u>HIERARCHY</u></p>
</t>
</span>
<t t-if="OrgState.data['parent']">
<div class="org-node parent-node">
<p style="width:max-content;font-weight: bold;margin-bottom: 0rem;"
t-on-click="() => onChildClick(OrgState.data['parent']['id'],this)">
<t t-esc="OrgState.data['parent']['name']"/>
</p>
</div>
</t>
<div class="org-parent">
<div t-if="OrgState.data['parent'] == undefined"
class="org-node self-node"
t-attf-class="#{OrgState.data['parent'] == undefined ? '' : 'o_treeEntry'}"
style="margin-left:3px; margin-bottom: 0rem;font-size: 16px; font-weight: bold;">
<p style="margin-bottom:0rem;width:max-content; ">
<t t-if="OrgState.data['self'] != false">
<t t-esc="OrgState.data['self']"/>
</t>
</p>
</div>
<div t-if="OrgState.data['parent'] != undefined"
class="org-node self-node o_treeEntry"
style="margin-left:3px; margin-bottom: 0rem;">
<p style="margin-bottom:0rem;width:max-content;">
<t t-if="OrgState.data['self'] != 'false'">
<t t-esc="OrgState.data['self']"/>
</t>
</p>
</div>
</div>
<t t-if="OrgState.data['child'].length != 0">
<div class="org-children ">
<t t-foreach="OrgState.data['child']" t-as="data"
t-key="data_index">
<div class="org-node child-node o_treeEntry"
style="margin-left:19px;width:max-content">
<p style="margin-bottom: 0rem"
t-on-click="() => onChildClick(data['id'],this)">
<t t-esc="data['name']"/>
</p>
</div>
</t>
</div>
</t>
</div>
</t>
</templates>

32
hierarchical_chart_widget/views/hr_department_views.xml

@ -0,0 +1,32 @@
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<!-- The view inherits from the existing 'hr.view_department_form' and modifies it to include a hierarchical chart widget.-->
<record id="view_department_form" model="ir.ui.view">
<field name="name">hr.department.view.kanban.inherit.hierarchical.chart.widget</field>
<field name="model">hr.department</field>
<field name="inherit_id" ref="hr.view_department_form"/>
<field name="arch" type="xml">
<xpath expr="//group" position="replace">
<group>
<group col="1">
<field name="name"/>
<field name="manager_id"/>
<field name="parent_id"/>
<field name="company_id"/>
<field name="child_ids" invisible="1"/>
<field name="is_parent_child" invisible="1"/>
</group>
<group col="4" name="org_chart"
invisible="(child_ids == [] and not is_parent_child and parent_id == False)"
style="margin-top:-32px;font-size: 16px">
<div id="department_right"
class="col-lg-4 px-0 ps-lg-5">
<field name="child_org_ids" class="position-relative"
widget="org_chart" nolabel="1"/>
</div>
</group>
</group>
</xpath>
</field>
</record>
</odoo>
Loading…
Cancel
Save