From c143f1dca2834873a5ad7e32609301913e93bf3c Mon Sep 17 00:00:00 2001
From: "Xavier Bol (xbo)" <xbo@odoo.com>
Date: Mon, 2 Oct 2023 17:52:57 +0200
Subject: [PATCH 01/18] [IMP] web: manage `parent_of` operator in domain in
 mockServer

Before this commit, `child_of` operator is managed in the mockServer
but not the `parent_of` one.

This commit manages `parent_of` operator in mockServer to be able
to find the record when the domain used contains that operator

task-3376776
---
 addons/web/static/tests/helpers/mock_server.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/addons/web/static/tests/helpers/mock_server.js b/addons/web/static/tests/helpers/mock_server.js
index b0106a15742..8f17b09a51a 100644
--- a/addons/web/static/tests/helpers/mock_server.js
+++ b/addons/web/static/tests/helpers/mock_server.js
@@ -2198,6 +2198,21 @@ export class MockServer {
                         });
                     }
                     criterion = [criterion[0], "in", childIDs];
+                } else if (criterion[1] === "parent_of") {
+                    // 'parent_of' operator is not supported by domain.js, so we replace
+                    // in by the 'in' operator (with the ids of parent and its ancestors)
+                    const childID = criterion[2];
+                    const parentIDs = [];
+                    const recordPerID = {};
+                    for (const record of records) {
+                        recordPerID[record.id] = record;
+                    }
+                    let record = recordPerID[childID];
+                    while (record) {
+                        parentIDs.push(record.id);
+                        record = record.parent_id && recordPerID[record.parent_id];
+                    }
+                    criterion = [criterion[0], "in", parentIDs];
                 }
                 // In case of many2many field, if domain operator is '=' generally change it to 'in' operator
                 const field = model.fields[criterion[0]] || {};

From adbcf6e1da6c9f93ec4a59d5d15b6525f505f7f9 Mon Sep 17 00:00:00 2001
From: "Xavier Bol (xbo)" <xbo@odoo.com>
Date: Thu, 5 Oct 2023 11:21:38 +0200
Subject: [PATCH 02/18] [FIX] web: remove border-end-0 in search view

Before this commit, when search menu is not displayed in the
search view, then the border right is missing.

This commit removes `border-end-0` class added in the search view
to always have a border. Even with the search menu, it does not
seem to have an extra border.

task-3376776
---
 addons/web/static/src/search/search_bar/search_bar.xml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addons/web/static/src/search/search_bar/search_bar.xml b/addons/web/static/src/search/search_bar/search_bar.xml
index 6ca07cb9777..58559a2a2ee 100644
--- a/addons/web/static/src/search/search_bar/search_bar.xml
+++ b/addons/web/static/src/search/search_bar/search_bar.xml
@@ -93,7 +93,7 @@
 
     <t t-name="web.SearchBar">
         <div class="o_cp_searchview d-flex input-group" role="search" t-ref="root">
-            <div class="o_searchview form-control d-print-contents d-flex align-items-center py-1 border-end-0" role="search" aria-autocomplete="list">
+            <div class="o_searchview form-control d-print-contents d-flex align-items-center py-1" role="search" aria-autocomplete="list">
                 <i class="o_searchview_icon d-print-none oi oi-search me-2"
                     role="img"
                     aria-label="Search..."

From 6ff5f9eb160f1e2924bfbaf0f6c557341e91b24b Mon Sep 17 00:00:00 2001
From: "Xavier Bol (xbo)" <xbo@odoo.com>
Date: Mon, 28 Aug 2023 15:43:02 +0200
Subject: [PATCH 03/18] [REF] hr: create hr_presence_status widget

Before this commit, the hr presence status icon is hardcoded in
each view in which the icon is needed.

This commit creates a widget for that icon to be able to use that
widget in the views in which the icon is needed to avoid duplicating
the code.

task-3376776
---
 .../hr_presence_status/hr_presence_status.js  | 77 +++++++++++++++++++
 .../hr_presence_status/hr_presence_status.xml |  8 ++
 addons/hr/views/hr_employee_public_views.xml  | 27 +------
 addons/hr/views/hr_employee_views.xml         | 40 +---------
 .../hr_presence_status/hr_presence_status.js  | 22 ++++++
 addons/hr_holidays/views/hr_views.xml         | 42 +---------
 .../hr_presence_status/hr_presence_status.js  | 65 ++++++++++++++++
 .../views/hr_employee_views.xml               | 41 +---------
 8 files changed, 181 insertions(+), 141 deletions(-)
 create mode 100644 addons/hr/static/src/components/hr_presence_status/hr_presence_status.js
 create mode 100644 addons/hr/static/src/components/hr_presence_status/hr_presence_status.xml
 create mode 100644 addons/hr_holidays/static/src/components/hr_presence_status/hr_presence_status.js
 create mode 100644 addons/hr_homeworking/static/src/components/hr_presence_status/hr_presence_status.js

diff --git a/addons/hr/static/src/components/hr_presence_status/hr_presence_status.js b/addons/hr/static/src/components/hr_presence_status/hr_presence_status.js
new file mode 100644
index 00000000000..b409f128f66
--- /dev/null
+++ b/addons/hr/static/src/components/hr_presence_status/hr_presence_status.js
@@ -0,0 +1,77 @@
+/** @odoo-module */
+
+import { Component } from "@odoo/owl";
+
+import { _t } from "@web/core/l10n/translation";
+import { registry } from "@web/core/registry";
+import { standardFieldProps } from "@web/views/fields/standard_field_props";
+
+export class HrPresenceStatus extends Component {
+    static template = "hr.HrPresenceStatus";
+    static props = {
+        ...standardFieldProps,
+        tag: { type: String, optional: true },
+    };
+    static defaultProps = {
+        tag: "small",
+    };
+
+    get classNames() {
+        const classNames = ["fa"];
+        classNames.push(
+            `fa-${this.props.tag === "small" ? "fw" : "2x"}`,
+            this.icon,
+            "o_button_icon",
+            "hr_presence",
+            "align-middle",
+            this.color,
+        )
+        return classNames.join(" ");
+    }
+
+    get color() {
+        switch (this.value) {
+            case "presence_present":
+            case "presence_absent_active":
+                return "text-success";
+            case "presence_absent":
+                return "text-muted";
+            case "presence_to_define":
+                return "text-warning";
+            default:
+                return "";
+        }
+    }
+
+    get icon() {
+        return `fa-circle${this.value.startsWith("presence_absent") ? "-o" : ""}`;
+    }
+
+    get label() {
+        return this.value !== false
+            ? this.options.find(([value, label]) => value === this.value)[1]
+            : "";
+    }
+
+    get options() {
+        return this.props.record.fields[this.props.name].selection.filter(
+            (option) => option[0] !== false && option[1] !== ""
+        );
+    }
+
+    get value() {
+        return this.props.record.data[this.props.name];
+    }
+}
+
+export const hrPresenceStatus = {
+    component: HrPresenceStatus,
+    displayName: _t("HR Presence Status"),
+    extractProps({ viewType }, dynamicInfo) {
+        return {
+            tag: viewType === "kanban" ? "span" : "small",
+        };
+    },
+};
+
+registry.category("fields").add("hr_presence_status", hrPresenceStatus)
diff --git a/addons/hr/static/src/components/hr_presence_status/hr_presence_status.xml b/addons/hr/static/src/components/hr_presence_status/hr_presence_status.xml
new file mode 100644
index 00000000000..db69c3d542b
--- /dev/null
+++ b/addons/hr/static/src/components/hr_presence_status/hr_presence_status.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="hr.HrPresenceStatus">
+        <t t-tag="props.tag" role="img" t-att-class="classNames" t-att-aria-label="label" t-att-title="label"/>
+    </t>
+
+</templates>
diff --git a/addons/hr/views/hr_employee_public_views.xml b/addons/hr/views/hr_employee_public_views.xml
index 53d8d16bb38..9b06c5d1c95 100644
--- a/addons/hr/views/hr_employee_public_views.xml
+++ b/addons/hr/views/hr_employee_public_views.xml
@@ -147,31 +147,8 @@
                                 </div>
                                 <ul>
                                     <li id="last_login"/>
-                                    <li id="presence">
-                                        <t t-if="record.show_hr_icon_display.raw_value">
-                                            <div class="o_employee_availability align-items-center">
-                                                <!-- Employee is present/connected and it is normal according to his work schedule  -->
-                                                <span t-if="record.hr_icon_display.raw_value == 'presence_present'"
-                                                      class="fa fa-2x fa-circle text-success" name="presence_present" role="img"
-                                                      aria-label="Present" title="Present"
-                                                />
-                                                <!-- Employee is not present and it is normal according to his work schedule -->
-                                                <span t-if="record.hr_icon_display.raw_value == 'presence_absent'"
-                                                      class="fa fa-2x fa-circle-o text-warning" name="presence_absent" role="img"
-                                                      aria-label="Absent" title="Absent"
-                                                />
-                                                <!-- Employee is connected but according to his work schedule, he should not work for now  -->
-                                                <span t-if="record.hr_icon_display.raw_value == 'presence_absent_active'"
-                                                      class="fa fa-2x fa-circle-o text-success" name="presence_absent_active" role="img"
-                                                      aria-label="Present but not active" title="Present but not active"
-                                                />
-                                                <!-- Employee is not here but according to his work schedule, he should be connected -->
-                                                <span t-if="record.hr_icon_display.raw_value == 'presence_to_define'"
-                                                      class="fa fa-2x fa-circle text-muted" name="presence_to_define" role="img"
-                                                      aria-label="To define" title="To define"
-                                                />
-                                            </div>
-                                        </t>
+                                    <li t-if="record.show_hr_icon_display.raw_value">
+                                        <field name="hr_icon_display" class="o_employee_availability align-items-center" widget="hr_presence_status" />
                                     </li>
                                     <li t-if="record.work_email.raw_value">
                                         <i class="fa fa-fw me-2 fa-envelope text-primary" title="Email"/>
diff --git a/addons/hr/views/hr_employee_views.xml b/addons/hr/views/hr_employee_views.xml
index 0196033953b..e2dca6d8019 100644
--- a/addons/hr/views/hr_employee_views.xml
+++ b/addons/hr/views/hr_employee_views.xml
@@ -52,8 +52,6 @@
                     <field name="active" invisible="1"/>
                     <field name="user_id" invisible="1"/>
                     <field name="user_partner_id" invisible="1"/>
-                    <field name="hr_presence_state" invisible="1"/>
-                    <field name="hr_icon_display" invisible="1"/>
                     <field name="image_128" invisible="1" />
                     <field name="company_id" invisible="1"/>
                     <field name="last_activity_time" invisible="1"/>
@@ -81,16 +79,7 @@
                             </div>
                             <div class="o_employee_avatar m-0 p-0">
                                 <field name="image_1920" widget='image' class="oe_avatar m-0" options='{"zoom": true, "preview_image":"avatar_128"}'/>
-                                <div id="hr_presence_status" class="d-flex align-items-end fs-6 o_employee_availability">
-                                    <!-- Employee is present/connected and it is normal according to his work schedule  -->
-                                    <small role="img" class="fa fa-fw fa-circle text-success o_button_icon hr_presence align-middle" invisible="hr_icon_display != 'presence_present'" aria-label="Present" title="Present"/>
-                                    <!-- Employee is not present and it is normal according to his work schedule -->
-                                    <small role="img" class="fa fa-fw fa-circle-o text-muted o_button_icon hr_presence align-middle" invisible="hr_icon_display != 'presence_absent'" aria-label="Absent" title="Absent" name="presence_absent"/>
-                                    <!-- Employee is connected but according to his work schedule, he should not work for now  -->
-                                    <small role="img" class="fa fa-fw fa-circle-o text-success o_button_icon hr_presence align-middle" invisible="hr_icon_display != 'presence_absent_active'" aria-label="Present but not active" title="Present but not active" name="presence_absent_active"/>
-                                    <!-- Employee is not here but according to his work schedule, he should be connected -->
-                                    <small role="img" class="fa fa-fw fa-circle text-warning o_button_icon hr_presence align-middle" invisible="hr_icon_display != 'presence_to_define'" aria-label="To define" title="To define" name="presence_to_define"/>
-                                </div>
+                                <field name="hr_icon_display" class="d-flex align-items-end fs-6 o_employee_availability" widget="hr_presence_status"/>
                             </div>
                         </div>
                         <group>
@@ -300,31 +289,8 @@
                                 </div>
                                 <ul>
                                     <li id="last_login"/>
-                                    <li id="presence">
-                                        <t t-if="record.show_hr_icon_display.raw_value">
-                                            <div class="o_employee_availability d-flex flex-row align-items-start">
-                                                <!-- Employee is present/connected and it is normal according to his work schedule  -->
-                                                <span t-if="record.hr_icon_display.raw_value == 'presence_present'"
-                                                      class="fa fa-2x fa-circle text-success" name="presence_present" role="img"
-                                                      aria-label="Present" title="Present"
-                                                />
-                                                <!-- Employee is not present/connected and it is normal according to his work schedule -->
-                                                <span t-if="record.hr_icon_display.raw_value == 'presence_absent'"
-                                                      class="fa fa-2x fa-circle-o text-warning" name="presence_absent" role="img"
-                                                      aria-label="Absent" title="Absent"
-                                                />
-                                                <!-- Employee is connected but according to his work schedule, he should not work for now  -->
-                                                <span t-if="record.hr_icon_display.raw_value == 'presence_absent_active'"
-                                                      class="fa fa-2x fa-circle-o text-success" name="presence_absent_active" role="img"
-                                                      aria-label="Present but not active" title="Present but not active"
-                                                />
-                                                <!-- Employee is not here but according to his work schedule, he should be connected -->
-                                                <span t-if="record.hr_icon_display.raw_value == 'presence_to_define'"
-                                                      class="fa fa-2x fa-circle text-muted" name="presence_to_define" role="img"
-                                                      aria-label="To define" title="To define"
-                                                />
-                                            </div>
-                                        </t>
+                                    <li t-if="record.show_hr_icon_display.raw_value">
+                                        <field name="hr_icon_display" class="o_employee_availability" widget="hr_presence_status" />
                                     </li>
                                     <li t-if="record.work_email.raw_value" class="o_text_overflow">
                                         <i class="fa fa-fw me-2 fa-envelope text-primary" title="Email"/>
diff --git a/addons/hr_holidays/static/src/components/hr_presence_status/hr_presence_status.js b/addons/hr_holidays/static/src/components/hr_presence_status/hr_presence_status.js
new file mode 100644
index 00000000000..ae4e86ef2ac
--- /dev/null
+++ b/addons/hr_holidays/static/src/components/hr_presence_status/hr_presence_status.js
@@ -0,0 +1,22 @@
+/** @odoo-module **/
+
+import { patch } from "@web/core/utils/patch";
+
+import { HrPresenceStatus } from "@hr/components/hr_presence_status/hr_presence_status";
+
+patch(HrPresenceStatus.prototype, {
+    get classNames() {
+        const classNames = super.classNames;
+        if (this.value.startsWith("presence_holiday")) {
+            return `${classNames} fa-plane`;
+        }
+        return classNames;
+    },
+
+    get color() {
+        if (this.value.startsWith("presence_holiday")) {
+            return `text-${this.value === "presence_holiday_present" ? "success" : "warning"}`;
+        }
+        return super.color;
+    },
+});
diff --git a/addons/hr_holidays/views/hr_views.xml b/addons/hr_holidays/views/hr_views.xml
index d928483343d..3d1801bc204 100644
--- a/addons/hr_holidays/views/hr_views.xml
+++ b/addons/hr_holidays/views/hr_views.xml
@@ -94,21 +94,6 @@
             <xpath expr="//templates" position="before">
                 <field name="is_absent"/>
             </xpath>
-            <xpath expr="//div[hasclass('o_employee_availability')]" position="inside">
-                <t t-if="record.hr_icon_display.raw_value.startsWith('presence_holiday')">
-                    <!-- Employee is on time off but he is connected -->
-                    <span t-if="record.hr_icon_display.raw_value == 'presence_holiday_present'"
-                          class="fa fa-2x fa-plane text-success me-1" name="presence_absent_active" role="img"
-                          aria-label="Present but on leave"  title="Present but on leave"
-                    />
-                    <!-- Employee is on time off and he is not connected -->
-                    <span t-if="record.hr_icon_display.raw_value == 'presence_holiday_absent'"
-                          class="fa fa-2x fa-plane text-warning me-1" name="presence_absent" role="img"
-                          aria-label="To define" title="On Time Off"
-                    />
-                    <span>On Time Off</span>
-                </t>
-            </xpath>
         </field>
     </record>
 
@@ -124,23 +109,6 @@
                 <field name="leave_date_to"/>
                 <field name="is_absent"/>
             </xpath>
-            <xpath expr="//div[hasclass('o_employee_availability')]" position="inside">
-                <span class="d-flex" style="font-size: 100%"
-                    t-att-class="record.current_leave_state.raw_value=='validate'?'oe_kanban_button oe_kanban_color_3':'oe_kanban_button oe_kanban_color_2'"
-                    t-att-title="luxon.DateTime.fromISO(record.leave_date_from.raw_value).toFormat('ccc d MMM') + ' - ' + luxon.DateTime.fromISO(record.leave_date_to.raw_value).toFormat('ccc d MMM')">
-                    <!-- Employee is absent, in holiday but he is connected -->
-                    <i t-if="record.hr_icon_display.raw_value == 'presence_holiday_present'"
-                        class="fa fa-2x fa-plane text-success me-1" name="presence_absent_active" role="img"
-                        aria-label="Present but on leave"  title="Present but on leave"
-                    />
-                    <!-- Employee is on holiday, not present and not connected -->
-                    <i t-if="record.hr_icon_display.raw_value == 'presence_holiday_absent'"
-                        class="fa fa-2x fa-plane text-warning me-1" name="presence_absent" role="img"
-                        aria-label="To define" title="On Time Off"
-                    />
-                    <field t-if="record.current_leave_id.raw_value" name="current_leave_id"/>
-                </span>
-            </xpath>
         </field>
     </record>
 
@@ -151,14 +119,8 @@
         <field name="inherit_id" ref="hr.view_employee_form"/>
         <field name = "priority" eval="20" />
         <field name="arch" type="xml">
-            <xpath expr="//div[@id='hr_presence_status']" position="attributes">
-                <attribute name="invisible">not last_activity or not user_id or not id</attribute>
-            </xpath>
-            <xpath expr="//div[@id='hr_presence_status']" position="inside">
-                <!-- Employee is absent, in holiday but he is connected -->
-                <div role="img" class="fa fa-fw fa-plane text-success o_button_icon hr_presence" invisible="hr_icon_display != 'presence_holiday_present'" aria-label="Present but on leave" title="Present but on leave" name="presence_absent_active"/>
-                <!-- Employee is on holiday, not present and not connected -->
-                <div role="img" class="fa fa-fw fa-plane text-warning o_button_icon hr_presence" invisible="hr_icon_display != 'presence_holiday_absent'"  aria-label="On Time Off" title="On Time Off" name="presence_absent"/>
+            <xpath expr="//field[@name='hr_icon_display']" position="attributes">
+                <attribute name="invisible">not last_activity or not id</attribute>
             </xpath>
             <xpath expr="//group[@name='managers']" position="inside">
                 <field name="leave_manager_id" widget="many2one_avatar_user"/>
diff --git a/addons/hr_homeworking/static/src/components/hr_presence_status/hr_presence_status.js b/addons/hr_homeworking/static/src/components/hr_presence_status/hr_presence_status.js
new file mode 100644
index 00000000000..ced6c43b08f
--- /dev/null
+++ b/addons/hr_homeworking/static/src/components/hr_presence_status/hr_presence_status.js
@@ -0,0 +1,65 @@
+/** @odoo-module **/
+
+import { _t } from "@web/core/l10n/translation";
+import { patch } from "@web/core/utils/patch";
+
+import { HrPresenceStatus, hrPresenceStatus } from "@hr/components/hr_presence_status/hr_presence_status";
+
+patch(HrPresenceStatus.prototype, {
+    get color() {
+        if (this.location) {
+            let color = "text-muted";
+            if (this.props.record.data.hr_presence_state !== "to_define") {
+                color = this.props.record.data.hr_presence_state === "present" ?  "text-success" : "text-warning";
+            }
+            return color;
+        }
+        return super.color;
+    },
+
+    get icon() {
+        if (this.location) {
+            switch (this.location) {
+                case "home":
+                    return "fa-home";
+                case "office":
+                    return "fa-building";
+                case "other":
+                    return "fa-map-marker";
+            }
+        }
+        return super.icon;
+    },
+
+    get label() {
+        if (this.location) {
+            return _t("Working from %s", this.location);
+        }
+        return super.label;
+    },
+
+    get location() {
+        let location = this.value?.split("_")[1] || "";
+        if (location && !['home', 'office', 'other'].includes(location)) {
+            location = "";
+        }
+        return location;
+    },
+});
+
+const additionalFieldDependencies = [
+    { name: "hr_presence_state", type: "selection" },
+];
+if (typeof hrPresenceStatus.fieldDependencies === "function") {
+    const oldFieldDependencies = hrPresenceStatus.fieldDependencies;
+    hrPresenceStatus.fieldDependencies = (widgetInfo) => {
+        const fieldDependencies = oldFieldDependencies(widgetInfo);
+        fieldDependencies.push(...additionalFieldDependencies);
+        return fieldDependencies;
+    }
+} else {
+    hrPresenceStatus.fieldDependencies = [
+        ...(hrPresenceStatus.fieldDependencies || []),
+        ...additionalFieldDependencies,
+    ];
+}
diff --git a/addons/hr_homeworking/views/hr_employee_views.xml b/addons/hr_homeworking/views/hr_employee_views.xml
index a950689bd0b..566caa5dfc1 100644
--- a/addons/hr_homeworking/views/hr_employee_views.xml
+++ b/addons/hr_homeworking/views/hr_employee_views.xml
@@ -53,45 +53,8 @@
         <field name="model">hr.employee</field>
         <field name="inherit_id" ref="hr.hr_kanban_view_employees"/>
         <field name="arch" type="xml">
-            <xpath expr="//div[hasclass('o_employee_availability')]" position="inside">
-                <t t-set="text_color" t-value="'text-muted'"/>
-                <t t-if="record.hr_presence_state.raw_value !== 'to_define'">
-                    <t t-set="text_color" t-value="record.hr_presence_state.raw_value === 'present' ? 'text-success' : 'text-warning'"/>
-                </t>
-                <t t-set="location_map" t-value="{'home': 'fa-home', 'office': 'fa-building', 'other': 'fa-map-marker'}"/>
-                <t t-set="location" t-value="record.hr_icon_display.raw_value.split('_')[1]"/>
-                <t t-set="icon" t-value="location_map[location]"/>
-                <t t-if="location !== 'holiday'">
-                    <span class="fa fa-2x" t-attf-class="{{icon}} {{text_color}} d-flex me-2" role="img"
-                        t-attf-aria-label="Working from {{location}}" t-attf-title="Working from {{location}}"
-                        t-attf-name="presence {{record.hr_presence_state.raw_value}} at {{location}}"
-                    />
-                    <field name="name_work_location_display" string="Work Location"/>
-                </t>
-            </xpath>
-        </field>
-    </record>
-
-
-    <record id="hr_employee_public_view_kanban" model="ir.ui.view">
-        <field name="name">hr.employee.kanban.inherit.homeworking</field>
-        <field name="model">hr.employee.public</field>
-        <field name="inherit_id" ref="hr.hr_employee_public_view_kanban"/>
-        <field name="arch" type="xml">
-            <xpath expr="//div[hasclass('o_employee_availability')]" position="inside">
-                <t t-set="text_color" t-value="text-muted"/>
-                <t t-if="record.hr_presence_state.raw_value !== 'to_define'">
-                    <t t-set="text_color" t-value="record.hr_presence_state.raw_value === 'present' ? 'text-success' : 'text-warning'"/>
-                </t>
-                <t t-set="location_map" t-value="{'home': 'fa-home', 'office': 'fa-building', 'other': 'fa-map-marker'}"/>
-                <t t-set="location" t-value="record.hr_icon_display.raw_value.split('_')[1]"/>
-                <t t-set="icon" t-value="location_map[location]"/>
-                <t t-if="location !== 'holiday'">
-                    <span class="fa fa-2x" t-attf-class="{{icon}} {{text_color}}" role="img"
-                        t-att-aria-label="`Working from ${location}`" t-att-title="`Working from ${location}`"
-                        t-att-name="`presence ${record.hr_presence_state.raw_value} at ${location}`"
-                    />
-                </t>
+            <xpath expr="//field[@name='hr_icon_display'][hasclass('o_employee_availability')]" position="after">
+                <field name="name_work_location_display" class="ps-2" string="Work Location"/>
             </xpath>
         </field>
     </record>

From 16c4a54d423131da741fede168cecb4f9d9181fc Mon Sep 17 00:00:00 2001
From: "Xavier Bol (xbo)" <xbo@odoo.com>
Date: Mon, 28 Aug 2023 15:33:29 +0200
Subject: [PATCH 04/18] [ADD] hr_org_chart: add hierarchy view

This commit adds a new view called hierarchy view, that view allows
the user to visualize a hierarchy in a model. For instance, that view
could be used for `hr.employee` to easily visualize the hierarchy
inside the company (the manager and his employees) as an Organization
Chart.
That commit introduces a new method for the hierarchy view, called
`hierarchy_read`, that method will be when the view will be loaded
to get the initial data to display.

