UI: Minor improvement notification settings

This commit is contained in:
Vladyslav_Prykhodko 2024-01-12 12:46:04 +02:00
parent 7fd9d2955b
commit a68b12bdd5
3 changed files with 56 additions and 58 deletions

View File

@ -28,67 +28,63 @@
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<mat-card-content> <mat-card-content>
<form [formGroup]="smsProvider" (ngSubmit)="save()"> <form [formGroup]="smsProvider" (ngSubmit)="save()">
<fieldset [disabled]="isLoading$ | async"> <tb-sms-provider-configuration
<tb-sms-provider-configuration required
required formControlName="configuration">
formControlName="configuration"> </tb-sms-provider-configuration>
</tb-sms-provider-configuration> <div fxLayout="row" fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end" fxLayoutGap="16px">
<div fxLayout="row" fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end" fxLayoutGap="16px"> <button mat-raised-button type="button"
<button mat-raised-button type="button" [disabled]="(isLoading$ | async) || smsProvider.invalid" (click)="sendTestSms()">
[disabled]="(isLoading$ | async) || smsProvider.invalid" (click)="sendTestSms()"> {{'admin.send-test-sms' | translate}}
{{'admin.send-test-sms' | translate}} </button>
</button> <button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || smsProvider.invalid || !smsProvider.dirty"
<button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || smsProvider.invalid || !smsProvider.dirty" type="submit">{{'action.save' | translate}}
type="submit">{{'action.save' | translate}} </button>
</button> </div>
</div>
</fieldset>
</form> </form>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<form [formGroup]="notificationSettingsForm" (ngSubmit)="saveNotification()"> <form [formGroup]="notificationSettingsForm" (ngSubmit)="saveNotification()">
<fieldset [disabled]="isLoading$ | async" formGroupName="deliveryMethodsConfigs"> <mat-card appearance="outlined" class="settings-card" formGroupName="deliveryMethodsConfigs">
<mat-card appearance="outlined" class="settings-card"> <mat-card-header>
<mat-card-header> <mat-card-title>
<mat-card-title> <span class="mat-headline-5" translate>admin.slack-settings</span>
<span class="mat-headline-5" translate>admin.slack-settings</span> </mat-card-title>
</mat-card-title> <span fxFlex></span>
<span fxFlex></span> <div tb-help="slackSettings"></div>
<div tb-help="slackSettings"></div> </mat-card-header>
</mat-card-header> <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> </mat-progress-bar>
</mat-progress-bar> <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> <mat-card-content formGroupName="SLACK">
<mat-card-content formGroupName="SLACK"> <mat-form-field class="mat-block" subscriptSizing="dynamic">
<mat-form-field class="mat-block" subscriptSizing="dynamic"> <mat-label translate>admin.slack-api-token</mat-label>
<mat-label translate>admin.slack-api-token</mat-label> <input matInput formControlName="botToken"/>
<input matInput formControlName="botToken"/> </mat-form-field>
</mat-form-field> </mat-card-content>
</mat-card-content> <mat-card-header *ngIf="isSysAdmin()">
<mat-card-header *ngIf="isSysAdmin()"> <mat-card-title>
<mat-card-title> <span class="mat-headline-5" translate>admin.mobile-settings</span>
<span class="mat-headline-5" translate>admin.mobile-settings</span> </mat-card-title>
</mat-card-title> <span fxFlex></span>
<span fxFlex></span> <!-- <div tb-help="mobileSettings"></div>-->
<!-- <div tb-help="mobileSettings"></div>--> </mat-card-header>
</mat-card-header> <mat-card-content formGroupName="MOBILE_APP" *ngIf="isSysAdmin()">
<mat-card-content formGroupName="MOBILE_APP" *ngIf="isSysAdmin()"> <tb-file-input formControlName="firebaseServiceAccountCredentials"
<tb-file-input formControlName="firebaseServiceAccountCredentials" dropLabel="{{ 'admin.select-firebase-service-account-file' | translate }}"
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"
accept=".json,application/json" allowedExtensions="json"
allowedExtensions="json" [existingFileName]="notificationSettingsForm.get('deliveryMethodsConfigs.MOBILE_APP.firebaseServiceAccountCredentialsFileName')?.value"
[existingFileName]="notificationSettingsForm.get('deliveryMethodsConfigs.MOBILE_APP.firebaseServiceAccountCredentialsFileName')?.value" (fileNameChanged)="notificationSettingsForm?.get('deliveryMethodsConfigs.MOBILE_APP.firebaseServiceAccountCredentialsFileName').patchValue($event)">
(fileNameChanged)="notificationSettingsForm?.get('deliveryMethodsConfigs.MOBILE_APP.firebaseServiceAccountCredentialsFileName').patchValue($event)"> </tb-file-input>
</tb-file-input> </mat-card-content>
</mat-card-content> <mat-card-actions fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end">
<mat-card-actions fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end"> <button mat-button mat-raised-button color="primary"
<button mat-button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || notificationSettingsForm.invalid || !notificationSettingsForm.dirty"
[disabled]="(isLoading$ | async) || notificationSettingsForm.invalid || !notificationSettingsForm.dirty" type="submit">{{'action.save' | translate}}
type="submit">{{'action.save' | translate}} </button>
</button> </mat-card-actions>
</mat-card-actions> </mat-card>
</mat-card>
</fieldset>
</form> </form>

View File

@ -16,6 +16,7 @@
:host { :host {
.mat-mdc-card-header { .mat-mdc-card-header {
align-items: center; align-items: center;
min-height: 64px;
} }
.mdc-card__actions { .mdc-card__actions {

View File

@ -328,6 +328,7 @@ export class SentNotificationDialogComponent extends
return '/settings/outgoing-mail'; return '/settings/outgoing-mail';
case NotificationDeliveryMethod.SMS: case NotificationDeliveryMethod.SMS:
case NotificationDeliveryMethod.SLACK: case NotificationDeliveryMethod.SLACK:
case NotificationDeliveryMethod.MOBILE_APP:
return '/settings/notifications'; return '/settings/notifications';
} }
} }