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

Add icon to configure mobile app notification

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

@@ -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

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

@@ -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) {
+  writeValue(value: Partial<DeliveryMethodsTemplates>) {
-    this.templateConfigurationForm.patchValue(value, {emitEvent: false});
+    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({