WIP on Notifications Preferences

apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen.component.html

@@ -5,7 +5,53 @@
 
     <div>
         <div class="red-content-inner">
-            <div class="content-container"></div>
+            <div class="content-container full-height">
+                <div class="overlay-shadow"></div>
+                <div class="dialog">
+                    <div class="dialog-header">
+                        <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="iqser-input-group">-->
+                        <!--                                    <label translate="user-profile-screen.form.first-name"></label>-->
+                        <!--                                    <input formControlName="firstName" name="firstName" type="text" />-->
+                        <!--                                </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="dialog-actions">
+                            <button [disabled]="formGroup.invalid" color="primary" mat-flat-button type="submit">
+                                {{ 'user-profile-screen.actions.save' | translate }}
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
         </div>
     </div>
 </section>

apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen.component.scss

@@ -0,0 +1,24 @@
+@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;
+}
+
+.full-height {
+    display: flex;
+    flex-direction: row;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: calc(100% + 50px);
+    z-index: 1;
+}

apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen.component.ts

@@ -1,8 +1,17 @@
 import { Component } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
 
 @Component({
     selector: 'redaction-notifications-screen',
     templateUrl: './notifications-screen.component.html',
     styleUrls: ['./notifications-screen.component.scss']
 })
-export class NotificationsScreenComponent {}
+export class NotificationsScreenComponent {
+    formGroup: FormGroup;
+
+    constructor(private readonly _formBuilder: FormBuilder) {
+        this.formGroup = this._formBuilder.group({});
+    }
+
+    save() {}
+}

apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen.component.html

@@ -36,6 +36,11 @@
                                         </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>
 
@@ -48,9 +53,6 @@
                             >
                                 {{ 'user-profile-screen.actions.save' | translate }}
                             </button>
-                            <a [href]="changePasswordUrl" target="_blank">
-                                {{ 'user-profile-screen.actions.change-password' | translate }}</a
-                            >
                         </div>
                     </form>
                 </div>

apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen.component.scss

@@ -21,3 +21,7 @@
     height: calc(100% + 50px);
     z-index: 1;
 }
+
+a {
+    color: black;
+}

apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen.component.ts

@@ -4,11 +4,11 @@ import { languagesTranslations } from '../../translations/languages-translations
 import { ProfileModel, UserService } from '../../../../services/user.service';
 import { PermissionsService } from '../../../../services/permissions.service';
 import { ConfigService } from '../../../../services/config.service';
-import { UserControllerService } from '../../../../../../../../libs/red-ui-http/src';
+import { UserControllerService } from '@redaction/red-ui-http';
 import { LanguageService } from '../../../../i18n/language.service';
 import { DomSanitizer } from '@angular/platform-browser';
 import { TranslateService } from '@ngx-translate/core';
-import { LoadingService } from '../../../../../../../../libs/common-ui/src';
+import { LoadingService } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-user-profile-screen',

apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts

@@ -127,7 +127,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<File> imple
                     label: fileStatusTranslations[FileStatuses.UNASSIGNED],
                     key: FileStatuses.UNASSIGNED,
                     enterFn: this.unassignFn,
-                    enterPredicate: (entity: File) => false,
+                    enterPredicate: () => false,
                     color: '#D3D5DA'
                 },
                 {

apps/red-ui/src/assets/i18n/en.json

@@ -1233,6 +1233,10 @@
     "user-promoted-to-approver": "<b>{user}</b> promoted to approver in dossier: <b><a href=\"{dossierHref}\" target=\"_blank\">{dossierName}</a></b>!",
     "user-removed-as-dossier-member": "<b>{user}</b> removed as a member of: <b><a href=\"{dossierHref}\" target=\"_blank\">{dossierName}</a></b> !"
   },
+  "notifications": "Notifications",
+  "notifications-screen": {
+    "title": "Notifications Preferences"
+  },
   "overwrite-files-dialog": {
     "options": {
       "cancel": "Cancel all uploads",
@@ -1485,16 +1489,11 @@
     }
   },
   "user-management": "User Management",
-  "notifications": "Notifications",
-  "notifications-screen": {
-    "mark-as": "Mark as {type, select, read{read} unread{unread} other{}}",
-    "no-data": "You have no notifications."
-  },
   "user-profile": "My Profile",
   "user-profile-screen": {
     "actions": {
       "change-password": "Change Password",
-      "save": "Save profile"
+      "save": "Save Changes"
     },
     "form": {
       "email": "Email",