Igor Kulikov
2 years ago
committed by
GitHub
GitHub
25 changed files with 1301 additions and 19 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,20 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2024 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 '../../../../../scss/constants'; |
||||
|
|
||||
|
.tb-no-notification-svg-color { |
||||
|
color: $tb-primary-color; |
||||
|
} |
||||
@ -0,0 +1,128 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2024 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. |
||||
|
|
||||
|
--> |
||||
|
<ng-container [formGroup]="unreadNotificationWidgetConfigForm"> |
||||
|
|
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widget-config.appearance</div> |
||||
|
<div class="tb-form-row column-xs"> |
||||
|
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle"> |
||||
|
{{ 'widget-config.title' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
<tb-font-settings formControlName="titleFont" |
||||
|
clearButton |
||||
|
[previewText]="unreadNotificationWidgetConfigForm.get('title').value" |
||||
|
[initialPreviewStyle]="widgetConfig.config.titleStyle"> |
||||
|
</tb-font-settings> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="titleColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row column-xs"> |
||||
|
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon"> |
||||
|
{{ 'widgets.notification.icon' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic"> |
||||
|
<input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
<tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select> |
||||
|
<tb-material-icon-select asBoxInput |
||||
|
iconClearButton |
||||
|
[color]="unreadNotificationWidgetConfigForm.get('iconColor').value" |
||||
|
formControlName="icon"> |
||||
|
</tb-material-icon-select> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="iconColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widgets.notification.max-notification-display' | translate }}</div> |
||||
|
<mat-form-field appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput type="number" min="1" formControlName="maxNotificationDisplay" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-row no-padding no-border"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="showCounter"> |
||||
|
{{ 'widgets.notification.counter' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widgets.notification.counter-value' | translate }}</div> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<tb-font-settings formControlName="counterValueFont" |
||||
|
clearButton |
||||
|
[previewText]="unreadNotificationWidgetConfigForm.get('maxNotificationDisplay').value.toString()" |
||||
|
[initialPreviewStyle]="widgetConfig.config.titleStyle"> |
||||
|
</tb-font-settings> |
||||
|
<tb-color-input asBoxInput |
||||
|
formControlName="counterValueColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widgets.notification.counter-color' | translate }}</div> |
||||
|
<tb-color-input asBoxInput |
||||
|
formControlName="counterColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widget-config.appearance</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widgets.background.background' | translate }}</div> |
||||
|
<tb-background-settings formControlName="background"> |
||||
|
</tb-background-settings> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between column-lt-md"> |
||||
|
<div translate>widget-config.show-card-buttons</div> |
||||
|
<mat-chip-listbox multiple formControlName="cardButtons"> |
||||
|
<mat-chip-option value="viewAll">{{ 'widgets.notification.button-view-all' | translate }}</mat-chip-option> |
||||
|
<mat-chip-option value="filter">{{ 'widgets.notification.button-filter' | translate }}</mat-chip-option> |
||||
|
<mat-chip-option value="markAsRead">{{ 'widgets.notification.button-mark-read' | translate }}</mat-chip-option> |
||||
|
<mat-chip-option value="fullscreen">{{ 'fullscreen.fullscreen' | translate }}</mat-chip-option> |
||||
|
</mat-chip-listbox> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widget-config.card-border-radius' | translate }}</div> |
||||
|
<mat-form-field appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widget-config.card-padding' | translate }}</div> |
||||
|
<mat-form-field appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
<tb-widget-actions-panel |
||||
|
formControlName="actions"> |
||||
|
</tb-widget-actions-panel> |
||||
|
</ng-container> |
||||
@ -0,0 +1,177 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 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 { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models'; |
||||
|
import { WidgetConfigComponentData } from '@home/models/widget-component.models'; |
||||
|
import { WidgetConfig, } from '@shared/models/widget.models'; |
||||
|
import { WidgetConfigComponent } from '@home/components/widget/widget-config.component'; |
||||
|
import { isUndefined } from '@core/utils'; |
||||
|
import { cssSizeToStrSize, resolveCssSize } from '@shared/models/widget-settings.models'; |
||||
|
import { |
||||
|
unreadNotificationDefaultSettings, |
||||
|
UnreadNotificationWidgetSettings |
||||
|
} from '@home/components/widget/lib/cards/unread-notification-widget.models'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-unread-notification-basic-config', |
||||
|
templateUrl: './unread-notification-basic-config.component.html', |
||||
|
styleUrls: ['../basic-config.scss'] |
||||
|
}) |
||||
|
export class UnreadNotificationBasicConfigComponent extends BasicWidgetConfigComponent { |
||||
|
|
||||
|
unreadNotificationWidgetConfigForm: UntypedFormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
protected widgetConfigComponent: WidgetConfigComponent, |
||||
|
private fb: UntypedFormBuilder) { |
||||
|
super(store, widgetConfigComponent); |
||||
|
} |
||||
|
|
||||
|
protected configForm(): UntypedFormGroup { |
||||
|
return this.unreadNotificationWidgetConfigForm; |
||||
|
} |
||||
|
|
||||
|
protected onConfigSet(configData: WidgetConfigComponentData) { |
||||
|
const iconSize = resolveCssSize(configData.config.iconSize); |
||||
|
const settings: UnreadNotificationWidgetSettings = {...unreadNotificationDefaultSettings, ...(configData.config.settings || {})}; |
||||
|
this.unreadNotificationWidgetConfigForm = this.fb.group({ |
||||
|
|
||||
|
showTitle: [configData.config.showTitle, []], |
||||
|
title: [configData.config.title, []], |
||||
|
titleFont: [configData.config.titleFont, []], |
||||
|
titleColor: [configData.config.titleColor, []], |
||||
|
|
||||
|
showIcon: [configData.config.showTitleIcon, []], |
||||
|
iconSize: [iconSize[0], [Validators.min(0)]], |
||||
|
iconSizeUnit: [iconSize[1], []], |
||||
|
icon: [configData.config.titleIcon, []], |
||||
|
iconColor: [configData.config.iconColor, []], |
||||
|
|
||||
|
maxNotificationDisplay: [settings.maxNotificationDisplay, [Validators.required, Validators.min(1)]], |
||||
|
showCounter: [settings.showCounter, []], |
||||
|
counterValueFont: [settings.counterValueFont, []], |
||||
|
counterValueColor: [settings.counterValueColor, []], |
||||
|
counterColor: [settings.counterColor, []], |
||||
|
|
||||
|
background: [settings.background, []], |
||||
|
padding: [settings.padding, []], |
||||
|
|
||||
|
cardButtons: [this.getCardButtons(configData.config), []], |
||||
|
borderRadius: [configData.config.borderRadius, []], |
||||
|
actions: [configData.config.actions || {}, []] |
||||
|
}); |
||||
|
} |
||||
|
protected validatorTriggers(): string[] { |
||||
|
return ['showCounter', 'showTitle', 'showIcon']; |
||||
|
} |
||||
|
|
||||
|
protected updateValidators(emitEvent: boolean, trigger?: string) { |
||||
|
const showCounter: boolean = this.unreadNotificationWidgetConfigForm.get('showCounter').value; |
||||
|
const showTitle: boolean = this.unreadNotificationWidgetConfigForm.get('showTitle').value; |
||||
|
const showIcon: boolean = this.unreadNotificationWidgetConfigForm.get('showIcon').value; |
||||
|
|
||||
|
if (showTitle) { |
||||
|
this.unreadNotificationWidgetConfigForm.get('title').enable({emitEvent}); |
||||
|
this.unreadNotificationWidgetConfigForm.get('titleFont').enable({emitEvent}); |
||||
|
this.unreadNotificationWidgetConfigForm.get('titleColor').enable({emitEvent}); |
||||
|
} else { |
||||
|
this.unreadNotificationWidgetConfigForm.get('title').disable({emitEvent}); |
||||
|
this.unreadNotificationWidgetConfigForm.get('titleFont').disable({emitEvent}); |
||||
|
this.unreadNotificationWidgetConfigForm.get('titleColor').disable({emitEvent}); |
||||
|
} |
||||
|
|
||||
|
if (showIcon) { |
||||
|
this.unreadNotificationWidgetConfigForm.get('iconSize').enable({emitEvent}); |
||||
|
this.unreadNotificationWidgetConfigForm.get('iconSizeUnit').enable({emitEvent}); |
||||
|
this.unreadNotificationWidgetConfigForm.get('icon').enable({emitEvent}); |
||||
|
this.unreadNotificationWidgetConfigForm.get('iconColor').enable({emitEvent}); |
||||
|
} else { |
||||
|
this.unreadNotificationWidgetConfigForm.get('iconSize').disable({emitEvent}); |
||||
|
this.unreadNotificationWidgetConfigForm.get('iconSizeUnit').disable({emitEvent}); |
||||
|
this.unreadNotificationWidgetConfigForm.get('icon').disable({emitEvent}); |
||||
|
this.unreadNotificationWidgetConfigForm.get('iconColor').disable({emitEvent}); |
||||
|
} |
||||
|
|
||||
|
if (showCounter) { |
||||
|
this.unreadNotificationWidgetConfigForm.get('counterValueFont').enable({emitEvent}); |
||||
|
this.unreadNotificationWidgetConfigForm.get('counterValueColor').enable({emitEvent}); |
||||
|
this.unreadNotificationWidgetConfigForm.get('counterColor').enable({emitEvent}); |
||||
|
} else { |
||||
|
this.unreadNotificationWidgetConfigForm.get('counterValueFont').disable({emitEvent}); |
||||
|
this.unreadNotificationWidgetConfigForm.get('counterValueColor').disable({emitEvent}); |
||||
|
this.unreadNotificationWidgetConfigForm.get('counterColor').disable({emitEvent}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
protected prepareOutputConfig(config: any): WidgetConfigComponentData { |
||||
|
|
||||
|
this.widgetConfig.config.showTitle = config.showTitle; |
||||
|
this.widgetConfig.config.title = config.title; |
||||
|
this.widgetConfig.config.titleFont = config.titleFont; |
||||
|
this.widgetConfig.config.titleColor = config.titleColor; |
||||
|
|
||||
|
this.widgetConfig.config.showTitleIcon = config.showIcon; |
||||
|
this.widgetConfig.config.iconSize = cssSizeToStrSize(config.iconSize, config.iconSizeUnit); |
||||
|
this.widgetConfig.config.titleIcon = config.icon; |
||||
|
this.widgetConfig.config.iconColor = config.iconColor; |
||||
|
|
||||
|
this.widgetConfig.config.settings = this.widgetConfig.config.settings || {}; |
||||
|
|
||||
|
this.widgetConfig.config.settings.maxNotificationDisplay = config.maxNotificationDisplay; |
||||
|
this.widgetConfig.config.settings.showCounter = config.showCounter; |
||||
|
this.widgetConfig.config.settings.counterValueFont = config.counterValueFont; |
||||
|
this.widgetConfig.config.settings.counterValueColor = config.counterValueColor; |
||||
|
this.widgetConfig.config.settings.counterColor = config.counterColor; |
||||
|
|
||||
|
this.widgetConfig.config.settings.background = config.background; |
||||
|
this.widgetConfig.config.settings.padding = config.padding; |
||||
|
|
||||
|
this.widgetConfig.config.actions = config.actions; |
||||
|
this.setCardButtons(config.cardButtons, this.widgetConfig.config); |
||||
|
this.widgetConfig.config.borderRadius = config.borderRadius; |
||||
|
return this.widgetConfig; |
||||
|
} |
||||
|
|
||||
|
private getCardButtons(config: WidgetConfig): string[] { |
||||
|
const buttons: string[] = []; |
||||
|
if (isUndefined(config.settings?.enableViewAll) || config.settings?.enableViewAll) { |
||||
|
buttons.push('viewAll'); |
||||
|
} |
||||
|
if (isUndefined(config.settings?.enableFilter) || config.settings?.enableFilter) { |
||||
|
buttons.push('filter'); |
||||
|
} |
||||
|
if (isUndefined(config.settings?.enableMarkAsRead) || config.settings?.enableMarkAsRead) { |
||||
|
buttons.push('markAsRead'); |
||||
|
} |
||||
|
if (isUndefined(config.enableFullscreen) || config.enableFullscreen) { |
||||
|
buttons.push('fullscreen'); |
||||
|
} |
||||
|
return buttons; |
||||
|
} |
||||
|
|
||||
|
private setCardButtons(buttons: string[], config: WidgetConfig) { |
||||
|
config.settings.enableViewAll = buttons.includes('viewAll'); |
||||
|
config.settings.enableFilter = buttons.includes('filter'); |
||||
|
config.settings.enableMarkAsRead = buttons.includes('markAsRead'); |
||||
|
|
||||
|
config.enableFullscreen = buttons.includes('fullscreen'); |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,77 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2024 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 fxLayout="column" fxFlex class="mat-content mat-padding" (ngSubmit)="update()"> |
||||
|
<div class="tb-form-panel no-padding"> |
||||
|
<div class="tb-form-row column-xs"> |
||||
|
<div class="fixed-title-width" ngClass.xs="filters-title-mobile" translate>widgets.notification.notification-types</div> |
||||
|
<mat-form-field floatLabel="auto" appearance="outline" subscriptSizing="dynamic" class="flex fb-chips"> |
||||
|
<mat-chip-grid #chipList> |
||||
|
<mat-chip-row |
||||
|
*ngFor="let type of selectedNotificationTypes" |
||||
|
removable |
||||
|
(removed)="remove(type)"> |
||||
|
{{ notificationTypesTranslateMap.get(type).name | translate }} |
||||
|
<mat-icon matChipRemove>close</mat-icon> |
||||
|
</mat-chip-row> |
||||
|
<input matInput type="text" |
||||
|
placeholder="{{ ( selectedNotificationTypes.length ? 'widgets.notification.notification-type' : 'widgets.notification.any-type' ) | translate }}" |
||||
|
style="max-width: 200px;" |
||||
|
[formControl]="searchControlName" |
||||
|
#notificationTypeInput |
||||
|
(focusin)="onFocus()" |
||||
|
matAutocompleteOrigin |
||||
|
#origin="matAutocompleteOrigin" |
||||
|
[matAutocompleteConnectedTo]="origin" |
||||
|
[matAutocomplete]="NotificationTypeAutocomplete" |
||||
|
[matChipInputFor]="chipList" |
||||
|
[matChipInputSeparatorKeyCodes]="separatorKeysCodes" |
||||
|
(matChipInputTokenEnd)="chipAdd($event)"> |
||||
|
</mat-chip-grid> |
||||
|
<mat-autocomplete #NotificationTypeAutocomplete="matAutocomplete" |
||||
|
class="tb-autocomplete" |
||||
|
(optionSelected)="selected($event)" |
||||
|
[displayWith]="displayTypeFn"> |
||||
|
<mat-option *ngFor="let type of filteredNotificationTypesList | async" [value]="type"> |
||||
|
<span [innerHTML]="notificationTypesTranslateMap.get(type).name | translate | highlight:searchText"></span> |
||||
|
</mat-option> |
||||
|
</mat-autocomplete> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div fxLayout="row" class="tb-panel-actions" fxLayoutAlign="end center"> |
||||
|
<button type="button" |
||||
|
mat-button |
||||
|
(click)="reset()" |
||||
|
color="primary"> |
||||
|
{{ 'action.reset' | translate }} |
||||
|
</button> |
||||
|
<span fxFlex></span> |
||||
|
<button type="button" |
||||
|
(click)="cancel()" |
||||
|
mat-button> |
||||
|
{{ 'action.cancel' | translate }} |
||||
|
</button> |
||||
|
<button type="submit" |
||||
|
mat-raised-button |
||||
|
color="primary"> |
||||
|
{{ 'action.update' | translate }} |
||||
|
</button> |
||||
|
</div> |
||||
|
</form> |
||||
|
|
||||
@ -0,0 +1,25 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2024 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; |
||||
|
width: 100%; |
||||
|
max-width: 100%; |
||||
|
|
||||
|
.mdc-button { |
||||
|
max-width: 100%; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,140 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 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, ElementRef, Inject, InjectionToken, OnInit, ViewChild } from '@angular/core'; |
||||
|
import { NotificationTemplateTypeTranslateMap, NotificationType } from '@shared/models/notification.models'; |
||||
|
import { MatChipInputEvent } from '@angular/material/chips'; |
||||
|
import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes'; |
||||
|
import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete'; |
||||
|
import { Observable } from 'rxjs'; |
||||
|
import { FormControl } from '@angular/forms'; |
||||
|
import { debounceTime, map } from 'rxjs/operators'; |
||||
|
import { OverlayRef } from '@angular/cdk/overlay'; |
||||
|
|
||||
|
export const NOTIFICATION_TYPE_FILTER_PANEL_DATA = new InjectionToken<any>('NotificationTypeFilterPanelData'); |
||||
|
|
||||
|
export interface NotificationTypeFilterPanelData { |
||||
|
notificationTypes: Array<NotificationType>; |
||||
|
notificationTypesUpdated: (notificationTypes: Array<NotificationType>) => void; |
||||
|
} |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-notification-type-filter-panel', |
||||
|
templateUrl: './notification-type-filter-panel.component.html', |
||||
|
styleUrls: ['notification-type-filter-panel.component.scss'] |
||||
|
}) |
||||
|
export class NotificationTypeFilterPanelComponent implements OnInit{ |
||||
|
|
||||
|
@ViewChild('searchInput') searchInputField: ElementRef; |
||||
|
|
||||
|
searchText = ''; |
||||
|
searchControlName = new FormControl(''); |
||||
|
|
||||
|
filteredNotificationTypesList: Observable<Array<NotificationType>>; |
||||
|
selectedNotificationTypes: Array<NotificationType> = []; |
||||
|
notificationTypesTranslateMap = NotificationTemplateTypeTranslateMap; |
||||
|
|
||||
|
separatorKeysCodes: number[] = [ENTER, COMMA, SEMICOLON]; |
||||
|
|
||||
|
private notificationType = NotificationType; |
||||
|
private notificationTypes = Object.keys(NotificationType) as Array<NotificationType>; |
||||
|
|
||||
|
private dirty = false; |
||||
|
|
||||
|
@ViewChild('notificationTypeInput') notificationTypeInput: ElementRef<HTMLInputElement>; |
||||
|
|
||||
|
constructor(@Inject(NOTIFICATION_TYPE_FILTER_PANEL_DATA) public data: NotificationTypeFilterPanelData, |
||||
|
private overlayRef: OverlayRef) { |
||||
|
this.selectedNotificationTypes = this.data.notificationTypes; |
||||
|
this.dirty = true; |
||||
|
} |
||||
|
|
||||
|
ngOnInit() { |
||||
|
this.filteredNotificationTypesList = this.searchControlName.valueChanges.pipe( |
||||
|
debounceTime(150), |
||||
|
map(value => { |
||||
|
this.searchText = value; |
||||
|
return this.notificationTypes.filter(type => !this.selectedNotificationTypes.includes(type)) |
||||
|
.filter(type => value ? type.toUpperCase().startsWith(value.toUpperCase()) : true); |
||||
|
}) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
public update() { |
||||
|
this.data.notificationTypesUpdated(this.selectedNotificationTypes); |
||||
|
if (this.overlayRef) { |
||||
|
this.overlayRef.dispose(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
cancel() { |
||||
|
if (this.overlayRef) { |
||||
|
this.overlayRef.dispose(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public reset() { |
||||
|
this.selectedNotificationTypes.length = 0; |
||||
|
this.searchControlName.updateValueAndValidity({emitEvent: true}); |
||||
|
} |
||||
|
|
||||
|
remove(type: NotificationType) { |
||||
|
const index = this.selectedNotificationTypes.indexOf(type); |
||||
|
if (index >= 0) { |
||||
|
this.selectedNotificationTypes.splice(index, 1); |
||||
|
this.searchControlName.updateValueAndValidity({emitEvent: true}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
onFocus() { |
||||
|
if (this.dirty) { |
||||
|
this.searchControlName.updateValueAndValidity({emitEvent: true}); |
||||
|
this.dirty = false; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private add(type: NotificationType): void { |
||||
|
this.selectedNotificationTypes.push(type); |
||||
|
} |
||||
|
|
||||
|
chipAdd(event: MatChipInputEvent): void { |
||||
|
const value = (event.value || '').trim(); |
||||
|
if (value && this.notificationType[value]) { |
||||
|
this.add(this.notificationType[value]); |
||||
|
this.clear(''); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
selected(event: MatAutocompleteSelectedEvent): void { |
||||
|
if (this.notificationType[event.option.value]) { |
||||
|
this.add(this.notificationType[event.option.value]); |
||||
|
} |
||||
|
this.clear(''); |
||||
|
} |
||||
|
|
||||
|
clear(value: string = '') { |
||||
|
this.notificationTypeInput.nativeElement.value = value; |
||||
|
this.searchControlName.patchValue(value, {emitEvent: true}); |
||||
|
setTimeout(() => { |
||||
|
this.notificationTypeInput.nativeElement.blur(); |
||||
|
this.notificationTypeInput.nativeElement.focus(); |
||||
|
}, 0); |
||||
|
} |
||||
|
|
||||
|
displayTypeFn(type?: string): string | undefined { |
||||
|
return type ? type : undefined; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,54 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2024 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. |
||||
|
|
||||
|
--> |
||||
|
<div class="tb-unread-notification-panel" [style.padding]="padding" [style]="backgroundStyle$ | async"> |
||||
|
<div class="tb-unread-notification-overlay" [style]="overlayStyle"></div> |
||||
|
<ng-template #counter> |
||||
|
<div *ngIf="showCounter" class="notification-counter" [style.background-color]="counterBackground"> |
||||
|
<span class="notification-counter-value" [style]="counterValueStyle">{{ count$ | async }}</span> |
||||
|
</div> |
||||
|
</ng-template> |
||||
|
<ng-container *ngTemplateOutlet="widgetTitlePanel; context:{ titleSuffixTemplate: counter }"></ng-container> |
||||
|
|
||||
|
<div class="tb-unread-notification-content"> |
||||
|
<ng-container *ngIf="loadNotification; else loadingNotification"> |
||||
|
<div *ngIf="notifications.length; else emptyNotification" style="overflow: auto; width: 100%;"> |
||||
|
<section style="min-height: 100px; overflow: auto; padding: 6px 0;"> |
||||
|
<div *ngFor="let notification of notifications; let last = last; trackBy: trackById"> |
||||
|
<tb-notification [notification]="notification" |
||||
|
(markAsRead)="markAsRead($event)"> |
||||
|
</tb-notification> |
||||
|
</div> |
||||
|
</section> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
<ng-template #emptyNotification> |
||||
|
<div class="tb-no-notification-svg-color" style="height: 85%;"> |
||||
|
<svg height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 149 156" width="100%"> |
||||
|
<use [attr.xlink:href]="'assets/notification-bell.svg#CHECK_ICON'"></use> |
||||
|
</svg> |
||||
|
</div> |
||||
|
<span class="tb-no-notification-text" translate>notification.no-notifications-yet</span> |
||||
|
</ng-template> |
||||
|
<ng-template #loadingNotification> |
||||
|
<div class="tb-no-data-available" style="margin: 20px; gap: 16px;"> |
||||
|
<mat-spinner color="accent" diameter="65" strokeWidth="4"></mat-spinner> |
||||
|
<div class="tb-no-data-text" translate>notification.loading-notifications</div> |
||||
|
</div> |
||||
|
</ng-template> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,65 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2024 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 "../../../../../../../scss/constants"; |
||||
|
|
||||
|
.tb-no-notification-svg-color { |
||||
|
color: $tb-primary-color; |
||||
|
} |
||||
|
|
||||
|
.tb-unread-notification-panel { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 8px; |
||||
|
padding: 20px 24px 24px 24px; |
||||
|
> div:not(.tb-unread-notification-overlay) { |
||||
|
z-index: 1; |
||||
|
} |
||||
|
div.tb-widget-title { |
||||
|
padding: 0; |
||||
|
} |
||||
|
.tb-unread-notification-overlay { |
||||
|
position: absolute; |
||||
|
top: 12px; |
||||
|
left: 12px; |
||||
|
bottom: 12px; |
||||
|
right: 12px; |
||||
|
} |
||||
|
.tb-unread-notification-content { |
||||
|
height: 100%; |
||||
|
min-height: 0; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
.tb-no-notification-text { |
||||
|
text-align: center; |
||||
|
margin-bottom: 12px; |
||||
|
color: rgba(0, 0, 0, 0.38); |
||||
|
} |
||||
|
} |
||||
|
.notification-counter { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 24px; |
||||
|
height: 22px; |
||||
|
background-color: green; |
||||
|
border-radius: 7px; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,284 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 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 { |
||||
|
ChangeDetectorRef, |
||||
|
Component, |
||||
|
Injector, |
||||
|
Input, |
||||
|
NgZone, |
||||
|
OnDestroy, |
||||
|
OnInit, |
||||
|
StaticProvider, |
||||
|
TemplateRef, |
||||
|
ViewContainerRef, |
||||
|
ViewEncapsulation |
||||
|
} from '@angular/core'; |
||||
|
import { WidgetAction, WidgetContext } from '@home/models/widget-component.models'; |
||||
|
import { isDefined } from '@core/utils'; |
||||
|
import { backgroundStyle, ComponentStyle, overlayStyle, textStyle } from '@shared/models/widget-settings.models'; |
||||
|
import { ResizeObserver } from '@juggle/resize-observer'; |
||||
|
import { BehaviorSubject, fromEvent, Observable, ReplaySubject, Subscription } from 'rxjs'; |
||||
|
import { ImagePipe } from '@shared/pipe/image.pipe'; |
||||
|
import { DomSanitizer } from '@angular/platform-browser'; |
||||
|
import { |
||||
|
unreadNotificationDefaultSettings, |
||||
|
UnreadNotificationWidgetSettings |
||||
|
} from '@home/components/widget/lib/cards/unread-notification-widget.models'; |
||||
|
import { Notification, NotificationRequest, NotificationType } from '@shared/models/notification.models'; |
||||
|
import { NotificationSubscriber } from '@shared/models/telemetry/telemetry.models'; |
||||
|
import { NotificationWebsocketService } from '@core/ws/notification-websocket.service'; |
||||
|
import { distinctUntilChanged, map, share, skip, take, tap } from 'rxjs/operators'; |
||||
|
import { Router } from '@angular/router'; |
||||
|
import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay'; |
||||
|
import { DEFAULT_OVERLAY_POSITIONS } from '@shared/models/overlay.models'; |
||||
|
import { ComponentPortal } from '@angular/cdk/portal'; |
||||
|
import { |
||||
|
NOTIFICATION_TYPE_FILTER_PANEL_DATA, |
||||
|
NotificationTypeFilterPanelComponent |
||||
|
} from '@home/components/widget/lib/cards/notification-type-filter-panel.component'; |
||||
|
import { selectUserDetails } from '@core/auth/auth.selectors'; |
||||
|
import { select, Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-unread-notification-widget', |
||||
|
templateUrl: './unread-notification-widget.component.html', |
||||
|
styleUrls: ['unread-notification-widget.component.scss'], |
||||
|
encapsulation: ViewEncapsulation.None |
||||
|
}) |
||||
|
export class UnreadNotificationWidgetComponent implements OnInit, OnDestroy { |
||||
|
|
||||
|
settings: UnreadNotificationWidgetSettings; |
||||
|
|
||||
|
@Input() |
||||
|
ctx: WidgetContext; |
||||
|
|
||||
|
@Input() |
||||
|
widgetTitlePanel: TemplateRef<any>; |
||||
|
|
||||
|
showCounter = true; |
||||
|
counterValueStyle: ComponentStyle; |
||||
|
counterBackground: string; |
||||
|
|
||||
|
notifications: Notification[]; |
||||
|
loadNotification = false; |
||||
|
|
||||
|
backgroundStyle$: Observable<ComponentStyle>; |
||||
|
overlayStyle: ComponentStyle = {}; |
||||
|
padding: string; |
||||
|
|
||||
|
private counterValue: BehaviorSubject<number> = new BehaviorSubject(0); |
||||
|
|
||||
|
count$ = this.counterValue.asObservable().pipe( |
||||
|
distinctUntilChanged(), |
||||
|
map((value) => value >= 100 ? '99+' : value), |
||||
|
tap(() => Promise.resolve().then(() => this.cd.markForCheck())), |
||||
|
share({ |
||||
|
connector: () => new ReplaySubject(1) |
||||
|
}) |
||||
|
); |
||||
|
|
||||
|
|
||||
|
private notificationTypes: Array<NotificationType> = []; |
||||
|
|
||||
|
private notificationSubscriber: NotificationSubscriber; |
||||
|
private notificationCountSubscriber: Subscription; |
||||
|
private notification: Subscription; |
||||
|
|
||||
|
private contentResize$: ResizeObserver; |
||||
|
|
||||
|
private defaultDashboardFullscreen = false; |
||||
|
|
||||
|
private viewAllAction: WidgetAction = { |
||||
|
name: 'widgets.notification.button-view-all', |
||||
|
show: !this.defaultDashboardFullscreen, |
||||
|
icon: 'open_in_new', |
||||
|
onAction: ($event) => { |
||||
|
this.viewAll($event); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
private filterAction: WidgetAction = { |
||||
|
name: 'widgets.notification.button-filter', |
||||
|
show: true, |
||||
|
icon: 'filter_list', |
||||
|
onAction: ($event) => { |
||||
|
this.editNotificationTypeFilter($event); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
private markAsReadAction: WidgetAction = { |
||||
|
name: 'widgets.notification.button-mark-read', |
||||
|
show: true, |
||||
|
icon: 'done_all', |
||||
|
onAction: ($event) => { |
||||
|
this.markAsAllRead($event); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
constructor(private store: Store<AppState>, |
||||
|
private imagePipe: ImagePipe, |
||||
|
private notificationWsService: NotificationWebsocketService, |
||||
|
private sanitizer: DomSanitizer, |
||||
|
private router: Router, |
||||
|
private zone: NgZone, |
||||
|
private overlay: Overlay, |
||||
|
private viewContainerRef: ViewContainerRef, |
||||
|
private cd: ChangeDetectorRef) { |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.ctx.$scope.unreadNotificationWidget = this; |
||||
|
this.settings = {...unreadNotificationDefaultSettings, ...this.ctx.settings}; |
||||
|
|
||||
|
this.showCounter = this.settings.showCounter; |
||||
|
this.counterValueStyle = textStyle(this.settings.counterValueFont); |
||||
|
this.counterValueStyle.color = this.settings.counterValueColor; |
||||
|
this.counterBackground = this.settings.counterColor; |
||||
|
|
||||
|
this.ctx.widgetActions = [this.viewAllAction, this.filterAction, this.markAsReadAction]; |
||||
|
|
||||
|
this.viewAllAction.show = isDefined(this.settings.enableViewAll) ? this.settings.enableViewAll : true; |
||||
|
this.store.pipe(select(selectUserDetails), take(1)).subscribe( |
||||
|
user => this.viewAllAction.show = !user.additionalInfo?.defaultDashboardFullscreen |
||||
|
); |
||||
|
this.filterAction.show = isDefined(this.settings.enableFilter) ? this.settings.enableFilter : true; |
||||
|
this.markAsReadAction.show = isDefined(this.settings.enableMarkAsRead) ? this.settings.enableMarkAsRead : true; |
||||
|
|
||||
|
this.initSubscription(); |
||||
|
|
||||
|
this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer); |
||||
|
this.overlayStyle = overlayStyle(this.settings.background.overlay); |
||||
|
this.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
ngOnDestroy() { |
||||
|
if (this.contentResize$) { |
||||
|
this.contentResize$.disconnect(); |
||||
|
} |
||||
|
this.unsubscribeSubscription(); |
||||
|
} |
||||
|
|
||||
|
private initSubscription() { |
||||
|
this.notificationSubscriber = NotificationSubscriber.createNotificationsSubscription( |
||||
|
this.notificationWsService, this.zone, this.settings.maxNotificationDisplay, this.notificationTypes); |
||||
|
this.notification = this.notificationSubscriber.notifications$.subscribe(value => { |
||||
|
if (Array.isArray(value)) { |
||||
|
this.loadNotification = true; |
||||
|
this.notifications = value; |
||||
|
this.cd.markForCheck(); |
||||
|
} |
||||
|
}); |
||||
|
this.notificationCountSubscriber = this.notificationSubscriber.notificationCount$.pipe( |
||||
|
skip(1), |
||||
|
).subscribe(value => this.counterValue.next(value)); |
||||
|
this.notificationSubscriber.subscribe(); |
||||
|
} |
||||
|
|
||||
|
private unsubscribeSubscription() { |
||||
|
this.notificationSubscriber.unsubscribe(); |
||||
|
this.notificationCountSubscriber.unsubscribe(); |
||||
|
this.notification.unsubscribe(); |
||||
|
} |
||||
|
|
||||
|
public onInit() { |
||||
|
const borderRadius = this.ctx.$widgetElement.css('borderRadius'); |
||||
|
this.overlayStyle = {...this.overlayStyle, ...{borderRadius}}; |
||||
|
this.cd.detectChanges(); |
||||
|
} |
||||
|
|
||||
|
markAsRead(id: string) { |
||||
|
const cmd = NotificationSubscriber.createMarkAsReadCommand(this.notificationWsService, [id]); |
||||
|
cmd.subscribe(); |
||||
|
} |
||||
|
|
||||
|
markAsAllRead($event: Event) { |
||||
|
if ($event) { |
||||
|
$event.stopPropagation(); |
||||
|
} |
||||
|
const cmd = NotificationSubscriber.createMarkAllAsReadCommand(this.notificationWsService); |
||||
|
cmd.subscribe(); |
||||
|
} |
||||
|
|
||||
|
viewAll($event: Event) { |
||||
|
if ($event) { |
||||
|
$event.stopPropagation(); |
||||
|
} |
||||
|
this.router.navigateByUrl(this.router.parseUrl('/notification/inbox')).then(() => {}); |
||||
|
} |
||||
|
|
||||
|
trackById(index: number, item: NotificationRequest): string { |
||||
|
return item.id.id; |
||||
|
} |
||||
|
|
||||
|
private editNotificationTypeFilter($event: Event) { |
||||
|
if ($event) { |
||||
|
$event.stopPropagation(); |
||||
|
} |
||||
|
const target = $event.target || $event.srcElement || $event.currentTarget; |
||||
|
const config = new OverlayConfig({ |
||||
|
panelClass: 'tb-panel-container', |
||||
|
backdropClass: 'cdk-overlay-transparent-backdrop', |
||||
|
hasBackdrop: true, |
||||
|
height: 'fit-content', |
||||
|
maxHeight: '75vh', |
||||
|
width: '100%', |
||||
|
maxWidth: 700 |
||||
|
}); |
||||
|
config.positionStrategy = this.overlay.position() |
||||
|
.flexibleConnectedTo(target as HTMLElement) |
||||
|
.withPositions(DEFAULT_OVERLAY_POSITIONS); |
||||
|
|
||||
|
const overlayRef = this.overlay.create(config); |
||||
|
overlayRef.backdropClick().subscribe(() => { |
||||
|
overlayRef.dispose(); |
||||
|
}); |
||||
|
|
||||
|
const providers: StaticProvider[] = [ |
||||
|
{ |
||||
|
provide: NOTIFICATION_TYPE_FILTER_PANEL_DATA, |
||||
|
useValue: { |
||||
|
notificationTypes: this.notificationTypes, |
||||
|
notificationTypesUpdated: (notificationTypes: Array<NotificationType>) => { |
||||
|
this.notificationTypes = notificationTypes; |
||||
|
this.unsubscribeSubscription(); |
||||
|
this.initSubscription(); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
provide: OverlayRef, |
||||
|
useValue: overlayRef |
||||
|
} |
||||
|
]; |
||||
|
|
||||
|
const injector = Injector.create({parent: this.viewContainerRef.injector, providers}); |
||||
|
const componentRef = overlayRef.attach(new ComponentPortal(NotificationTypeFilterPanelComponent, |
||||
|
this.viewContainerRef, injector)); |
||||
|
|
||||
|
const resizeWindows$ = fromEvent(window, 'resize').subscribe(() => { |
||||
|
overlayRef.updatePosition(); |
||||
|
}); |
||||
|
componentRef.onDestroy(() => { |
||||
|
resizeWindows$.unsubscribe(); |
||||
|
}); |
||||
|
|
||||
|
this.ctx.detectChanges(); |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,59 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 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 { BackgroundSettings, BackgroundType, Font } from '@shared/models/widget-settings.models'; |
||||
|
|
||||
|
export interface UnreadNotificationWidgetSettings { |
||||
|
maxNotificationDisplay: number; |
||||
|
showCounter: boolean; |
||||
|
counterValueFont: Font; |
||||
|
counterValueColor: string; |
||||
|
counterColor: string; |
||||
|
|
||||
|
enableViewAll: boolean; |
||||
|
enableFilter: boolean; |
||||
|
enableMarkAsRead: boolean; |
||||
|
background: BackgroundSettings; |
||||
|
padding: string; |
||||
|
} |
||||
|
|
||||
|
export const unreadNotificationDefaultSettings: UnreadNotificationWidgetSettings = { |
||||
|
maxNotificationDisplay: 6, |
||||
|
showCounter: true, |
||||
|
counterValueFont: { |
||||
|
family: 'Roboto', |
||||
|
size: 14, |
||||
|
sizeUnit: 'px', |
||||
|
style: 'normal', |
||||
|
weight: '600', |
||||
|
lineHeight: '' |
||||
|
}, |
||||
|
counterValueColor: '#fff', |
||||
|
counterColor: '#305680', |
||||
|
enableViewAll: true, |
||||
|
enableFilter: true, |
||||
|
enableMarkAsRead: true, |
||||
|
background: { |
||||
|
type: BackgroundType.color, |
||||
|
color: '#fff', |
||||
|
overlay: { |
||||
|
enabled: false, |
||||
|
color: 'rgba(255,255,255,0.72)', |
||||
|
blur: 3 |
||||
|
} |
||||
|
}, |
||||
|
padding: '12px' |
||||
|
}; |
||||
@ -0,0 +1,79 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2024 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. |
||||
|
|
||||
|
--> |
||||
|
<ng-container [formGroup]="unreadNotificationWidgetSettingsForm"> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widget-config.appearance</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widgets.notification.max-notification-display' | translate }}</div> |
||||
|
<mat-form-field appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput type="number" min="1" formControlName="maxNotificationDisplay" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widget-config.appearance</div> |
||||
|
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="enableFilter"> |
||||
|
{{ 'widgets.notification.type-filter' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="enableMarkAsRead"> |
||||
|
{{ 'widgets.notification.button-mark-read' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="enableViewAll"> |
||||
|
{{ 'widgets.notification.button-view-all' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-row no-padding no-border"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="showCounter"> |
||||
|
{{ 'widgets.notification.counter' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widgets.notification.counter-value' | translate }}</div> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<tb-font-settings formControlName="counterValueFont" |
||||
|
clearButton |
||||
|
[previewText]="unreadNotificationWidgetSettingsForm.get('maxNotificationDisplay').value.toString()" |
||||
|
[initialPreviewStyle]="widgetConfig.config.titleStyle"> |
||||
|
</tb-font-settings> |
||||
|
<tb-color-input asBoxInput |
||||
|
formControlName="counterValueColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widgets.notification.counter-color' | translate }}</div> |
||||
|
<tb-color-input asBoxInput |
||||
|
formControlName="counterColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widgets.background.background' | translate }}</div> |
||||
|
<tb-background-settings formControlName="background"> |
||||
|
</tb-background-settings> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widget-config.card-padding' | translate }}</div> |
||||
|
<mat-form-field appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</ng-container> |
||||
@ -0,0 +1,81 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 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 { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; |
||||
|
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { unreadNotificationDefaultSettings } from '@home/components/widget/lib/cards/unread-notification-widget.models'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-unread-notification-widget-settings', |
||||
|
templateUrl: './unread-notification-widget-settings.component.html', |
||||
|
styleUrls: ['./../widget-settings.scss'] |
||||
|
}) |
||||
|
export class UnreadNotificationWidgetSettingsComponent extends WidgetSettingsComponent { |
||||
|
|
||||
|
unreadNotificationWidgetSettingsForm: UntypedFormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: UntypedFormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): UntypedFormGroup { |
||||
|
return this.unreadNotificationWidgetSettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return {...unreadNotificationDefaultSettings}; |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
this.unreadNotificationWidgetSettingsForm = this.fb.group({ |
||||
|
maxNotificationDisplay: [settings?.maxNotificationDisplay, [Validators.required, Validators.min(1)]], |
||||
|
showCounter: [settings?.showCounter, []], |
||||
|
counterValueFont: [settings?.counterValueFont, []], |
||||
|
counterValueColor: [settings?.counterValueColor, []], |
||||
|
counterColor: [settings?.counterColor, []], |
||||
|
|
||||
|
enableViewAll: [settings?.enableViewAll, []], |
||||
|
enableFilter: [settings?.enableFilter, []], |
||||
|
enableMarkAsRead: [settings?.enableMarkAsRead, []], |
||||
|
|
||||
|
background: [settings?.background, []], |
||||
|
padding: [settings.padding, []] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
protected validatorTriggers(): string[] { |
||||
|
return ['showCounter']; |
||||
|
} |
||||
|
|
||||
|
protected updateValidators(emitEvent: boolean) { |
||||
|
const showCounter: boolean = this.unreadNotificationWidgetSettingsForm.get('showCounter').value; |
||||
|
|
||||
|
if (showCounter) { |
||||
|
this.unreadNotificationWidgetSettingsForm.get('counterValueFont').enable({emitEvent}); |
||||
|
this.unreadNotificationWidgetSettingsForm.get('counterValueColor').enable({emitEvent}); |
||||
|
this.unreadNotificationWidgetSettingsForm.get('counterColor').enable({emitEvent}); |
||||
|
} else { |
||||
|
this.unreadNotificationWidgetSettingsForm.get('counterValueFont').disable({emitEvent}); |
||||
|
this.unreadNotificationWidgetSettingsForm.get('counterValueColor').disable({emitEvent}); |
||||
|
this.unreadNotificationWidgetSettingsForm.get('counterColor').disable({emitEvent}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 3.0 KiB |
Loading…
Reference in new issue