146 lines
6.8 KiB
HTML
146 lines
6.8 KiB
HTML
<!--
|
|
|
|
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-entity-table tb-absolute-fill">
|
|
<div class="tb-entity-table-content flex flex-1 flex-col">
|
|
<mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode">
|
|
<div class="mat-toolbar-tools">
|
|
<span class="tb-entity-table-title" translate>widget-config.actions</span>
|
|
<span class="flex-1"></span>
|
|
<button mat-icon-button [disabled]="isLoading$ | async"
|
|
type="button"
|
|
(click)="addAction($event)"
|
|
matTooltip="{{ 'widget-config.add-action' | translate }}"
|
|
matTooltipPosition="above">
|
|
<mat-icon>add</mat-icon>
|
|
</button>
|
|
<button mat-icon-button [disabled]="isLoading$ | async" (click)="enterFilterMode()"
|
|
type="button"
|
|
matTooltip="{{ 'action.search' | translate }}"
|
|
matTooltipPosition="above">
|
|
<mat-icon>search</mat-icon>
|
|
</button>
|
|
</div>
|
|
</mat-toolbar>
|
|
<mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode">
|
|
<div class="mat-toolbar-tools">
|
|
<button mat-icon-button
|
|
type="button"
|
|
matTooltip="{{ 'widget-config.search-actions' | translate }}"
|
|
matTooltipPosition="above">
|
|
<mat-icon>search</mat-icon>
|
|
</button>
|
|
<mat-form-field class="flex-1">
|
|
<mat-label> </mat-label>
|
|
<input #searchInput matInput
|
|
[(ngModel)]="pageLink.textSearch"
|
|
placeholder="{{ 'widget-config.search-actions' | translate }}"/>
|
|
</mat-form-field>
|
|
<button mat-icon-button (click)="exitFilterMode()"
|
|
type="button"
|
|
matTooltip="{{ 'action.close' | translate }}"
|
|
matTooltipPosition="above">
|
|
<mat-icon>close</mat-icon>
|
|
</button>
|
|
</div>
|
|
</mat-toolbar>
|
|
<div class="table-container flex-1">
|
|
<table mat-table
|
|
[dataSource]="dataSource"
|
|
matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear
|
|
cdkDropList cdkDropListOrientation="vertical"
|
|
[cdkDropListData]="dataSource"
|
|
(cdkDropListDropped)="dropAction($event)"
|
|
[cdkDropListDisabled]="dragDisabled"
|
|
class="tb-drop-list">
|
|
<ng-container matColumnDef="actionSourceId">
|
|
<mat-header-cell *matHeaderCellDef style="width: 36px"></mat-header-cell>
|
|
<mat-cell *matCellDef="let action" class="tb-icon-cell">
|
|
<div cdkDragHandle
|
|
class="tb-drag-handle"
|
|
style="min-width: 36px"
|
|
(mousedown)="dragDisabled = false"
|
|
(mouseup)="dragDisabled = true"
|
|
matTooltip="{{ 'action.drag' | translate }}"
|
|
matTooltipPosition="above">
|
|
<mat-icon>drag_handle</mat-icon>
|
|
</div>
|
|
</mat-cell>
|
|
</ng-container>
|
|
<ng-container matColumnDef="actionSourceName">
|
|
<mat-header-cell *matHeaderCellDef mat-sort-header style="width: 20%"> {{ 'widget-config.action-source' | translate }} </mat-header-cell>
|
|
<mat-cell *matCellDef="let action" style="width: 20%">
|
|
{{ action.actionSourceName }}
|
|
</mat-cell>
|
|
</ng-container>
|
|
<ng-container matColumnDef="name">
|
|
<mat-header-cell *matHeaderCellDef style="width: 30%"> {{ 'widget-config.action-name' | translate }} </mat-header-cell>
|
|
<mat-cell *matCellDef="let action" style="width: 30%">
|
|
{{ action.name }}
|
|
</mat-cell>
|
|
</ng-container>
|
|
<ng-container matColumnDef="icon">
|
|
<mat-header-cell *matHeaderCellDef style="width: 40px"> {{ 'widget-config.action-icon' | translate }} </mat-header-cell>
|
|
<mat-cell *matCellDef="let action" class="tb-icon-cell" style="width: 40px">
|
|
<tb-icon>{{ action.icon }}</tb-icon>
|
|
</mat-cell>
|
|
</ng-container>
|
|
<ng-container matColumnDef="typeName">
|
|
<mat-header-cell *matHeaderCellDef style="width: 50%"> {{ 'widget-config.action-type' | translate }} </mat-header-cell>
|
|
<mat-cell *matCellDef="let action" style="width: 50%">
|
|
{{ action.typeName }}
|
|
</mat-cell>
|
|
</ng-container>
|
|
<ng-container matColumnDef="actions" stickyEnd>
|
|
<mat-header-cell *matHeaderCellDef style="min-width: 80px; max-width: 80px; width: 80px">
|
|
</mat-header-cell>
|
|
<mat-cell *matCellDef="let action">
|
|
<div class="flex flex-1 flex-row items-stretch justify-end">
|
|
<button mat-icon-button [disabled]="isLoading$ | async"
|
|
type="button"
|
|
matTooltip="{{ 'widget-config.edit-action' | translate }}"
|
|
matTooltipPosition="above"
|
|
(click)="editAction($event, action)">
|
|
<mat-icon>edit</mat-icon>
|
|
</button>
|
|
<button mat-icon-button [disabled]="isLoading$ | async"
|
|
type="button"
|
|
matTooltip="{{ 'widget-config.delete-action' | translate }}"
|
|
matTooltipPosition="above"
|
|
(click)="deleteAction($event, action)">
|
|
<mat-icon>delete</mat-icon>
|
|
</button>
|
|
</div>
|
|
</mat-cell>
|
|
</ng-container>
|
|
<mat-header-row class="mat-row-select" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
|
|
<mat-row class="mat-row-select tb-draggable"
|
|
*matRowDef="let action; columns: displayedColumns;"
|
|
cdkDrag [cdkDragData]="action"></mat-row>
|
|
</table>
|
|
<span [class.!hidden]="(dataSource.isEmpty() | async) === false"
|
|
class="no-data-found flex items-center justify-center" translate>{{ 'widget-config.no-actions-text' }}</span>
|
|
</div>
|
|
<mat-divider></mat-divider>
|
|
<mat-paginator [length]="dataSource.total() | async"
|
|
[pageIndex]="pageLink.page"
|
|
[pageSize]="pageLink.pageSize"
|
|
[pageSizeOptions]="[10, 20, 30]"
|
|
[hidePageSize]="hidePageSize"></mat-paginator>
|
|
</div>
|
|
</div>
|