dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Datasources and Alias filter style improvements

Browse Source
This commit is contained in:
Igor Kulikov 2025-07-14 19:02:52 +03:00
parent 8b9fbdcec0
commit 50bd2cb0ff
13 changed files with 233 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html
View File

@ -28,9 +28,9 @@
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
</mat-progress-bar>
<div mat-dialog-content>
<fieldset class="tb-form-panel no-padding no-border no-gap" [disabled]="isLoading$ | async">
<div class="tb-form-row column-xs align-start no-border no-gap no-padding tb-standard-fields">
<mat-form-field class="flex">
<fieldset class="tb-form-panel outlined" [disabled]="isLoading$ | async">
<div class="flex flex-row items-start xs:flex-col xs:items-stretch">
<mat-form-field class="flex-1" appearance="outline">
<mat-label translate>alias.name</mat-label>
<input matInput formControlName="alias" required>
<mat-error *ngIf="entityAliasFormGroup.get('alias').hasError('required')">

2
ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.scss
View File

@ -19,7 +19,7 @@
.tb-resolve-multiple-switch {
padding: 18px 0 0 18px;
@media #{$mat-xs} {
padding: 0 0 18px 0;
padding: 0 0 22px 0;
}
}
}

4
ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html
View File

@ -38,14 +38,14 @@
<span style="min-width: 80px;"></span>
</div>
</div>
<fieldset [disabled]="isLoading$ | async">
<fieldset [disabled]="isLoading$ | async" class="tb-form-panel outlined">
<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;">
<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;" appearance="outline">
<input matInput [formControl]="entityAliasControl.get('alias')" required placeholder="{{ 'entity.alias' | translate }}">
<mat-error *ngIf="entityAliasControl.get('alias').hasError('required')">
{{ 'entity.alias-required' | translate }}

284
ui-ngx/src/app/modules/home/components/entity/entity-filter.component.html
View File

