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

[Monitor Dashboard | Trunk]: Reorder indicators: enable by long click 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@57888 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantinos Triantafyllou 2019-12-15 21:25:56 +00:00
parent 7cd493edb4
commit 498019914b
3 changed files with 469 additions and 452 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/topic/indicators.component.html
View File

@ -58,8 +58,9 @@
<div *ngIf="indicator" [id]="indicator._id"
[class.uk-width-1-3@m]="grid && indicator.width === 'small'"
[class.uk-width-1-2@m]="grid && indicator.width === 'medium'"
[class.uk-width-1-1@m]="!grid || indicator.width === 'large'">
<div class="md-card" [class.uk-sortable-nodrag]="!canNumbersReorder">
[class.uk-width-1-1@m]="!grid || indicator.width === 'large'"
long-click (onLongPress)="onLongPress('number')">
<div class="md-card" [class.md-card-hover]="canNumbersReorder" [class.uk-sortable-nodrag]="!canNumbersReorder">
<div class="md-card-toolbar">
<div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
<span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
@ -122,8 +123,9 @@
<div *ngIf="indicator" [id]="indicator._id"
[class.uk-width-1-3@m]="grid && indicator.width === 'small'"
[class.uk-width-1-2@m]="grid && indicator.width === 'medium'"
[class.uk-width-1-1@m]="!grid || indicator.width === 'large'">
<div class="md-card" [class.uk-sortable-nodrag]="!canChartsReorder">
[class.uk-width-1-1@m]="!grid || indicator.width === 'large'"
long-click (onLongPress)="onLongPress()">
<div class="md-card" [class.md-card-hover]="canChartsReorder" [class.uk-sortable-nodrag]="!canChartsReorder">
<div class="md-card-toolbar">
<div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
<ng-template [ngIf]="!grid">

22
src/app/topic/indicators.component.ts
View File

@ -50,9 +50,11 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
label: 'All'
};
/**
* Grid or List View
* Toggles
*/
public grid: boolean = true;
public numberReorder: boolean = false;
public chartReorder: boolean = false;
private subscriptions: any[] = [];
private urlSubscriptions: any[] = [];
@ViewChild('editIndicatorModal') editIndicatorModal: AlertModal;
@ -93,6 +95,12 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
};
this.subscriptions.push(UIkit.util.on(document, 'moved', '#chart', callback));
this.subscriptions.push(UIkit.util.on(document, 'moved', '#number', callback));
this.subscriptions.push(UIkit.util.on(document, 'stop', '#chart', (): void => {
this.chartReorder = false;
}));
this.subscriptions.push(UIkit.util.on(document, 'stop', '#number', (): void => {
this.numberReorder = false;
}));
}
}
@ -155,6 +163,14 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
this.filters.value.privacy);
}
onLongPress(type = 'chart') {
if(type === 'number') {
this.numberReorder = true;
} else {
this.chartReorder = true;
}
}
onChartTypeChange(value) {
this.displayCharts = this.filterChartType(this.charts, value);
}
@ -229,11 +245,11 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
}
get canNumbersReorder(): boolean {
return this.displayNumbers.length === this.numbers.length;
return this.numberReorder && this.displayNumbers.length === this.numbers.length && this.grid;
}
get canChartsReorder(): boolean {
return this.displayCharts.length === this.charts.length;
return this.chartReorder && this.displayCharts.length === this.charts.length && this.grid;
}
get canEdit() {

3
src/app/topic/topic.module.ts
View File

@ -12,13 +12,12 @@ import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {IndicatorsComponent} from "./indicators.component";
import {AlertModalModule} from "../openaireLibrary/utils/modal/alertModal.module";
import {InputModule} from "../library/sharedComponents/input/input.module";
import {DragDropModule} from "@angular/cdk/drag-drop";
import {ClickModule} from "../openaireLibrary/utils/click/click.module";
@NgModule({
imports: [
CommonModule, TopicRoutingModule, ClickModule, RouterModule, FormsModule, AlertModalModule,
ReactiveFormsModule, InputModule, DragDropModule
ReactiveFormsModule, InputModule
],
declarations: [
TopicComponent, IndicatorsComponent