Merge branch 'master' of code-repo.d4science.org:MaDgIK/openaire-library

This commit is contained in:
argirok 2021-12-17 15:40:08 +02:00
commit 88d70c21ac
7 changed files with 385 additions and 5 deletions

View File

@ -0,0 +1,12 @@
import { NgModule } from '@angular/core';
import {RouterModule} from '@angular/router';
import {MenuComponent} from "./menu.component";
@NgModule({
imports: [
RouterModule.forChild([
{ path: '',component: MenuComponent}
])
]
})
export class MenuRoutingModule { }

View File

@ -0,0 +1,137 @@
<div page-content class="admin-pages">
<div header>
<admin-tabs tab="menu" [portal]="portal"></admin-tabs>
<div *ngIf="!showLoading" class="uk-grid" uk-grid>
<div class="uk-width-1-1">
<ul *ngIf="!isPortalAdministrator" class="uk-subnav uk-subnav-pill uk-flex uk-flex-middle">
<li [class.uk-active]="filterForm.get('status').value === 'resources'" class="uk-visible-toggle uk-position-relative uk-padding-remove-horizontal">
<span>
<a (click)="filterForm.get('status').setValue('resources')">
<span class="title">Resourses</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()">
<a>Edit</a>
</li>
<hr class="uk-nav-divider">
<li (click)="deleteRootMenu()">
<a>Delete</a>
</li>
</ul>
</div>
</span>
</span>
</li>
<li (click)="newRootMenu()" class="uk-visible-toggle">
<span class="clickable">
<span class="uk-icon-button small portal-icon-button">
<icon name="add"></icon>
</span>
<span class="space uk-hidden-hover">
Create new root menu
</span>
</span>
</li>
</ul>
</div>
</div>
<div class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid uk-margin-remove-top" uk-grid>
<div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search menu item"
[selected]="selectedKeyword" (closeEmitter)="onSearchClose()" (resetEmitter)="reset()"
[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">
<button class="large uk-icon-button uk-button-secondary">
<icon name="add"></icon>
</button>
<button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">
Add new menu item
</button>
</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">
<loading></loading>
</div>
<div *ngIf="!showLoading">
<ul class="uk-list submenu-items">
<li class="uk-card uk-card-default uk-margin-bottom">
<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">
Name and info
</div>
<div class="uk-grid uk-width-1-1 uk-margin-left">
Additional info
</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()">
<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()">
<i uk-icon="trash" class="clickable uk-icon"></i>
<span class="uk-margin-small-left"> Delete</span>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<modal-alert #editModal [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>
<!-- Workflow for EXTERNAL -->
<div dashboard-input *ngIf="menuItemForm.get('type').value === 'external'" [formInput]="menuItemForm.get('url')" type="URL" label="URL" placeholder="Write a URL"></div>
<!-- Workflow for INTERNAL -->
<div *ngIf="menuItemForm.get('type').value === 'internal'">
<div class="uk-text-center">Select one of the pages</div>
<div dashboard-input [formInput]="menuItemForm.get('route')" type="autocomplete" label="Page" placeholder="Search all pages" [options]="allPages" [showOptionsOnEmpty]="false">
</div>
<div class="uk-text-center uk-margin-top">Or <a>create a new one</a></div>
</div>
</form>
</modal-alert>

View File

@ -0,0 +1,192 @@
import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {HelpContentService} from '../../services/help-content.service';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {Portal} from '../../utils/entities/adminTool/portal';
import {EnvProperties} from '../../utils/properties/env-properties';
import {Session} from '../../login/utils/helper.class';
import {UserManagementService} from '../../services/user-management.service';
import {Subscriber} from "rxjs";
import {properties} from "../../../../environments/environment";
import {StringUtils} from "../../utils/string-utils.class";
import {Title} from "@angular/platform-browser";
import {AlertModal} from '../../utils/modal/alert';
import {CheckMenuItem, MenuItem} from '../../sharedComponents/menu';
import {SearchInputComponent} from '../../sharedComponents/search-input/search-input.component';
import {Option} from '../../sharedComponents/input/input.component';
@Component({
selector: 'menuSelector',
templateUrl: './menu.component.html',
})
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 menuItemForm: FormGroup;
public allPages = [];
public keyword = '';
public communities: Portal[] = [];
public portal: string;
public properties: EnvProperties = properties;
public showLoading = true;
public isPortalAdministrator = null;
public filterForm: FormGroup;
public typeOptions = [
{label: 'Internal Link', value: 'internal'},
{label: 'External Link', value: 'external'}
]
public selectedKeyword: string;
private subscriptions: any[] = [];
constructor(private element: ElementRef, private route: ActivatedRoute,
private _router: Router, private title: Title,
private _helpContentService: HelpContentService,
private userManagementService: UserManagementService, private _fb: FormBuilder) {
}
ngOnInit() {
this.filterForm = this._fb.group({
keyword: [''],
status: ['resources', Validators.required]
});
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) {
this.title.setTitle(StringUtils.capitalize(this.portal) + ' | Menu');
} else if (this.route.snapshot.params[this.route.snapshot.data.param]) {
this.title.setTitle(this.portal.toUpperCase() + ' | Menu');
} else {
this.title.setTitle('Administrator Dashboard | Menu');
}
this.isPortalAdministrator = Session.isPortalAdministrator(user) && !this.portal;
});
this.showLoading = false;
}
ngOnDestroy(): void {
this.subscriptions.forEach(value => {
if (value instanceof Subscriber) {
value.unsubscribe();
} else if (value instanceof Function) {
value();
}
});
}
public newRootMenu() {
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 Root Menu', 'Save Changes');
}
public editRootMenu() {
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),
});
this.menuItemsModalOpen('Edit Root Menu', '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 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.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 deleteMenuItem() {
console.log('Delete menu item');
}
private menuItemsModalOpen(title: string, yesBtn: string) {
this.editModal.cancelButton = true;
this.editModal.okButton = true;
this.editModal.okButtonLeft = false;
this.editModal.alertTitle = title;
this.editModal.okButtonText = yesBtn;
this.editModal.open();
}
public toggleMenuItems(status: boolean, ids: string[]) {
}
public onSearchClose() {
this.selectedKeyword = this.filterForm.get('keyword').value;
}
public reset() {
this.selectedKeyword = null;
this.searchInputComponent.reset();
}
selectAll() {
let checked = this.getSelectedMenuItems().length != this.checkboxes.length;
for (let check of this.checkboxes) {
check.checked = checked;
}
}
}

