[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>
|
</div>
|
||||||
<div *ngIf="displayMenuItems && displayMenuItems.length > 0" class="uk-width-1-4@m">
|
<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">
|
<div class="uk-margin-small-bottom">
|
||||||
<label (click)="toggleMenu(true, selectedMenuType == 'normalMenu'? false : true )">
|
<label (click)="toggleMenu(true, selectedMenuType == 'normalMenu'? false : true )">
|
||||||
<input class="uk-radio" type="radio" name="menu" [checked]="(selectedMenuType == 'normalMenu' && showNormalMenu) || (selectedMenuType == 'customMenu' && showFeaturedMenu)">
|
<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>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label (click)="toggleMenu(false, selectedMenuType == 'normalMenu'? false : true )">
|
<label (click)="toggleMenu(false, selectedMenuType == 'normalMenu'? false : true )">
|
||||||
<input class="uk-radio" type="radio" name="menu" [checked]="(selectedMenuType == 'normalMenu' && !showNormalMenu) || (selectedMenuType == 'customMenu' && !showFeaturedMenu)">
|
<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>
|
</label>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
<div *ngIf="displayMenuItems && displayMenuItems.length == 0"
|
<div *ngIf="displayMenuItems && displayMenuItems.length == 0"
|
||||||
|
|
|
@ -11,7 +11,7 @@ import {properties} from "../../../../environments/environment";
|
||||||
import {StringUtils} from "../../utils/string-utils.class";
|
import {StringUtils} from "../../utils/string-utils.class";
|
||||||
import {Title} from "@angular/platform-browser";
|
import {Title} from "@angular/platform-browser";
|
||||||
import {AlertModal} from '../../utils/modal/alert';
|
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 {SearchInputComponent} from '../../sharedComponents/search-input/search-input.component';
|
||||||
import {Option} from '../../sharedComponents/input/input.component';
|
import {Option} from '../../sharedComponents/input/input.component';
|
||||||
import {CommunityInfo} from '../../connect/community/communityInfo';
|
import {CommunityInfo} from '../../connect/community/communityInfo';
|
||||||
|
@ -24,7 +24,7 @@ import {HelperFunctions} from '../../utils/HelperFunctions.class';
|
||||||
import {NotificationHandler} from '../../utils/notification-handler';
|
import {NotificationHandler} from '../../utils/notification-handler';
|
||||||
// import {Page} from "../../utils/entities/adminTool/page";
|
// import {Page} from "../../utils/entities/adminTool/page";
|
||||||
|
|
||||||
// declare var UIkit;
|
declare var UIkit;
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'menuSelector',
|
selector: 'menuSelector',
|
||||||
|
@ -62,7 +62,8 @@ export class MenuComponent implements OnInit {
|
||||||
|
|
||||||
public showNormalMenu: boolean = false;
|
public showNormalMenu: boolean = false;
|
||||||
public showFeaturedMenu: boolean = false;
|
public showFeaturedMenu: boolean = false;
|
||||||
|
public featuredAlignment: string = MenuAlignment.CENTER.valueOf();
|
||||||
|
|
||||||
public communities: Portal[] = [];
|
public communities: Portal[] = [];
|
||||||
public portal: string;
|
public portal: string;
|
||||||
public name: string;
|
public name: string;
|
||||||
|
@ -155,6 +156,7 @@ export class MenuComponent implements OnInit {
|
||||||
this.normalMenuItems = data.menuItems;
|
this.normalMenuItems = data.menuItems;
|
||||||
this.showFeaturedMenu = data.isFeaturedMenuEnabled;
|
this.showFeaturedMenu = data.isFeaturedMenuEnabled;
|
||||||
this.showNormalMenu = data.isMenuEnabled;
|
this.showNormalMenu = data.isMenuEnabled;
|
||||||
|
this.featuredAlignment = data.featuredAlignment.valueOf();
|
||||||
this.getPages();
|
this.getPages();
|
||||||
this.getParentOptions();
|
this.getParentOptions();
|
||||||
this.showLoading = false;
|
this.showLoading = false;
|
||||||
|
@ -421,12 +423,26 @@ export class MenuComponent implements OnInit {
|
||||||
}
|
}
|
||||||
this._clearCacheService.clearCache("Menu toggled");
|
this._clearCacheService.clearCache("Menu toggled");
|
||||||
this._clearCacheService.purgeBrowserCache("Menu toggled", this.portal);
|
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);
|
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() {
|
// public newPageWindow() {
|
||||||
// this.newPageWindowOpen = !this.newPageWindowOpen;
|
// this.newPageWindowOpen = !this.newPageWindowOpen;
|
||||||
// this.pageForm = this._fb.group({
|
// 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(
|
// this._helpContentService.savePage(<Page>this.pageForm.value, this.properties.adminToolsAPIURL).subscribe(
|
||||||
// page => {
|
// page => {
|
||||||
// this.allPages.push({value: page.route, label: page.name});
|
// this.allPages.push({value: page.route, label: page.name});
|
||||||
// UIkit.notification('Page <b>' + page.name + '</b> has been <b>successfully created</b>', {
|
// NotificationHandler.rise('Page <b>' + page.name + '</b> has been <b>successfully created</b>');
|
||||||
// status: 'success',
|
|
||||||
// timeout: 6000,
|
|
||||||
// pos: 'bottom-right'
|
|
||||||
// });
|
|
||||||
// this.newPageWindowOpen = !this.newPageWindowOpen;
|
// this.newPageWindowOpen = !this.newPageWindowOpen;
|
||||||
// this.menuItemForm.get('route').setValue(page.route);
|
// this.menuItemForm.get('route').setValue(page.route);
|
||||||
// this.menuItemForm.get('route').markAsDirty();
|
// 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())
|
return this.http.post<Menu>(properties.adminToolsAPIURL + properties.adminToolsPortalType + "/" + portalPid + "/menu/toggle?status=" + status + "&featured=" + isFeatured, {}, CustomOptions.getAuthOptionsWithBody())
|
||||||
.pipe(catchError(this.handleError));
|
.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
|
// unused
|
||||||
|
|
|
@ -76,6 +76,7 @@ export class Menu {
|
||||||
portalPid: string;
|
portalPid: string;
|
||||||
isFeaturedMenuEnabled: boolean;
|
isFeaturedMenuEnabled: boolean;
|
||||||
isMenuEnabled: boolean;
|
isMenuEnabled: boolean;
|
||||||
|
featuredAlignment: MenuAlignment;
|
||||||
featuredMenuItems: MenuItemExtended[] = [];
|
featuredMenuItems: MenuItemExtended[] = [];
|
||||||
menuItems: MenuItemExtended[] = [];
|
menuItems: MenuItemExtended[] = [];
|
||||||
}
|
}
|
||||||
|
@ -83,3 +84,5 @@ export class Menu {
|
||||||
export class SideMenuItem extends MenuItem {
|
export class SideMenuItem extends MenuItem {
|
||||||
ukIcon: string = '';
|
ukIcon: string = '';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export enum MenuAlignment {LEFT="LEFT", CENTER="CENTER", RIGHT="RIGHT"}
|
|
@ -6,6 +6,7 @@ export class Curator {
|
||||||
affiliations: Affiliation[];
|
affiliations: Affiliation[];
|
||||||
photo: string;
|
photo: string;
|
||||||
bio: string;
|
bio: string;
|
||||||
|
visible: boolean = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class Affiliation {
|
export class Affiliation {
|
||||||
|
|
Loading…
Reference in New Issue