@ -15,8 +15,8 @@
limitations under the License.
-->
<div [formGroup]="entityFilterFormGroup" class="tb-entity-filter flex flex-col">
<mat-form-field class="mat-block">
<div [formGroup]="entityFilterFormGroup" class="tb-entity-filter">
<mat-form-field class="mat-block" appearance="outline">
<mat-label translate>alias.filter-type</mat-label>
<mat-select required formControlName="type">
<mat-option *ngFor="let type of aliasFilterTypes" [value]="type">
@ -30,18 +30,21 @@
<section class="flex flex-col" [formGroup]="filterFormGroup" [ngSwitch]="entityFilterFormGroup.get('type').value">
<ng-template [ngSwitchCase]="aliasFilterType.singleEntity">
<tb-entity-select required
appearance="outline"
useAliasEntityTypes="true"
formControlName="singleEntity">
</tb-entity-select>
</ng-template>
<ng-template [ngSwitchCase]="aliasFilterType.entityList">
<tb-entity-type-select required
appearance="outline"
showLabel
useAliasEntityTypes="true"
[allowedEntityTypes]="listEntityTypes"
formControlName="entityType">
</tb-entity-type-select>
<tb-entity-list required
appearance="outline"
labelText="{{'entity.entity-list' | translate}}"
[entityType]="filterFormGroup.get('entityType').value"
formControlName="entityList">
@ -49,12 +52,13 @@
</ng-template>
<ng-template [ngSwitchCase]="aliasFilterType.entityName">
<tb-entity-type-select required
appearance="outline"
showLabel
useAliasEntityTypes="true"
[allowedEntityTypes]="listEntityTypes"
formControlName="entityType">
</tb-entity-type-select>
<mat-form-field class="mat-block">
<mat-form-field class="mat-block" appearance="outline">
<mat-label translate>entity.name-starts-with</mat-label>
<mat-icon class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
matTooltip="{{'entity.help-text' | translate }}">help</mat-icon>
@ -66,6 +70,7 @@
</ng-template>
<ng-template [ngSwitchCase]="aliasFilterType.entityType">
<tb-entity-type-select required
appearance="outline"
showLabel
useAliasEntityTypes="true"
[allowedEntityTypes]="listEntityTypes"
@ -73,14 +78,14 @@
</tb-entity-type-select>
</ng-template>
<ng-template [ngSwitchCase]="aliasFilterType.stateEntity">
<mat-form-field floatLabel="always" class="mat-block">
<mat-form-field floatLabel="always" class="mat-block" appearance="outline">
<mat-label translate>alias.state-entity-parameter-name</mat-label>
<input matInput formControlName="stateEntityParamName"
placeholder="{{ 'alias.default-entity-parameter-name' | translate }}">
</mat-form-field>
<div class="flex flex-col">
<label class="tb-small">{{ 'alias.default-state-entity' | translate }}</label>
<tb-entity-select class="flex-1"
<div class="tb-form-panel stroked no-padding-bottom">
<div class="tb-form-panel-title tb-normal">{{ 'alias.default-state-entity' | translate }}</div>
<tb-entity-select appearance="outline"
useAliasEntityTypes="true"
formControlName="defaultStateEntity">
</tb-entity-select>
@ -88,10 +93,13 @@
</ng-template>
<ng-template [ngSwitchCase]="aliasFilterType.assetType">
<tb-entity-subtype-list required
floatLabel="always"
appearance="outline"
label="{{ 'asset.asset-types' | translate }}"
[entityType]="entityType.ASSET"
formControlName="assetTypes">
</tb-entity-subtype-list>
<mat-form-field class="mat-block">
<mat-form-field class="mat-block" appearance="outline">
<mat-label translate>asset.name-starts-with</mat-label>
<mat-icon class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
matTooltip="{{'asset.help-text' | translate }}">help</mat-icon>
@ -100,10 +108,13 @@
</ng-template>
<ng-template [ngSwitchCase]="aliasFilterType.deviceType">
<tb-entity-subtype-list required
floatLabel="always"
appearance="outline"
label="{{ 'device.device-types' | translate }}"
[entityType]="entityType.DEVICE"
formControlName="deviceTypes">
</tb-entity-subtype-list>
<mat-form-field class="mat-block">
<mat-form-field class="mat-block" appearance="outline">
<mat-label translate>device.name-starts-with</mat-label>
<mat-icon class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
matTooltip="{{'device.help-text' | translate }}">help</mat-icon>
@ -112,10 +123,13 @@
</ng-template>
<ng-template [ngSwitchCase]="aliasFilterType.entityViewType">
<tb-entity-subtype-list required
floatLabel="always"
appearance="outline"
label="{{ 'entity-view.entity-view-types' | translate }}"
[entityType]="entityType.ENTITY_VIEW"
formControlName="entityViewTypes">
</tb-entity-subtype-list>
<mat-form-field class="mat-block">
<mat-form-field class="mat-block" appearance="outline">
<mat-label translate>entity-view.name-starts-with</mat-label>
<mat-icon class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
matTooltip="{{'entity-view.help-text' | translate }}">help</mat-icon>
@ -124,36 +138,51 @@
</ng-template>
<ng-template [ngSwitchCase]="aliasFilterType.edgeType">
<tb-entity-subtype-list required
floatLabel="always"
appearance="outline"
label="{{ 'edge.edge-types' | translate }}"
[entityType]="entityType.EDGE"
formControlName="edgeTypes">
</tb-entity-subtype-list>
<mat-form-field class="mat-block">
<mat-form-field class="mat-block" appearance="outline">
<mat-label translate>edge.name-starts-with</mat-label>
<input matInput formControlName="edgeNameFilter">
</mat-form-field>
</ng-template>
<ng-template [ngSwitchCase]="aliasFilterType.relationsQuery">
<section class="tb-form-panel no-border no-padding">
<div class="tb-form-panel stroked no-gap">
<div class="tb-form-panel stroked" [class.no-padding-bottom]="!filterFormGroup.get('rootStateEntity').value">
<div class="tb-form-panel-title" translate>alias.root-entity</div>
<mat-slide-toggle class="mat-slide margin" formControlName="rootStateEntity">
<mat-slide-toggle class="mat-slide" formControlName="rootStateEntity">
{{ 'alias.root-state-entity' | translate }}
</mat-slide-toggle>
<div *ngIf="filterFormGroup.get('rootStateEntity').value" class="tb-form-panel no-border no-padding no-gap">
<mat-form-field>
<mat-label translate>alias.state-entity-parameter-name</mat-label>
<input matInput formControlName="stateEntityParamName">
</mat-form-field>
<tb-entity-select useAliasEntityTypes="true" formControlName="defaultStateEntity">
@if (filterFormGroup.get('rootStateEntity').value) {
<div class="tb-form-panel no-border no-padding no-gap">
<mat-form-field floatLabel="always" class="mat-block" appearance="outline">
<mat-label translate>alias.state-entity-parameter-name</mat-label>
<input matInput formControlName="stateEntityParamName"
placeholder="{{ 'alias.default-entity-parameter-name' | translate }}">
</mat-form-field>
<div class="tb-form-panel stroked no-padding-bottom">
<div class="tb-form-panel-title tb-normal">{{ 'alias.default-state-entity' | translate }}</div>
<tb-entity-select appearance="outline"
useAliasEntityTypes="true"
formControlName="defaultStateEntity">
</tb-entity-select>
</div>
</div>
} @else {
<tb-entity-select required
appearance="outline"
useAliasEntityTypes="true"
formControlName="rootEntity">
</tb-entity-select>
</div>
<tb-entity-select *ngIf="!filterFormGroup.get('rootStateEntity').value"
required
useAliasEntityTypes="true"
formControlName="rootEntity">
</tb-entity-select>
<div class="tb-form-row no-border no-padding tb-standard-fields">
<mat-form-field class="flex">
}
</div>
<div class="tb-form-panel stroked">
<div class="tb-form-panel-title" translate>alias.query-options</div>
<div class="flex flex-row gap-4">
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
<mat-label translate>relation.direction</mat-label>
<mat-select required formControlName="direction">
<mat-option *ngFor="let type of directionTypes" [value]="type">
@ -161,7 +190,7 @@
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="flex" floatLabel="always">
<mat-form-field class="flex-1" floatLabel="always" appearance="outline" subscriptSizing="dynamic">
<mat-label translate>alias.max-relation-level</mat-label>
<input matInput
type="number"
@ -172,7 +201,7 @@
</mat-form-field>
</div>
<mat-slide-toggle *ngIf="filterFormGroup.get('maxLevel').value > 1 || !filterFormGroup.get('maxLevel').value"
class="mat-slide" formControlName="fetchLastLevelOnly">
class="mat-slide" formControlName="fetchLastLevelOnly">
{{ 'alias.last-level-relation' | translate }}
</mat-slide-toggle>
</div>
@ -191,98 +220,113 @@
entityFilterFormGroup.get('type').value === aliasFilterType.edgeSearchQuery ||
entityFilterFormGroup.get('type').value === aliasFilterType.entityViewSearchQuery ?
entityFilterFormGroup.get('type').value : ''">
<label class="tb-small">{{ 'alias.root-entity' | translate }}</label>
<section class="tb-root-state-entity-switch flex flex-row items-center justify-start" style="padding-left: 0;">
<mat-slide-toggle class="root-state-entity-switch"
formControlName="rootStateEntity">
</mat-slide-toggle>
<label class="tb-small root-state-entity-label" translate>alias.root-state-entity</label>
</section>
<div class="flex flex-1 flex-row" *ngIf="!filterFormGroup.get('rootStateEntity').value">
<tb-entity-select class="flex-1"
required
useAliasEntityTypes="true"
formControlName="rootEntity">
</tb-entity-select>
</div>
<div class="flex flex-1 flex-col gt-sm:flex-row" *ngIf="filterFormGroup.get('rootStateEntity').value">
<mat-form-field floatLabel="always" class="mat-block" style="margin-top: 24px; padding-right: 8px;">
<mat-label translate>alias.state-entity-parameter-name</mat-label>
<input matInput formControlName="stateEntityParamName"
placeholder="{{ 'alias.default-entity-parameter-name' | translate }}">
</mat-form-field>
<div class="flex flex-1 flex-col">
<label class="tb-small">{{ 'alias.default-state-entity' | translate }}</label>
<tb-entity-select class="flex-1"
useAliasEntityTypes="true"
formControlName="defaultStateEntity">
</tb-entity-select>
</div>
</div>
<div class="flex flex-1 flex-row">
<section class="tb-root-state-entity-switch flex flex-row items-center justify-start" style="padding-left: 0;">
<mat-slide-toggle class="root-state-entity-switch"
formControlName="fetchLastLevelOnly">
<section class="tb-form-panel no-border no-padding">
<div class="tb-form-panel stroked" [class.no-padding-bottom]="!filterFormGroup.get('rootStateEntity').value">
<div class="tb-form-panel-title" translate>alias.root-entity</div>
<mat-slide-toggle class="mat-slide" formControlName="rootStateEntity">
{{ 'alias.root-state-entity' | translate }}
</mat-slide-toggle>
<label class="tb-small root-state-entity-label" translate>alias.last-level-relation</label>
</section>
</div>
<div class="flex flex-1 flex-row gap-2 xs:flex-col">
<mat-form-field class="mat-block" style="min-width: 100px;">
<mat-label translate>relation.direction</mat-label>
<mat-select required formControlName="direction">
<mat-option *ngFor="let type of directionTypes" [value]="type">
{{ directionTypeTranslations.get(directionTypeEnum[type]) | translate }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field floatLabel="always" class="mat-block flex-1">
<mat-label translate>alias.max-relation-level</mat-label>
<input matInput
type="number"
min="1"
step="1"
placeholder="{{ 'alias.unlimited-level' | translate }}"
formControlName="maxLevel">
</mat-form-field>
</div>
<div class="mat-caption" style="color: rgba(0,0,0,0.57);" translate>relation.relation-type</div>
<tb-relation-type-autocomplete
class="flex-1"
formControlName="relationType">
</tb-relation-type-autocomplete>
</ng-template>
<ng-template [ngSwitchCase]="aliasFilterType.assetSearchQuery">
<div class="mat-caption tb-required" style="color: rgba(0,0,0,0.57);" translate>asset.asset-types</div>
<tb-entity-subtype-list
required
[entityType]="entityType.ASSET"
formControlName="assetTypes">
</tb-entity-subtype-list>
</ng-template>
<ng-template [ngSwitchCase]="aliasFilterType.deviceSearchQuery">
<div class="mat-caption tb-required" style="color: rgba(0,0,0,0.57);" translate>device.device-types</div>
<tb-entity-subtype-list
required
[entityType]="entityType.DEVICE"
formControlName="deviceTypes">
</tb-entity-subtype-list>
</ng-template>
<ng-template [ngSwitchCase]="aliasFilterType.edgeSearchQuery">
<div class="mat-caption tb-required" style="color: rgba(0,0,0,0.57);" translate>edge.edge-types</div>
<tb-entity-subtype-list
required
[entityType]="entityType.EDGE"
formControlName="edgeTypes">
</tb-entity-subtype-list>
</ng-template>
<ng-template [ngSwitchCase]="aliasFilterType.entityViewSearchQuery">
<div class="mat-caption tb-required" style="color: rgba(0,0,0,0.57);" translate>entity-view.entity-view-types</div>
<tb-entity-subtype-list
required
[entityType]="entityType.ENTITY_VIEW"
formControlName="entityViewTypes">
</tb-entity-subtype-list>
@if (filterFormGroup.get('rootStateEntity').value) {
<div class="tb-form-panel no-border no-padding no-gap">
<mat-form-field floatLabel="always" class="mat-block" appearance="outline">
<mat-label translate>alias.state-entity-parameter-name</mat-label>
<input matInput formControlName="stateEntityParamName"
placeholder="{{ 'alias.default-entity-parameter-name' | translate }}">
</mat-form-field>
<div class="tb-form-panel stroked no-padding-bottom">
<div class="tb-form-panel-title tb-normal">{{ 'alias.default-state-entity' | translate }}</div>
<tb-entity-select appearance="outline"
useAliasEntityTypes="true"
formControlName="defaultStateEntity">
</tb-entity-select>
</div>
</div>
} @else {
<tb-entity-select required
appearance="outline"
useAliasEntityTypes="true"
formControlName="rootEntity">
</tb-entity-select>
}
</div>
<div class="tb-form-panel stroked">
<div class="tb-form-panel-title" translate>alias.query-options</div>
<div class="flex flex-row gap-4">
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
<mat-label translate>relation.direction</mat-label>
<mat-select required formControlName="direction">
<mat-option *ngFor="let type of directionTypes" [value]="type">
{{ directionTypeTranslations.get(directionTypeEnum[type]) | translate }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="flex-1" floatLabel="always" appearance="outline" subscriptSizing="dynamic">
<mat-label translate>alias.max-relation-level</mat-label>
<input matInput
type="number"
min="1"
step="1"
placeholder="{{ 'alias.unlimited-level' | translate }}"
formControlName="maxLevel">
</mat-form-field>
</div>
<mat-slide-toggle *ngIf="filterFormGroup.get('maxLevel').value > 1 || !filterFormGroup.get('maxLevel').value"
class="mat-slide" formControlName="fetchLastLevelOnly">
{{ 'alias.last-level-relation' | translate }}
</mat-slide-toggle>
</div>
<div class="tb-form-panel stroked no-padding-bottom">
<div class="tb-form-panel-title" translate>relation.relation-filter</div>
<tb-relation-type-autocomplete
appearance="outline"
subscriptSizing="dynamic"
formControlName="relationType">
</tb-relation-type-autocomplete>
<ng-container [ngSwitch]="entityFilterFormGroup.get('type').value">
<ng-template [ngSwitchCase]="aliasFilterType.assetSearchQuery">
<tb-entity-subtype-list
required
floatLabel="always"
appearance="outline"
label="{{ 'asset.asset-types' | translate }}"
[entityType]="entityType.ASSET"
formControlName="assetTypes">
</tb-entity-subtype-list>
</ng-template>
<ng-template [ngSwitchCase]="aliasFilterType.deviceSearchQuery">
<tb-entity-subtype-list
required
floatLabel="always"
appearance="outline"
label="{{ 'device.device-types' | translate }}"
[entityType]="entityType.DEVICE"
formControlName="deviceTypes">
</tb-entity-subtype-list>
</ng-template>
<ng-template [ngSwitchCase]="aliasFilterType.edgeSearchQuery">
<tb-entity-subtype-list
required
floatLabel="always"
appearance="outline"
label="{{ 'edge.edge-types' | translate }}"
[entityType]="entityType.EDGE"
formControlName="edgeTypes">
</tb-entity-subtype-list>
</ng-template>
<ng-template [ngSwitchCase]="aliasFilterType.entityViewSearchQuery">
<tb-entity-subtype-list
required
floatLabel="always"
appearance="outline"
label="{{ 'entity-view.entity-view-types' | translate }}"
[entityType]="entityType.ENTITY_VIEW"
formControlName="entityViewTypes">
</tb-entity-subtype-list>
</ng-template>
</ng-container>
</div>
</section>
</ng-template>
</section>
</div>

22
ui-ngx/src/app/modules/home/components/entity/entity-filter.component.scss
View File

@ -15,25 +15,7 @@
*/
:host {
.tb-entity-filter {
#relationsQueryFilter {
padding-top: 20px;
tb-entity-select {
min-height: 92px;
}
}
.tb-root-state-entity-switch {
padding-left: 10px;
padding-bottom: 10px;
.root-state-entity-switch {
margin: 0;
}
.root-state-entity-label {
margin: 5px 0 5px 10px;
}
}
display: flex;
flex-direction: column;
}
}

16
ui-ngx/src/app/modules/home/components/rule-node/action/generator-config.component.scss
View File

@ -31,21 +31,5 @@
}
}
}
.tb-entity-select {
@media screen and (min-width: 599px) {
display: flex;
flex-direction: row;
gap: 16px;
}
tb-entity-type-select {
flex: 1;
}
tb-entity-autocomplete {
flex: 1;
mat-form-field {
width: 100% !important;
}
}
}
}
}

