UI: Refactoring and fix notification delivery method in mobile

3 years ago · 7dd5cada35
7 changed files with 78 additions and 105 deletions
--- a/ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.html
@ -26,7 +26,7 @@
  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
  </mat-progress-bar>
  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-  <mat-card-content style="padding-top: 16px;">
+  <mat-card-content>
    <form [formGroup]="smsProvider" (ngSubmit)="save()">
      <fieldset [disabled]="isLoading$ | async">
        <tb-sms-provider-configuration
@ -46,53 +46,54 @@
    </form>
  </mat-card-content>
 </mat-card>
-<mat-card appearance="outlined" class="settings-card">
-    <mat-card-header>
-      <mat-card-title>
-        <span class="mat-headline-5" translate>admin.slack-settings</span>
-      </mat-card-title>
-      <span fxFlex></span>
-      <div tb-help="slackSettings"></div>
-    </mat-card-header>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-  <mat-card-content style="padding-top: 16px;">
-    <form [formGroup]="notificationSettingsForm" (ngSubmit)="saveNotification()">
-      <fieldset [disabled]="isLoading$ | async" formGroupName="deliveryMethodsConfigs">
+<form [formGroup]="notificationSettingsForm" (ngSubmit)="saveNotification()">
+  <fieldset [disabled]="isLoading$ | async" formGroupName="deliveryMethodsConfigs">
+    <mat-card appearance="outlined" class="settings-card">
+      <mat-card-header>
+        <mat-card-title>
+          <span class="mat-headline-5" translate>admin.slack-settings</span>
+        </mat-card-title>
+        <span fxFlex></span>
+        <div tb-help="slackSettings"></div>
+      </mat-card-header>
+      <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
+      </mat-progress-bar>
+      <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+      <mat-card-content>
        <section formGroupName="SLACK">
          <mat-form-field class="mat-block">
            <mat-label translate>admin.slack-api-token</mat-label>
-            <input matInput formControlName="botToken" />
+            <input matInput formControlName="botToken"/>
          </mat-form-field>
        </section>
-      </fieldset>
-    </form>
-  </mat-card-content>
-  <mat-card-header>
-    <mat-card-title>
-      <span class="mat-headline-5" translate>admin.mobile-settings</span>
-    </mat-card-title>
-    <span fxFlex></span>
-<!--    <div tb-help="slackSettings"></div>-->
-  </mat-card-header>
-  <mat-card-content style="padding-top: 16px;">
-    <form [formGroup]="notificationSettingsForm" (ngSubmit)="saveNotification()">
-      <fieldset [disabled]="isLoading$ | async" formGroupName="deliveryMethodsConfigs">
-        <section formGroupName="MOBILE">
-          <tb-file-input style="margin-bottom: 16px;"
-                         required
+      </mat-card-content>
+      <mat-card-header>
+        <mat-card-title>
+          <span class="mat-headline-5" translate>admin.mobile-settings</span>
+        </mat-card-title>
+        <span fxFlex></span>
+        <!--    <div tb-help="mobileSettings"></div>-->
+      </mat-card-header>
+      <mat-card-content>
+        <section formGroupName="MOBILE" style="margin-bottom: 16px;">
+          <tb-file-input required
                         formControlName="firebaseServiceAccountCredentials"
                         dropLabel="{{ 'admin.select-firebase-service-account-file' | translate }}"
-                         [label]="'admin.firebase-service-account-file' | translate">
+                         label="{{ 'admin.firebase-service-account-file' | translate }}"
+                         accept=".json,application/json"
+                         allowedExtensions="json"
+                         [existingFileName]="notificationSettingsForm.get('deliveryMethodsConfigs.MOBILE.firebaseServiceAccountCredentialsFileName')?.value"
+                         (fileNameChanged)="notificationSettingsForm?.get('deliveryMethodsConfigs.MOBILE.firebaseServiceAccountCredentialsFileName').patchValue($event)">
          </tb-file-input>
        </section>
