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

Adds field "Add account" on profile

This commit is contained in:
apapachristou 2020-10-26 11:57:06 +02:00
parent 9674ec2b6b
commit 29c6774558
13 changed files with 276 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,19 @@
<div class="template-container">
<div mat-dialog-title class="row d-flex m-0">
<h1 mat-dialog-title class="title">{{'USER-PROFILE.ACTIONS.ADD-NEW-ACCOUNT' | translate}}</h1>
<span class="ml-auto align-self-center" (click)="closeDialog()"><mat-icon class="close-icon">close</mat-icon></span>
</div>
<!-- <div class="row m-0">
</div> -->
<div mat-dialog-content class="definition-content pt-2">
<mat-form-field class="full-width">
<input matInput placeholder="{{'USER-PROFILE.SETTINGS.YOUR-EMAIL' | translate}}">
</mat-form-field>
</div>
<div mat-mat-dialog-actions>
<div class="col-auto d-flex pb-2 pt-2">
<button mat-raised-button type="button" class="cancel-btn ml-auto" (click)="cancel()">{{'USER-PROFILE.ACTIONS.CANCEL' | translate}}</button>
<button mat-raised-button type="button" class="add-btn ml-4" (click)="add()">{{'USER-PROFILE.ACTIONS.ADD' | translate}}</button>
</div>
</div>
</div>

55
dmp-frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.scss Normal file
View File

@ -0,0 +1,55 @@
.template-container {
.header {
display: flex;
width: 100%;
height: 89px;
background-color: #129d99;
color: #ffffff;
font-size: 1.25rem;
}
.title {
font-weight: 700;
font-size: 1.25rem;
color: #212121;
opacity: 1;
}
.template-title {
margin-left: 37px;
}
.close-icon {
cursor: pointer;
margin-right: 20px;
}
.close-icon:hover {
background-color: #fefefe6e !important;
border-radius: 50%;
}
.cancel-btn {
width: 101px;
height: 43px;
background: #ffffff;
border: 1px solid #b5b5b5;
border-radius: 30px;
opacity: 1;
}
.add-btn {
width: 84px;
height: 43px;
background: #ffffff;
color: #129d99;
border: 1px solid #129d99;
border-radius: 30px;
opacity: 1;
}
.add-btn:hover {
background-color: #129d99;
color: #ffffff;
}
}

40
dmp-frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.ts Normal file
View File