11
ui-ngx/src/app/modules/home/components/widget/config/datasource.component.html
View File

@ -15,8 +15,8 @@
limitations under the License.
-->
<section class="tb-datasource-section" [formGroup]="datasourceFormGroup">
<mat-form-field *ngIf="!basicMode" class="tb-datasource-type" hideRequiredMarker>
<section class="tb-datasource-section tb-form-panel outlined" [formGroup]="datasourceFormGroup">
<mat-form-field *ngIf="!basicMode" class="tb-datasource-type" hideRequiredMarker appearance="outline">
<mat-label translate>widget-config.datasource-type</mat-label>
<mat-select formControlName="type">
<mat-option *ngFor="let datasourceType of datasourceTypes" [value]="datasourceType">
@ -44,18 +44,20 @@
<tb-entity-autocomplete *ngIf="datasourceFormGroup.get('type').value === datasourceType.device"
[required]="!datasourcesOptional"
[entityType]="entityType.DEVICE"
appearance="outline"
formControlName="deviceId">
</tb-entity-autocomplete>
<tb-entity-alias-select
*ngIf="datasourceFormGroup.get('type').value !== datasourceType.device"
[showLabel]="true"
appearance="outline"
[tbRequired]="!entityAliasOptional"
[aliasController]="aliasController"
formControlName="entityAliasId"
[callbacks]="entityAliasSelectCallbacks">
</tb-entity-alias-select>
<mat-form-field *ngIf="!hideDatasourceLabel && [datasourceType.entityCount, datasourceType.alarmCount].includes(datasourceFormGroup.get('type').value)"
class="flex-1">
class="flex-1" appearance="outline">
<input matInput
placeholder="{{ 'datasource.label' | translate }}"
formControlName="name">
@ -64,6 +66,7 @@
</section>
<section *ngIf="!hideDataKeys" class="flex flex-1 flex-col items-stretch justify-start">
<tb-data-keys class="tb-data-keys flex-1"
appearance="outline"
[widgetType]="widgetType"
[datasourceType]="datasourceFormGroup.get('type').value"
[hideDataKeyLabel]="hideDataKeyLabel"
@ -86,6 +89,7 @@
formControlName="dataKeys">
</tb-data-keys>
<tb-data-keys *ngIf="hasAdditionalLatestDataKeys" class="tb-data-keys flex-1"
appearance="outline"
[widgetType]="widgetTypes.latest"
[datasourceType]="datasourceFormGroup.get('type').value"
[hideDataKeyLabel]="hideDataKeyLabel"
@ -109,6 +113,7 @@
</section>
<tb-filter-select
*ngIf="(!basicMode || displayDatasourceFilterForBasicMode) && ![datasourceType.function].includes(datasourceFormGroup.get('type').value)"
appearance="outline"
[showLabel]="true"
[aliasController]="aliasController"
formControlName="filterId"

