added notifications preferences form
This commit is contained in:
Valentin
parent
0a9cd64c36
commit
406b63acf7
26
apps/red-ui/src/app/models/notification-preferences.ts
Normal file
26
apps/red-ui/src/app/models/notification-preferences.ts
Normal file
@ -0,0 +1,26 @@
|
||||
import { FormControl } from '@angular/forms';
|
||||
|
||||
export class NotificationPreferences {
|
||||
//TODO replace hardcoded values with the ones from backend when it will be done
|
||||
readonly isActive: FormControl = new FormControl(true);
|
||||
readonly sendSchedule?: FormControl;
|
||||
|
||||
readonly dossierStatusChanges: FormControl = new FormControl(true);
|
||||
readonly requestToJoinTheDossier: FormControl = new FormControl(true);
|
||||
readonly documentStatusChanges: FormControl = new FormControl(true);
|
||||
readonly documentIsSentForApproval: FormControl = new FormControl(true);
|
||||
|
||||
readonly whenIAmAssignedOnADocument: FormControl = new FormControl(true);
|
||||
readonly whenIAmUnassignedFromADocument: FormControl = new FormControl(true);
|
||||
readonly whenADocumentIsApproved: FormControl = new FormControl(true);
|
||||
|
||||
readonly whenADocumentIsSentForApproval: FormControl = new FormControl(true);
|
||||
readonly whenADocumentIsAssignedToAReviewer: FormControl = new FormControl(true);
|
||||
readonly whenAReviewerIsUnassignedFromADocument: FormControl = new FormControl(true);
|
||||
|
||||
constructor(sendSchedule?: string) {
|
||||
if (sendSchedule) {
|
||||
this.sendSchedule = new FormControl(sendSchedule);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -12,37 +12,120 @@
|
||||
<div class="heading-l" translate="notifications-screen.title"></div>
|
||||
</div>
|
||||
<form (submit)="save()" [formGroup]="formGroup">
|
||||
<!-- <div class="dialog-content">-->
|
||||
<!-- <div class="dialog-content-left">-->
|
||||
<!-- <div class="iqser-input-group required">-->
|
||||
<!-- <label translate="user-profile-screen.form.email"></label>-->
|
||||
<!-- <input formControlName="email" name="email" type="email" />-->
|
||||
<!-- </div>-->
|
||||
<div class="dialog-content">
|
||||
<div *ngFor="let category of notificationCategories" formGroupName="{{ category }}">
|
||||
<div class="iqser-input-group header w-full">
|
||||
<mat-slide-toggle color="primary" formControlName="isActive">{{
|
||||
translations[category] | translate
|
||||
}}</mat-slide-toggle>
|
||||
</div>
|
||||
|
||||
<!-- <div class="iqser-input-group">-->
|
||||
<!-- <label translate="user-profile-screen.form.first-name"></label>-->
|
||||
<!-- <input formControlName="firstName" name="firstName" type="text" />-->
|
||||
<!-- </div>-->
|
||||
<div class="options-content" *ngIf="isFormActive(category)">
|
||||
<div class="radio-container" *ngIf="getSchedule(category)">
|
||||
<div class="radio-button" *ngFor="let schedule of sendSchedules">
|
||||
<iqser-round-checkbox
|
||||
[active]="getSchedule(category).value === schedule"
|
||||
(click)="setSchedule(schedule)"
|
||||
>
|
||||
</iqser-round-checkbox>
|
||||
<span> {{ translations[schedule] | translate }} </span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="iqser-input-group">-->
|
||||
<!-- <label translate="user-profile-screen.form.last-name"></label>-->
|
||||
<!-- <input formControlName="lastName" name="lastName" type="text" />-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="iqser-input-group">-->
|
||||
<!-- <label translate="top-bar.navigation-items.my-account.children.language.label"></label>-->
|
||||
<!-- <mat-select formControlName="language">-->
|
||||
<!-- <mat-option *ngFor="let language of languages" [value]="language">-->
|
||||
<!-- {{ translations[language] | translate }}-->
|
||||
<!-- </mat-option>-->
|
||||
<!-- </mat-select>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="iqser-input-group">-->
|
||||
<!-- <a [href]="changePasswordUrl" target="_blank">-->
|
||||
<!-- {{ 'user-profile-screen.actions.change-password' | translate }}</a-->
|
||||
<!-- >-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<div class="statement" translate="notifications-screen.options-title"></div>
|
||||
|
||||
<div class="group">
|
||||
<div class="group-title" translate="notifications-screen.groups.dossiers-you-own"></div>
|
||||
<div class="iqser-input-group">
|
||||
<mat-checkbox
|
||||
color="primary"
|
||||
formControlName="dossierStatusChanges"
|
||||
name="dossierStatusChanges"
|
||||
>
|
||||
{{ 'notifications-screen.options.dossier-status-changes' | translate }}
|
||||
</mat-checkbox>
|
||||
<mat-checkbox
|
||||
color="primary"
|
||||
formControlName="requestToJoinTheDossier"
|
||||
name="requestToJoinTheDossier"
|
||||
>
|
||||
{{ 'notifications-screen.options.request-to-join-the-dossier' | translate }}
|
||||
</mat-checkbox>
|
||||
<mat-checkbox
|
||||
color="primary"
|
||||
formControlName="documentStatusChanges"
|
||||
name="documentStatusChanges"
|
||||
>
|
||||
{{ 'notifications-screen.options.document-status-changes' | translate }}
|
||||
</mat-checkbox>
|
||||
<mat-checkbox
|
||||
color="primary"
|
||||
formControlName="documentIsSentForApproval"
|
||||
name="documentIsSentForApproval"
|
||||
>
|
||||
{{ 'notifications-screen.options.document-is-sent-for-approval' | translate }}
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div class="group-title" translate="notifications-screen.groups.dossiers-you-are-reviewer-on"></div>
|
||||
<div class="iqser-input-group">
|
||||
<mat-checkbox
|
||||
color="primary"
|
||||
formControlName="whenIAmAssignedOnADocument"
|
||||
name="whenIAmAssignedOnADocument"
|
||||
>
|
||||
{{ 'notifications-screen.options.when-i-am-assigned-on-a-document' | translate }}
|
||||
</mat-checkbox>
|
||||
<mat-checkbox
|
||||
color="primary"
|
||||
formControlName="whenIAmUnassignedFromADocument"
|
||||
name="whenIAmUnassignedFromADocument"
|
||||
>
|
||||
{{ 'notifications-screen.options.when-i-am-unassigned-from-a-document' | translate }}
|
||||
</mat-checkbox>
|
||||
<mat-checkbox
|
||||
color="primary"
|
||||
formControlName="whenADocumentIsApproved"
|
||||
name="whenADocumentIsApproved"
|
||||
>
|
||||
{{ 'notifications-screen.options.when-a-document-is-approved' | translate }}
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div class="group-title" translate="notifications-screen.groups.dossiers-you-are-approver-on"></div>
|
||||
<div class="iqser-input-group">
|
||||
<mat-checkbox
|
||||
color="primary"
|
||||
formControlName="whenADocumentIsSentForApproval"
|
||||
name="whenADocumentIsSentForApproval"
|
||||
>
|
||||
{{ 'notifications-screen.options.when-a-document-is-sent-for-approval' | translate }}
|
||||
</mat-checkbox>
|
||||
<mat-checkbox
|
||||
color="primary"
|
||||
formControlName="whenADocumentIsAssignedToAReviewer"
|
||||
name="whenADocumentIsAssignedToAReviewer"
|
||||
>
|
||||
{{ 'notifications-screen.options.when-a-document-is-assigned-to-a-reviewer' | translate }}
|
||||
</mat-checkbox>
|
||||
<mat-checkbox
|
||||
color="primary"
|
||||
formControlName="whenAReviewerIsUnassignedFromADocument"
|
||||
name="whenAReviewerIsUnassignedFromADocument"
|
||||
>
|
||||
{{
|
||||
'notifications-screen.options.when-a-reviewer-is-unassigned-from-a-document' | translate
|
||||
}}
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dialog-actions">
|
||||
<button [disabled]="formGroup.invalid" color="primary" mat-flat-button type="submit">
|
||||
|
||||
@ -1,16 +1,65 @@
|
||||
@use 'variables';
|
||||
@use 'common-mixins';
|
||||
|
||||
.dialog {
|
||||
width: 100%;
|
||||
min-height: unset;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
background-color: variables.$grey-2;
|
||||
justify-content: center;
|
||||
@include common-mixins.scroll-bar;
|
||||
overflow: auto;
|
||||
|
||||
.dialog {
|
||||
width: 100%;
|
||||
min-height: unset;
|
||||
|
||||
.dialog-content {
|
||||
flex-direction: column;
|
||||
|
||||
.header {
|
||||
grid-column: span 2;
|
||||
padding: 10px 10px;
|
||||
margin-bottom: -1px;
|
||||
border-top: 1px solid variables.$separator;
|
||||
border-bottom: 1px solid variables.$separator;
|
||||
}
|
||||
|
||||
.options-content {
|
||||
padding: 10px 48px;
|
||||
|
||||
.statement {
|
||||
opacity: 0.7;
|
||||
color: variables.$grey-1;
|
||||
font-weight: 500;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.radio-container {
|
||||
display: flex;
|
||||
padding: 10px 0 10px;
|
||||
.radio-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 30px;
|
||||
iqser-round-checkbox {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.group {
|
||||
padding: 10px 0;
|
||||
|
||||
.group-title {
|
||||
color: variables.$grey-1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.iqser-input-group {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.full-height {
|
||||
|
||||
@ -1,5 +1,13 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { FormBuilder, FormGroup } from '@angular/forms';
|
||||
import { notificationsTranslations } from '../../translations/notifications-translations';
|
||||
import { NotificationPreferences } from '../../../../models/notification-preferences';
|
||||
|
||||
enum SendSchedule {
|
||||
INSTANT = 'instant',
|
||||
DAILY = 'daily',
|
||||
WEEKLY = 'weekly'
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'redaction-notifications-screen',
|
||||
@ -7,10 +15,30 @@ import { FormBuilder, FormGroup } from '@angular/forms';
|
||||
styleUrls: ['./notifications-screen.component.scss']
|
||||
})
|
||||
export class NotificationsScreenComponent {
|
||||
readonly sendSchedules = ['instant', 'daily', 'weekly'];
|
||||
readonly notificationCategories = ['inAppNotifications', 'emailNotifications'];
|
||||
|
||||
readonly translations = notificationsTranslations;
|
||||
|
||||
formGroup: FormGroup;
|
||||
|
||||
constructor(private readonly _formBuilder: FormBuilder) {
|
||||
this.formGroup = this._formBuilder.group({});
|
||||
this.formGroup = this._formBuilder.group({
|
||||
inAppNotifications: new FormGroup(new NotificationPreferences() as any),
|
||||
emailNotifications: new FormGroup(new NotificationPreferences(SendSchedule.INSTANT) as any)
|
||||
});
|
||||
}
|
||||
|
||||
setSchedule(schedule: string) {
|
||||
this.formGroup.get('emailNotifications').get('sendSchedule').setValue(schedule);
|
||||
}
|
||||
|
||||
isFormActive(category: string) {
|
||||
return this.formGroup.get(category).get('isActive').value;
|
||||
}
|
||||
|
||||
getSchedule(category: string) {
|
||||
return this.formGroup.get(category).get('sendSchedule');
|
||||
}
|
||||
|
||||
save() {}
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
|
||||
|
||||
export const notificationsTranslations: { [key: string]: string } = {
|
||||
instant: _('notifications-screen.schedule.instant'),
|
||||
daily: _('notifications-screen.schedule.daily'),
|
||||
weekly: _('notifications-screen.schedule.weekly'),
|
||||
inAppNotifications: _('notifications-screen.category.in-app-notifications'),
|
||||
emailNotifications: _('notifications-screen.category.email-notifications')
|
||||
} as const;
|
||||
@ -1235,6 +1235,33 @@
|
||||
},
|
||||
"notifications": "Notifications",
|
||||
"notifications-screen": {
|
||||
"category": {
|
||||
"email-notifications": "Email Notifications",
|
||||
"in-app-notifications": "In-App Notifications"
|
||||
},
|
||||
"groups": {
|
||||
"dossiers-you-are-approver-on": "Dossiers you are approver on",
|
||||
"dossiers-you-are-reviewer-on": "Dossiers you are reviewer on",
|
||||
"dossiers-you-own": "Dossiers you own"
|
||||
},
|
||||
"options-title": "Choose on which category you want to be notified",
|
||||
"options": {
|
||||
"document-is-sent-for-approval": "Document is sent for approval",
|
||||
"document-status-changes": "Document status changes",
|
||||
"dossier-status-changes": "Dossier status changes",
|
||||
"request-to-join-the-dossier": "Request to join the dossier",
|
||||
"when-a-document-is-approved": "When a document is approved",
|
||||
"when-a-document-is-assigned-to-a-reviewer": "When a document is assigned to a reviewer",
|
||||
"when-a-document-is-sent-for-approval": "When a document is sent for approval",
|
||||
"when-a-reviewer-is-unassigned-from-a-document": "When a reviewer is unassigned from a document",
|
||||
"when-i-am-assigned-on-a-document": "When I am assigned on a document",
|
||||
"when-i-am-unassigned-from-a-document": "When I am unassigned from a document"
|
||||
},
|
||||
"schedule": {
|
||||
"daily": "Daily Summary",
|
||||
"instant": "Instant",
|
||||
"weekly": "Weekly Summary"
|
||||
},
|
||||
"title": "Notifications Preferences"
|
||||
},
|
||||
"overwrite-files-dialog": {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user