bug fix on overview authors-listing

This commit is contained in:
Sofia Papacharalampous 2024-05-30 13:04:31 +03:00
parent d4dcc76391
commit bba1c78d82
4 changed files with 16 additions and 10 deletions

View File

@ -190,7 +190,7 @@
<p class="header">{{ 'DESCRIPTION-OVERVIEW.DESCRIPTION-AUTHORS' | translate }}</p> <p class="header">{{ 'DESCRIPTION-OVERVIEW.DESCRIPTION-AUTHORS' | translate }}</p>
</div> </div>
<div class="col-12"> <div class="col-12">
<div *ngFor="let dmpUser of description.dmp?.dmpUsers" class="row authors pt-1" [ngClass]="{'author-focused': authorFocus && authorFocus == dmpUser.user?.id}" (mouseover)="focusOnAuthor(dmpUser.user?.id)" (mouseout)="resetAuthorFocus()"> <div *ngFor="let dmpUser of description.dmp?.dmpUsers; let i=index" class="row authors pt-1" [ngClass]="{'author-focused': authorFocus && isFocusedOnUser(dmpUser.user?.id, i)}" (mouseover)="focusOnAuthor(dmpUser.user?.id, i)" (mouseout)="resetAuthorFocus()">
<div class="col-auto d-flex flex-row pr-0"> <div class="col-auto d-flex flex-row pr-0">
<button class="account_btn mr-3 pl-0"> <button class="account_btn mr-3 pl-0">
<mat-icon class="account-icon" [ngClass]="{'author-icon-focused': authorFocus && authorFocus == dmpUser.user?.id}">account_circle</mat-icon> <mat-icon class="account-icon" [ngClass]="{'author-icon-focused': authorFocus && authorFocus == dmpUser.user?.id}">account_circle</mat-icon>

View File

@ -70,7 +70,7 @@ export class DescriptionOverviewComponent extends BaseComponent implements OnIni
canReview = false; canReview = false;
canInviteDmpUsers = false; canInviteDmpUsers = false;
authorFocus: Guid; authorFocus: string;
constructor( constructor(
private route: ActivatedRoute, private route: ActivatedRoute,
@ -220,15 +220,18 @@ export class DescriptionOverviewComponent extends BaseComponent implements OnIni
} else return false; } else return false;
} }
focusOnAuthor(userId: Guid): void { focusOnAuthor(dmpUserId: Guid, order: number): void {
this.authorFocus = userId; this.authorFocus = `${dmpUserId}-${order}`;
console.log(this.authorFocus);
} }
resetAuthorFocus(): void { resetAuthorFocus(): void {
this.authorFocus = null; this.authorFocus = null;
} }
isFocusedOnUser(dmpUserId: Guid, order: number): boolean {
return `${dmpUserId}-${order}` == this.authorFocus;
}
openShareDialog() { openShareDialog() {
const dialogRef = this.dialog.open(DmpInvitationDialogComponent, { const dialogRef = this.dialog.open(DmpInvitationDialogComponent, {
autoFocus: false, autoFocus: false,

View File

@ -251,7 +251,7 @@
<p class="header">{{ 'DMP-OVERVIEW.DMP-AUTHORS' | translate }}</p> <p class="header">{{ 'DMP-OVERVIEW.DMP-AUTHORS' | translate }}</p>
</div> </div>
<div class="col-12"> <div class="col-12">
<div *ngFor="let dmpUser of dmp.dmpUsers" class="row authors pt-1" [ngClass]="{'author-focused': authorFocus && authorFocus == dmpUser.user?.id}" (mouseover)="focusOnAuthor(dmpUser.user?.id)" (mouseout)="resetAuthorFocus()"> <div *ngFor="let dmpUser of dmp.dmpUsers; let i=index;" class="row authors pt-1" [ngClass]="{'author-focused': authorFocus && isFocusedOnUser(dmpUser.user?.id, i)}" (mouseover)="focusOnAuthor(dmpUser.user?.id, i)" (mouseout)="resetAuthorFocus()">
<div class="col-auto d-flex flex-row pr-0"> <div class="col-auto d-flex flex-row pr-0">
<button class="account_btn mr-3 pl-0"> <button class="account_btn mr-3 pl-0">
<mat-icon class="account-icon" [ngClass]="{'author-icon-focused': authorFocus && authorFocus == dmpUser.user?.id}">account_circle</mat-icon> <mat-icon class="account-icon" [ngClass]="{'author-icon-focused': authorFocus && authorFocus == dmpUser.user?.id}">account_circle</mat-icon>

View File

@ -82,7 +82,7 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
dmpStatusEnum = DmpStatus; dmpStatusEnum = DmpStatus;
dmpUserRoleEnum = DmpUserRole; dmpUserRoleEnum = DmpUserRole;
authorFocus: Guid; authorFocus: string;
constructor( constructor(
private route: ActivatedRoute, private route: ActivatedRoute,
@ -222,15 +222,18 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
} else return false; } else return false;
} }
focusOnAuthor(userId: Guid): void { focusOnAuthor(dmpUserId: Guid, order: number): void {
this.authorFocus = userId; this.authorFocus = `${dmpUserId}-${order}`;
console.log(this.authorFocus);
} }
resetAuthorFocus(): void { resetAuthorFocus(): void {
this.authorFocus = null; this.authorFocus = null;
} }
isFocusedOnUser(dmpUserId: Guid, order: number): boolean {
return `${dmpUserId}-${order}` == this.authorFocus;
}
canEditDmp(): boolean { canEditDmp(): boolean {
return (this.isDraftDmp()) && (this.dmp.authorizationFlags?.some(x => x === AppPermission.EditDmp) || this.authentication.hasPermission(AppPermission.EditDmp)) && this.isPublicView == false && this.dmp.belongsToCurrentTenant != false; return (this.isDraftDmp()) && (this.dmp.authorizationFlags?.some(x => x === AppPermission.EditDmp) || this.authentication.hasPermission(AppPermission.EditDmp)) && this.isPublicView == false && this.dmp.belongsToCurrentTenant != false;
} }