[new-order | DONE]: Add new move indicator method when an indicator moved to another section

This commit is contained in:
Konstantinos Triantafyllou 2024-04-05 10:57:39 +03:00
parent 828dfc0671
commit d63092cd9e
3 changed files with 57 additions and 55 deletions

View File

@ -236,13 +236,6 @@
<a class="uk-link-reset" (click)="copyToClipboard(indicatorPath.get('url').value)"><icon [flex]="true" name="content_copy"></icon></a> <a class="uk-link-reset" (click)="copyToClipboard(indicatorPath.get('url').value)"><icon [flex]="true" name="content_copy"></icon></a>
</div> </div>
</div> </div>
<div *ngIf="showCheckForSchemaEnhancements" class="uk-width-1-1">
<div class="uk-alert uk-alert-warning">
There are schema enhancements that can be applied in this query.<a
(click)="indicatorPath.get('url').setValue(indicatorUtils.applySchemaEnhancements(indicatorPath.get('url').value)); indicatorPath.get('url').markAsDirty()">Apply
now</a>
</div>
</div>
<div class="uk-width-1-2@m"> <div class="uk-width-1-2@m">
<div input [formInput]="indicatorPath.get('source')" placeholder="Source" <div input [formInput]="indicatorPath.get('source')" placeholder="Source"
[options]="isAdministrator?indicatorUtils.allSourceTypes:indicatorUtils.sourceTypes" type="select"> [options]="isAdministrator?indicatorUtils.allSourceTypes:indicatorUtils.sourceTypes" type="select">
@ -373,13 +366,6 @@
<a class="uk-link-reset" (click)="copyToClipboard(indicatorPath.get('url').value)"><icon [flex]="true" name="content_copy"></icon></a> <a class="uk-link-reset" (click)="copyToClipboard(indicatorPath.get('url').value)"><icon [flex]="true" name="content_copy"></icon></a>
</div> </div>
</div> </div>
<div *ngIf="showCheckForSchemaEnhancements" class=" uk-width-1-1 ">
<div class="uk-alert uk-alert-warning">
There are schema enhancements that can be applied in this query. <a
(click)="indicatorPath.get('url').setValue(indicatorUtils.applySchemaEnhancements(indicatorPath.get('url').value)); indicatorPath.get('url').markAsDirty()">Apply
now</a>
</div>
</div>
<div class="uk-width-1-1" formArrayName="parameters"> <div class="uk-width-1-1" formArrayName="parameters">
<div class="uk-grid" uk-grid> <div class="uk-grid" uk-grid>
<div *ngIf="getParameter(i, 'title')" input class="uk-width-1-1" [formInput]="getParameter(i, 'title').get('value')" <div *ngIf="getParameter(i, 'title')" input class="uk-width-1-1" [formInput]="getParameter(i, 'title').get('value')"

View File