@ -0,0 +1,40 @@
import { Component, Inject, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { DatasetDescriptionFormEditorModel } from '@app/ui/misc/dataset-description-form/dataset-description-form.model';
@Component({
selector: 'app-add-account-dialog-component',
templateUrl: 'add-account-dialog.component.html',
styleUrls: ['./add-account-dialog.component.scss'],
})
export class AddAccountDialogComponent implements OnInit {
datasetProfileDefinitionModel: DatasetDescriptionFormEditorModel;
datasetProfileDefinitionFormGroup: FormGroup;
progressIndication = false;
constructor(
public dialogRef: MatDialogRef<AddAccountDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
) {
}
ngOnInit(): void {
}
add(): void {
this.dialogRef.close(true);
}
cancel(): void {
this.dialogRef.close();
}
closeDialog(): void {
this.dialogRef.close();
}
}

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

@ -13,7 +13,7 @@
</div>
<div class="col-auto d-flex flex-column justify-content-center main-info">
<div class="name">{{formGroup.get('name').value}}</div>
<div><span class="connected">{{'USER-PROFILE.SETTINGS.CONNECTED-WITH' | translate}}:</span><span class="mail">{{userProfile.email}}</span></div>
<!-- <div><span class="connected">{{'USER-PROFILE.SETTINGS.CONNECTED-WITH' | translate}}: </span><span class="mail">{{userProfile.email}}</span></div> -->
</div>
</div>
<!-- Name -->
@ -25,7 +25,7 @@
<div class="row">
<div class="col name-form">
<mat-form-field>
<input matInput placeholder="" type="text" name="name" [formControl]="formGroup.get('name')" required>
<input matInput type="text" name="name" [formControl]="formGroup.get('name')" required>
<!-- <mat-error *ngIf="formGroup.get('label').hasError('backendError')">{{formGroup.get('label').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> -->
</mat-form-field>
@ -33,6 +33,37 @@
</div>
</div>
</div>
<!-- Accounts -->
<div class="row mb-5">
<div class="col">
<div class="row">
<div class="col-auto field-title">{{'USER-PROFILE.SETTINGS.ACCOUNTS' | translate}}</div>
</div>
<div class="row mt-3">
<div class="col-auto">
<span class="email-title">{{'USER-PROFILE.SETTINGS.EMAILS' | translate}}</span>
</div>
<div class="col-auto vertical-line">
<div *ngIf="userCredentials">
<div *ngFor="let userCredential of userCredentials">
<div class="row">
<!-- <div class="col-auto pl-4 ml-2 pr-0 d-flex align-items-center"><mat-icon class="check-icon mat-icon">check</mat-icon></div> -->
<div class="col-auto mail-text">{{userCredential.email}}</div>
<!-- <div class="col-auto"></div>
<div class="col-auto d-flex align-items-center" (click)="removeAccount()"><mat-icon class="clear-icon mat-icon">clear</mat-icon></div> -->
</div>
</div>
</div>
<div class="row add-new-btn">
<div class="col-auto add-mail" (click)="addAccount()">
<mat-icon class="mr-1">add</mat-icon>
<span>{{'USER-PROFILE.ACTIONS.ADD-NEW' | translate}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Organization -->
<div class="row mb-5">
<div class="col">

59
dmp-frontend/src/app/ui/user-profile/user-profile.component.scss
View File

@ -121,6 +121,65 @@
cursor: pointer;
}
.vertical-line {
border-left: 2px solid #129d99;
}
.email-title {
margin-top: 1.6875rem;
letter-spacing: 0.15px;
color: #a8a8a8;
opacity: 1;
}
.mail-text {
cursor: pointer;
line-height: 2;
letter-spacing: 0.15px;
color: #212121;
}
// .mail-text:hover {
// background-color: #f4f8f9;
// }
.check-icon {
color: #129d99;
transform: scale(0.75);
}
.clear-icon {
color: #f16868;
cursor: pointer;
}
.add-new-btn {
margin-top: 2rem;
}
.add-mail {
padding-left: 22px;
line-height: 2rem;
cursor: pointer;
mat-icon {
color: #129d99;
display: inline-flex;
vertical-align: middle;
}
span {
font-weight: 500;
letter-spacing: -0.35px;
color: #212121;
opacity: 1;
}
}
.add-mail:hover {
background-color: #f4f8f9;
}
::ng-deep .name-form .mat-form-field-appearance-outline .mat-form-field-outline {
background: #fafafa !important;
}

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

@ -22,6 +22,9 @@ import { ExternalSourcesService } from '@app/core/services/external-sources/exte
import { UserProfileEditorModel } from './user-profile-editor.model';
import { RoleOrganizationType } from '@app/core/common/enum/role-organization-type';
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
import { AddAccountDialogComponent } from './add-account/add-account-dialog.component';
import { MatDialog } from '@angular/material';
import { UserCredentialModel } from '@app/core/model/user/user-credential';
const availableLanguages: any[] = require('../../../assets/resources/language.json');
@ -34,6 +37,7 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes
userProfileEditorModel: UserProfileEditorModel;
user: Observable<UserListingModel>;
userCredentials: UserCredentialModel[];
currentUserId: string;
cultures: Observable<CultureInfo[]>;
timezones: Observable<any[]>;
@ -64,6 +68,7 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes
private languageService: LanguageService,
private configurationService: ConfigurationService,
private oauth2DialogService: Oauth2DialogService,
private dialog: MatDialog,
public enumUtils: EnumUtils
) { super(); }
@ -97,6 +102,11 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes
this.unlock();
return result;
}));
this.userService.getEmails(userId).pipe(takeUntil(this._destroyed))
.subscribe(result => {
this.userCredentials = result;
});
});
}
@ -237,4 +247,22 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes
.subscribe(() => this.router.navigate(['/reload']).then(() => this.router.navigate(['/profile'])));
}
public removeAccount() {
}
public addAccount() {
const dialogRef = this.dialog.open(AddAccountDialogComponent, {
restoreFocus: false,
autoFocus: false,
width: '603px',
data: {
}
});
dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
if (result) {
}
});
}
}

7
dmp-frontend/src/app/ui/user-profile/user-profile.module.ts
View File

@ -3,6 +3,7 @@ import { FormattingModule } from '@app/core/formatting.module';
import { AutoCompleteModule } from '@app/library/auto-complete/auto-complete.module';
import { CommonFormsModule } from '@common/forms/common-forms.module';
import { CommonUiModule } from '@common/ui/common-ui.module';
import { AddAccountDialogComponent } from './add-account/add-account-dialog.component';
import { UserProfileComponent } from './user-profile.component';
import { UserProfileRoutingModule } from './user-profile.routing';
@ -15,7 +16,11 @@ import { UserProfileRoutingModule } from './user-profile.routing';
AutoCompleteModule
],
declarations: [
UserProfileComponent
UserProfileComponent,
AddAccountDialogComponent
],
entryComponents: [
AddAccountDialogComponent
]
})
export class UserProfileModule { }

8
dmp-frontend/src/assets/i18n/de.json
View File

