MaDgIK
/
monitor-dashboard
13
0
Fork 0
Code Issues Pull Requests Projects Releases 17 Wiki Activity

design tweaks for dashboard - admin and update openaireLibrary repo

This commit is contained in:
Alex Martzios 2022-03-29 16:05:29 +03:00
parent 44cb8b9396
commit 03dd96b73d
5 changed files with 76 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/app/general/edit-stakeholder/edit-stakeholder.component.ts
View File

@ -20,43 +20,72 @@ declare var UIkit;
@Component({ @Component({
selector: 'edit-stakeholder', selector: 'edit-stakeholder',
template: ` template: `
<div [ngStyle]="{'max-height': maxHeight}" class="uk-overflow-auto"> <div class="uk-overflow-auto">
<form *ngIf="stakeholderFb" [formGroup]="stakeholderFb"> <form *ngIf="stakeholderFb" [formGroup]="stakeholderFb">
<div class="uk-grid uk-margin-bottom" uk-grid> <div class="uk-grid uk-margin-bottom" uk-grid>
<div class="uk-width-1-2@m"> <div class="uk-width-1-2@m">
<div class="uk-text-bold uk-form-label uk-margin-small-bottom">Name</div> <div input id="name" [formInput]="stakeholderFb.get('name')"
<div dashboard-input id="name" [formInput]="stakeholderFb.get('name')"
placeholder="Name"></div> placeholder="Name"></div>
</div> </div>
<div class="uk-width-1-2@m"> <div class="uk-width-1-2@m">
<div class="uk-text-bold uk-form-label uk-margin-small-bottom">URL Alias</div> <div input [formInput]="stakeholderFb.get('alias')"
<div dashboard-input [formInput]="stakeholderFb.get('alias')"
placeholder="URL Alias"></div> placeholder="URL Alias"></div>
</div> </div>
<div class="uk-width-1-3@m"> <div class="uk-width-1-3@m">
<div class="uk-text-bold uk-form-label uk-margin-small-bottom">Index ID</div> <div input [formInput]="stakeholderFb.get('index_id')"
<div dashboard-input [formInput]="stakeholderFb.get('index_id')"
placeholder="Index ID"></div> placeholder="Index ID"></div>
</div> </div>
<div class="uk-width-1-3@m"> <div class="uk-width-1-3@m">
<div class="uk-text-bold uk-form-label uk-margin-small-bottom">Index Name</div> <div input [formInput]="stakeholderFb.get('index_name')"
<div dashboard-input [formInput]="stakeholderFb.get('index_name')"
placeholder="Index Name"></div> placeholder="Index Name"></div>
</div> </div>
<div class="uk-width-1-3@m"> <div class="uk-width-1-3@m">
<div class="uk-text-bold uk-form-label uk-margin-small-bottom">Index Short Name</div> <div input [formInput]="stakeholderFb.get('index_shortName')"
<div dashboard-input [formInput]="stakeholderFb.get('index_shortName')"
placeholder="Index Short Name"></div> placeholder="Index Short Name"></div>
</div> </div>
<div class="uk-width-1-1"> <div class="uk-width-1-1">
<div class="uk-text-bold uk-form-label uk-margin-small-bottom">Description</div> <div input [type]="'textarea'" placeholder="Description"
<div dashboard-input [type]="'textarea'" placeholder="Description"
[rows]="4" [formInput]="stakeholderFb.get('description')"></div> [rows]="4" [formInput]="stakeholderFb.get('description')"></div>
</div> </div>
<div class="uk-width-1-1"> <div class="uk-width-1-1 uk-flex uk-flex-wrap">
<input #file id="photo" type="file" class="uk-hidden" (change)="fileChangeEvent($event)"/> <input #file id="photo" type="file" class="uk-hidden" (change)="fileChangeEvent($event)"/>
<div class="uk-text-bold uk-form-label uk-margin-small-bottom">Logo</div> <div *ngIf="!stakeholderFb.get('isUpload').value" style="margin-top: 7px;" class="uk-width-1-2@m">
<div dashboard-input class="uk-width-1-1" type="logoURL" flex="top" [hideControl]="stakeholderFb.get('isUpload').value" <div class="uk-grid uk-flex uk-flex-middle" uk-grid>
<div class="uk-width-1-2@l uk-width-1-1 uk-flex uk-flex-center">
<button class="uk-button uk-button-secondary uk-flex uk-flex-middle uk-flex-wrap"
(click)="file.click()">
<icon name="cloud_upload" [flex]="true"></icon>
<span class="uk-margin-small-left">Upload a file</span>
</button>
</div>
<div class="uk-text-center uk-text-bold uk-width-expand">
OR
</div>
</div>
</div>
<div *ngIf="stakeholderFb.get('isUpload').value" class="uk-width-1-1 uk-flex uk-flex-middle">
<div class="uk-card uk-card-default uk-text-center uk-border-circle">
<img class="uk-position-center uk-blend-multiply" [src]="photo">
</div>
<div class="uk-margin-left">
<button (click)="remove()" class="uk-button-secondary outlined uk-icon-button">
<icon name="remove"></icon>
</button>
</div>
<div class="uk-margin-small-left">
<button class="uk-button-secondary uk-icon-button" (click)="file.click()">
<icon name="edit"></icon>
</button>
</div>
</div>
<div input class="uk-width-1-2@m" type="logoURL" flex="top" *ngIf="!stakeholderFb.get('isUpload').value"
[placeholder]="'Link to the logo'" [formInput]="stakeholderFb.get('logoUrl')"></div>
<!-- Full width error message -->
<div *ngIf="uploadError" class="uk-text-danger uk-width-1-1">{{uploadError}}</div>
</div>
<!-- <div class="uk-width-1-1">
<input #file id="photo" type="file" class="uk-hidden" (change)="fileChangeEvent($event)"/>
<div input class="uk-width-1-1" type="logoURL" flex="top" [hideControl]="stakeholderFb.get('isUpload').value"
[placeholder]="'Link to the logo'" [formInput]="stakeholderFb.get('logoUrl')"> [placeholder]="'Link to the logo'" [formInput]="stakeholderFb.get('logoUrl')">
<div *ngIf="!stakeholderFb.get('isUpload').value" style="margin-top: 7px;" class="uk-width-2-5@l uk-width-1-1"> <div *ngIf="!stakeholderFb.get('isUpload').value" style="margin-top: 7px;" class="uk-width-2-5@l uk-width-1-1">
<div class="uk-grid uk-flex uk-flex-middle" uk-grid> <div class="uk-grid uk-flex uk-flex-middle" uk-grid>
@ -74,7 +103,7 @@ declare var UIkit;
</div> </div>
<div *ngIf="stakeholderFb.get('isUpload').value" class="uk-width-1-1 uk-flex uk-flex-middle"> <div *ngIf="stakeholderFb.get('isUpload').value" class="uk-width-1-1 uk-flex uk-flex-middle">
<div class="uk-card uk-card-default uk-text-center uk-border-circle"> <div class="uk-card uk-card-default uk-text-center uk-border-circle">
<img class="uk-position-center" [src]="photo"> <img class="uk-position-center uk-blend-multiply" [src]="photo">
</div> </div>
<div class="uk-margin-left"> <div class="uk-margin-left">
<button (click)="remove()" class="uk-button-secondary outlined uk-icon-button"> <button (click)="remove()" class="uk-button-secondary outlined uk-icon-button">
@ -89,39 +118,31 @@ declare var UIkit;
</div> </div>
</div> </div>
<div *ngIf="uploadError" class="uk-text-danger uk-width-1-1">{{uploadError}}</div> <div *ngIf="uploadError" class="uk-text-danger uk-width-1-1">{{uploadError}}</div>
</div> </div> -->
<div class="uk-width-1-1 uk-grid uk-child-width-1-1" [class.uk-child-width-1-2@m]="!canChooseType" <div [class]="canChooseType ? 'uk-width-1-3@m' : 'uk-width-1-2@m'">
[class.uk-child-width-1-3@m]="canChooseType" uk-grid> <div input [formInput]="stakeholderFb.get('visibility')"
<div>
<div class="uk-text-bold uk-form-label uk-margin-small-bottom">Status</div>
<div dashboard-input [formInput]="stakeholderFb.get('visibility')"
[placeholder]="'Select a status'" [placeholder]="'Select a status'"
[options]="stakeholderUtils.statuses" type="select"></div> [options]="stakeholderUtils.statuses" type="select"></div>
</div> </div>
<div> <div [class]="canChooseType ? 'uk-width-1-3@m' : 'uk-width-1-2@m'">
<div class="uk-text-bold uk-form-label uk-margin-small-bottom">Type</div> <div input [formInput]="stakeholderFb.get('type')"
<div dashboard-input [formInput]="stakeholderFb.get('type')"
[placeholder]="'Select a type'" [placeholder]="'Select a type'"
[options]="types" type="select"></div> [options]="types" type="select"></div>
</div> </div>
<ng-container *ngIf="canChooseType"> <ng-container *ngIf="canChooseType">
<div class="uk-width-1-3@m"> <div class="uk-width-1-3@m">
<div class="uk-text-bold uk-form-label uk-margin-small-bottom">Template</div>
<div [placeholder]="'Select a template'" <div [placeholder]="'Select a template'"
dashboard-input [formInput]="stakeholderFb.get('defaultId')" input [formInput]="stakeholderFb.get('defaultId')"
[options]="defaultStakeholdersOptions" type="select"></div> [options]="defaultStakeholdersOptions" type="select"></div>
</div> </div>
</ng-container> </ng-container>
</div> </div>
</div>
</form> </form>
<div #notify notify-form class="uk-width-1-1 uk-margin-medium-top uk-margin-medium-bottom"></div> <div #notify notify-form class="uk-width-1-1 uk-margin-large-top uk-margin-medium-bottom"></div>
</div>`, </div>`,
styleUrls: ['edit-stakeholder.component.css'] styleUrls: ['edit-stakeholder.component.css']
}) })
export class EditStakeholderComponent implements OnDestroy { export class EditStakeholderComponent implements OnDestroy {
@Input()
public maxHeight = 'none';
@Input() @Input()
public disableAlias: boolean = false; public disableAlias: boolean = false;
public test: string; public test: string;

10
src/app/general/general.component.html
View File

@ -1,14 +1,14 @@
<div page-content (stickyEmitter)="stickyPageHeader = $event"> <div page-content (stickyEmitter)="stickyPageHeader = $event">
<div header *ngIf="stakeholder"> <div header *ngIf="stakeholder">
<div class="uk-flex uk-flex-middle uk-child-width-1-1 uk-child-width-1-2@m uk-grid" uk-grid> <div class="uk-flex uk-flex-middle uk-grid" uk-grid>
<div class="uk-flex uk-flex-middle uk-margin-top uk-margin-bottom info" [class.uk-active]="stickyPageHeader"> <div class="uk-width-expand uk-flex uk-flex-middle uk-margin-top uk-margin-bottom info" [class.uk-active]="stickyPageHeader">
<img *ngIf="stakeholder.logoUrl" [src]="stakeholder.logoUrl" class="uk-width-small uk-margin-right"> <img *ngIf="stakeholder.logoUrl" [src]="stakeholder.logoUrl" class="uk-width-small uk-margin-right">
<div class="uk-width-expand"> <div class="">
<div class="uk-margin-remove uk-text-primary-gradient uk-text-bold uk-h6">Admin Dashboard - Manage Profile</div> <div class="uk-margin-remove uk-text-primary-gradient uk-text-bold uk-h6">Admin Dashboard - Manage Profile</div>
<h1 class="uk-h4 uk-margin-remove">{{stakeholder.name}}<span *ngIf="editStakeholderComponent && editStakeholderComponent.dirty && !loading" class="uk-text-large"> (unsaved changes)</span></h1> <h1 class="uk-h4 uk-margin-remove">{{stakeholder.name}}<span *ngIf="editStakeholderComponent && editStakeholderComponent.dirty && !loading" class="uk-text-large"> (unsaved changes)</span></h1>
</div> </div>
</div> </div>
<div class="uk-text-right@m uk-text-center"> <div class="uk-width-auto uk-text-right@m uk-text-center">
<button class="uk-button uk-button-secondary outlined uk-margin-right" <button class="uk-button uk-button-secondary outlined uk-margin-right"
(click)="reset()" (click)="reset()"
[disabled]="loading || !editStakeholderComponent.dirty">Reset [disabled]="loading || !editStakeholderComponent.dirty">Reset
@ -21,7 +21,7 @@
</div> </div>
</div> </div>
<div inner> <div inner>
<div *ngIf="stakeholder"> <div *ngIf="stakeholder" class="uk-section">
<div class="uk-position-relative" style="min-height: 60vh"> <div class="uk-position-relative" style="min-height: 60vh">
<div [class.hidden]="loading"> <div [class.hidden]="loading">
<edit-stakeholder #editStakeholderComponent [disableAlias]="true"></edit-stakeholder> <edit-stakeholder #editStakeholderComponent [disableAlias]="true"></edit-stakeholder>

2
src/app/manageStakeholders/manageStakeholders.component.html
View File

@ -146,6 +146,8 @@
id="edit_modal" [large]="true" id="edit_modal" [large]="true"
(alertOutput)="editStakeholderComponent.save(callback)" (alertOutput)="editStakeholderComponent.save(callback)"
[okDisabled]="editStakeholderComponent.disabled"> [okDisabled]="editStakeholderComponent.disabled">
<div class="uk-padding">
<edit-stakeholder #editStakeholderComponent></edit-stakeholder> <edit-stakeholder #editStakeholderComponent></edit-stakeholder>
</div>
</modal-alert> </modal-alert>
<modal-alert #deleteStakeholderModal (alertOutput)="deleteStakeholder()"></modal-alert> <modal-alert #deleteStakeholderModal (alertOutput)="deleteStakeholder()"></modal-alert>

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit f232abb633586ddac145ebad664bef7474d70bc3 Subproject commit d26f56e260a01fdcca40a5fa495c1f67f6b19b9b

2
src/app/users/users.component.html
View File

@ -4,7 +4,7 @@
</div> </div>
</div> </div>
<ng-template #tabs> <ng-template #tabs>
<div class="uk-margin"> <div class="uk-margin uk-margin-remove-bottom">
<ul class="uk-tab"> <ul class="uk-tab">
<li [class.uk-active]="tab === 'manager'"><a routerLink="./"><span class="title">Managers</span></a></li> <li [class.uk-active]="tab === 'manager'"><a routerLink="./"><span class="title">Managers</span></a></li>
<li [class.uk-active]="tab === 'member'"><a routerLink="./" fragment="member"><span class="title">Members</span></a></li> <li [class.uk-active]="tab === 'member'"><a routerLink="./" fragment="member"><span class="title">Members</span></a></li>