View File

@ -0,0 +1,31 @@
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {CommonModule} from '@angular/common';
import {MenuComponent} from './menu.component';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {AlertModalModule} from '../../utils/modal/alertModal.module';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import {AdminToolServiceModule} from "../../services/adminToolService.module";
import {InputModule} from "../../sharedComponents/input/input.module";
import {PageContentModule} from "../sharedComponents/page-content/page-content.module";
import {AdminTabsModule} from "../sharedComponents/admin-tabs/admin-tabs.module";
import {MenuRoutingModule} from "./menu-routing.module";
import {SearchInputModule} from "../../sharedComponents/search-input/search-input.module";
import {IconsModule} from "../../utils/icons/icons.module";
import {IconsService} from "../../utils/icons/icons.service";
import {add} from "../../utils/icons/icons";
import {LoadingModule} from "../../utils/loading/loading.module";
@NgModule({
imports: [
CommonModule, RouterModule, FormsModule, AdminToolServiceModule,
AlertModalModule, ReactiveFormsModule, MatSlideToggleModule, InputModule, PageContentModule, AdminTabsModule, MenuRoutingModule, SearchInputModule, IconsModule, LoadingModule
],
declarations: [MenuComponent],
exports: [MenuComponent]
})
export class MenuModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([add]);
}
}

View File

