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

Fix bug with dropdown after dragging event ends

This commit is contained in:
Konstantinos Triantafyllou 2022-06-21 14:39:27 +03:00
parent 1157e6ee13
commit 0c3c3b408b
2 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -36,9 +36,9 @@
<div *ngIf="indicator" [id]="indicator._id" <div *ngIf="indicator" [id]="indicator._id"
[ngClass]="getNumberClassBySize(indicator.width)"> [ngClass]="getNumberClassBySize(indicator.width)">
<div class="uk-card uk-card-default uk-card-body uk-flex uk-flex-column uk-flex-center uk-position-relative"> <div class="uk-card uk-card-default uk-card-body uk-flex uk-flex-column uk-flex-center uk-position-relative">
<div [attr.uk-tooltip]="exportLoading ? 'title:Edit is disabled, while exporting indicators; cls:uk-active' : 'cls: uk-invisible'" <div *ngIf="!dragging"
class="uk-position-top-right uk-margin-small-right uk-margin-small-top"> class="uk-position-top-right uk-margin-small-right uk-margin-small-top">
<a class="uk-link-reset uk-flex uk-flex-middle"> <a class="uk-link-reset uk-flex uk-flex-middle" [class.uk-disabled]="editing">
<icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)" ratio="0.6"></icon> <icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)" ratio="0.6"></icon>
<icon [flex]="true" name="more_vert"></icon> <icon [flex]="true" name="more_vert"></icon>
</a> </a>
@ -137,9 +137,9 @@
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index"> <ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
<div *ngIf="indicator" [id]="indicator._id" [ngClass]="getChartClassBySize(indicator.width)"> <div *ngIf="indicator" [id]="indicator._id" [ngClass]="getChartClassBySize(indicator.width)">
<div class="uk-card uk-card-default uk-card-body uk-position-relative"> <div class="uk-card uk-card-default uk-card-body uk-position-relative">
<div [attr.uk-tooltip]="exportLoading ? 'title:Edit is disabled, while exporting indicators; cls:uk-active' : 'cls: uk-invisible'" <div *ngIf="!dragging"
class="uk-position-top-right uk-margin-small-right uk-margin-small-top"> class="uk-position-top-right uk-margin-small-right uk-margin-small-top">
<a class="uk-link-reset uk-flex uk-flex-middle"> <a class="uk-link-reset uk-flex uk-flex-middle" [class.uk-disabled]="editing">
<icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)" ratio="0.6"></icon> <icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)" ratio="0.6"></icon>
<icon [flex]="true" name="more_vert"></icon> <icon [flex]="true" name="more_vert"></icon>
</a> </a>

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

@ -75,13 +75,13 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
public indicator: Indicator; public indicator: Indicator;
public index: number = -1; public index: number = -1;
public editing: boolean = false; public editing: boolean = false;
public dragging: boolean = false;
/** Caches */ /** Caches */
public safeUrls: Map<string, SafeResourceUrl> = new Map<string, SafeResourceUrl>([]); public safeUrls: Map<string, SafeResourceUrl> = new Map<string, SafeResourceUrl>([]);
public numberResponses: Map<string, any> = new Map<string, any>(); public numberResponses: Map<string, any> = new Map<string, any>();
public numberResults: Map<string, number> = new Map<string, number>(); public numberResults: Map<string, number> = new Map<string, number>();
/** Import / Export Indicators */ /** Import / Export Indicators */
importLoading: boolean = false; importLoading: boolean = false;
exportLoading: boolean = false;
@ViewChild('editChartModal', {static: true}) editChartModal: AlertModal; @ViewChild('editChartModal', {static: true}) editChartModal: AlertModal;
@ViewChild('editNumberModal', {static: true}) editNumberModal: AlertModal; @ViewChild('editNumberModal', {static: true}) editNumberModal: AlertModal;
@ViewChild('deleteModal', {static: true}) deleteModal: AlertModal; @ViewChild('deleteModal', {static: true}) deleteModal: AlertModal;
@ -182,6 +182,12 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
this.reorderIndicators(list.current.id.toString().split('-')[1], type, reorder); this.reorderIndicators(list.current.id.toString().split('-')[1], type, reorder);
}; };
this.numbers.forEach((section) => { this.numbers.forEach((section) => {
this.subscriptions.push(UIkit.util.on(document, 'start', '#number-' + section._id, (): void => {
this.dragging = true;
}));
this.subscriptions.push(UIkit.util.on(document, 'stop', '#number-' + section._id, (): void => {
this.dragging = false;
}));
this.subscriptions.push(UIkit.util.on(document, 'moved', '#number-' + section._id, (list): void => { this.subscriptions.push(UIkit.util.on(document, 'moved', '#number-' + section._id, (list): void => {
callback(list, "number", 'moved'); callback(list, "number", 'moved');
})); }));
@ -1281,7 +1287,6 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
public exportIndicators() { public exportIndicators() {
this.editing = true; this.editing = true;
this.exportLoading = true;
let indicators = []; let indicators = [];
let index: number = 0; let index: number = 0;
this.numbers.forEach(section => { this.numbers.forEach(section => {
@ -1329,7 +1334,6 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
a.remove(); // remove the element a.remove(); // remove the element
this.editing = false; this.editing = false;
this.exportLoading = false;
} }
fileChangeEvent(fileInput: any, index) { fileChangeEvent(fileInput: any, index) {
@ -1364,7 +1368,6 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
return; return;
} }
} }
// this.loading.open();
this.makeFileRequest(this.properties.utilsService + '/upload?type=json', [], this.filesToUpload).then(async (result: string) => { this.makeFileRequest(this.properties.utilsService + '/upload?type=json', [], this.filesToUpload).then(async (result: string) => {