Some details for the definition of that new view:
------------------------------------------------

Some attributes can be defined on the `hierarchy` tag:
- `parent_field` (default='parent_id') contains the parent field name
  to use to find the parent record of the current to build the hierarchy.
- `child_field` (optional attribute) contains the child field name
  to use to find the child records (it is in fact the one2many field).
  If that field is defined then some queries can be avoided since we
  directly fetch the children when a read/search_read is done.

Inside the `hierarchy` tag, the fields to read can be added and then
a template as to be defined as we do when we define the kanban view.
The template to create is called `hierarchy-box` and that template
will be used to display the card inside a node in the hierarchy view.

task-3376776
---
 addons/hr_org_chart/__manifest__.py           |   1 +
 addons/hr_org_chart/models/__init__.py        |   3 +
 addons/hr_org_chart/models/ir_actions.py      |   9 +
 addons/hr_org_chart/models/ir_ui_view.py      |  49 ++
 addons/hr_org_chart/models/models.py          |  44 +
 .../views/hierarchy/hierarchy_arch_parser.js  |  66 ++
 .../src/views/hierarchy/hierarchy_card.js     |  67 ++
 .../src/views/hierarchy/hierarchy_card.scss   |  69 ++
 .../src/views/hierarchy/hierarchy_card.xml    |  59 ++
 .../views/hierarchy/hierarchy_controller.js   |  64 ++
 .../views/hierarchy/hierarchy_controller.xml  |  45 +
 .../src/views/hierarchy/hierarchy_model.js    | 792 ++++++++++++++++++
 .../src/views/hierarchy/hierarchy_renderer.js |  41 +
 .../views/hierarchy/hierarchy_renderer.scss   |  64 ++
 .../views/hierarchy/hierarchy_renderer.xml    |  37 +
 .../src/views/hierarchy/hierarchy_view.js     |  36 +
 16 files changed, 1446 insertions(+)
 create mode 100644 addons/hr_org_chart/models/ir_actions.py
 create mode 100644 addons/hr_org_chart/models/ir_ui_view.py
 create mode 100644 addons/hr_org_chart/models/models.py
 create mode 100644 addons/hr_org_chart/static/src/views/hierarchy/hierarchy_arch_parser.js
 create mode 100644 addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.js
 create mode 100644 addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.scss
 create mode 100644 addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.xml
 create mode 100644 addons/hr_org_chart/static/src/views/hierarchy/hierarchy_controller.js
 create mode 100644 addons/hr_org_chart/static/src/views/hierarchy/hierarchy_controller.xml
 create mode 100644 addons/hr_org_chart/static/src/views/hierarchy/hierarchy_model.js
 create mode 100644 addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.js
 create mode 100644 addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.scss
 create mode 100644 addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.xml
 create mode 100644 addons/hr_org_chart/static/src/views/hierarchy/hierarchy_view.js