@ -3,7 +3,7 @@ import {Session, User} from "../../../login/utils/helper.class";
import {UserManagementService} from "../../../services/user-management.service"; import {UserManagementService} from "../../../services/user-management.service";
import {Subscriber} from "rxjs"; import {Subscriber} from "rxjs";
import {ActivatedRoute} from "@angular/router"; import {ActivatedRoute} from "@angular/router";
import {HelperFunctions} from "../../../utils/HelperFunctions.class"; import { properties } from 'src/environments/environment';
@Component({ @Component({
selector: 'admin-tabs', selector: 'admin-tabs',
@ -12,6 +12,7 @@ import {HelperFunctions} from "../../../utils/HelperFunctions.class";
<li *ngIf="isPortalAdmin && !portal" [class.uk-active]="tab === 'portal'"><a routerLink="../portals"><span class="title">Portals</span></a></li> <li *ngIf="isPortalAdmin && !portal" [class.uk-active]="tab === 'portal'"><a routerLink="../portals"><span class="title">Portals</span></a></li>
<li [class.uk-active]="tab === 'page'"><a routerLink="../pages"><span class="title">Pages</span></a></li> <li [class.uk-active]="tab === 'page'"><a routerLink="../pages"><span class="title">Pages</span></a></li>
<li [class.uk-active]="tab === 'entity'"><a routerLink="../entities"><span class="title">Entities</span></a></li> <li [class.uk-active]="tab === 'entity'"><a routerLink="../entities"><span class="title">Entities</span></a></li>
<li *ngIf="env == 'development'" [class.uk-active]="tab === 'menu'"><a routerLink="../menu"><span class="title">Menu</span></a></li>
<li *ngIf="isPortalAdmin && !portal" [class.uk-active]="tab === 'class'"><a routerLink="../classes"><span class="title">Classes</span></a></li> <li *ngIf="isPortalAdmin && !portal" [class.uk-active]="tab === 'class'"><a routerLink="../classes"><span class="title">Classes</span></a></li>
</ul> </ul>
` `
@ -25,7 +26,9 @@ export class AdminTabsComponent implements OnInit {
@Input() @Input()
public user: User; public user: User;
@Input() @Input()
public tab: "portal"| "page" | "entity" | "class" = 'page'; public tab: "portal" | "page" | "entity" | "menu" | "class" = 'page';
public env = properties.environment;
private subscriptions: any[] = []; private subscriptions: any[] = [];
constructor(private route: ActivatedRoute, private userManagementService: UserManagementService) { constructor(private route: ActivatedRoute, private userManagementService: UserManagementService) {

View File

@ -252,8 +252,8 @@ export class HelpContentService {
.pipe(catchError(this.handleError)); .pipe(catchError(this.handleError));
} }
// End of replacing part of getPages (now getAllPages) // End of replacing part of getPages (now getAllPages)
//TODO double check with konstantina - there is no param that we are asking the community pages. without pid we get all portalTypes
getAllPages(helpContentUrl:string) {//,pid:string,with_positions:boolean=null) { getAllPages(helpContentUrl:string, pid:string = null) {//with_positions:boolean=null) {
// let parameters: string = ""; // let parameters: string = "";
// if(pid || with_positions == true || with_positions == false) { // if(pid || with_positions == true || with_positions == false) {
// parameters = "?"; // parameters = "?";
@ -264,7 +264,7 @@ export class HelpContentService {
// parameters += "&with_positions="+with_positions; // parameters += "&with_positions="+with_positions;
// } // }
// } // }
return this.http.get<Array<Page>>(helpContentUrl + 'page') return this.http.get<Array<Page>>(helpContentUrl + 'page' + (pid?"pid="+pid:""))
//.map(res => <Array<Page>> res.json()) //.map(res => <Array<Page>> res.json())
.pipe(catchError(this.handleError)); .pipe(catchError(this.handleError));
} }

View File

@ -82,3 +82,8 @@ export class SideMenuItem {
items: RootMenuItem[] = []; items: RootMenuItem[] = [];
ukIcon: string = ''; ukIcon: string = '';
} }
export interface CheckMenuItem {
menuItem: MenuItem;
checked: boolean;
}