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)">
<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('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 -->
<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 -->

View File

@ -123,11 +123,11 @@ export class MenuComponent implements OnInit {
data => {
this.rootMenuItems = data;
if(data && data.length > 0) {
// this.activeRootMenuId = data[0]['_id'];
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.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.typeSub = this.menuItemForm.get('type').valueChanges.subscribe(value => {
setTimeout(() => {
// console.log(value);
this.menuItemForm.controls['route'].clearValidators();
this.menuItemForm.controls['url'].clearValidators();
if(value === "internal") {
@ -286,7 +286,8 @@ export class MenuComponent implements OnInit {
pos: 'bottom-right'
});
this.showLoading = false;
}
},
error => this.handleError("Server error deleting menu item", error)
)
)
}
@ -325,7 +326,8 @@ export class MenuComponent implements OnInit {
timeout: 6000,
pos: 'bottom-right'
});
}
},
error => this.handleError("System error creating menu item", error)
)
)
} else {
@ -338,7 +340,8 @@ export class MenuComponent implements OnInit {
timeout: 6000,
pos: 'bottom-right'
});
}
},
error => this.handleError("System error updating menu item", error)
)
)
}
@ -362,8 +365,18 @@ export class MenuComponent implements OnInit {
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() {
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() {

View File

@ -77,7 +77,7 @@ export interface Option {
(openedChange)="stopPropagation()" [formControl]="formControl"
[disableOptionCentering]="true">
<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}}
</mat-option>
</mat-select>
@ -211,6 +211,7 @@ export class InputComponent implements OnInit, OnDestroy, OnChanges {
public filteredOptions: Observable<Option[]>;
public searchControl: FormControl;
private subscriptions: any[] = [];
@Input() tooltip: boolean = true;
@ViewChild('select') select: MatSelect;
@ViewChild('searchInput') searchInput: ElementRef;
focused: boolean = false;