diff --git a/addons/hr_org_chart/__manifest__.py b/addons/hr_org_chart/__manifest__.py
index ba4038c1888..da05f79ac54 100644
--- a/addons/hr_org_chart/__manifest__.py
+++ b/addons/hr_org_chart/__manifest__.py
@@ -24,6 +24,7 @@ This module extend the employee form with a organizational chart.
         ],
         'web.assets_backend': [
             'hr_org_chart/static/src/fields/*',
+            'hr_org_chart/static/src/views/**/*',
         ],
         'web.qunit_suite_tests': [
             'hr_org_chart/static/tests/**/*',
diff --git a/addons/hr_org_chart/models/__init__.py b/addons/hr_org_chart/models/__init__.py
index 27f11d1b306..b51ad54cfff 100644
--- a/addons/hr_org_chart/models/__init__.py
+++ b/addons/hr_org_chart/models/__init__.py
@@ -3,3 +3,6 @@
 
 from . import hr_org_chart_mixin
 from . import hr_employee
+from . import ir_actions
+from . import ir_ui_view
+from . import models
diff --git a/addons/hr_org_chart/models/ir_actions.py b/addons/hr_org_chart/models/ir_actions.py
new file mode 100644
index 00000000000..74ae4fa9844
--- /dev/null
+++ b/addons/hr_org_chart/models/ir_actions.py
@@ -0,0 +1,9 @@
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+
+from odoo import fields, models
+
+
+class ActWindowView(models.Model):
+    _inherit = 'ir.actions.act_window.view'
+
+    view_mode = fields.Selection(selection_add=[('hierarchy', 'Hierarchy')], ondelete={'hierarchy': 'cascade'})
diff --git a/addons/hr_org_chart/models/ir_ui_view.py b/addons/hr_org_chart/models/ir_ui_view.py
new file mode 100644
index 00000000000..052866066e9
--- /dev/null
+++ b/addons/hr_org_chart/models/ir_ui_view.py
@@ -0,0 +1,49 @@
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+
+from lxml import etree
+
+from odoo import fields, models, _
+
+HIERARCHY_VALID_ATTRIBUTES = {
+    '__validate__',                     # ir.ui.view implementation detail
+    'class',
+    'js_class',
+    'string',
+    'create',
+    'edit',
+    'delete',
+    'parent_field',
+    'child_field',
+}
+
+class View(models.Model):
+    _inherit = 'ir.ui.view'
+
+    type = fields.Selection(selection_add=[('hierarchy', "Hierarchy")])
+
+    def _is_qweb_based_view(self, view_type):
+        return super()._is_qweb_based_view(view_type) or view_type == "hierarchy"
+
+    def _validate_tag_hierarchy(self, node, name_manager, node_info):
+        if not node_info['validate']:
+            return
+
+        templates_count = 0
+        for child in node.iterchildren(tag=etree.Element):
+            if child.tag == 'templates':
+                if not templates_count:
+                    templates_count += 1
+                else:
+                    msg = _('Hierarchy view can contain only one templates tag')
+                    self._raise_view_error(msg, child)
+            elif child.tag != 'field':
+                msg = _('Hierarchy child can only be field or template, got %s', child.tag)
+                self._raise_view_error(msg, child)
+
+        remaining = set(node.attrib) - HIERARCHY_VALID_ATTRIBUTES
+        if remaining:
+            msg = _(
+                "Invalid attributes (%s) in hierarchy view. Attributes must be in (%s)",
+                ','.join(remaining), ','.join(HIERARCHY_VALID_ATTRIBUTES),
+            )
+            self._raise_view_error(msg, node)
diff --git a/addons/hr_org_chart/models/models.py b/addons/hr_org_chart/models/models.py
new file mode 100644
index 00000000000..e4260f83fac
--- /dev/null
+++ b/addons/hr_org_chart/models/models.py
@@ -0,0 +1,44 @@
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+
+from odoo import api, models
+
+
+class Base(models.AbstractModel):
+    _inherit = 'base'
+
+    @api.model
+    def hierarchy_read(self, domain, fields, parent_field, child_field=None):
+        if parent_field not in fields:
+            fields.append(parent_field)
+        records = self.search(domain)
+        focus_record = self.env[self._name]
+        fetch_child_ids_for_all_records = False
+        if len(records) == 1:
+            domain = [(parent_field, '=', records.id), ('id', '!=', records.id)]
+            if records[parent_field]:
+                focus_record = records
+                records += focus_record[parent_field]
+                domain = [('id', 'not in', records.ids), (parent_field, 'in', records.ids)]
+            records += self.search(domain)
+        elif not records:
+            records = self.search([(parent_field, '=', False)])
+        else:
+            fetch_child_ids_for_all_records = True
+        children_ids_per_record_id = {}
+        if not child_field:
+            children_ids_per_record_id = {
+                record.id: child_ids
+                for record, child_ids in self._read_group(
+                    [(parent_field, 'in', records.ids if fetch_child_ids_for_all_records else (records - records[parent_field]).ids)],
+                    (parent_field,),
+                    ('id:array_agg',),
+                )
+            }
+        result = records.read(fields)
+        if children_ids_per_record_id or focus_record:
+            for record_data in result:
+                if record_data['id'] in children_ids_per_record_id:
+                    record_data['__child_ids__'] = children_ids_per_record_id[record_data['id']]
+                if record_data['id'] == focus_record.id:
+                    record_data['__focus__'] = True
+        return result
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_arch_parser.js b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_arch_parser.js
new file mode 100644
index 00000000000..2e21af269b9
--- /dev/null
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_arch_parser.js
@@ -0,0 +1,66 @@
+/** @odoo-module */
+
+import { visitXML } from "@web/core/utils/xml";
+import { Field } from "@web/views/fields/field";
+import { getActiveActions } from "@web/views/utils";
+
+export class HierarchyArchParser {
+    parse(xmlDoc, models, modelName) {
+        const archInfo = {
+            activeActions: getActiveActions(xmlDoc),
+            parentFieldName: "parent_id",
+            fieldNodes: {},
+            templateDocs: {},
+            xmlDoc,
+        };
+        const fieldNextIds = {};
+        const fields = models[modelName];
+
+        visitXML(xmlDoc, (node) => {
+            if (node.hasAttribute("t-name")) {
+                archInfo.templateDocs[node.getAttribute("t-name")] = node;
+                return;
+            }
+            if (node.tagName === "hierarchy") {
+                if (node.hasAttribute("parent_field")) {
+                    const parentFieldName = node.getAttribute("parent_field");
+                    if (!(parentFieldName in fields)) {
+                        throw new Error(`The parent field set (${parentFieldName}) is not defined in the model (${modelName}).`);
+                    } else if (fields[parentFieldName].type !== "many2one") {
+                        throw new Error(`Invalid parent field, it should be a Many2One field.`);
+                    } else if (fields[parentFieldName].relation !== modelName) {
+                        throw new Error(`Invalid parent field, the co-model should be same model than the current one (expected: ${modelName}).`);
+                    }
+                    archInfo.parentFieldName = parentFieldName;
+                }
+                if (node.hasAttribute("child_field")) {
+                    const childFieldName = node.getAttribute("child_field");
+                    if (!(childFieldName in fields)) {
+                        throw new Error(`The child field set (${childFieldName}) is not defined in the model (${modelName}).`);
+                    } else if (fields[childFieldName].type !== "one2many") {
+                        throw new Error(`Invalid child field, it should be a One2Many field.`);
+                    } else if (fields[childFieldName].relation !== modelName) {
+                        throw new Error(`Invalid child field, the co-model should be same model than the current one (expected: ${modelName}).`);
+                    }
+                    archInfo.childFieldName = childFieldName;
+                }
+            } else if (node.tagName === "field") {
+                const fieldInfo = Field.parseFieldNode(node, models, modelName, "hierarchy");
+                const name = fieldInfo.name;
+                if (!(name in fieldNextIds)) {
+                    fieldNextIds[name] = 0;
+                }
+                const fieldId = `${name}_${fieldNextIds[name]++}`;
+                archInfo.fieldNodes[fieldId] = fieldInfo;
+                node.setAttribute("field_id", fieldId);
+            }
+        });
+
+        const cardDoc = archInfo.templateDocs["hierarchy-box"];
+        if (!cardDoc) {
+            throw new Error("Missing 'hierarchy-box' template.");
+        }
+
+        return archInfo;
+    }
+}
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.js b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.js
new file mode 100644
index 00000000000..38a48a24018
--- /dev/null
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.js
@@ -0,0 +1,67 @@
+/** @odoo-module */
+
+import { Component } from "@odoo/owl";
+
+import { Field } from "@web/views/fields/field";
+import { Record } from "@web/views/record";
+import { ViewButton } from "@web/views/view_button/view_button";
+import { useViewCompiler } from "@web/views/view_compiler";
+
+import { OrgChartCompiler } from "./hierarchy_compiler";
+import { getFormattedRecord } from "@web/views/kanban/kanban_record";
+
+export class HierarchyCard extends Component {
+    static components = {
+        Record,
+        Field,
+        ViewButton,
+    };
+    static props = {
+        node: Object,
+        openRecord: Function,
+        archInfo: Object,
+        templates: Object,
+        classNames: { type: String, optional: true },
+    };
+    static defaultProps = {
+        classNames: "",
+    };
+    static template = "hr_org_chart.HierarchyCard";
+    static Compiler = OrgChartCompiler;
+
+    setup() {
+        const { templates } = this.props;
+        this.templates = useViewCompiler(this.constructor.Compiler, templates);
+    }
+
+    getRenderingContext(data) {
+        const record = getFormattedRecord(data.record);
+        return {
+            context: this.props.node.context,
+            JSON,
+            luxon,
+            record,
+            __comp__: Object.assign(Object.create(this), { this: this }),
+            __record__: data.record,
+        };
+    }
+
+    onGlobalClick(ev) {
+        if (ev.target.closest("button")) {
+            return;
+        }
+        this.props.openRecord(this.props.node);
+    }
+
+    onClickArrowUp(ev) {
+        this.props.node.fetchParentNode();
+    }
+
+    onClickArrowDown(ev) {
+        if (this.props.node.nodes.length) {
+            this.props.node.collapseChildNodes();
+        } else {
+            this.props.node.showChildNodes();
+        }
+    }
+}
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.scss b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.scss
new file mode 100644
index 00000000000..79d8128538b
--- /dev/null
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.scss
@@ -0,0 +1,69 @@
+@mixin o-hierarchy-node-color {
+    @for $size from 2 through length($o-colors) {
+        // Note: the first color is not defined as it is the 'no color' for org chart node
+        .o_hierarchy_node_color_#{$size - 1} {
+            background-color: nth($o-colors, $size);
+        }
+    }
+}
+
+.o_hierarchy_node_container {
+    width: 250px;
+    min-height: 130px;
+
+    .o_hierarchy_node_button_container {
+        height: 30px;
+    }
+
+    .o_hierarchy_node {
+        &:hover {
+            cursor: pointer;
+        }
+
+        &.o_hierarchy_node_highlighted {
+            border: 3px solid green;
+        }
+
+        .o_hierarchy_node_header {
+            height: 30px;
+
+            div.o_field_background_image {
+                width: 48px;
+                height: 48px;
+                margin-bottom: -24px;
+                transform: translateY(-24px);
+                z-index: 1;
+
+                > img {
+                    border-radius: 50%;
+                }
+            }
+        }
+
+        .o_hierarchy_node_body {
+            height: 65px;
+
+            .o_employee_availability {
+                position: absolute;
+                top: 4px;
+                right: 2px;
+            }
+        }
+
+        .o_hierarchy_node_footer {
+            height: 30px;
+        }
+
+        .o_hierarchy_node_color_0 {
+            background-color: $gray-200;
+        }
+
+        @include o-hierarchy-node-color;
+    }
+
+    .o_hierarchy_node_button {
+        display: grid;
+        grid-template-columns: 50px 1fr 50px;
+        border-radius: 0;
+    }
+}
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.xml b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.xml
new file mode 100644
index 00000000000..9e211062b88
--- /dev/null
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.xml
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<templates>
+
+    <t t-name="hr_org_chart.HierarchyCard">
+        <div class="o_hierarchy_node_container mb-4 d-flex flex-column" t-att-class="props.classNames">
+            <div class="o_hierarchy_node_button_container w-100 d-flex justify-content-end">
+                <button t-if="props.node.parentResId !== false and !props.node.parentNode"
+                        name="hierarchy_search_parent_node"
+                        class="btn p-0"
+                        t-on-click.synthetic="onClickArrowUp"
+                >
+                    <i class="fa fa-chevron-up"/>
+                </button>
+            </div>
+            <div class="o_hierarchy_node w-100 h-100 d-flex flex-column justify-content-between"
+                t-att-class="{
+                    o_hierarchy_node_highlighted: props.node.isFocused,
+                    border: !props.node.isFocused,
+                    'border-bottom-0': !props.node.isFocused and (props.node.nodes.length or props.node.canShowChildNodes),
+                }"
+                t-att-data-node-id="props.node.id"
+                t-on-click.synthetic="onGlobalClick"
+            >
+                <div class="o_hierarchy_node_content">
+                    <Record resModel="props.node.model.resModel"
+                            resId="props.node.resId"
+                            fields="props.node.model.fields"
+                            activeFields="props.node.model.activeFields"
+                            values="props.node.data"
+                            t-slot-scope="data"
+                    >
+                        <t t-call="{{ templates['hierarchy-box'] }}" t-call-context="getRenderingContext(data)"/>
+                    </Record>
+                </div>
+                <button t-if="props.node.nodes.length or props.node.canShowChildNodes"
+                        name="hierarchy_search_subsidiaries"
+                        t-att-class="{
+                            'o_hierarchy_node_button w-100 btn pt-1': true,
+                            'btn-primary': !props.node.nodes.length,
+                            'btn-secondary': props.node.nodes.length > 0,
+                        }"
+                        t-on-click.synthetic="onClickArrowDown"
+                >
+                    <t t-if="!props.node.nodes.length">
+                        <span style="grid-column: 2;">
+                            Unfold
+                        </span>
+                    </t>
+                    <t t-else="">
+                        <span style="grid-column: 2;">
+                            Fold
+                        </span>
+                    </t>
+                </button>
+            </div>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_controller.js b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_controller.js
new file mode 100644
index 00000000000..4e83a538fbe
--- /dev/null
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_controller.js
@@ -0,0 +1,64 @@
+/** @odoo-module */
+
+import { Component, useRef } from "@odoo/owl";
+
+import { useBus } from "@web/core/utils/hooks";
+import { useModel } from "@web/model/model";
+import { addFieldDependencies, extractFieldsFromArchInfo } from "@web/model/relational_model/utils";
+import { CogMenu } from "@web/search/cog_menu/cog_menu";
+import { Layout } from "@web/search/layout";
+import { SearchBar } from "@web/search/search_bar/search_bar";
+import { useSearchBarToggler } from "@web/search/search_bar/search_bar_toggler";
+import { standardViewProps } from "@web/views/standard_view_props";
+import { useViewButtons } from "@web/views/view_button/view_button_hook";
+
+export class HierarchyController extends Component {
+    static components = {
+        Layout,
+        CogMenu,
+        SearchBar,
+    };
+    static props = {
+        ...standardViewProps,
+        Model: Function,
+        Renderer: Function,
+        buttonTemplate: String,
+        archInfo: Object,
+    };
+    static template = "hr_org_chart.HierarchyView";
+
+    setup() {
+        this.rootRef = useRef("root");
+        const { parentFieldName, childFieldName } = this.props.archInfo;
+        const { activeFields, fields } = extractFieldsFromArchInfo(this.props.archInfo, this.props.fields);
+        addFieldDependencies(activeFields, fields, [{ name: parentFieldName }]);
+        this.model = useModel(this.props.Model, {
+            resModel: this.props.resModel,
+            activeFields,
+            fields,
+            parentFieldName,
+            childFieldName,
+        });
+        useBus(
+            this.model.bus,
+            "update",
+            () => {
+                this.render(true);
+            }
+        );
+        useViewButtons(this.model, this.rootRef, {
+            beforeExecuteAction: this.beforeExecuteActionButton.bind(this),
+            afterExecuteAction: this.afterExecuteActionButton.bind(this),
+        });
+        this.searchBarToggler = useSearchBarToggler();
+    }
+
+    async openRecord(node, mode) {
+        const activeIds = this.model.root.resIds;
+        this.props.selectRecord(node.resId, { activeIds, mode });
+    }
+
+    async beforeExecuteActionButton(clickParams) {}
+
+    async afterExecuteActionButton(clickParams) {}
+}
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_controller.xml b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_controller.xml
new file mode 100644
index 00000000000..f014ffb3f51
--- /dev/null
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_controller.xml
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<templates>
+    <t t-name="hr_org_chart.HierarchyButtons" owl="1">
+        <div class="d-flex o_grid_buttons">
+            <div class="me-2" t-if="props.archInfo.activeActions.create and (!props.archInfo.createInline or displayNoContent)">
+                <button class="btn btn-primary o_hierarchy_button_add"
+                        type="button"
+                        t-on-click="props.createRecord">
+                    New
+                </button>
+            </div>
+        </div>
+    </t>
+    <t t-name="hr_org_chart.HierarchyView" owl="1">
+        <div t-attf-class="o_hierarchy_view {{ isMobile ? 'o_action_delegate_scroll' : '' }} {{ props.className }}" t-ref="root">
+            <Layout className="(model.useSampleModel ? 'o_view_sample_data' : '') + ' d-flex'" display="props.display">
+                <t t-set-slot="control-panel-additional-actions">
+                    <CogMenu/>
+                </t>
+                <t t-set-slot="layout-buttons">
+                    <t t-call="{{ props.buttonTemplate }}"/>
+                </t>
+                <t t-set-slot="layout-actions">
+                    <SearchBar t-if="searchBarToggler.state.showSearchBar"/>
+                </t>
+                <t t-set-slot="control-panel-navigation-additional">
+                    <t t-component="searchBarToggler.component" t-props="searchBarToggler.props"/>
+                </t>
+                <t t-set-slot="default" t-slot-scope="layout">
+                    <t t-if="displayNoContent">
+                        <t t-call="web.ActionHelper">
+                            <t t-set="noContentHelp" t-value="props.info.noContentHelp"/>
+                        </t>
+                    </t>
+                    <t t-component="props.Renderer"
+                        model="model"
+                        openRecord.bind="openRecord"
+                        archInfo="props.archInfo"
+                        templates="props.archInfo.templateDocs"
+                    />
+                </t>
+            </Layout>
+        </div>
+    </t>
+</templates>
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_model.js b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_model.js
new file mode 100644
index 00000000000..f9d4787ddd9
--- /dev/null
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_model.js
@@ -0,0 +1,792 @@
+/** @odoo-module */
+
+import { Domain } from "@web/core/domain";
+import { KeepLast, Mutex } from "@web/core/utils/concurrency";
+import { Model } from "@web/model/model";
+
+let nodeId = 0;
+let forestId = 0;
+let treeId = 0;
+
+/**
+ * Get the id of the given many2one field value
+ *
+ * @param {false | [Number, string]} value many2one value
+ * @returns {false | Number} id of the many2one
+ */
+function getIdOfMany2oneField(value) {
+    return value && value[0];
+}
+
+export class HierarchyNode {
+    /**
+     * Constructor of hierarchy node stored in hierarchy tree
+     *
+     * @param {HierarchyModel} model
+     * @param {Object} config
+     * @param {Object} data
+     * @param {HierarchyTree} tree
+     * @param {HierarchyNode} parentNode
+     * @param {Boolean} populateChildNodes
+     */
+    constructor(model, config, data, tree, parentNode = null, populateChildNodes = true) {
+        this.id = nodeId++;
+        this.data = data;
+        this.parentNode = parentNode;
+        this.tree = tree;
+        this.model = model;
+        this._config = config;
+        tree.addNode(this);
+        if (populateChildNodes) {
+            this.populateChildNodes();
+        }
+    }
+
+    /**
+     * Get ancestor node
+     *
+     * @returns {HierarchyNode} ancestor node
+     */
+    get ancestorNode() {
+        return this.parentNode ? this.ancestorNode : this;
+    }
+
+    /**
+     * Is leaf?
+     *
+     * @returns {Boolean} False if the current node has node as child nodes, otherwise True.
+     */
+    get isLeaf() {
+        return !this.nodes.length;
+    }
+
+    /**
+     * Get forest of the current node
+     *
+     * @returns {HierarchyForest}
+     */
+    get forest() {
+        return this.tree.forest;
+    }
+
+    /**
+     * Get the resId of current node
+     *
+     * @returns {Number}
+     */
+    get resId() {
+        return this.data.id;
+    }
+
+    /**
+     * Is the current node focused?
+     *
+     * @returns {Boolean}
+     */
+    get isFocused() {
+        return Boolean(this.data.__focus__);
+    }
+
+    /**
+     * Get parent field name
+     *
+     * @returns {String}
+     */
+    get parentFieldName() {
+        return this.model.parentFieldName;
+    }
+
+    /**
+     * Get parent res id
+     *
+     * @returns {Number}
+     */
+    get parentResId() {
+        return this.parentNode?.resId || getIdOfMany2oneField(this.data[this.parentFieldName]);
+    }
+
+    /**
+     * Get child node res ids
+     *
+     * @returns {Number[]}
+     */
+    get childResIds() {
+        return this.nodes.length ? this.nodes.map((node) => node.resId) : this.data[this.childFieldName]?.map((d) => typeof d === "number" ? d : d.id) || [];
+    }
+
+    /**
+     * Get child field name
+     *
+     * @returns {String}
+     */
+    get childFieldName() {
+        return this.model.childFieldName || this.model.defaultChildFieldName;
+    }
+
+    /**
+     * Has child nodes?
+     *
+     * @returns {Boolean}
+     */
+    get hasChildren() {
+        return this.nodes.length > 0 || this.data[this.childFieldName]?.length > 0;
+    }
+
+    /**
+     * Can show parent node
+     *
+     * Knows if the parent node can be fetched and displayed inside the view
+     *
+     * @returns {Boolean} True if the current node has a parent node but it is not yet displayed and the data of the
+     *                    current node is not already displayed in another node.
+     */
+    get canShowParentNode() {
+        return Boolean(this.parentResId)
+            && !this.parentNode
+            && this.tree.forest.resIds.filter((resId) => resId === this.resId).length === 1;
+    }
+
+
+    /**
+     * Can show child nodes
+     *
+     * Knows if the child nodes can be fetched and displayed inside the view
+     *
+     * @returns {Boolean} True if the current node has child nodes but they are not yet displayed and the data of the
+     *                    current node is not already displayed in another node.
+     */
+    get canShowChildNodes() {
+        return this.hasChildren
+            && this.nodes.length === 0
+            && this.tree.forest.resIds.filter((resId) => resId === this.resId).length === 1;
+    }
+
+    get descendantNodes() {
+        const subNodes = [];
+        if (!this.isLeaf) {
+            subNodes.push(...this.nodes);
+            for (const node of this.nodes) {
+                if (node.descendantNodes.length) {
+                    subNodes.push(...node.descendantNodes);
+                }
+            }
+        }
+        return subNodes;
+    }
+
+    /**
+     * Get all descendants nodes resIds
+     *
+     * @returns {Number[]}
+     */
+    get allSubsidiaryResIds() {
+        return this.descendantNodes.map((n) => n.resId);
+    }
+
+    /**
+     * Populate child nodes
+     *
+     * Uses to create child nodes of the current one according to its data.
+     */
+    populateChildNodes() {
+        this.nodes = [];
+        const children = this.data[this.childFieldName] || [];
+        if (
+            children.length
+            && children[0] instanceof Object
+            && this.tree.forest.resIds.filter((resId) => resId === this.resId).length === 1
+        ) {
+            this.createChildNodes(children);
+        }
+    }
+
+    /**
+     * create child nodes
+     *
+     * @param {Object[]} childNodesData data of child nodes to generate
+     */
+    createChildNodes(childNodesData) {
+        this.nodes = (childNodesData || this.data[this.childFieldName]).map(
+            (childData) =>
+                new HierarchyNode(
+                    this.model,
+                    this._config,
+                    childData,
+                    this.tree,
+                    this
+                )
+        );
+    }
+
+    /**
+     * Fetch parent node
+     */
+    async fetchParentNode() {
+        await this.model.fetchManager(this);
+    }
+
+    /**
+     * Fetch child nodes
+     */
+    async showChildNodes() {
+        await this.model.fetchSubordinates(this);
+    }
+
+    /**
+     * Collapse child nodes
+     *
+     * Removes the descendant nodes of the current one and stores
+     * the resIds of the child nodes in the data of the current one
+     * to know it has child nodes to be able to show them again
+     * when it is needed.
+     */
+    collapseChildNodes() {
+        const childrenData = [];
+        for (const childNode of this.nodes) {
+            childNode.data[this.childFieldName] = childNode.childResIds;
+            childrenData.push(childNode.data);
+        }
+        this.data[this.childFieldName] = childrenData;
+        this.removeChildNodes();
+        this.model.notify();
+    }
+
+    /**
+     * Remove descendant nodes of the current one
+     */
+    removeChildNodes() {
+        for (const childNode of this.nodes) {
+            if (!childNode.isLeaf) {
+                childNode.removeChildNodes();
+            }
+        }
+        this.tree.removeNodes(this.nodes);
+        this.nodes = [];
+    }
+
+    /**
+     * Set parent node to the current node
+     *
+     * @param {HierarchyNode} node parent node to set
+     */
+    setParentNode(node) {
+        this.parentNode = node;
+        node.addChildNode(this);
+        const tree = node.tree;
+        if (tree.root === this) {
+            tree.root = node;
+        } else if (this.tree.root === this) {
+            this.tree.removeRoot();
+            this.setTree(node.tree);
+        }
+    }
+
+    setTree(tree) {
+        this.tree = tree;
+        for (const childNode of this.nodes) {
+            childNode.setTree(tree);
+        }
+    }
+
+    /**
+     * Adds child node to the current node
+     *
+     * @param {HierarchyNode} node child node to add
+     */
+    addChildNode(node) {
+        this.nodes.push(node);
+        this.data[this.childFieldName].push(node.data);
+        this.tree.addNode(node);
+    }
+}
+
+export class HierarchyTree {
+    /**
+     * Constructor
+     *
+     * @param {HierarchyModel} model
+     * @param {Object} config config of the model
+     * @param {Object} data root node data of the tree to create
+     * @param {HierarchyForest} forest hierarchy forest containing the tree to create
+     */
+    constructor(model, config, data, forest) {
+        this.id = treeId++;
+        this.nodePerNodeId = {};
+        this.forest = forest;
+        this.root = new HierarchyNode(model, config, data, this);
+        this.forest.nodePerNodeId = {
+            ...this.forest.nodePerNodeId,
+            ...this.nodePerNodeId,
+        };
+        this.model = model;
+        this._config = config;
+    }
+
+    /**
+     * Get node res ids inside the current tree
+     *
+     * @returns {Number}
+     */
+    get resIds() {
+        return Object.values(this.nodePerNodeId).map((node) => node.resId);
+    }
+
+    /**
+     * Add node inside the current tree
+     *
+     * @param {HierarchyNode} node node to add inside the current tree
+     */
+    addNode(node) {
+        this.nodePerNodeId[node.id] = node;
+        this.forest.addNode(node);
+    }
+
+    /**
+     * Remove nodes inside the current tree
+     *
+     * @param {HierarchyNode} nodes nodes to remove
+     */
+    removeNodes(nodes) {
+        const nodeIds = nodes.map((node) => node.id);
+        this.nodePerNodeId = Object.fromEntries(
+            Object.entries(this.nodePerNodeId)
+                .filter(
+                    ([nodeId,]) => !nodeIds.includes(Number(nodeId))
+                )
+            );
+        this.forest.removeNodes(nodes);
+    }
+
+    removeRoot() {
+        this.forest.removeTree(this);
+    }
+}
+
+export class HierarchyForest {
+    /**
+     *
+     * @param {HierarchyModel} model
+     * @param {Object} config model config
+     * @param {Object[]} data list of tree root nodes data
+     */
+    constructor(model, config, data) {
+        this.id = forestId++;
+        this.nodePerNodeId = {};
+        this.trees = data.map((d) => new HierarchyTree(model, config, d, this));
+        this.model = model;
+        this._config = config;
+    }
+
+    /**
+     * Get node res ids containing inside the current forest
+     *
+     * @returns {Number}
+     */
+    get resIds() {
+        return Object.values(this.nodePerNodeId).map((node) => node.resId);
+    }
+
+    /**
+     * Get root node of all trees inside the current forest
+     *
+     * @returns {HierarchyNode[]} root nodes
+     */
+    get rootNodes() {
+        return this.trees.map((t) => t.root);
+    }
+
+    /**
+     * Add a node inside the current forest
+     *
+     * @param {HierarchyNode} node node to add inside the current forest
+     */
+    addNode(node) {
+        this.nodePerNodeId[node.id] = node;
+    }
+
+    /**
+     * Removes nodes inside the current forest
+     *
+     * @param {HierarchyNode} nodes nodes to remove inside the current forest
+     */
+    removeNodes(nodes) {
+        const nodeIds = nodes.map((node) => node.id);
+        this.nodePerNodeId = Object.fromEntries(
+            Object.entries(this.nodePerNodeId)
+                .filter(
+                    ([nodeId,]) => !nodeIds.includes(Number(nodeId))
+                )
+        );
+    }
+
+    removeTree(tree) {
+        this.nodePerNodeId = Object.fromEntries(
+            Object.entries(this.nodePerNodeId)
+                .filter(
+                    ([nodeId, ]) => !(nodeId in tree.nodePerNodeId)
+                )
+        );
+        this.trees = this.trees.filter((t) => t.id !== tree.id);
+    }
+}
+
+export class HierarchyModel extends Model {
+    setup(params) {
+        this.keepLast = new KeepLast();
+        this.mutex = new Mutex();
+        this.resModel = params.resModel;
+        this.fields = params.fields;
+        this.parentFieldName = params.parentFieldName;
+        this.childFieldName = params.childFieldName;
+        this.activeFields = params.activeFields;
+        this.config = {
+            domain: this.defaultDomain,
+            isRoot: true,
+        };
+    }
+
+    /**
+     * Get parent field info
+     *
+     * @returns {Object} parent field info
+     */
+    get parentField() {
+        return this.fields[this.parentFieldName];
+    }
+
+    /**
+     * Get res ids of all nodes displayed in the view
+     *
+     * @returns {Number[]} resIds of all nodes displayed in the view
+     */
+    get resIds() {
+        return this.root?.resIds || [];
+    }
+
+    /**
+     * Get default child field name when no child field name is given to the view
+     *
+     * @returns {String} default child field name to use
+     */
+    get defaultChildFieldName() {
+        return "__child_ids__";
+    }
+
+    /**
+     * Get active fields name
+     *
+     * @returns {String[]} active fields name
+     */
+    get activeFieldNames() {
+        return Object.keys(this.activeFields);
+    }
+
+    /**
+     * Get default domain to use, when no domain is given in the config
+     *
+     * @returns {import("@web/src/core/domain").DomainListRepr} default domain
+     */
+    get defaultDomain() {
+        return [[this.parentFieldName, '=', false]];
+    }
+
+    /**
+     * Get fields to fetch
+     * @returns {String[]} fields to fetch
+     */
+    get fieldsToFetch() {
+        const fieldsToFetch = [
+            ...this.activeFieldNames,
+        ];
+        if (this.childFieldName) {
+            fieldsToFetch.push(this.childFieldName);
+        }
+        return fieldsToFetch;
+    }
+
+    /**
+     * Load the config and data for hierarchy view
+     *
+     * @param {Object} params params to use to load data of hierarchy view
+     */
+    async load(params = {}) {
+        nodeId = forestId = treeId = 0;
+        const config = this._getNextConfig(this.config, params);
+        const data = await this.keepLast.add(this._loadData(config));
+        this.root = this._createRoot(config, data);
+        this.config = config;
+        this.notify();
+    }
+
+    /**
+     * Fetch parent node of given node
+     * @param {HierarchyNode} node node to fetch its parent node
+     */
+    async fetchManager(node) {
+        if (this.root.trees.length > 1) { // reset the hierarchy
+            const treeExpanded = this._findTreeExpanded();
+            const resIdsToFetch = [node.parentResId, node.resId, ...node.allSubsidiaryResIds];
+            if (treeExpanded && treeExpanded.root.id !== node.id && treeExpanded.root.parentResId === node.parentResId) {
+                resIdsToFetch.push(...treeExpanded.root.allSubsidiaryResIds);
+            }
+            const config = {
+                ...this.config,
+                domain: ["|", [this.parentFieldName, "=", node.parentResId], ["id", "in", resIdsToFetch]],
+            }
+            const data = await this._loadData(config);
+            this.root = this._createRoot(config, data);
+            this.notify();
+            return;
+        }
+        const managerData = await this.keepLast.add(this._fetchManager(node));
+        if (managerData) {
+            const parentNode = new HierarchyNode(this, this.config, managerData, node.tree, null, false);
+            parentNode.createChildNodes();
+            node.setParentNode(parentNode);
+            this.notify();
+        }
+    }
+
+    /**
+     * Fetch child nodes of given node
+     *
+     * @param {HierarchyNode} node node to fetch its child nodes
+     */
+    async fetchSubordinates(node) {
+        const childFieldName = this.childFieldName || this.defaultChildFieldName;
+        const children = node.data[childFieldName];
+        if (children.length) {
+            const nodesToUpdate = [];
+            if (!(children[0] instanceof Object)) {
+                const allNodeResIds = this.root.resIds;
+                const existingChildResIds = children.filter((childResId) => allNodeResIds.includes(childResId))
+                if (existingChildResIds.length) { // special case with result found with the search view
+                    for (const tree of this.root.trees) {
+                        if (existingChildResIds.includes(tree.root.resId)) {
+                            nodesToUpdate.push(tree.root);
+                        }
+                    }
+                }
+                const data = await this.keepLast.add(this._fetchSubordinates(node, existingChildResIds));
+                if (data && data.length) {
+                    node.data[childFieldName] = data;
+                }
+            }
+            const nodeToCollapse = this._searchNodeToCollapse(node);
+            if (nodeToCollapse && !nodesToUpdate.includes(nodeToCollapse)) {
+                nodeToCollapse.collapseChildNodes();
+            }
+            node.populateChildNodes();
+            for (const n of nodesToUpdate) {
+                n.setParentNode(node);
+            }
+            this.notify();
+        }
+    }
+
+    /**
+     * Search node to collapse to be able to show the child nodes of node given in parameter
+     *
+     * @param {HierarchyNode} node node to show its child nodes.
+     * @returns {HierarchyNode | null} node found to collapse
+     */
+    _searchNodeToCollapse(node) {
+        const parentNode = node.parentNode;
+        let nodeToCollapse = null;
+        if (parentNode) {
+            nodeToCollapse = parentNode.nodes.find((n) => n.nodes.length);
+        } else {
+            const treeExpanded = this._findTreeExpanded();
+            if (treeExpanded) {
+                nodeToCollapse = treeExpanded.root;
+            }
+        }
+        return nodeToCollapse;
+    }
+
+    _findTreeExpanded() {
+        return this.root.trees.find((t) => t.root.nodes.length);
+    }
+
+    /**
+     * Get the next model config to use
+     *
+     * @param {Object} currentConfig current model config used
+     * @param {Object} params new params
+     * @returns {Object} new model config to use
+     */
+    _getNextConfig(currentConfig, params) {
+        const config = Object.assign({}, currentConfig);
+        config.context = "context" in params ? params.context : config.context;
+        if ("domain" in params) {
+            config.domain = params.domain;
+            if (!params.domain.length) {
+                config.domain = this.defaultDomain;
+            }
+        }
+        return config;
+    }
+
+    /**
+     * Load data for hierarchy view
+     *
+     * @param {Object} config model config
+     * @returns {Object[]} main data for hierarchy view
+     */
+    async _loadData(config) {
+        const result = await this.orm.call(
+            this.resModel,
+            "hierarchy_read",
+            [config.domain, this.fieldsToFetch, this.parentFieldName, this.childFieldName],
+            {
+                context: config.context,
+            },
+        );
+        const resultStringified = JSON.stringify(result);
+        const recordsPerParentId = {};
+        const recordPerId = {};
+        let focusedRecord = null;
+        for (const record of result) {
+            if (record.__focus__) {
+                focusedRecord = record;
+            }
+            recordPerId[record.id] = record;
+            const parentId = getIdOfMany2oneField(record[this.parentFieldName]);
+            if (!(parentId.toString() in recordsPerParentId)) {
+                recordsPerParentId[parentId] = [];
+            }
+            recordsPerParentId[parentId].push(record);
+        }
+        const data = [];
+        const parentId = focusedRecord ? getIdOfMany2oneField(focusedRecord[this.parentFieldName]) : false;
+        const parentFocusedRecord = parentId && parentId in recordPerId ? recordPerId[parentId.toString()] : { id: false };
+        const recordIds = []; // to check if we have only one arborescence to display otherwise we display the result as the kanban view
+        for (const [parentId, records] of Object.entries(recordsPerParentId)) {
+            if (!parentId || !(parentId in recordPerId)) {
+                data.push(...records);
+            } else {
+                const parentRecord = recordPerId[parentId];
+                if (recordIds.includes(parentRecord.id)) {
+                    return JSON.parse(resultStringified);
+                }
+                const ancestorId = getIdOfMany2oneField(parentRecord[this.parentFieldName]);
+                if (ancestorId in recordsPerParentId) {
+                    recordIds.push(...recordsPerParentId[ancestorId].map((r) => r.id));
+                }
+                parentRecord[this.childFieldName || this.defaultChildFieldName] = records;
+            }
+        }
+        if (!data.length && result?.length) {
+            if (focusedRecord) {
+                let record = parentFocusedRecord || focusedRecord;
+                data.push(record);
+            } else {
+                data.push(recordPerId[Object.keys(recordsPerParentId)[0]])
+            }
+        }
+        return data;
+    }
+
+    /**
+     * Create forest
+     *
+     * @param {Object} config model config to use
+     * @param {Object[]} data root data
+     * @returns {HierarchyForest} forest hierarchy
+     */
+    _createRoot(config, data) {
+        return new HierarchyForest(this, config, data);
+    }
+
+    /**
+     * Fetch parent node and its children nodes data
+     *
+     * @param {HierarchyNode} node node to fetch its parent node
+     * @returns {Object} the parent node data with children data inside childFieldName
+     */
+    async _fetchManager(node, exclude_node=true) {
+        let domain = new Domain([
+            "|",
+                ["id", "=", node.parentResId],
+                [this.parentFieldName, "=", node.parentResId],
+        ]);
+        if (exclude_node) {
+            domain = Domain.and([
+                domain,
+                [["id", "!=", node.resId]],
+            ])
+        }
+        const result = await this.orm.searchRead(
+            this.resModel,
+            domain.toList({}),
+            this.fieldsToFetch,
+            { context: this.config.context },
+        );
+        let managerData = {};
+        const children = [];
+        for (const data of result) {
+            if (data.id === node.parentResId) {
+                managerData = data;
+            } else {
+                children.push(data);
+            }
+        }
+        if (!this.childFieldName) {
+            if (children.length) {
+                await this._fetchDescendants(children);
+            }
+        }
+        managerData[this.childFieldName || this.defaultChildFieldName] = children;
+        return managerData;
+    }
+
+    /**
+     * Fetch children nodes data for a given node
+     *
+     * @param {HierarchyNode} node node to fetch its children nodes
+     * @param {Array<number> | null} excludeResIds list of ids to exclude (because the nodes already exist)
+     * @returns {Object[]} list of child node data
+     */
+    async _fetchSubordinates(node, excludeResIds = null) {
+        let childrenResIds = node.data[this.childFieldName || this.defaultChildFieldName];
+        if (excludeResIds) {
+            childrenResIds = childrenResIds.filter((childResId) => !excludeResIds.includes(childResId));
+        }
+        const data = await this.orm.read(
+            this.resModel,
+            childrenResIds,
+            this.fieldsToFetch,
+            { context: this.config.context },
+        )
+        if (!this.childFieldName) {
+            await this._fetchDescendants(data);
+        }
+        return data;
+    }
+
+    /**
+     * fetch descendants nodes resIds to know if the child nodes have descendants
+     *
+     * @param {Object[]} childrenData child nodes data to fetch its descendants
+     */
+    async _fetchDescendants(childrenData) {
+        const resIds = childrenData.map((d) => d.id);
+        if (resIds.length) {
+            const fetchChildren = await this.orm.readGroup(
+                this.resModel,
+                [[this.parentFieldName, "in", resIds]],
+                ['id:array_agg'],
+                [this.parentFieldName],
+                { context: this.config.context || {} },
+            );
+            const childIdsPerId = Object.fromEntries(
+                fetchChildren.map((r) => [r[this.parentFieldName][0], r.id])
+            );
+            for (const d of childrenData) {
+                if (d.id.toString() in childIdsPerId) {
+                    d[this.defaultChildFieldName] = childIdsPerId[d.id.toString()];
+                }
+            }
+        }
+    }
+}
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.js b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.js
new file mode 100644
index 00000000000..c064f13658a
--- /dev/null
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.js
@@ -0,0 +1,41 @@
+/** @odoo-module */
+
+import { Component, useRef } from "@odoo/owl";
+
+import { HierarchyCard } from "./hierarchy_card";
+
+export class HierarchyRenderer extends Component {
+    static components = {
+        HierarchyCard,
+    };
+    static props = {
+        model: Object,
+        openRecord: Function,
+        archInfo: Object,
+        templates: Object,
+    };
+    static template = "hr_org_chart.HierarchyRenderer";
+
+    setup() {
+        this.rendererRef = useRef("renderer");
+    }
+
+    get rows() {
+        const rootNodes = this.props.model.root.rootNodes;
+        const rows = [{ nodes: rootNodes }];
+        const processNode = (node) => {
+            if (!node.isLeaf) {
+                rows.push({ parentNode: node, nodes: node.nodes});
+                for (const subNode of node.nodes) {
+                    processNode(subNode);
+                }
+            }
+        };
+
+        for (const node of this.props.model.root.rootNodes) {
+            processNode(node);
+        }
+
+        return rows;
+    }
+}
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.scss b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.scss
new file mode 100644
index 00000000000..3bd5851c90c
--- /dev/null
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.scss
@@ -0,0 +1,64 @@
+$o-chart-line-color: #ababb1;
+
+.o_hierarchy_renderer {
+    .o_hierarchy_container {
+        gap: 25px;
+
+        .o_hierarchy_separator {
+            position: relative;
+            margin-top: 10px;
+            margin-bottom: 10px;
+            width: 100%;
+
+            .o_hierarchy_line_left {
+                &:before {
+                    border-top: 2px solid $o-chart-line-color;
+                    border-left: 2px solid $o-chart-line-color;
+                    border-top-left-radius: 8px;
+                    margin-left: -10%;
+                    margin-top: -2px;
+                }
+
+                &:after {
+                    border-bottom: 2px solid $o-chart-line-color;
+                    border-right: 2px solid $o-chart-line-color;
+                    border-bottom-right-radius: 6px;
+                    margin-left: 30%;
+                    margin-top: -12px;
+                }
+            }
+
+            .o_hierarchy_line_right {
+                &:before {
+                    border-bottom: 2px solid $o-chart-line-color;
+                    border-left: 2px solid $o-chart-line-color;
+                    border-bottom-left-radius: 6px;
+                    margin-left: calc(-10% - 1px);
+                    margin-top: -12px;
+                }
+
+                &:after {
+                    border-top: 2px solid $o-chart-line-color;
+                    border-right: 2px solid $o-chart-line-color;
+                    border-top-right-radius: 8px;
+                    margin-left: 30%;
+                    margin-top: -2px;
+                }
+            }
+
+            .o_hierarchy_line_part {
+                border-top: 2px solid $o-chart-line-color;
+                margin: 0 10%;
+                width: 30%;
+            }
+
+            .o_hierarchy_line_part:before, .o_hierarchy_line_part:after {
+                content: "";
+                width: calc(10% + 1px);
+                height: 12px;
+                position: absolute;
+                display: block;
+            }
+        }
+    }
+}
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.xml b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.xml
new file mode 100644
index 00000000000..f46286f3e0a
--- /dev/null
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.xml
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<templates>
+
+    <t t-name="hr_org_chart.HierarchyRenderer" owl="1">
+        <div class="o_hierarchy_renderer w-100 d-flex justify-content-center" t-ref="renderer">
+            <div class="o_hierarchy_container d-flex flex-column w-100 w-lg-75 h-100 pt-5 px-2">
+                <t t-foreach="rows" t-as="row" t-key="row_index">
+                    <t t-set="previousRow" t-value="!row_first ? rows[row_index - 1] : null"/>
+                    <t t-if="!row_first">
+                        <div t-if="row.parentNode and previousRow.nodes.length > 1"
+                            class="o_hierarchy_parent_node_container d-flex justify-content-center"
+                        >
+                            <span t-esc="row.parentNode.data.name" />
+                        </div>
+                        <div class="o_hierarchy_separator d-flex pb-4">
+                            <div class="o_hierarchy_line_part o_hierarchy_line_left"></div>
+                            <div class="o_hierarchy_line_part o_hierarchy_line_right"></div>
+                        </div>
+                    </t>
+                    <div class="o_hierarchy_row row justify-content-center flex-wrap row-cols-2 row-cols-lg-5 g-2 g-lg-3 pt-3"
+                        t-att-data-parent-node-id="row.parentNode?.id" t-att-data-row-id="row_index"
+                    >
+                        <t t-foreach="row.nodes" t-as="node" t-key="node.id">
+                            <HierarchyCard
+                                node="node"
+                                openRecord="props.openRecord"
+                                archInfo="props.archInfo"
+                                templates="props.templates"
+                            />
+                        </t>
+                    </div>
+                </t>
+            </div>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_view.js b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_view.js
new file mode 100644
index 00000000000..4bec22bdcbf
--- /dev/null
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_view.js
@@ -0,0 +1,36 @@
+/** @odoo-module */
+
+import { _t } from "@web/core/l10n/translation";
+import { registry } from "@web/core/registry";
+import { HierarchyArchParser } from "./hierarchy_arch_parser";
+import { HierarchyController } from "./hierarchy_controller";
+import { HierarchyModel } from "./hierarchy_model";
+import { HierarchyRenderer } from "./hierarchy_renderer";
+
+export const hierarchyView = {
+    type: "hierarchy",
+    display_name: _t("Hierarchy"),
+    icon: "fa fa-share-alt",
+    isMobileFriendly: false,
+    multiRecord: true,
+    ArchParser: HierarchyArchParser,
+    Controller: HierarchyController,
+    Model: HierarchyModel,
+    Renderer: HierarchyRenderer,
+    buttonTemplate: "hr_org_chart.HierarchyButtons",
+    searchMenuTypes: [],
+
+    props: (genericProps, view) => {
+        const { ArchParser, Model, Renderer, buttonTemplate: viewButtonTemplate } = view;
+        const { arch, relatedModels, resModel, buttonTemplate } = genericProps;
+        return {
+            ...genericProps,
+            archInfo: new ArchParser().parse(arch, relatedModels, resModel),
+            buttonTemplate: buttonTemplate || viewButtonTemplate,
+            Model,
+            Renderer,
+        };
+    }
+}
+
+registry.category("views").add("hierarchy", hierarchyView);

From e28e1e5b257d8bce32d7eb699f0ccf591e706f51 Mon Sep 17 00:00:00 2001
From: "Xavier Bol (xbo)" <xbo@odoo.com>
Date: Mon, 28 Aug 2023 15:34:48 +0200
Subject: [PATCH 05/18] [IMP] hr_org_chart,web: extend kanban compiler for
 hierarchy view

