Skip to content

Commit

Permalink
wc: Allow to add a lect content in the grid-toolbar #TASK-7216 #TASK-…
Browse files Browse the repository at this point in the history 
…7100
  • Loading branch information
@jmjuanes
jmjuanes committed Jan 8, 2025
1 parent 9b9b49d commit bb2db2e
Showing 1 changed file with 49 additions and 51 deletions.
100 changes: 49 additions & 51 deletions src/webcomponents/commons/opencb-grid-toolbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,9 @@ export default class OpencbGridToolbar extends LitElement {
rightToolbar: {
type: Array
},
leftContent: {
type: Object,
},
query: {
type: Object
},
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit bb2db2e

Please sign in to comment.