initial commit

7 files changed, 729 insertions, 0 deletions

diff --git a/hr_organizational_chart/static/src/css/hr_orgchart.css b/hr_organizational_chart/static/src/css/hr_orgchart.css
new file mode 100644
index 0000000..58815b8
--- /dev/null
+++ b/hr_organizational_chart/static/src/css/hr_orgchart.css
@@ -0,0 +1,474 @@
+/*
+ * jQuery OrgChart Plugin
+ * https://github.com/dabeng/OrgChart
+ *
+ * Copyright 2016, dabeng
+ * https://github.com/dabeng
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+.orgchart {
+  box-sizing: border-box;
+  display: inline-block;
+  min-height: 202px;
+  min-width: 202px;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-size: 10px 10px;
+  border: 1px dashed rgba(0,0,0,0);
+  padding: 20px;
+}
+
+.orgchart .hidden, .orgchart~.hidden {
+  display: none;
+}
+
+.orgchart.b2t {
+  transform: rotate(180deg);
+}
+
+.orgchart.l2r {
+  position: absolute;
+  transform: rotate(-90deg) rotateY(180deg);
+  transform-origin: left top;
+}
+
+.orgchart .verticalNodes ul {
+  list-style: none;
+  margin: 0;
+  padding-left: 18px;
+  text-align: left;
+}
+.orgchart .verticalNodes ul:first-child {
+  margin-top: 2px;
+}
+.orgchart .verticalNodes>td::before {
+  content: '';
+  border: 1px solid rgba(217, 83, 79, 0.8);
+}
+.orgchart .verticalNodes>td>ul>li:first-child::before {
+  box-sizing: border-box;
+  top: -4px;
+  height: 30px;
+  width: calc(50% - 2px);
+  border-width: 2px 0 0 2px;
+}
+.orgchart .verticalNodes ul>li {
+  position: relative;
+}
+.orgchart .verticalNodes ul>li::before,
+.orgchart .verticalNodes ul>li::after {
+  box-sizing: border-box;
+  content: '';
+  position: absolute;
+  left: -6px;
+  border-color: rgba(217, 83, 79, 0.8);
+  border-style: solid;
+  border-width: 0 0 2px 2px;
+}
+.orgchart .verticalNodes ul>li::before {
+  top: -4px;
+  height: 30px;
+  width: 11px;
+}
+.orgchart .verticalNodes ul>li::after {
+  top: 1px;
+  height: 100%;
+}
+.orgchart .verticalNodes ul>li:first-child::after {
+  box-sizing: border-box;
+  top: 24px;
+  width: 11px;
+  border-width: 2px 0 0 2px;
+}
+.orgchart .verticalNodes ul>li:last-child::after {
+  box-sizing: border-box;
+  border-width: 2px 0 0;
+}
+
+.orgchart.r2l {
+  position: absolute;
+  transform: rotate(90deg);
+  transform-origin: left top;
+}
+
+.orgchart>.spinner {
+  font-size: 100px;
+  margin-top: 30px;
+  color: rgba(68, 157, 68, 0.8);
+}
+
+.orgchart table {
+  border-spacing: 0;
+  border-collapse: separate;
+}
+
+.orgchart>table:first-child{
+  margin: 20px auto;
+}
+
+.orgchart td {
+  text-align: center;
+  vertical-align: top;
+  padding: 0;
+}
+
+.orgchart .lines:nth-child(3) td {
+  box-sizing: border-box;
+  height: 20px;
+}
+
+.orgchart .lines .lineTop {
+  border-top: 2px solid #acacac;
+}
+
+.orgchart .lines .lineRight {
+  border-right: 1px solid #acacac;
+  float: none;
+  border-radius: 0;
+}
+
+.orgchart .lines .lineLeft {
+  border-left: 1px solid #acacac;
+  float: none;
+  border-radius: 0;
+}
+
+.orgchart .lines .lineDown {
+  background-color: #acacac;
+  margin: 0 auto;
+  height: 20px;
+  width: 2px;
+  float: none;
+}
+
+/* node styling */
+.orgchart .node {
+  box-sizing: border-box;
+  display: inline-block;
+  position: relative;
+  margin: 0;
+  padding: 3px;
+  border: 2px dashed transparent;
+  text-align: center;
+  width: 160px;
+}
+
+.orgchart.l2r .node, .orgchart.r2l .node {
+  width: 50px;
+  height: 130px;
+}
+
+.orgchart .node>.spinner {
+  position: absolute;
+  top: calc(50% - 15px);
+  left: calc(50% - 15px);
+  vertical-align: middle;
+  font-size: 30px;
+  color: rgba(68, 157, 68, 0.8);
+}
+
+.orgchart .node:hover {
+  transition: .5s;
+  cursor: default;
+  z-index: 20;
+}
+
+.orgchart .node.focused {
+  background-color: rgba(238, 217, 54, 0.5);
+}
+
+.orgchart .ghost-node {
+  position: fixed;
+  left: -10000px;
+  top: -10000px;
+}
+
+.orgchart .ghost-node rect {
+  fill: #ffffff;
+  stroke: #bf0000;
+}
+
+.orgchart .node.allowedDrop {
+  border-color: rgba(68, 157, 68, 0.9);
+}
+
+.orgchart .node .title {
+  text-align: center;
+  font-size: 10px;
+  font-weight: bold;
+  height: 20px;
+  line-height: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background-color: #e3e3e3;
+  color: #fff;
+  border-radius:0;
+}
+
+.orgchart.b2t .node .title {
+  transform: rotate(-180deg);
+  transform-origin: center bottom;
+}
+
+.orgchart.l2r .node .title {
+  transform: rotate(-90deg) translate(-40px, -40px) rotateY(180deg);
+  transform-origin: bottom center;
+  width: 120px;
+}
+
+.orgchart.r2l .node .title {
+  transform: rotate(-90deg) translate(-40px, -40px);
+  transform-origin: bottom center;
+  width: 120px;
+}
+
+.orgchart .node .title .symbol {
+  float: left;
+  margin-top: 4px;
+  margin-left: 2px;
+}
+
+
+.orgchart.b2t .node .content {
+  transform: rotate(180deg);
+  transform-origin: center top;
+}
+
+.orgchart.l2r .node .content {
+  transform: rotate(-90deg) translate(-40px, -40px) rotateY(180deg);
+  transform-origin: top center;
+  width: 120px;
+}
+
+.orgchart.r2l .node .content {
+  transform: rotate(-90deg) translate(-40px, -40px);
+  transform-origin: top center;
+  width: 120px;
+}
+
+.orgchart .node .edge {
+  font-size: 15px;
+  position: absolute;
+  color: rgba(68, 157, 68, 0.5);
+  cursor: default;
+  transition: .2s;
+}
+
+.orgchart.noncollapsable .node .edge {
+  display: none;
+}
+
+.orgchart .edge:hover {
+  color: #449d44;
+  cursor: pointer;
+}
+
+.orgchart .node .verticalEdge {
+  width: calc(100% - 10px);
+  width: -webkit-calc(100% - 10px);
+  width: -moz-calc(100% - 10px);
+  left: 5px;
+}
+
+.orgchart .node .topEdge {
+  top: -4px;
+}
+
+.orgchart .node .bottomEdge {
+  bottom: -4px;
+}
+
+.orgchart .node .horizontalEdge {
+  width: 15px;
+  height: calc(100% - 10px);
+  height: -webkit-calc(100% - 10px);
+  height: -moz-calc(100% - 10px);
+  top: 5px;
+}
+
+.orgchart .node .rightEdge {
+  right: -4px;
+}
+
+.orgchart .node .leftEdge {
+  left: -4px;
+}
+
+.orgchart .node .horizontalEdge::before {
+  position: absolute;
+  top: calc(50% - 7px);
+}
+
+.orgchart .node .rightEdge::before {
+  right: 3px;
+}
+
+.orgchart .node .leftEdge::before {
+  left: 3px;
+}
+
+.orgchart .node .toggleBtn {
+  position: absolute;
+  left: 5px;
+  bottom: -2px;
+  color: rgba(68, 157, 68, 0.6);
+}
+
+.orgchart .node .toggleBtn:hover {
+  color: rgba(68, 157, 68, 0.8);
+}
+
+.oc-export-btn {
+  display: inline-block;
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  padding: 6px 12px;
+  margin-bottom: 0;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.42857143;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  user-select: none;
+  color: #fff;
+  background-color: #5cb85c;
+  border: 1px solid transparent;
+  border-color: #4cae4c;
+  border-radius: 4px;
+}
+
+.oc-export-btn[disabled] {
+  cursor: not-allowed;
+  box-shadow: none;
+  opacity: 0.3;
+}
+
+.oc-export-btn:hover,.oc-export-btn:focus,.oc-export-btn:active  {
+  background-color: #449d44;
+  border-color: #347a34;
+}
+
+.orgchart~.mask {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 999;
+  text-align: center;
+  background-color: rgba(0,0,0,0.3);
+}
+
+.orgchart~.mask .spinner {
+  position: absolute;
+  top: calc(50% - 54px);
+  left: calc(50% - 54px);
+  color: rgba(255,255,255,0.8);
+  font-size: 108px;
+}
+
+.orgchart .node {
+  transition: transform 0.3s, opacity 0.3s;
+}
+
+.orgchart .slide-down {
+  opacity: 0;
+  transform: translateY(40px);
+}
+
+.orgchart.l2r .node.slide-down, .orgchart.r2l .node.slide-down {
+  transform: translateY(130px);
+}
+
+.orgchart .slide-up {
+  opacity: 0;
+  transform: translateY(-40px);
+}
+
+.orgchart.l2r .node.slide-up, .orgchart.r2l .node.slide-up {
+  transform: translateY(-130px);
+}
+
+.orgchart .slide-right {
+  opacity: 0;
+  transform: translateX(130px);
+}
+
+.orgchart.l2r .node.slide-right, .orgchart.r2l .node.slide-right {
+  transform: translateX(40px);
+}
+
+.orgchart .slide-left {
+  opacity: 0;
+  transform: translateX(-130px);
+}
+
+.orgchart.l2r .node.slide-left, .orgchart.r2l .node.slide-left {
+  transform: translateX(-40px);
+}
+.orgchart .middle-level .title {
+
+    background-color: #e3e3e3;
+
+}
+.orgchart .middle-level .content {
+
+    border-color: #e3e3e3;
+
+}
+.orgchart .node .content {
+
+    box-sizing: border-box;
+    width: 100%;
+    height: 20px;
+    font-size: 9px;
+    line-height: 18px;
+
+    border-radius: 0;
+    text-align: center;
+    background-color: #e3e3e3;
+    color: #333;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding: 0 9px 24px;
+
+}
+.orgchart .node .title {
+
+    text-align: center;
+    font-size: 11px;
+    font-weight: bold;
+    height: 16px;
+    line-height: 24px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    background-color: #e3e3e3;
+    color: #353535;
+    border-radius: 0px;
+
+}
+.office > img {
+
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    margin-bottom: 4px;
+
+}
+#chart-container ~ .o_content {
+display: none;
+}
\ No newline at end of file
diff --git a/hr_organizational_chart/static/src/css/style.css b/hr_organizational_chart/static/src/css/style.css
new file mode 100644
index 0000000..05d3a35
--- /dev/null
+++ b/hr_organizational_chart/static/src/css/style.css
@@ -0,0 +1,42 @@
+html,body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  line-height: 1.428571429;
+  color: #333333;
+}
+
+#chart-container {
+  display: inline-block;
+  text-align: center;
+  height: 100vh;
+  width: 100%;
+  overflow: auto;
+
+}
+.o_org_chart_title.mb16.mt0 {
+
+    color: #4661ae;
+    border-block-color: blue;
+    margin-top: 39px !important;
+    font-size: 22px;
+
+}
+
+
+.orgchart td.left, .orgchart td.right, .orgchart td.top { border-color: #aaa; }
+.orgchart td>.down { background-color: #aaa; }
+.orgchart .middle-level .title { background-color: #e3e3e3; }
+.orgchart .middle-level .content { border-color: #e3e3e3; }
+.orgchart .product-dept .title { background-color: #e3e3e3; }
+.orgchart .product-dept .content { border-color: #e3e3e3; }
+.orgchart .rd-dept .title { background-color: #e3e3e3; }
+.orgchart .rd-dept .content { border-color: #e3e3e3; }
+.orgchart .pipeline1 .title { background-color: #e3e3e3; }
+.orgchart .pipeline1 .content { border-color: #e3e3e3; }
+.orgchart .frontend1 .title { background-color: #e3e3e3; }
+.orgchart .frontend1 .content { border-color: #e3e3e3; }
diff --git a/hr_organizational_chart/static/src/img/default_image.png b/hr_organizational_chart/static/src/img/default_image.png
new file mode 100644
index 0000000..6557e68
--- /dev/null
+++ b/hr_organizational_chart/static/src/img/default_image.png
diff --git a/hr_organizational_chart/static/src/js/organizational_view.js b/hr_organizational_chart/static/src/js/organizational_view.js
new file mode 100644
index 0000000..a0942a3
--- /dev/null
+++ b/hr_organizational_chart/static/src/js/organizational_view.js
@@ -0,0 +1,100 @@
+odoo.define('hr_organizational_chart.view_chart', function (require){
+"use strict";
+var AbstractAction = require('web.AbstractAction');
+var ajax = require('web.ajax');
+var core = require('web.core');
+var rpc = require('web.rpc');
+var ActionManager = require('web.ActionManager');
+var _t = core._t;
+
+
+var EmployeeOrganizationalChart =  AbstractAction.extend({
+
+    contentTemplate: 'OrganizationalEmployeeChart',
+    events: {
+        'click img': '_getChild_data',
+        'click .employee_name': 'view_employee',
+    },
+
+    init: function(parent, context) {
+        this._super(parent, context);
+        this.renderEmployeeDetails();
+    },
+    renderEmployeeDetails: function (){
+        var employee_id = 1
+        var self = this;
+        this._rpc({
+            route: '/get/parent/employee',
+        }).then(function (result) {
+            self.parent_len = result[1];
+            $.ajax({
+                url: '/get/parent/child',
+                type: 'POST',
+                data: JSON.stringify(result[0]),
+                success: function (value) {
+                        $('#o_parent_employee').append(value);
+                        },
+            });
+
+        });
+
+    },
+    _getChild_data: function(events){
+        console.log(events)
+        if(events.target.parentElement.className){
+            var self = this
+            this.id = events.target.parentElement.id;
+            this.check_child =  $( "#"+this.id+".o_level_1" );
+            if (this.check_child[0]){
+                this.colspan_td = this.check_child[0].parentElement.parentElement
+                this.tbody_child = this.colspan_td.parentElement.parentElement
+                var child_length = this.tbody_child.children.length
+                if (child_length == 1){
+                    this._rpc({
+                        route: '/get/parent/colspan',
+                        params: {
+                            emp_id: parseInt(this.id),
+                        },
+                    }).then(function (col_val){
+                        if (col_val){
+                            self.colspan_td.colSpan = col_val;
+                        }
+                    });
+                    this._rpc({
+                        route: '/get/child/data',
+                        params: {
+                            click_id: parseInt(this.id),
+                        },
+                    }).then(function (result){
+                        if (result){
+                        $(result).appendTo(self.tbody_child);
+                        }
+                    });
+                }
+                else{
+                    for(var i = 0;i < 3; i++){
+                        this.tbody_child.children[1].remove();
+                    }
+                    self.colspan_td.colSpan = 2;
+                }
+
+            }
+        }
+    },
+    view_employee: function(ev){
+        if (ev.target.parentElement.className){
+            var id = parseInt(ev.target.parentElement.parentElement.children[0].id)
+            this.do_action({
+            name: _t("Employee"),
+            type: 'ir.actions.act_window',
+            res_model: 'hr.employee',
+            res_id: id,
+            view_mode: 'form',
+            views: [[false, 'form']],
+            })
+        }
+    },
+});
+    core.action_registry.add('organization_dashboard', EmployeeOrganizationalChart);
+
+});
diff --git a/hr_organizational_chart/static/src/scss/chart_view.scss b/hr_organizational_chart/static/src/scss/chart_view.scss
new file mode 100644
index 0000000..3fd82f2
--- /dev/null
+++ b/hr_organizational_chart/static/src/scss/chart_view.scss
@@ -0,0 +1,73 @@
+.o_chart_head {
+  text-align: center;
+}
+.o_chart_head img {
+  width: 68px;
+  border: 3px solid #777;
+  border-radius: 100%;
+}
+.o_child_container {
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  margin-top: 4rem;
+}
+.o_level_1 img {
+  width: 68px;
+  border: 3px solid #777;
+  border-radius: 100%;
+}
+.o_level_1 {
+  margin: 15px;
+  min-width: 100px;
+}
+
+.empchart table {
+  border-spacing: 0;
+  border-collapse: separate;
+}
+
+.empchart td {
+  text-align: center;
+  padding: 0;
+  vertical-align: top;
+}
+
+.empchart .lines:nth-child(3) td {
+  height: 20px;
+  box-sizing: border-box;
+}
+
+.empchart .lines .leftLine {
+  border-left: 1px solid rgb(89, 87, 87);
+  float: none;
+  border-radius: 0;
+}
+
+.empchart .lines .topLine {
+  border-top: 2px solid rgb(89, 87, 87);
+}
+
+.empchart .lines .downLine {
+  background-color: rgb(89, 87, 87);
+  float: none;
+  margin: 0 auto;
+  width: 2px;
+  height: 20px;
+}
+
+.empchart .lines .rightLine {
+  border-right: 1px solid rgb(89, 87, 87);
+  float: none;
+  border-radius: 0;
+}
+
+.employee_name p:nth-child(1) {
+    font-weight: 600;
+    margin-bottom: -2px;
+    margin-top: 7px;
+}
+#o_organizational_chart .o_org_chart_title.mb16.mt0 {
+    background-color: darkgray;
+    padding: 17px;
+}
\ No newline at end of file
diff --git a/hr_organizational_chart/static/src/xml/chart_view.xml b/hr_organizational_chart/static/src/xml/chart_view.xml
new file mode 100644
index 0000000..ebdfbb9
--- /dev/null
+++ b/hr_organizational_chart/static/src/xml/chart_view.xml
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+
+    <t t-name="OrganizationalEmployeeChart">
+        <div id="o_organizational_chart">
+        <h4 class="o_org_chart_title mb16 mt0" align="center">Organization Chart</h4>
+            <center>
+            <div id="o_parent_employee" class="empchart">
+
+            </div>
+            </center>
+        </div>
+
+
+
+
+        </t>
+
+        </templates>
+
diff --git a/hr_organizational_chart/static/src/xml/hr_org_chart_template.xml b/hr_organizational_chart/static/src/xml/hr_org_chart_template.xml
new file mode 100644
index 0000000..71ad1a0
--- /dev/null
+++ b/hr_organizational_chart/static/src/xml/hr_org_chart_template.xml
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+  <t t-name="hr_organizational_chart.org_chart_template">
+    <h4 class="o_org_chart_title mb16 mt0" align="center">Organization Chart</h4>
+    <div id="chart-container"></div>
+    <script type="text/javascript">
+      $(function() {
+        <!-- Get Employee Data -->
+        var datascource = employee_data.values;
+
+        var oc = $('#chart-container').orgchart({
+          'data' : datascource,
+          'nodeTemplate': nodeTemplate,
+          'toggleSiblingsResp': true
+        });
+
+      });
+    </script>
+  </t>
+</templates>