MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix all dashboard modals heights. Role verification remove custom buttons.

This commit is contained in:
Konstantinos Triantafyllou 2022-06-20 16:17:26 +03:00
parent d01ba65537
commit cc417adb6b
19 changed files with 74 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dashboard/divId/divIds.component.html
View File

@ -100,4 +100,4 @@
<div input [formInput]="classForm.get('portalType')" placeholder="Portal Type" [options]="portalUtils.portalTypes" type="select"></div>
</form>
</modal-alert>
<modal-alert #deleteModal (alertOutput)="confirmedDeleteDivIds($event)"></modal-alert>
<modal-alert #deleteModal [overflowBody]="false" (alertOutput)="confirmedDeleteDivIds($event)"></modal-alert>

4
dashboard/divId/divIds.component.ts
View File

@ -132,8 +132,6 @@ export class DivIdsComponent implements OnInit {
}
private confirmModalOpen() {
this.deleteModal.cancelButton = true;
this.deleteModal.okButton = true;
this.deleteModal.alertTitle = "Delete Confirmation";
this.deleteModal.message = "Are you sure you want to delete the selected class(es)?";
this.deleteModal.okButtonText = "Yes";
@ -189,8 +187,6 @@ export class DivIdsComponent implements OnInit {
}
private divIdsModalOpen(title: string, yesBtn: string) {
this.editModal.cancelButton = true;
this.editModal.okButton = true;
this.editModal.okButtonLeft = false;
this.editModal.alertTitle = title;
this.editModal.okButtonText = yesBtn;

2
dashboard/divhelpcontent/class-help-contents.component.ts
View File

@ -148,8 +148,6 @@ export class ClassHelpContentsComponent implements OnInit {
}
private confirmModalOpen() {
this.alertModalDeletePageHelpContents.cancelButton = true;
this.alertModalDeletePageHelpContents.okButton = true;
this.alertModalDeletePageHelpContents.alertTitle = 'Delete Confirmation';
this.alertModalDeletePageHelpContents.message = 'Are you sure you want to delete the selected page content(s)?';
this.alertModalDeletePageHelpContents.okButtonText = 'Yes';

5
dashboard/entity/entities.component.html
View File

@ -117,6 +117,5 @@
<div input [formInput]="entityForm.get('pid')" placeholder="Entity Pid"></div>
</form>
</modal-alert>
<modal-alert #relatedPages (alertOutput)="continueToggling($event)"></modal-alert>
<modal-alert #deleteModal (alertOutput)="confirmedDeleteEntities($event)"></modal-alert>
<modal-alert #relatedPages [overflowBody]="false" (alertOutput)="continueToggling($event)"></modal-alert>
<modal-alert #deleteModal [overflowBody]="false" (alertOutput)="confirmedDeleteEntities($event)"></modal-alert>

6
dashboard/entity/entities.component.ts
View File

@ -176,8 +176,6 @@ export class EntitiesComponent implements OnInit {
}
private confirmDeleteEntitiesModalOpen() {
this.deleteModal.cancelButton = true;
this.deleteModal.okButton = true;
this.deleteModal.alertTitle = 'Delete Confirmation';
this.deleteModal.message = 'Are you sure you want to delete the selected entity(-ies)?';
this.deleteModal.okButtonText = 'Yes';
@ -221,8 +219,6 @@ export class EntitiesComponent implements OnInit {
}
private entitiesModalOpen(title: string, yesBtn: string) {
this.editModal.cancelButton = true;
this.editModal.okButton = true;
this.editModal.okButtonLeft = false;
this.editModal.alertTitle = title;
this.editModal.okButtonText = yesBtn;
@ -333,8 +329,6 @@ export class EntitiesComponent implements OnInit {
}
private confirmRelatedPagesModalOpen() {
this.relatedPages.cancelButton = true;
this.relatedPages.okButton = true;
this.relatedPages.alertTitle = 'Warning';
this.relatedPages.message = "This action will affect all search pages related to this entity! Pages' status will change to entity's status! Do you want to continue?";
this.relatedPages.okButtonText = 'Yes';

2
dashboard/helpTexts/page-help-contents.component.ts
View File

@ -152,8 +152,6 @@ export class PageHelpContentsComponent implements OnInit {
}
private confirmModalOpen() {
this.alertModalDeletePageHelpContents.cancelButton = true;
this.alertModalDeletePageHelpContents.okButton = true;
this.alertModalDeletePageHelpContents.alertTitle = 'Delete Confirmation';
this.alertModalDeletePageHelpContents.message = 'Are you sure you want to delete the selected page content(s)?';
this.alertModalDeletePageHelpContents.okButtonText = 'Yes';

3
dashboard/menu/menu.component.html
View File

@ -164,5 +164,4 @@
</div>
</form>
</modal-alert>
<modal-alert #deleteModal (alertOutput)="confirmedDeleteMenuItem($event)"></modal-alert>
<modal-alert #deleteModal [overflowBody]="false" (alertOutput)="confirmedDeleteMenuItem($event)"></modal-alert>

4
dashboard/menu/menu.component.ts
View File

@ -286,8 +286,6 @@ export class MenuComponent implements OnInit {
}
private confirmModalOpen() {
this.deleteModal.cancelButton = true;
this.deleteModal.okButton = true;
this.deleteModal.alertTitle = 'Delete Confirmation';
this.deleteModal.message = 'Are you sure you want to delete this menu item?';
this.deleteModal.okButtonText = 'Yes';
@ -328,8 +326,6 @@ export class MenuComponent implements OnInit {
}
private menuItemsModalOpen(title: string, yesBtn: string) {
this.editModal.cancelButton = true;
this.editModal.okButton = true;
this.editModal.okButtonLeft = false;
this.editModal.alertTitle = title;
this.editModal.okButtonText = yesBtn;

3
dashboard/page/pages.component.html
View File

@ -181,5 +181,4 @@
</form>
</modal-alert>
<modal-alert #deleteModal (alertOutput)="confirmedDeletePages($event)"></modal-alert>
<modal-alert #deleteModal [overflowBody]="false" (alertOutput)="confirmedDeletePages($event)"></modal-alert>

4
dashboard/page/pages.component.ts
View File

@ -225,8 +225,6 @@ export class PagesComponent implements OnInit {
}
private confirmModalOpen() {
this.deleteModal.cancelButton = true;
this.deleteModal.okButton = true;
this.deleteModal.alertTitle = 'Delete Confirmation';
this.deleteModal.message = 'Are you sure you want to delete the selected page(s)?';
this.deleteModal.okButtonText = 'Yes';
@ -297,8 +295,6 @@ export class PagesComponent implements OnInit {
}
private pagesModalOpen(title: string, yesBtn: string) {
this.editModal.cancelButton = true;
this.editModal.okButton = true;
this.editModal.okButtonLeft = false;
this.editModal.alertTitle = title;
this.editModal.okButtonText = yesBtn;

2
dashboard/portal/portals.component.html
View File

@ -98,4 +98,4 @@
</form>
</modal-alert>
<modal-alert #deleteModal (alertOutput)="confirmedDeletePortals($event)"></modal-alert>
<modal-alert #deleteModal [overflowBody]="false" (alertOutput)="confirmedDeletePortals($event)"></modal-alert>

4
dashboard/portal/portals.component.ts
View File

@ -134,8 +134,6 @@ export class PortalsComponent implements OnInit {
}
private confirmModalOpen() {
this.deleteModal.cancelButton = true;
this.deleteModal.okButton = true;
this.deleteModal.alertTitle = 'Delete Confirmation';
this.deleteModal.message = 'Are you sure you want to delete the selected portal(-ies)?';
this.deleteModal.okButtonText = 'Yes';
@ -198,8 +196,6 @@ export class PortalsComponent implements OnInit {
});
} else {
this.editModal.okButtonLeft = false;
this.editModal.cancelButton = true;
this.editModal.okButton = true;
this.editModal.alertTitle = title;
this.editModal.okButtonText = yesBtn;
this.editModal.open();

30
dashboard/users/role-users/role-users.component.html
View File

@ -75,29 +75,27 @@
</div>
</div>
</div>
<modal-alert #inviteModal (alertOutput)="invite()" [okDisabled]="invited && invited.invalid">
<div class="uk-padding uk-padding-remove-horizontal">
<div *ngIf="message" class="uk-margin-medium-bottom uk-text-small">
<div [innerHTML]="message | safeHtml"></div>
</div>
<div *ngIf="invited">
<div input [formInput]="invited"
placeholder="Email"></div>
</div>
</div>
<modal-alert #inviteModal (alertOutput)="invite()" [overflowBody]="false" [okDisabled]="invited && invited.invalid">
<div *ngIf="message" class="uk-margin-medium-bottom uk-text-small">
<div [innerHTML]="message | safeHtml"></div>
</div>
<div *ngIf="invited">
<div input [formInput]="invited"
placeholder="Email"></div>
</div>
</modal-alert>
<modal-alert #deleteModal (alertOutput)="deleteActive()">
<div *ngIf="selectedUser" class="uk-padding-small uk-padding-remove-horizontal">
<modal-alert #deleteModal [overflowBody]="false" (alertOutput)="deleteActive()">
<div *ngIf="selectedUser">
Are you sure you want to remove <span class="uk-text-bold">{{selectedUser}}</span> from {{role}}s?
</div>
</modal-alert>
<modal-alert #deletePendingModal (alertOutput)="deletePending()">
<div *ngIf="selectedUser" class="uk-padding-small uk-padding-remove-horizontal">
<modal-alert #deletePendingModal [overflowBody]="false" (alertOutput)="deletePending()">
<div *ngIf="selectedUser">
Are you sure you want to cancel {{role}} invitation of <span class="uk-text-bold">{{selectedUser}}</span>?
</div>
</modal-alert>
<modal-alert #createRoleModal (alertOutput)="createGroup()" [okDisabled]="roleFb && roleFb.invalid">
<div *ngIf="roleFb" class="uk-padding uk-padding-remove-horizontal">
<modal-alert #createRoleModal [overflowBody]="false" (alertOutput)="createGroup()" [okDisabled]="roleFb && roleFb.invalid">
<div *ngIf="roleFb">
<div class="uk-grid" uk-grid [formGroup]="roleFb">
<div input [formInput]="roleFb.get('name')"
placeholder="Name" class="uk-width-1-1"></div>

6
dashboard/users/subscribers/subscribers.component.html
View File

@ -79,12 +79,10 @@
</div>
<modal-alert *ngIf="user" #inviteModal (alertOutput)="subscriberInvite.invite()" [okDisabled]="!subscriberInvite.valid"
[large]="true">
<div class="uk-padding uk-padding-remove-horizontal">
<subscriber-invite #subscriberInvite [user]="user"></subscriber-invite>
</div>
</modal-alert>
<modal-alert #deleteModal (alertOutput)="deleteSubscriber()">
<div *ngIf="selectedUser" class="uk-padding-small uk-padding-remove-horizontal">
<modal-alert #deleteModal [overflowBody]="false" (alertOutput)="deleteSubscriber()">
<div *ngIf="selectedUser">
Are you sure you want to remove <span class="uk-text-bold">{{selectedUser}}</span> from subscribers?
</div>
</modal-alert>

88
role-verification/role-verification.component.ts
View File

@ -14,10 +14,14 @@ import {Composer} from "../utils/email/composer";
@Component({
selector: 'role-verification',
template: `
<modal-alert #managerModal>
<modal-alert #managerModal [overflowBody]="false" (alertOutput)="verifyManager()" (cancelOutput)="cancel()"
[okDisabled]="code.invalid || loading">
<div>
You have been invited to join <span class="uk-text-bold">{{name}}</span> {{(service === 'monitor'?'Monitor':'Research Community')}} Dashboard as a manager.
<span class="portal-color">Fill</span> in the <span class="portal-color">verification code</span>, sent to your
You have been invited to join <span
class="uk-text-bold">{{name}}</span> {{(service === 'monitor' ? 'Monitor' : 'Research Community')}} Dashboard
as a manager.
<span class="uk-text-primary">Fill</span> in the <span class="uk-text-primary">verification code</span>, sent to
your
email, to accept the invitation request.
</div>
<div *ngIf="!loading" class="uk-margin-medium-top uk-flex uk-flex-center">
@ -28,20 +32,14 @@ import {Composer} from "../utils/email/composer";
<div *ngIf="loading" class="uk-margin-medium-top uk-flex uk-flex-center">
<loading></loading>
</div>
<div class="uk-margin-medium-top uk-flex uk-flex-right">
<button class="uk-button uk-button-default uk-margin-medium-right" [class.uk-disabled]="loading"
(click)="cancel(managerModal)">Cancel
</button>
<button class="uk-button" [class.uk-button-primary]="code.valid" [class.uk-disabled]="code.invalid || loading"
(click)="verifyManager()">Accept
</button>
</div>
</modal-alert>
<modal-alert *ngIf="service == 'monitor'" #memberModal>
<modal-alert #memberModal [overflowBody]="false" *ngIf="service == 'monitor'" (cancelOutput)="cancel()"
(alertOutput)="verifyMember()" [okDisabled]="code.invalid || loading">
<div *ngIf="!isMember">
<div>
You have been invited to join <span class="uk-text-bold">{{name}}</span> Monitor Dashboard as a member.
<span class="portal-color">Fill</span> in the <span class="portal-color">verification code</span>, sent to
<span class="uk-text-primary">Fill</span> in the <span class="uk-text-primary">verification code</span>, sent
to
your
email, to accept the invitation request.
</div>
@ -53,28 +51,16 @@ import {Composer} from "../utils/email/composer";
<div *ngIf="loading" class="uk-margin-medium-top">
<loading></loading>
</div>
<div class="uk-margin-medium-top uk-flex uk-flex-right">
<button class="uk-button uk-button-default uk-margin-medium-right" [class.uk-disabled]="loading"
(click)="cancel(memberModal)">Cancel
</button>
<button class="uk-button" [class.uk-button-primary]="code.valid" [class.uk-disabled]="code.invalid || loading"
(click)="verifyMember()">Accept
</button>
</div>
</div>
<div *ngIf="isMember">
<div>
Welcome! You are now a member of the OpenAIRE Monitor Dashboard for the <span class="uk-text-bold">{{name}}</span>!
Welcome! You are now a member of the OpenAIRE Monitor Dashboard for the <span
class="uk-text-bold">{{name}}</span>!
From now on, you will have access to our restricted content.
</div>
<div class="uk-margin-medium-top uk-flex uk-flex-right">
<button class="uk-button uk-button-default" [class.uk-disabled]="loading"
(click)="cancel(memberModal)">Close
</button>
</div>
</div>
</modal-alert>
<modal-alert #errorModal (alertOutput)="cancel(errorModal)">
<modal-alert #errorModal (alertOutput)="cancel()" [overflowBody]="false">
<div>
We are unable to process the request because the link is invalid, or it has expired.
</div>
@ -127,7 +113,7 @@ export class RoleVerificationComponent implements OnInit, OnDestroy, AfterViewIn
this.openManagerModal();
} else if (this.verification.verificationType === 'member' && this.service === "monitor") {
this.openMemberModal();
} else {
} else {
this.openErrorModal();
}
} else {
@ -159,16 +145,21 @@ export class RoleVerificationComponent implements OnInit, OnDestroy, AfterViewIn
public openManagerModal() {
this.error = null;
this.managerModal.okButton = false;
this.managerModal.cancelButton = false;
this.managerModal.okButtonLeft = false;
this.managerModal.okButtonText = 'Accept';
this.managerModal.stayOpen = true;
this.managerModal.cancelButtonText = 'Cancel';
this.managerModal.alertTitle = 'Manager Invitation';
this.managerModal.open();
}
public openMemberModal() {
this.error = null;
this.memberModal.okButton = false;
this.memberModal.cancelButton = false;
this.isMember = false;
this.memberModal.okButtonLeft = false;
this.memberModal.okButtonText = 'Accept';
this.memberModal.stayOpen = true;
this.memberModal.cancelButtonText = 'Cancel';
this.memberModal.alertTitle = 'Member Invitation';
this.memberModal.open();
}
@ -187,7 +178,7 @@ export class RoleVerificationComponent implements OnInit, OnDestroy, AfterViewIn
this.managerModal.cancel();
this.error = null;
this.userManagementService.updateUserInfo(() => {
if(this.service === "monitor") {
if (this.service === "monitor") {
this.loading = false;
this.router.navigate(['/admin/' + this.verification.entity]);
} else {
@ -219,24 +210,29 @@ export class RoleVerificationComponent implements OnInit, OnDestroy, AfterViewIn
public verifyMember() {
this.loading = true;
this.subs.push(this.userRegistryService.verify(this.verification.id, this.code.value, "member").subscribe(() => {
this.loading = false;
this.error = null;
this.userManagementService.updateUserInfo(() => {
this.isMember = true;
});
}, error => {
this.loading = false;
this.error = 'The verification code is invalid';
}));
if (!this.isMember) {
this.subs.push(this.userRegistryService.verify(this.verification.id, this.code.value, "member").subscribe(() => {
this.loading = false;
this.error = null;
this.userManagementService.updateUserInfo(() => {
this.memberModal.cancelButton = false;
this.memberModal.okButtonText = 'Close';
this.isMember = true;
});
}, error => {
this.loading = false;
this.error = 'The verification code is invalid';
}));
} else {
this.memberModal.cancel();
}
}
public reset() {
this.code = this.fb.control('', [Validators.required, Validators.pattern('^[+0-9]{6}$')]);
}
cancel(modal: AlertModal) {
modal.cancel();
cancel() {
this.router.navigate([this.router.url.split('?')[0]]);
}
}

5
searchPages/searchUtils/portal-search-result.component.html
View File

@ -91,10 +91,7 @@
</div>
</li>
</ul>
<modal-alert #AlertModal (alertOutput)="goToPage($event)">
<div class="uk-text-left">
You will be navigated to a new tab. Are you sure that you want to proceed?
</div>
<modal-alert #AlertModal [overflowBody]="false" (alertOutput)="goToPage($event)">
</modal-alert>
<ng-template #resultPreview let-result="result">
<div class="uk-flex uk-flex-center">

4
searchPages/searchUtils/portal-search-result.component.ts
View File

@ -75,14 +75,12 @@ export class PortalSearchResultComponent implements OnInit{
public confirmModalOpen(result: CommunityInfo & Stakeholder) {
this.selected = result;
this.modal.cancelButton = true;
this.modal.okButton = true;
if(this.type === 'stakeholder') {
this.modal.alertTitle = 'You are going to visit ' + result.name + ' Monitor Dashboard';
} else if (this.type === 'community') {
this.modal.alertTitle = 'You are going to visit ' + ((result.title) ? result.title : result.shortTitle) +' Gateway';
}
this.modal.alertMessage = false;
this.modal.message = 'You will be navigated to a new tab. Are you sure that you want to proceed?';
this.modal.okButtonLeft = false;
this.modal.okButtonText = 'Yes';
this.modal.cancelButtonText = 'No';

1
sharedComponents/quick-contact/quick-contact.component.ts
View File

@ -1,7 +1,6 @@
import {Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild} from '@angular/core';
import {FormGroup} from "@angular/forms";
import {Subscriber} from "rxjs";
import {SearchForm} from "../../searchPages/searchUtils/newSearchPage.component";
import {Background} from "../../utils/background-utils";
declare var UIkit;

11
utils/modal/alert.ts
View File

@ -123,11 +123,15 @@ export class AlertModal {
*/
public select: boolean = true;
/**
* Emitted when a ok button was clicked
* Emitted when ok button was clicked
* or when Ok method is called.
*/
@Output() public alertOutput: EventEmitter<any> = new EventEmitter();
/**
* Emitted when cancel button was clicked
* or when cancel method is called.
*/
@Output() public cancelOutput: EventEmitter<any> = new EventEmitter();
@ViewChild('element') element: ElementRef;
@ -136,7 +140,7 @@ export class AlertModal {
/**
* Opens a alert window creating backdrop.
* Opens an alert window creating backdrop.
*/
open() {
UIkit.modal(this.element.nativeElement).show();
@ -164,5 +168,6 @@ export class AlertModal {
*/
cancel() {
UIkit.modal(this.element.nativeElement).hide();
this.cancelOutput.emit(true);
}
}