Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

moved user profile screen into account settings

Browse Source
This commit is contained in:
Valentin 2021-09-28 13:50:51 +03:00
parent 6e82602020
commit 19249209ba
16 changed files with 222 additions and 245 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
apps/red-ui/src/app/components/user-profile/user-profile-screen.component.html
View File

@ -1,50 +0,0 @@
<!--<section class="red-content-inner">-->
<!-- <div class="content-container full-height">-->
<!-- <div class="overlay-shadow"></div>-->
<!-- <div class="dialog">-->
<!-- <div class="dialog-header">-->
<!-- <div class="heading-l" translate="user-profile.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.form.email"></label>-->
<!-- <input formControlName="email" name="email" type="email" />-->
<!-- </div>-->
<!-- <div class="iqser-input-group">-->
<!-- <label translate="user-profile.form.first-name"></label>-->
<!-- <input formControlName="firstName" name="firstName" type="text" />-->
<!-- </div>-->
<!-- <div class="iqser-input-group">-->
<!-- <label translate="user-profile.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>-->
<!-- </div>-->
<!-- <div class="dialog-actions">-->
<!-- <button-->
<!-- [disabled]="formGroup.invalid || !(profileChanged || languageChanged)"-->
<!-- color="primary"-->
<!-- mat-flat-button-->
<!-- type="submit"-->
<!-- >-->
<!-- {{ 'user-profile.actions.save' | translate }}-->
<!-- </button>-->
<!-- <a [href]="changePasswordUrl" target="_blank"> {{ 'user-profile.actions.change-password' | translate }}</a>-->
<!-- </div>-->
<!-- </form>-->
<!-- </div>-->
<!-- </div>-->
<!--</section>-->

27
apps/red-ui/src/app/components/user-profile/user-profile-screen.component.scss
View File

@ -1,27 +0,0 @@
//@use 'variables';
//@use 'common-mixins';
//
//.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;
//}
//
//iframe {
// background: white;
// width: 500px;
// height: 500px;
// position: absolute;
// z-index: 100;
//}

116
apps/red-ui/src/app/components/user-profile/user-profile-screen.component.ts
View File

@ -1,116 +0,0 @@
// import { Component, OnInit } from '@angular/core';
// import { FormBuilder, FormGroup, Validators } from '@angular/forms';
// import { ProfileModel, UserService } from '@services/user.service';
// import { PermissionsService } from '@services/permissions.service';
// import { LanguageService } from '@i18n/language.service';
// import { TranslateService } from '@ngx-translate/core';
// import { UserControllerService } from '@redaction/red-ui-http';
// import { ConfigService } from '@services/config.service';
// import { DomSanitizer } from '@angular/platform-browser';
// import { languagesTranslations } from '../../translations/languages-translations';
// import { LoadingService } from '@iqser/common-ui';
//
// @Component({
// selector: 'redaction-user-profile-screen',
// templateUrl: './user-profile-screen.component.html',
// styleUrls: ['./user-profile-screen.component.scss']
// })
// export class UserProfileScreenComponent implements OnInit {
// formGroup: FormGroup;
// changePasswordUrl: any;
// translations = languagesTranslations;
//
// private _profileModel: ProfileModel;
//
// constructor(
// readonly permissionsService: PermissionsService,
// private readonly _formBuilder: FormBuilder,
// private readonly _userService: UserService,
// private readonly _configService: ConfigService,
// private readonly _userControllerService: UserControllerService,
// private readonly _languageService: LanguageService,
// private readonly _domSanitizer: DomSanitizer,
// private readonly _translateService: TranslateService,
// private readonly _loadingService: LoadingService
// ) {
// this._loadingService.start();
// this.formGroup = this._formBuilder.group({
// email: [undefined, [Validators.required, Validators.email]],
// firstName: [undefined],
// lastName: [undefined],
// language: [undefined]
// });
//
// this.changePasswordUrl = this._domSanitizer.bypassSecurityTrustResourceUrl(
// this._configService.values.OAUTH_URL + '/account/password'
// );
// }
//
// get languageChanged(): boolean {
// return this._profileModel['language'] !== this.formGroup.get('language').value;
// }
//
// get profileChanged(): boolean {
// const keys = Object.keys(this.formGroup.getRawValue());
// keys.splice(keys.indexOf('language'), 1);
//
// for (const key of keys) {
// if (this._profileModel[key] !== this.formGroup.get(key).value) {
// return true;
// }
// }
//
// return false;
// }
//
// get languages(): string[] {
// return this._translateService.langs;
// }
//
// ngOnInit() {
// this._initializeForm();
// }
//
// async save(): Promise<void> {
// this._loadingService.start();
//
// if (this.languageChanged) {
// await this._languageService.changeLanguage(this.formGroup.get('language').value);
// }
//
// if (this.profileChanged) {
// const value = this.formGroup.value as ProfileModel;
// delete value.language;
//
// await this._userControllerService
// .updateMyProfile({
// ...value
// })
// .toPromise();
//
// await this._userService.loadCurrentUser();
// await this._userService.loadAllUsers();
// }
//
// this._initializeForm();
// }
//
// private _initializeForm(): void {
// try {
// this._profileModel = {
// email: this._userService.currentUser.email,
// firstName: this._userService.currentUser.firstName,
// lastName: this._userService.currentUser.lastName,
// language: this._languageService.currentLanguage
// };
// if (this._userService.currentUser.email) {
// // disable email if it's already set
// this.formGroup.get('email').disable();
// }
// this.formGroup.patchValue(this._profileModel, { emitEvent: false });
// } catch (e) {
// } finally {
// this._loadingService.stop();
// }
// }
// }

