109 lines
4.9 KiB
HTML
109 lines
4.9 KiB
HTML
<!--
|
|
|
|
Copyright © 2016-2025 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.
|
|
|
|
-->
|
|
<form [formGroup]="entityAliasesFormGroup" (ngSubmit)="save()" style="width: 800px;">
|
|
<mat-toolbar color="primary">
|
|
<h2>{{ title | translate }}</h2>
|
|
<span class="flex-1"></span>
|
|
<button mat-icon-button
|
|
(click)="cancel()"
|
|
type="button">
|
|
<mat-icon class="material-icons">close</mat-icon>
|
|
</button>
|
|
</mat-toolbar>
|
|
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
|
|
</mat-progress-bar>
|
|
<div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
|
|
<div mat-dialog-content>
|
|
<div class="tb-aliases-header flex flex-row items-center justify-start">
|
|
<span class="max-w-5% flex-full"></span>
|
|
<div class="flex max-w-95% flex-full flex-row items-center justify-start">
|
|
<span class="tb-header-label flex-1 gt-sm:min-w-52 gt-sm:max-w-52 gt-sm:basis-52" translate>alias.name</span>
|
|
<span class="tb-header-label flex-1" translate style="padding-left: 10px;">alias.entity-filter</span>
|
|
<span class="tb-header-label min-w-32 max-w-32 flex-1 basis-32" translate style="padding-left: 10px;">alias.resolve-multiple</span>
|
|
<span style="min-width: 80px;"></span>
|
|
</div>
|
|
</div>
|
|
<fieldset [disabled]="isLoading$ | async">
|
|
<mat-divider></mat-divider>
|
|
<div class="flex flex-1 flex-row items-center justify-start"
|
|
formArrayName="entityAliases"
|
|
*ngFor="let entityAliasControl of entityAliasesFormArray().controls; let $index = index">
|
|
<span class="max-w-5% flex-full">{{$index + 1}}.</span>
|
|
<div class="mat-elevation-z4 tb-alias flex max-w-95% flex-full flex-row items-center justify-start">
|
|
<mat-form-field class="mat-block flex-1 gt-sm:min-w-52 gt-sm:max-w-52 gt-sm:basis-52" style="padding-top: 20px;">
|
|
<input matInput [formControl]="entityAliasControl.get('alias')" required placeholder="{{ 'entity.alias' | translate }}">
|
|
<mat-error *ngIf="entityAliasControl.get('alias').hasError('required')">
|
|
{{ 'entity.alias-required' | translate }}
|
|
</mat-error>
|
|
</mat-form-field>
|
|
<tb-entity-filter-view class="flex-1" style="padding-left: 10px;" [formControl]="entityAliasControl.get('filter')">
|
|
</tb-entity-filter-view>
|
|
<section style="padding-left: 10px;"
|
|
class="tb-resolve-multiple-switch flex min-w-32 max-w-32 flex-1 basis-32 flex-col items-center justify-center">
|
|
<mat-slide-toggle class="resolve-multiple-switch"
|
|
[formControl]="entityAliasControl.get('resolveMultiple')">
|
|
</mat-slide-toggle>
|
|
</section>
|
|
<button [disabled]="isLoading$ | async"
|
|
mat-icon-button color="primary"
|
|
style="min-width: 40px;"
|
|
type="button"
|
|
(click)="editAlias($index)"
|
|
matTooltip="{{ 'alias.edit' | translate }}"
|
|
matTooltipPosition="above">
|
|
<mat-icon>edit</mat-icon>
|
|
</button>
|
|
<button [disabled]="isLoading$ | async"
|
|
mat-icon-button color="primary"
|
|
style="min-width: 40px;"
|
|
type="button"
|
|
(click)="removeAlias($index)"
|
|
matTooltip="{{ 'entity.remove-alias' | translate }}"
|
|
matTooltipPosition="above">
|
|
<mat-icon>close</mat-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div mat-dialog-actions>
|
|
<button mat-raised-button color="primary"
|
|
type="button"
|
|
(click)="addAlias()"
|
|
[class.!hidden]="disableAdd"
|
|
[disabled]="isLoading$ | async"
|
|
matTooltip="{{ 'alias.add' | translate }}"
|
|
matTooltipPosition="above">
|
|
{{ 'alias.add' | translate }}
|
|
</button>
|
|
<span class="flex-1"></span>
|
|
<button mat-button color="primary"
|
|
type="button"
|
|
[disabled]="(isLoading$ | async)"
|
|
(click)="cancel()"
|
|
cdkFocusInitial>
|
|
{{ 'action.cancel' | translate }}
|
|
</button>
|
|
<button mat-raised-button color="primary"
|
|
type="submit"
|
|
[disabled]="(isLoading$ | async) || entityAliasesFormGroup.invalid || !entityAliasesFormGroup.dirty">
|
|
{{ 'action.save' | translate }}
|
|
</button>
|
|
</div>
|
|
</form>
|