From bb2db2e061bfb48550105320f73f07237e5ec159 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Wed, 8 Jan 2025 17:33:47 +0100
Subject: [PATCH] wc: Allow to add a lect content in the grid-toolbar
 #TASK-7216 #TASK-7100

---
 .../commons/opencb-grid-toolbar.js            | 100 +++++++++---------
 1 file changed, 49 insertions(+), 51 deletions(-)

diff --git a/src/webcomponents/commons/opencb-grid-toolbar.js b/src/webcomponents/commons/opencb-grid-toolbar.js
index 87d527a5d..3246788ae 100644
--- a/src/webcomponents/commons/opencb-grid-toolbar.js
+++ b/src/webcomponents/commons/opencb-grid-toolbar.js
@@ -43,6 +43,9 @@ export default class OpencbGridToolbar extends LitElement {
             rightToolbar: {
                 type: Array
             },
+            leftContent: {
+                type: Object,
+            },
             query: {
                 type: Object
             },
@@ -139,61 +142,56 @@ export default class OpencbGridToolbar extends LitElement {
         }
 
         return html`
-            <div class="opencb-grid-toolbar">
-                <div class="row mb-2">
-                    <div id="${this._prefix}ToolbarLeft" class="col-md-6">
-                        <!-- Display components on the LEFT -->
-                    </div>
-                    <div id="${this._prefix}toolbar" class="col-md-6" data-cy="toolbar">
-                        <!-- Display components on the RIGHT -->
-                        <div class="d-flex gap-1 justify-content-end" data-cy="toolbar-wrapper">
-                            <!-- First, display custom elements passed as 'rightToolbar' parameter, this must be the first ones displayed -->
-                            ${rightButtons?.length > 0 ? rightButtons.map(rightButton => html`
-                                <div class="btn-group">
-                                    ${rightButton}
-                                </div>
-                            `) : nothing}
-
-                            <!-- Second, display elements configured -->
-                            ${this._config?.create && (this._settings.showCreate || this._settings.showNew) ? html`
-                                <div class="btn-group">
-                                    <!-- Note 20230517 Vero: it is not possible to trigger a tooltip on a disabled button.
-                                    As a workaround, the tooltip will be displayed from a wrapper -->
-                                    ${isCreateDisabled ? html `
-                                        <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="${isCreateDisabledTooltip}">
-                                            <button data-cy="toolbar-btn-create" data-action="create" type="button" class="btn btn-light" disabled>
-                                                <i class="fas fa-file pe-1" aria-hidden="true"></i> ${buttonCreateText}
-                                            </button>
-                                        </span>
-                                    ` : html `
-                                        <button data-cy="toolbar-btn-create" data-action="create" type="button" class="btn btn-light" @click="${this.onActionClick}">
-                                            ${this._settings?.downloading === true ? html`
-                                                <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
-                                            ` : nothing}
-                                            <i class="fas fa-file pe-1" aria-hidden="true"></i> ${buttonCreateText}
-                                        </button>
-                                    `}
-                                </div>
-                            ` : nothing}
+            <div class="d-flex align-items-center justify-content-between mb-2" data-cy="toolbar">
+                <div class="d-flex align-items-center" data-cy="toolbar-left-content">
+                    ${this.leftContent || nothing}
+                </div>
+                <div class="d-flex gap-1 justify-content-end" data-cy="toolbar-wrapper">
+                    <!-- First, display custom elements passed as 'rightToolbar' parameter, this must be the first ones displayed -->
+                    ${rightButtons?.length > 0 ? rightButtons.map(rightButton => html`
+                        <div class="btn-group">
+                            ${rightButton}
+                        </div>
+                    `) : nothing}
 
-                            ${this._settings.showExport ? html`
-                                <div class="btn-group">
-                                    <button data-cy="toolbar-btn-export" data-action="export" type="button" class="btn btn-light" @click="${this.onActionClick}">
-                                        ${this._settings?.downloading === true ? html`<i class="fa fa-spinner fa-spin" aria-hidden="true"></i>` : null}
-                                        <i class="fas fa-download pe-1" aria-hidden="true"></i> Export ...
+                    <!-- Second, display elements configured -->
+                    ${this._config?.create && (this._settings.showCreate || this._settings.showNew) ? html`
+                        <div class="btn-group">
+                            <!-- Note 20230517 Vero: it is not possible to trigger a tooltip on a disabled button.
+                            As a workaround, the tooltip will be displayed from a wrapper -->
+                            ${isCreateDisabled ? html `
+                                <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="${isCreateDisabledTooltip}">
+                                    <button data-cy="toolbar-btn-create" data-action="create" type="button" class="btn btn-light" disabled>
+                                        <i class="fas fa-file pe-1" aria-hidden="true"></i> ${buttonCreateText}
                                     </button>
-                                </div>
-                            ` : nothing}
+                                </span>
+                            ` : html `
+                                <button data-cy="toolbar-btn-create" data-action="create" type="button" class="btn btn-light" @click="${this.onActionClick}">
+                                    ${this._settings?.downloading === true ? html`
+                                        <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
+                                    ` : nothing}
+                                    <i class="fas fa-file pe-1" aria-hidden="true"></i> ${buttonCreateText}
+                                </button>
+                            `}
+                        </div>
+                    ` : nothing}
 
-                            ${this._settings?.showSettings ? html`
-                                <div class="btn-group">
-                                    <button data-cy="toolbar-btn-settings" data-action="settings" type="button" class="btn btn-light" @click="${this.onActionClick}">
-                                        <i class="fas fa-cog pe-1"></i> Settings ...
-                                    </button>
-                                </div>
-                            ` : nothing}
+                    ${this._settings.showExport ? html`
+                        <div class="btn-group">
+                            <button data-cy="toolbar-btn-export" data-action="export" type="button" class="btn btn-light" @click="${this.onActionClick}">
+                                ${this._settings?.downloading === true ? html`<i class="fa fa-spinner fa-spin" aria-hidden="true"></i>` : null}
+                                <i class="fas fa-download pe-1" aria-hidden="true"></i> Export ...
+                            </button>
+                        </div>
+                    ` : nothing}
+
+                    ${this._settings?.showSettings ? html`
+                        <div class="btn-group">
+                            <button data-cy="toolbar-btn-settings" data-action="settings" type="button" class="btn btn-light" @click="${this.onActionClick}">
+                                <i class="fas fa-cog pe-1"></i> Settings ...
+                            </button>
                         </div>
-                    </div>
+                    ` : nothing}
                 </div>
             </div>