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

Merge branch 'new-theme' of code-repo.d4science.org:MaDgIK/openaire-library into new-theme

This commit is contained in:
Konstantinos Triantafyllou 2022-07-18 18:57:06 +03:00
parent ff01c9a9c9 8254edb477
commit f4a723d3ac
3 changed files with 150 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,125 +39,142 @@
<loading></loading>
</div>
<div *ngIf="!showLoading">
<div #elements transition-group>
<div *ngFor="let item of displayMenuItems; let i = index;" transition-group-item>
<div class="uk-width-1-2@m uk-margin-bottom uk-padding-small menu-item">
<div class="uk-flex uk-flex-middle uk-flex-between">
<div>
{{item.title}}
</div>
<div class="uk-flex uk-flex-middle uk-flex-center">
<span *ngIf="item.type == 'external'" class="uk-text-meta uk-text-small uk-margin-small-right">External URL</span>
<span *ngIf="item.type == 'internal'" class="uk-text-meta uk-text-small uk-margin-small-right">Internal page</span>
<span *ngIf="item.type == 'noAction'" class="uk-text-meta uk-text-small uk-margin-small-right"></span>
<a class="uk-link-reset" (click)="toggleMenuItem(item)">
<icon *ngIf="!item.isOpen" name="arrow_drop_down" [flex]="true"></icon>
<icon *ngIf="item.isOpen" name="arrow_drop_up" [flex]="true"></icon>
</a>
</div>
</div>
<ng-container *ngIf="item.isOpen">
<div *ngIf="item.type != 'noAction'" class="uk-margin-medium-top uk-margin-medium-bottom">
<div class="uk-text-meta uk-text-small uk-margin-xsmall-bottom">
Target {{item.type == 'external' ? 'URL' : 'Route'}}
</div>
<div class="uk-grid" uk-grid>
<div #elements transition-group class="uk-width-3-4@m">
<div *ngFor="let item of displayMenuItems; let i = index;" transition-group-item>
<div class="uk-width-2-3@m uk-margin-bottom uk-padding-small menu-item">
<div class="uk-flex uk-flex-middle uk-flex-between">
<div>
{{item.type == 'external' ? item.url : item.route}}
{{item.title}}
</div>
<div *ngIf="item.type == 'internal' && item.route && pageStatus != null && !pageStatus.get(item.route)" class="uk-text-small uk-text-warning uk-margin-small-top">
This menu item is not visible because the page is disabled
<div class="uk-flex uk-flex-middle uk-flex-center">
<span *ngIf="item.type == 'external'" class="uk-text-meta uk-text-small uk-margin-small-right">External URL</span>
<span *ngIf="item.type == 'internal'" class="uk-text-meta uk-text-small uk-margin-small-right">Internal page</span>
<span *ngIf="item.type == 'noAction'" class="uk-text-meta uk-text-small uk-margin-small-right"></span>
<a class="uk-link-reset" (click)="toggleMenuItem(item)">
<icon *ngIf="!item.isOpen" name="arrow_drop_down" [flex]="true"></icon>
<icon *ngIf="item.isOpen" name="arrow_drop_up" [flex]="true"></icon>
</a>
</div>
</div>
<div class="uk-flex uk-flex-middle uk-flex-center">
<button class="uk-button uk-button-link uk-flex uk-flex-middle uk-margin-medium-right" (click)="editMenuItem(i, item, false)">
<icon name="edit" [flex]="true"></icon>
<span class="uk-margin-xsmall-left">Edit</span>
</button>
<button class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="confirmDeleteMenuItem(item._id, false)">
<icon name="delete" [flex]="true"></icon>
<span class="uk-margin-xsmall-left">Delete</span>
</button>
</div>
<div *ngIf="displayMenuItems.length > 1" class="uk-margin-medium-top uk-flex uk-flex-middle uk-text-small">
<span class="uk-text-meta uk-margin-small-right">
Move:
</span>
<a *ngIf="i != 0" class="uk-link uk-link-text uk-margin-right"
(click)="moveElement(i, i - 1)">
<div class="uk-flex uk-flex-middle">
<icon name="north" [flex]="true"></icon>
<span class="uk-margin-xsmall-left">Up</span>
<ng-container *ngIf="item.isOpen">
<div *ngIf="item.type != 'noAction'" class="uk-margin-medium-top uk-margin-medium-bottom">
<div class="uk-text-meta uk-text-small uk-margin-xsmall-bottom">
Target {{item.type == 'external' ? 'URL' : 'Route'}}
</div>
</a>
<a *ngIf="i != (displayMenuItems.length - 1)" class="uk-link uk-link-text"
(click)="moveElement(i, i + 1)">
<div class="uk-flex uk-flex-middle">
<icon name="south" [flex]="true"></icon>
<span class="uk-margin-xsmall-left">Down</span>
</div>
</a>
</div>
</ng-container>
</div>
<div *ngIf="item.items && item.items.length" #subElements transition-group>
<div *ngFor="let subItem of item.items; let j = index" transition-group-item>
<div class="uk-margin-medium-left uk-width-1-2@m uk-margin-bottom uk-padding-small menu-item">
<div class="uk-flex uk-flex-middle uk-flex-between">
<div>
{{subItem.title}}
{{item.type == 'external' ? item.url : item.route}}
</div>
<div class="uk-flex uk-flex-middle uk-flex-center">
<span *ngIf="subItem.type == 'external'" class="uk-text-meta uk-text-small uk-margin-small-right">External URL</span>
<span *ngIf="subItem.type == 'internal'" class="uk-text-meta uk-text-small uk-margin-small-right">Internal page</span>
<a class="uk-link-reset" (click)="toggleMenuItem(subItem)">
<icon *ngIf="!subItem.isOpen" name="arrow_drop_down" [flex]="true"></icon>
<icon *ngIf="subItem.isOpen" name="arrow_drop_up" [flex]="true"></icon>
</a>
<div *ngIf="item.type == 'internal' && item.route && pageStatus != null && !pageStatus.get(item.route)" class="uk-text-small uk-text-warning uk-margin-small-top">
This menu item is not visible because the page is disabled
</div>
</div>
<ng-container *ngIf="subItem.isOpen">
<div class="uk-margin-medium-top uk-margin-medium-bottom">
<div class="uk-text-meta uk-text-small uk-margin-xsmall-bottom">
Target {{subItem.type == 'external' ? 'URL' : 'Route'}}
<div class="uk-flex uk-flex-middle uk-flex-center">
<button class="uk-button uk-button-link uk-flex uk-flex-middle uk-margin-medium-right" (click)="editMenuItem(i, item, false)">
<icon name="edit" [flex]="true"></icon>
<span class="uk-margin-xsmall-left">Edit</span>
</button>
<button class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="confirmDeleteMenuItem(item._id, false)">
<icon name="delete" [flex]="true"></icon>
<span class="uk-margin-xsmall-left">Delete</span>
</button>
</div>
<div *ngIf="displayMenuItems.length > 1" class="uk-margin-medium-top uk-flex uk-flex-middle uk-text-small">
<span class="uk-text-meta uk-margin-small-right">
Move:
</span>
<a *ngIf="i != 0" class="uk-link uk-link-text uk-margin-right"
(click)="moveElement(i, i - 1)">
<div class="uk-flex uk-flex-middle">
<icon name="north" [flex]="true"></icon>
<span class="uk-margin-xsmall-left">Up</span>
</div>
</a>
<a *ngIf="i != (displayMenuItems.length - 1)" class="uk-link uk-link-text"
(click)="moveElement(i, i + 1)">
<div class="uk-flex uk-flex-middle">
<icon name="south" [flex]="true"></icon>
<span class="uk-margin-xsmall-left">Down</span>
</div>
</a>
</div>
</ng-container>
</div>
<div *ngIf="item.items && item.items.length" #subElements transition-group>
<div *ngFor="let subItem of item.items; let j = index" transition-group-item>
<div class="uk-margin-medium-left uk-width-2-3@m uk-margin-bottom uk-padding-small menu-item">
<div class="uk-flex uk-flex-middle uk-flex-between">
<div>
{{subItem.type == 'external' ? subItem.url : subItem.route}}
{{subItem.title}}
</div>
<div class="uk-flex uk-flex-middle uk-flex-center">
<span *ngIf="subItem.type == 'external'" class="uk-text-meta uk-text-small uk-margin-small-right">External URL</span>
<span *ngIf="subItem.type == 'internal'" class="uk-text-meta uk-text-small uk-margin-small-right">Internal page</span>
<a class="uk-link-reset" (click)="toggleMenuItem(subItem)">
<icon *ngIf="!subItem.isOpen" name="arrow_drop_down" [flex]="true"></icon>
<icon *ngIf="subItem.isOpen" name="arrow_drop_up" [flex]="true"></icon>
</a>
</div>
</div>
<div class="uk-flex uk-flex-middle uk-flex-center">
<button class="uk-button uk-button-link uk-flex uk-flex-middle uk-margin-medium-right" (click)="editMenuItem(j, subItem, true)">
<icon name="edit" [flex]="true"></icon>
<span class="uk-margin-xsmall-left">Edit</span>
</button>
<button class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="confirmDeleteMenuItem(subItem._id, true, subItem.parentItemId)">
<icon name="delete" [flex]="true"></icon>
<span class="uk-margin-xsmall-left">Delete</span>
</button>
</div>
<div *ngIf="item.items.length > 1" class="uk-margin-medium-top uk-flex uk-flex-middle uk-text-small">
<span class="uk-text-meta uk-margin-small-right">
Move:
</span>
<a *ngIf="j != 0" class="uk-link uk-link-text uk-margin-right"
(click)="moveElement(j, j - 1, item.items)">
<div class="uk-flex uk-flex-middle">
<icon name="north" [flex]="true"></icon>
<span class="uk-margin-xsmall-left">Up</span>
<ng-container *ngIf="subItem.isOpen">
<div class="uk-margin-medium-top uk-margin-medium-bottom">
<div class="uk-text-meta uk-text-small uk-margin-xsmall-bottom">
Target {{subItem.type == 'external' ? 'URL' : 'Route'}}
</div>
</a>
<a *ngIf="j != (item.items.length - 1)" class="uk-link uk-link-text"
(click)="moveElement(j, j + 1, item.items)">
<div class="uk-flex uk-flex-middle">
<icon name="south" [flex]="true"></icon>
<span class="uk-margin-xsmall-left">Down</span>
<div>
{{subItem.type == 'external' ? subItem.url : subItem.route}}
</div>
</a>
</div>
</ng-container>
</div>
<div class="uk-flex uk-flex-middle uk-flex-center">
<button class="uk-button uk-button-link uk-flex uk-flex-middle uk-margin-medium-right" (click)="editMenuItem(j, subItem, true)">
<icon name="edit" [flex]="true"></icon>
<span class="uk-margin-xsmall-left">Edit</span>
</button>
<button class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="confirmDeleteMenuItem(subItem._id, true, subItem.parentItemId)">
<icon name="delete" [flex]="true"></icon>
<span class="uk-margin-xsmall-left">Delete</span>
</button>
</div>
<div *ngIf="item.items.length > 1" class="uk-margin-medium-top uk-flex uk-flex-middle uk-text-small">
<span class="uk-text-meta uk-margin-small-right">
Move:
</span>
<a *ngIf="j != 0" class="uk-link uk-link-text uk-margin-right"
(click)="moveElement(j, j - 1, item.items)">
<div class="uk-flex uk-flex-middle">
<icon name="north" [flex]="true"></icon>
<span class="uk-margin-xsmall-left">Up</span>
</div>
</a>
<a *ngIf="j != (item.items.length - 1)" class="uk-link uk-link-text"
(click)="moveElement(j, j + 1, item.items)">
<div class="uk-flex uk-flex-middle">
<icon name="south" [flex]="true"></icon>
<span class="uk-margin-xsmall-left">Down</span>
</div>
</a>
</div>
</ng-container>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="displayMenuItems && displayMenuItems.length > 0" class="uk-width-1-4@m">
<h6>Menu settings</h6>
<div class="uk-margin-small-bottom">
<label (click)="toggleMenu(true, selectedMenuType == 'normalMenu'? false : true )">
<input class="uk-radio" type="radio" name="menu" [checked]="(selectedMenuType == 'normalMenu' && showNormalMenu) || (selectedMenuType == 'customMenu' && showFeaturedMenu)">
<span class="uk-margin-small-left">Show menu</span>
</label>
</div>
<div>
<label (click)="toggleMenu(false, selectedMenuType == 'normalMenu'? false : true )">
<input class="uk-radio" type="radio" name="menu" [checked]="(selectedMenuType == 'normalMenu' && !showNormalMenu) || (selectedMenuType == 'customMenu' && !showFeaturedMenu)">
<span class="uk-margin-small-left">Hide menu</span>
</label>
</div>
</div>
</div>
<div *ngIf="displayMenuItems && displayMenuItems.length == 0"
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
@ -174,7 +191,7 @@
placeholder="Name"></div>
<!-- Selecting parent of menu item -->
<div input *ngIf="selectedMenuType == 'normalMenu' && isPortalAdministrator" [formInput]="menuItemForm.get('parentItemId')" type="select"
placeholder="Parent" [options]="parentOptions" [tooltip]="false"></div>
placeholder="Parent" [options]="parentOptions" [tooltip]="false" [disabled]="menuItemForm.get('_id').value"></div>
<!-- Selecting type of menu item -->
<div input [formInput]="menuItemForm.get('type')" type="select" placeholder="Type"
[options]="getTypeOptions(menuItemForm.get('isFeatured').value, menuItemForm.get('parentItemId').value)" [tooltip]="false"></div>

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

