[Monitor Dashboard | Trunk]: Organize new dashboard theme to files
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@59619 d315682c-612b-4755-9ff5-7f18f6832af3pull/1/head
parent
e179a6094c
commit
032752f8a5
@ -0,0 +1,301 @@
|
||||
import {Component, Input} from "@angular/core";
|
||||
import {Stakeholder} from "../../openaireLibrary/monitor/entities/stakeholder";
|
||||
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
|
||||
import {StakeholderUtils} from "../../utils/indicator-utils";
|
||||
import {Option} from "../../openaireLibrary/dashboard/sharedComponents/input/input.component";
|
||||
import {Subscription} from "rxjs";
|
||||
import {EnvProperties} from "../../openaireLibrary/utils/properties/env-properties";
|
||||
import {properties} from "../../../environments/environment";
|
||||
import {StakeholderService} from "../../openaireLibrary/monitor/services/stakeholder.service";
|
||||
import {UtilitiesService} from "../../openaireLibrary/services/utilities.service";
|
||||
|
||||
@Component({
|
||||
selector: 'edit-stakeholder',
|
||||
template: `
|
||||
<div *ngIf="stakeholderFb" [ngStyle]="{'max-height': maxHeight}" class="uk-padding-small uk-overflow-auto" [formGroup]="stakeholderFb">
|
||||
<div class="uk-flex uk-flex-bottom" uk-grid>
|
||||
<div dashboard-input 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>
|
||||
<!-- TODO Add Portal Administrator condition -->
|
||||
<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>
|
||||
<div dashboard-input class="uk-width-1-2@m" [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 class="uk-width-1-2@m" [formInput]="stakeholderFb.get('type')"
|
||||
[placeholder]="'Select a type'" hint="Select the type of your profile"
|
||||
label="Type" [options]="stakeholderUtils.types" type="select">
|
||||
</div>
|
||||
<ng-container *ngIf="!stakeholderFb.get('isDefault').value && isNew && stakeholderFb.get('type').valid">
|
||||
<div *ngIf="defaultStakeholdersOptions.length === 0" class="uk-text-danger uk-width-1-1">No default profiles has been found
|
||||
for this type.
|
||||
</div>
|
||||
<div *ngIf="defaultStakeholdersOptions.length > 0" [placeholder]="'Select a template'"
|
||||
hint="Select a template for your profile"
|
||||
dashboard-input class="uk-width-1-1" [formInput]="stakeholderFb.get('defaultId')"
|
||||
label="Template" [options]="defaultStakeholdersOptions" type="select"></div>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="uk-grid uk-flex uk-flex-center uk-flex-middle" uk-grid>
|
||||
<!--<div class="uk-width-1-5">
|
||||
<img [src]="photo">
|
||||
</div>-->
|
||||
<div *ngIf="!stakeholderFb.get('isUpload').value" class="uk-width-expand">
|
||||
<div dashboard-input [formInput]="stakeholderFb.get('logoUrl')" label="Logo Path/URL">
|
||||
</div>
|
||||
</div>
|
||||
<!--<ng-template #uploadPhoto>
|
||||
<div>
|
||||
<div uk-form-custom class="uk-width-auto">
|
||||
<input id="photo" type="file" (change)="fileChangeEvent($event)"/>
|
||||
<button class="md-btn md-btn-primary md-btn-small" tabindex="-1">Upload</button>
|
||||
</div>
|
||||
<button *ngIf="file || (stakeholder.isUpload && !deleteCurrentPhoto)" class="md-btn md-btn-danger md-btn-small uk-margin-small-left" (click)="remove()">Remove</button>
|
||||
</div>
|
||||
<div *ngIf="uploadError" class="uk-text-danger uk-margin-small-top">{{uploadError}}</div>
|
||||
</ng-template>
|
||||
<div *ngIf="stakeholderFb.get('isUpload').value" class="uk-width-expand uk-text-center">
|
||||
<ng-container [ngTemplateOutlet]="uploadPhoto"></ng-container>
|
||||
</div>-->
|
||||
</div>
|
||||
<!--<div *ngIf="!stakeholderFb.get('isUpload').value" class="uk-text-center uk-margin-bottom">
|
||||
<div>- OR -</div>
|
||||
<div class="uk-margin-small-top">
|
||||
<ng-container [ngTemplateOutlet]="uploadPhoto"></ng-container>
|
||||
</div>
|
||||
</div>-->
|
||||
</div>`
|
||||
})
|
||||
export class EditStakeholderComponent {
|
||||
@Input()
|
||||
public maxHeight = 'none';
|
||||
public stakeholderFb: FormGroup;
|
||||
public stakeholderUtils: StakeholderUtils = new StakeholderUtils();
|
||||
public defaultStakeholdersOptions: Option[];
|
||||
public defaultStakeholders: Stakeholder[];
|
||||
public stakeholders: Stakeholder[];
|
||||
public stakeholder: Stakeholder;
|
||||
public isDefault: boolean;
|
||||
public isNew: boolean;
|
||||
public properties: EnvProperties = properties;
|
||||
private subscriptions: any[] = [];
|
||||
/**
|
||||
* Photo upload
|
||||
* */
|
||||
public file: File;
|
||||
public photo: string | ArrayBuffer;
|
||||
public uploadError: string;
|
||||
public deleteCurrentPhoto: boolean = false;
|
||||
private maxsize: number = 200 * 1024;
|
||||
|
||||
constructor(private fb: FormBuilder,
|
||||
private stakeholderService: StakeholderService,
|
||||
private utilsService: UtilitiesService) {
|
||||
}
|
||||
|
||||
public init(stakeholder: Stakeholder, stakeholders: Stakeholder[], defaultStakeholders: Stakeholder[], isDefault: boolean, isNew: boolean) {
|
||||
this.uploadError = null;
|
||||
this.deleteCurrentPhoto = false;
|
||||
this.stakeholder = stakeholder;
|
||||
this.stakeholders = stakeholders;
|
||||
this.defaultStakeholders = defaultStakeholders;
|
||||
this.isDefault = isDefault;
|
||||
this.isNew = isNew;
|
||||
this.stakeholderFb = this.fb.group({
|
||||
_id: this.fb.control(this.stakeholder._id),
|
||||
defaultId: this.fb.control(this.stakeholder.defaultId),
|
||||
name: this.fb.control(this.stakeholder.name, Validators.required),
|
||||
description: this.fb.control(this.stakeholder.description),
|
||||
index_name: this.fb.control(this.stakeholder.index_name, Validators.required),
|
||||
index_id: this.fb.control(this.stakeholder.index_id, Validators.required),
|
||||
index_shortName: this.fb.control(this.stakeholder.index_shortName, Validators.required),
|
||||
creationDate: this.fb.control(this.stakeholder.creationDate),
|
||||
alias: this.fb.control(this.stakeholder.alias,
|
||||
[
|
||||
Validators.required,
|
||||
this.stakeholderUtils.aliasValidator(
|
||||
(isDefault) ?
|
||||
this.defaultStakeholders.filter(stakeholder => stakeholder.alias !== this.stakeholder.alias) :
|
||||
this.stakeholders.filter(stakeholder => stakeholder.alias !== this.stakeholder.alias)
|
||||
)]
|
||||
),
|
||||
isDefault: this.fb.control(isDefault),
|
||||
visibility: this.fb.control(this.stakeholder.visibility, Validators.required),
|
||||
type: this.fb.control(this.stakeholder.type, Validators.required),
|
||||
topics: this.fb.control(this.stakeholder.topics),
|
||||
managers: this.fb.control(this.stakeholder.managers),
|
||||
isUpload: this.fb.control(this.stakeholder.isUpload),
|
||||
logoUrl: this.fb.control(this.stakeholder.logoUrl),
|
||||
});
|
||||
this.initPhoto();
|
||||
this.subscriptions.push(this.stakeholderFb.get('type').valueChanges.subscribe(value => {
|
||||
this.onTypeChange(value, defaultStakeholders);
|
||||
}));
|
||||
this.subscriptions.push(this.stakeholderFb.get('logoUrl').valueChanges.subscribe(value => {
|
||||
if (value) {
|
||||
this.photo = value;
|
||||
} else {
|
||||
this.photo = 'assets/common-assets/curator-default.png';
|
||||
}
|
||||
}));
|
||||
if (!isDefault) {
|
||||
this.stakeholderFb.setControl('defaultId', this.fb.control(stakeholder.defaultId, Validators.required));
|
||||
}
|
||||
if (isNew) {
|
||||
setTimeout(() => {
|
||||
this.stakeholderFb.get('type').enable();
|
||||
}, 0);
|
||||
} else {
|
||||
if (this.stakeholderFb.value.type) {
|
||||
setTimeout(() => {
|
||||
this.stakeholderFb.get('type').disable();
|
||||
}, 0);
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
this.stakeholderFb.get('type').enable();
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public get disabled(): boolean {
|
||||
return this.stakeholderFb && (this.stakeholderFb.invalid || (this.stakeholderFb.pristine && !this.isNew && !this.file));
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.stakeholderFb = null;
|
||||
this.subscriptions.forEach(subscription => {
|
||||
if (subscription instanceof Subscription) {
|
||||
subscription.unsubscribe();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onTypeChange(value, defaultStakeholders: Stakeholder[]) {
|
||||
this.stakeholderFb.setControl('defaultId', this.fb.control(this.stakeholder.defaultId, Validators.required));
|
||||
this.defaultStakeholdersOptions = [{
|
||||
label: 'New blank profile',
|
||||
value: '-1'
|
||||
}];
|
||||
defaultStakeholders.filter(stakeholder => stakeholder.type === value).forEach(stakeholder => {
|
||||
this.defaultStakeholdersOptions.push({
|
||||
label: 'Use ' + stakeholder.name + ' profile',
|
||||
value: stakeholder._id
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
public save(callback: Function) {
|
||||
if (this.file) {
|
||||
this.utilsService.uploadPhoto(this.properties.utilsService + "/upload/stakeholder/" + encodeURIComponent(this.stakeholder.alias), this.file).subscribe(res => {
|
||||
this.deletePhoto();
|
||||
this.removePhoto();
|
||||
this.stakeholderFb.get('logoUrl').setValue(res.filename);
|
||||
this.saveStakeholder(callback);
|
||||
}, error => {
|
||||
this.uploadError = "An error has been occurred during upload your image. Try again later";
|
||||
this.saveStakeholder(callback);
|
||||
});
|
||||
} else if (this.deleteCurrentPhoto) {
|
||||
this.deletePhoto();
|
||||
this.saveStakeholder(callback);
|
||||
} else {
|
||||
this.saveStakeholder(callback);
|
||||
}
|
||||
}
|
||||
|
||||
public saveStakeholder(callback: Function) {
|
||||
if (this.isNew) {
|
||||
if (!this.stakeholderFb.value.isDefault) {
|
||||
let stakeholder = this.defaultStakeholders.find(value => value._id === this.stakeholderFb.value.defaultId);
|
||||
this.stakeholderFb.setValue(this.stakeholderUtils.createFunderFromDefaultProfile(this.stakeholderFb.value,
|
||||
(stakeholder ? stakeholder.topics : [])));
|
||||
}
|
||||
this.removePhoto();
|
||||
this.stakeholderService.buildStakeholder(this.properties.monitorServiceAPIURL,
|
||||
this.stakeholderFb.value).subscribe(stakeholder => {
|
||||
callback(stakeholder);
|
||||
});
|
||||
} else {
|
||||
this.stakeholderFb.get('type').enable();
|
||||
this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, this.stakeholderFb.value).subscribe(stakeholder => {
|
||||
callback(stakeholder);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
fileChangeEvent(event) {
|
||||
if (event.target.files && event.target.files[0]) {
|
||||
this.file = event.target.files[0];
|
||||
if (this.file.type !== 'image/png' && this.file.type !== 'image/jpeg') {
|
||||
this.uploadError = 'You must choose a file with type: image/png or image/jpeg!';
|
||||
this.stakeholderFb.get('isUpload').setValue(false);
|
||||
this.removePhoto();
|
||||
} else if (this.file.size > this.maxsize) {
|
||||
this.uploadError = 'File exceeds size\'s limit! Maximum resolution is 256x256 pixels.';
|
||||
this.stakeholderFb.get('isUpload').setValue(false);
|
||||
this.removePhoto()
|
||||
} else {
|
||||
this.uploadError = null;
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(this.file);
|
||||
reader.onload = () => {
|
||||
this.photo = reader.result;
|
||||
this.stakeholderFb.get('isUpload').setValue(true);
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
initPhoto() {
|
||||
if (this.stakeholderFb.get('logoUrl').value) {
|
||||
if (!this.stakeholderFb.value.isUpload) {
|
||||
this.photo = this.stakeholderFb.get('logoUrl').value;
|
||||
} else {
|
||||
this.photo = this.properties.utilsService + "/download/" + this.stakeholderFb.get('logoUrl').value;
|
||||
}
|
||||
} else {
|
||||
this.photo = 'assets/common-assets/curator-default.png';
|
||||
}
|
||||
}
|
||||
|
||||
removePhoto() {
|
||||
if (typeof document != 'undefined') {
|
||||
(<HTMLInputElement>document.getElementById("photo")).value = "";
|
||||
}
|
||||
this.initPhoto();
|
||||
this.file = null;
|
||||
}
|
||||
|
||||
remove() {
|
||||
this.stakeholderFb.get('isUpload').setValue(false);
|
||||
if (this.file) {
|
||||
this.removePhoto();
|
||||
}
|
||||
if (this.stakeholder.isUpload) {
|
||||
this.stakeholderFb.get('logoUrl').setValue(null);
|
||||
this.deleteCurrentPhoto = true;
|
||||
}
|
||||
}
|
||||
|
||||
public deletePhoto() {
|
||||
if (this.stakeholder.logoUrl) {
|
||||
this.utilsService.deletePhoto(this.properties.utilsService + '/delete/stakeholder/' + this.stakeholder.logoUrl).subscribe();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
import {NgModule} from "@angular/core";
|
||||
import {EditStakeholderComponent} from "./edit-stakeholder.component";
|
||||
import {CommonModule} from "@angular/common";
|
||||
import {InputModule} from "../../openaireLibrary/dashboard/sharedComponents/input/input.module";
|
||||
import {ReactiveFormsModule} from "@angular/forms";
|
||||
|
||||
@NgModule({
|
||||
imports: [CommonModule, InputModule, ReactiveFormsModule],
|
||||
declarations: [EditStakeholderComponent],
|
||||
exports: [EditStakeholderComponent]
|
||||
})
|
||||
export class EditStakeholderModule {}
|
||||
@ -1,73 +1,79 @@
|
||||
<div id="page_content">
|
||||
<div id="page_content_inner" class="uk-padding-large">
|
||||
|
||||
<modal-alert #editStakeholderModal
|
||||
id="edit_modal"
|
||||
(alertOutput)="save()"
|
||||
[okDisabled]="stakeholderFb && (stakeholderFb.invalid || (stakeholderFb.pristine && index !==-1 && !file))">
|
||||
<div *ngIf="stakeholderFb" class="uk-padding-small" [formGroup]="stakeholderFb">
|
||||
<div class="uk-form-row uk-flex uk-flex-middle uk-child-width-1-2" uk-grid>
|
||||
<div dashboard-input [formInput]="stakeholderFb.get('name')" label="Name"></div>
|
||||
<div dashboard-input [formInput]="stakeholderFb.get('alias')" label="Alias"></div>
|
||||
</div>
|
||||
<div dashboard-input class="uk-form-row" [type]="'textarea'" [rows]="4" [formInput]="stakeholderFb.get('description')" label="Description"></div>
|
||||
<div class="uk-form-row uk-flex uk-flex-middle uk-child-width-1-3" uk-grid>
|
||||
<div dashboard-input [formInput]="stakeholderFb.get('index_id')"
|
||||
label="Index id">
|
||||
</div>
|
||||
<div dashboard-input [formInput]="stakeholderFb.get('index_name')"
|
||||
label="Index name">
|
||||
</div>
|
||||
<div dashboard-input [formInput]="stakeholderFb.get('index_shortName')"
|
||||
label="Index short name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-grid uk-flex uk-flex-center uk-flex-middle" uk-grid>
|
||||
<div class="uk-width-1-5">
|
||||
<img [src]="photo">
|
||||
</div>
|
||||
<div *ngIf="!stakeholderFb.get('isUpload').value" class="uk-width-expand">
|
||||
<div dashboard-input [formInput]="stakeholderFb.get('logoUrl')" label="Logo Path/URL"></div>
|
||||
</div>
|
||||
<ng-template #uploadPhoto>
|
||||
<div>
|
||||
<div uk-form-custom class="uk-width-auto">
|
||||
<input id="photo" type="file" (change)="fileChangeEvent($event)"/>
|
||||
<button class="md-btn md-btn-primary md-btn-small" tabindex="-1">Upload</button>
|
||||
</div>
|
||||
<button *ngIf="file || (stakeholder.isUpload && !deleteCurrentPhoto)" class="md-btn md-btn-danger md-btn-small uk-margin-small-left" (click)="remove()">Remove</button>
|
||||
</div>
|
||||
<div *ngIf="uploadError" class="uk-text-danger uk-margin-small-top">{{uploadError}}</div>
|
||||
</ng-template>
|
||||
<div *ngIf="stakeholderFb.get('isUpload').value" class="uk-width-expand uk-text-center">
|
||||
<ng-container [ngTemplateOutlet]="uploadPhoto"></ng-container>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="!stakeholderFb.get('isUpload').value" class="uk-text-center uk-margin-bottom">
|
||||
<div>- OR -</div>
|
||||
<div class="uk-margin-small-top">
|
||||
<ng-container [ngTemplateOutlet]="uploadPhoto"></ng-container>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-form-row uk-flex uk-flex-middle uk-child-width-1-3" uk-grid>
|
||||
<div dashboard-input [formInput]="stakeholderFb.get('isPublic')"
|
||||
label="Privacy" [options]="stakeholderUtils.isPublic" type="select">
|
||||
</div>
|
||||
<div dashboard-input [formInput]="stakeholderFb.get('isActive')"
|
||||
label="Status" [options]="stakeholderUtils.isActive" type="select">
|
||||
</div>
|
||||
<div dashboard-input [formInput]="stakeholderFb.get('type')"
|
||||
label="Type" [options]="stakeholderUtils.types" type="select">
|
||||
<div id="page_content_inner">
|
||||
<div *ngIf="stakeholderFb" class="uk-padding-small" [formGroup]="stakeholderFb">
|
||||
<div dashboard-input [formInput]="stakeholderFb.get('name')" label="Name"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<modal-alert #editStakeholderModal
|
||||
id="edit_modal"
|
||||
(alertOutput)="save()"
|
||||
[okDisabled]="stakeholderFb && (stakeholderFb.invalid || (stakeholderFb.pristine && index !==-1 && !file))">
|
||||
<div *ngIf="stakeholderFb" class="uk-padding-small" [formGroup]="stakeholderFb">
|
||||
<div class="uk-form-row uk-flex uk-flex-middle uk-child-width-1-2" uk-grid>
|
||||
<div dashboard-input [formInput]="stakeholderFb.get('name')" label="Name"></div>
|
||||
<div dashboard-input [formInput]="stakeholderFb.get('alias')" label="Alias"></div>
|
||||
</div>
|
||||
<div dashboard-input class="uk-form-row" [type]="'textarea'" [rows]="4"
|
||||
[formInput]="stakeholderFb.get('description')" label="Description"></div>
|
||||
<div class="uk-form-row uk-flex uk-flex-middle uk-child-width-1-3" uk-grid>
|
||||
<div dashboard-input [formInput]="stakeholderFb.get('index_id')"
|
||||
label="Index id">
|
||||
</div>
|
||||
<div dashboard-input [formInput]="stakeholderFb.get('index_name')"
|
||||
label="Index name">
|
||||
</div>
|
||||
<div dashboard-input [formInput]="stakeholderFb.get('index_shortName')"
|
||||
label="Index short name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-grid uk-flex uk-flex-center uk-flex-middle" uk-grid>
|
||||
<div class="uk-width-1-5">
|
||||
<img [src]="photo">
|
||||
</div>
|
||||
<div *ngIf="!stakeholderFb.get('isUpload').value" class="uk-width-expand">
|
||||
<div dashboard-input [formInput]="stakeholderFb.get('logoUrl')" label="Logo Path/URL"></div>
|
||||
</div>
|
||||
<ng-template #uploadPhoto>
|
||||
<div>
|
||||
<div uk-form-custom class="uk-width-auto">
|
||||
<input id="photo" type="file" (change)="fileChangeEvent($event)"/>
|
||||
<button class="md-btn md-btn-primary md-btn-small" tabindex="-1">Upload</button>
|
||||
</div>
|
||||
<button *ngIf="file || (stakeholder.isUpload && !deleteCurrentPhoto)"
|
||||
class="md-btn md-btn-danger md-btn-small uk-margin-small-left" (click)="remove()">Remove
|
||||
</button>
|
||||
</div>
|
||||
<div *ngIf="!stakeholderFb.get('isDefault').value && index === -1 && stakeholderFb.get('type').valid">
|
||||
<div *ngIf="defaultStakeholdersOptions.length === 0" class="uk-text-danger">No default profiles has been found for this type.</div>
|
||||
<div *ngIf="defaultStakeholdersOptions.length > 0"
|
||||
dashboard-input class="uk-form-row" [formInput]="stakeholderFb.get('defaultId')"
|
||||
label="Indicators" [options]="defaultStakeholdersOptions" type="select"></div>
|
||||
</div>
|
||||
<div *ngIf="uploadError" class="uk-text-danger uk-margin-small-top">{{uploadError}}</div>
|
||||
</ng-template>
|
||||
<div *ngIf="stakeholderFb.get('isUpload').value" class="uk-width-expand uk-text-center">
|
||||
<ng-container [ngTemplateOutlet]="uploadPhoto"></ng-container>
|
||||
</div>
|
||||
</modal-alert>
|
||||
|
||||
</div>
|
||||
<div *ngIf="!stakeholderFb.get('isUpload').value" class="uk-text-center uk-margin-bottom">
|
||||
<div>- OR -</div>
|
||||
<div class="uk-margin-small-top">
|
||||
<ng-container [ngTemplateOutlet]="uploadPhoto"></ng-container>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-form-row uk-flex uk-flex-middle uk-child-width-1-3" uk-grid>
|
||||
<div dashboard-input [formInput]="stakeholderFb.get('isPublic')"
|
||||
label="Privacy" [options]="stakeholderUtils.isPublic" type="select">
|
||||
</div>
|
||||
<div dashboard-input [formInput]="stakeholderFb.get('isActive')"
|
||||
label="Status" [options]="stakeholderUtils.isActive" type="select">
|
||||
</div>
|
||||
<div dashboard-input [formInput]="stakeholderFb.get('type')"
|
||||
label="Type" [options]="stakeholderUtils.types" type="select">
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="!stakeholderFb.get('isDefault').value && index === -1 && stakeholderFb.get('type').valid">
|
||||
<div *ngIf="defaultStakeholdersOptions.length === 0" class="uk-text-danger">No default profiles has been found for
|
||||
this type.
|
||||
</div>
|
||||
<div *ngIf="defaultStakeholdersOptions.length > 0"
|
||||
dashboard-input class="uk-form-row" [formInput]="stakeholderFb.get('defaultId')"
|
||||
label="Indicators" [options]="defaultStakeholdersOptions" type="select"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</modal-alert>
|
||||
|
||||
@ -0,0 +1,22 @@
|
||||
.uk-dropdown {
|
||||
background-color: white;
|
||||
min-width: 150px;
|
||||
padding: 10px 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.uk-dropdown ul {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.uk-dropdown-nav > li > a, .uk-dropdown-nav > li:hover > a {
|
||||
padding: 4px 10px;
|
||||
color: var(--text-color);
|
||||
font-weight: 400 !important;
|
||||
font-size: var(--small-font-size);
|
||||
}
|
||||
|
||||
.uk-dropdown .uk-nav-divider {
|
||||
margin: 4px 10px;
|
||||
border-color: var(--secondary-color);
|
||||
}
|
||||
@ -0,0 +1,58 @@
|
||||
.uk-form-label {
|
||||
font-size: var(--font-size);
|
||||
font-family: "Roboto", sans-serif;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.uk-form-hint {
|
||||
font-family: "Roboto", sans-serif;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.input-box {
|
||||
background-color: #FAFAFA;
|
||||
border: 1px solid transparent;
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
color: currentColor;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.input-box:focus {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.input-box:not(.uk-form-danger) {
|
||||
border-color: #D1D1D1 !important;
|
||||
}
|
||||
|
||||
.input-box::placeholder {
|
||||
color: rgba(122, 122, 122, 0.7);
|
||||
}
|
||||
|
||||
.input-box .mat-select {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: var(--font-size);
|
||||
}
|
||||
|
||||
.input-box .mat-select-value {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.input-box .mat-form-field-infix {
|
||||
border: none !important;
|
||||
line-height: 30px;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.input-box .mat-form-field-appearance-legacy .mat-form-field-wrapper {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.input-box .mat-form-field-appearance-legacy .mat-form-field-underline {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.input-box .mat-form-field-appearance-legacy .mat-form-field-subscript-wrapper {
|
||||
display: none;
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
@import "variables.css";
|
||||
@import "text.css";
|
||||
@import "structure.css";
|
||||
@import "input.css";
|
||||
@import "tabs-pills.css";
|
||||
@import "card.css";
|
||||
@import "dropdowns.css";
|
||||
@ -0,0 +1,111 @@
|
||||
:root {
|
||||
--sidebar-width: 320px;
|
||||
--sidebar-mini-width: 130px;
|
||||
--sidebar-font-size: 14px;
|
||||
--header-height: 100px;
|
||||
--background-color: #F9FBFC;
|
||||
}
|
||||
|
||||
#sidebar_main .badge {
|
||||
height: 59px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -5px;
|
||||
z-index: 1;
|
||||
background-color: transparent;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
#sidebar_main #sidebar_content {
|
||||
width: var(--sidebar-width);
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 981;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.sidebar_main_swipe.sidebar_mini #sidebar_switcher_toggle {
|
||||
left: calc(var(--sidebar-mini-width) + 0px);
|
||||
|
||||
}
|
||||
|
||||
.sidebar_main_swipe #sidebar_switcher_toggle {
|
||||
left: calc(var(--sidebar-width) + 0px);
|
||||
}
|
||||
|
||||
#sidebar_main .menu_section > ul > li > a {
|
||||
font-size: var(--sidebar-font-size);
|
||||
color: rgba(0, 0, 0, .7);
|
||||
}
|
||||
|
||||
#sidebar_main .menu_section > ul > li > a:hover, #sidebar_main .menu_section > ul li.current_section > a {
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
|
||||
#sidebar_switcher_toggle {
|
||||
top: 320px !important;
|
||||
position: fixed;
|
||||
background: #ffffff;
|
||||
border: 1px solid var(--portal-dark-color);
|
||||
border-left: 0;
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
width: 10px;
|
||||
height: 66px;
|
||||
z-index: 981;
|
||||
}
|
||||
|
||||
.sidebar_main_swipe #page_content {
|
||||
padding-left: var(--sidebar-width);
|
||||
padding-top: var(--header-height);
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
/*Sidebar close*/
|
||||
.sidebar_main_swipe:not(.sidebar_main_active):not(.sidebar_mini) #page_content {
|
||||
padding-left: 0;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.sidebar_main_swipe:not(.sidebar_main_active):not(.sidebar_mini) #sidebar_main #sidebar_content {
|
||||
display: none;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.sidebar_main_swipe:not(.sidebar_main_active):not(.sidebar_mini) #sidebar_switcher_toggle {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
/*Sidebar mini*/
|
||||
.sidebar_main_swipe.sidebar_mini #page_content {
|
||||
padding-left: var(--sidebar-mini-width);
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.sidebar_mini #sidebar_main #sidebar_content {
|
||||
width: var(--sidebar-mini-width);
|
||||
}
|
||||
|
||||
#sidebar_main .menu_section > ul > li > a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#sidebar_main #sidebar_content {
|
||||
border-right: 1px solid var(--portal-dark-color);
|
||||
}
|
||||
|
||||
#page_content {
|
||||
min-height: calc(100vh - var(--header-height));
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
#page_content_inner {
|
||||
padding: 50px 50px 100px 50px;
|
||||
}
|
||||
|
||||
navbar > * {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
@ -0,0 +1,20 @@
|
||||
:root {
|
||||
--font-size: 16px;
|
||||
--text-color: #212121;
|
||||
--small-font-size: 14px;
|
||||
--large-font-size: 18px;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--text-color);
|
||||
font-size: var(--font-size);
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
|
||||
.uk-text-small {
|
||||
font-size: var(--small-font-size);
|
||||
}
|
||||
|
||||
.uk-text-large {
|
||||
font-size: var(--large-font-size);
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
:root {
|
||||
--portal-main-color: #8DCA26;
|
||||
--portal-main-contrast: white;
|
||||
--portal-dark-color: #7c9144;
|
||||
--primary-color: var(--theme-primary-color);
|
||||
--secondary-color: var(--theme-secondary-color);
|
||||
--contrast-color: white;
|
||||
|
||||
/* Portable Variables*/
|
||||
--theme-primary-color: #222080;
|
||||
--theme-secondary-color: #4686E5;
|
||||
--openaire-main-color: #313179;
|
||||
--explore-portal-color: #D95F2D;
|
||||
--provide-portal-color: #37C7E9;
|
||||
--monitor-portal-color: #8DCA26;
|
||||
--connect-portal-color: #EBB13E;
|
||||
--develop-portal-color: #DA65AB;
|
||||
|
||||
--explore-portal-lower-tone: #a0462c;
|
||||
--provide-portal-lower-tone: #3A8FA3;
|
||||
--monitor-portal-lower-tone: #7c9144;
|
||||
--connect-portal-lower-tone: #b48536;
|
||||
--develop-portal-lower-tone: #9f4e7e;
|
||||
}
|
||||
Loading…
Reference in New Issue