[Connect Admin | Trunk & Library | angular-14]: Allow curators with profile to be invisible in the Gateway | Dynamically align custom menu.

1. CuratorInfo.ts: In Curator class added visible: boolean = true;
2. personal-info.module.ts: Imported MatSlideToggleModule.
3. personal-info.component.ts: Added slider to set curator profile to visible or invisible (default to visible).
4. menu.ts: In Menu class added field "featuredAlignment: MenuAlignment;" | Added enum MenuAlignment.
5. menu.component: Updated title "Menu settings" | Added "Menu Alignment" setting, to set if custom menu will be left, center or right alligned | Added notification when menu visibility changes.
6. help-content.service.ts: Added "alignMenu()" method to align custom menu dynamically.
pull/1/head
Konstantina Galouni 1 year ago
parent c0de2860ef
commit acdba43c8b

@ -159,19 +159,41 @@
</div>
</div>
<div *ngIf="displayMenuItems && displayMenuItems.length > 0" class="uk-width-1-4@m">
<h6>Menu settings</h6>
<h6>Menu visibility</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>
<span class="uk-margin-small-left">Visible</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>
<span class="uk-margin-small-left">Hidden</span>
</label>
</div>
<h6 class="uk-margin-medium-top">Menu alignment</h6>
<div *ngIf="selectedMenuType == 'customMenu'">
<div>
<label (click)="alignMenu('LEFT')">
<input class="uk-radio" type="radio" name="menuAlign" [checked]="(featuredAlignment == 'LEFT')">
<span class="uk-margin-small-left">Left</span>
</label>
</div>
<div>
<label (click)="alignMenu('CENTER')">
<input class="uk-radio" type="radio" name="menuAlign" [checked]="(featuredAlignment == 'CENTER')">
<span class="uk-margin-small-left">Center</span>
</label>
</div>
<div>
<label (click)="alignMenu('RIGHT')">
<input class="uk-radio" type="radio" name="menuAlign" [checked]="(featuredAlignment == 'RIGHT')">
<span class="uk-margin-small-left">Right</span>
</label>
</div>
</div>
</div>
</div>
<div *ngIf="displayMenuItems && displayMenuItems.length == 0"

@ -11,7 +11,7 @@ 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 {MenuItemExtended} from '../../sharedComponents/menu';
import {MenuAlignment, MenuItemExtended} from '../../sharedComponents/menu';
import {SearchInputComponent} from '../../sharedComponents/search-input/search-input.component';
import {Option} from '../../sharedComponents/input/input.component';
import {CommunityInfo} from '../../connect/community/communityInfo';
@ -24,7 +24,7 @@ import {HelperFunctions} from '../../utils/HelperFunctions.class';
import {NotificationHandler} from '../../utils/notification-handler';
// import {Page} from "../../utils/entities/adminTool/page";
// declare var UIkit;
declare var UIkit;
@Component({
selector: 'menuSelector',
@ -62,7 +62,8 @@ export class MenuComponent implements OnInit {
public showNormalMenu: boolean = false;
public showFeaturedMenu: boolean = false;
public featuredAlignment: string = MenuAlignment.CENTER.valueOf();
public communities: Portal[] = [];
public portal: string;
public name: string;
@ -155,6 +156,7 @@ export class MenuComponent implements OnInit {
this.normalMenuItems = data.menuItems;
this.showFeaturedMenu = data.isFeaturedMenuEnabled;
this.showNormalMenu = data.isMenuEnabled;
this.featuredAlignment = data.featuredAlignment.valueOf();
this.getPages();
this.getParentOptions();
this.showLoading = false;
@ -421,12 +423,26 @@ export class MenuComponent implements OnInit {
}
this._clearCacheService.clearCache("Menu toggled");
this._clearCacheService.purgeBrowserCache("Menu toggled", this.portal);
}, error => {
NotificationHandler.rise("Menu has been <b>successfully toggled to be "+(status?"visible":"hidden")+"</b>");
}, error => {
this.handleError("System error toggling menu", error);
})
);
}
public alignMenu(alignment: string) {
this.subscriptions.push(
this._helpContentService.alignMenu(MenuAlignment[alignment], this.portal).subscribe(() => {
this.featuredAlignment = alignment;
this._clearCacheService.clearCache("Menu aligned");
this._clearCacheService.purgeBrowserCache("Menu aligned", this.portal);
NotificationHandler.rise("Menu has been <b>successfully "+alignment.toLowerCase()+" aligned</b>");
}, error => {
this.handleError("System error aligning menu to the "+alignment.toLowerCase(), error);
})
);
}
// public newPageWindow() {
// this.newPageWindowOpen = !this.newPageWindowOpen;
// this.pageForm = this._fb.group({
@ -465,11 +481,7 @@ export class MenuComponent implements OnInit {
// this._helpContentService.savePage(<Page>this.pageForm.value, this.properties.adminToolsAPIURL).subscribe(
// page => {
// this.allPages.push({value: page.route, label: page.name});
// UIkit.notification('Page <b>' + page.name + '</b> has been <b>successfully created</b>', {
// status: 'success',
// timeout: 6000,
// pos: 'bottom-right'
// });
// NotificationHandler.rise('Page <b>' + page.name + '</b> has been <b>successfully created</b>');
// this.newPageWindowOpen = !this.newPageWindowOpen;
// this.menuItemForm.get('route').setValue(page.route);
// this.menuItemForm.get('route').markAsDirty();

@ -349,6 +349,11 @@ export class HelpContentService {
return this.http.post<Menu>(properties.adminToolsAPIURL + properties.adminToolsPortalType + "/" + portalPid + "/menu/toggle?status=" + status + "&featured=" + isFeatured, {}, CustomOptions.getAuthOptionsWithBody())
.pipe(catchError(this.handleError));
}
alignMenu(alignment: string, portalPid: string) {
return this.http.post<Menu>(properties.adminToolsAPIURL + properties.adminToolsPortalType + "/" + portalPid + "/menu/align?alignment=" + alignment, {}, CustomOptions.getAuthOptionsWithBody())
.pipe(catchError(this.handleError));
}
// unused

@ -76,6 +76,7 @@ export class Menu {
portalPid: string;
isFeaturedMenuEnabled: boolean;
isMenuEnabled: boolean;
featuredAlignment: MenuAlignment;
featuredMenuItems: MenuItemExtended[] = [];
menuItems: MenuItemExtended[] = [];
}
@ -83,3 +84,5 @@ export class Menu {
export class SideMenuItem extends MenuItem {
ukIcon: string = '';
}
export enum MenuAlignment {LEFT="LEFT", CENTER="CENTER", RIGHT="RIGHT"}

@ -6,6 +6,7 @@ export class Curator {
affiliations: Affiliation[];
photo: string;
bio: string;
visible: boolean = true;
}
export class Affiliation {

Loading…
Cancel
Save