From 813b887cfba4cc6ae1f36b87929a8c02cef9fbb6 Mon Sep 17 00:00:00 2001 From: Dan Percic Date: Thu, 8 Apr 2021 13:07:26 +0300 Subject: [PATCH] refactor user profile --- .../user-profile-screen.component.html | 56 ++++++++----------- .../user-profile-screen.component.scss | 32 +---------- .../user-profile-screen.component.ts | 54 ++++++++++++------ .../smtp-config-screen.component.scss | 28 ---------- .../src/assets/styles/red-page-layout.scss | 28 ++++++++++ 5 files changed, 87 insertions(+), 111 deletions(-) diff --git a/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.html b/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.html index 2bdd2b1f3..ecd08b43d 100644 --- a/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.html +++ b/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.html @@ -1,51 +1,39 @@ -
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
+ +
+
+
- +
-
+
- +
-
+
- +
-
+
- - - {{('top-bar.navigation-items.my-account.children.language.' + language) | translate}} + + + {{ 'top-bar.navigation-items.my-account.children.language.' + language | translate }}
-
-
@@ -54,4 +42,4 @@
- + diff --git a/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.scss b/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.scss index f68f276d4..b0efc79c6 100644 --- a/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.scss +++ b/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.scss @@ -1,40 +1,10 @@ @import '../../../assets/styles/red-mixins'; .left-container { - width: 100vw; background-color: $grey-2; - display: flex; justify-content: center; @include scroll-bar; overflow: auto; - - .dialog { - border-radius: 8px; - margin-top: 40px; - margin-bottom: 70px; - background-color: $white; - max-width: 650px; - height: fit-content; - box-shadow: 0 1px 5px 0 rgba(40, 50, 65, 0.19); - position: unset; - - .heading-l { - margin-bottom: 16px; - } - - .dialog-content { - display: flex; - - .dialog-content-left { - min-width: 300px; - margin-right: 64px; - } - - .link-action { - margin-top: 8px; - } - } - } } .full-height { @@ -43,6 +13,6 @@ position: absolute; bottom: 0; width: 100%; - height: calc(100% - 50px); + height: calc(100% + 50px); z-index: 1; } diff --git a/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.ts b/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.ts index e10a2252b..4967e06a0 100644 --- a/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.ts +++ b/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.ts @@ -44,17 +44,15 @@ export class UserProfileScreenComponent implements OnInit { this._loadData(); } - private _loadData() { + private _loadData(): void { try { this._user = this._userService.getUserById(this._userService.userId); - console.log(this._userService.allUsers); this._initialValue = { email: this._user.email, firstName: this._user.firstName, lastName: this._user.lastName, language: this._languageService.currentLanguage }; - console.log(this._initialValue); this.formGroup.patchValue(this._initialValue, { emitEvent: false }); } catch (e) { } finally { @@ -62,8 +60,21 @@ export class UserProfileScreenComponent implements OnInit { } } - public changeLanguage(language: string): void { - this._languageService.changeLanguage(language); + public get languageChanged(): boolean { + return this._initialValue['language'] !== this.formGroup.get('language').value; + } + + public get profileChanged(): boolean { + const keys = Object.keys(this.formGroup.getRawValue()); + keys.splice(keys.indexOf('language'), 1); + + for (const key of keys) { + if (this._initialValue[key] !== this.formGroup.get(key).value) { + return true; + } + } + + return false; } public get languages(): string[] { @@ -72,20 +83,27 @@ export class UserProfileScreenComponent implements OnInit { public async save(): Promise { this.viewReady = false; - const value = this.formGroup.getRawValue() as ProfileModel; - this.changeLanguage(value.language); - delete value.language; - await this._userControllerService - .updateProfile( - { - ...value, - roles: this._user.roles - }, - this._user.userId - ) - .toPromise(); - this._initialValue = this.formGroup.getRawValue(); + if (this.languageChanged) { + this._languageService.changeLanguage(this.formGroup.get('language').value); + } + + if (this.profileChanged) { + const value = this.formGroup.value as ProfileModel; + delete value.language; + + await this._userControllerService + .updateProfile( + { + ...value, + roles: this._user.roles + }, + this._user.userId + ) + .toPromise(); + } + + this._initialValue = this.formGroup.value; this.viewReady = true; } } diff --git a/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.scss index 32d693e2d..3447b574d 100644 --- a/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.scss +++ b/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.scss @@ -8,34 +8,6 @@ justify-content: center; @include scroll-bar; overflow: auto; - - .dialog { - border-radius: 8px; - margin-top: 40px; - margin-bottom: 70px; - background-color: $white; - max-width: 650px; - height: fit-content; - box-shadow: 0 1px 5px 0 rgba(40, 50, 65, 0.19); - position: unset; - - .heading-l { - margin-bottom: 16px; - } - - .dialog-content { - display: flex; - - .dialog-content-left { - min-width: 300px; - margin-right: 64px; - } - - .link-action { - margin-top: 8px; - } - } - } } .w-100 { diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss index f26f6bcf2..9d8de2063 100644 --- a/apps/red-ui/src/assets/styles/red-page-layout.scss +++ b/apps/red-ui/src/assets/styles/red-page-layout.scss @@ -120,6 +120,34 @@ body { } } + .dialog { + border-radius: 8px; + margin-top: 40px; + margin-bottom: 70px; + background-color: $white; + max-width: 650px; + height: fit-content; + box-shadow: 0 1px 5px 0 rgba(40, 50, 65, 0.19); + position: unset; + + .heading-l { + margin-bottom: 16px; + } + + .dialog-content { + display: flex; + + .dialog-content-left { + min-width: 300px; + margin-right: 64px; + } + + .link-action { + margin-top: 8px; + } + } + } + @media only screen and (max-width: 1600px) { redaction-initials-avatar .username:not(.always-visible) { display: none;