@ -54,6 +54,9 @@ export class MenuComponent implements OnInit {
public selectedMenuItem: string;
public selectedMenuItemParent: string;
public isChild: boolean = false;
public showNormalMenu: boolean = false;
public showFeaturedMenu: boolean = false;
public communities: Portal[] = [];
public portal: string;
@ -145,6 +148,8 @@ export class MenuComponent implements OnInit {
data => {
this.featuredMenuItems = data.featuredMenuItems;
this.normalMenuItems = data.menuItems;
this.showFeaturedMenu = data.isFeaturedMenuEnabled;
this.showNormalMenu = data.isMenuEnabled;
this.getPages();
this.getParentOptions();
this.showLoading = false;
@ -282,6 +287,8 @@ export class MenuComponent implements OnInit {
} else {
let i = this.normalMenuItems.findIndex(_ => _._id == id);
this.normalMenuItems.splice(i, 1);
let j = this.parentOptions.findIndex(_ => _._id == id);
this.parentOptions.splice(j, 1);
}
}
}
@ -297,9 +304,10 @@ export class MenuComponent implements OnInit {
this.destroyTypeSubscription();
this.showLoading = true;
this.menuItemForm.value.target = this.menuItemForm.value['type'] == "internal" ? "_self" : "_blank";
console.log(this.menuItemForm.value);
if(!this.menuItemForm.value._id) {
this.subscriptions.push(
this._helpContentService.saveMenuItem(<MenuItem>this.menuItemForm.value, this.portal).subscribe(
this._helpContentService.saveMenuItem(<MenuItemExtended>this.menuItemForm.getRawValue(), this.portal).subscribe(
menuItem => {
this.menuItemSavedSuccessfully(menuItem, true);
NotificationHandler.rise('Menu item <b>' + menuItem.title + '</b> has been <b>successfully created</b>');
@ -310,7 +318,7 @@ export class MenuComponent implements OnInit {
)
} else {
this.subscriptions.push(
this._helpContentService.updateMenuItem(<MenuItem>this.menuItemForm.value, this.portal).subscribe(
this._helpContentService.updateMenuItem(<MenuItemExtended>this.menuItemForm.getRawValue(), this.portal).subscribe(
menuItem => {
this.menuItemSavedSuccessfully(menuItem, false);
NotificationHandler.rise('Menu item <b>' + menuItem.title + '</b> has been <b>successfully updated</b>');
@ -325,15 +333,14 @@ export class MenuComponent implements OnInit {
public menuItemSavedSuccessfully(menuItem: MenuItem, isNew: boolean) {
if(isNew) {
if(menuItem['parentItemId']) {
console.log('creating child');
let i = this.normalMenuItems.findIndex(_ => _._id == menuItem['parentItemId']);
this.normalMenuItems[i].items.push(menuItem);
} else {
console.log('creating parent');
if(menuItem.isFeatured) {
this.featuredMenuItems.push(menuItem);
} else {
this.normalMenuItems.push(menuItem);
this.parentOptions.push({label: menuItem.title, value: menuItem._id});
}
}
} else {
@ -396,4 +403,19 @@ export class MenuComponent implements OnInit {
});
}
}
public toggleMenu(status: boolean, isFeatured: boolean) {
this.subscriptions.push(
this._helpContentService.toggleMenu(status, isFeatured, this.portal).subscribe(() => {
if(isFeatured) {
this.showFeaturedMenu = status;
} else {
this.showNormalMenu = status;
}
this._clearCacheService.clearCache("Menu toggled");
}, error => {
this.handleError("System error toggling menu", error);
})
);
}
}

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

@ -346,6 +346,12 @@ export class HelpContentService {
.pipe(catchError(this.handleError));
}
toggleMenu(status: boolean, isFeatured: boolean, portalPid: string) {
return this.http.post<Menu>(properties.adminToolsAPIURL + properties.adminToolsPortalType + "/" + portalPid + "/menu/toggle?status=" + status + "&featured=" + isFeatured, {}, CustomOptions.getAuthOptionsWithBody())
.pipe(catchError(this.handleError));
}
// unused
getCommunities( helpContentUrl:string) {
return this.http.get<Array<Portal>>(helpContentUrl + properties.adminToolsPortalType)