4
apps/red-ui/src/app/modules/account/account-routing.module.ts
View File

@ -4,8 +4,8 @@ import { CompositeRouteGuard } from '../../guards/composite-route.guard';
import { AuthGuard } from '../auth/auth.guard';
import { RedRoleGuard } from '../auth/red-role.guard';
import { AppStateGuard } from '../../state/app-state.guard';
import { NotificationsScreenComponent } from './screens/notifications/notifications.component';
import { UserProfileScreenComponent } from './screens/user-profile/user-profile.component';
import { NotificationsScreenComponent } from './screens/notifications/notifications-screen.component';
import { UserProfileScreenComponent } from './screens/user-profile/user-profile-screen.component';
const routes = [
{ path: '', redirectTo: 'user-profile', pathMatch: 'full' },

4
apps/red-ui/src/app/modules/account/account.module.ts
View File

@ -3,8 +3,8 @@ import { CommonModule } from '@angular/common';
import { SharedModule } from '../shared/shared.module';
import { AccountRoutingModule } from './account-routing.module';
import { AccountSideNavComponent } from './account-side-nav/account-side-nav.component';
import { NotificationsScreenComponent } from './screens/notifications/notifications.component';
import { UserProfileScreenComponent } from './screens/user-profile/user-profile.component';
import { NotificationsScreenComponent } from './screens/notifications/notifications-screen.component';
import { UserProfileScreenComponent } from './screens/user-profile/user-profile-screen.component';
const screens = [NotificationsScreenComponent, UserProfileScreenComponent];

3
apps/red-ui/src/app/modules/account/screens/user-profile/user-profile.component.html → apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen.component.html
View File

@ -4,9 +4,6 @@
<redaction-account-side-nav></redaction-account-side-nav>
<div>
<div class="page-header">
<div class="breadcrumb" translate="user-profile"></div>
</div>
<div class="red-content-inner">
<div class="content-container"></div>
</div>

0
apps/red-ui/src/app/modules/account/screens/notifications/notifications.component.scss → apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen.component.scss
View File

4
apps/red-ui/src/app/modules/account/screens/notifications/notifications.component.ts → apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen.component.ts
View File

@ -2,7 +2,7 @@ import { Component } from '@angular/core';
@Component({
selector: 'redaction-notifications-screen',
templateUrl: './notifications.component.html',
styleUrls: ['./notifications.component.scss']
templateUrl: './notifications-screen.component.html',
styleUrls: ['./notifications-screen.component.scss']
})
export class NotificationsScreenComponent {}

34
apps/red-ui/src/app/modules/account/screens/notifications/notifications.component.html
View File

@ -1,34 +0,0 @@
<section class="settings">
<div class="overlay-shadow"></div>
<redaction-account-side-nav></redaction-account-side-nav>
<div>
<div class="page-header">
<div class="breadcrumb" translate="notifications"></div>
<!-- <div class="actions">-->
<!-- <iqser-circle-button-->
<!-- *ngIf="currentUser.isUser"-->
<!-- [tooltip]="'common.close' | translate"-->
<!-- class="ml-6"-->
<!-- icon="iqser:close"-->
<!-- redactionNavigateLastDossiersScreen-->
<!-- tooltipPosition="below"-->
<!-- ></iqser-circle-button>-->
<!-- </div>-->
</div>
<div class="red-content-inner">
<div class="content-container">
<!-- <iqser-table-->
<!-- [headerTemplate]="headerTemplate"-->
<!-- [itemSize]="80"-->
<!-- [noDataIcon]="'red:document'"-->
<!-- [noDataText]="'audit-screen.no-data.title' | translate"-->
<!-- [totalSize]="logs?.totalHits || 0"-->
<!-- >-->
<!-- </iqser-table>-->
</div>
</div>
</div>
</section>

60
apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen.component.html Normal file
View File

@ -0,0 +1,60 @@
<section class="settings">
<div class="overlay-shadow"></div>
<redaction-account-side-nav></redaction-account-side-nav>
<div>
<div class="red-content-inner">
<div class="content-container full-height">
<div class="overlay-shadow"></div>
<div class="dialog">
<div class="dialog-header">
<div class="heading-l" translate="user-profile-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>
</div>
<div class="dialog-actions">
<button
[disabled]="formGroup.invalid || !(profileChanged || languageChanged)"
color="primary"
mat-flat-button
type="submit"
>
{{ 'user-profile-screen.actions.save' | translate }}
</button>
<a [href]="changePasswordUrl" target="_blank">
{{ 'user-profile-screen.actions.change-password' | translate }}</a
>
</div>
</form>
</div>
</div>
</div>
</div>
</section>

23
apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen.component.scss Normal file
View File

@ -0,0 +1,23 @@
@use 'variables';
@use 'common-mixins';
.dialog {
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;
}

116
apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen.component.ts Normal file
View File

@ -0,0 +1,116 @@
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
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 { LanguageService } from '../../../../i18n/language.service';
import { DomSanitizer } from '@angular/platform-browser';
import { TranslateService } from '@ngx-translate/core';
import { LoadingService } from '../../../../../../../../libs/common-ui/src';
@Component({
selector: 'redaction-user-profile-screen',
templateUrl: './user-profile-screen.component.html',
styleUrls: ['./user-profile-screen.component.scss']
})
export class UserProfileScreenComponent implements OnInit {
formGroup: FormGroup;
changePasswordUrl: any;
translations = languagesTranslations;
private _profileModel: ProfileModel;
constructor(
readonly permissionsService: PermissionsService,
private readonly _formBuilder: FormBuilder,
private readonly _userService: UserService,
private readonly _configService: ConfigService,
private readonly _userControllerService: UserControllerService,
private readonly _languageService: LanguageService,
private readonly _domSanitizer: DomSanitizer,
private readonly _translateService: TranslateService,
private readonly _loadingService: LoadingService
) {
this._loadingService.start();
this.formGroup = this._formBuilder.group({
email: [undefined, [Validators.required, Validators.email]],
firstName: [undefined],
lastName: [undefined],
language: [undefined]
});
this.changePasswordUrl = this._domSanitizer.bypassSecurityTrustResourceUrl(
this._configService.values.OAUTH_URL + '/account/password'
);
}
get languageChanged(): boolean {
return this._profileModel['language'] !== this.formGroup.get('language').value;
}
get profileChanged(): boolean {
const keys = Object.keys(this.formGroup.getRawValue());
keys.splice(keys.indexOf('language'), 1);
for (const key of keys) {
if (this._profileModel[key] !== this.formGroup.get(key).value) {
return true;
}
}
return false;
}
get languages(): string[] {
return this._translateService.langs;
}
ngOnInit() {
this._initializeForm();
}
async save(): Promise<void> {
this._loadingService.start();
if (this.languageChanged) {
await this._languageService.changeLanguage(this.formGroup.get('language').value);
}
if (this.profileChanged) {
const value = this.formGroup.value as ProfileModel;
delete value.language;
await this._userControllerService
.updateMyProfile({
...value
})
.toPromise();
await this._userService.loadCurrentUser();
await this._userService.loadAllUsers();
}
this._initializeForm();
}
private _initializeForm(): void {
try {
this._profileModel = {
email: this._userService.currentUser.email,
firstName: this._userService.currentUser.firstName,
lastName: this._userService.currentUser.lastName,
language: this._languageService.currentLanguage
};
if (this._userService.currentUser.email) {
// disable email if it's already set
this.formGroup.get('email').disable();
}
this.formGroup.patchValue(this._profileModel, { emitEvent: false });
} catch (e) {
} finally {
this._loadingService.stop();
}
}
}

0
apps/red-ui/src/app/modules/account/screens/user-profile/user-profile.component.scss
View File

8
apps/red-ui/src/app/modules/account/screens/user-profile/user-profile.component.ts
View File

@ -1,8 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'redaction-user-profile-screen',
templateUrl: './user-profile.component.html',
styleUrls: ['./user-profile.component.scss']
})
export class UserProfileScreenComponent {}

0
apps/red-ui/src/app/translations/languages-translations.ts → apps/red-ui/src/app/modules/account/translations/languages-translations.ts
View File

18
apps/red-ui/src/assets/i18n/en.json
View File

@ -1232,7 +1232,6 @@
"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",
"overwrite-files-dialog": {
"options": {
"cancel": "Cancel all uploads",
@ -1485,7 +1484,24 @@
}
},
"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"
},
"form": {
"email": "Email",
"first-name": "First name",
"last-name": "Last name"
},
"title": "Edit Profile"
},
"user-stats": {
"chart": {
"users": "Users in Workspace"