@ -31,8 +31,8 @@ import {AlertModal} from "../../utils/modal/alert";
import {StatisticsService} from "../utils/services/statistics.service"; import {StatisticsService} from "../utils/services/statistics.service";
import {HelperFunctions} from "../../utils/HelperFunctions.class"; import {HelperFunctions} from "../../utils/HelperFunctions.class";
import {DomSanitizer, SafeResourceUrl} from "@angular/platform-browser"; import {DomSanitizer, SafeResourceUrl} from "@angular/platform-browser";
import {Reorder, StakeholderService} from "../../monitor/services/stakeholder.service"; import {MoveIndicator, SectionInfo, StakeholderService} from "../../monitor/services/stakeholder.service";
import {Observable, Subscriber} from "rxjs"; import {BehaviorSubject, Observable, Subscriber} from "rxjs";
import {LayoutService} from "../../dashboard/sharedComponents/sidebar/layout.service"; import {LayoutService} from "../../dashboard/sharedComponents/sidebar/layout.service";
import {Router} from "@angular/router"; import {Router} from "@angular/router";
import {Role, Session, User} from "../../login/utils/helper.class"; import {Role, Session, User} from "../../login/utils/helper.class";
@ -82,6 +82,8 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
public index: number = -1; public index: number = -1;
public editing: boolean = false; public editing: boolean = false;
public dragging: boolean = false; public dragging: boolean = false;
/* Reorder indicators */
public to: BehaviorSubject<SectionInfo> = new BehaviorSubject<SectionInfo>(null);
/** 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>();
@ -94,8 +96,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
public sectionTypeToDelete: string; public sectionTypeToDelete: string;
public sectionChildrenActionOnDelete: string; public sectionChildrenActionOnDelete: string;
public indicatorChildrenActionOnDelete: string; public indicatorChildrenActionOnDelete: string;
urlParameterizedMessage = null; public urlParameterizedMessage = null;
showCheckForSchemaEnhancements: boolean = false;
private notification: Notification; private notification: Notification;
@ViewChild('editNumberNotify', {static: true}) editNumberNotify: NotifyFormComponent; @ViewChild('editNumberNotify', {static: true}) editNumberNotify: NotifyFormComponent;
@ViewChild('editChartNotify', {static: true}) editChartNotify: NotifyFormComponent; @ViewChild('editChartNotify', {static: true}) editChartNotify: NotifyFormComponent;
@ -124,7 +125,6 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
private notificationService: NotificationService, private notificationService: NotificationService,
private fb: UntypedFormBuilder, private fb: UntypedFormBuilder,
protected _router: Router, protected _router: Router,
private cdr: ChangeDetectorRef,
private sanitizer: DomSanitizer) { private sanitizer: DomSanitizer) {
super() super()
this.filesToUpload = []; this.filesToUpload = [];
@ -186,7 +186,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
} }
}); });
if (document !== undefined) { if (document !== undefined) {
let callback = (list, type: IndicatorType, action: 'moved' | 'added' | 'removed'): void => { let callback = (list): string[] => {
let items: HTMLCollection = list.current.children; let items: HTMLCollection = list.current.children;
let reordered = []; let reordered = [];
for (let i = 0; i < items.length; i++) { for (let i = 0; i < items.length; i++) {
@ -194,12 +194,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
reordered.push(items.item(i).id); reordered.push(items.item(i).id);
} }
} }
let reorder: Reorder = { return reordered;
action: action,
target: list.detail[1].id,
ids: reordered
}
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.subscriptions.push(UIkit.util.on(document, 'start', '#number-' + section._id, (): void => {
@ -209,24 +204,32 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
this.dragging = false; 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'); this.reorderIndicators(section._id, 'number', callback(list));
})); }));
this.subscriptions.push(UIkit.util.on(document, 'added', '#number-' + section._id, (list): void => { this.subscriptions.push(UIkit.util.on(document, 'added', '#number-' + section._id, (list): void => {
callback(list, "number", 'added'); this.to.next({id: section._id, indicators: callback(list)});
})); }));
this.subscriptions.push(UIkit.util.on(document, 'removed', '#number-' + section._id, (list): void => { this.subscriptions.push(UIkit.util.on(document, 'removed', '#number-' + section._id, (list): void => {
callback(list, "number", 'removed'); let sub = this.to.asObservable().subscribe(to => {
if(to) {
let from: SectionInfo = {id: section._id, indicators: callback(list)};
this.moveIndicator({target: list.detail[1].id, from: from, to: to});
setTimeout(() => {
sub.unsubscribe();
})
}
})
})); }));
}); });
this.charts.forEach((section) => { this.charts.forEach((section) => {
this.subscriptions.push(UIkit.util.on(document, 'moved', '#chart-' + section._id, (list): void => { this.subscriptions.push(UIkit.util.on(document, 'moved', '#chart-' + section._id, (list): void => {
callback(list, "chart", 'moved'); this.reorderIndicators(section._id, 'chart', callback(list));
})); }));
this.subscriptions.push(UIkit.util.on(document, 'added', '#chart-' + section._id, (list): void => { this.subscriptions.push(UIkit.util.on(document, 'added', '#chart-' + section._id, (list): void => {
callback(list, "chart", 'added'); //callback(list, "chart", 'added');
})); }));
this.subscriptions.push(UIkit.util.on(document, 'removed', '#chart-' + section._id, (list): void => { this.subscriptions.push(UIkit.util.on(document, 'removed', '#chart-' + section._id, (list): void => {
callback(list, "chart", 'removed'); // callback(list, "chart", 'removed');
})); }));
}); });
} }
@ -496,14 +499,12 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
let index = this.numberIndicatorPaths.length - 1; let index = this.numberIndicatorPaths.length - 1;
if (this.numberIndicatorPaths.at(index).get('url').valid) { if (this.numberIndicatorPaths.at(index).get('url').valid) {
this.validateJsonPath(index); this.validateJsonPath(index);
this.checkForSchemaEnhancements(this.numberIndicatorPaths.at(index).get('url').value);
} }
if (this.indicator.defaultId === null) { if (this.indicator.defaultId === null) {
this.subscriptions.push(this.numberIndicatorPaths.at(index).get('url').valueChanges.subscribe(value => { this.subscriptions.push(this.numberIndicatorPaths.at(index).get('url').valueChanges.subscribe(value => {
this.numberIndicatorPaths.at(index).get('result').setValue(null); this.numberIndicatorPaths.at(index).get('result').setValue(null);
if (this.numberIndicatorPaths.at(index).get('url').valid) { if (this.numberIndicatorPaths.at(index).get('url').valid) {
let indicatorPath: IndicatorPath = this.indicatorUtils.generateIndicatorByNumberUrl(this.indicatorUtils.getNumberSource(value), value, this.stakeholder, this.numberIndicatorPaths.at(index).get('jsonPath').value, this.indicatorUtils.numberSources.get(this.indicatorUtils.getNumberSource(value))); let indicatorPath: IndicatorPath = this.indicatorUtils.generateIndicatorByNumberUrl(this.indicatorUtils.getNumberSource(value), value, this.stakeholder, this.numberIndicatorPaths.at(index).get('jsonPath').value, this.indicatorUtils.numberSources.get(this.indicatorUtils.getNumberSource(value)));
this.checkForSchemaEnhancements(this.numberIndicatorPaths.at(index).get('url').value);
if (this.indicator.indicatorPaths[index]) { if (this.indicator.indicatorPaths[index]) {
this.indicator.indicatorPaths[index] = indicatorPath; this.indicator.indicatorPaths[index] = indicatorPath;
} else { } else {
@ -559,11 +560,9 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
if (disableUrl) { if (disableUrl) {
this.chartIndicatorPaths.at(index).get('url').disable(); this.chartIndicatorPaths.at(index).get('url').disable();
} else { } else {
this.checkForSchemaEnhancements(this.chartIndicatorPaths.at(index).get('url').value);
this.urlSubscriptions.push(this.chartIndicatorPaths.at(index).get('url').valueChanges.subscribe(value => { this.urlSubscriptions.push(this.chartIndicatorPaths.at(index).get('url').valueChanges.subscribe(value => {
if (this.chartIndicatorPaths.at(index).get('url').valid) { if (this.chartIndicatorPaths.at(index).get('url').valid) {
let indicatorPath: IndicatorPath = this.indicatorUtils.generateIndicatorByChartUrl(this.indicatorUtils.getChartSource(value), value, this.chartIndicatorPaths.at(index).get('type').value, this.stakeholder); let indicatorPath: IndicatorPath = this.indicatorUtils.generateIndicatorByChartUrl(this.indicatorUtils.getChartSource(value), value, this.chartIndicatorPaths.at(index).get('type').value, this.stakeholder);
this.checkForSchemaEnhancements(this.chartIndicatorPaths.at(index).get('url').value);
(this.chartIndicatorPaths.at(index) as UntypedFormGroup).get('type').setValue(indicatorPath.type); (this.chartIndicatorPaths.at(index) as UntypedFormGroup).get('type').setValue(indicatorPath.type);
(this.chartIndicatorPaths.at(index) as UntypedFormGroup).setControl('parameters', this.getParametersAsFormArray(indicatorPath)); (this.chartIndicatorPaths.at(index) as UntypedFormGroup).setControl('parameters', this.getParametersAsFormArray(indicatorPath));
if (!this.indicator.indicatorPaths[index]) { if (!this.indicator.indicatorPaths[index]) {
@ -889,7 +888,23 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
this.loading = false; this.loading = false;
} }
reorderIndicators(sectionId: string, type: IndicatorType, reorder: Reorder) { moveIndicator(moveIndicator: MoveIndicator) {
this.editing = true;
let path = [
this.stakeholder._id,
this.stakeholder.topics[this.topicIndex]._id,
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id,
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id
];
this.subscriptions.push(this.stakeholderService.moveIndicator(this.properties.monitorServiceAPIURL, path, moveIndicator).subscribe(subCategory => {
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex] = subCategory;
this.setCharts();
this.setNumbers();
this.editing = false;
}));
}
reorderIndicators(sectionId: string, type: IndicatorType, indicators: string[]) {
this.editing = true; this.editing = true;
let path = [ let path = [
this.stakeholder._id, this.stakeholder._id,
@ -898,7 +913,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id, this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id,
sectionId sectionId
]; ];
this.subscriptions.push(this.stakeholderService.reorderIndicators(this.properties.monitorServiceAPIURL, path, reorder, type).subscribe(indicators => { this.subscriptions.push(this.stakeholderService.reorderIndicators(this.properties.monitorServiceAPIURL, path, indicators).subscribe(indicators => {
if (type === 'chart') { if (type === 'chart') {
this.charts.find(section => section._id === sectionId).indicators = indicators; this.charts.find(section => section._id === sectionId).indicators = indicators;
this.setCharts(); this.setCharts();
@ -1191,10 +1206,6 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
})); }));
} }
private checkForSchemaEnhancements(url: string) {
this.showCheckForSchemaEnhancements = this.isAdministrator && url && !this.properties.useOldStatisticsSchema && this.indicatorUtils.checkForSchemaEnhancements(url) && this.properties.dashboard != 'irish';
}
migrateFromOldImportJsonFile(charts) { migrateFromOldImportJsonFile(charts) {
// first section contains numbers // first section contains numbers
// second contains charts // second contains charts

View File

@ -1,16 +1,21 @@
import {Injectable} from "@angular/core"; import {Injectable} from "@angular/core";
import {HttpClient} from "@angular/common/http"; import {HttpClient} from "@angular/common/http";
import {BehaviorSubject, from, Observable, Subscriber} from "rxjs"; import {BehaviorSubject, from, Observable, Subscriber} from "rxjs";
import {Indicator, Section, Stakeholder, StakeholderInfo, Visibility} from "../entities/stakeholder"; import {Indicator, Section, Stakeholder, StakeholderInfo, SubCategory, Visibility} from "../entities/stakeholder";
import {HelperFunctions} from "../../utils/HelperFunctions.class"; import {HelperFunctions} from "../../utils/HelperFunctions.class";
import {map} from "rxjs/operators"; import {map} from "rxjs/operators";
import {properties} from "../../../../environments/environment"; import {properties} from "../../../../environments/environment";
import {CustomOptions} from "../../services/servicesUtils/customOptions.class"; import {CustomOptions} from "../../services/servicesUtils/customOptions.class";
export interface Reorder { export interface SectionInfo {
action: 'moved' | 'added' | 'removed', id: string;
target: string, indicators: string[];
ids: string[]; }
export interface MoveIndicator {
target: string;
from: SectionInfo;
to: SectionInfo;
} }
@Injectable({ @Injectable({
@ -128,7 +133,6 @@ export class StakeholderService {
if (element.alias && element.alias.startsWith('/')) { if (element.alias && element.alias.startsWith('/')) {
element.alias = element.alias.slice(1); element.alias = element.alias.slice(1);
} }
path = HelperFunctions.encodeArray(path);
return this.http.post<any>(url + ((path.length > 0) ? '/' : '') + path.join('/') + return this.http.post<any>(url + ((path.length > 0) ? '/' : '') + path.join('/') +
'/save', element, CustomOptions.registryOptions()).pipe(map(element => { '/save', element, CustomOptions.registryOptions()).pipe(map(element => {
if (path.length === 0) { if (path.length === 0) {
@ -140,7 +144,6 @@ export class StakeholderService {
} }
saveBulkElements(url: string, indicators, path: string[] = []): Observable<any> { saveBulkElements(url: string, indicators, path: string[] = []): Observable<any> {
path = HelperFunctions.encodeArray(path);
return this.http.post<any>(url + ((path.length > 0) ? '/' : '') + path.join('/') + return this.http.post<any>(url + ((path.length > 0) ? '/' : '') + path.join('/') +
'/save-bulk', indicators, CustomOptions.registryOptions()).pipe(map(element => { '/save-bulk', indicators, CustomOptions.registryOptions()).pipe(map(element => {
if (path.length === 0) { if (path.length === 0) {
@ -152,7 +155,6 @@ export class StakeholderService {
} }
saveSection(url: string, element: any, path: string[] = [], index: number = -1): Observable<Section> { saveSection(url: string, element: any, path: string[] = [], index: number = -1): Observable<Section> {
path = HelperFunctions.encodeArray(path);
return this.http.post<Section>(url + ((path.length > 0) ? '/' : '') + path.join('/') + return this.http.post<Section>(url + ((path.length > 0) ? '/' : '') + path.join('/') +
'/save/' + index, element, CustomOptions.registryOptions()).pipe(map(element => { '/save/' + index, element, CustomOptions.registryOptions()).pipe(map(element => {
return HelperFunctions.copy(element); return HelperFunctions.copy(element);
@ -160,7 +162,6 @@ export class StakeholderService {
} }
deleteElement(url: string, path: string[], childrenAction: string = null): Observable<any> { deleteElement(url: string, path: string[], childrenAction: string = null): Observable<any> {
path = HelperFunctions.encodeArray(path);
let params: string = ""; let params: string = "";
if (childrenAction) { if (childrenAction) {
params = "?children=" + childrenAction; params = "?children=" + childrenAction;
@ -169,17 +170,21 @@ export class StakeholderService {
} }
reorderElements(url: string, path: string[], ids: string[]): Observable<any> { reorderElements(url: string, path: string[], ids: string[]): Observable<any> {
path = HelperFunctions.encodeArray(path);
return this.http.post<any>(url + '/' + path.join('/') + '/reorder', ids, CustomOptions.registryOptions()); return this.http.post<any>(url + '/' + path.join('/') + '/reorder', ids, CustomOptions.registryOptions());
} }
reorderIndicators(url: string, path: string[], reorder: Reorder, type: string = 'chart'): Observable<Indicator[]> { reorderIndicators(url: string, path: string[], indicators: string[]): Observable<Indicator[]> {
path = HelperFunctions.encodeArray(path); return this.http.post<Indicator[]>(url + '/' + path.join('/') + '/reorder', indicators, CustomOptions.registryOptions()).pipe(map(indicators => {
return this.http.post<Indicator[]>(url + '/' + path.join('/') + '/' + type + '/reorder', reorder, CustomOptions.registryOptions()).pipe(map(indicators => {
return HelperFunctions.copy(indicators); return HelperFunctions.copy(indicators);
})); }));
} }
moveIndicator(url: string, path: string[], moveIndicator: MoveIndicator): Observable<SubCategory> {
return this.http.post<SubCategory>(url + '/' + path.join('/') + '/moveIndicator', moveIndicator, CustomOptions.registryOptions()).pipe(map(subCategory => {
return HelperFunctions.copy(subCategory);
}));
}
getStakeholderAsObservable(): Observable<Stakeholder> { getStakeholderAsObservable(): Observable<Stakeholder> {
return this.stakeholderSubject.asObservable(); return this.stakeholderSubject.asObservable();
} }