MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

working on sending menu save/update/delete on the backend - dev only

This commit is contained in:
Alex Martzios 2022-01-05 16:41:49 +02:00
parent 845db0a835
commit 259ca4b5b1
5 changed files with 162 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
dashboard/menu/menu.component.html
View File

@ -6,18 +6,18 @@
<ul *ngIf="!isPortalAdministrator" class="uk-subnav uk-subnav-pill uk-flex uk-flex-middle">
<li *ngFor="let item of rootMenuItems; let i=index" [class.uk-active]="activeRootMenu==item['_id']" class="uk-visible-toggle uk-position-relative uk-padding-remove-horizontal">
<span>
<a (click)="filterForm.get('status').setValue('resources'); activeRootMenu=item['_id']">
<a (click)="activeRootMenu=item['_id']">
<span class="title">{{item.title}}</span>
</a>
<span class="uk-invisible-hover uk-position-center-right color">
<span class="clickable" uk-icon="more-vertical"></span>
<div #element uk-dropdown="mode: click; pos: bottom-right; offset: 10; delay-hide: 0; flip: false">
<ul class="uk-nav uk-dropdown-nav">
<li (click)="editRootMenu()">
<li (click)="editMenuItem(item, false)">
<a>Edit</a>
</li>
<hr class="uk-nav-divider">
<li (click)="deleteRootMenu()">
<li (click)="confirmDeleteMenuItem(item._id, false)">
<a>Delete</a>
</li>
</ul>
@ -25,7 +25,7 @@
</span>
</span>
</li>
<li (click)="newRootMenu()" class="uk-visible-toggle">
<li (click)="newMenuItem(false)" class="uk-visible-toggle">
<span class="clickable">
<span class="uk-icon-button small portal-icon-button">
<icon name="add"></icon>
@ -44,7 +44,7 @@
[bordered]="true" colorClass="uk-text-secondary"
class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>
<div>
<a (click)="newMenuItem()" class="uk-flex uk-flex-middle uk-text-uppercase">
<a (click)="newMenuItem(true)" class="uk-flex uk-flex-middle uk-text-uppercase">
<button class="large uk-icon-button uk-button-secondary">
<icon name="add"></icon>
</button>
@ -54,30 +54,6 @@
</a>
</div>
</div>
<!-- Not currently working -->
<div *ngIf="!showLoading && checkboxes.length > 0" class="uk-padding
uk-padding-remove-bottom uk-padding-remove-top uk-margin-remove-top uk-margin-small-bottom uk-display-inline"
[attr.uk-tooltip]="getSelectedMenuItems().length == 0 ? 'pos:left; cls: uk-active' : null"
title="Select at least one menu item">
<input id="checkAll" type="checkbox" (click)="selectAll()" [ngModel]="getSelectedMenuItems().length == checkboxes.length"/>
<span *ngIf="getSelectedMenuItems().length > 0" class="uk-margin-left uk-text-muted"> {{getSelectedMenuItems().length}} menu items selected </span>
<a class="uk-margin-left">Actions</a>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-dropdown-nav"
[attr.uk-tooltip]="getSelectedMenuItems().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
title="Select at least one page">
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedMenuItems().length == 0 ? 'uk-disabled' : ''"
(click)="toggleMenuItems(true,getSelectedMenuItems())"><i></i> Enable
</a></li>
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedMenuItems().length == 0 ? 'uk-disabled' : ''"
(click)="toggleMenuItems(false,getSelectedMenuItems())"><i></i> Disable
</a>
</li>
<li *ngIf="isPortalAdministrator"><a [class]="getSelectedMenuItems().length == 0 ? 'uk-disabled' : ''"
(click)="confirmDeleteSelectedMenuItems()"><i></i> Delete </a></li>
</ul>
</div>
</div>
</div>
<div inner>
<div *ngIf="showLoading" class="uk-position-center">
@ -89,25 +65,25 @@
<div class="uk-grid uk-grid-divider uk-padding" uk-grid>
<div class="uk-width-4-5">
<div class="uk-grid uk-flex uk-flex-middle">
<div>
<input type="checkbox" id="" class="checkBox" name="" value="">
</div>
<div class="uk-width-expand uk-margin-medium-bottom">
{{child.title}}
</div>
<div class="uk-grid uk-width-1-1 uk-margin-left">
Additional info
<div *ngIf="child.url" class="uk-grid uk-width-1-1 uk-margin-left">
<span class="title uk-padding-remove">URL: </span><a href="{{child.url}}" target="_blank" class="uk-padding-remove uk-margin-left">{{child.url}}</a>
</div>
<div *ngIf="child.route" class="uk-grid uk-width-1-1 uk-margin-left">
<span class="title uk-padding-remove">Route: </span><span class="uk-padding-remove uk-margin-left">{{child.route}}</span>
</div>
</div>
</div>
<div class="uk-width-1-5">
<div class="uk-flex uk-flex-center">
<div href="#" class="actions">
<div class="uk-button action uk-margin-top uk-flex uk-flex-middle" (click)="editMenuItem()">
<div class="uk-button action uk-margin-top uk-flex uk-flex-middle" (click)="editMenuItem(child, true)">
<i uk-icon="pencil" class="clickable uk-icon"></i>
<span class="uk-margin-small-left"> Edit</span>
</div>
<div class="uk-button action uk-margin-top uk-flex uk-flex-middle" (click)="deleteMenuItem()">
<div class="uk-button action uk-margin-top uk-flex uk-flex-middle" (click)="confirmDeleteMenuItem(child._id, true)">
<i uk-icon="trash" class="clickable uk-icon"></i>
<span class="uk-margin-small-left"> Delete</span>
</div>
@ -117,10 +93,15 @@
</div>
</li>
</ul>
<div *ngIf="!getActiveRootItem(activeRootMenu) || !getActiveRootItem(activeRootMenu).items || getActiveRootItem(activeRootMenu).items.length == 0"
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
<div>No menu items found</div>
</div>
</div>
</div>
</div>
<modal-alert #editModal [okDisabled]="menuItemForm && (menuItemForm.invalid || !menuItemForm.dirty)">
<modal-alert #editModal (alertOutput)="menuItemSaveConfirmed($event)"
[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]="typeOptions"></div>
@ -153,4 +134,6 @@
</div>
</div>
</form>
</modal-alert>
</modal-alert>
<modal-alert #deleteModal (alertOutput)="confirmedDeleteMenuItem($event)"></modal-alert>

