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

Merge pull request #8987 from ArtemDzhereleiko/AD/bug-fix/alarm-filter-panel

Browse Source 
Fixed alarm filter panel
This commit is contained in:
Igor Kulikov 2023-07-28 13:03:31 +03:00 committed by GitHub
commit 208f7ee3d2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.html
View File

@ -56,25 +56,28 @@
</ng-template> </ng-template>
<ng-template #alarmFilter> <ng-template #alarmFilter>
<div class="tb-form-panel no-padding no-border" [formGroup]="alarmFilterConfigForm"> <div class="tb-form-panel no-padding no-border" [formGroup]="alarmFilterConfigForm">
<div class="tb-form-row space-between"> <div class="tb-form-row space-between" ngClass.xs="filters-row-mobile">
<div class="fixed-title-width" translate>alarm.alarm-status-list</div> <div class="fixed-title-width" ngClass.xs="filters-title-mobile" translate>alarm.alarm-status-list</div>
<mat-chip-listbox multiple formControlName="statusList"> <mat-chip-listbox multiple formControlName="statusList">
<mat-chip-option *ngFor="let searchStatus of alarmSearchStatuses" [value]="searchStatus"> <mat-chip-option *ngFor="let searchStatus of alarmSearchStatuses" [value]="searchStatus">
{{ alarmSearchStatusTranslationMap.get(searchStatus) | translate }} {{ alarmSearchStatusTranslationMap.get(searchStatus) | translate }}
</mat-chip-option> </mat-chip-option>
</mat-chip-listbox> </mat-chip-listbox>
</div> </div>
<div class="tb-form-row space-between"> <div class="tb-form-row space-between" ngClass.xs="filters-row-mobile">
<div class="fixed-title-width" translate>alarm.alarm-severity-list</div> <div class="fixed-title-width" ngClass.xs="filters-title-mobile" translate>alarm.alarm-severity-list</div>
<mat-chip-listbox multiple formControlName="severityList"> <mat-chip-listbox multiple formControlName="severityList">
<mat-chip-option *ngFor="let alarmSeverity of alarmSeverities" [value]="alarmSeverity"> <mat-chip-option *ngFor="let alarmSeverity of alarmSeverities" [value]="alarmSeverity">
{{ alarmSeverityTranslationMap.get(alarmSeverityEnum[alarmSeverity]) | translate }} {{ alarmSeverityTranslationMap.get(alarmSeverityEnum[alarmSeverity]) | translate }}
</mat-chip-option> </mat-chip-option>
</mat-chip-listbox> </mat-chip-listbox>
</div> </div>
<div class="tb-form-row"> <div class="tb-form-row" ngClass.xs="filters-row-mobile">
<div class="fixed-title-width" translate>alarm.alarm-type-list</div> <div class="fixed-title-width" ngClass.xs="filters-title-mobile" translate>alarm.alarm-type-list</div>
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic" class="tb-chips"> <mat-form-field fxFlex appearance="outline"
subscriptSizing="dynamic"
class="tb-chips"
ngClass.xs="filters-fields-width-mobile">
<mat-chip-grid #alarmTypeChipList formControlName="typeList"> <mat-chip-grid #alarmTypeChipList formControlName="typeList">
<mat-chip-row *ngFor="let type of alarmTypeList()" <mat-chip-row *ngFor="let type of alarmTypeList()"
[removable]="true" (removed)="removeAlarmType(type)"> [removable]="true" (removed)="removeAlarmType(type)">
@ -89,9 +92,10 @@
</mat-chip-grid> </mat-chip-grid>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="tb-form-row"> <div class="tb-form-row" ngClass.xs="filters-row-mobile">
<div class="fixed-title-width" translate>alarm.assignee</div> <div class="fixed-title-width" ngClass.xs="filters-title-mobile" translate>alarm.assignee</div>
<tb-alarm-assignee-select fxFlex inline="true" <tb-alarm-assignee-select fxFlex inline="true"
ngClass.xs="filters-fields-width-mobile"
[userMode]="userMode" [userMode]="userMode"
formControlName="assigneeId"> formControlName="assigneeId">
</tb-alarm-assignee-select> </tb-alarm-assignee-select>

20
ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.scss
View File

@ -15,11 +15,24 @@
*/ */
:host { :host {
display: block; display: block;
overflow: hidden; overflow: scroll;
max-width: 100%; max-width: 100%;
.mdc-button { .mdc-button {
max-width: 100%; max-width: 100%;
} }
.filters-row-mobile {
flex-direction: column;
align-items: start;
border: none;
padding: 0;
}
.filters-title-mobile {
font-size: 14px;
}
.filters-fields-width-mobile {
width: 100%;
}
} }
:host ::ng-deep { :host ::ng-deep {
@ -32,4 +45,9 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
} }
.mat-mdc-chip {
.mdc-evolution-chip__cell, .mat-mdc-chip-action, .mat-mdc-chip-action-label {
overflow: hidden;
}
}
} }