[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:
parent
7cd493edb4
commit
498019914b
|
@ -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">
|
||||
|
|
|
@ -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() {
|
||||
|
@ -315,7 +331,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
|
|||
|
||||
public editChartIndicatorOpen(id = null) {
|
||||
this.urlSubscriptions.forEach(value => {
|
||||
if(value instanceof Subscriber) {
|
||||
if (value instanceof Subscriber) {
|
||||
value.unsubscribe();
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue