add error handling for menu items and pages, remove tooltip for small options

This commit is contained in:
Alex Martzios 2022-01-11 17:20:05 +02:00
parent b5330f3bf6
commit 73491221f0
3 changed files with 25 additions and 11 deletions

View File

@ -104,7 +104,7 @@
[okDisabled]="menuItemForm && (menuItemForm.invalid || !menuItemForm.dirty)"> [okDisabled]="menuItemForm && (menuItemForm.invalid || !menuItemForm.dirty)">
<form *ngIf="menuItemForm" [formGroup]="menuItemForm" class="uk grid uk-child-width-1-1" uk-grid> <form *ngIf="menuItemForm" [formGroup]="menuItemForm" class="uk grid uk-child-width-1-1" uk-grid>
<div dashboard-input [formInput]="menuItemForm.get('title')" type="text" label="Name" placeholder="Write a name"></div> <div dashboard-input [formInput]="menuItemForm.get('title')" type="text" label="Name" placeholder="Write a name"></div>
<div dashboard-input [formInput]="menuItemForm.get('type')" type="select" label="Type" placeholder="Choose a type" [options]="getTypeOptions()"></div> <div dashboard-input [formInput]="menuItemForm.get('type')" type="select" label="Type" placeholder="Choose a type" [options]="getTypeOptions()" [tooltip]="false"></div>
<!-- Workflow for EXTERNAL --> <!-- Workflow for EXTERNAL -->
<div dashboard-input *ngIf="menuItemForm.get('type').value === 'external'" [formInput]="menuItemForm.get('url')" [validators]="menuItemForm.get('url').validator" type="URL" label="URL" placeholder="Write a URL"></div> <div dashboard-input *ngIf="menuItemForm.get('type').value === 'external'" [formInput]="menuItemForm.get('url')" [validators]="menuItemForm.get('url').validator" type="URL" label="URL" placeholder="Write a URL"></div>
<!-- Workflow for INTERNAL --> <!-- Workflow for INTERNAL -->

View File

@ -123,11 +123,11 @@ export class MenuComponent implements OnInit {
data => { data => {
this.rootMenuItems = data; this.rootMenuItems = data;
if(data && data.length > 0) { if(data && data.length > 0) {
// this.activeRootMenuId = data[0]['_id'];
this.changeActiveRootMenuItem(data[0]); this.changeActiveRootMenuItem(data[0]);
} }
}, },
err => console.error("Server error fetching menu items: ", err) // err => console.error("Server error fetching menu items: ", err)
error => this.handleError("Server error fetching menu items", error)
) )
); );
} }
@ -163,7 +163,7 @@ export class MenuComponent implements OnInit {
} }
} }
}, },
err => console.error("Server error fetching pages: ", err) error => this.handleError("Server error fetching pages", error)
) )
); );
} }
@ -202,7 +202,8 @@ export class MenuComponent implements OnInit {
}); });
this.newPageWindowOpen = !this.newPageWindowOpen; this.newPageWindowOpen = !this.newPageWindowOpen;
this.menuItemForm.get('route').setValue(page.route); this.menuItemForm.get('route').setValue(page.route);
} },
error => this.handleError('System error creating page', error)
) )
); );
} }
@ -211,7 +212,6 @@ export class MenuComponent implements OnInit {
this.destroyTypeSubscription(); this.destroyTypeSubscription();
this.typeSub = this.menuItemForm.get('type').valueChanges.subscribe(value => { this.typeSub = this.menuItemForm.get('type').valueChanges.subscribe(value => {
setTimeout(() => { setTimeout(() => {
// console.log(value);
this.menuItemForm.controls['route'].clearValidators(); this.menuItemForm.controls['route'].clearValidators();
this.menuItemForm.controls['url'].clearValidators(); this.menuItemForm.controls['url'].clearValidators();
if(value === "internal") { if(value === "internal") {
@ -286,7 +286,8 @@ export class MenuComponent implements OnInit {
pos: 'bottom-right' pos: 'bottom-right'
}); });
this.showLoading = false; this.showLoading = false;
} },
error => this.handleError("Server error deleting menu item", error)
) )
) )
} }
@ -325,7 +326,8 @@ export class MenuComponent implements OnInit {
timeout: 6000, timeout: 6000,
pos: 'bottom-right' pos: 'bottom-right'
}); });
} },
error => this.handleError("System error creating menu item", error)
) )
) )
} else { } else {
@ -338,7 +340,8 @@ export class MenuComponent implements OnInit {
timeout: 6000, timeout: 6000,
pos: 'bottom-right' pos: 'bottom-right'
}); });
} },
error => this.handleError("System error updating menu item", error)
) )
) )
} }
@ -362,8 +365,18 @@ export class MenuComponent implements OnInit {
this.showLoading = false; this.showLoading = false;
} }
handleError(message: string, error) {
UIkit.notification(message, {
status: 'danger',
timeout: 6000,
pos: 'bottom-right'
});
console.log('Server responded: ' + error);
this.showLoading = false;
}
public applyFilters() { public applyFilters() {
this.childrenMenuItems = this.activeRootMenu.items.filter(item => item.title.toLowerCase().includes(this.searchText)); this.childrenMenuItems = this.activeRootMenu.items.filter(item => item.title.toLowerCase().includes(this.searchText) || (item.url||'').toLowerCase().includes(this.searchText) || (item.route||'').toLowerCase().includes(this.searchText));
} }
public onSearchClose() { public onSearchClose() {

View File

@ -77,7 +77,7 @@ export interface Option {
(openedChange)="stopPropagation()" [formControl]="formControl" (openedChange)="stopPropagation()" [formControl]="formControl"
[disableOptionCentering]="true"> [disableOptionCentering]="true">
<mat-option *ngIf="placeholder" class="uk-hidden" [value]="''">{{placeholder}}</mat-option> <mat-option *ngIf="placeholder" class="uk-hidden" [value]="''">{{placeholder}}</mat-option>
<mat-option *ngFor="let option of options" [value]="option.value" [attr.uk-tooltip]="option.label"> <mat-option *ngFor="let option of options" [value]="option.value" [attr.uk-tooltip]="(tooltip) ? option.label : null">
{{option.label}} {{option.label}}
</mat-option> </mat-option>
</mat-select> </mat-select>
@ -211,6 +211,7 @@ export class InputComponent implements OnInit, OnDestroy, OnChanges {
public filteredOptions: Observable<Option[]>; public filteredOptions: Observable<Option[]>;
public searchControl: FormControl; public searchControl: FormControl;
private subscriptions: any[] = []; private subscriptions: any[] = [];
@Input() tooltip: boolean = true;
@ViewChild('select') select: MatSelect; @ViewChild('select') select: MatSelect;
@ViewChild('searchInput') searchInput: ElementRef; @ViewChild('searchInput') searchInput: ElementRef;
focused: boolean = false; focused: boolean = false;