-        <div fxLayout="row" fxLayoutAlign="end center" class="layout-wrap">
-          <button mat-button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || notificationSettingsForm.invalid || !notificationSettingsForm.dirty"
+        <div fxLayout="row" fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end">
+          <button mat-button mat-raised-button color="primary"
+                  [disabled]="(isLoading$ | async) || notificationSettingsForm.invalid || !notificationSettingsForm.dirty"
                  type="submit">{{'action.save' | translate}}
          </button>
        </div>
-      </fieldset>
-    </form>
-  </mat-card-content>
-</mat-card>
+      </mat-card-content>
+    </mat-card>
+  </fieldset>
+</form>
+
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
@ -39,13 +39,19 @@
    <mat-step [stepControl]="notificationRequestForm">
      <ng-template matStepLabel>{{ 'notification.compose' | translate }}</ng-template>
      <form [formGroup]="notificationRequestForm">
-        <div fxLayout="row" fxLayoutAlign="center">
-          <mat-button-toggle-group class="tb-notification-use-template-toggle-group"
-                                   style="width: 320px;"
-                                   formControlName="useTemplate">
-            <mat-button-toggle fxFlex [value]=false>{{ 'notification.start-from-scratch' | translate }}</mat-button-toggle>
-            <mat-button-toggle fxFlex [value]=true>{{ 'notification.use-template' | translate }}</mat-button-toggle>
-          </mat-button-toggle-group>
+        <div fxLayoutAlign="center">
+          <tb-toggle-header (valueChange)="notificationRequestForm.get('useTemplate').patchValue($event)"
+                            class="tb-notification-use-template-toggle-group"
+                            ignoreMdLgSize
+                            useSelectOnMdLg="false"
+                            appearance="fill"
+                            name="useTemplate"
+                            [options]="[
+                                         { name: translate.instant('notification.start-from-scratch'), value: false},
+                                         { name: translate.instant('notification.use-template'), value: true}
+                                       ]"
+                            [value]="notificationRequestForm.get('useTemplate').value">
+          </tb-toggle-header>
        </div>
        <div *ngIf="notificationRequestForm.get('useTemplate').value; else scratchTemplate">
          <tb-template-autocomplete
@ -413,11 +419,12 @@
        </section>
        <section class="preview-group notification" *ngIf="preview.processedTemplates.MOBILE?.enabled">
          <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
-            <mat-icon class="tb-mat-18" svgIcon="mdi:smartphone"></mat-icon>
+            <mat-icon class="tb-mat-18" svgIcon="mdi:cellphone-text"></mat-icon>
            <div class="group-title" translate>notification.delivery-method.mobile-preview</div>
          </div>
          <div class="notification-content">
-            {{ preview.processedTemplates.MOBILE.body }}
+            <div class="subject">{{ preview.processedTemplates.MOBILE.subject }}</div>
+            <div>{{ preview.processedTemplates.MOBILE.body }}</div>
          </div>
        </section>
        <section class="preview-group">
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
@ -17,7 +17,7 @@
@import "../../../../../../theme";

 :host-context(.tb-fullscreen-dialog .mat-mdc-dialog-container) {
-  width: 820px;
+  width: 930px;
  height: 100%;
  max-width: 100%;
  max-height: 100vh;
@ -76,6 +76,7 @@
    .delivery-method-container {
      display: inline-flex;
      flex: 1 1 calc(50% - 8px);
+      max-width: calc(50% - 8px);
      padding: 16px 12px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 6px;
@ -211,58 +212,8 @@
    }
  }

