From f1d584b306021832ff35bf77d29605a46ee21b28 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Tue, 10 Dec 2024 17:29:58 +0100
Subject: [PATCH] wc: Implement new vertical menu in organization admin
 #TASK-7216 #TASK-7100

---
 .../organization/admin/organization-admin.js  | 220 ++++++++----------
 1 file changed, 102 insertions(+), 118 deletions(-)

diff --git a/src/webcomponents/organization/admin/organization-admin.js b/src/webcomponents/organization/admin/organization-admin.js
index ac100e761..34d4598c1 100644
--- a/src/webcomponents/organization/admin/organization-admin.js
+++ b/src/webcomponents/organization/admin/organization-admin.js
@@ -21,6 +21,7 @@ import "../../project/projects-admin.js";
 import "./project-admin-browser.js";
 import "./organization-admin-detail.js";
 import "../../commons/pages/restricted-access-page.js";
+import "../../commons/vertical-navbar.js";
 
 export default class OrganizationAdmin extends LitElement {
 
@@ -44,7 +45,6 @@ export default class OrganizationAdmin extends LitElement {
 
     #init() {
         this._config = this.getDefaultConfig();
-        this._activeMenuItem = "";
     }
 
     render() {
@@ -61,135 +61,119 @@ export default class OrganizationAdmin extends LitElement {
                 title="Organization Admin: ${this.opencgaSession?.user?.organization}"
                 icon="fas fa-sitemap">
             </tool-header>
-            <custom-vertical-navbar
-                .organization="${this.opencgaSession.organization}"
+            <vertical-navbar
                 .opencgaSession="${this.opencgaSession}"
-                .config="${this._config}"
-                .activeMenuItem="${this._activeMenuItem}">
-            </custom-vertical-navbar>
+                .config="${this._config || {}}">
+            </vertical-navbar>
         `;
     }
 
     getDefaultConfig() {
-        const menu = [
-            {
-                id: "general",
-                name: "General",
-                description: "",
-                icon: "",
-                featured: "",
-                visibility: "private",
-                submenu: [
-                    // TODO
-                    {
-                        id: "dashboard",
-                        name: "Dashboard (Coming soon)",
-                        icon: "fas fa-vial",
-                        visibility: "private",
-                        render: () => html``,
-                    },
-                    // TODO
-                    {
-                        id: "audit",
-                        name: "Audit (Coming soon)",
-                        type: "category",
-                        icon: "fas fa-vial",
-                        visibility: "private",
-                        render: () => html``,
-                    },
-                ],
+        return {
+            display: {
+                menuStyle: "width:200px;",
             },
-            {
-                id: "manage",
-                name: "Manage",
-                description: "",
-                icon: "",
-                featured: "", // true | false
-                visibility: "private",
-                submenu: [
-                    /* Vero Note: Maintained for future use in Organization Admin
-                    {
-                        id: "groups",
-                        name: "Groups",
-                        icon: "fas fa-vial",
-                        visibility: "private",
-                        render: (opencgaSession, organization) => html`
-                            <group-admin-browser
-                                .organization="${organization}"
-                                .opencgaSession="${opencgaSession}">
-                            </group-admin-browser>
-                        `,
-                    },
-                     */
-                    {
-                        id: "users",
-                        name: "Users",
-                        icon: "fas fa-users",
-                        visibility: "private",
-                        render: (opencgaSession, organization) => html`
-                            <user-admin-browser
-                                .organization="${organization}"
-                                .opencgaSession="${opencgaSession}">
-                            </user-admin-browser>
-                        `,
-                    },
-                    {
-                        id: "studies",
-                        name: "Projects/Studies",
-                        icon: "fas fa-project-diagram",
-                        visibility: "private",
-                        render: (opencgaSession, organization) => {
-                            return html`
-                                <project-admin-browser
+            menu: [
+                // {
+                //     id: "general",
+                //     name: "General",
+                //     description: "",
+                //     icon: "",
+                //     featured: "",
+                //     visibility: "private",
+                //     submenu: [
+                //         {
+                //             id: "dashboard",
+                //             name: "Dashboard (Coming soon)",
+                //             icon: "fas fa-vial",
+                //             visibility: "private",
+                //             render: () => html``,
+                //         },
+                //         {
+                //             id: "audit",
+                //             name: "Audit (Coming soon)",
+                //             type: "category",
+                //             icon: "fas fa-vial",
+                //             visibility: "private",
+                //             render: () => html``,
+                //         },
+                //     ],
+                // },
+                {
+                    id: "manage",
+                    name: "Manage",
+                    description: "",
+                    icon: "",
+                    featured: "", // true | false
+                    visibility: "private",
+                    submenu: [
+                        /* Vero Note: Maintained for future use in Organization Admin
+                        {
+                            id: "groups",
+                            name: "Groups",
+                            icon: "fas fa-vial",
+                            visibility: "private",
+                            render: (opencgaSession, organization) => html`
+                                <group-admin-browser
                                     .organization="${organization}"
                                     .opencgaSession="${opencgaSession}">
-                                </project-admin-browser>
-                            `;
+                                </group-admin-browser>
+                            `,
                         },
-                    },
-                ],
-            },
-            {
-                id: "configure",
-                name: "Configure",
-                description: "",
-                icon: "",
-                featured: "",
-                visibility: "private",
-                submenu: [
-                    {
-                        id: "settings",
-                        name: "Organization",
-                        icon: "fas fa-sitemap",
-                        visibility: "private",
-                        render: (opencgaSession, organization) => {
-                            return html`
-                                <organization-admin-detail
+                         */
+                        {
+                            id: "users",
+                            name: "Users",
+                            icon: "fas fa-users",
+                            visibility: "private",
+                            render: (opencgaSession, organization) => html`
+                                <user-admin-browser
                                     .organization="${organization}"
                                     .opencgaSession="${opencgaSession}">
-                                </organization-admin-detail>
-                            `;
+                                </user-admin-browser>
+                            `,
                         },
-                    },
-                    /*
-                    {
-                        id: "optimization",
-                        name: "Optimizations",
-                        icon: "fas fa-vial",
-                        visibility: "private",
-                        render: (opencgaSession, study) => html``,
-                    },
-                     */
-                ],
-            },
-        ];
-
-        return {
-            name: "Organization Admin",
-            logo: "",
-            icon: "",
-            visibility: "",
-            menu: menu,
+                        {
+                            id: "studies",
+                            name: "Projects/Studies",
+                            icon: "fas fa-project-diagram",
+                            visibility: "private",
+                            render: (opencgaSession, organization) => {
+                                return html`
+                                    <project-admin-browser
+                                        .organization="${organization}"
+                                        .opencgaSession="${opencgaSession}">
+                                    </project-admin-browser>
+                                `;
+                            },
+                        },
+                    ],
+                },
+                {
+                    id: "configure",
+                    name: "Configure",
+                    description: "",
+                    icon: "",
+                    featured: "",
+                    visibility: "private",
+                    submenu: [
+                        {
+                            id: "settings",
+                            name: "Organization",
+                            icon: "fas fa-sitemap",
+                            visibility: "private",
+                            render: (opencgaSession, organization) => {
+                                return html`
+                                    <organization-admin-detail
+                                        .organization="${organization}"
+                                        .opencgaSession="${opencgaSession}">
+                                    </organization-admin-detail>
+                                `;
+                            },
+                        },
+                    ],
+                },
+            ],
         };
     }