This commit extends the kanban compiler for the hirarchy view. Some
changes has been done in the kanban compiler to be able to reuse the
existing code.

task-3376776
---
 .../src/views/hierarchy/hierarchy_card.js     |  4 +--
 .../src/views/hierarchy/hierarchy_compiler.js | 28 +++++++++++++++++++
 .../src/views/kanban/kanban_compiler.js       | 10 ++++---
 addons/web/static/src/views/view_compiler.js  |  8 ++++--
 4 files changed, 41 insertions(+), 9 deletions(-)
 create mode 100644 addons/hr_org_chart/static/src/views/hierarchy/hierarchy_compiler.js

diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.js b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.js
index 38a48a24018..ae4d4296991 100644
--- a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.js
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.js
@@ -7,7 +7,7 @@ import { Record } from "@web/views/record";
 import { ViewButton } from "@web/views/view_button/view_button";
 import { useViewCompiler } from "@web/views/view_compiler";
 
-import { OrgChartCompiler } from "./hierarchy_compiler";
+import { HierarchyCompiler } from "./hierarchy_compiler";
 import { getFormattedRecord } from "@web/views/kanban/kanban_record";
 
 export class HierarchyCard extends Component {
@@ -27,7 +27,7 @@ export class HierarchyCard extends Component {
         classNames: "",
     };
     static template = "hr_org_chart.HierarchyCard";
-    static Compiler = OrgChartCompiler;
+    static Compiler = HierarchyCompiler;
 
     setup() {
         const { templates } = this.props;
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_compiler.js b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_compiler.js
new file mode 100644
index 00000000000..1cfa0407352
--- /dev/null
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_compiler.js
@@ -0,0 +1,28 @@
+/** @odoo-module **/
+
+import { KanbanCompiler } from "@web/views/kanban/kanban_compiler";
+
+export class HierarchyCompiler extends KanbanCompiler {
+    /**
+     * @override
+     * @param {Element} el
+     * @param {Object} params
+     * @returns {Element}
+     */
+    compileField(el, params) {
+        const fieldName = el.getAttribute("name");
+        return super.compileField(el, {
+            ...(params || {}),
+            recordExpr: "__record__",
+            dataPointId: "__comp__.props.node.id",
+            formattedValueExpr: `record['${fieldName}'].value`,
+        });
+    }
+
+    compileButton(el, params) {
+        return super.compileButton(el, {
+            ...(params || {}),
+            recordExpr: "__record__",
+        });
+    }
+}
diff --git a/addons/web/static/src/views/kanban/kanban_compiler.js b/addons/web/static/src/views/kanban/kanban_compiler.js
index 7c0a3a3b784..cdb9da037bf 100644
--- a/addons/web/static/src/views/kanban/kanban_compiler.js
+++ b/addons/web/static/src/views/kanban/kanban_compiler.js
@@ -120,17 +120,19 @@ export class KanbanCompiler extends ViewCompiler {
     compileField(el, params) {
         let compiled;
         let isSpan = false;
+        const recordExpr = params.recordExpr || '__comp__.props.record';
+        const dataPointIdExpr = params.dataPointIdExpr || `${recordExpr}.id`;
         if (!el.hasAttribute("widget")) {
             isSpan = true;
             // fields without a specified widget are rendered as simple spans in kanban records
             const fieldId = el.getAttribute("field_id");
             compiled = createElement("span", {
-                "t-out": `__comp__.getFormattedValue("${fieldId}")`,
+                "t-out": params.formattedValueExpr || `__comp__.getFormattedValue("${fieldId}")`,
             });
         } else {
             compiled = super.compileField(el, params);
             const fieldId = el.getAttribute("field_id");
-            compiled.setAttribute("id", `'${fieldId}_' + __comp__.props.record.id`);
+            compiled.setAttribute("id", `'${fieldId}_' + ${dataPointIdExpr}`);
             // In x2many kanban, records can be edited in a dialog. The same record as the one of
             // the kanban is used for the form view dialog, so its mode is switched to "edit", but
             // we don't want to see it in edition in the background. For that reason, we force its
@@ -140,10 +142,10 @@ export class KanbanCompiler extends ViewCompiler {
             if (readonlyAttr) {
                 compiled.setAttribute(
                     "readonly",
-                    `__comp__.props.record.isInEdition || (${readonlyAttr})`
+                    `${recordExpr}.isInEdition || (${readonlyAttr})`
                 );
             } else {
-                compiled.setAttribute("readonly", `__comp__.props.record.isInEdition`);
+                compiled.setAttribute("readonly", `${recordExpr}.isInEdition`);
             }
         }
 
diff --git a/addons/web/static/src/views/view_compiler.js b/addons/web/static/src/views/view_compiler.js
index 55b8d3b1f94..6e3ab652d8b 100644
--- a/addons/web/static/src/views/view_compiler.js
+++ b/addons/web/static/src/views/view_compiler.js
@@ -309,9 +309,10 @@ export class ViewCompiler {
         if (tag === "a" && type === "url") {
             tag = "button";
         }
+        const recordExpr = params.recordExpr || "__comp__.props.record";
         const button = createElement("ViewButton", {
             tag: toStringExpression(tag),
-            record: "__comp__.props.record",
+            record: recordExpr,
         });
 
         assignOwlDirectives(button, el);
@@ -368,13 +369,14 @@ export class ViewCompiler {
         const fieldId = el.getAttribute("field_id");
 
         const field = createElement("Field");
+        const recordExpr = params.recordExpr || "__comp__.props.record";
         field.setAttribute("id", `'${fieldId}'`);
         field.setAttribute("name", `'${fieldName}'`);
-        field.setAttribute("record", params.recordExpr || "__comp__.props.record");
+        field.setAttribute("record", recordExpr);
         field.setAttribute("fieldInfo", `__comp__.props.archInfo.fieldNodes['${fieldId}']`);
         field.setAttribute(
             "readonly",
-            `__comp__.props.archInfo.activeActions?.edit === false and !__comp__.props.record.isNew`
+            `__comp__.props.archInfo.activeActions?.edit === false and !${recordExpr}.isNew`
         );
 
         if (el.hasAttribute("widget")) {

From 1048111a1873bda0e20bd2efc50ef2e59f853b89 Mon Sep 17 00:00:00 2001
From: "Xavier Bol (xbo)" <xbo@odoo.com>
Date: Mon, 28 Aug 2023 15:36:43 +0200
Subject: [PATCH 06/18] [IMP] hr_org_chart,web: define icon class on i tag for
 view button icon

Before this commit, the icon of the hierarchy view should be rotate
of 90 deg to have an appropriate icon for the view. The problem is
since the icon class is added on button classes, the button will
also be rotated with the icon instead of just the icon.

This commit defines a `i` tag inside the `button` element to select
the view to be able to apply css rotation only on the icon instead
of the whole button.

task-3376776
---
 .../static/src/views/hierarchy/hierarchy_view.js            | 2 +-
 .../static/src/views/hierarchy/hierarchy_view.scss          | 3 +++
 .../web/static/src/search/control_panel/control_panel.xml   | 6 ++++--
 addons/web/static/tests/search/control_panel.js             | 3 ++-
 4 files changed, 10 insertions(+), 4 deletions(-)
 create mode 100644 addons/hr_org_chart/static/src/views/hierarchy/hierarchy_view.scss

diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_view.js b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_view.js
index 4bec22bdcbf..abf7e4dca95 100644
--- a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_view.js
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_view.js
@@ -10,7 +10,7 @@ import { HierarchyRenderer } from "./hierarchy_renderer";
 export const hierarchyView = {
     type: "hierarchy",
     display_name: _t("Hierarchy"),
-    icon: "fa fa-share-alt",
+    icon: "fa fa-share-alt o_hierarchy_icon",
     isMobileFriendly: false,
     multiRecord: true,
     ArchParser: HierarchyArchParser,
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_view.scss b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_view.scss
new file mode 100644
index 00000000000..b3085cb535f
--- /dev/null
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_view.scss
@@ -0,0 +1,3 @@
+.o_control_panel_navigation .o_switch_view .o_hierarchy_icon { // button in view switcher
+    rotate: 90deg;
+}
diff --git a/addons/web/static/src/search/control_panel/control_panel.xml b/addons/web/static/src/search/control_panel/control_panel.xml
index 781ef6ee03b..cc232e1007f 100644
--- a/addons/web/static/src/search/control_panel/control_panel.xml
+++ b/addons/web/static/src/search/control_panel/control_panel.xml
@@ -61,10 +61,12 @@
                         <nav class="o_cp_switch_buttons d-print-none d-none d-xl-inline-flex btn-group">
                             <t t-foreach="env.config.viewSwitcherEntries" t-as="view" t-key="view.type">
                                 <button class="btn btn-secondary o_switch_view "
-                                    t-attf-class="o_{{view.type}} {{view.icon}} {{view.active ? 'active' : ''}}"
+                                    t-attf-class="o_{{view.type}} {{view.active ? 'active' : ''}}"
                                     t-att-data-tooltip="view.name"
                                     t-on-click="() => this.onViewClicked(view.type)"
-                                    />
+                                >
+                                    <i t-att-class="view.icon" />
+                                </button>
                             </t>
                         </nav>
                     </t>
diff --git a/addons/web/static/tests/search/control_panel.js b/addons/web/static/tests/search/control_panel.js
index 7bd23c4f64e..ec7075f0340 100644
--- a/addons/web/static/tests/search/control_panel.js
+++ b/addons/web/static/tests/search/control_panel.js
@@ -100,8 +100,9 @@ QUnit.module("Search", (hooks) => {
 
         assert.strictEqual(views[0].getAttribute("data-tooltip"), "List");
         assert.hasClass(views[0], "active");
+        assert.containsOnce(views[0], ".oi-view-list");
         assert.strictEqual(views[1].getAttribute("data-tooltip"), "Kanban");
-        assert.hasClass(views[1], "oi-view-kanban");
+        assert.containsOnce(views[1], ".oi-view-kanban");
 
         controlPanel.env.services.action.switchView = (viewType) => {
             assert.step(viewType);

From 03ce25127d7b2743a36e3a7559733654724d072a Mon Sep 17 00:00:00 2001
From: "Xavier Bol (xbo)" <xbo@odoo.com>
Date: Thu, 12 Oct 2023 13:30:28 +0200
Subject: [PATCH 07/18] [IMP] hr_org_chart: add child_count in unfold button of
 hierarchy card

Before this commit, the user can unfold a node in hierarchy view but
before clicking on it he cannot know how many child nodes there are.

This commit adds the number of child nodes in the Unfold button with
the default icon.

task-3376776
---
 .../static/src/views/hierarchy/hierarchy_card.scss            | 4 ++++
 .../static/src/views/hierarchy/hierarchy_card.xml             | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.scss b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.scss
index 79d8128538b..bfed09e5eaf 100644
--- a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.scss
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.scss
@@ -65,5 +65,9 @@
         display: grid;
         grid-template-columns: 50px 1fr 50px;
         border-radius: 0;
+
+        .o_hierarchy_icon {
+            vertical-align: text-top;
+        }
     }
 }
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.xml b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.xml
index 9e211062b88..8b39a6aedb4 100644
--- a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.xml
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.xml
@@ -45,6 +45,10 @@
                         <span style="grid-column: 2;">
                             Unfold
                         </span>
+                        <span class="text-end" style="grid-column: 3;">
+                            <t t-out="props.node.childResIds.length"/>
+                            <i class="fa ps-1 fa-share-alt o_hierarchy_icon"/>
+                        </span>
                     </t>
                     <t t-else="">
                         <span style="grid-column: 2;">

From 95e0149659eac9884e886d45c70250c59c0db7cb Mon Sep 17 00:00:00 2001
From: "Xavier Bol (xbo)" <xbo@odoo.com>
Date: Thu, 12 Oct 2023 13:33:16 +0200
Subject: [PATCH 08/18] [IMP] hr_org_chart: define hierarchy view for
 `hr.employee` model

This commit defines a hierarchy view for `hr.employee` model.

task-3376776
---
 .../hr_org_chart/models/hr_org_chart_mixin.py | 16 +++++++++
 .../hr_employee_hierarchy_renderer.js         | 13 +++++++
 .../hr_employee_hierarchy_renderer.scss       |  7 ++++
 .../hr_employee_hierarchy_renderer.xml        | 14 ++++++++
 .../hr_employee_hierarchy_view.js             | 12 +++++++
 addons/hr_org_chart/views/hr_views.xml        | 34 +++++++++++++++++++
 6 files changed, 96 insertions(+)
 create mode 100644 addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_renderer.js
 create mode 100644 addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_renderer.scss
 create mode 100644 addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_renderer.xml
 create mode 100644 addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_view.js

diff --git a/addons/hr_org_chart/models/hr_org_chart_mixin.py b/addons/hr_org_chart/models/hr_org_chart_mixin.py
index 4e76945df72..3668a4dfdef 100644
--- a/addons/hr_org_chart/models/hr_org_chart_mixin.py
+++ b/addons/hr_org_chart/models/hr_org_chart_mixin.py
@@ -12,6 +12,12 @@ class HrEmployeeBase(models.AbstractModel):
         'Indirect Subordinates Count',
         compute='_compute_subordinates', recursive=True, store=False,
         compute_sudo=True)
+    department_color = fields.Integer("Department Color", related="department_id.color")
+    child_count = fields.Integer(
+        'Direct Subordinates Count',
+        compute='_compute_child_count', recursive=True,
+        compute_sudo=True,
+    )
 
     def _get_subordinates(self, parents=None):
         """
@@ -56,3 +62,13 @@ class HrEmployeeBase(models.AbstractModel):
         if not self.env.user.employee_id.subordinate_ids:
             return [('id', operator, self.env.user.employee_id.id)]
         return (['!'] if operator == '!=' else []) + [('id', 'in', self.env.user.employee_id.subordinate_ids.ids)]
+
+    def _compute_child_count(self):
+        employee_read_group = self._read_group(
+            [('parent_id', 'in', self.ids)],
+            ['parent_id'],
+            ['id:count'],
+        )
+        child_count_per_parent_id = dict(employee_read_group)
+        for employee in self:
+            employee.child_count = child_count_per_parent_id.get(employee._origin, 0)
diff --git a/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_renderer.js b/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_renderer.js
new file mode 100644
index 00000000000..972a1f74455
--- /dev/null
+++ b/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_renderer.js
@@ -0,0 +1,13 @@
+/** @odoo-module **/
+
+import { Avatar } from "@mail/views/web/fields/avatar/avatar";
+
+import { HierarchyRenderer } from "../hierarchy/hierarchy_renderer";
+
+export class HrEmployeeHierarchyRenderer extends HierarchyRenderer {
+   static template = "hr_org_chart.HrEmployeeHierarchyRenderer";
+   static components = {
+      ...HierarchyRenderer.components,
+      Avatar,
+   };
+}
diff --git a/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_renderer.scss b/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_renderer.scss
new file mode 100644
index 00000000000..d82a9429f2e
--- /dev/null
+++ b/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_renderer.scss
@@ -0,0 +1,7 @@
+.o_hierarchy_renderer {
+    .o_hierarchy_parent_node_container {
+        .o_avatar > span {
+            width: 100% !important;
+        }
+    }
+}
diff --git a/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_renderer.xml b/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_renderer.xml
new file mode 100644
index 00000000000..760af418f3f
--- /dev/null
+++ b/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_renderer.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<templates>
+
+    <t t-name="hr_org_chart.HrEmployeeHierarchyRenderer" t-inherit="hr_org_chart.HierarchyRenderer">
+        <xpath expr="//div[hasclass('o_hierarchy_parent_node_container')]/span" position="replace">
+            <Avatar
+                resModel="row.parentNode.model.resModel"
+                resId="row.parentNode.resId"
+                displayName="row.parentNode.data.name"
+            />
+        </xpath>
+    </t>
+
+</templates>
diff --git a/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_view.js b/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_view.js
new file mode 100644
index 00000000000..05fb680dcb8
--- /dev/null
+++ b/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_view.js
@@ -0,0 +1,12 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { hierarchyView } from "../hierarchy/hierarchy_view";
+import { HrEmployeeHierarchyRenderer } from "./hr_employee_hierarchy_renderer";
+
+export const hrEmployeeHierarchyView = {
+    ...hierarchyView,
+    Renderer: HrEmployeeHierarchyRenderer,
+};
+
+registry.category("views").add("hr_employee_hierarchy", hrEmployeeHierarchyView);
diff --git a/addons/hr_org_chart/views/hr_views.xml b/addons/hr_org_chart/views/hr_views.xml
index 90c17ebe133..a4d99775ced 100644
--- a/addons/hr_org_chart/views/hr_views.xml
+++ b/addons/hr_org_chart/views/hr_views.xml
@@ -14,6 +14,36 @@
         </field>
     </record>
 
+    <record id="hr_employee_hierarchy_view" model="ir.ui.view">
+        <field name="name">hr.employee.view.hierarchy</field>
+        <field name="model">hr.employee</field>
+        <field name="arch" type="xml">
+            <hierarchy child_field="child_ids" js_class="hr_employee_hierarchy">
+                <field name="name" />
+                <field name="job_id" />
+                <field name="department_color" />
+                <field name="hr_icon_display" />
+                <field name="department_id" />
+                <templates>
+                    <t t-name="hierarchy-box">
+                        <div t-attf-class="o_hierarchy_node_header d-flex justify-content-center pb-4 o_hierarchy_node_color_{{ record.department_color.raw_value }}"
+                             t-att-title="record.department_id.value"
+                        >
+                            <field name="image_1024" preview_image="image_128" options="{'zoom': true, 'zoom_delay': 1000}" widget="background_image" />
+                        </div>
+                        <div class="o_hierarchy_node_body d-flex flex-column text-center">
+                            <div class="w-100 position-relative">
+                                <field class="fw-bold" name="name" />
+                                <field name="hr_icon_display" class="d-flex align-items-end o_employee_availability" widget="hr_presence_status" />
+                            </div>
+                            <field name="job_id" />
+                        </div>
+                    </t>
+                </templates>
+            </hierarchy>
+        </field>
+    </record>
+
     <record id="hr_employee_public_view_form_inherit_org_chart" model="ir.ui.view">
         <field name="name">hr.employee.public.view.form.inherit.org_chart</field>
         <field name="model">hr.employee.public</field>
@@ -41,4 +71,8 @@
             </div>
         </field>
     </record>
+
+    <record id="hr.open_view_employee_list_my" model="ir.actions.act_window">
+        <field name="view_mode">kanban,tree,form,activity,graph,pivot,hierarchy</field>
+    </record>
 </odoo>

From 7223f1ae8be22a33a7af370e9df509a4806e43be Mon Sep 17 00:00:00 2001
From: "Xavier Bol (xbo)" <xbo@odoo.com>
Date: Tue, 29 Aug 2023 11:41:17 +0200
Subject: [PATCH 09/18] [IMP] hr_org_chart: define hierarchy view for
 `hr.department`

This commit defines a hierarchy view for `hr.department` model.

task-3376776
---
 addons/hr_org_chart/__manifest__.py           |  3 +-
 .../views/hr_department_views.xml             | 39 +++++++++++++++++++
 2 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 addons/hr_org_chart/views/hr_department_views.xml

diff --git a/addons/hr_org_chart/__manifest__.py b/addons/hr_org_chart/__manifest__.py
index da05f79ac54..24d3a6ea5a9 100644
--- a/addons/hr_org_chart/__manifest__.py
+++ b/addons/hr_org_chart/__manifest__.py
@@ -16,7 +16,8 @@ This module extend the employee form with a organizational chart.
     'depends': ['hr'],
     'auto_install': True,
     'data': [
-        'views/hr_views.xml'
+        'views/hr_department_views.xml',
+        'views/hr_views.xml',
     ],
     'assets': {
         'web._assets_primary_variables': [
diff --git a/addons/hr_org_chart/views/hr_department_views.xml b/addons/hr_org_chart/views/hr_department_views.xml
new file mode 100644
index 00000000000..6d7206595e7
--- /dev/null
+++ b/addons/hr_org_chart/views/hr_department_views.xml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+    <record id="hr_department_hierarchy_view" model="ir.ui.view">
+        <field name="name">hr.departmnent.view.hierarchy</field>
+        <field name="model">hr.department</field>
+        <field name="arch" type="xml">
+            <hierarchy child_field="child_ids">
+                <field name="name" />
+                <field name="color" />
+                <field name="total_employee" />
+                <templates>
+                    <t t-name="hierarchy-box">
+                        <div t-attf-class="o_hierarchy_node_header d-flex justify-content-center align-items-center o_hierarchy_node_color_{{ record.color.raw_value }}">
+                            <field name="name" />
+                        </div>
+                        <div class="o_hierarchy_node_body d-flex flex-column">
+                            <field name="manager_id" class="pt-1 ps-1" widget="many2one_avatar" />
+                            <div>
+                                <button class="btn btn-link" name="%(hr.act_employee_from_department)d" type="action">
+                                    <t t-out="record.total_employee.raw_value"/> Employees
+                                </button>
+                            </div>
+                        </div>
+                    </t>
+                </templates>
+            </hierarchy>
+        </field>
+    </record>
+
+    <record id="hr.hr_department_kanban_action" model="ir.actions.act_window">
+        <field name="view_mode">kanban,tree,hierarchy,form</field>
+    </record>
+
+    <record id="hr.hr_department_tree_action" model="ir.actions.act_window">
+        <field name="view_mode">tree,kanban,hierarchy,form</field>
+    </record>
+
+</odoo>

From 5ade95973208dd659597bb4771fa45fe377c7242 Mon Sep 17 00:00:00 2001
From: "Xavier Bol (xbo)" <xbo@odoo.com>
Date: Thu, 12 Oct 2023 13:33:39 +0200
Subject: [PATCH 10/18] [IMP] hr_org_chart: allow to define custom icon in
 hierarchy card

Before this commit, the icon displayed inside the Unfold button with
the number of child nodes is the default one. In the employee hierarchy
view, since the child nodes are obviously employees, the icon could
be the one displayed users (`fa-users`).

This commit adds a new attribute called `icon` on `hierarchy` tag
to be able to define another icon displayed on that button. By
doing that, the icon displayed inside employee hierarchy view can
changed to have the one expected and more relevant.

task-3376776
---
 addons/hr_org_chart/models/ir_ui_view.py                      | 1 +
 .../static/src/views/hierarchy/hierarchy_arch_parser.js       | 4 ++++
 .../static/src/views/hierarchy/hierarchy_card.xml             | 2 +-
 addons/hr_org_chart/views/hr_views.xml                        | 2 +-
 4 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/addons/hr_org_chart/models/ir_ui_view.py b/addons/hr_org_chart/models/ir_ui_view.py
index 052866066e9..e298aafdac9 100644
--- a/addons/hr_org_chart/models/ir_ui_view.py
+++ b/addons/hr_org_chart/models/ir_ui_view.py
@@ -14,6 +14,7 @@ HIERARCHY_VALID_ATTRIBUTES = {
     'delete',
     'parent_field',
     'child_field',
+    'icon',
 }
 
 class View(models.Model):
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_arch_parser.js b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_arch_parser.js
index 2e21af269b9..079922e26f4 100644
--- a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_arch_parser.js
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_arch_parser.js
@@ -8,6 +8,7 @@ export class HierarchyArchParser {
     parse(xmlDoc, models, modelName) {
         const archInfo = {
             activeActions: getActiveActions(xmlDoc),
+            icon: "fa-share-alt o_hierarchy_icon",
             parentFieldName: "parent_id",
             fieldNodes: {},
             templateDocs: {},
@@ -44,6 +45,9 @@ export class HierarchyArchParser {
                     }
                     archInfo.childFieldName = childFieldName;
                 }
+                if (node.hasAttribute("icon")) {
+                    archInfo.icon = node.getAttribute("icon");
+                }
             } else if (node.tagName === "field") {
                 const fieldInfo = Field.parseFieldNode(node, models, modelName, "hierarchy");
                 const name = fieldInfo.name;
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.xml b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.xml
index 8b39a6aedb4..cd9ad21ae0c 100644
--- a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.xml
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.xml
@@ -47,7 +47,7 @@
                         </span>
                         <span class="text-end" style="grid-column: 3;">
                             <t t-out="props.node.childResIds.length"/>
-                            <i class="fa ps-1 fa-share-alt o_hierarchy_icon"/>
+                            <i class="fa ps-1" t-att-class="props.archInfo.icon"/>
                         </span>
                     </t>
                     <t t-else="">
diff --git a/addons/hr_org_chart/views/hr_views.xml b/addons/hr_org_chart/views/hr_views.xml
index a4d99775ced..1491fb4f4ec 100644
--- a/addons/hr_org_chart/views/hr_views.xml
+++ b/addons/hr_org_chart/views/hr_views.xml
@@ -18,7 +18,7 @@
         <field name="name">hr.employee.view.hierarchy</field>
         <field name="model">hr.employee</field>
         <field name="arch" type="xml">
-            <hierarchy child_field="child_ids" js_class="hr_employee_hierarchy">
+            <hierarchy child_field="child_ids" js_class="hr_employee_hierarchy" icon="fa-users">
                 <field name="name" />
                 <field name="job_id" />
                 <field name="department_color" />

From 2f463b564b02237c4e8460d48fc2b71334e4f094 Mon Sep 17 00:00:00 2001
From: "Xavier Bol (xbo)" <xbo@odoo.com>
Date: Thu, 12 Oct 2023 10:46:52 +0200
Subject: [PATCH 11/18] [IMP] hr_org_chart: add drag&drop in hierarchy view

This commit allows the user to drag and drop a record (hierarchy
node) into another one to set the one hovered as the manager of the
one dragged. It also allows to drag a record into a row to define
the manager of the row as the manager of the record dragged.
This commit also adds an new attribute on `hierarchy` tag to use
when we define that view for a certain model to enable the drag and
drop feature.

task-3376776
---
 addons/hr_org_chart/__manifest__.py           |   4 +
 addons/hr_org_chart/models/ir_ui_view.py      |   1 +
 .../src/hooks/hierarchy_node_draggable.js     | 102 +++++++++++++
 .../src/scss/hierarchy.variables.dark.scss    |   3 +
 .../static/src/scss/hierarchy.variables.scss  |   3 +
 .../views/hierarchy/hierarchy_arch_parser.js  |   6 +-
 .../src/views/hierarchy/hierarchy_card.scss   |  13 ++
 .../src/views/hierarchy/hierarchy_card.xml    |   2 +-
 .../src/views/hierarchy/hierarchy_model.js    | 144 +++++++++++++++++-
 .../src/views/hierarchy/hierarchy_renderer.js |  79 ++++++++++
 .../views/hierarchy/hierarchy_renderer.scss   |   6 +
 .../views/hr_department_views.xml             |   2 +-
 addons/hr_org_chart/views/hr_views.xml        |   2 +-
 13 files changed, 357 insertions(+), 10 deletions(-)
 create mode 100644 addons/hr_org_chart/static/src/hooks/hierarchy_node_draggable.js
 create mode 100644 addons/hr_org_chart/static/src/scss/hierarchy.variables.dark.scss
 create mode 100644 addons/hr_org_chart/static/src/scss/hierarchy.variables.scss

diff --git a/addons/hr_org_chart/__manifest__.py b/addons/hr_org_chart/__manifest__.py
index 24d3a6ea5a9..e546443fa5d 100644
--- a/addons/hr_org_chart/__manifest__.py
+++ b/addons/hr_org_chart/__manifest__.py
@@ -24,9 +24,13 @@ This module extend the employee form with a organizational chart.
             'hr_org_chart/static/src/scss/variables.scss',
         ],
         'web.assets_backend': [
+            'hr_org_chart/static/src/scss/hierarchy.variables.scss',
             'hr_org_chart/static/src/fields/*',
             'hr_org_chart/static/src/views/**/*',
         ],
+        'web.assets_web_dark': [
+            ('before', 'hr_org_chart/static/src/scss/hierarchy.variables.scss', 'hr_org_chart/static/src/scss/**/*.variables.dark.scss'),
+        ],
         'web.qunit_suite_tests': [
             'hr_org_chart/static/tests/**/*',
         ],
diff --git a/addons/hr_org_chart/models/ir_ui_view.py b/addons/hr_org_chart/models/ir_ui_view.py
index e298aafdac9..d285816a7f0 100644
--- a/addons/hr_org_chart/models/ir_ui_view.py
+++ b/addons/hr_org_chart/models/ir_ui_view.py
@@ -15,6 +15,7 @@ HIERARCHY_VALID_ATTRIBUTES = {
     'parent_field',
     'child_field',
     'icon',
+    'draggable',
 }
 
 class View(models.Model):
diff --git a/addons/hr_org_chart/static/src/hooks/hierarchy_node_draggable.js b/addons/hr_org_chart/static/src/hooks/hierarchy_node_draggable.js
new file mode 100644
index 00000000000..81040cbb52d
--- /dev/null
+++ b/addons/hr_org_chart/static/src/hooks/hierarchy_node_draggable.js
@@ -0,0 +1,102 @@
+/** @odoo-module */
+
+import { onWillUnmount, reactive, useEffect, useExternalListener } from "@odoo/owl";
+import { useThrottleForAnimation } from "@web/core/utils/timing";
+import { pick } from "@web/core/utils/objects";
+import { makeDraggableHook } from "@web/core/utils/draggable_hook_builder";
+
+const hookParams = {
+    name: "useHierarchyNodeDraggable",
+    acceptedParams: {
+        rows: [String],
+    },
+    defaultParams: {
+        rows: null,
+    },
+    onComputeParams({ ctx, params }) {
+        // Row selector
+        ctx.rowSelector = params.rows || null;
+        if (ctx.rowSelector) {
+            ctx.fullSelector = `${ctx.rowSelector} ${ctx.fullSelector}`;
+        }
+    },
+    onDragStart(params) {
+        const { ctx, addListener, callHandler } = params;
+
+        const onElementPointerEnter = (ev) => {
+            const element = ev.currentTarget;
+            current.hierarchyElement = element;
+            callHandler("onElementEnter", { element });
+        };
+
+        const onElementPointerLeave = (ev) => {
+            const element = ev.currentTarget;
+            current.hierarchyElement = null;
+            callHandler("onElementLeave", { element });
+        };
+
+        const onRowPointerEnter = (ev) => {
+            const row = ev.currentTarget;
+            current.hierarchyRow = row;
+            callHandler("onRowEnter", { row });
+        };
+
+        const onRowPointerLeave = (ev) => {
+            const row = ev.currentTarget;
+            current.hierarchyRow = null;
+            callHandler("onRowLeave", { row });
+        };
+
+        const { ref, current, elementSelector, rowSelector } = ctx;
+
+        for (const rowEl of ref.el.querySelectorAll(rowSelector)) {
+            addListener(rowEl, "pointerenter", onRowPointerEnter);
+            addListener(rowEl, "pointerleave", onRowPointerLeave);
+        }
+
+        for (const siblingEl of ref.el.querySelectorAll(elementSelector)) {
+            if (siblingEl !== current.element) {
+                addListener(siblingEl, "pointerenter", onElementPointerEnter);
+                addListener(siblingEl, "pointerleave", onElementPointerLeave);
+            }
+        }
+
+        return pick(current, "element", "row");
+    },
+    onDragEnd({ ctx }) {
+        return pick(ctx.current, "element", "row", "hierarchyRow");
+    },
+    onDrop({ ctx }) {
+        const { current } = ctx;
+        const rowElement = current.hierarchyRow;
+        const element = current.hierarchyElement;
+        if ((rowElement && rowElement !== current.row) || element) {
+            return {
+                element: current.element,
+                row: current.row,
+                nextRow: rowElement && current.row !== rowElement ? rowElement : null,
+                newParentNode: element,
+            };
+        }
+    },
+    onWillStartDrag({ ctx }) {
+        const { current, rowSelector } = ctx;
+
+        if (rowSelector) {
+            current.row = current.element.closest(rowSelector);
+        }
+
+        return pick(current, "element", "row");
+    },
+};
+
+export function useHierarchyNodeDraggable(params) {
+    const setupHooks = {
+        addListener: useExternalListener,
+        setup: useEffect,
+        teardown: onWillUnmount,
+        throttle: useThrottleForAnimation,
+        wrapState: reactive,
+    }
+    return makeDraggableHook({ ...hookParams, setupHooks })(params);
+}
diff --git a/addons/hr_org_chart/static/src/scss/hierarchy.variables.dark.scss b/addons/hr_org_chart/static/src/scss/hierarchy.variables.dark.scss
new file mode 100644
index 00000000000..f6da125defc
--- /dev/null
+++ b/addons/hr_org_chart/static/src/scss/hierarchy.variables.dark.scss
@@ -0,0 +1,3 @@
+$hierarchy_element_dragged-background: $gray-100 !default;
+$hierarchy_element_hover-background: #{darken($gray-100, 5%)} !default;
+$hierarchy_element_hover-border: #{$gray-100} !default;
diff --git a/addons/hr_org_chart/static/src/scss/hierarchy.variables.scss b/addons/hr_org_chart/static/src/scss/hierarchy.variables.scss
new file mode 100644
index 00000000000..b499e58b595
--- /dev/null
+++ b/addons/hr_org_chart/static/src/scss/hierarchy.variables.scss
@@ -0,0 +1,3 @@
+$hierarchy_element_dragged-background: white !default;
+$hierarchy_element_hover-background: #e6f2f3 !default;
+$hierarchy_element_hover-border: #017e84 !default;
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_arch_parser.js b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_arch_parser.js
index 079922e26f4..86f002b97e4 100644
--- a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_arch_parser.js
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_arch_parser.js
@@ -2,12 +2,13 @@
 
 import { visitXML } from "@web/core/utils/xml";
 import { Field } from "@web/views/fields/field";
-import { getActiveActions } from "@web/views/utils";
+import { archParseBoolean, getActiveActions } from "@web/views/utils";
 
 export class HierarchyArchParser {
     parse(xmlDoc, models, modelName) {
         const archInfo = {
             activeActions: getActiveActions(xmlDoc),
+            draggable: false,
             icon: "fa-share-alt o_hierarchy_icon",
             parentFieldName: "parent_id",
             fieldNodes: {},
@@ -45,6 +46,9 @@ export class HierarchyArchParser {
                     }
                     archInfo.childFieldName = childFieldName;
                 }
+                if (node.hasAttribute("draggable")) {
+                    archInfo.draggable = archParseBoolean(node.getAttribute("draggable"));
+                }
                 if (node.hasAttribute("icon")) {
                     archInfo.icon = node.getAttribute("icon");
                 }
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.scss b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.scss
index bfed09e5eaf..f9d3ce1f18b 100644
--- a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.scss
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.scss
@@ -15,6 +15,19 @@
         height: 30px;
     }
 
+    &.o_hierarchy_dragged {
+        .o_hierarchy_node {
+            background-color: $hierarchy_element_dragged-background;
+        }
+    }
+
+    &.o_hierarchy_hover {
+        .o_hierarchy_node {
+            background-color: $hierarchy_element_hover-background;
+            border: 3px solid green !important;
+        }
+    }
+
     .o_hierarchy_node {
         &:hover {
             cursor: pointer;
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.xml b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.xml
index cd9ad21ae0c..4e30411c9b1 100644
--- a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.xml
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.xml
@@ -2,7 +2,7 @@
 <templates>
 
     <t t-name="hr_org_chart.HierarchyCard">
-        <div class="o_hierarchy_node_container mb-4 d-flex flex-column" t-att-class="props.classNames">
+        <div class="o_hierarchy_node_container mb-4 d-flex flex-column" t-att-class="props.classNames" t-att-data-node-id="props.node.id">
             <div class="o_hierarchy_node_button_container w-100 d-flex justify-content-end">
                 <button t-if="props.node.parentResId !== false and !props.node.parentNode"
                         name="hierarchy_search_parent_node"
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_model.js b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_model.js
index f9d4787ddd9..6180b337daa 100644
--- a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_model.js
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_model.js
@@ -1,7 +1,9 @@
 /** @odoo-module */
 
 import { Domain } from "@web/core/domain";
+import { _t } from "@web/core/l10n/translation";
 import { KeepLast, Mutex } from "@web/core/utils/concurrency";
+import { pick } from "@web/core/utils/objects";
 import { Model } from "@web/model/model";
 
 let nodeId = 0;
@@ -218,6 +220,12 @@ export class HierarchyNode {
         );
     }
 
+    removeParentNode() {
+        this.parentNode?.removeChildNode(this);
+        this.parentNode = null;
+        this.data[this.parentFieldName] = false;
+    }
+
     /**
      * Fetch parent node
      */
@@ -251,6 +259,12 @@ export class HierarchyNode {
         this.model.notify();
     }
 
+    removeChildNode(node) {
+        this.tree.removeNodes([node, ...node.descendantNodes]);
+        this.nodes = this.nodes.filter((n) => n.id !== node.id);
+        this.data[this.childFieldName] = this.nodes.map((n) => n.data);
+    }
+
     /**
      * Remove descendant nodes of the current one
      */
@@ -313,11 +327,13 @@ export class HierarchyTree {
         this.id = treeId++;
         this.nodePerNodeId = {};
         this.forest = forest;
-        this.root = new HierarchyNode(model, config, data, this);
-        this.forest.nodePerNodeId = {
-            ...this.forest.nodePerNodeId,
-            ...this.nodePerNodeId,
-        };
+        if (data) {
+            this.root = new HierarchyNode(model, config, data, this);
+            this.forest.nodePerNodeId = {
+                ...this.forest.nodePerNodeId,
+                ...this.nodePerNodeId,
+            };
+        }
         this.model = model;
         this._config = config;
     }
@@ -419,6 +435,17 @@ export class HierarchyForest {
         );
     }
 
+    addNewRootNode(node) {
+        const tree = new HierarchyTree(this.model, this._config, null, this);
+        tree.root = node;
+        node.tree = tree;
+        tree.addNode(node);
+        for (const subNode of node.descendantNodes) {
+            tree.addNode(subNode);
+        }
+        this.trees.push(tree);
+    }
+
     removeTree(tree) {
         this.nodePerNodeId = Object.fromEntries(
             Object.entries(this.nodePerNodeId)
@@ -431,7 +458,9 @@ export class HierarchyForest {
 }
 
 export class HierarchyModel extends Model {
-    setup(params) {
+    static services = ["notification"];
+
+    setup(params, { notification }) {
         this.keepLast = new KeepLast();
         this.mutex = new Mutex();
         this.resModel = params.resModel;
@@ -439,6 +468,7 @@ export class HierarchyModel extends Model {
         this.parentFieldName = params.parentFieldName;
         this.childFieldName = params.childFieldName;
         this.activeFields = params.activeFields;
+        this.notification = notification;
         this.config = {
             domain: this.defaultDomain,
             isRoot: true,
@@ -789,4 +819,106 @@ export class HierarchyModel extends Model {
             }
         }
     }
+
+    async updateParentNode(nodeId, { parentNodeId, parentResId }) {
+        const node = this.root.nodePerNodeId[nodeId];
+        const parentNode = parentNodeId ? this.root.nodePerNodeId[parentNodeId] : null;
+        if (node) {
+            const oldParentNode = node.parentNode;
+            let fetchParentChildren = false;
+            let domain = new Domain([]);
+            if (oldParentNode) {
+                domain = new Domain([["id", "=", oldParentNode.resId]]);
+            }
+            if (parentNode) {
+                if (parentNode.resId === node.resId) {
+                    this.notification.add(
+                        _t("The parent record cannot be the record dragged."),
+                        {
+                            type: "danger",
+                        }
+                    );
+                    return;
+                }
+                domain = Domain.or([
+                    domain,
+                    [["id", "in", [parentNode.resId, node.resId]]],
+                ]);
+                if (parentNode.nodes.length === 0 && parentNode.childResIds.length > 0) {
+                    fetchParentChildren = true;
+                    domain = Domain.or([
+                        domain,
+                        [[this.parentFieldName, "=", parentNode.resId], ["id", "!=", node.resId]],
+                    ]);
+                }
+                if (node.id === node.tree.root.id) {
+                    this.root.removeTree(node.tree);
+                    node.tree = parentNode.tree;
+                } else {
+                    node.removeParentNode();
+                }
+            } else {
+                node.removeParentNode();
+                this.root.addNewRootNode(node);
+            }
+            this.notify();
+            await this.mutex.exec(async () => {
+                await this.orm.write(
+                    this.resModel,
+                    [node.resId],
+                    { [this.parentFieldName]: parentResId || parentNode?.resId || false },
+                    { context: this.config.context }
+                );
+            });
+            domain = domain.toList({});
+            if (domain.length) {
+                const data = await this.orm.searchRead(
+                    this.resModel,
+                    domain,
+                    this.fieldsToFetch,
+                    { context: this.config.context },
+                );
+                const children = [];
+                for (const d of data) {
+                    if (d.id === node.resId) {
+                        node.data = d;
+                    } else if (d.id === oldParentNode?.resId) {
+                        oldParentNode.data = d;
+                    } else if (parentNode) {
+                        if (parentNode.resId === d.id) {
+                            const parentData = fetchParentChildren ? {} : pick(parentNode.data, this.childFieldName);
+                            parentNode.data = {
+                                ...d,
+                                ...parentData,
+                            };
+                        } else if (fetchParentChildren) {
+                            children.push(d);
+                        }
+                    }
+                }
+                if (children.length) {
+                    parentNode.data[this.childFieldName || this.defaultChildFieldName] = children;
+                }
+            }
+            const treeExpanded = this._findTreeExpanded();
+            if (parentNode) {
+                if (treeExpanded && treeExpanded.id !== parentNode.tree.id) {
+                    treeExpanded.root.nodes = [];
+                    treeExpanded.nodePerNodeId = { [treeExpanded.root.id]: treeExpanded.root };
+                } else if (treeExpanded) {
+                    const nodeToCollapse = this._searchNodeToCollapse(parentNode);
+                    if (nodeToCollapse && nodeToCollapse.id !== parentNode.id) {
+                        nodeToCollapse.collapseChildNodes();
+                    }
+                }
+                if (fetchParentChildren) {
+                    parentNode.populateChildNodes();
+                }
+                node.setParentNode(parentNode);
+            } else if (treeExpanded && node.nodes.length) {
+                treeExpanded.root.collapseChildNodes();
+            }
+            this.notify();
+        }
+    }
 }
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.js b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.js
index c064f13658a..ef6253089ea 100644
--- a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.js
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.js
@@ -2,7 +2,11 @@
 
 import { Component, useRef } from "@odoo/owl";
 
+import { _t } from "@web/core/l10n/translation";
+import { useService } from "@web/core/utils/hooks";
+
 import { HierarchyCard } from "./hierarchy_card";
+import { useHierarchyNodeDraggable } from "../../hooks/hierarchy_node_draggable";
 
 export class HierarchyRenderer extends Component {
     static components = {
@@ -18,6 +22,53 @@ export class HierarchyRenderer extends Component {
 
     setup() {
         this.rendererRef = useRef("renderer");
+        this.notification = useService("notification");
+        if (this.canDragAndDropRecord) {
+            useHierarchyNodeDraggable({
+                ref: this.rendererRef,
+                enable: this.draggable,
+                elements: ".o_hierarchy_node_container",
+                handle: ".o_hierarchy_node",
+                rows: ".o_hierarchy_row",
+                ignore: "button",
+                onDragStart: ({ addClass, element }) => {
+                    addClass(element, "o_hierarchy_dragged");
+                    addClass(element.querySelector(".o_hierarchy_node"), "shadow");
+                },
+                onDragEnd: ({ removeClass, element, row, hierarchyRow }) => {
+                    removeClass(element, "o_hierarchy_dragged");
+                    if (row) {
+                        removeClass(row, "o_hierarchy_hover");
+                    }
+                    if (hierarchyRow) {
+                        removeClass(hierarchyRow, "o_hierarchy_hover");
+                    }
+                },
+                onDrop: (params) => {
+                    this.nodeDrop(params);
+                },
+                onElementEnter: ({ addClass, element }) => {
+                    addClass(element, "o_hierarchy_hover");
+                },
+                onElementLeave: ({ removeClass, element }) => {
+                    removeClass(element, "o_hierarchy_hover");
+                },
+                onRowEnter: ({ addClass, row }) => {
+                    addClass(row, "o_hierarchy_hover");
+                },
+                onRowLeave: ({ removeClass, row }) => {
+                    removeClass(row, "o_hierarchy_hover");
+                },
+            });
+        }
+    }
+
+    get canDragAndDropRecord() {
+        return this.draggable && !this.env.isSmall;
+    }
+
+    get draggable() {
+        return this.props.archInfo.draggable;
     }
 
     get rows() {
@@ -38,4 +89,32 @@ export class HierarchyRenderer extends Component {
 
         return rows;
     }
+
+    async nodeDrop({ element, row, nextRow, newParentNode }) {
+        let parentNodeId, parentResId;
+        if (newParentNode) {
+            parentNodeId = newParentNode.dataset.nodeId;
+        } else if (nextRow?.dataset.rowId !== row.dataset.rowId) {
+            parentNodeId = nextRow.dataset.parentNodeId;
+            if (!parentNodeId) {
+                const nodes = this.rows[nextRow.dataset.rowId].nodes || [];
+                if (nodes) {
+                    parentNodeId = nodes[0].parentNode?.id;
+                    if (!parentNodeId) {
+                        parentResId = nodes[0].parentResId;
+                        if (!nodes.every((node) => node.parentResId === parentResId)) {
+                            this.notification.add(
+                                _t("Impossible to update the parent node of the dragged node because no parent has been found."),
+                                {
+                                    type: "danger",
+                                }
+                            );
+                            return;
+                        }
+                    }
+                }
+            }
+        }
+        await this.props.model.updateParentNode(element.dataset.nodeId, { parentResId, parentNodeId });
+    }
 }
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.scss b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.scss
index 3bd5851c90c..4dbda080b22 100644
--- a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.scss
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.scss
@@ -4,6 +4,12 @@ $o-chart-line-color: #ababb1;
     .o_hierarchy_container {
         gap: 25px;
 
+        .o_hierarchy_row.o_hierarchy_hover {
+            background-color: $hierarchy_element_hover-background;
+            box-shadow: -1px -1px 0px 0px $hierarchy_element_hover-border inset,
+                1px 1px 0px 0px $hierarchy_element_hover-border inset;
+        }
+
         .o_hierarchy_separator {
             position: relative;
             margin-top: 10px;
diff --git a/addons/hr_org_chart/views/hr_department_views.xml b/addons/hr_org_chart/views/hr_department_views.xml
index 6d7206595e7..84084a7d779 100644
--- a/addons/hr_org_chart/views/hr_department_views.xml
+++ b/addons/hr_org_chart/views/hr_department_views.xml
@@ -5,7 +5,7 @@
         <field name="name">hr.departmnent.view.hierarchy</field>
         <field name="model">hr.department</field>
         <field name="arch" type="xml">
-            <hierarchy child_field="child_ids">
+            <hierarchy child_field="child_ids" draggable="1">
                 <field name="name" />
                 <field name="color" />
                 <field name="total_employee" />
diff --git a/addons/hr_org_chart/views/hr_views.xml b/addons/hr_org_chart/views/hr_views.xml
index 1491fb4f4ec..eff9fc32a26 100644
--- a/addons/hr_org_chart/views/hr_views.xml
+++ b/addons/hr_org_chart/views/hr_views.xml
@@ -18,7 +18,7 @@
         <field name="name">hr.employee.view.hierarchy</field>
         <field name="model">hr.employee</field>
         <field name="arch" type="xml">
-            <hierarchy child_field="child_ids" js_class="hr_employee_hierarchy" icon="fa-users">
+            <hierarchy child_field="child_ids" js_class="hr_employee_hierarchy" icon="fa-users" draggable="1">
                 <field name="name" />
                 <field name="job_id" />
                 <field name="department_color" />

From 3e5e6fd3e3505f4e21714d0e9dff8f25a00f4035 Mon Sep 17 00:00:00 2001
From: "Xavier Bol (xbo)" <xbo@odoo.com>
Date: Tue, 26 Sep 2023 10:29:11 +0200
Subject: [PATCH 12/18] [IMP] hr_org_chart: add new menu Org Chart in Employee
 menu

This commit adds a new menu called `Org Chart` in Emnployee menu
to directly have the Org chart view as first view when the user
clicks on that button.

task-3376776
---
 addons/hr_org_chart/__manifest__.py           |  1 +
 .../hr_org_chart/views/hr_org_chart_menus.xml | 13 +++++++++++++
 addons/hr_org_chart/views/hr_views.xml        | 19 +++++++++++++++++++
 3 files changed, 33 insertions(+)
 create mode 100644 addons/hr_org_chart/views/hr_org_chart_menus.xml

diff --git a/addons/hr_org_chart/__manifest__.py b/addons/hr_org_chart/__manifest__.py
index e546443fa5d..4348b31e8fb 100644
--- a/addons/hr_org_chart/__manifest__.py
+++ b/addons/hr_org_chart/__manifest__.py
@@ -18,6 +18,7 @@ This module extend the employee form with a organizational chart.
     'data': [
         'views/hr_department_views.xml',
         'views/hr_views.xml',
+        'views/hr_org_chart_menus.xml',
     ],
     'assets': {
         'web._assets_primary_variables': [
diff --git a/addons/hr_org_chart/views/hr_org_chart_menus.xml b/addons/hr_org_chart/views/hr_org_chart_menus.xml
new file mode 100644
index 00000000000..1a9aa229f18
--- /dev/null
+++ b/addons/hr_org_chart/views/hr_org_chart_menus.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+    <menuitem
+        id="menu_hr_employee_org_chart"
+        name="Org Chart"
+        action="action_hr_employee_org_chart"
+        groups="hr.group_hr_user"
+        parent="hr.menu_hr_employee_payroll"
+        sequence="5"
+    />
+
+</odoo>
diff --git a/addons/hr_org_chart/views/hr_views.xml b/addons/hr_org_chart/views/hr_views.xml
index eff9fc32a26..052d1caeef9 100644
--- a/addons/hr_org_chart/views/hr_views.xml
+++ b/addons/hr_org_chart/views/hr_views.xml
@@ -1,5 +1,24 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
+    <record id="action_hr_employee_org_chart" model="ir.actions.act_window">
+        <field name="name">Org Chart</field>
+        <field name="res_model">hr.employee</field>
+        <field name="view_mode">hierarchy,kanban,tree,form,activity,graph,pivot</field>
+        <field name="domain">[]</field>
+        <field name="context">{'chat_icon': True}</field>
+        <field name="view_id" eval="False"/>
+        <field name="search_view_id" ref="hr.view_employee_filter"/>
+        <field name="help" type="html">
+            <p class="o_view_nocontent_smiling_face">
+                Add a new employee
+            </p><p>
+                With just a quick glance on the Odoo employee screen, you
+                can easily find all the information you need for each person;
+                contact data, job position, availability, etc.
+            </p>
+        </field>
+    </record>
+
     <record id="hr_employee_view_form_inherit_org_chart" model="ir.ui.view">
         <field name="name">hr.employee.view.form.inherit.org_chart</field>
         <field name="model">hr.employee</field>

From 3489a0d28fdbaf607d18b00d144bb00bae2727c3 Mon Sep 17 00:00:00 2001
From: "Xavier Bol (xbo)" <xbo@odoo.com>
Date: Thu, 12 Oct 2023 13:49:36 +0200
Subject: [PATCH 13/18] [IMP] hr_org_chart: auto scroll in hierarchy view

Before this commit, when the user unfold a node in hierarchy view,
he has to scroll to be able to see the child nodes added.

This commit adds an auto-scroll when a new row is added to directly
show the child nodes added on the view when the user unfolds a node
in the hirarchy view.

task-3376776
---
 .../src/views/hierarchy/hierarchy_renderer.js      | 14 +++++++++++++-
 .../static/src/views/hierarchy/hierarchy_view.scss |  8 ++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.js b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.js
index ef6253089ea..4cc974b823d 100644
--- a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.js
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.js
@@ -1,9 +1,10 @@
 /** @odoo-module */
 
-import { Component, useRef } from "@odoo/owl";
+import { Component, useRef, onPatched } from "@odoo/owl";
 
 import { _t } from "@web/core/l10n/translation";
 import { useService } from "@web/core/utils/hooks";
+import { scrollTo } from "@web/core/utils/scrolling";
 
 import { HierarchyCard } from "./hierarchy_card";
 import { useHierarchyNodeDraggable } from "../../hooks/hierarchy_node_draggable";
@@ -61,6 +62,17 @@ export class HierarchyRenderer extends Component {
                 },
             });
         }
+        onPatched(this.onPatched);
+    }
+
+    onPatched() {
+        const row = this.rendererRef.el.querySelector(":scope .o_hierarchy_row:last-child");
+        if (row) {
+            const scrollable = this.env.isSmall ? document.querySelector(".o_hierarchy_view") : this.rendererRef.el.parentNode;
+            scrollable.classList.add(".o_hierarchy_auto-scroll");
+            scrollTo(row, { scrollable, isAnchor: true });
+            scrollable.classList.remove(".o_hierarchy_auto-scroll");
+        }
     }
 
     get canDragAndDropRecord() {
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_view.scss b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_view.scss
index b3085cb535f..6181b541c25 100644
--- a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_view.scss
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_view.scss
@@ -1,3 +1,11 @@
 .o_control_panel_navigation .o_switch_view .o_hierarchy_icon { // button in view switcher
     rotate: 90deg;
 }
+
+.o_hierarchy_view { // uses for auto-scroll when drag&drop or unfold node
+    scroll-behavior: smooth;
+
+    .o_content {
+        scroll-behavior: smooth;
+    }
+}

From 879e4e3412beb1e5a9cc2b084c5bb39867f9dde9 Mon Sep 17 00:00:00 2001
From: "Xavier Bol (xbo)" <xbo@odoo.com>
Date: Thu, 5 Oct 2023 13:02:49 +0200
Subject: [PATCH 14/18] [IMP] hr_org_chart: add opacity when one of siblings is
 unfolded

Before this commit, when the user unfolds a node to display its child
nodes, if that node unfolded has some child nodes then it could be
difficult for the user to clearly see the hierarchy.

This commit adds an opacity to 50% for the sibling nodes when the user
unfold a node in the same row.

task-3376776
---
 .../static/src/views/hierarchy/hierarchy_card.js   |  8 ++++++++
 .../static/src/views/hierarchy/hierarchy_card.xml  |  2 +-
 .../src/views/hierarchy/hierarchy_renderer.scss    | 14 ++++++++++----
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.js b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.js
index ae4d4296991..0c38b13f24d 100644
--- a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.js
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.js
@@ -34,6 +34,14 @@ export class HierarchyCard extends Component {
         this.templates = useViewCompiler(this.constructor.Compiler, templates);
     }
 
+    get classNames() {
+        const classNames = [this.props.classNames];
+        if (this.props.node.nodes.length) {
+            classNames.push("o_hierarchy_node_unfolded");
+        }
+        return classNames.join(" ");
+    }
+
     getRenderingContext(data) {
         const record = getFormattedRecord(data.record);
         return {
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.xml b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.xml
index 4e30411c9b1..258e479558f 100644
--- a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.xml
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.xml
@@ -2,7 +2,7 @@
 <templates>
 
     <t t-name="hr_org_chart.HierarchyCard">
-        <div class="o_hierarchy_node_container mb-4 d-flex flex-column" t-att-class="props.classNames" t-att-data-node-id="props.node.id">
+        <div class="o_hierarchy_node_container mb-4 d-flex flex-column" t-att-class="classNames" t-att-data-node-id="props.node.id">
             <div class="o_hierarchy_node_button_container w-100 d-flex justify-content-end">
                 <button t-if="props.node.parentResId !== false and !props.node.parentNode"
                         name="hierarchy_search_parent_node"
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.scss b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.scss
index 4dbda080b22..a5eb58f281f 100644
--- a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.scss
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.scss
@@ -4,10 +4,16 @@ $o-chart-line-color: #ababb1;
     .o_hierarchy_container {
         gap: 25px;
 
-        .o_hierarchy_row.o_hierarchy_hover {
-            background-color: $hierarchy_element_hover-background;
-            box-shadow: -1px -1px 0px 0px $hierarchy_element_hover-border inset,
-                1px 1px 0px 0px $hierarchy_element_hover-border inset;
+        .o_hierarchy_row {
+            &.o_hierarchy_hover {
+                background-color: $hierarchy_element_hover-background;
+                box-shadow: -1px -1px 0px 0px $hierarchy_element_hover-border inset,
+                    1px 1px 0px 0px $hierarchy_element_hover-border inset;
+            }
+
+            &:has(.o_hierarchy_node_unfolded) .o_hierarchy_node_container:not(.o_hierarchy_node_unfolded) {
+                opacity: 50%;
+            }
         }
 
         .o_hierarchy_separator {

From 6df589a73bcd828f2c5ca988c70f839219f7faa3 Mon Sep 17 00:00:00 2001
From: "Xavier Bol (xbo)" <xbo@odoo.com>
Date: Mon, 9 Oct 2023 16:17:32 +0200
Subject: [PATCH 15/18] [IMP] hr_org_chart: add hierarchy view for
 hr.employee.public model

This commit defines a hierarchy view for `hr.employee.public` model.

task-3376776
---
 addons/hr_org_chart/__manifest__.py           |  1 +
 .../views/hr_employee_public_views.xml        | 36 +++++++++++++++++++
 2 files changed, 37 insertions(+)
 create mode 100644 addons/hr_org_chart/views/hr_employee_public_views.xml

diff --git a/addons/hr_org_chart/__manifest__.py b/addons/hr_org_chart/__manifest__.py
index 4348b31e8fb..cffc30faf74 100644
--- a/addons/hr_org_chart/__manifest__.py
+++ b/addons/hr_org_chart/__manifest__.py
@@ -18,6 +18,7 @@ This module extend the employee form with a organizational chart.
     'data': [
         'views/hr_department_views.xml',
         'views/hr_views.xml',
+        'views/hr_employee_public_views.xml',
         'views/hr_org_chart_menus.xml',
     ],
     'assets': {
diff --git a/addons/hr_org_chart/views/hr_employee_public_views.xml b/addons/hr_org_chart/views/hr_employee_public_views.xml
new file mode 100644
index 00000000000..b25c76ec57b
--- /dev/null
+++ b/addons/hr_org_chart/views/hr_employee_public_views.xml
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <record id="hr_employee_public_hierarchy_view" model="ir.ui.view">
+        <field name="name">hr.employee.public.hierarchy.view</field>
+        <field name="model">hr.employee.public</field>
+        <field name="arch" type="xml">
+            <hierarchy child_field="child_ids" js_class="hr_employee_hierarchy" icon="fa-users" draggable="0">
+                <field name="name" />
+                <field name="job_id" />
+                <field name="department_color" />
+                <field name="hr_icon_display" />
+                <field name="department_id" />
+                <templates>
+                    <t t-name="hierarchy-box">
+                        <div t-attf-class="o_hierarchy_node_header d-flex justify-content-center pb-4 o_hierarchy_node_color_{{ record.department_color.raw_value }}"
+                             t-att-title="record.department_id.value"
+                        >
+                            <field name="image_1024" preview_image="image_128" options="{'zoom': true, 'zoom_delay': 1000}" widget="background_image" />
+                        </div>
+                        <div class="o_hierarchy_node_body d-flex flex-column text-center">
+                            <div class="w-100 position-relative">
+                                <field class="fw-bold" name="name" />
+                                <field name="hr_icon_display" class="d-flex align-items-end o_employee_availability" widget="hr_presence_status" />
+                            </div>
+                            <field name="job_id" />
+                        </div>
+                    </t>
+                </templates>
+            </hierarchy>
+        </field>
+    </record>
+
+    <record id="hr.hr_employee_public_action" model="ir.actions.act_window">
+        <field name="view_mode">kanban,tree,form,hierarchy</field>
+    </record>
+</odoo>

From 77afd2833f975ff9cd0975277136fa6d7f5d977f Mon Sep 17 00:00:00 2001
From: "Xavier Bol (xbo)" <xbo@odoo.com>
Date: Mon, 9 Oct 2023 17:00:03 +0200
Subject: [PATCH 16/18] [IMP] hr_org_chart: add stat button in hr.employee form
 view

This commit adds a stat button in the form view `hr.employee` model
to be able to go to the org chart and visualize the hierarchy of
the current record displayed in the form view.
The action used inside that stat button cannot have a domain to filter
the result to just have the current record since the user will not
be able to search into the search view. The alternative is to use
a context used inside the hierarchy view to add the domain only when
we load the view (as it is a default domain).

task-3376776
---
 .../static/src/views/hierarchy/hierarchy_model.js          | 7 ++++++-
 addons/hr_org_chart/views/hr_views.xml                     | 3 +++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_model.js b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_model.js
index 6180b337daa..e0a35dcd353 100644
--- a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_model.js
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_model.js
@@ -651,7 +651,12 @@ export class HierarchyModel extends Model {
         if ("domain" in params) {
             config.domain = params.domain;
             if (!params.domain.length) {
-                config.domain = this.defaultDomain;
+                if (config.context.hierarchy_res_id) {
+                    config.domain = [["id", "=", config.context.hierarchy_res_id]];
+                    delete config.context.hierarchy_res_id; // just needed for the first load.
+                } else {
+                    config.domain = this.defaultDomain;
+                }
             }
         }
         return config;
diff --git a/addons/hr_org_chart/views/hr_views.xml b/addons/hr_org_chart/views/hr_views.xml
index 052d1caeef9..7c73e36be88 100644
--- a/addons/hr_org_chart/views/hr_views.xml
+++ b/addons/hr_org_chart/views/hr_views.xml
@@ -24,6 +24,9 @@
         <field name="model">hr.employee</field>
         <field name="inherit_id" ref="hr.view_employee_form"/>
         <field name="arch" type="xml">
+            <xpath expr="//div[@name='button_box']" position="inside">
+                <button name="%(hr_org_chart.action_hr_employee_org_chart)d" string="Org Chart" type="action" context="{'hierarchy_res_id': id}" invisible="not parent_id and not child_ids"/>
+            </xpath>
             <div id="o_work_employee_main" position="after">
                 <div id="o_employee_right" class="col-lg-4 px-0 ps-lg-5 pe-lg-0">
                     <separator string="Organization Chart"/>

From 55571bc1ac00228036d9ae8c507566fdcf30278a Mon Sep 17 00:00:00 2001
From: "Xavier Bol (xbo)" <xbo@odoo.com>
Date: Tue, 29 Aug 2023 09:36:31 +0200
Subject: [PATCH 17/18] [IMP] hr_org_chart: add test for hierarchy view

This commit adds some tests for the hierarchy view to test most of
features implemented on that view.

task-3376776
---
 .../tests/views/hierarchy_view_tests.js       | 689 ++++++++++++++++++
 .../static/tests/views/mock_server.js         |  78 ++
 addons/hr_org_chart/tests/test_employee.py    |  90 ++-
 3 files changed, 841 insertions(+), 16 deletions(-)
 create mode 100644 addons/hr_org_chart/static/tests/views/hierarchy_view_tests.js
 create mode 100644 addons/hr_org_chart/static/tests/views/mock_server.js

diff --git a/addons/hr_org_chart/static/tests/views/hierarchy_view_tests.js b/addons/hr_org_chart/static/tests/views/hierarchy_view_tests.js
new file mode 100644
index 00000000000..af4e53700fe
--- /dev/null
+++ b/addons/hr_org_chart/static/tests/views/hierarchy_view_tests.js
@@ -0,0 +1,689 @@
+/** @odoo-module **/
+
+import { click, drag, dragAndDrop, getFixture, getNodesTextContent } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData, target;
+
+QUnit.module("Views", (hooks) => {
+    hooks.beforeEach(() => {
+        serverData = {
+            models: {
+                "hr.employee": {
+                    fields: {
+                        parent_id: { string: "Manager", type: "many2one", relation: "hr.employee" },
+                        name: { string: "Name" },
+                        child_ids: { string: "Subordinates", type: "one2many", relation: "hr.employee", relation_field: "parent_id" },
+                    },
+                    records: [
+                        { id: 1, name: "Albert", parent_id: false, child_ids: [2, 3] },
+                        { id: 2, name: "Georges", parent_id: 1, child_ids: [] },
+                        { id: 3, name: "Josephine", parent_id: 1, child_ids: [4] },
+                        { id: 4, name: "Louis", parent_id: 3, child_ids: [] },
+                    ],
+                },
+            },
+            views: {
+                "hr.employee,false,hierarchy": `
+                    <hierarchy>
+                        <templates>
+                            <t t-name="hierarchy-box">
+                                <div class="o_hierarchy_node_header">
+                                    <field name="name"/>
+                                </div>
+                                <div class="o_hierarchy_node_body">
+                                    <field name="parent_id"/>
+                                </div>
+                            </t>
+                        </templates>
+                    </hierarchy>
+                `,
+                "hr.employee,1,hierarchy": `
+                    <hierarchy child_field="child_ids">
+                        <field name="child_ids" invisible="1"/>
+                        <templates>
+                            <t t-name="hierarchy-box">
+                                <div class="o_hierarchy_node_header">
+                                    <field name="name"/>
+                                </div>
+                                <div class="o_hierarchy_node_body">
+                                    <field name="parent_id"/>
+                                </div>
+                            </t>
+                        </templates>
+                    </hierarchy>
+                `,
+                "hr.employee,false,form": `
+                    <form>
+                        <sheet>
+                            <group>
+                                <field name="name"/>
+                                <field name="parent_id"/>
+                            </group>
+                        </sheet>
+                    </form>
+                `,
+            },
+        };
+        setupViewRegistries();
+        target = getFixture();
+    });
+
+    QUnit.module("Hierarchy View");
+
+    QUnit.test("load hierarchy view", async function (assert) {
+        await makeView({
+            type: "hierarchy",
+            resModel: "hr.employee",
+            serverData,
+        });
+
+        assert.containsOnce(target, ".o_hierarchy_view");
+        assert.containsN(target, ".o_hierarchy_button_add", 2);
+        assert.containsOnce(target, ".o_hierarchy_view .o_hierarchy_renderer");
+        assert.containsOnce(target, ".o_hierarchy_view .o_hierarchy_renderer > .o_hierarchy_container");
+        assert.containsN(target, ".o_hierarchy_row", 2);
+        assert.containsOnce(target, ".o_hierarchy_separator");
+        assert.containsN(target, ".o_hierarchy_line_part", 2);
+        assert.containsOnce(target, ".o_hierarchy_line_left");
+        assert.containsOnce(target, ".o_hierarchy_line_right");
+        assert.containsN(target, ".o_hierarchy_node_container", 3);
+        assert.containsN(target, ".o_hierarchy_node", 3);
+        assert.containsNone(target, ".o_hierarchy_node_highlighted");
+        assert.containsN(target, ".o_hierarchy_node_button", 2);
+        assert.containsOnce(target, ".o_hierarchy_node_button.btn-primary");
+        assert.strictEqual(target.querySelector(".o_hierarchy_node_button.btn-primary").textContent.trim(), "Unfold 1");
+        // check nodes in each row
+        const row = target.querySelector(".o_hierarchy_row");
+        assert.containsOnce(row, ".o_hierarchy_node");
+        assert.strictEqual(row.querySelector(".o_hierarchy_node_content").textContent, "Albert");
+        assert.containsOnce(target, ".o_hierarchy_node_button.btn-secondary");
+        assert.strictEqual(target.querySelector(".o_hierarchy_node_button.btn-secondary").textContent.trim(), "Fold");
+    });
+
+    QUnit.test("display child nodes", async function (assert) {
+        await makeView({
+            type: "hierarchy",
+            resModel: "hr.employee",
+            serverData,
+            async mockRPC(route, args) {
+                if (args.method === "read") {
+                    assert.step("get child data");
+                } else if (args.method === "read_group") {
+                    assert.step("fetch descendants");
+                }
+            }
+        });
+
+        assert.containsN(target, ".o_hierarchy_row", 2);
+        assert.containsN(target, ".o_hierarchy_node_button", 2);
+        assert.containsOnce(target, ".o_hierarchy_node_button.btn-secondary");
+        assert.containsOnce(target, ".o_hierarchy_node_button.btn-primary");
+        await click(target,  ".o_hierarchy_node_button.btn-primary");
+        assert.containsN(target, ".o_hierarchy_row", 3);
+        assert.containsN(target, ".o_hierarchy_separator", 2);
+        assert.containsN(target, ".o_hierarchy_line_part", 4);
+        assert.containsN(target, ".o_hierarchy_line_left", 2);
+        assert.containsN(target, ".o_hierarchy_line_right", 2);
+        assert.containsN(target, ".o_hierarchy_node_container", 4);
+        assert.containsN(target, ".o_hierarchy_node", 4);
+        assert.containsN(target, ".o_hierarchy_node_button", 2);
+        assert.containsNone(target, ".o_hierarchy_node_button.btn-primary");
+        assert.containsN(target, ".o_hierarchy_node_button.btn-secondary", 2);
+        assert.strictEqual(target.querySelector(".o_hierarchy_node_button.btn-secondary").textContent.trim(), "Fold");
+        // check nodes in each row
+        const rows = target.querySelectorAll(".o_hierarchy_row");
+        let row = rows[0];
+        assert.containsOnce(row, ".o_hierarchy_node");
+        assert.strictEqual(row.querySelector(".o_hierarchy_node_content").textContent, "Albert");
+        row = rows[1];
+        assert.containsN(row, ".o_hierarchy_node", 2);
+        assert.deepEqual(
+            getNodesTextContent(row.querySelectorAll(".o_hierarchy_node_content")),
+            [ // Name + Parent name
+                "GeorgesAlbert",
+                "JosephineAlbert",
+            ],
+        );
+        row = rows[2];
+        assert.containsOnce(row, ".o_hierarchy_node");
+        assert.strictEqual(row.querySelector(".o_hierarchy_node_content").textContent, "LouisJosephine");
+        assert.verifySteps([
+            "get child data",
+            "fetch descendants",
+        ]);
+    });
+
+    QUnit.test("display child nodes with child_field set on the view", async function (assert) {
+        await makeView({
+            type: "hierarchy",
+            resModel: "hr.employee",
+            serverData,
+            viewId: 1,
+            async mockRPC(route, args) {
+                if (args.method === "read") {
+                    assert.step("get child data with descendants");
+                }
+            }
+        });
+
+        assert.containsN(target, ".o_hierarchy_row", 2);
+        assert.containsN(target, ".o_hierarchy_node_button", 2);
+        assert.containsOnce(target, ".o_hierarchy_node_button.btn-secondary");
+        assert.containsOnce(target, ".o_hierarchy_node_button.btn-primary");
+        await click(target,  ".o_hierarchy_node_button.btn-primary");
+        assert.containsN(target, ".o_hierarchy_row", 3);
+        assert.containsN(target, ".o_hierarchy_separator", 2);
+        assert.containsN(target, ".o_hierarchy_line_part", 4);
+        assert.containsN(target, ".o_hierarchy_line_left", 2);
+        assert.containsN(target, ".o_hierarchy_line_right", 2);
+        assert.containsN(target, ".o_hierarchy_node_container", 4);
+        assert.containsN(target, ".o_hierarchy_node", 4);
+        assert.containsN(target, ".o_hierarchy_node_button", 2);
+        assert.containsNone(target, ".o_hierarchy_node_button.btn-primary");
+        assert.containsN(target, ".o_hierarchy_node_button.btn-secondary", 2);
+        assert.verifySteps([
+            "get child data with descendants",
+        ]);
+    });
+
+    QUnit.test("collapse child nodes", async function (assert) {
+        await makeView({
+            type: "hierarchy",
+            resModel: "hr.employee",
+            serverData,
+        });
+
+        assert.containsN(target, ".o_hierarchy_row", 2);
+        assert.containsOnce(target, ".o_hierarchy_separator");
+        assert.containsN(target, ".o_hierarchy_line_part", 2);
+        assert.containsOnce(target, ".o_hierarchy_line_left");
+        assert.containsOnce(target, ".o_hierarchy_line_right");
+        assert.containsN(target, ".o_hierarchy_node_container", 3);
+        assert.containsN(target, ".o_hierarchy_node", 3);
+        await click(target, ".o_hierarchy_node_button.btn-secondary");
+        assert.containsOnce(target, ".o_hierarchy_row");
+        assert.containsNone(target, ".o_hierarchy_separator");
+        assert.containsNone(target, ".o_hierarchy_line_part", 2);
+        assert.containsNone(target, ".o_hierarchy_line_left");
+        assert.containsNone(target, ".o_hierarchy_line_right");
+        assert.containsOnce(target, ".o_hierarchy_node_container");
+        assert.containsOnce(target, ".o_hierarchy_node");
+        assert.containsNone(target, ".o_hierarchy_node_button.btn-secondary");
+        assert.containsOnce(target, ".o_hierarchy_node_button");
+        assert.containsOnce(target, ".o_hierarchy_node_container:not(.o_hierarchy_node_button)");
+        assert.deepEqual(getNodesTextContent(target.querySelectorAll(".o_hierarchy_row .o_hierarchy_node_content")), ["Albert"]);
+    });
+
+    QUnit.test("display the parent above the line when many records on the parent row", async function (assert) {
+        serverData.models["hr.employee"].records.push({
+            name: "Alfred",
+            parent_id: false,
+            child_ids: [],
+        })
+        await makeView({
+            type: "hierarchy",
+            resModel: "hr.employee",
+            serverData,
+        });
+
+        assert.containsOnce(target, ".o_hierarchy_row");
+        assert.containsNone(target, ".o_hierarchy_separator");
+        assert.containsN(target, ".o_hierarchy_node", 2);
+        assert.containsOnce(target, ".o_hierarchy_node_button.btn-primary");
+        await click(target, ".o_hierarchy_node_button.btn-primary");
+        assert.containsN(target, ".o_hierarchy_row", 2);
+        assert.containsOnce(target, ".o_hierarchy_separator");
+        assert.containsOnce(target, ".o_hierarchy_line_left");
+        assert.containsOnce(target, ".o_hierarchy_line_right");
+        assert.containsOnce(target, ".o_hierarchy_parent_node_container");
+        assert.strictEqual(target.querySelector(".o_hierarchy_parent_node_container").textContent, "Albert");
+    });
+
+    QUnit.test("search record in hierarchy view", async function (assert) {
+        await makeView({
+            type: "hierarchy",
+            resModel: "hr.employee",
+            serverData,
+            domain: [["id", "=", 4]], // simulate a search
+        });
+
+        assert.containsN(target, ".o_hierarchy_row", 2);
+        assert.containsN(target, ".o_hierarchy_node", 2);
+        assert.containsN(target, ".o_hierarchy_separator", 1);
+        assert.containsOnce(target, ".o_hierarchy_node_highlighted");
+        assert.strictEqual(target.querySelector(".o_hierarchy_node_highlighted").textContent.trim(), "LouisJosephine");
+    });
+
+    QUnit.test("search record in hierarchy view with child field name defined in the arch", async function (assert) {
+        await makeView({
+            type: "hierarchy",
+            resModel: "hr.employee",
+            viewId: 1,
+            serverData,
+            domain: [["id", "=", 4]], // simulate a search
+        });
+
+        assert.containsN(target, ".o_hierarchy_row", 2);
+        assert.containsN(target, ".o_hierarchy_node", 2);
+        assert.containsN(target, ".o_hierarchy_separator", 1);
+        assert.containsOnce(target, ".o_hierarchy_node_highlighted");
+        assert.strictEqual(target.querySelector(".o_hierarchy_node_highlighted").textContent.trim(), "LouisJosephine");
+    });
+
+    QUnit.test("fetch parent record", async function (assert) {
+        await makeView({
+            type: "hierarchy",
+            resModel: "hr.employee",
+            serverData,
+            domain: [["id", "=", 4]], // simulate a search
+        });
+
+        assert.containsN(target, ".o_hierarchy_row", 2);
+        assert.containsN(target, ".o_hierarchy_node", 2);
+        assert.containsN(target, ".o_hierarchy_separator", 1);
+        assert.containsOnce(target, ".o_hierarchy_node_highlighted");
+        assert.strictEqual(target.querySelector(".o_hierarchy_node_highlighted").textContent.trim(), "LouisJosephine");
+        let rows = target.querySelectorAll(".o_hierarchy_row");
+        let row = rows[0];
+        assert.containsOnce(row, ".o_hierarchy_node");
+        assert.strictEqual(row.querySelector(".o_hierarchy_node_content").textContent, "JosephineAlbert");
+        row = rows[1];
+        assert.containsOnce(row, ".o_hierarchy_node");
+        assert.strictEqual(row.querySelector(".o_hierarchy_node_content").textContent, "LouisJosephine");
+        assert.containsOnce(
+            target,
+            ".o_hierarchy_node_container button .fa-chevron-up",
+            "Button to fetch the parent node should be visible on the first node displayed in the view."
+        );
+        await click(target, ".o_hierarchy_node_container button .fa-chevron-up");
+        assert.containsN(target, ".o_hierarchy_row", 3);
+        assert.containsN(target, ".o_hierarchy_node", 4);
+        assert.containsN(target, ".o_hierarchy_separator", 2);
+        assert.containsOnce(target, ".o_hierarchy_node_highlighted");
+        assert.strictEqual(target.querySelector(".o_hierarchy_node_highlighted").textContent.trim(), "LouisJosephine");
+        rows = target.querySelectorAll(".o_hierarchy_row");
+        row = rows[0];
+        assert.containsOnce(row, ".o_hierarchy_node");
+        assert.strictEqual(row.querySelector(".o_hierarchy_node_content").textContent, "Albert");
+        row = rows[1];
+        assert.containsN(row, ".o_hierarchy_node", 2);
+        assert.deepEqual(
+            getNodesTextContent(row.querySelectorAll(".o_hierarchy_node_content")),
+            ["GeorgesAlbert", "JosephineAlbert"],
+        );
+        row = rows[2];
+        assert.containsOnce(row, ".o_hierarchy_node");
+        assert.strictEqual(row.querySelector(".o_hierarchy_node_content").textContent, "LouisJosephine");
+    });
+
+    QUnit.test("fetch parent when there are many records without the same parent in the same row", async function (assert) {
+        serverData.models["hr.employee"].records.push(
+            { id: 5, name: "Lisa", parent_id: 2, child_ids: []},
+        );
+        await makeView({
+            type: "hierarchy",
+            resModel: "hr.employee",
+            serverData,
+            domain: [["name", "ilike", "l"]], // simulate a search
+        });
+        assert.containsOnce(target, ".o_hierarchy_row");
+        assert.containsN(target, ".o_hierarchy_node_container", 3);
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_hierarchy_node_content")),
+            [
+                "LisaGeorges", "LouisJosephine", "Albert",
+            ],
+        );
+        assert.containsN(target, ".o_hierarchy_node_container button .fa-chevron-up", 2);
+        const firstNode = target.querySelector(".o_hierarchy_node_container");
+        await click(firstNode, ".o_hierarchy_node_container button .fa-chevron-up");
+        assert.containsN(target, ".o_hierarchy_row", 2);
+        assert.containsN(target, ".o_hierarchy_node", 2);
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_hierarchy_node_content")),
+            [
+                "GeorgesAlbert", "LisaGeorges",
+            ],
+        );
+        assert.containsOnce(target, ".o_hierarchy_node_container button .fa-chevron-up");
+        await click(target, ".o_hierarchy_node_container button .fa-chevron-up");
+        assert.containsN(target, ".o_hierarchy_row", 3);
+        assert.containsN(target, ".o_hierarchy_node", 4);
+    });
+
+    QUnit.test("fetch parent when parent record is in the same row", async function (assert) {
+        serverData.models["hr.employee"].records.push(
+            { id: 5, name: "Lisa", parent_id: 2, child_ids: []},
+        );
+        await makeView({
+            type: "hierarchy",
+            resModel: "hr.employee",
+            serverData,
+            domain: [["id", "in", [1, 2, 3, 4, 5]]], // simulate a search
+        });
+        assert.containsOnce(target, ".o_hierarchy_row");
+        assert.containsN(target, ".o_hierarchy_node_container", 5);
+        assert.containsN(target, ".o_hierarchy_node_container button .fa-chevron-up", 4);
+        const firstNodeWithParentBtn = target.querySelector(".o_hierarchy_node_container:has(button .fa-chevron-up)");
+        await click(firstNodeWithParentBtn, ".o_hierarchy_node_container button .fa-chevron-up");
+        assert.containsN(target, ".o_hierarchy_row", 2);
+        assert.containsN(target, ".o_hierarchy_node", 3);
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_hierarchy_node_content")),
+            [
+                "Albert", "GeorgesAlbert", "JosephineAlbert",
+            ],
+        );
+    });
+
+    QUnit.test("fetch parent of node with children displayed", async function (assert) {
+        serverData.models["hr.employee"].records.push(
+            { id: 5, name: "Lisa", parent_id: 2, child_ids: []},
+        );
+        serverData.models["hr.employee"].records.find((rec) => rec.id === 2).child_ids.push(5);
+        await makeView({
+            type: "hierarchy",
+            resModel: "hr.employee",
+            serverData,
+            domain: [["id", "in", [1, 2, 3, 4, 5]]], // simulate a search
+        });
+        assert.containsOnce(target, ".o_hierarchy_row");
+        assert.containsN(target, ".o_hierarchy_node_container", 5);
+        assert.containsN(target, ".o_hierarchy_node_container button .fa-chevron-up", 4);
+        const georgesNode = target.querySelector(".o_hierarchy_node_container:has(button[name=hierarchy_search_parent_node])");
+        assert.strictEqual(georgesNode.querySelector(".o_hierarchy_node_content").textContent, "GeorgesAlbert");
+        await click(georgesNode, "button[name=hierarchy_search_subsidiaries]");
+        assert.containsN(target, ".o_hierarchy_row", 2);
+        assert.containsN(target, ".o_hierarchy_node", 5);
+        const rows = target.querySelectorAll(".o_hierarchy_row");
+        let row = rows[0];
+        assert.containsN(row, ".o_hierarchy_node", 4);
+        assert.deepEqual(
+            getNodesTextContent(row.querySelectorAll(".o_hierarchy_node_content")),
+            ["Albert", "GeorgesAlbert", "JosephineAlbert", "LouisJosephine"],
+        );
+        row = rows[1];
+        assert.containsN(row, ".o_hierarchy_node", 1);
+        assert.strictEqual(row.querySelector(".o_hierarchy_node_content").textContent, "LisaGeorges");
+        const firstNodeWithParentBtn = target.querySelector(".o_hierarchy_node_container:has(button .fa-chevron-up)");
+        await click(firstNodeWithParentBtn, ".o_hierarchy_node_container button .fa-chevron-up");
+        assert.containsN(target, ".o_hierarchy_row", 3);
+        assert.containsN(target, ".o_hierarchy_node", 4);
+    });
+
+    QUnit.test("drag and drop is disabled by default", async function (assert) {
+        await makeView({
+            type: "hierarchy",
+            resModel: "hr.employee",
+            serverData,
+        });
+        assert.containsN(target, ".o_hierarchy_row", 2);
+        assert.containsN(target, ".o_hierarchy_node", 3);
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_hierarchy_node_content")),
+            ["Albert", "GeorgesAlbert", "JosephineAlbert"],
+        );
+
+        const nodeContainers = target.querySelectorAll(".o_hierarchy_node_container");
+        const georgesNodeContainer = nodeContainers[1];
+        assert.strictEqual(georgesNodeContainer.querySelector(".o_hierarchy_node_content").textContent, "GeorgesAlbert");
+
+        await dragAndDrop(
+            georgesNodeContainer.querySelector(".o_hierarchy_node"),
+            ".o_hierarchy_row:first-child"
+        );
+
+        assert.containsN(target, ".o_hierarchy_row", 2);
+        assert.containsN(target, ".o_hierarchy_node", 3);
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_hierarchy_node_content")),
+            ["Albert", "GeorgesAlbert", "JosephineAlbert"],
+        );
+    });
+
+    QUnit.test("drag and drop record on another row", async function (assert) {
+        serverData.views["hr.employee,false,hierarchy"] = serverData.views["hr.employee,false,hierarchy"].replace("<hierarchy>", "<hierarchy draggable='1'>");
+        await makeView({
+            type: "hierarchy",
+            resModel: "hr.employee",
+            serverData,
+        });
+        assert.containsN(target, ".o_hierarchy_row", 2);
+        assert.containsN(target, ".o_hierarchy_node", 3);
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_hierarchy_node_content")),
+            ["Albert", "GeorgesAlbert", "JosephineAlbert"],
+        );
+
+        const nodeContainers = target.querySelectorAll(".o_hierarchy_node_container");
+        const georgesNodeContainer = nodeContainers[1];
+        assert.strictEqual(georgesNodeContainer.querySelector(".o_hierarchy_node_content").textContent, "GeorgesAlbert");
+
+        await dragAndDrop(
+            georgesNodeContainer.querySelector(".o_hierarchy_node"),
+            ".o_hierarchy_row:first-child"
+        );
+
+        assert.containsN(target, ".o_hierarchy_row", 2);
+        assert.containsN(target, ".o_hierarchy_node", 3);
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_hierarchy_node_content")),
+            ["Albert", "Georges", "JosephineAlbert"],
+            "Georges should no longer have a manager"
+        );
+    });
+
+    QUnit.test("drag and drop record on sibling node", async function (assert) {
+        serverData.views["hr.employee,false,hierarchy"] = serverData.views["hr.employee,false,hierarchy"].replace("<hierarchy>", "<hierarchy draggable='1'>");
+        await makeView({
+            type: "hierarchy",
+            resModel: "hr.employee",
+            serverData,
+        });
+        assert.containsN(target, ".o_hierarchy_row", 2);
+        assert.containsN(target, ".o_hierarchy_node", 3);
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_hierarchy_node_content")),
+            ["Albert", "GeorgesAlbert", "JosephineAlbert"],
+        );
+
+        const nodeContainers = target.querySelectorAll(".o_hierarchy_node_container");
+        const georgesNodeContainer = nodeContainers[1];
+        const josephineNodeContainer = nodeContainers[2];
+        assert.strictEqual(georgesNodeContainer.querySelector(".o_hierarchy_node_content").textContent, "GeorgesAlbert");
+        assert.strictEqual(josephineNodeContainer.querySelector(".o_hierarchy_node_content").textContent, "JosephineAlbert");
+
+        await dragAndDrop(
+            georgesNodeContainer.querySelector(".o_hierarchy_node"),
+            josephineNodeContainer,
+        );
+
+        assert.containsN(target, ".o_hierarchy_row", 3);
+        assert.containsN(target, ".o_hierarchy_node", 4);
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_hierarchy_node_content")),
+            ["Albert", "JosephineAlbert", "LouisJosephine", "GeorgesJosephine"],
+            "Georges should have Josephine as manager"
+        );
+    });
+
+    QUnit.test("drag and drop node unfolded on first row", async function (assert) {
+        serverData.views["hr.employee,false,hierarchy"] = serverData.views["hr.employee,false,hierarchy"].replace("<hierarchy>", "<hierarchy draggable='1'>");
+        await makeView({
+            type: "hierarchy",
+            resModel: "hr.employee",
+            serverData,
+        });
+        assert.containsN(target, ".o_hierarchy_row", 2);
+        assert.containsN(target, ".o_hierarchy_node", 3);
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_hierarchy_node_content")),
+            ["Albert", "GeorgesAlbert", "JosephineAlbert"],
+        );
+
+        const nodeContainers = target.querySelectorAll(".o_hierarchy_node_container");
+        const josephineNodeContainer = nodeContainers[2];
+        assert.strictEqual(josephineNodeContainer.querySelector(".o_hierarchy_node_content").textContent, "JosephineAlbert");
+        await click(josephineNodeContainer, "button[name='hierarchy_search_subsidiaries']");
+
+        await dragAndDrop(
+            josephineNodeContainer.querySelector(".o_hierarchy_node"),
+            ".o_hierarchy_row:first-child"
+        );
+
+        assert.containsN(target, ".o_hierarchy_row", 2);
+        assert.containsN(target, ".o_hierarchy_node", 3);
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_hierarchy_node_content")),
+            ["Albert", "Josephine", "LouisJosephine"],
+            "Georges should have Josephine as manager"
+        );
+    });
+
+    QUnit.test("drag and drop node when other node is unfolded on first row", async function (assert) {
+        serverData.views["hr.employee,false,hierarchy"] = serverData.views["hr.employee,false,hierarchy"].replace("<hierarchy>", "<hierarchy draggable='1'>");
+        await makeView({
+            type: "hierarchy",
+            resModel: "hr.employee",
+            serverData,
+        });
+        assert.containsN(target, ".o_hierarchy_row", 2);
+        assert.containsN(target, ".o_hierarchy_node", 3);
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_hierarchy_node_content")),
+            ["Albert", "GeorgesAlbert", "JosephineAlbert"],
+        );
+
+        const nodeContainers = target.querySelectorAll(".o_hierarchy_node_container");
+        const georgesNodeContainer = nodeContainers[1];
+        const josephineNodeContainer = nodeContainers[2];
+        assert.strictEqual(georgesNodeContainer.querySelector(".o_hierarchy_node_content").textContent, "GeorgesAlbert");
+        assert.strictEqual(josephineNodeContainer.querySelector(".o_hierarchy_node_content").textContent, "JosephineAlbert");
+        await click(josephineNodeContainer, "button[name='hierarchy_search_subsidiaries']");
+
+        await dragAndDrop(
+            georgesNodeContainer.querySelector(".o_hierarchy_node"),
+            ".o_hierarchy_row:first-child"
+        );
+
+        assert.containsN(target, ".o_hierarchy_row", 3);
+        assert.containsN(target, ".o_hierarchy_node", 4);
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_hierarchy_node_content")),
+            ["Albert", "Georges", "JosephineAlbert", "LouisJosephine"],
+            "Georges should no longer have a manager"
+        );
+    });
+
+    QUnit.test("drag node and move it on a row", async function (assert) {
+        serverData.views["hr.employee,false,hierarchy"] = serverData.views["hr.employee,false,hierarchy"].replace("<hierarchy>", "<hierarchy draggable='1'>");
+        await makeView({
+            type: "hierarchy",
+            resModel: "hr.employee",
+            serverData,
+        });
+
+        assert.containsN(target, ".o_hierarchy_node", 3);
+        const nodeContainers = target.querySelectorAll(".o_hierarchy_node_container");
+        const georgesNodeContainer = nodeContainers[1];
+        assert.strictEqual(georgesNodeContainer.querySelector(".o_hierarchy_node_content").textContent, "GeorgesAlbert");
+
+        const { drop, moveTo } = await drag(georgesNodeContainer.querySelector(".o_hierarchy_node"));
+
+        await moveTo(".o_hierarchy_row:first-child");
+        assert.hasClass(georgesNodeContainer, "o_hierarchy_dragged");
+        assert.hasClass(target.querySelector(".o_hierarchy_row"), "o_hierarchy_hover");
+
+        await drop();
+        assert.containsNone(target, ".o_hierarchy_node.o_hierarchy_dragged");
+        assert.containsNone(target, ".o_hierarchy_row.o_hierarchy_hover");
+    });
+
+    QUnit.test("drag node and move it on another node", async function (assert) {
+        serverData.views["hr.employee,false,hierarchy"] = serverData.views["hr.employee,false,hierarchy"].replace("<hierarchy>", "<hierarchy draggable='1'>");
+        await makeView({
+            type: "hierarchy",
+            resModel: "hr.employee",
+            serverData,
+        });
+
+        assert.containsN(target, ".o_hierarchy_node", 3);
+        const nodeContainers = target.querySelectorAll(".o_hierarchy_node_container");
+        const georgesNodeContainer = nodeContainers[1];
+        const josephineNodeContainer = nodeContainers[2];
+        assert.strictEqual(georgesNodeContainer.querySelector(".o_hierarchy_node_content").textContent, "GeorgesAlbert");
+        assert.strictEqual(josephineNodeContainer.querySelector(".o_hierarchy_node_content").textContent, "JosephineAlbert");
+
+        const { drop, moveTo } = await drag(georgesNodeContainer.querySelector(".o_hierarchy_node"));
+
+        await moveTo(josephineNodeContainer.querySelector(".o_hierarchy_node"));
+        assert.hasClass(georgesNodeContainer, "o_hierarchy_dragged");
+        assert.hasClass(georgesNodeContainer.querySelector(".o_hierarchy_node"), "shadow");
+        assert.hasClass(josephineNodeContainer, "o_hierarchy_hover");
+
+        await drop();
+        assert.containsNone(target, ".o_hierarchy_node.o_hierarchy_dragged");
+        assert.containsNone(target, ".o_hierarchy_node.o_hierarchy_hover");
+        assert.containsNone(target, ".o_hierarchy_node.shadow");
+    });
+
+    QUnit.test("check default icon is correctly used inside button to display child nodes", async function (assert) {
+        await makeView({
+            type: "hierarchy",
+            resModel: "hr.employee",
+            serverData,
+        });
+
+        assert.containsOnce(target, ".o_hierarchy_node button[name=hierarchy_search_subsidiaries].btn-primary");
+        assert.strictEqual(target.querySelector(".o_hierarchy_node button[name=hierarchy_search_subsidiaries].btn-primary").textContent.trim(), "Unfold 1");
+        assert.containsOnce(
+            target,
+            ".o_hierarchy_node button[name=hierarchy_search_subsidiaries] i.fa-share-alt.o_hierarchy_icon",
+            "The default icon of the hierarchy view should be displayed inside the button to unfold the node."
+        );
+    });
+
+    QUnit.test("use other icon used next to Unfold string displayed inside the button", async function (assert) {
+        serverData.views["hr.employee,false,hierarchy"] = serverData.views["hr.employee,false,hierarchy"].replace("<hierarchy>", "<hierarchy icon='fa-users'>");
+        await makeView({
+            type: "hierarchy",
+            resModel: "hr.employee",
+            serverData,
+        });
+
+        assert.containsOnce(target, ".o_hierarchy_node button[name=hierarchy_search_subsidiaries].btn-primary");
+        assert.strictEqual(target.querySelector(".o_hierarchy_node button[name=hierarchy_search_subsidiaries].btn-primary").textContent.trim(), "Unfold 1");
+        assert.containsOnce(
+            target,
+            ".o_hierarchy_node button[name=hierarchy_search_subsidiaries] i.fa-users",
+            "The icon defined in the attribute icon in hierarchy tag should be displayed inside the button to unfold the node instead of the default one."
+        );
+    });
+
+    QUnit.test("use `hierarchy_res_id` context to load the view at that specific node with its siblings and parent node", async function (assert) {
+        serverData.models["hr.employee"].records.push(
+            { id: 5, name: "Lisa", parent_id: 3, child_ids: []},
+        );
+        serverData.models["hr.employee"].records.find((rec) => rec.id === 3).child_ids.push(5);
+        await makeView({
+            type: "hierarchy",
+            resModel: "hr.employee",
+            serverData,
+            context: {
+                hierarchy_res_id: 5,
+            },
+        });
+
+        assert.containsN(target, ".o_hierarchy_row", 2);
+        assert.containsN(target, ".o_hierarchy_node", 3);
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_hierarchy_node_content")),
+            ["JosephineAlbert", "LisaJosephine", "LouisJosephine"]
+        );
+        assert.containsOnce(target, ".o_hierarchy_node_container button[name=hierarchy_search_parent_node]");
+        assert.containsOnce(target, ".o_hierarchy_node_highlighted");
+        assert.containsOnce(target, ".o_hierarchy_node.o_hierarchy_node_highlighted");
+        assert.strictEqual(target.querySelector(".o_hierarchy_node_highlighted .o_hierarchy_node_content").textContent, "LisaJosephine");
+    });
+});
diff --git a/addons/hr_org_chart/static/tests/views/mock_server.js b/addons/hr_org_chart/static/tests/views/mock_server.js
new file mode 100644
index 00000000000..d047ebc07b4
--- /dev/null
+++ b/addons/hr_org_chart/static/tests/views/mock_server.js
@@ -0,0 +1,78 @@
+/** @odoo-module **/
+
+import { patch } from "@web/core/utils/patch";
+import { MockServer } from "@web/../tests/helpers/mock_server";
+
+patch(MockServer.prototype, {
+    async _performRPC(route, args) {
+        if (args.method === "hierarchy_read") {
+            return this.mockHierarchyRead(args.model, args.args, args.kwargs);
+        }
+        return super._performRPC(route, args);
+    },
+
+    mockHierarchyRead(modelName, args, kwargs) {
+        const [domain, fields, parentFieldName, childFieldName] = args;
+        if (!(parentFieldName in fields)) {
+            fields.push(parentFieldName);
+        }
+        let records = this.mockSearchRead(modelName, [domain, fields], kwargs);
+        let focusedRecordId = false;
+        let fetchChildIdsForAllRecords = false;
+        if (records.length === 1) {
+            const record = records[0];
+            let domain = [[parentFieldName, "=", record.id], ["id", "!=", record.id]];
+            if (record[parentFieldName]) {
+                focusedRecordId = record.id;
+                const parentResId = record[parentFieldName][0];
+                domain = [
+                    ["id", "!=", record.id],
+                    "|",
+                        ["id", "=", parentResId],
+                        [parentFieldName, "in", [parentResId, record.id]],
+                ];
+            }
+            records.push(...this.mockSearchRead(modelName, [domain, fields], kwargs));
+        } else if (!records.length) {
+            records = this.mockSearchRead(
+                modelName,
+                [
+                    [[parentFieldName, "=", false]],
+                    fields,
+                ],
+                kwargs,
+            );
+        } else {
+            fetchChildIdsForAllRecords = true
+        }
+        const childrenIdsPerRecordId = {};
+        if (!childFieldName) {
+            const parentResIds = [];
+            for (const rec of records) {
+                if (rec[parentFieldName]) {
+                    parentResIds.push(rec[parentFieldName][0]);
+                }
+            }
+            const recordIds = records.map((rec) => rec.id);
+            const data = this.mockReadGroup(modelName, {
+                domain: [[parentFieldName, "in", fetchChildIdsForAllRecords ? recordIds : recordIds.filter((id) => !parentResIds.includes(id))]],
+                groupby: [parentFieldName],
+                fields: ["id:array_agg"],
+            });
+            for (const d of data) {
+                childrenIdsPerRecordId[d[parentFieldName][0]] = d.id;
+            }
+        }
+        if (focusedRecordId || Object.keys(childrenIdsPerRecordId).length) {
+            for (const record of records) {
+                if (record.id in childrenIdsPerRecordId) {
+                    record.__child_ids__ = childrenIdsPerRecordId[record.id];
+                }
+                if (record.id === focusedRecordId) {
+                    record.__focus__ = true;
+                }
+            }
+        }
+        return records;
+    },
+})
diff --git a/addons/hr_org_chart/tests/test_employee.py b/addons/hr_org_chart/tests/test_employee.py
index a5ed1c2ca61..fc9f86c9468 100644
--- a/addons/hr_org_chart/tests/test_employee.py
+++ b/addons/hr_org_chart/tests/test_employee.py
@@ -10,46 +10,104 @@ class TestEmployee(TestHrCommon):
     @classmethod
     def setUpClass(cls):
         super().setUpClass()
-
-    def test_is_subordinate(self):
-        employee_georges, employee_paul, employee_pierre = self.env['hr.employee'].with_user(self.res_users_hr_officer).create([
+        cls.employee_georges, cls.employee_paul, cls.employee_pierre = cls.env['hr.employee'].with_user(cls.res_users_hr_officer).create([
             {'name': 'Georges'},
             {'name': 'Paul'},
             {'name': 'Pierre'},
         ])
-        self.res_users_hr_officer.employee_id = employee_georges
-        employee_paul.parent_id = employee_georges
-        employees = employee_paul + employee_pierre
+
+    def test_is_subordinate(self):
+        self.res_users_hr_officer.employee_id = self.employee_georges
+        self.employee_paul.parent_id = self.employee_georges
+        employees = self.employee_paul + self.employee_pierre
         self.assertTrue(
-            employee_paul.is_subordinate,
+            self.employee_paul.is_subordinate,
             'Paul should be a subordinate of the current user since the current is his manager.')
         self.assertFalse(
-            employee_pierre.is_subordinate,
+            self.employee_pierre.is_subordinate,
             'Pierre should not be a subordinate of the current user since Pierre has no manager.')
 
-        self.assertEqual(employees.filtered_domain(employees._search_is_subordinate('=', True)), employee_paul)
-        self.assertEqual(employees.filtered_domain(employees._search_is_subordinate('=', False)), employee_pierre)
+        self.assertEqual(employees.filtered_domain(employees._search_is_subordinate('=', True)), self.employee_paul)
+        self.assertEqual(employees.filtered_domain(employees._search_is_subordinate('=', False)), self.employee_pierre)
 
-        employee_pierre.parent_id = employee_paul
+        self.employee_pierre.parent_id = self.employee_paul
         self.assertTrue(
-            employee_paul.is_subordinate,
+            self.employee_paul.is_subordinate,
             'Paul should be a subordinate of the current user since the current is his manager.')
         self.assertTrue(
-            employee_pierre.is_subordinate,
+            self.employee_pierre.is_subordinate,
             "Pierre should now be a subordinate of the current user since Paul is his manager and the current user is the Paul's manager.")
 
         self.assertEqual(employees.filtered_domain(employees._search_is_subordinate('=', True)), employees)
         self.assertFalse(employees.filtered_domain(employees._search_is_subordinate('=', False)))
 
-        employee_paul.parent_id = False
+        self.employee_paul.parent_id = False
         employees._compute_is_subordinate()
 
         self.assertFalse(
-            employee_paul.is_subordinate,
+            self.employee_paul.is_subordinate,
             'Paul should no longer be a subordinate of the current user since Paul has no manager.')
         self.assertFalse(
-            employee_pierre.is_subordinate,
+            self.employee_pierre.is_subordinate,
             "Pierre should not be a subordinate of the current user since Paul is his manager and the current user is not the Paul's manager.")
 
         self.assertFalse(employees.filtered_domain(employees._search_is_subordinate('=', True)))
         self.assertEqual(employees.filtered_domain(employees._search_is_subordinate('=', False)), employees)
+
+    def test_hierarchy_read(self):
+        HrEmployee = self.env['hr.employee']
+        employees = self.employee_georges + self.employee_paul + self.employee_pierre
+        result = HrEmployee.hierarchy_read([('id', 'in', employees.ids)], ['id'], 'parent_id')
+        for emp in employees:
+            self.assertIn({'id': emp.id, 'parent_id': False}, result)
+
+        self.employee_georges.parent_id = self.employee_paul
+        self.employee_pierre.parent_id = self.employee_paul
+        result = HrEmployee.hierarchy_read([('id', 'in', employees.ids)], ['id'], 'parent_id')
+        self.assertEqual(len(result), 3)
+        for emp in employees:
+            emp_dict = {'id': emp.id, 'parent_id': emp.parent_id.id and (emp.parent_id.id, emp.parent_id.display_name)}
+            if not emp.parent_id:
+                emp_dict['__child_ids__'] = [self.employee_georges.id, self.employee_pierre.id]
+            self.assertIn(emp_dict, result)
+
+        employee_count = HrEmployee.search_count([('id', 'not in', employees.ids), ('parent_id', '=', False)])
+        result = HrEmployee.hierarchy_read([('parent_id', '=', False)], ['id'], 'parent_id')
+        self.assertEqual(len(result), 1 + employee_count)
+        for employee_dict in result:
+            self.assertFalse(employee_dict['parent_id'], "Each employee in the result should not have any parent set.")
+        self.assertIn({'id': self.employee_paul.id, 'parent_id': False, '__child_ids__': [self.employee_georges.id, self.employee_pierre.id]}, result)
+
+        result = HrEmployee.hierarchy_read([('id', '=', self.employee_paul.id)], ['id'], 'parent_id')
+        self.assertEqual(len(result), 3)
+        for emp in employees:
+            emp_dict = {'id': emp.id, 'parent_id': emp.parent_id.id and (emp.parent_id.id, emp.parent_id.display_name)}
+            self.assertIn(emp_dict, result)
+
+        result = HrEmployee.hierarchy_read([('id', '=', self.employee_georges.id)], ['id'], 'parent_id')
+        self.assertEqual(len(result), 3)
+        for emp in employees:
+            emp_dict = {'id': emp.id, 'parent_id': emp.parent_id.id and (emp.parent_id.id, emp.parent_id.display_name)}
+            if emp == self.employee_georges:
+                emp_dict['__focus__'] = True
+            self.assertIn(emp_dict, result)
+
+        self.employee_pierre.parent_id = self.employee_georges
+        result = HrEmployee.hierarchy_read([('id', '=', self.employee_georges.id)], ['id'], 'parent_id')
+        self.assertEqual(len(result), 3)
+        for emp in employees:
+            emp_dict = {'id': emp.id, 'parent_id': emp.parent_id.id and (emp.parent_id.id, emp.parent_id.display_name)}
+            if emp == self.employee_georges:
+                emp_dict['__focus__'] = True
+            self.assertIn(emp_dict, result)
+
+        result = HrEmployee.hierarchy_read([('id', '=', self.employee_pierre.id)], ['id'], 'parent_id')
+        self.assertEqual(len(result), 2)
+        self.assertIn(
+            {'id': self.employee_pierre.id, 'parent_id': (self.employee_georges.id, self.employee_georges.name), '__focus__': True},
+            result
+        )
+        self.assertIn(
+            {'id': self.employee_georges.id, 'parent_id': (self.employee_paul.id, self.employee_paul.name)},
+            result
+        )

From a055b9c20efc719d9a3c2e89a0ebbcd52a85d5a0 Mon Sep 17 00:00:00 2001
From: "Xavier Bol (xbo)" <xbo@odoo.com>
Date: Thu, 12 Oct 2023 15:10:03 +0200
Subject: [PATCH 18/18] [MOV] hr_org_chart,web_hierarchy: move hierarchy view
 in its own module

This commit moves the generic code of hierarchy view into new module
called `web_hierarchy` to be able to use it outside the hr scope.

task-3376776
---
 addons/hr_org_chart/__manifest__.py           |  8 ++---
 addons/hr_org_chart/models/__init__.py        |  3 --
 .../hr_employee_hierarchy_renderer.js         |  2 +-
 .../hr_employee_hierarchy_renderer.xml        |  2 +-
 .../hr_employee_hierarchy_view.js             |  2 +-
 addons/web_hierarchy/__init__.py              |  3 ++
 addons/web_hierarchy/__manifest__.py          | 29 +++++++++++++++++++
 addons/web_hierarchy/models/__init__.py       |  5 ++++
 .../models/ir_actions.py                      |  0
 .../models/ir_ui_view.py                      |  0
 .../models/models.py                          |  0
 .../static/src}/hierarchy.variables.dark.scss |  0
 .../static/src}/hierarchy.variables.scss      |  0
 .../static/src}/hierarchy_arch_parser.js      |  0
 .../static/src}/hierarchy_card.js             |  2 +-
 .../static/src}/hierarchy_card.scss           |  0
 .../static/src}/hierarchy_card.xml            |  2 +-
 .../static/src}/hierarchy_compiler.js         |  0
 .../static/src}/hierarchy_controller.js       |  2 +-
 .../static/src}/hierarchy_controller.xml      |  4 +--
 .../static/src}/hierarchy_model.js            |  0
 .../static/src}/hierarchy_node_draggable.js   |  0
 .../static/src}/hierarchy_renderer.js         |  4 +--
 .../static/src}/hierarchy_renderer.scss       |  0
 .../static/src}/hierarchy_renderer.xml        |  2 +-
 .../static/src}/hierarchy_view.js             |  2 +-
 .../static/src}/hierarchy_view.scss           |  0
 .../static/tests}/hierarchy_view_tests.js     |  0
 .../static/tests}/mock_server.js              |  0
 29 files changed, 51 insertions(+), 21 deletions(-)
 create mode 100644 addons/web_hierarchy/__init__.py
 create mode 100644 addons/web_hierarchy/__manifest__.py
 create mode 100644 addons/web_hierarchy/models/__init__.py
 rename addons/{hr_org_chart => web_hierarchy}/models/ir_actions.py (100%)
 rename addons/{hr_org_chart => web_hierarchy}/models/ir_ui_view.py (100%)
 rename addons/{hr_org_chart => web_hierarchy}/models/models.py (100%)
 rename addons/{hr_org_chart/static/src/scss => web_hierarchy/static/src}/hierarchy.variables.dark.scss (100%)
 rename addons/{hr_org_chart/static/src/scss => web_hierarchy/static/src}/hierarchy.variables.scss (100%)
 rename addons/{hr_org_chart/static/src/views/hierarchy => web_hierarchy/static/src}/hierarchy_arch_parser.js (100%)
 rename addons/{hr_org_chart/static/src/views/hierarchy => web_hierarchy/static/src}/hierarchy_card.js (97%)
 rename addons/{hr_org_chart/static/src/views/hierarchy => web_hierarchy/static/src}/hierarchy_card.scss (100%)
 rename addons/{hr_org_chart/static/src/views/hierarchy => web_hierarchy/static/src}/hierarchy_card.xml (98%)
 rename addons/{hr_org_chart/static/src/views/hierarchy => web_hierarchy/static/src}/hierarchy_compiler.js (100%)
 rename addons/{hr_org_chart/static/src/views/hierarchy => web_hierarchy/static/src}/hierarchy_controller.js (97%)
 rename addons/{hr_org_chart/static/src/views/hierarchy => web_hierarchy/static/src}/hierarchy_controller.xml (94%)
 rename addons/{hr_org_chart/static/src/views/hierarchy => web_hierarchy/static/src}/hierarchy_model.js (100%)
 rename addons/{hr_org_chart/static/src/hooks => web_hierarchy/static/src}/hierarchy_node_draggable.js (100%)
 rename addons/{hr_org_chart/static/src/views/hierarchy => web_hierarchy/static/src}/hierarchy_renderer.js (97%)
 rename addons/{hr_org_chart/static/src/views/hierarchy => web_hierarchy/static/src}/hierarchy_renderer.scss (100%)
 rename addons/{hr_org_chart/static/src/views/hierarchy => web_hierarchy/static/src}/hierarchy_renderer.xml (96%)
 rename addons/{hr_org_chart/static/src/views/hierarchy => web_hierarchy/static/src}/hierarchy_view.js (95%)
 rename addons/{hr_org_chart/static/src/views/hierarchy => web_hierarchy/static/src}/hierarchy_view.scss (100%)
 rename addons/{hr_org_chart/static/tests/views => web_hierarchy/static/tests}/hierarchy_view_tests.js (100%)
 rename addons/{hr_org_chart/static/tests/views => web_hierarchy/static/tests}/mock_server.js (100%)

diff --git a/addons/hr_org_chart/__manifest__.py b/addons/hr_org_chart/__manifest__.py
index cffc30faf74..94a4cf9ac56 100644
--- a/addons/hr_org_chart/__manifest__.py
+++ b/addons/hr_org_chart/__manifest__.py
@@ -13,8 +13,8 @@ Org Chart Widget for HR
 This module extend the employee form with a organizational chart.
 (N+1, N+2, direct subordinates)
         """,
-    'depends': ['hr'],
-    'auto_install': True,
+    'depends': ['hr', 'web_hierarchy'],
+    'auto_install': ['hr'],
     'data': [
         'views/hr_department_views.xml',
         'views/hr_views.xml',
@@ -26,13 +26,9 @@ This module extend the employee form with a organizational chart.
             'hr_org_chart/static/src/scss/variables.scss',
         ],
         'web.assets_backend': [
-            'hr_org_chart/static/src/scss/hierarchy.variables.scss',
             'hr_org_chart/static/src/fields/*',
             'hr_org_chart/static/src/views/**/*',
         ],
-        'web.assets_web_dark': [
-            ('before', 'hr_org_chart/static/src/scss/hierarchy.variables.scss', 'hr_org_chart/static/src/scss/**/*.variables.dark.scss'),
-        ],
         'web.qunit_suite_tests': [
             'hr_org_chart/static/tests/**/*',
         ],
diff --git a/addons/hr_org_chart/models/__init__.py b/addons/hr_org_chart/models/__init__.py
index b51ad54cfff..27f11d1b306 100644
--- a/addons/hr_org_chart/models/__init__.py
+++ b/addons/hr_org_chart/models/__init__.py
@@ -3,6 +3,3 @@
 
 from . import hr_org_chart_mixin
 from . import hr_employee
-from . import ir_actions
-from . import ir_ui_view
-from . import models
diff --git a/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_renderer.js b/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_renderer.js
index 972a1f74455..d1fceb83b74 100644
--- a/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_renderer.js
+++ b/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_renderer.js
@@ -2,7 +2,7 @@
 
 import { Avatar } from "@mail/views/web/fields/avatar/avatar";
 
-import { HierarchyRenderer } from "../hierarchy/hierarchy_renderer";
+import { HierarchyRenderer } from "@web_hierarchy/hierarchy_renderer";
 
 export class HrEmployeeHierarchyRenderer extends HierarchyRenderer {
    static template = "hr_org_chart.HrEmployeeHierarchyRenderer";
diff --git a/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_renderer.xml b/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_renderer.xml
index 760af418f3f..56b91f32b4d 100644
--- a/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_renderer.xml
+++ b/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_renderer.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <templates>
 
-    <t t-name="hr_org_chart.HrEmployeeHierarchyRenderer" t-inherit="hr_org_chart.HierarchyRenderer">
+    <t t-name="hr_org_chart.HrEmployeeHierarchyRenderer" t-inherit="web_hierarchy.HierarchyRenderer">
         <xpath expr="//div[hasclass('o_hierarchy_parent_node_container')]/span" position="replace">
             <Avatar
                 resModel="row.parentNode.model.resModel"
diff --git a/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_view.js b/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_view.js
index 05fb680dcb8..72056d189a4 100644
--- a/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_view.js
+++ b/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_view.js
@@ -1,7 +1,7 @@
 /** @odoo-module **/
 
 import { registry } from "@web/core/registry";
-import { hierarchyView } from "../hierarchy/hierarchy_view";
+import { hierarchyView } from "@web_hierarchy/hierarchy_view";
 import { HrEmployeeHierarchyRenderer } from "./hr_employee_hierarchy_renderer";
 
 export const hrEmployeeHierarchyView = {
diff --git a/addons/web_hierarchy/__init__.py b/addons/web_hierarchy/__init__.py
new file mode 100644
index 00000000000..d6210b1285d
--- /dev/null
+++ b/addons/web_hierarchy/__init__.py
@@ -0,0 +1,3 @@
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+
+from . import models
diff --git a/addons/web_hierarchy/__manifest__.py b/addons/web_hierarchy/__manifest__.py
new file mode 100644
index 00000000000..038439567f4
--- /dev/null
+++ b/addons/web_hierarchy/__manifest__.py
@@ -0,0 +1,29 @@
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+
+{
+    'name': 'Web Hierarchy',
+    'category': 'Hidden',
+    'version': '1.0',
+    'description':
+        """
+Odoo Web Hierarchy view
+=======================
+
+This module adds a new view called to be able to define a view to display
+an organization such as an Organization Chart for employees for instance.
+        """,
+    'depends': ['web'],
+    'assets': {
+        'web.assets_backend': [
+            'web_hierarchy/static/src/hierarchy.variables.scss',
+            'web_hierarchy/static/src/**/*',
+        ],
+        'web.assets_web_dark': [
+            ('before', 'web_hierarchy/static/src/hierarchy.variables.scss', 'web_hierarchy/static/src/**/*.variables.dark.scss'),
+        ],
+        'web.qunit_suite_tests': [
+            'web_hierarchy/static/tests/**/*',
+        ],
+    },
+    'license': 'LGPL-3',
+}
diff --git a/addons/web_hierarchy/models/__init__.py b/addons/web_hierarchy/models/__init__.py
new file mode 100644
index 00000000000..89107c88c34
--- /dev/null
+++ b/addons/web_hierarchy/models/__init__.py
@@ -0,0 +1,5 @@
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+
+from . import ir_actions
+from . import ir_ui_view
+from . import models
diff --git a/addons/hr_org_chart/models/ir_actions.py b/addons/web_hierarchy/models/ir_actions.py
similarity index 100%
rename from addons/hr_org_chart/models/ir_actions.py
rename to addons/web_hierarchy/models/ir_actions.py
diff --git a/addons/hr_org_chart/models/ir_ui_view.py b/addons/web_hierarchy/models/ir_ui_view.py
similarity index 100%
rename from addons/hr_org_chart/models/ir_ui_view.py
rename to addons/web_hierarchy/models/ir_ui_view.py
diff --git a/addons/hr_org_chart/models/models.py b/addons/web_hierarchy/models/models.py
similarity index 100%
rename from addons/hr_org_chart/models/models.py
rename to addons/web_hierarchy/models/models.py
diff --git a/addons/hr_org_chart/static/src/scss/hierarchy.variables.dark.scss b/addons/web_hierarchy/static/src/hierarchy.variables.dark.scss
similarity index 100%
rename from addons/hr_org_chart/static/src/scss/hierarchy.variables.dark.scss
rename to addons/web_hierarchy/static/src/hierarchy.variables.dark.scss
diff --git a/addons/hr_org_chart/static/src/scss/hierarchy.variables.scss b/addons/web_hierarchy/static/src/hierarchy.variables.scss
similarity index 100%
rename from addons/hr_org_chart/static/src/scss/hierarchy.variables.scss
rename to addons/web_hierarchy/static/src/hierarchy.variables.scss
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_arch_parser.js b/addons/web_hierarchy/static/src/hierarchy_arch_parser.js
similarity index 100%
rename from addons/hr_org_chart/static/src/views/hierarchy/hierarchy_arch_parser.js
rename to addons/web_hierarchy/static/src/hierarchy_arch_parser.js
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.js b/addons/web_hierarchy/static/src/hierarchy_card.js
similarity index 97%
rename from addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.js
rename to addons/web_hierarchy/static/src/hierarchy_card.js
index 0c38b13f24d..0ae4002de65 100644
--- a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.js
+++ b/addons/web_hierarchy/static/src/hierarchy_card.js
@@ -26,7 +26,7 @@ export class HierarchyCard extends Component {
     static defaultProps = {
         classNames: "",
     };
-    static template = "hr_org_chart.HierarchyCard";
+    static template = "web_hierarchy.HierarchyCard";
     static Compiler = HierarchyCompiler;
 
     setup() {
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.scss b/addons/web_hierarchy/static/src/hierarchy_card.scss
similarity index 100%
rename from addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.scss
rename to addons/web_hierarchy/static/src/hierarchy_card.scss
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.xml b/addons/web_hierarchy/static/src/hierarchy_card.xml
similarity index 98%
rename from addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.xml
rename to addons/web_hierarchy/static/src/hierarchy_card.xml
index 258e479558f..8c118304dc6 100644
--- a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.xml
+++ b/addons/web_hierarchy/static/src/hierarchy_card.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <templates>
 
-    <t t-name="hr_org_chart.HierarchyCard">
+    <t t-name="web_hierarchy.HierarchyCard">
         <div class="o_hierarchy_node_container mb-4 d-flex flex-column" t-att-class="classNames" t-att-data-node-id="props.node.id">
             <div class="o_hierarchy_node_button_container w-100 d-flex justify-content-end">
                 <button t-if="props.node.parentResId !== false and !props.node.parentNode"
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_compiler.js b/addons/web_hierarchy/static/src/hierarchy_compiler.js
similarity index 100%
rename from addons/hr_org_chart/static/src/views/hierarchy/hierarchy_compiler.js
rename to addons/web_hierarchy/static/src/hierarchy_compiler.js
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_controller.js b/addons/web_hierarchy/static/src/hierarchy_controller.js
similarity index 97%
rename from addons/hr_org_chart/static/src/views/hierarchy/hierarchy_controller.js
rename to addons/web_hierarchy/static/src/hierarchy_controller.js
index 4e83a538fbe..e4f440d30e2 100644
--- a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_controller.js
+++ b/addons/web_hierarchy/static/src/hierarchy_controller.js
@@ -25,7 +25,7 @@ export class HierarchyController extends Component {
         buttonTemplate: String,
         archInfo: Object,
     };
-    static template = "hr_org_chart.HierarchyView";
+    static template = "web_hierarchy.HierarchyView";
 
     setup() {
         this.rootRef = useRef("root");
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_controller.xml b/addons/web_hierarchy/static/src/hierarchy_controller.xml
similarity index 94%
rename from addons/hr_org_chart/static/src/views/hierarchy/hierarchy_controller.xml
rename to addons/web_hierarchy/static/src/hierarchy_controller.xml
index f014ffb3f51..f1df51f5b0e 100644
--- a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_controller.xml
+++ b/addons/web_hierarchy/static/src/hierarchy_controller.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <templates>
-    <t t-name="hr_org_chart.HierarchyButtons" owl="1">
+    <t t-name="web_hierarchy.HierarchyButtons" owl="1">
         <div class="d-flex o_grid_buttons">
             <div class="me-2" t-if="props.archInfo.activeActions.create and (!props.archInfo.createInline or displayNoContent)">
                 <button class="btn btn-primary o_hierarchy_button_add"
@@ -11,7 +11,7 @@
             </div>
         </div>
     </t>
-    <t t-name="hr_org_chart.HierarchyView" owl="1">
+    <t t-name="web_hierarchy.HierarchyView" owl="1">
         <div t-attf-class="o_hierarchy_view {{ isMobile ? 'o_action_delegate_scroll' : '' }} {{ props.className }}" t-ref="root">
             <Layout className="(model.useSampleModel ? 'o_view_sample_data' : '') + ' d-flex'" display="props.display">
                 <t t-set-slot="control-panel-additional-actions">
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_model.js b/addons/web_hierarchy/static/src/hierarchy_model.js
similarity index 100%
rename from addons/hr_org_chart/static/src/views/hierarchy/hierarchy_model.js
rename to addons/web_hierarchy/static/src/hierarchy_model.js
diff --git a/addons/hr_org_chart/static/src/hooks/hierarchy_node_draggable.js b/addons/web_hierarchy/static/src/hierarchy_node_draggable.js
similarity index 100%
rename from addons/hr_org_chart/static/src/hooks/hierarchy_node_draggable.js
rename to addons/web_hierarchy/static/src/hierarchy_node_draggable.js
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.js b/addons/web_hierarchy/static/src/hierarchy_renderer.js
similarity index 97%
rename from addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.js
rename to addons/web_hierarchy/static/src/hierarchy_renderer.js
index 4cc974b823d..b105ec3bbb7 100644
--- a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.js
+++ b/addons/web_hierarchy/static/src/hierarchy_renderer.js
@@ -7,7 +7,7 @@ import { useService } from "@web/core/utils/hooks";
 import { scrollTo } from "@web/core/utils/scrolling";
 
 import { HierarchyCard } from "./hierarchy_card";
-import { useHierarchyNodeDraggable } from "../../hooks/hierarchy_node_draggable";
+import { useHierarchyNodeDraggable } from "./hierarchy_node_draggable";
 
 export class HierarchyRenderer extends Component {
     static components = {
@@ -19,7 +19,7 @@ export class HierarchyRenderer extends Component {
         archInfo: Object,
         templates: Object,
     };
-    static template = "hr_org_chart.HierarchyRenderer";
+    static template = "web_hierarchy.HierarchyRenderer";
 
     setup() {
         this.rendererRef = useRef("renderer");
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.scss b/addons/web_hierarchy/static/src/hierarchy_renderer.scss
similarity index 100%
rename from addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.scss
rename to addons/web_hierarchy/static/src/hierarchy_renderer.scss
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.xml b/addons/web_hierarchy/static/src/hierarchy_renderer.xml
similarity index 96%
rename from addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.xml
rename to addons/web_hierarchy/static/src/hierarchy_renderer.xml
index f46286f3e0a..2c22a32d868 100644
--- a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.xml
+++ b/addons/web_hierarchy/static/src/hierarchy_renderer.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <templates>
 
-    <t t-name="hr_org_chart.HierarchyRenderer" owl="1">
+    <t t-name="web_hierarchy.HierarchyRenderer" owl="1">
         <div class="o_hierarchy_renderer w-100 d-flex justify-content-center" t-ref="renderer">
             <div class="o_hierarchy_container d-flex flex-column w-100 w-lg-75 h-100 pt-5 px-2">
                 <t t-foreach="rows" t-as="row" t-key="row_index">
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_view.js b/addons/web_hierarchy/static/src/hierarchy_view.js
similarity index 95%
rename from addons/hr_org_chart/static/src/views/hierarchy/hierarchy_view.js
rename to addons/web_hierarchy/static/src/hierarchy_view.js
index abf7e4dca95..a868252b3ff 100644
--- a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_view.js
+++ b/addons/web_hierarchy/static/src/hierarchy_view.js
@@ -17,7 +17,7 @@ export const hierarchyView = {
     Controller: HierarchyController,
     Model: HierarchyModel,
     Renderer: HierarchyRenderer,
-    buttonTemplate: "hr_org_chart.HierarchyButtons",
+    buttonTemplate: "web_hierarchy.HierarchyButtons",
     searchMenuTypes: [],
 
     props: (genericProps, view) => {
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_view.scss b/addons/web_hierarchy/static/src/hierarchy_view.scss
similarity index 100%
rename from addons/hr_org_chart/static/src/views/hierarchy/hierarchy_view.scss
rename to addons/web_hierarchy/static/src/hierarchy_view.scss
diff --git a/addons/hr_org_chart/static/tests/views/hierarchy_view_tests.js b/addons/web_hierarchy/static/tests/hierarchy_view_tests.js
similarity index 100%
rename from addons/hr_org_chart/static/tests/views/hierarchy_view_tests.js
rename to addons/web_hierarchy/static/tests/hierarchy_view_tests.js
diff --git a/addons/hr_org_chart/static/tests/views/mock_server.js b/addons/web_hierarchy/static/tests/mock_server.js
similarity index 100%
rename from addons/hr_org_chart/static/tests/views/mock_server.js
rename to addons/web_hierarchy/static/tests/mock_server.js