[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.
This commit is contained in:
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…
Reference in New Issue