Vladyslav Prykhodko
11 months ago
committed by
GitHub
GitHub
13 changed files with 459 additions and 31 deletions
@ -0,0 +1,61 @@ |
|||
<!-- |
|||
|
|||
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. |
|||
|
|||
--> |
|||
|
|||
<button color="primary" |
|||
matTooltip="{{buttonDisplayValue}}" |
|||
matTooltipPosition="above" |
|||
mat-stroked-button |
|||
(click)="toggleAuditLogFilterPanel($event)"> |
|||
<mat-icon>filter_list</mat-icon>{{buttonDisplayValue}} |
|||
</button> |
|||
<ng-template #auditLogFilterPanel> |
|||
<form class="mat-content mat-padding flex flex-col" [formGroup]="auditLogFilterForm" (ngSubmit)="update()"> |
|||
<div class="tb-form-panel flex-1 no-padding no-border"> |
|||
<div class="tb-form-row flex-1 space-between column-xs"> |
|||
<div class="fixed-title-width" translate>audit-log.filter-types</div> |
|||
<tb-string-items-list appearance="outline" |
|||
class="flex flex-1 gt-xs:w-64" |
|||
subscriptSizing="dynamic" |
|||
[placeholder]="'audit-log.filter-type-add' | translate" |
|||
[predefinedValues]="predefinedTypeValues" |
|||
formControlName="actionTypes"> |
|||
</tb-string-items-list> |
|||
</div> |
|||
</div> |
|||
<div class="tb-panel-actions flex flex-row items-center justify-end"> |
|||
<button type="button" |
|||
mat-button |
|||
color="primary" |
|||
(click)="reset()"> |
|||
{{ 'action.reset' | translate }} |
|||
</button> |
|||
<span class="flex-1"></span> |
|||
<button type="button" |
|||
mat-button |
|||
(click)="cancel()"> |
|||
{{ 'action.cancel' | translate }} |
|||
</button> |
|||
<button type="submit" |
|||
mat-raised-button |
|||
color="primary" |
|||
[disabled]="auditLogFilterForm.invalid || !auditLogFilterForm.dirty"> |
|||
{{ 'action.update' | translate }} |
|||
</button> |
|||
</div> |
|||
</form> |
|||
</ng-template> |
|||
@ -0,0 +1,35 @@ |
|||
/** |
|||
* 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. |
|||
*/ |
|||
:host { |
|||
display: flex; |
|||
max-width: 100%; |
|||
padding-right: 20px; |
|||
.mdc-button { |
|||
max-width: 100%; |
|||
} |
|||
} |
|||
|
|||
:host ::ng-deep { |
|||
.mdc-button { |
|||
.mat-icon { |
|||
min-width: 24px; |
|||
} |
|||
.mdc-button__label { |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,198 @@ |
|||
///
|
|||
/// 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.
|
|||
///
|
|||
|
|||
import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay'; |
|||
import { TemplatePortal } from '@angular/cdk/portal'; |
|||
import { ChangeDetectorRef, Component, DestroyRef, ElementRef, forwardRef, Input, OnInit, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core'; |
|||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
|||
import { ControlValueAccessor, NG_VALUE_ACCESSOR, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; |
|||
import { isDefined, isDefinedAndNotNull } from '@app/core/utils'; |
|||
import { StringItemsOption } from '@app/shared/components/string-items-list.component'; |
|||
import { |
|||
ActionType, |
|||
actionTypeTranslations, |
|||
auditLogFilterEquals, |
|||
AuditLogFilter, |
|||
POSITION_MAP, |
|||
} from '@app/shared/public-api'; |
|||
import { TranslateService } from '@ngx-translate/core'; |
|||
|
|||
// @dynamic
|
|||
@Component({ |
|||
selector: 'tb-audit-log-filter', |
|||
templateUrl: './audit-log-filter.component.html', |
|||
styleUrls: ['./audit-log-filter.component.scss'], |
|||
providers: [ |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => AuditLogFilterComponent), |
|||
multi: true |
|||
} |
|||
] |
|||
}) |
|||
export class AuditLogFilterComponent implements OnInit, ControlValueAccessor { |
|||
|
|||
@ViewChild('auditLogFilterPanel') |
|||
auditLogFilterPanel: TemplateRef<any>; |
|||
|
|||
@Input() disabled: boolean; |
|||
|
|||
ActionType = ActionType; |
|||
|
|||
actionTypes = Object.values(ActionType); |
|||
|
|||
actionTypeTranslations = actionTypeTranslations; |
|||
|
|||
buttonDisplayValue = this.translate.instant('audit-log.filter'); |
|||
|
|||
auditLogFilterForm: UntypedFormGroup; |
|||
|
|||
auditLogOverlayRef: OverlayRef; |
|||
|
|||
initialAuditLogFilter: AuditLogFilter; |
|||
|
|||
private auditLogFilter: AuditLogFilter; |
|||
|
|||
private propagateChange = (_: any) => {}; |
|||
|
|||
constructor(private fb: UntypedFormBuilder, |
|||
private translate: TranslateService, |
|||
private overlay: Overlay, |
|||
private nativeElement: ElementRef, |
|||
private viewContainerRef: ViewContainerRef, |
|||
private cd: ChangeDetectorRef, |
|||
private destroyRef: DestroyRef) {} |
|||
|
|||
ngOnInit(): void { |
|||
this.auditLogFilterForm = this.fb.group({ |
|||
actionTypes: [[]] |
|||
}); |
|||
this.auditLogFilterForm.valueChanges.pipe( |
|||
takeUntilDestroyed(this.destroyRef) |
|||
).subscribe( |
|||
() => { |
|||
this.updateValidators(); |
|||
} |
|||
); |
|||
} |
|||
|
|||
registerOnChange(fn: any): void { |
|||
this.propagateChange = fn; |
|||
} |
|||
|
|||
registerOnTouched(fn: any): void { |
|||
} |
|||
|
|||
setDisabledState(isDisabled: boolean): void { |
|||
this.disabled = isDisabled; |
|||
if (this.disabled) { |
|||
this.auditLogFilterForm.disable({emitEvent: false}); |
|||
} else { |
|||
this.auditLogFilterForm.enable({emitEvent: false}); |
|||
this.updateValidators(); |
|||
} |
|||
} |
|||
|
|||
writeValue(auditLogFilter?: AuditLogFilter): void { |
|||
this.auditLogFilter = auditLogFilter; |
|||
if(!this.initialAuditLogFilter && isDefined(this.auditLogFilter)) { |
|||
this.initialAuditLogFilter = this.auditLogFilterForm.getRawValue(); |
|||
} |
|||
this.updateButtonDisplayValue(); |
|||
this.updateAuditLogFilterForm(auditLogFilter); |
|||
} |
|||
|
|||
get predefinedTypeValues (): StringItemsOption[] { |
|||
return [...this.actionTypes].map(type => ({ |
|||
name: this.translate.instant(this.actionTypeTranslations.get(type)), |
|||
value: type |
|||
})); |
|||
} |
|||
|
|||
private updateValidators() { |
|||
} |
|||
|
|||
toggleAuditLogFilterPanel($event: Event) { |
|||
if ($event) { |
|||
$event.stopPropagation(); |
|||
} |
|||
const config = new OverlayConfig({ |
|||
panelClass: 'tb-filter-panel', |
|||
backdropClass: 'cdk-overlay-transparent-backdrop', |
|||
hasBackdrop: true, |
|||
maxHeight: '80vh', |
|||
height: 'min-content', |
|||
minWidth: '' |
|||
}); |
|||
config.hasBackdrop = true; |
|||
config.positionStrategy = this.overlay.position() |
|||
.flexibleConnectedTo(this.nativeElement) |
|||
.withPositions([POSITION_MAP.bottomLeft]); |
|||
|
|||
this.auditLogOverlayRef = this.overlay.create(config); |
|||
this.auditLogOverlayRef.backdropClick().subscribe(() => { |
|||
this.auditLogOverlayRef.dispose(); |
|||
}); |
|||
this.auditLogOverlayRef.attach(new TemplatePortal(this.auditLogFilterPanel, |
|||
this.viewContainerRef)); |
|||
} |
|||
|
|||
cancel() { |
|||
this.updateAuditLogFilterForm(this.auditLogFilter); |
|||
this.auditLogOverlayRef.dispose(); |
|||
} |
|||
|
|||
update() { |
|||
this.auditLogFilterUpdated(this.auditLogFilterForm.value); |
|||
this.auditLogOverlayRef.dispose(); |
|||
} |
|||
|
|||
reset() { |
|||
if (this.initialAuditLogFilter) { |
|||
if (!auditLogFilterEquals(this.auditLogFilter, this.initialAuditLogFilter)) { |
|||
this.updateAuditLogFilterForm(this.initialAuditLogFilter); |
|||
this.auditLogFilterForm.markAsDirty(); |
|||
} |
|||
} |
|||
} |
|||
|
|||
private updateAuditLogFilterForm(auditLogFilter?: AuditLogFilter) { |
|||
this.auditLogFilterForm.patchValue({ |
|||
actionTypes: auditLogFilter?.actionTypes, |
|||
}, {emitEvent: false}); |
|||
this.updateValidators(); |
|||
} |
|||
|
|||
private auditLogFilterUpdated(auditLogFilter: AuditLogFilter) { |
|||
this.auditLogFilter = auditLogFilter; |
|||
this.updateButtonDisplayValue(); |
|||
this.propagateChange(this.auditLogFilter); |
|||
} |
|||
|
|||
private updateButtonDisplayValue() { |
|||
const filterTextParts: string[] = []; |
|||
if (isDefinedAndNotNull(this.auditLogFilter?.actionTypes)) { |
|||
const actionTypes = this.auditLogFilter.actionTypes; |
|||
actionTypes.forEach(actionType => filterTextParts.push(this.translate.instant(this.actionTypeTranslations.get(actionType as ActionType)))) |
|||
} |
|||
if (!filterTextParts.length) { |
|||
this.buttonDisplayValue = this.translate.instant('audit-log.audit-log-filter-title'); |
|||
} else { |
|||
this.buttonDisplayValue = this.translate.instant('audit-log.filter-title') + `: ${filterTextParts.join(', ')}`; |
|||
} |
|||
this.cd.detectChanges(); |
|||
} |
|||
} |
|||
@ -0,0 +1,20 @@ |
|||
<!-- |
|||
|
|||
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. |
|||
|
|||
--> |
|||
<tb-audit-log-filter [ngModel]="entitiesTableConfig.componentsData.auditLogFilter" |
|||
(ngModelChange)="auditLogFiltersChanged($event)" |
|||
></tb-audit-log-filter> |
|||
@ -0,0 +1,21 @@ |
|||
/** |
|||
* 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. |
|||
*/ |
|||
|
|||
:host { |
|||
padding-right: 8px; |
|||
overflow: hidden; |
|||
max-width: 100%; |
|||
} |
|||
@ -0,0 +1,38 @@ |
|||
///
|
|||
/// 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.
|
|||
///
|
|||
|
|||
import { Component } from '@angular/core'; |
|||
import { AppState } from '@app/core/public-api'; |
|||
import { AuditLog, AuditLogFilter, TimePageLink } from '@app/shared/public-api'; |
|||
import { EntityTableHeaderComponent } from '@home/components/entity/entity-table-header.component'; |
|||
import { Store } from '@ngrx/store'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-audit-log-header', |
|||
templateUrl: './audit-log-header.component.html', |
|||
styles: `` |
|||
}) |
|||
export class AuditLogHeaderComponent extends EntityTableHeaderComponent<AuditLog, TimePageLink> { |
|||
|
|||
constructor(protected store: Store<AppState>) { |
|||
super(store) |
|||
} |
|||
|
|||
auditLogFiltersChanged(auditLogFilter: AuditLogFilter) { |
|||
this.entitiesTableConfig.componentsData.auditLogFilter = auditLogFilter; |
|||
this.entitiesTableConfig.getTable().resetSortAndFilter(true, true); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue