MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

styling changes 

*user-profile
This commit is contained in:
Sofia Papacharalampous 2024-03-19 17:12:36 +02:00
parent 5f52e646a5
commit 551249af33
5 changed files with 81 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
dmp-backend/pom.xml
View File

@ -412,19 +412,6 @@
</property>
</activation>
</profile>
<profile>
<id>cite-dev</id>
<repositories>
<repository>
<id>cite-maven</id>
<name>CITE Maven Repository</name>
<url>https://crepo.cite.gr/repository/cite-maven/</url>
</repository>
</repositories>
<activation>
<activeByDefault>true</activeByDefault>
</activation>
</profile>
</profiles>
</project>

6
dmp-frontend/src/app/core/model/user/user.ts
View File

@ -62,6 +62,12 @@ export interface UserCredential {
externalId: String;
user: User;
createdAt: Date;
data: UserCredentialData
}
export interface UserCredentialData {
externalProviderNames: String[];
email: String;
}
export interface DmpAssociatedUser {

2
dmp-frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.html
View File

@ -3,7 +3,7 @@
<h1 mat-dialog-title class="title">{{'USER-PROFILE.ACTIONS.LINK-NEW-ACCOUNT' | translate}}</h1>
<span class="ml-auto align-self-center" (click)="closeDialog()"><mat-icon class="close-icon">close</mat-icon></span>
</div>
<app-login *ngIf="hasEmail" [mergeUsers]="true" redirect="false"></app-login>
<!-- <app-login *ngIf="hasEmail" [mergeUsers]="true" redirect="false"></app-login> -->
<div *ngIf="!hasEmail">
<div mat-dialog-content class="definition-content pt-2">
<mat-form-field class="full-width">

66
dmp-frontend/src/app/ui/user-profile/user-profile.component.html
View File

@ -1,3 +1,5 @@
<!-- {{ userCredentials | async | json }} -->
<div class="profile">
<div class="container-fluid">
<div *ngIf="user | async as userProfile; else loading" class="user-profile">
@ -30,7 +32,7 @@
</div>
<!-- Accounts -->
<!-- TODO: How to present these. -->
<!-- <div class="row mb-5">
<div class="row mb-5">
<div class="col">
<div class="row">
<div class="col-auto field-title">{{'USER-PROFILE.SETTINGS.ACCOUNTS' | translate}}</div>
@ -41,20 +43,24 @@
</div>
<div class="col-auto vertical-line">
<div *ngIf="userCredentials">
<div *ngFor="let userCredential of userCredentials; index as i">
<div class="row user-credential">
<div class="col-auto mail-text pr-0">{{userCredential.email}}</div>
<span *ngIf="userCredential.provider === authProviderEnum.Google" class="googleIcon"></span>
<span *ngIf="userCredential.provider === authProviderEnum.Facebook" class="facebookIcon"></span>
<span *ngIf="userCredential.provider === authProviderEnum.Twitter" class="twitterIcon"></span>
<span *ngIf="userCredential.provider === authProviderEnum.LinkedIn" class="linkedInIcon"></span>
<span *ngIf="userCredential.provider === authProviderEnum.B2Access" class="b2AccessIcon"></span>
<span *ngIf="userCredential.provider === authProviderEnum.ORCID" class="orcidIconMedium"></span>
<span *ngIf="userCredential.provider === authProviderEnum.OpenAire" class="openaireIcon"></span>
<span *ngIf="userCredential.provider === authProviderEnum.Configurable" class="configurableIcon"></span>
<span *ngIf="userCredential.provider === authProviderEnum.Zenodo" class="zenodoIcon"></span>
<div *ngIf="i != 0" class="col-auto d-flex align-items-center unlink-mail" (click)="userCredential.email !== userCredentials[0].email && removeAccount(userCredential)">
<mat-icon [matTooltip]="(userCredential.email !== userCredentials[0].email) ? ('USER-PROFILE.ACTIONS.UNLINK-ACCOUNT' | translate) : ('USER-PROFILE.ACTIONS.UNLINK-ACCOUNT-DISABLED' | translate)" matTooltipPosition="right" [ngClass]="{'disable-unlink':userCredential.email === userCredentials[0].email}">link_off</mat-icon>
<div *ngFor="let userCredential of userCredentials | async; index as i">
<div class="row user-credential" *ngIf="userCredential.data">
<div class="col-auto mail-text pr-0">{{userCredential.data.email}}</div>
<span *ngIf="hasProvider(userCredential, 'Google')" class="googleIcon"></span>
<span *ngIf="hasProvider(userCredential, 'Facebook')" class="facebookIcon"></span>
<!-- <span *ngIf="hasProvider(userCredential.data.provider, authProviderEnum.Twitter)" class="twitterIcon"></span>
<span *ngIf="hasProvider(userCredential.data.provider, authProviderEnum.LinkedIn)" class="linkedInIcon"></span>
<span *ngIf="hasProvider(userCredential.data.provider, authProviderEnum.B2Access)" class="b2AccessIcon"></span>
<span *ngIf="hasProvider(userCredential.data.provider, authProviderEnum.ORCID)" class="orcidIconMedium"></span>
<span *ngIf="hasProvider(userCredential.data.provider, authProviderEnum.OpenAire)" class="openaireIcon"></span>
<span *ngIf="hasProvider(userCredential.data.provider, authProviderEnum.Configurable)" class="configurableIcon"></span>
<span *ngIf="hasProvider(userCredential.data.provider, authProviderEnum.Zenodo)" class="zenodoIcon"></span> -->
<div *ngIf="i != 0" class="col-auto d-flex align-items-center unlink-mail" (click)="userCredential.data.email !== firstEmail && removeAccount(userCredential)">
<mat-icon
[matTooltip]="(userCredential.data?.email !== firstEmail ) ? ('USER-PROFILE.ACTIONS.UNLINK-ACCOUNT' | translate) : ('USER-PROFILE.ACTIONS.UNLINK-ACCOUNT-DISABLED' | translate)"
matTooltipPosition="right"
[ngClass]="{'disable-unlink':userCredential.data.email === firstEmail}"
>link_off</mat-icon>
</div>
</div>
</div>
@ -68,31 +74,29 @@
</div>
</div>
</div>
</div> -->
</div>
<!-- Organization -->
<div class="row mb-5">
<div class="col">
<div class="col-6">
<div class="row">
<div class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.ORGANIZATION' | translate}}</div>
</div>
<div class="row">
<div class="col organization-form">
<mat-form-field>
<mat-form-field class="w-100">
<app-single-auto-complete placeholder="{{'DMP-EDITOR.PLACEHOLDER.ORGANIZATION' | translate}}" [formControl]="this.formGroup.get('organization')" [configuration]="organisationsAutoCompleteConfiguration"></app-single-auto-complete>
</mat-form-field>
</div>
</div>
</div>
</div>
<!-- Role -->
<div class="row mb-5">
<div class="col">
<!-- Role -->
<div class="col-6">
<div class="row">
<div class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.ROLE' | translate}}</div>
</div>
<div class="row">
<div class="col role-form">
<mat-form-field>
<mat-form-field class="w-100">
<mat-select placeholder="{{'USER-PROFILE.SETTINGS.SELECT-ROLE' | translate}}" [formControl]="this.formGroup.get('roleOrganization')">
<mat-option [value]="roleOrganizationEnum.Faculty">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.Faculty)}}</mat-option>
<mat-option [value]="roleOrganizationEnum.Librarian">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.Librarian)}}</mat-option>
@ -116,13 +120,13 @@
</div>
<!-- Timezone -->
<div class="row mb-5">
<div class="col">
<div class="col-4">
<div class="row">
<div class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.TIMEZONE' | translate}} *</div>
</div>
<div class="row">
<div class="col timezone-form">
<mat-form-field>
<mat-form-field class="w-100">
<input type="text" placeholder="{{'USER-PROFILE.SETTINGS.TIMEZONE' | translate}}" [formControl]="this.formGroup.get('timezone')" matInput [matAutocomplete]="timezone" required>
<mat-autocomplete #timezone="matAutocomplete">
<mat-option *ngFor="let timezone of timezones | async" [value]="timezone">
@ -134,16 +138,14 @@
</div>
</div>
</div>
</div>
<!-- Culture -->
<div class="row mb-5">
<div class="col">
<div class="col-4">
<div class="row">
<div class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.CULTURE' | translate}} *</div>
</div>
<div class="row">
<div class="col culture-form">
<mat-form-field>
<mat-form-field class="w-100">
<input type="text" placeholder="{{'USER-PROFILE.SETTINGS.CULTURE' | translate}}" [formControl]="this.formGroup.get('culture')" matInput [matAutocomplete]="culture" required>
<mat-autocomplete #culture="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let culture of cultures | async" [value]="culture">
@ -155,17 +157,15 @@
</div>
</div>
</div>
</div>
<!-- Language -->
<div class="row mb-5">
<div class="col">
<div class="col-4">
<div class="row">
<div class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.LANGUAGE' | translate}} *</div>
</div>
<div class="row">
<div class="col language-form">
<mat-form-field>
<mat-form-field class="w-100">
<!-- <mat-label>{{'USER-PROFILE.SETTINGS.LANGUAGE' | translate}}</mat-label> -->
<mat-select [formControl]="this.formGroup.get('language')" name="language">
<mat-option *ngFor="let language of languages" [value]="language">