188
dashboard/menu/menu.component.ts
View File

@ -14,6 +14,8 @@ import {AlertModal} from '../../utils/modal/alert';
import {CheckMenuItem, MenuItem} from '../../sharedComponents/menu';
import {SearchInputComponent} from '../../sharedComponents/search-input/search-input.component';
declare var UIkit;
@Component({
selector: 'menuSelector',
templateUrl: './menu.component.html',
@ -23,28 +25,21 @@ export class MenuComponent implements OnInit {
@ViewChild('searchInputComponent') searchInputComponent: SearchInputComponent;
@ViewChild('editModal') editModal: AlertModal;
@ViewChild('deleteModal') deleteModal: AlertModal;
private selectedMenuItems: string[] = [];
public checkboxes: CheckMenuItem[] = [];
// public menuItems: MenuItem[] = [];
// public rootMenuForm: FormGroup;
public activeRootMenu: string;
private index: number;
public menuItemForm: FormGroup;
public rootMenuItems = [];
public menuItems = [];
public allPages = [];
public keyword = '';
public selectedMenuItem: string;
public isChild: boolean = false;
public communities: Portal[] = [];
public portal: string;
public properties: EnvProperties = properties;
public newPageWindowOpen: boolean = false;
public showLoading = true;
public isPortalAdministrator = null;
@ -53,7 +48,12 @@ export class MenuComponent implements OnInit {
{label: 'Internal Link', value: 'internal'},
{label: 'External Link', value: 'external'}
]
public selectedKeyword: string;
public keyword: string = '';
public selectedKeyword: string = '';
private searchText: string = '';
public properties: EnvProperties = properties;
private subscriptions: any[] = [];
constructor(private element: ElementRef, private route: ActivatedRoute,
@ -65,8 +65,11 @@ export class MenuComponent implements OnInit {
ngOnInit() {
this.filterForm = this._fb.group({
keyword: [''],
status: ['resources', Validators.required]
});
this.subscriptions.push(this.filterForm.get('keyword').valueChanges.subscribe(value => {
this.searchText = value.toLowerCase();
this.applyFilters();
}));
this.userManagementService.getUserInfo().subscribe(user => {
this.portal = (this.route.snapshot.data.portal) ? this.route.snapshot.data.portal : this.route.snapshot.params[this.route.snapshot.data.param];
if (this.route.snapshot.data.portal) {
@ -97,11 +100,9 @@ export class MenuComponent implements OnInit {
this.subscriptions.push(
this._helpContentService.getMenuItems(this.portal).subscribe(
data => {
console.log(data);
this.rootMenuItems = data;
if(data && data.length > 0) {
this.activeRootMenu = data[0]['_id'];
console.log(this.activeRootMenu);
}
},
err => console.error("Server error fetching menu items: ", err)
@ -130,82 +131,83 @@ export class MenuComponent implements OnInit {
);
}
public newRootMenu() {
public newPageWindow() {
this.newPageWindowOpen = !this.newPageWindowOpen;
}
public newMenuItem(isChild: boolean = false) {
this.menuItemForm = this._fb.group({
id: this._fb.control(""),
_id: this._fb.control(""),
title: this._fb.control("",Validators.required),
type: this._fb.control(""),
route: this._fb.control(""),
url: this._fb.control(""),
isEnabled: this._fb.control(""),
parentItemId: this._fb.control(isChild ? this.activeRootMenu : null)
});
this.menuItemsModalOpen('Create Root Menu', 'Save Changes');
this.isChild = isChild;
this.menuItemsModalOpen('Create Menu Item', 'Create');
}
public editRootMenu() {
public editMenuItem(menuItem: MenuItem, isChild: boolean = false) {
this.menuItemForm = this._fb.group({
id: this._fb.control("id"),
title: this._fb.control("Resources",Validators.required),
type: this._fb.control("",Validators.required),
route: this._fb.control("noNeed"),
url: this._fb.control("noNeed"),
isEnabled: this._fb.control("enabled",Validators.required),
_id: this._fb.control(menuItem['_id']),
title: this._fb.control(menuItem.title,Validators.required),
type: this._fb.control(menuItem['type']),
route: this._fb.control(menuItem.route),
url: this._fb.control(menuItem.url),
parentItemId: this._fb.control(menuItem['parentItemId'])
});
this.menuItemsModalOpen('Edit Root Menu', 'Save Changes');
this.isChild = isChild;
if(this.isChild) {
this.index = this.getActiveRootItem(this.activeRootMenu).items.findIndex(value => value._id === menuItem['_id']);
} else {
this.index = this.rootMenuItems.findIndex(value => value._id === menuItem['_id']);
}
this.menuItemsModalOpen('Edit Menu Item', 'Save Changes');
}
public deleteRootMenu() {
console.log('Delete root menu');
}
public getSelectedMenuItems(): string[] {
return this.checkboxes.filter(menuItem => menuItem.checked == true).map(checkedMenuItem => checkedMenuItem.menuItem).map(res => res.id);
public confirmDeleteMenuItem(id: string, isChild: boolean = false) {
this.selectedMenuItem = id;
this.isChild = isChild;
this.confirmModalOpen();
}
public confirmDeleteSelectedMenuItems() {
this.selectedMenuItems = this.getSelectedMenuItems();
this.confirmModalOpen();
}
private confirmModalOpen() {
this.deleteModal.cancelButton = true;
this.deleteModal.okButton = true;
this.deleteModal.alertTitle = 'Delete Confirmation';
this.deleteModal.message = 'Are you sure you want to delete the selected menu item(s)?';
this.deleteModal.message = 'Are you sure you want to delete this menu item?';
this.deleteModal.okButtonText = 'Yes';
this.deleteModal.open();
}
public newMenuItem() {
this.menuItemForm = this._fb.group({
id: this._fb.control(""),
title: this._fb.control("",Validators.required),
type: this._fb.control("",Validators.required),
route: this._fb.control(""),
url: this._fb.control(""),
isEnabled: this._fb.control("",Validators.required),
});
this.menuItemsModalOpen('Create Menu Item', 'Save Changes');
}
public editMenuItem() {
this.menuItemForm = this._fb.group({
id: this._fb.control("id"),
title: this._fb.control("HardcodedName",Validators.required),
type: this._fb.control("internal",Validators.required),
route: this._fb.control("routeAlex"),
url: this._fb.control("urlAlex"),
isEnabled: this._fb.control("enabled",Validators.required),
});
this.menuItemsModalOpen('Edit Menu Item', 'Save Changes');
public confirmedDeleteMenuItem(data: any, isChild: boolean = false) {
this.showLoading = true;
this.subscriptions.push(
this._helpContentService.deleteMenuItem(this.selectedMenuItem, this.portal).subscribe(
_ => {
this.deleteMenuItemFromArray(this.selectedMenuItem, this.isChild);
UIkit.notification('Menu item have been <b>successfully deleted</b>', {
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
this.showLoading = false;
}
)
)
}
public deleteMenuItem() {
console.log('Delete menu item');
}
public newPageWindow() {
this.newPageWindowOpen = !this.newPageWindowOpen;
private deleteMenuItemFromArray(id: string, isChild: boolean = false) {
if(isChild) {
let i = this.getActiveRootItem(this.activeRootMenu).items.findIndex(_ => _._id == id);
this.getActiveRootItem(this.activeRootMenu).items.splice(i, 1);
} else {
let i = this.rootMenuItems.findIndex(_ => _._id == id);
this.rootMenuItems.splice(i, 1);
}
}
private menuItemsModalOpen(title: string, yesBtn: string) {
@ -217,8 +219,57 @@ export class MenuComponent implements OnInit {
this.editModal.open();
}
public toggleMenuItems(status: boolean, ids: string[]) {
public menuItemSaveConfirmed(data: any) {
this.showLoading = true;
if(!this.menuItemForm.value._id) {
this.subscriptions.push(
this._helpContentService.saveMenuItem(<MenuItem>this.menuItemForm.value, this.portal).subscribe(
menuItem => {
this.menuItemSavedSuccessfully(menuItem, true);
UIkit.notification('Menu item <b>' + menuItem.title + '</b> has been <b>successfully created</b>', {
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
}
)
)
} else {
this.subscriptions.push(
this._helpContentService.updateMenuItem(<MenuItem>this.menuItemForm.value, this.portal).subscribe(
menuItem => {
this.menuItemSavedSuccessfully(menuItem, false);
UIkit.notification('Menu item <b>' + menuItem.title + '</b> has been <b>successfully updated</b>', {
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
}
)
)
}
}
public menuItemSavedSuccessfully(menuItem: MenuItem, isNew: boolean) {
if(isNew) {
if(this.isChild) {
this.getActiveRootItem(this.activeRootMenu).items.push(menuItem);
} else {
this.rootMenuItems.push(menuItem);
}
} else {
if(this.isChild) {
this.getActiveRootItem(this.activeRootMenu).items[this.index] = menuItem;
} else {
this.rootMenuItems[this.index] = menuItem;
}
}
this.showLoading = false;
}
public applyFilters() {
console.log(this.searchText);
this.getActiveRootItem(this.activeRootMenu).items = this.getActiveRootItem(this.activeRootMenu).items.filter(item => item.title.toLowerCase().includes(this.searchText));
}
public onSearchClose() {
@ -229,11 +280,4 @@ export class MenuComponent implements OnInit {
this.selectedKeyword = null;
this.searchInputComponent.reset();
}
selectAll() {
let checked = this.getSelectedMenuItems().length != this.checkboxes.length;
for (let check of this.checkboxes) {
check.checked = checked;
}
}
}

4
dashboard/sharedComponents/sidebar/sideBar.component.ts
View File

@ -34,8 +34,8 @@ export class SideBarComponent implements OnInit {
isTheActiveMenuItem(item: MenuItem, subItem: MenuItem = null): boolean {
if (this.activeItem || this.activeSubItem) {
return (!subItem && this.activeItem === item.id) ||
(subItem && this.activeItem === item.id && this.activeSubItem === subItem.id);
return (!subItem && this.activeItem === item._id) ||
(subItem && this.activeItem === item._id && this.activeSubItem === subItem._id);
} else {
if (subItem) {
return MenuItem.isTheActiveMenu(subItem, this.router.url.split('?')[0]) || MenuItem.isTheActiveMenu(subItem, this.router.url.split('#')[0]);

21
services/help-content.service.ts
View File

@ -315,11 +315,32 @@ export class HelpContentService {
.pipe(catchError(this.handleError));
}
// Menu Items
getMenuItems(portalPid: string) {
return this.http.get<Array<MenuItem>>(properties.adminToolsAPIURL + properties.adminToolsPortalType + "/" + portalPid + "/menu/root/full")
.pipe(catchError(this.handleError));
}
saveMenuItem(menuItem: MenuItem, portalPid: string) {
HelpContentService.removeNulls(menuItem);
return this.http.post<MenuItem>(properties.adminToolsAPIURL + properties.adminToolsPortalType + "/" + portalPid + "/menu/save", JSON.stringify(menuItem), CustomOptions.getAuthOptionsWithBody())
.pipe(catchError(this.handleError));
}
updateMenuItem(menuItem: MenuItem, portalPid: string) {
HelpContentService.removeNulls(menuItem);
return this.http.post<MenuItem>(properties.adminToolsAPIURL + properties.adminToolsPortalType + "/" + portalPid + "/menu/update", JSON.stringify(menuItem), CustomOptions.getAuthOptionsWithBody())
.pipe(catchError(this.handleError));
}
deleteMenuItem(menuItemId: string, portalPid: string) {
return this.http.post<MenuItem>(properties.adminToolsAPIURL + properties.adminToolsPortalType + "/" + portalPid + "/menu/delete", menuItemId, CustomOptions.getAuthOptionsWithBody())
.pipe(catchError(this.handleError));
}
// unused
getCommunities( helpContentUrl:string) {
return this.http.get<Array<Portal>>(helpContentUrl + properties.adminToolsPortalType)

4
sharedComponents/menu.ts
View File

@ -1,5 +1,5 @@
export class MenuItem {
id: string = ""; // for root menu in order to close the dropdown when clicked
_id: string = ""; // for root menu in order to close the dropdown when clicked
title: string = "";
url: string = ""; // external url
route: string = ""; // internal url - using angular routing and components
@ -16,7 +16,7 @@ export class MenuItem {
customClass: string = null;
constructor(id: string, title: string, url: string, route: string, needsAuthorization: boolean, entitiesRequired: string[], routeRequired: string[], params, icon=null, fragment = null, customClass = null, routeActive = null) {
this.id = id;
this._id = id;
this.title = title;
this.url = url;
this.route = route;