@ -1368,7 +1368,8 @@
"ROLE": "Rolle",
"SELECT-ROLE": "Select Role",
"ACCOUNTS": "Accounts",
"EMAILS": "Emails"
"EMAILS": "Emails",
"YOUR-EMAIL": "Your Email"
},
"ASSOCIATED-DMPS": "Zugehörige DMPs",
"DMPS": {
@ -1400,7 +1401,10 @@
},
"ACTIONS": {
"SAVE": "Save",
"ADD-NEW": "Add new"
"ADD-NEW": "Add new",
"ADD-NEW-ACCOUNT": "Add new account",
"ADD": "Add",
"CANCEL": "Cancel"
}
},
"DATASET-REFERENCED-MODELS": {

8
dmp-frontend/src/assets/i18n/en.json
View File

@ -1368,7 +1368,8 @@
"ROLE": "Role",
"SELECT-ROLE": "Select Role",
"ACCOUNTS": "Accounts",
"EMAILS": "Emails"
"EMAILS": "Emails",
"YOUR-EMAIL": "Your Email"
},
"ASSOCIATED-DMPS": "Associated DMPs",
"DMPS": {
@ -1400,7 +1401,10 @@
},
"ACTIONS": {
"SAVE": "Save",
"ADD-NEW": "Add new"
"ADD-NEW": "Add new",
"ADD-NEW-ACCOUNT": "Add new account",
"ADD": "Add",
"CANCEL": "Cancel"
}
},
"DATASET-REFERENCED-MODELS": {

8
dmp-frontend/src/assets/i18n/es.json
View File

@ -1368,7 +1368,8 @@
"ROLE": "Role",
"SELECT-ROLE": "Select Role",
"ACCOUNTS": "Accounts",
"EMAILS": "Emails"
"EMAILS": "Emails",
"YOUR-EMAIL": "Your Email"
},
"ASSOCIATED-DMPS": "PGDs asociados",
"DMPS": {
@ -1400,7 +1401,10 @@
},
"ACTIONS": {
"SAVE": "Save",
"ADD-NEW": "Add new"
"ADD-NEW": "Add new",
"ADD-NEW-ACCOUNT": "Add new account",
"ADD": "Add",
"CANCEL": "Cancel"
}
},
"DATASET-REFERENCED-MODELS": {

8
dmp-frontend/src/assets/i18n/gr.json
View File

@ -1368,7 +1368,8 @@
"ROLE": "Ρόλος",
"SELECT-ROLE": "Select Role",
"ACCOUNTS": "Accounts",
"EMAILS": "Emails"
"EMAILS": "Emails",
"YOUR-EMAIL": "Your Email"
},
"ASSOCIATED-DMPS": "Συσχετιζόμενα Σχέδια Διαχείρισης Δεδομένων",
"DMPS": {
@ -1400,7 +1401,10 @@
},
"ACTIONS": {
"SAVE": "Save",
"ADD-NEW": "Add new"
"ADD-NEW": "Add new",
"ADD-NEW-ACCOUNT": "Add new account",
"ADD": "Add",
"CANCEL": "Cancel"
}
},
"DATASET-REFERENCED-MODELS": {

8
dmp-frontend/src/assets/i18n/sk.json
View File

@ -1368,7 +1368,8 @@
"ROLE": "Rola",
"SELECT-ROLE": "Select Role",
"ACCOUNTS": "Accounts",
"EMAILS": "Emails"
"EMAILS": "Emails",
"YOUR-EMAIL": "Your Email"
},
"ASSOCIATED-DMPS": "Pridružené DMP",
"DMPS": {
@ -1400,7 +1401,10 @@
},
"ACTIONS": {
"SAVE": "Save",
"ADD-NEW": "Add new"
"ADD-NEW": "Add new",
"ADD-NEW-ACCOUNT": "Add new account",
"ADD": "Add",
"CANCEL": "Cancel"
}
},
"DATASET-REFERENCED-MODELS": {

8
dmp-frontend/src/assets/i18n/tr.json
View File

@ -1368,7 +1368,8 @@
"ROLE": "Görev",
"SELECT-ROLE": "Select Role",
"ACCOUNTS": "Accounts",
"EMAILS": "Emails"
"EMAILS": "Emails",
"YOUR-EMAIL": "Your Email"
},
"ASSOCIATED-DMPS": "İlişkili VYP'ları",
"DMPS": {
@ -1400,7 +1401,10 @@
},
"ACTIONS": {
"SAVE": "Save",
"ADD-NEW": "Add new"
"ADD-NEW": "Add new",
"ADD-NEW-ACCOUNT": "Add new account",
"ADD": "Add",
"CANCEL": "Cancel"
}
},
"DATASET-REFERENCED-MODELS": {