61
dmp-frontend/src/app/ui/user-profile/user-profile.component.ts
View File

@ -6,7 +6,7 @@ import { ActivatedRoute, Params, Router } from '@angular/router';
import { RoleOrganizationType } from '@app/core/common/enum/role-organization-type';
import { CultureInfo } from '@app/core/model/culture-info';
import { Reference } from '@app/core/model/reference/reference';
import { User } from '@app/core/model/user/user';
import { User, UserCredential } from '@app/core/model/user/user';
import { AuthService } from '@app/core/services/auth/auth.service';
import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
import { CultureService } from '@app/core/services/culture/culture-service';
@ -39,7 +39,8 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes
userProfileEditorModel: UserProfileEditorModel;
user: Observable<User>;
//TODO: refactor
// userCredentials: UserCredentialModel[];
userCredentials: Observable<UserCredential[]>;
firstEmail: String;
currentUserId: string;
cultures: Observable<CultureInfo[]>;
timezones: Observable<any[]>;
@ -95,31 +96,42 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes
nameof<User>(x => x.additionalInfo.culture),
nameof<User>(x => x.additionalInfo.organization),
nameof<User>(x => x.additionalInfo.roleOrganization),
`${nameof<User>(x => x.credentials)}.${nameof<UserCredential>(x => x.data.email)}`,
`${nameof<User>(x => x.credentials)}.${nameof<UserCredential>(x => x.data.externalProviderNames)}`,
]
)
.pipe(map(result => {
//result['additionalinfo'] = JSON.parse(result['additionalinfo']);
//tested ui with fake data
// const fakecredentials: UserCredential = {
// "id": Guid.createEmpty(),
// "externalId": "123",
// "user": null,
// "createdAt": new Date(),
// "data": {
// "email": "dmpadmin@dmp.com",
// "externalProviderNames": ["Google", "Facebook"]
// }
// };
// result.credentials.push(fakecredentials);
// result.credentials[0].data.externalProviderNames = ['Google'];
this.userProfileEditorModel = new UserProfileEditorModel().fromModel(result);
this.formGroup = this.userProfileEditorModel.buildForm(this.languageService.getAvailableLanguagesCodes());
this.firstEmail = result.credentials[0].data.email;
this.userCredentials = of(result.credentials);
// this.formGroup = new FormBuilder().group({
// language: new FormControl(result['language'] ? availableLanguages.filter(x => x.value === result['language']['value']).pop() : '', [Validators.required]),
// timezone: new FormControl(result['timezone'], [Validators.required]),
// culture: new FormControl(result['culture'], [Validators.required])
// });
this.userProfileEditorModel = new UserProfileEditorModel().fromModel(result);
this.formGroup = this.userProfileEditorModel.buildForm(this.languageService.getAvailableLanguagesCodes());
//this.formGroup.get('language').valueChanges.pipe(takeUntil(this._destroyed)).subscribe(x => { if (x) this.translate.use(x.value) })
this.formGroup.get('timezone').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(x => { if (x) { this.timezones = this._filterTimezone(x); } });
this.formGroup.get('culture').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(x => { if (x) { this.cultures = this._filterCulture(x); } });
// this.initializeDisabledFormGroup();
this.unlock();
return result;
}));
//this.formGroup.get('language').valueChanges.pipe(takeUntil(this._destroyed)).subscribe(x => { if (x) this.translate.use(x.value) })
this.formGroup.get('timezone').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(x => { if (x) { this.timezones = this._filterTimezone(x); } });
this.formGroup.get('culture').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(x => { if (x) { this.cultures = this._filterCulture(x); } });
// this.initializeDisabledFormGroup();
this.unlock();
return result;
}));
//TODO: refactor
// this.userService.getEmails(userId).pipe(takeUntil(this._destroyed))
@ -138,6 +150,12 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes
ngOnDestroy(): void {
}
public hasProvider(userCredential: UserCredential, provider: string): boolean {
const result = userCredential.data.externalProviderNames?.find(x => x == provider);
return result != null;
}
private filterOrganisations(value: string): Observable<Reference[]> {
//TODO: refactor
// return this.externalSourcesService.searchDMPOrganizations(value);
@ -259,6 +277,7 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes
.subscribe(confirm => {
if (confirm) {
//TODO: refactor
console.log('removed!');
// const unlinkAccountModel: UnlinkAccountRequestModel = {
// userId: this.currentUserId,
// email: userCredential.email,