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

Merge pull request #10324 from vvlladd28/improvement/notification-mobile/add-icon

Browse Source 
Add icon to configure mobile app notification
This commit is contained in:
Igor Kulikov 2024-03-07 17:52:34 +02:00 committed by GitHub
commit af616fa786
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 45 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.html
View File

@ -120,7 +120,21 @@
}}
</mat-error>
</mat-form-field>
<div formGroupName="additionalConfig">
<div formGroupName="additionalConfig" class="tb-form-panel no-padding no-border">
<div class="tb-form-row space-between" formGroupName="icon">
<mat-slide-toggle formControlName="enabled" class="mat-slide">
{{ 'icon.icon' | translate }}
</mat-slide-toggle>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<tb-material-icon-select asBoxInput
[color]="templateConfigurationForm.get('MOBILE_APP.additionalConfig.icon.color').value"
formControlName="icon">
</tb-material-icon-select>
<tb-color-input asBoxInput
formControlName="color">
</tb-color-input>
</div>
</div>
<tb-notification-action-button-configuration
formControlName="onClick"
hideButtonText

33
ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.ts
View File

@ -34,7 +34,7 @@ import {
} from '@shared/models/notification.models';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { isDefinedAndNotNull } from '@core/utils';
import { deepClone, isDefinedAndNotNull } from '@core/utils';
import { coerceBoolean } from '@shared/decorators/coercion';
import { TranslateService } from '@ngx-translate/core';
@ -112,8 +112,16 @@ export class NotificationTemplateConfigurationComponent implements OnDestroy, Co
this.destroy$.complete();
}
writeValue(value: any) {
this.templateConfigurationForm.patchValue(value, {emitEvent: false});
writeValue(value: Partial<DeliveryMethodsTemplates>) {
const settings = deepClone(value);
if (isDefinedAndNotNull(settings)) {
for (const method of Object.values(NotificationDeliveryMethod)) {
if (isDefinedAndNotNull(settings[method]?.enabled)) {
delete settings[method].enabled;
}
}
}
this.templateConfigurationForm.patchValue(settings, {emitEvent: false});
}
registerOnChange(fn: any): void {
@ -160,6 +168,9 @@ export class NotificationTemplateConfigurationComponent implements OnDestroy, Co
case NotificationDeliveryMethod.WEB:
form.get('additionalConfig.icon.enabled').updateValueAndValidity({onlySelf: true});
break;
case NotificationDeliveryMethod.MOBILE_APP:
form.get('additionalConfig.icon.enabled').updateValueAndValidity({onlySelf: true});
break;
}
}
});
@ -225,9 +236,25 @@ export class NotificationTemplateConfigurationComponent implements OnDestroy, Co
subject: ['', [Validators.required, Validators.maxLength(50)]],
body: ['', [Validators.required, Validators.maxLength(150)]],
additionalConfig: this.fb.group({
icon: this.fb.group({
enabled: [false],
icon: [{value: 'notifications', disabled: true}, Validators.required],
color: [{value: '#757575', disabled: true}]
}),
onClick: [null]
})
});
deliveryMethodForm.get('additionalConfig.icon.enabled').valueChanges.pipe(
takeUntil(this.destroy$)
).subscribe((value) => {
if (value) {
deliveryMethodForm.get('additionalConfig.icon.icon').enable({emitEvent: false});
deliveryMethodForm.get('additionalConfig.icon.color').enable({emitEvent: false});
} else {
deliveryMethodForm.get('additionalConfig.icon.icon').disable({emitEvent: false});
deliveryMethodForm.get('additionalConfig.icon.color').disable({emitEvent: false});
}
});
break;
case NotificationDeliveryMethod.MICROSOFT_TEAMS:
deliveryMethodForm = this.fb.group({