Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 | 30x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 3x 5x 5x 5x 1x 1x 1x 1x 1x 5x 5x | /**
* Copyright (c) Siemens 2016 - 2026
* SPDX-License-Identifier: MIT
*/
import { Component, computed, inject, input, model, output, viewChild } from '@angular/core';
import { ActivatedRoute, RouterLink } from '@angular/router';
import { MenuItem } from '@siemens/element-ng/common';
import { SiContentActionBarComponent } from '@siemens/element-ng/content-action-bar';
import { SiLinkDirective } from '@siemens/element-ng/link';
import { SiLoadingButtonComponent } from '@siemens/element-ng/loading-spinner';
import { SiResponsiveContainerDirective } from '@siemens/element-ng/resize-observer';
import { SiTooltipDirective } from '@siemens/element-ng/tooltip';
import { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';
import { DashboardToolbarItem } from '../../model/si-dashboard-toolbar.model';
import { SiGridComponent } from '../grid/si-grid.component';
/**
* The toolbar of the flexible dashboard is either `editable` or not. When not
* `editable`, it supports content projection for applications to inject toolbar
* controls for e.g. filtering. Use the attribute `filters-slot` to inject the filters.
* In addition it shows the button to switch to the `editable`. When `editable`, it support
* the cancel and save buttons, as well as displaying primary and secondary actions.
*/
@Component({
selector: 'si-dashboard-toolbar',
imports: [
SiContentActionBarComponent,
SiLinkDirective,
SiLoadingButtonComponent,
RouterLink,
SiResponsiveContainerDirective,
SiTranslatePipe,
SiTooltipDirective
],
templateUrl: './si-dashboard-toolbar.component.html',
host: {
class: 'd-flex flex-column flex-grow-1'
}
})
export class SiDashboardToolbarComponent {
/**
* Set primary actions that are in `editable` mode first visible or in
* the expanded content action bar of the toolbar.
*
* @defaultValue []
*/
readonly primaryEditActions = input<(MenuItem | DashboardToolbarItem)[]>([]);
/**
* Set secondary actions that are in `editable` mode second visible or in
* the dropdown part of the content action bar of the toolbar.
*
* @defaultValue [] */
readonly secondaryEditActions = input<(MenuItem | DashboardToolbarItem)[]>([]);
/**
* Input to disable the save button. Note, the input `disabled` disables all
* actions and the save button of the toolbar.
*
* @defaultValue true
*/
readonly disableSaveButton = model(true);
/**
* Input to disable all actions and buttons of the toolbar.
*
* @defaultValue false */
readonly disabled = input(false);
/**
* Input option to set the `editable` mode. When editable
* the toolbar shows a cancel and save button. Otherwise,
* it displays an edit button.
*
* @defaultValue false */
readonly editable = model(false);
/**
* Option to hide the dashboard edit button.
*
* @defaultValue false
*/
readonly hideEditButton = input(false);
/**
* Option to display the edit button as a text button instead, only if the window is larger than xs {@link SiResponsiveContainerDirective}.
*
* @defaultValue false
*/
readonly showEditButtonLabel = input(false);
readonly grid = input.required<SiGridComponent>();
/**
* Emits on save button click.
*/
readonly save = output<void>();
/**
* Emits on cancel button click.
*/
// eslint-disable-next-line @angular-eslint/no-output-native
readonly cancel = output<void>();
protected labelEdit = t(() => $localize`:@@DASHBOARD.EDIT:Edit`);
protected labelCancel = t(() => $localize`:@@DASHBOARD.CANCEL:Cancel`);
protected labelSave = t(() => $localize`:@@DASHBOARD.SAVE:Save`);
protected readonly activatedRoute = inject(ActivatedRoute, { optional: true });
private readonly dashboardToolbarContainer = viewChild.required(SiResponsiveContainerDirective);
protected readonly showContentActionBar = computed(
() => this.primaryEditActions()?.length + this.secondaryEditActions()?.length > 3
);
protected readonly editActions = computed(() => [
...this.primaryEditActions(),
...this.secondaryEditActions()
]);
protected readonly primaryEditActionsComputed = computed(() => {
return this.primaryEditActions().map(item => this.proxyMenuItemAction(item));
});
protected readonly secondaryEditActionsComputed = computed(() => {
return this.secondaryEditActions().map(item => this.proxyMenuItemAction(item));
});
protected onEdit(): void {
this.editable.set(true);
}
protected onSave(): void {
Eif (this.editable()) {
this.save.emit();
}
}
protected onCancel(): void {
Eif (this.editable()) {
this.cancel.emit();
}
}
protected isToolbarItem(item: MenuItem | DashboardToolbarItem): item is DashboardToolbarItem {
return 'label' in item;
}
protected readonly showEditButtonLabelDesktop = computed(() => {
return this.showEditButtonLabel() && !this.dashboardToolbarContainer()?.xs();
});
private proxyMenuItemAction(
item: MenuItem | DashboardToolbarItem
): MenuItem | DashboardToolbarItem {
if (item.type === 'action' && typeof item.action === 'function') {
item.action = item.action.bind(this, this.grid());
}
return item;
}
}
|