1
ui-ngx/src/app/modules/home/components/widget/config/datasources.component.scss
View File

@ -20,6 +20,7 @@
height: auto;
display: block;
padding: 0;
overflow: visible;
}
&.tb-draggable {
&.cdk-drag-preview {

2
ui-ngx/src/app/shared/components/entity/entity-list.component.html
View File

@ -21,7 +21,7 @@
[class.tb-chips]="inlineField"
[class.flex]="inlineField"
[subscriptSizing]="inlineField ? 'dynamic' : subscriptSizing">
<mat-label *ngIf="!inlineField && labelText">{{ labelText }}</mat-label> <mat-label *ngIf="labelText">{{ labelText }}</mat-label>
<mat-label *ngIf="!inlineField && labelText">{{ labelText }}</mat-label>
<mat-chip-grid #chipList formControlName="entities">
<mat-chip-row
*ngFor="let entity of entities"

6
ui-ngx/src/app/shared/components/entity/entity-select.component.html
View File

@ -15,9 +15,11 @@
limitations under the License.
-->
<div [formGroup]="entitySelectFormGroup">
<div [formGroup]="entitySelectFormGroup" class="flex flex-row gap-4 xs:flex-col xs:gap-0">
<tb-entity-type-select
*ngIf="displayEntityTypeSelect"
class="flex-1"
[appearance]="appearance"
[showLabel]="true"
[required]="required"
[useAliasEntityTypes]="useAliasEntityTypes"
@ -27,6 +29,8 @@
</tb-entity-type-select>
<tb-entity-autocomplete
*ngIf="modelValue.entityType && !entityTypeNullUUID.has(modelValue.entityType)"
class="flex-1"
[appearance]="appearance"
[required]="required"
[entityType]="modelValue.entityType"
formControlName="entityId">

4
ui-ngx/src/app/shared/components/entity/entity-select.component.ts
View File

@ -25,6 +25,7 @@ import { EntityId } from '@shared/models/id/entity-id';
import { NULL_UUID } from '@shared/models/id/has-uuid';
import { coerceBoolean } from '@shared/decorators/coercion';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { MatFormFieldAppearance } from '@angular/material/form-field';
@Component({
selector: 'tb-entity-select',
@ -58,6 +59,9 @@ export class EntitySelectComponent implements ControlValueAccessor, OnInit, Afte
@Input()
additionEntityTypes: {[entityType in string]: string} = {};
@Input()
appearance: MatFormFieldAppearance = 'fill';
displayEntityTypeSelect: boolean;
AliasEntityType = AliasEntityType;

2
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -721,6 +721,7 @@
"state-entity-parameter-name": "State entity parameter name",
"default-state-entity": "Default state entity",
"default-entity-parameter-name": "By default",
"query-options": "Query options",
"max-relation-level": "Max relation level",
"unlimited-level": "Unlimited level",
"state-entity": "Dashboard state entity",
@ -4367,6 +4368,7 @@
"add-relation-filter": "Add relation filter",
"any-relation": "Any relation",
"relation-filters": "Relation filters",
"relation-filter": "Relation filter",
"additional-info": "Additional info (JSON)",
"invalid-additional-info": "Unable to parse additional info json.",
"no-relations-text": "No relations found",

40
ui-ngx/src/form.scss
View File

@ -163,6 +163,9 @@
.tb-form-panel-title {
font-weight: 500;
font-size: 16px;
&.tb-normal {
font-weight: normal;
}
&.tb-required::after {
font-size: 13px;
@ -819,4 +822,41 @@
}
}
}
.tb-form-panel.outlined {
--mdc-outlined-text-field-outline-color: rgba(0,0,0,0.12);
--mdc-outlined-text-field-container-shape: 6px;
--mat-form-field-trailing-icon-color: rgba(0, 0, 0, 0.56);
box-shadow: none;
gap: 0;
padding-bottom: 0;
&:not(.stroked) {
border-radius: 0;
}
&:not(.mat-padding,.padding) {
padding: 0;
}
& > .tb-form-panel-title {
margin-bottom: 16px;
}
.tb-form-panel {
@media #{$mat-xs} {
gap: 16px;
}
}
.tb-form-row {
height: 56px;
margin-bottom: 22px;
&.disabled {
border-color: var(--mdc-outlined-text-field-disabled-outline-color);
color: var(--mdc-outlined-text-field-disabled-input-text-color);
}
}
}
}