[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>
</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 input [formInput]="indicatorPath.get('source')" placeholder="Source"
[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>
</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-grid" uk-grid>
<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 {HelperFunctions} from "../../utils/HelperFunctions.class";
import {DomSanitizer, SafeResourceUrl} from "@angular/platform-browser";
import {Reorder, StakeholderService} from "../../monitor/services/stakeholder.service";
import {Observable, Subscriber} from "rxjs";
import {MoveIndicator, SectionInfo, StakeholderService} from "../../monitor/services/stakeholder.service";
import {BehaviorSubject, Observable, Subscriber} from "rxjs";
import {LayoutService} from "../../dashboard/sharedComponents/sidebar/layout.service";
import {Router} from "@angular/router";
import {Role, Session, User} from "../../login/utils/helper.class";
@ -82,6 +82,8 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
public index: number = -1;
public editing: boolean = false;
public dragging: boolean = false;
/* Reorder indicators */
public to: BehaviorSubject<SectionInfo> = new BehaviorSubject<SectionInfo>(null);
/** Caches */
public safeUrls: Map<string, SafeResourceUrl> = new Map<string, SafeResourceUrl>([]);
public numberResponses: Map<string, any> = new Map<string, any>();
@ -94,8 +96,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
public sectionTypeToDelete: string;
public sectionChildrenActionOnDelete: string;
public indicatorChildrenActionOnDelete: string;
urlParameterizedMessage = null;
showCheckForSchemaEnhancements: boolean = false;
public urlParameterizedMessage = null;
private notification: Notification;
@ViewChild('editNumberNotify', {static: true}) editNumberNotify: NotifyFormComponent;
@ViewChild('editChartNotify', {static: true}) editChartNotify: NotifyFormComponent;
@ -124,7 +125,6 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
private notificationService: NotificationService,
private fb: UntypedFormBuilder,
protected _router: Router,
private cdr: ChangeDetectorRef,
private sanitizer: DomSanitizer) {
super()
this.filesToUpload = [];
@ -186,7 +186,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
}
});
if (document !== undefined) {
let callback = (list, type: IndicatorType, action: 'moved' | 'added' | 'removed'): void => {
let callback = (list): string[] => {
let items: HTMLCollection = list.current.children;
let reordered = [];
for (let i = 0; i < items.length; i++) {
@ -194,12 +194,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
reordered.push(items.item(i).id);
}
}
let reorder: Reorder = {
action: action,
target: list.detail[1].id,
ids: reordered
}
this.reorderIndicators(list.current.id.toString().split('-')[1], type, reorder);
return reordered;
};
this.numbers.forEach((section) => {
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.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 => {
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 => {
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.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 => {
callback(list, "chart", 'added');
//callback(list, "chart", 'added');
}));
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;
if (this.numberIndicatorPaths.at(index).get('url').valid) {
this.validateJsonPath(index);
this.checkForSchemaEnhancements(this.numberIndicatorPaths.at(index).get('url').value);
}
if (this.indicator.defaultId === null) {
this.subscriptions.push(this.numberIndicatorPaths.at(index).get('url').valueChanges.subscribe(value => {
this.numberIndicatorPaths.at(index).get('result').setValue(null);
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)));
this.checkForSchemaEnhancements(this.numberIndicatorPaths.at(index).get('url').value);
if (this.indicator.indicatorPaths[index]) {
this.indicator.indicatorPaths[index] = indicatorPath;
} else {
@ -559,11 +560,9 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
if (disableUrl) {
this.chartIndicatorPaths.at(index).get('url').disable();
} else {
this.checkForSchemaEnhancements(this.chartIndicatorPaths.at(index).get('url').value);
this.urlSubscriptions.push(this.chartIndicatorPaths.at(index).get('url').valueChanges.subscribe(value => {
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);
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).setControl('parameters', this.getParametersAsFormArray(indicatorPath));
if (!this.indicator.indicatorPaths[index]) {
@ -889,7 +888,23 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
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;
let path = [
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,
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') {
this.charts.find(section => section._id === sectionId).indicators = indicators;
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) {
// first section contains numbers
// second contains charts

View File

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