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

[Monitor Dashboard | Trunk]: Indicators: Add editing status to prevent actions while editing 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@58933 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantinos Triantafyllou 2020-06-16 08:23:51 +00:00
parent ce1719504c
commit 145f1676ca
2 changed files with 40 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -70,9 +70,9 @@
uk-sortable="group: number" uk-grid>
<div *ngIf="grid" class="tools disable-sortable uk-sortable-nodrag">
<div class="md-btn-group">
<button class="md-btn md-btn-mini" (click)="createSection(i, 'number')"><i class="material-icons">add</i></button>
<button [disabled]="editing" class="md-btn md-btn-mini" (click)="createSection(i, 'number')"><i class="material-icons">add</i></button>
<!--<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>-->
<button class="md-btn md-btn-mini" (click)="deleteNumberSectionOpen(number, i)"><i class="material-icons">clear</i>
<button [disabled]="editing" class="md-btn md-btn-mini" (click)="deleteNumberSectionOpen(number, i)"><i class="material-icons">clear</i>
</button>
</div>
</div>
@ -82,7 +82,7 @@
<div dashboard-input class="uk-width-2-3 uk-width-1-3@m" [formInput]="numberSections.at(i).get('title')"
label="Add a section title"></div>
<div class="uk-width-expand">
<button *ngIf="numberSections.at(i).dirty" class="md-btn"
<button *ngIf="numberSections.at(i).dirty" class="md-btn" [disabled]="editing"
(click)="saveSection(numberSections.at(i).value, i, 'number')">
Save
</button>
@ -117,16 +117,16 @@
<div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false"
class="uk-padding-remove-horizontal">
<ul class="uk-nav uk-dropdown-nav">
<li *ngIf="isAdministrator"><a
<li *ngIf="isAdministrator && !editing"><a
(click)="editNumberIndicatorOpen(number, indicator._id)">Edit</a></li>
<li><a (click)="toggleIndicatorStatus(number._id, indicator);hide(element)">
<li *ngIf="!editing"><a (click)="toggleIndicatorStatus(number._id, indicator);hide(element)">
{{indicator.isActive ? 'Inactive' : 'Active'}}</a>
</li>
<li><a (click)="toggleIndicatorAccess(number._id, indicator);hide(element)">
<li *ngIf="!editing"><a (click)="toggleIndicatorAccess(number._id, indicator);hide(element)">
{{indicator.isPublic ? 'Private' : 'Public'}}</a>
</li>
<hr *ngIf="isAdministrator" class="uk-nav-divider">
<li *ngIf="isAdministrator"><a
<li *ngIf="isAdministrator && !editing"><a
(click)="deleteIndicatorOpen(number, indicator._id, 'number');hide(element)">Delete</a>
</li>
</ul>
@ -202,9 +202,9 @@
uk-sortable="group: chart" uk-grid>
<div *ngIf="grid" class="tools disable-sortable uk-sortable-nodrag">
<div class="md-btn-group">
<button class="md-btn md-btn-mini" (click)="createSection(i)"><i class="material-icons">add</i></button>
<button [disabled]="editing" class="md-btn md-btn-mini" (click)="createSection(i)"><i class="material-icons">add</i></button>
<!--<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>-->
<button class="md-btn md-btn-mini" (click)="deleteChartSectionOpen(chart, i)"><i class="material-icons">clear</i>
<button [disabled]="editing" class="md-btn md-btn-mini" (click)="deleteChartSectionOpen(chart, i)"><i class="material-icons">clear</i>
</button>
</div>
</div>
@ -214,7 +214,7 @@
<div dashboard-input class="uk-width-2-3 uk-width-1-3@m" [formInput]="chartSections.at(i).get('title')"
label="Add a section title"></div>
<div class="uk-width-expand">
<button *ngIf="chartSections.at(i).dirty" class="md-btn"
<button *ngIf="chartSections.at(i).dirty" class="md-btn" [disabled]="editing"
(click)="saveSection(chartSections.at(i).value, i)">
Save
</button>
@ -262,15 +262,15 @@
<div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false"
class="uk-padding-remove-horizontal">
<ul class="uk-nav uk-dropdown-nav">
<li><a (click)="editChartIndicatorOpen(chart, indicator._id);hide(element)">Edit</a></li>
<li><a (click)="toggleIndicatorStatus(chart._id, indicator);hide(element)">
<li *ngIf="editing"><a (click)="editChartIndicatorOpen(chart, indicator._id);hide(element)">Edit</a></li>
<li *ngIf="editing"><a (click)="toggleIndicatorStatus(chart._id, indicator);hide(element)">
{{indicator.isActive ? 'Inactive' : 'Active'}}</a>
</li>
<li><a (click)="toggleIndicatorAccess(chart._id, indicator);hide(element)">
<li *ngIf="editing"><a (click)="toggleIndicatorAccess(chart._id, indicator);hide(element)">
{{indicator.isPublic ? 'Private' : 'Public'}}</a>
</li>
<hr class="uk-nav-divider">
<li><a (click)="deleteIndicatorOpen(chart, indicator._id);hide(element)">Delete</a></li>
<li *ngIf="editing"><a (click)="deleteIndicatorOpen(chart, indicator._id);hide(element)">Delete</a></li>
</ul>
</div>
</div>
@ -349,7 +349,7 @@
</ng-template>
<div *ngIf="grid" class="new-section uk-margin-top">
<div class="tools uk-flex uk-flex-middle">
<button class="md-btn uk-margin-small-right" (click)="createSection()">
<button [disabled]="editing" class="md-btn uk-margin-small-right" (click)="createSection()">
<i class="material-icons md-24 md-color-white">add</i>
</button>
<span>Create a new section</span>

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