-  .mat-button-toggle-group.tb-notification-use-template-toggle-group {
-    &.mat-button-toggle-group-appearance-standard {
-      border: none;
-      border-radius: 18px;
-      margin-bottom: 24px;
-
-      .mat-button-toggle + .mat-button-toggle {
-        border-left: none;
-      }
-    }
-
-    .mat-button-toggle {
-      background: rgba(0, 0, 0, 0.06);
-      height: 36px;
-      align-items: center;
-      display: flex;
-
-      .mat-button-toggle-ripple {
-        top: 2px;
-        left: 2px;
-        right: 2px;
-        bottom: 2px;
-        border-radius: 18px;
-      }
-    }
-
-    .mat-button-toggle-button {
-      color: #959595;
-    }
-
-    .mat-button-toggle-focus-overlay {
-      border-radius: 18px;
-      margin: 2px;
-    }
-
-    .mat-button-toggle-checked .mat-button-toggle-button {
-      background-color: $tb-primary-color;
-      color: #fff;
-      border-radius: 18px;
-      margin-left: 2px;
-      margin-right: 2px;
-    }
-
-    .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
-      line-height: 34px;
-      font-size: 16px;
-      font-weight: 500;
-    }
-
-    .mat-button-toggle-checked.mat-button-toggle-appearance-standard:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay {
-      opacity: .01;
-    }
+  .tb-notification-use-template-toggle-group {
+    margin-bottom: 24px;
  }

  .preview-group {
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.componet.ts
+++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.componet.ts
@ -90,7 +90,7 @@ export class SentNotificationDialogComponent extends
              protected fb: FormBuilder,
              private notificationService: NotificationService,
              private dialog: MatDialog,
-              private translate: TranslateService) {
+              public translate: TranslateService) {
    super(store, router, dialogRef, fb);

    this.notificationDeliveryMethods.forEach(method => {
@ -309,13 +309,17 @@ export class SentNotificationDialogComponent extends
  }

  allowConfigureDeliveryMethod(deliveryMethod: NotificationDeliveryMethod): boolean {
+    const tenantAllowConfigureDeliveryMethod = new Set([
+      NotificationDeliveryMethod.SLACK,
+      NotificationDeliveryMethod.MOBILE
+    ]);
    if (deliveryMethod === NotificationDeliveryMethod.WEB) {
      return false;
    }
    if(this.isSysAdmin()) {
      return true;
    } else if (this.isTenantAdmin()) {
-      return deliveryMethod === NotificationDeliveryMethod.SLACK || deliveryMethod === NotificationDeliveryMethod.MOBILE;
+      return tenantAllowConfigureDeliveryMethod.has(deliveryMethod);
    }
    return false;
  }
--- a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
@ -271,6 +271,13 @@
              trigger-text="{{ 'notification.see-documentation' | translate }}"></span>
      </div>
      <form [formGroup]="mobileTemplateForm" fxLayoutGap="8px">
+        <mat-form-field class="mat-block">
+          <mat-label translate>notification.subject</mat-label>
+          <input matInput formControlName="subject">
+          <mat-error *ngIf="mobileTemplateForm.get('subject').hasError('required')">
+            {{ 'notification.subject-required' | translate }}
+          </mat-error>
+        </mat-form-field>
        <mat-form-field class="mat-block">
          <mat-label translate>notification.message</mat-label>
          <textarea matInput
--- a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss
@ -17,7 +17,7 @@
@import "../../../../../../theme";

 :host-context(.tb-fullscreen-dialog .mat-mdc-dialog-container) {
-  width: 800px;
+  width: 840px;
  height: 100%;
  max-width: 100%;
  max-height: 100vh;
@ -70,6 +70,7 @@
    .delivery-method-container {
      display: inline-flex;
      flex: 1 1 calc(50% - 8px);
+      max-width: calc(50% - 8px);
      padding: 16px 12px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 6px;
--- a/ui-ngx/src/app/shared/models/notification.models.ts
+++ b/ui-ngx/src/app/shared/models/notification.models.ts
@ -88,7 +88,8 @@ export interface NotificationSettings {
  deliveryMethodsConfigs: { [key in NotificationDeliveryMethod]: NotificationDeliveryMethodConfig };
 }

-export interface NotificationDeliveryMethodConfig extends Partial<SlackNotificationDeliveryMethodConfig & MobileNotificationDeliveryMethodConfig>{
+export interface NotificationDeliveryMethodConfig extends Partial<SlackNotificationDeliveryMethodConfig &
+  MobileNotificationDeliveryMethodConfig>{
  enabled: boolean;
  method: NotificationDeliveryMethod;
 }
@ -99,6 +100,7 @@ interface SlackNotificationDeliveryMethodConfig {

 interface MobileNotificationDeliveryMethodConfig {
  firebaseServiceAccountCredentials: string;
+  firebaseServiceAccountCredentialsFileName: string;
 }

 export interface SlackConversation {