Igor Kulikov
2 years ago
20 changed files with 407 additions and 81 deletions
@ -0,0 +1,67 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2024 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<div class="tb-form-row gap-4"> |
|||
<div translate>widgets.maps.data-layer.tooltip-tag-actions</div> |
|||
<div class="flex flex-1 flex-row items-center justify-end gap-4"> |
|||
<mat-chip-listbox> |
|||
<mat-chip *ngFor="let action of this.actionsFormGroup.get('actions').value; let $index = index;" |
|||
class="tb-tag-action-chip" |
|||
[removable]="!disabled" (removed)="removeAction($index)"> |
|||
<div class="flex flex-row items-center justify-start gap-1"> |
|||
<div class="tb-chip-labels"> |
|||
<div class="tb-chip-label tb-chip-text"> |
|||
<strong> |
|||
{{ action.name }} |
|||
</strong> |
|||
</div> |
|||
</div> |
|||
<button *ngIf="!disabled" |
|||
#editButton |
|||
type="button" |
|||
mat-icon-button |
|||
class="tb-mat-24" |
|||
matTooltip="{{ 'widgets.maps.data-layer.edit-tooltip-tag-action' | translate }}" |
|||
matTooltipPosition="above" |
|||
(click)="editAction($event, editButton, $index)"> |
|||
<mat-icon class="tb-mat-18">edit</mat-icon> |
|||
</button> |
|||
<button *ngIf="!disabled" |
|||
matChipRemove |
|||
type="button" |
|||
mat-icon-button |
|||
class="tb-mat-24" |
|||
matTooltip="{{ 'widgets.maps.data-layer.remove-tooltip-tag-action' | translate }}" |
|||
matTooltipPosition="above"> |
|||
<mat-icon class="tb-mat-18">close</mat-icon> |
|||
</button> |
|||
</div> |
|||
</mat-chip> |
|||
</mat-chip-listbox> |
|||
<button *ngIf="!disabled" |
|||
#addButton |
|||
type="button" |
|||
mat-icon-button |
|||
class="tb-mat-40" |
|||
color="primary" |
|||
matTooltip="{{ 'widgets.maps.data-layer.add-tooltip-tag-action' | translate }}" |
|||
matTooltipPosition="above" |
|||
(click)="addAction($event, addButton)"> |
|||
<mat-icon>add</mat-icon> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,49 @@ |
|||
/** |
|||
* Copyright © 2016-2024 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
.mat-mdc-chip.mat-mdc-standard-chip.tb-tag-action-chip { |
|||
overflow: hidden; |
|||
line-height: 20px; |
|||
height: 32px; |
|||
|
|||
&.mdc-evolution-chip--with-trailing-action { |
|||
.mdc-evolution-chip__action--primary { |
|||
padding-left: 4px; |
|||
padding-right: 12px; |
|||
} |
|||
} |
|||
|
|||
.tb-chip-labels { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
min-width: 0; |
|||
padding: 2px 10px; |
|||
.tb-chip-label { |
|||
font-weight: normal; |
|||
font-size: 14px; |
|||
line-height: 20px; |
|||
&.tb-chip-text { |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
} |
|||
.mat-mdc-chip-remove.mat-mdc-icon-button { |
|||
color: inherit; |
|||
opacity: inherit; |
|||
} |
|||
} |
|||
@ -0,0 +1,176 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { |
|||
Component, |
|||
DestroyRef, |
|||
forwardRef, |
|||
Input, |
|||
OnInit, |
|||
Renderer2, |
|||
ViewContainerRef, |
|||
ViewEncapsulation |
|||
} from '@angular/core'; |
|||
import { ControlValueAccessor, NG_VALUE_ACCESSOR, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; |
|||
import { WidgetAction, WidgetActionType, widgetType } from '@shared/models/widget.models'; |
|||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
|||
import { TbPopoverService } from '@shared/components/popover.service'; |
|||
import { MapSettingsContext } from '@home/components/widget/lib/settings/common/map/map-settings.component.models'; |
|||
import { |
|||
WidgetActionSettingsPanelComponent |
|||
} from '@home/components/widget/lib/settings/common/action/widget-action-settings-panel.component'; |
|||
import { MatButton } from '@angular/material/button'; |
|||
import { TranslateService } from '@ngx-translate/core'; |
|||
import { deepClone } from '@core/utils'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-map-tooltip-tag-actions-panel', |
|||
templateUrl: './map-tooltip-tag-actions.component.html', |
|||
styleUrls: ['./map-tooltip-tag-actions.component.scss'], |
|||
providers: [ |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => MapTooltipTagActionsComponent), |
|||
multi: true |
|||
} |
|||
], |
|||
encapsulation: ViewEncapsulation.None |
|||
}) |
|||
export class MapTooltipTagActionsComponent implements ControlValueAccessor, OnInit { |
|||
|
|||
@Input() |
|||
disabled: boolean; |
|||
|
|||
@Input() |
|||
context: MapSettingsContext; |
|||
|
|||
actionsFormGroup: UntypedFormGroup; |
|||
|
|||
private propagateChange = (_val: any) => {}; |
|||
|
|||
constructor(private fb: UntypedFormBuilder, |
|||
private popoverService: TbPopoverService, |
|||
private renderer: Renderer2, |
|||
private viewContainerRef: ViewContainerRef, |
|||
private translate: TranslateService, |
|||
private destroyRef: DestroyRef) { |
|||
} |
|||
|
|||
ngOnInit() { |
|||
this.actionsFormGroup = this.fb.group({ |
|||
actions: [null, []] |
|||
}); |
|||
this.actionsFormGroup.get('actions').valueChanges.pipe( |
|||
takeUntilDestroyed(this.destroyRef) |
|||
).subscribe( |
|||
(val) => this.propagateChange(val) |
|||
); |
|||
} |
|||
|
|||
writeValue(actions?: WidgetAction[]): void { |
|||
this.actionsFormGroup.get('actions').patchValue(actions || [], {emitEvent: false}); |
|||
} |
|||
|
|||
registerOnChange(fn: any): void { |
|||
this.propagateChange = fn; |
|||
} |
|||
|
|||
registerOnTouched(fn: any): void { |
|||
} |
|||
|
|||
setDisabledState(isDisabled: boolean): void { |
|||
this.disabled = isDisabled; |
|||
if (this.disabled) { |
|||
this.actionsFormGroup.disable({emitEvent: false}); |
|||
} else { |
|||
this.actionsFormGroup.enable({emitEvent: false}); |
|||
} |
|||
} |
|||
|
|||
removeAction(index: number): void { |
|||
const actions: WidgetAction[] = this.actionsFormGroup.get('actions').value; |
|||
if (actions[index]) { |
|||
actions.splice(index, 1); |
|||
this.actionsFormGroup.get('actions').patchValue(actions); |
|||
} |
|||
} |
|||
|
|||
addAction($event: Event, matButton: MatButton): void { |
|||
if ($event) { |
|||
$event.stopPropagation(); |
|||
} |
|||
const action: WidgetAction = { |
|||
name: '', |
|||
type: WidgetActionType.doNothing |
|||
}; |
|||
const trigger = matButton._elementRef.nativeElement; |
|||
const actionNames = (this.actionsFormGroup.get('actions').value as WidgetAction[] || []).map(action => action.name); |
|||
this.openActionSettingsPopup(trigger, action, actionNames, true, (added) => { |
|||
if (added) { |
|||
const actions: WidgetAction[] = this.actionsFormGroup.get('actions').value || []; |
|||
actions.push(added); |
|||
this.actionsFormGroup.get('actions').patchValue(actions); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
editAction($event: Event, matButton: MatButton, index: number): void { |
|||
if ($event) { |
|||
$event.stopPropagation(); |
|||
} |
|||
const actions: WidgetAction[] = this.actionsFormGroup.get('actions').value; |
|||
if (actions[index]) { |
|||
const action = deepClone(actions[index]); |
|||
const trigger = matButton._elementRef.nativeElement; |
|||
const actionNames = actions.filter((_action, current) => current !== index).map(action => action.name); |
|||
this.openActionSettingsPopup(trigger, action, actionNames, false, (updated) => { |
|||
if (updated) { |
|||
actions[index] = updated; |
|||
this.actionsFormGroup.get('actions').patchValue(actions); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
|
|||
private openActionSettingsPopup(trigger: Element, action: WidgetAction, actionNames: string[], isAdd: boolean, callback: (action?: WidgetAction) => void) { |
|||
if (this.popoverService.hasPopover(trigger)) { |
|||
this.popoverService.hidePopover(trigger); |
|||
} else { |
|||
const title = this.translate.instant(isAdd ? 'widgets.maps.data-layer.add-tooltip-tag-action' : 'widgets.maps.data-layer.edit-tooltip-tag-action'); |
|||
const applyTitle = this.translate.instant(isAdd ? 'action.add' : 'action.apply'); |
|||
const ctx: any = { |
|||
widgetAction: action, |
|||
withName: true, |
|||
actionNames, |
|||
panelTitle: title, |
|||
applyTitle, |
|||
widgetType: widgetType.latest, |
|||
callbacks: this.context.callbacks |
|||
}; |
|||
const widgetActionSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer, |
|||
this.viewContainerRef, WidgetActionSettingsPanelComponent, |
|||
['leftTopOnly', 'leftOnly', 'leftBottomOnly'], true, null, |
|||
ctx, |
|||
{}, |
|||
{}, {}, true); |
|||
widgetActionSettingsPanelPopover.tbComponentRef.instance.widgetActionApplied.subscribe((widgetAction) => { |
|||
widgetActionSettingsPanelPopover.hide(); |
|||
callback(widgetAction); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
} |
|||
Loading…
Reference in new issue