@ -73,7 +73,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
* Toggles
*/
public grid: boolean = true;
private reordering: boolean = false;
private editing: boolean = false;
/** Safe Urls*/
public safeUrls: Map<string, SafeResourceUrl> = new Map<string, SafeResourceUrl>([]);
@ -150,7 +150,6 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
reordered.push(items.item(i).id);
}
}
this.reordering = true;
this.reorderIndicators(list.current.id.toString().split('-')[1], type, reordered);
};
this.numbers.forEach((section) => {
@ -351,7 +350,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
get canReorder(): boolean {
return this.filters.value.chartType === 'all' && this.filters.value.privacy === 'all' &&
this.filters.value.status === 'all' && this.filters.value.keyword === '' && this.grid && !this.reordering;
this.filters.value.status === 'all' && this.filters.value.keyword === '' && this.grid && !this.editing;
}
get canEdit() {
@ -607,6 +606,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
}
saveIndicator() {
this.editing = true;
if (this.indicator.type === 'chart') {
this.indicator = this.indicatorUtils.generateIndicatorByForm(this.chartIndicatorFb.value, this.indicator.indicatorPaths);
this.section = this.charts.find(section => section._id === this.section._id);
@ -633,6 +633,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
timeout: 3000,
pos: 'top-left'
});
this.editing = false;
}, error => {
this.chartIndicatorFb = null;
UIkit.notification(error.error.message, {
@ -640,10 +641,12 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
timeout: 3000,
pos: 'top-left'
});
this.editing = false;
});
}
reorderIndicators(sectionId: string, type: IndicatorType, indicatorIds: string[]) {
this.editing = true;
let path = [
this.stakeholder._id,
this.stakeholder.topics[this.topicIndex]._id,
@ -659,7 +662,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
this.numbers.find(section => section._id === sectionId).indicators = indicators;
this.filterNumbers();
}
this.reordering = false;
this.editing = false;
});
}
@ -702,6 +705,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
}
deleteIndicator() {
this.editing = true;
let path = [
this.stakeholder._id,
this.stakeholder.topics[this.topicIndex]._id,
@ -723,16 +727,19 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
timeout: 3000,
pos: 'top-left'
});
this.editing = false;
}, error => {
UIkit.notification(error.error.message, {
status: 'danger',
timeout: 3000,
pos: 'top-left'
});
this.editing = false;
});
}
toggleIndicatorStatus(sectionId: string, indicator: Indicator) {
this.editing = true;
let path = [
this.stakeholder._id,
this.stakeholder.topics[this.topicIndex]._id,
@ -748,16 +755,19 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
timeout: 3000,
pos: 'top-left'
});
this.editing = false;
}, error => {
UIkit.notification(error.error.message, {
status: 'danger',
timeout: 3000,
pos: 'top-left'
});
this.editing = false;
});
}
toggleIndicatorAccess(sectionId: string, indicator: Indicator) {
this.editing = true;
let path = [
this.stakeholder._id,
this.stakeholder.topics[this.topicIndex]._id,
@ -773,16 +783,19 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
timeout: 3000,
pos: 'top-left'
});
this.editing = false;
}, error => {
UIkit.notification(error.error.message, {
status: 'danger',
timeout: 3000,
pos: 'top-left'
});
this.editing = false;
});
}
saveSection(section: Section, index: number, type: IndicatorType = "chart") {
this.editing = true;
let path = [
this.stakeholder._id,
this.stakeholder.topics[this.topicIndex]._id,
@ -803,16 +816,19 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
timeout: 3000,
pos: 'top-left'
});
this.editing = false;
}, error => {
UIkit.notification(error.error.message, {
status: 'danger',
timeout: 3000,
pos: 'top-left'
});
this.editing = false;
});
}
createSection(index = -1, type: IndicatorType = 'chart') {
this.editing = true;
this.section = new Section(type, null, null, this.stakeholder.alias);
let path = [
this.stakeholder._id,
@ -842,12 +858,14 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
timeout: 3000,
pos: 'top-left'
});
this.editing = false;
}, error => {
UIkit.notification(error.error.message, {
status: 'danger',
timeout: 3000,
pos: 'top-left'
});
this.editing = false;
});
}
@ -870,6 +888,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
}
deleteSection(type: IndicatorType = 'chart') {
this.editing = true;
let path = [
this.stakeholder._id,
this.stakeholder.topics[this.topicIndex]._id,
@ -891,12 +910,14 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
timeout: 3000,
pos: 'top-left'
});
this.editing = false;
}, error => {
UIkit.notification(error.error.message, {
status: 'danger',
timeout: 3000,
pos: 'top-left'
});
this.editing = false;
});
}
}