admin dashboard - changes for general and users pages -redesign
This commit is contained in:
parent
57b98cd9b5
commit
6fab4e6fea
|
|
@ -22,79 +22,98 @@ declare var UIkit;
|
|||
template: `
|
||||
<div [ngStyle]="{'max-height': maxHeight}"
|
||||
[class.uk-padding-small]="!paddingLarge" [class.uk-padding-large]="paddingLarge"
|
||||
class="uk-overflow-auto uk-padding-remove-bottom">
|
||||
class="uk-overflow-auto uk-padding-remove-bottom uk-padding-remove-horizontal">
|
||||
<form *ngIf="stakeholderFb" [formGroup]="stakeholderFb">
|
||||
<div class="uk-grid" [class.uk-margin-small-bottom]="!paddingLarge"
|
||||
[class.uk-margin-large-bottom]="paddingLarge" uk-grid uk-height-match=".uk-form-hint">
|
||||
<div dashboard-input id="name" class="uk-width-1-2@m" [formInput]="stakeholderFb.get('name')" label="Name"
|
||||
placeholder="Write a name..."
|
||||
hint="Set a name for your profile."></div>
|
||||
<div dashboard-input class="uk-width-1-2@m" [formInput]="stakeholderFb.get('alias')"
|
||||
hint="Set an URL alias for your profile."
|
||||
label="URL Alias" placeholder="Write an alias..."></div>
|
||||
<div dashboard-input class="uk-width-1-3@m" [formInput]="stakeholderFb.get('index_id')"
|
||||
label="Index ID" placeholder="Write index ID.">
|
||||
</div>
|
||||
<div dashboard-input class="uk-width-1-3@m" [formInput]="stakeholderFb.get('index_name')"
|
||||
label="Index Name" placeholder="Write index name.">
|
||||
</div>
|
||||
<div dashboard-input class="uk-width-1-3@m" [formInput]="stakeholderFb.get('index_shortName')"
|
||||
label="Index Short Name" placeholder="Write index short name.">
|
||||
</div>
|
||||
<div dashboard-input class="uk-width-1-1" [type]="'textarea'" placeholder="Write a description..."
|
||||
hint="Write a description for your profile"
|
||||
[rows]="4" [formInput]="stakeholderFb.get('description')" label="Description"></div>
|
||||
<input #file id="photo" type="file" class="uk-hidden" (change)="fileChangeEvent($event)"/>
|
||||
<div dashboard-input class="uk-width-1-1" type="logoURL" flex="top" [hideControl]="stakeholderFb.get('isUpload').value"
|
||||
hint="Upload or link the logo of your profile" [placeholder]="'Write link to the logo'"
|
||||
[formInput]="stakeholderFb.get('logoUrl')" label="Logo">
|
||||
<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-width-3-4@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" [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>
|
||||
<div *ngIf="uploadError" class="uk-text-danger uk-width-1-1">{{uploadError}}</div>
|
||||
<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')"
|
||||
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')"
|
||||
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')"
|
||||
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')"
|
||||
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')"
|
||||
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"
|
||||
[rows]="4" [formInput]="stakeholderFb.get('description')"></div>
|
||||
</div>
|
||||
<div class="uk-width-1-1">
|
||||
<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"
|
||||
[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>
|
||||
<div class="uk-width-3-4@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" [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>
|
||||
<div *ngIf="uploadError" class="uk-text-danger uk-width-1-1">{{uploadError}}</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 dashboard-input [formInput]="stakeholderFb.get('visibility')"
|
||||
[placeholder]="'Select a status'"
|
||||
label="Status" hint="Select the visibility status of your profile"
|
||||
[options]="stakeholderUtils.statuses" type="select">
|
||||
</div>
|
||||
<div dashboard-input [formInput]="stakeholderFb.get('type')"
|
||||
[placeholder]="'Select a type'" hint="Select the type of your profile"
|
||||
label="Type" [options]="types" type="select">
|
||||
</div>
|
||||
<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>
|
||||
<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 [placeholder]="'Select a template'"
|
||||
hint="Select a template for your profile"
|
||||
dashboard-input class="uk-width-1-3@m" [formInput]="stakeholderFb.get('defaultId')"
|
||||
label="Template" [options]="defaultStakeholdersOptions" type="select"></div>
|
||||
<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>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,33 +1,31 @@
|
|||
<div page-content>
|
||||
<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">
|
||||
<img *ngIf="stakeholder.logoUrl" [src]="stakeholder.logoUrl" class="uk-width-small uk-margin-right">
|
||||
<div class="uk-width-expand">
|
||||
<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">
|
||||
<button class="uk-button uk-button-secondary outlined uk-margin-right"
|
||||
(click)="reset()"
|
||||
[disabled]="loading || !editStakeholderComponent.dirty">Reset
|
||||
</button>
|
||||
<button class="uk-button uk-button-secondary"
|
||||
(click)="save()"
|
||||
[disabled]="loading || editStakeholderComponent.disabled">Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div inner>
|
||||
<div *ngIf="stakeholder">
|
||||
<div class="uk-card-header">
|
||||
<div class="uk-flex uk-child-width-1-1 uk-child-width-1-2@m uk-grid" uk-grid>
|
||||
<div>
|
||||
<div class="uk-text-small title">
|
||||
Manage Profile
|
||||
</div>
|
||||
<div>
|
||||
<span class="uk-text-bold">{{stakeholder.name}}</span>
|
||||
<span *ngIf="editStakeholderComponent.dirty && !loading"> (unsaved changes)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="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
|
||||
</button>
|
||||
<button class="uk-button uk-button-secondary"
|
||||
(click)="save()"
|
||||
[disabled]="loading || editStakeholderComponent.disabled">Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-position-relative" style="min-height: 60vh">
|
||||
<div class="uk-position-relative" style="min-height: 60vh">
|
||||
<div [class.hidden]="loading">
|
||||
<edit-stakeholder #editStakeholderComponent [disableAlias]="true"
|
||||
[maxHeight]="'60vh'" [paddingLarge]="true" ></edit-stakeholder>
|
||||
[paddingLarge]="true" ></edit-stakeholder>
|
||||
</div>
|
||||
<div *ngIf="loading" class="uk-position-center">
|
||||
<loading *ngIf="loading"></loading>
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ export class GeneralComponent implements OnInit, OnDestroy {
|
|||
public loading: boolean = false;
|
||||
private subscriptions: any[] = [];
|
||||
@ViewChild('editStakeholderComponent') editStakeholderComponent: EditStakeholderComponent;
|
||||
public stickyPageHeader: boolean = false;
|
||||
|
||||
constructor(private stakeholderService: StakeholderService,
|
||||
private title: Title) {
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
Subproject commit 59ff682af71633c4788f1e8867c9ff2fcff858b9
|
||||
Subproject commit 3fd632a2b754a336615b8a776bea95ee9808e93c
|
||||
|
|
@ -13,9 +13,12 @@
|
|||
</ng-template>
|
||||
<role-users *ngIf="!loading && alias" [id]="alias" [type]="type" [name]="name" [link]="link" [role]="tab" [message]="messages.get(tab)"
|
||||
[emailComposer]="emailComposer" [notificationFn]="notificationFn" (stickyEmitter)="stickyPageHeader = $event">
|
||||
<div class="uk-margin-top info" [class.uk-active]="stickyPageHeader">
|
||||
<div class="uk-margin-remove uk-text-primary-gradient uk-text-bold uk-h6">Admin Dashboard</div>
|
||||
<h1 class="uk-h4 uk-margin-remove">{{name}}</h1>
|
||||
<div class="uk-flex uk-flex-middle uk-margin-top info" [class.uk-active]="stickyPageHeader">
|
||||
<img *ngIf="logo" [src]="logo" class="uk-width-small uk-margin-right">
|
||||
<div class="uk-width-expand">
|
||||
<div class="uk-margin-remove uk-text-primary-gradient uk-text-bold uk-h6">Admin Dashboard</div>
|
||||
<h1 class="uk-h4 uk-margin-remove">{{name}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<ng-container [ngTemplateOutlet]="tabs"></ng-container>
|
||||
</role-users>
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ export class UsersComponent implements OnInit {
|
|||
|
||||
public alias: string;
|
||||
public name: string;
|
||||
public logo: string;
|
||||
public type: string;
|
||||
public link: string;
|
||||
public loading: boolean;
|
||||
|
|
@ -67,6 +68,7 @@ export class UsersComponent implements OnInit {
|
|||
if (stakeholder) {
|
||||
this.alias = stakeholder.alias;
|
||||
this.name = stakeholder.name;
|
||||
this.logo = stakeholder.logoUrl;
|
||||
this.title.setTitle(this.name + " | Users");
|
||||
this.type = stakeholder.type;
|
||||
this.link = this.getURL(this.alias);
|
||||
|
|
|
|||
Loading…
Reference in New Issue