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

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

@ -20,43 +20,72 @@ declare var UIkit;
@Component({
selector: 'edit-stakeholder',
template: `
<div [ngStyle]="{'max-height': maxHeight}" class="uk-overflow-auto">
<div class="uk-overflow-auto">
<form *ngIf="stakeholderFb" [formGroup]="stakeholderFb">
<div class="uk-grid uk-margin-bottom" uk-grid>
<div class="uk-width-1-2@m">
<div class="uk-text-bold uk-form-label uk-margin-small-bottom">Name</div>
<div dashboard-input id="name" [formInput]="stakeholderFb.get('name')"
<div input id="name" [formInput]="stakeholderFb.get('name')"
placeholder="Name"></div>
</div>
<div class="uk-width-1-2@m">
<div class="uk-text-bold uk-form-label uk-margin-small-bottom">URL Alias</div>
<div dashboard-input [formInput]="stakeholderFb.get('alias')"
<div input [formInput]="stakeholderFb.get('alias')"
placeholder="URL Alias"></div>
</div>
<div class="uk-width-1-3@m">
<div class="uk-text-bold uk-form-label uk-margin-small-bottom">Index ID</div>
<div dashboard-input [formInput]="stakeholderFb.get('index_id')"
<div input [formInput]="stakeholderFb.get('index_id')"
placeholder="Index ID"></div>
</div>
<div class="uk-width-1-3@m">
<div class="uk-text-bold uk-form-label uk-margin-small-bottom">Index Name</div>
<div dashboard-input [formInput]="stakeholderFb.get('index_name')"
<div input [formInput]="stakeholderFb.get('index_name')"
placeholder="Index Name"></div>
</div>
<div class="uk-width-1-3@m">
<div class="uk-text-bold uk-form-label uk-margin-small-bottom">Index Short Name</div>
<div dashboard-input [formInput]="stakeholderFb.get('index_shortName')"
<div input [formInput]="stakeholderFb.get('index_shortName')"
placeholder="Index Short Name"></div>
</div>
<div class="uk-width-1-1">
<div class="uk-text-bold uk-form-label uk-margin-small-bottom">Description</div>
<div dashboard-input [type]="'textarea'" placeholder="Description"
<div input [type]="'textarea'" placeholder="Description"
[rows]="4" [formInput]="stakeholderFb.get('description')"></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)"/>
<div class="uk-text-bold uk-form-label uk-margin-small-bottom">Logo</div>
<div dashboard-input class="uk-width-1-1" type="logoURL" flex="top" [hideControl]="stakeholderFb.get('isUpload').value"
<div *ngIf="!stakeholderFb.get('isUpload').value" style="margin-top: 7px;" class="uk-width-1-2@m">
<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')">
<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>
@ -74,7 +103,7 @@ declare var UIkit;
</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" [src]="photo">
<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">
@ -89,39 +118,31 @@ declare var UIkit;
</div>
</div>
<div *ngIf="uploadError" class="uk-text-danger uk-width-1-1">{{uploadError}}</div>
</div> -->
<div [class]="canChooseType ? 'uk-width-1-3@m' : 'uk-width-1-2@m'">
<div input [formInput]="stakeholderFb.get('visibility')"
[placeholder]="'Select a status'"
[options]="stakeholderUtils.statuses" type="select"></div>
</div>
<div class="uk-width-1-1 uk-grid uk-child-width-1-1" [class.uk-child-width-1-2@m]="!canChooseType"
[class.uk-child-width-1-3@m]="canChooseType" uk-grid>
<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'"
[options]="stakeholderUtils.statuses" type="select"></div>
<div [class]="canChooseType ? 'uk-width-1-3@m' : 'uk-width-1-2@m'">
<div input [formInput]="stakeholderFb.get('type')"
[placeholder]="'Select a type'"
[options]="types" type="select"></div>
</div>
<ng-container *ngIf="canChooseType">
<div class="uk-width-1-3@m">
<div [placeholder]="'Select a template'"
input [formInput]="stakeholderFb.get('defaultId')"
[options]="defaultStakeholdersOptions" type="select"></div>
</div>
<div>
<div class="uk-text-bold uk-form-label uk-margin-small-bottom">Type</div>
<div dashboard-input [formInput]="stakeholderFb.get('type')"
[placeholder]="'Select a type'"
[options]="types" type="select"></div>
</div>
<ng-container *ngIf="canChooseType">
<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'"
dashboard-input [formInput]="stakeholderFb.get('defaultId')"
[options]="defaultStakeholdersOptions" type="select"></div>
</div>
</ng-container>
</div>
</ng-container>
</div>
</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>`,
styleUrls: ['edit-stakeholder.component.css']
})
export class EditStakeholderComponent implements OnDestroy {
@Input()
public maxHeight = 'none';
@Input()
public disableAlias: boolean = false;
public test: string;

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

@ -1,14 +1,14 @@
<div page-content (stickyEmitter)="stickyPageHeader = $event">
<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-margin-top uk-margin-bottom info" [class.uk-active]="stickyPageHeader">
<div class="uk-flex uk-flex-middle uk-grid" uk-grid>
<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">
<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>
<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 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"
(click)="reset()"
[disabled]="loading || !editStakeholderComponent.dirty">Reset
@ -21,7 +21,7 @@
</div>
</div>
<div inner>
<div *ngIf="stakeholder">
<div *ngIf="stakeholder" class="uk-section">
<div class="uk-position-relative" style="min-height: 60vh">
<div [class.hidden]="loading">
<edit-stakeholder #editStakeholderComponent [disableAlias]="true"></edit-stakeholder>

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

@ -143,9 +143,11 @@
</div>
</ng-template>
<modal-alert #editStakeholderModal
id="edit_modal" [large]="true"
(alertOutput)="editStakeholderComponent.save(callback)"
[okDisabled]="editStakeholderComponent.disabled">
<edit-stakeholder #editStakeholderComponent></edit-stakeholder>
id="edit_modal" [large]="true"
(alertOutput)="editStakeholderComponent.save(callback)"
[okDisabled]="editStakeholderComponent.disabled">
<div class="uk-padding">
<edit-stakeholder #editStakeholderComponent></edit-stakeholder>
</div>
</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>
<ng-template #tabs>
<div class="uk-margin">
<div class="uk-margin uk-margin-remove-bottom">
<ul class="uk-tab">
<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>