Andrew Shvayka
3 years ago
committed by
GitHub
GitHub
16 changed files with 910 additions and 55 deletions
@ -0,0 +1,51 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2023 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. |
|||
|
|||
--> |
|||
<mat-form-field appearance="outline" [formGroup]="selectUserFormGroup" class="mat-block container"> |
|||
<input matInput type="text" placeholder="{{ 'user.search' | translate }}" |
|||
#userInput |
|||
formControlName="user" |
|||
(focusin)="onFocus()" |
|||
[matAutocomplete]="userAutocomplete"> |
|||
<mat-icon matSuffix>search</mat-icon> |
|||
<mat-autocomplete class="tb-assignee-autocomplete" |
|||
#userAutocomplete="matAutocomplete" |
|||
[displayWith]="displayUserFn" |
|||
(optionSelected)="selected($event)" |
|||
panelWidth="260px"> |
|||
<mat-option [ngClass]="{'assigned': !assigneeId}" [value]="null"> |
|||
<mat-icon class="unassigned-icon">account_circle</mat-icon> |
|||
<span style="margin-right: auto" translate>alarm.unassigned</span> |
|||
</mat-option> |
|||
<mat-option [ngClass]="{ 'assigned': assigneeId === user.id.id }" |
|||
*ngFor="let user of filteredUsers | async" [value]="user"> |
|||
<span class="user-avatar" [innerHTML]="getUserInitials(user)" |
|||
[style.background-color]="getAvatarBgColor(user)"> |
|||
</span> |
|||
<div fxLayout="column" fxLayoutGap="2px"> |
|||
<span class="user-email" [innerHTML]="user.email | highlight:searchText"></span> |
|||
<span class="user-name" *ngIf="user.firstName || user.lastName" [innerHTML]="getFullName(user)"></span> |
|||
</div> |
|||
</mat-option> |
|||
<mat-option *ngIf="!(filteredUsers | async)?.length" [value]="null"> |
|||
<span style="white-space: normal"> |
|||
{{ translate.get('user.no-users-matching', {entity: searchText}) | async }} |
|||
</span> |
|||
</mat-option> |
|||
</mat-autocomplete> |
|||
</mat-form-field> |
|||
|
|||
@ -0,0 +1,101 @@ |
|||
/** |
|||
* Copyright © 2016-2023 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 { |
|||
width: 100%; |
|||
overflow: auto; |
|||
background: #fff; |
|||
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15); |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
::ng-deep { |
|||
mat-form-field.container { |
|||
padding-top: 8px; |
|||
height: 340px; |
|||
font-size: 14px; |
|||
|
|||
background-color: #fff; |
|||
.mat-form-field-wrapper { |
|||
margin-right: 8px; |
|||
margin-left: 8px; |
|||
padding: 0; |
|||
} |
|||
} |
|||
|
|||
.mat-form-field-appearance-outline .mat-form-field-outline { |
|||
color: rgba(0, 0, 0, 0.12) !important; |
|||
} |
|||
|
|||
.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick { |
|||
color: rgba(0, 0, 0, 0.12) !important; |
|||
} |
|||
|
|||
.tb-assignee-autocomplete { |
|||
|
|||
&.tb-assignee-autocomplete.mat-autocomplete-visible { |
|||
position: relative; |
|||
left: -8px; |
|||
margin-top: 8px; |
|||
box-shadow: none !important; |
|||
} |
|||
.assigned { |
|||
background-color: rgba(0, 0, 0, 0.06); |
|||
} |
|||
|
|||
.mat-option { |
|||
font-size: 14px; |
|||
border: none; |
|||
height: 52px !important; |
|||
.unassigned-icon { |
|||
color: rgba(0, 0, 0, 0.38); |
|||
font-size: 28px; |
|||
width: 28px; |
|||
height: 28px; |
|||
margin-right: 8px; |
|||
} |
|||
.user-avatar { |
|||
display: inline-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
align-self: center; |
|||
margin-right: 8px; |
|||
border-radius: 50%; |
|||
background-color: #5cb445; |
|||
width: 28px; |
|||
height: 28px; |
|||
color: white; |
|||
font-size: 13px; |
|||
font-weight: 700 |
|||
} |
|||
.user-email { |
|||
color: rgba(0, 0, 0, 0.76); |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
max-width: 185px |
|||
} |
|||
.user-name { |
|||
color: rgba(0, 0, 0, 0.38); |
|||
font-size: 13px; |
|||
} |
|||
.mat-option-text { |
|||
display: flex; |
|||
justify-content: start; |
|||
align-items: center; |
|||
line-height: normal; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,227 @@ |
|||
///
|
|||
/// Copyright © 2016-2023 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 { |
|||
AfterViewInit, |
|||
Component, |
|||
ElementRef, |
|||
Inject, |
|||
InjectionToken, OnDestroy, |
|||
OnInit, |
|||
ViewChild |
|||
} from '@angular/core'; |
|||
import { FormBuilder, FormGroup } from '@angular/forms'; |
|||
import { Observable, of, Subject } from 'rxjs'; |
|||
import { |
|||
catchError, |
|||
debounceTime, |
|||
distinctUntilChanged, |
|||
map, |
|||
share, |
|||
switchMap, |
|||
takeUntil, |
|||
} from 'rxjs/operators'; |
|||
import { User } from '@shared/models/user.model'; |
|||
import { TranslateService } from '@ngx-translate/core'; |
|||
import { UserService } from '@core/http/user.service'; |
|||
import { PageLink } from '@shared/models/page/page-link'; |
|||
import { Direction } from '@shared/models/page/sort-order'; |
|||
import { emptyPageData } from '@shared/models/page/page-data'; |
|||
import { AlarmService } from '@core/http/alarm.service'; |
|||
import { OverlayRef } from '@angular/cdk/overlay'; |
|||
import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete'; |
|||
import { UtilsService } from '@core/services/utils.service'; |
|||
|
|||
export const ALARM_ASSIGNEE_PANEL_DATA = new InjectionToken<any>('AlarmAssigneePanelData'); |
|||
|
|||
export interface AlarmAssigneePanelData { |
|||
alarmId: string; |
|||
assigneeId: string; |
|||
} |
|||
|
|||
@Component({ |
|||
selector: 'tb-alarm-assignee-panel', |
|||
templateUrl: './alarm-assignee-panel.component.html', |
|||
styleUrls: ['./alarm-assignee-panel.component.scss'] |
|||
}) |
|||
export class AlarmAssigneePanelComponent implements OnInit, AfterViewInit, OnDestroy { |
|||
|
|||
private dirty = false; |
|||
|
|||
alarmId: string; |
|||
|
|||
assigneeId?: string; |
|||
|
|||
selectUserFormGroup: FormGroup; |
|||
|
|||
@ViewChild('userInput', {static: true}) userInput: ElementRef; |
|||
|
|||
filteredUsers: Observable<Array<User>>; |
|||
|
|||
searchText = ''; |
|||
|
|||
private destroy$ = new Subject<void>(); |
|||
|
|||
constructor(@Inject(ALARM_ASSIGNEE_PANEL_DATA) public data: AlarmAssigneePanelData, |
|||
public overlayRef: OverlayRef, |
|||
public translate: TranslateService, |
|||
private userService: UserService, |
|||
private alarmService: AlarmService, |
|||
private fb: FormBuilder, |
|||
private utilsService: UtilsService) { |
|||
this.alarmId = data.alarmId; |
|||
this.assigneeId = data.assigneeId; |
|||
this.selectUserFormGroup = this.fb.group({ |
|||
user: [null] |
|||
}); |
|||
} |
|||
|
|||
ngOnInit() { |
|||
this.filteredUsers = this.selectUserFormGroup.get('user').valueChanges |
|||
.pipe( |
|||
debounceTime(150), |
|||
map(value => { |
|||
return value ? (typeof value === 'string' ? value : '') : '' |
|||
}), |
|||
distinctUntilChanged(), |
|||
switchMap(name => this.fetchUsers(name)), |
|||
share(), |
|||
takeUntil(this.destroy$) |
|||
); |
|||
} |
|||
|
|||
ngAfterViewInit() { |
|||
setTimeout(() => { |
|||
this.userInput.nativeElement.focus(); |
|||
}, 0) |
|||
} |
|||
|
|||
ngOnDestroy() { |
|||
this.destroy$.next(); |
|||
this.destroy$.complete(); |
|||
} |
|||
|
|||
displayUserFn(user?: User): string | undefined { |
|||
return user ? user.email : undefined; |
|||
} |
|||
|
|||
selected(event: MatAutocompleteSelectedEvent): void { |
|||
this.selectUserFormGroup.get('user').patchValue(''); |
|||
const user: User = event.option.value; |
|||
if (user) { |
|||
this.assign(user); |
|||
} else { |
|||
this.unassign(); |
|||
} |
|||
} |
|||
|
|||
assign(user: User): void { |
|||
this.alarmService.assignAlarm(this.alarmId, user.id.id).subscribe( |
|||
() => this.overlayRef.dispose()); |
|||
} |
|||
|
|||
unassign(): void { |
|||
this.alarmService.unassignAlarm(this.alarmId).subscribe( |
|||
() => this.overlayRef.dispose()); |
|||
} |
|||
|
|||
fetchUsers(searchText?: string): Observable<Array<User>> { |
|||
this.searchText = searchText; |
|||
const pageLink = new PageLink(50, 0, searchText, { |
|||
property: 'email', |
|||
direction: Direction.ASC |
|||
}); |
|||
return this.userService.getUsers(pageLink, {ignoreLoading: true}) |
|||
.pipe( |
|||
catchError(() => of(emptyPageData<User>())), |
|||
map(pageData => { |
|||
return pageData.data; |
|||
}) |
|||
); |
|||
} |
|||
|
|||
onFocus(): void { |
|||
if (!this.dirty) { |
|||
this.selectUserFormGroup.get('user').updateValueAndValidity({onlySelf: true}); |
|||
this.dirty = true; |
|||
} |
|||
} |
|||
|
|||
clear() { |
|||
this.selectUserFormGroup.get('user').patchValue('', {emitEvent: true}); |
|||
setTimeout(() => { |
|||
this.userInput.nativeElement.blur(); |
|||
this.userInput.nativeElement.focus(); |
|||
}, 0); |
|||
} |
|||
|
|||
getUserDisplayName(entity: User) { |
|||
let displayName = ''; |
|||
if ((entity.firstName && entity.firstName.length > 0) || |
|||
(entity.lastName && entity.lastName.length > 0)) { |
|||
if (entity.firstName) { |
|||
displayName += entity.firstName; |
|||
} |
|||
if (entity.lastName) { |
|||
if (displayName.length > 0) { |
|||
displayName += ' '; |
|||
} |
|||
displayName += entity.lastName; |
|||
} |
|||
} else { |
|||
displayName = entity.email; |
|||
} |
|||
return displayName; |
|||
} |
|||
|
|||
getUserInitials(entity: User): string { |
|||
let initials = ''; |
|||
if (entity.firstName && entity.firstName.length || |
|||
entity.lastName && entity.lastName.length) { |
|||
if (entity.firstName) { |
|||
initials += entity.firstName.charAt(0); |
|||
} |
|||
if (entity.lastName) { |
|||
initials += entity.lastName.charAt(0); |
|||
} |
|||
} else { |
|||
initials += entity.email.charAt(0); |
|||
} |
|||
return initials.toUpperCase(); |
|||
} |
|||
|
|||
getFullName(entity: User): string { |
|||
let fullName = ''; |
|||
if ((entity.firstName && entity.firstName.length > 0) || |
|||
(entity.lastName && entity.lastName.length > 0)) { |
|||
if (entity.firstName) { |
|||
fullName += entity.firstName; |
|||
} |
|||
if (entity.lastName) { |
|||
if (fullName.length > 0) { |
|||
fullName += ' '; |
|||
} |
|||
fullName += entity.lastName; |
|||
} |
|||
} |
|||
return fullName; |
|||
} |
|||
|
|||
getAvatarBgColor(entity: User) { |
|||
return this.utilsService.stringToHslColor(this.getUserDisplayName(entity), 40, 60); |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,61 @@ |
|||
/** |
|||
* Copyright © 2016-2023 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 ::ng-deep { |
|||
.assignee-field { |
|||
.mat-form-field-label-wrapper { |
|||
overflow: visible; |
|||
left: -36px; |
|||
} |
|||
.user-avatar { |
|||
min-width: 28px; |
|||
min-height: 28px; |
|||
margin-right: 8px; |
|||
border-radius: 50%; |
|||
font-weight: 700; |
|||
color: #fff; |
|||
font-size: 13px; |
|||
line-height: normal; |
|||
} |
|||
} |
|||
.mat-expansion-panel { |
|||
&.tb-alarm-details { |
|||
box-shadow: none; |
|||
margin-bottom: 2px; |
|||
&.mat-expanded { |
|||
margin-bottom: 24px; |
|||
} |
|||
.mat-expansion-panel-header { |
|||
padding: 0; |
|||
height: 24px; |
|||
&:hover { |
|||
background: none !important; |
|||
} |
|||
.mat-expansion-indicator { |
|||
padding: 2px; |
|||
} |
|||
} |
|||
.mat-expansion-panel-header-description { |
|||
align-items: center; |
|||
} |
|||
.mat-expansion-panel-body { |
|||
padding: 0; |
|||
} |
|||
} |
|||
.mat-expansion-panel-content { |
|||
font: inherit; |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue