Add validator for page route. Change icons for buttons. Disable edit page with a Portal PID.
This commit is contained in:
parent
cd329c70e4
commit
7282f1bac5
|
@ -77,11 +77,9 @@
|
|||
</div>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div class="actions" href="#">
|
||||
<i class="clickable" uk-icon="pencil" (click)="editDivId(i)"></i>
|
||||
<i class="clickable uk-text-danger" uk-icon="trash"
|
||||
(click)="confirmDeleteDivId(check.divId._id)"></i>
|
||||
<icon class="clickable" name="edit" (click)="editDivId(i)"></icon>
|
||||
<icon class="clickable uk-margin-small-left" [customClass]="'uk-text-danger'" name="remove" (click)="confirmDeleteDivId(check.divId._id)"></icon>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
@ -20,7 +20,7 @@ import {ClassesRoutingModule} from "./classes-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 {add, edit, remove} from "../../utils/icons/icons";
|
||||
import {LoadingModule} from "../../utils/loading/loading.module";
|
||||
|
||||
@NgModule({
|
||||
|
@ -34,6 +34,6 @@ import {LoadingModule} from "../../utils/loading/loading.module";
|
|||
})
|
||||
export class DivIdsModule {
|
||||
constructor(private iconsService: IconsService) {
|
||||
this.iconsService.registerIcons([add]);
|
||||
this.iconsService.registerIcons([add, edit, remove]);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -94,22 +94,15 @@
|
|||
|
||||
<div class=" uk-flex-center uk-flex">
|
||||
<div class="actions" href="#">
|
||||
<div class="" (click)="editPageHelpContent(check.divHelpContent._id)"
|
||||
class="uk-button action uk-margin-top uk-flex uk-flex-middle ">
|
||||
<i class="clickable" uk-icon="pencil"
|
||||
></i>
|
||||
<span class="uk-margin-small-left">
|
||||
Edit
|
||||
</span>
|
||||
</div>
|
||||
<div (click)="confirmDeletePageHelpContent(check.divHelpContent._id)"
|
||||
class="uk-button action uk-margin-top uk-flex uk-flex-middle ">
|
||||
<i class="clickable " uk-icon="trash"
|
||||
></i>
|
||||
<span class="uk-margin-small-left">
|
||||
Delete
|
||||
</span>
|
||||
</div>
|
||||
<button (click)="editPageHelpContent(check.divHelpContent._id)" class="uk-button action uk-margin-top uk-flex uk-flex-middle">
|
||||
<icon name="edit"></icon>
|
||||
<span class="uk-margin-small-left">Edit</span>
|
||||
</button>
|
||||
<button (click)="confirmDeletePageHelpContent(check.divHelpContent._id)"
|
||||
class="uk-button action uk-margin-top uk-flex uk-flex-middle">
|
||||
<icon name="remove"></icon>
|
||||
<span class="uk-margin-small-left">Delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -12,7 +12,7 @@ import {InputModule} from '../../sharedComponents/input/input.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, arrow_left} from '../../utils/icons/icons';
|
||||
import {add, arrow_left, edit, remove} from '../../utils/icons/icons';
|
||||
import {LoadingModule} from '../../utils/loading/loading.module';
|
||||
import {HTMLToStringPipeModule} from '../../utils/pipes/HTMLToStringPipe.module';
|
||||
import {ClassHelpContentsRoutingModule} from './class-help-contents-routing.module';
|
||||
|
@ -33,6 +33,6 @@ import {PageContentModule} from '../sharedComponents/page-content/page-content.m
|
|||
})
|
||||
export class ClassHelpContentsModule {
|
||||
constructor(private iconsService: IconsService) {
|
||||
this.iconsService.registerIcons([add, arrow_left])
|
||||
this.iconsService.registerIcons([add, arrow_left, edit, remove])
|
||||
}
|
||||
}
|
||||
|
|
|
@ -91,9 +91,8 @@
|
|||
|
||||
<td *ngIf="isPortalAdministrator">
|
||||
<div class="actions" href="#">
|
||||
<i class="clickable " uk-icon="pencil" (click)="editEntity(i)"></i>
|
||||
<i class="clickable uk-text-danger" uk-icon="trash"
|
||||
(click)="confirmDeleteEntity(check.entity._id)"></i>
|
||||
<icon class="clickable" name="edit" (click)="editEntity(i)"></icon>
|
||||
<icon class="clickable uk-margin-small-left" [customClass]="'uk-text-danger'" name="remove" (click)="confirmDeleteEntity(check.entity._id)"></icon>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
@ -13,7 +13,7 @@ import {EntitiesRoutingModule} from "./entities-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 {add, edit, remove} from "../../utils/icons/icons";
|
||||
import {LoadingModule} from "../../utils/loading/loading.module";
|
||||
|
||||
@NgModule({
|
||||
|
@ -26,6 +26,6 @@ import {LoadingModule} from "../../utils/loading/loading.module";
|
|||
})
|
||||
export class EntitiesModule {
|
||||
constructor(private iconsService: IconsService) {
|
||||
this.iconsService.registerIcons([add]);
|
||||
this.iconsService.registerIcons([add, edit, remove]);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -61,60 +61,56 @@
|
|||
<div *ngIf="!showLoading">
|
||||
<div *ngIf="checkboxes.length > 0" class="uk-margin-medium-bottom">
|
||||
<ul class="uk-list pages">
|
||||
<li *ngFor="let check of checkboxes; let i=index" 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 uk-first-column ">
|
||||
<div class="uk-grid uk-flex uk-flex-middle">
|
||||
<div><input id="{{check.pageHelpContent._id}}" class="checkBox" type="checkbox"
|
||||
name="entitiescb[]" value="{{check.pageHelpContent._id}}" [(ngModel)]="check.checked">
|
||||
<li *ngFor="let check of checkboxes; let i=index" 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 id="{{check.pageHelpContent._id}}" class="checkBox" type="checkbox"
|
||||
name="entitiescb[]" value="{{check.pageHelpContent._id}}" [(ngModel)]="check.checked">
|
||||
</div>
|
||||
<div class="uk-width-expand uk-margin-medium-bottom">
|
||||
<div *ngIf="!selectedPageId">
|
||||
<div class="page" href="#">{{check.pageHelpContent.page.name}}</div>
|
||||
</div>
|
||||
<div class="content multi-line-ellipsis lines-2">
|
||||
<p>{{check.pageHelpContent.content|htmlToString}}</p></div>
|
||||
</div>
|
||||
<div class="uk-grid uk-width-1-1 uk-margin-left">
|
||||
<div class=" ">
|
||||
<span class="title">Placement: </span>{{check.pageHelpContent.placement}}
|
||||
</div>
|
||||
<div class=" ">
|
||||
<span class="title">Order: </span>{{check.pageHelpContent.order}}
|
||||
</div>
|
||||
<div class=" ">
|
||||
<span class="title uk-margin-small-right">Enable/disable: </span>
|
||||
<mat-slide-toggle [checked]="check.pageHelpContent.isActive"
|
||||
(change)="($event.source.checked = check.pageHelpContent.isActive);togglePageHelpContents(!check.pageHelpContent.isActive,[check.pageHelpContent._id])"
|
||||
uk-tooltip="title:<div class='uk-padding-small uk-width-large'><div class='uk-text-bold '> Enable or disable help text to show or hide it from the dashboard</div></div>"
|
||||
></mat-slide-toggle>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-width-expand uk-margin-medium-bottom">
|
||||
<div *ngIf="!selectedPageId">
|
||||
<div class="page" href="#">{{check.pageHelpContent.page.name}}</div>
|
||||
</div>
|
||||
<div class="content multi-line-ellipsis lines-2">
|
||||
<p>{{check.pageHelpContent.content|htmlToString}}</p></div>
|
||||
</div>
|
||||
<div class="uk-grid uk-width-1-1 uk-margin-left">
|
||||
<div class=" ">
|
||||
<span class="title">Placement: </span>{{check.pageHelpContent.placement}}
|
||||
</div>
|
||||
<div class=" ">
|
||||
<span class="title">Order: </span>{{check.pageHelpContent.order}}
|
||||
</div>
|
||||
<div class=" ">
|
||||
<span class="title uk-margin-small-right">Enable/disable: </span>
|
||||
<mat-slide-toggle [checked]="check.pageHelpContent.isActive"
|
||||
(change)="($event.source.checked = check.pageHelpContent.isActive);togglePageHelpContents(!check.pageHelpContent.isActive,[check.pageHelpContent._id])"
|
||||
uk-tooltip="title:<div class='uk-padding-small uk-width-large'><div class='uk-text-bold '> Enable or disable help text to show or hide it from the dashboard</div></div>"
|
||||
></mat-slide-toggle>
|
||||
</div>
|
||||
<div class="uk-width-1-5">
|
||||
<div class="uk-flex uk-flex-center uk-flex-column uk-height-1-1">
|
||||
<div class="uk-flex uk-flex-center">
|
||||
<div class="actions" href="#">
|
||||
<button (click)="editPageHelpContent(check.pageHelpContent._id)" class="uk-button action uk-margin-top uk-flex uk-flex-middle">
|
||||
<icon name="edit"></icon>
|
||||
<span class="uk-margin-small-left">Edit</span>
|
||||
</button>
|
||||
<button (click)="confirmDeletePageHelpContent(check.pageHelpContent._id)" class="uk-button action uk-margin-top uk-flex uk-flex-middle">
|
||||
<icon name="remove"></icon>
|
||||
<span class="uk-margin-small-left">Delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-width-1-5 uk-first-column">
|
||||
<div class=" uk-flex-center uk-flex">
|
||||
<div class="actions" href="#">
|
||||
<div class="" (click)="editPageHelpContent(check.pageHelpContent._id)"
|
||||
class="uk-button action uk-margin-top uk-flex uk-flex-middle ">
|
||||
<i class="clickable" uk-icon="pencil"
|
||||
></i>
|
||||
<span class="uk-margin-small-left">Edit</span>
|
||||
</div>
|
||||
<div (click)="confirmDeletePageHelpContent(check.pageHelpContent._id)"
|
||||
class="uk-button action uk-margin-top uk-flex uk-flex-middle ">
|
||||
<i class="clickable " uk-icon="trash"
|
||||
></i>
|
||||
<span class="uk-margin-small-left">
|
||||
Delete
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div *ngIf="checkboxes.length == 0"
|
||||
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
|
||||
|
|
|
@ -13,7 +13,7 @@ import {PageContentModule} from '../sharedComponents/page-content/page-content.m
|
|||
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, arrow_left} from '../../utils/icons/icons';
|
||||
import {add, arrow_left, edit, remove} from '../../utils/icons/icons';
|
||||
import {LoadingModule} from '../../utils/loading/loading.module';
|
||||
import {HTMLToStringPipeModule} from '../../utils/pipes/HTMLToStringPipe.module';
|
||||
|
||||
|
@ -30,6 +30,6 @@ import {HTMLToStringPipeModule} from '../../utils/pipes/HTMLToStringPipe.module'
|
|||
})
|
||||
export class PageHelpContentsModule {
|
||||
constructor(private iconsService: IconsService) {
|
||||
this.iconsService.registerIcons([add, arrow_left])
|
||||
this.iconsService.registerIcons([add, arrow_left, edit, remove])
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,17 +1,18 @@
|
|||
<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 *ngFor="let item of rootMenuItems; let i=index" [class.uk-active]="activeRootMenuId==item['_id']" class="uk-visible-toggle uk-position-relative uk-padding-remove-horizontal">
|
||||
<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 *ngFor="let item of rootMenuItems; let i=index" [class.uk-active]="activeRootMenuId==item['_id']"
|
||||
class="uk-visible-toggle uk-position-relative uk-padding-remove-horizontal">
|
||||
<span>
|
||||
<a (click)="changeActiveRootMenuItem(item)">
|
||||
<span class="title">{{item.title}}</span>
|
||||
</a>
|
||||
<span class="uk-invisible-hover uk-position-center-right color z-index-2">
|
||||
<span class="clickable" uk-icon="more-vertical"></span>
|
||||
<div #element uk-dropdown="mode: click; pos: bottom-right; offset: 10; delay-hide: 0; flip: false">
|
||||
<div #element uk-dropdown="mode: click; pos: bottom-right; offset: 20; delay-hide: 0; flip: false">
|
||||
<ul class="uk-nav uk-dropdown-nav">
|
||||
<li (click)="editMenuItem(item, false)">
|
||||
<a>Edit</a>
|
||||
|
@ -24,8 +25,8 @@
|
|||
</div>
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
<li (click)="newMenuItem(false)" class="uk-visible-toggle">
|
||||
</li>
|
||||
<li (click)="newMenuItem(false)" class="uk-visible-toggle">
|
||||
<span class="clickable">
|
||||
<span class="uk-icon-button small portal-icon-button">
|
||||
<icon name="add"></icon>
|
||||
|
@ -34,100 +35,118 @@
|
|||
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(true)" 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>
|
||||
</div>
|
||||
<div inner>
|
||||
<div *ngIf="showLoading" class="uk-position-center">
|
||||
<loading></loading>
|
||||
</div>
|
||||
<div *ngIf="!showLoading">
|
||||
<ul *ngIf='activeRootMenuId' class="uk-list submenu-items">
|
||||
<li *ngFor="let child of childrenMenuItems" 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 class="uk-width-expand uk-margin-medium-bottom">
|
||||
{{child.title}}
|
||||
</div>
|
||||
<div *ngIf="child.url && child.type == 'external'" class="uk-grid uk-width-1-1 uk-margin-left">
|
||||
<span class="title uk-padding-remove">URL: </span><a href="{{child.url}}" target="_blank" class="uk-padding-remove uk-margin-left">{{child.url}}</a>
|
||||
</div>
|
||||
<div *ngIf="child.route && child.type == 'internal'" class="uk-grid uk-width-1-1 uk-margin-left">
|
||||
<span class="title uk-padding-remove">Route: </span><span class="uk-padding-remove uk-margin-left">{{child.route}}</span>
|
||||
</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(child, true)">
|
||||
<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)="confirmDeleteMenuItem(child._id, true)">
|
||||
<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 *ngIf="childrenMenuItems.length == 0"
|
||||
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
|
||||
</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(true)" 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>
|
||||
</div>
|
||||
<div inner>
|
||||
<div *ngIf="showLoading" class="uk-position-center">
|
||||
<loading></loading>
|
||||
</div>
|
||||
<div *ngIf="!showLoading">
|
||||
<ul *ngIf='activeRootMenuId' class="uk-list submenu-items">
|
||||
<li *ngFor="let child of childrenMenuItems" 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 class="uk-width-expand uk-margin-medium-bottom">
|
||||
{{child.title}}
|
||||
</div>
|
||||
<div *ngIf="child.url && child.type == 'external'" class="uk-grid uk-width-1-1 uk-margin-left">
|
||||
<span class="title uk-padding-remove">URL: </span><a href="{{child.url}}" target="_blank"
|
||||
class="uk-padding-remove uk-margin-left">{{child.url}}</a>
|
||||
</div>
|
||||
<div *ngIf="child.route && child.type == 'internal'" class="uk-grid uk-width-1-1 uk-margin-left">
|
||||
<span class="title uk-padding-remove">Route: </span><span
|
||||
class="uk-padding-remove uk-margin-left">{{child.route}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-width-1-5">
|
||||
<div class="uk-flex uk-flex-center uk-flex-column uk-height-1-1">
|
||||
<div class="uk-flex uk-flex-center">
|
||||
<div class="actions">
|
||||
<button class="uk-button action uk-margin-top uk-flex uk-flex-middle"
|
||||
(click)="editMenuItem(child, true)">
|
||||
<icon name="edit"></icon>
|
||||
<span class="uk-margin-small-left"> Edit</span>
|
||||
</button>
|
||||
<button class="uk-button action uk-margin-top uk-flex uk-flex-middle"
|
||||
(click)="confirmDeleteMenuItem(child._id, true)">
|
||||
<icon name="remove"></icon>
|
||||
<span class="uk-margin-small-left"> Delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div *ngIf="childrenMenuItems.length == 0"
|
||||
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
|
||||
<div>No menu items found</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<modal-alert #editModal (alertOutput)="menuItemSaveConfirmed($event)"
|
||||
[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]="getTypeOptions()" [tooltip]="false"></div>
|
||||
<!-- Workflow for EXTERNAL -->
|
||||
<div dashboard-input *ngIf="menuItemForm.get('type').value === 'external'" [formInput]="menuItemForm.get('url')" [validators]="menuItemForm.get('url').validator" 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')" [validators]="menuItemForm.get('route').validator" type="autocomplete" label="Page" placeholder="Search all pages" [options]="allPages" [showOptionsOnEmpty]="false">
|
||||
<modal-alert #editModal (alertOutput)="menuItemSaveConfirmed($event)"
|
||||
[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]="getTypeOptions()" [tooltip]="false"></div>
|
||||
<!-- Workflow for EXTERNAL -->
|
||||
<div dashboard-input *ngIf="menuItemForm.get('type').value === 'external'" [formInput]="menuItemForm.get('url')"
|
||||
[validators]="menuItemForm.get('url').validator" 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')" [validators]="menuItemForm.get('route').validator"
|
||||
type="autocomplete" label="Page" placeholder="Search all pages" [options]="allPages"
|
||||
[showOptionsOnEmpty]="false">
|
||||
</div>
|
||||
<div class="uk-text-center uk-margin-top">Or <a (click)="newPageWindow()">create a new one</a></div>
|
||||
<div *ngIf="newPageWindowOpen" class="uk-card uk-card-default uk-card-body uk-margin-top">
|
||||
<div>
|
||||
<button (click)="newPageWindow()" class="uk-close uk-icon uk-float-right" uk-close></button>
|
||||
<h6 class="uk-text-bold uk-margin-remove-top">Create New Page</h6>
|
||||
</div>
|
||||
<form *ngIf="pageForm" [formGroup]="pageForm" class="uk grid uk-child-width-1-1" uk-grid>
|
||||
<div dashboard-input [formInput]="pageForm.get('name')" type="text" label="Name" placeholder="Write a name"></div>
|
||||
<div dashboard-input [formInput]="pageForm.get('route')" type="text" label="Route" placeholder="Write a route"></div>
|
||||
<div class="uk-flex uk-flex-right">
|
||||
<button [disabled]="!(pageForm.get('name').value && pageForm.get('route').value)" class="uk-button uk-button-secondary outlined" (click)="createPage()">Create Page</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="uk-text-center uk-margin-top">Or <a (click)="newPageWindow()">create a new one</a></div>
|
||||
<div *ngIf="newPageWindowOpen" class="uk-card uk-card-default uk-card-body uk-margin-top">
|
||||
<div>
|
||||
<button (click)="newPageWindow()" class="uk-close uk-icon uk-float-right" uk-close></button>
|
||||
<h6 class="uk-text-bold uk-margin-remove-top">Create New Page</h6>
|
||||
</div>
|
||||
<form *ngIf="pageForm" [formGroup]="pageForm" class="uk grid uk-child-width-1-1" uk-grid>
|
||||
<div dashboard-input [formInput]="pageForm.get('name')" type="text" label="Name"
|
||||
placeholder="Write a name"></div>
|
||||
<div dashboard-input [formInput]="pageForm.get('route')" type="text" label="Route"
|
||||
placeholder="Write a route"></div>
|
||||
<div class="uk-flex uk-flex-right">
|
||||
<button [disabled]="!(pageForm.get('name').value && pageForm.get('route').value)"
|
||||
class="uk-button uk-button-secondary outlined" (click)="createPage()">Create Page
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</modal-alert>
|
||||
|
||||
<modal-alert #deleteModal (alertOutput)="confirmedDeleteMenuItem($event)"></modal-alert>
|
||||
<modal-alert #deleteModal (alertOutput)="confirmedDeleteMenuItem($event)"></modal-alert>
|
||||
|
|
|
@ -42,7 +42,6 @@ export class MenuComponent implements OnInit {
|
|||
public menuItemForm: FormGroup;
|
||||
public pageForm: FormGroup;
|
||||
public rootMenuItems = [];
|
||||
public menuItems = [];
|
||||
public allPages = [];
|
||||
|
||||
public selectedMenuItem: string;
|
||||
|
@ -173,7 +172,7 @@ export class MenuComponent implements OnInit {
|
|||
this.newPageWindowOpen = !this.newPageWindowOpen;
|
||||
this.pageForm = this._fb.group({
|
||||
_id: this._fb.control(null),
|
||||
route: this._fb.control('', Validators.required),
|
||||
route: this._fb.control('', [Validators.required, StringUtils.validRoute(this.allPages, 'value')]),
|
||||
name: this._fb.control('', Validators.required),
|
||||
isEnabled: this._fb.control(true),
|
||||
portalType: this._fb.control(this.properties.adminToolsPortalType, Validators.required),
|
||||
|
@ -203,6 +202,7 @@ export class MenuComponent implements OnInit {
|
|||
});
|
||||
this.newPageWindowOpen = !this.newPageWindowOpen;
|
||||
this.menuItemForm.get('route').setValue(page.route);
|
||||
this.menuItemForm.get('route').markAsDirty();
|
||||
this.showLoading = false;
|
||||
},
|
||||
error => this.handleError('System error creating page', error)
|
||||
|
|
|
@ -13,7 +13,7 @@ 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 {add, edit, remove} from "../../utils/icons/icons";
|
||||
import {LoadingModule} from "../../utils/loading/loading.module";
|
||||
|
||||
@NgModule({
|
||||
|
@ -26,6 +26,6 @@ import {LoadingModule} from "../../utils/loading/loading.module";
|
|||
})
|
||||
export class MenuModule {
|
||||
constructor(private iconsService: IconsService) {
|
||||
this.iconsService.registerIcons([add]);
|
||||
this.iconsService.registerIcons([add, edit, remove]);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -63,57 +63,71 @@
|
|||
<div *ngIf="!showLoading">
|
||||
<ul *ngIf="checkboxes.length > 0" class="uk-list pages">
|
||||
<li *ngFor="let check of checkboxes; let i=index" class="uk-card uk-card-default uk-margin-bottom">
|
||||
<div class="uk-grid uk-padding">
|
||||
<div class=""><input id="{{check.page._id}}" class="checkBox" type="checkbox"
|
||||
name="pagescb[]" value="{{check.page._id}}" [(ngModel)]="check.checked">
|
||||
</div>
|
||||
<div class="uk-width-expand">
|
||||
<div class="title uk-margin-medium-bottom">Name</div>
|
||||
<div class="name uk-margin-medium-bottom" href="#">{{check.page.name}}</div>
|
||||
<div *ngIf="check.page.entities && check.page.entities.length > 0"><span
|
||||
class="title">Entities: </span>
|
||||
{{getEntitiesAsString(check.page)}}</div>
|
||||
<div class=" uk-margin-small-bottom"><span class="title">Route: </span> {{check.page.route}}</div>
|
||||
<div *ngIf="!pagesType" class=" uk-margin-small-bottom"><span
|
||||
class="title">Type: </span> {{check.page.type}}</div>
|
||||
<div *ngIf="!portal" class=" uk-margin-small-bottom">
|
||||
<span class="title">Portal type: </span>{{check.page.portalType}}
|
||||
<div class="uk-grid uk-grid-divider uk-padding" uk-grid>
|
||||
<div class="uk-grid uk-width-expand" uk-grid>
|
||||
<div class=""><input id="{{check.page._id}}" class="checkBox" type="checkbox"
|
||||
name="pagescb[]" value="{{check.page._id}}" [(ngModel)]="check.checked">
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="isPortalAdministrator || (check.page.portalType == properties.adminToolsPortalType && check.page.portalPid == portal)" class="uk-width-1-4">
|
||||
<div class="title uk-margin-medium-bottom">Actions</div>
|
||||
<div class="actions" href="#">
|
||||
<i class="clickable " (click)="editPage(i)" uk-icon="pencil"></i>
|
||||
<i class="clickable uk-text-danger"
|
||||
(click)="confirmDeletePage(check.page._id)" uk-icon="trash"></i>
|
||||
<div class="uk-width-expand">
|
||||
<div class="title uk-margin-medium-bottom">Name</div>
|
||||
<div class="name uk-margin-medium-bottom" href="#">{{check.page.name}}</div>
|
||||
<div *ngIf="check.page.entities && check.page.entities.length > 0"><span
|
||||
class="title">Entities: </span>
|
||||
{{getEntitiesAsString(check.page)}}</div>
|
||||
<div class=" uk-margin-small-bottom"><span class="title">Route: </span> {{check.page.route}}</div>
|
||||
<div *ngIf="!pagesType" class=" uk-margin-small-bottom"><span
|
||||
class="title">Type: </span> {{check.page.type}}</div>
|
||||
<div *ngIf="!portal" class=" uk-margin-small-bottom">
|
||||
<span class="title">Portal type: </span>{{check.page.portalType}}
|
||||
</div>
|
||||
<div *ngIf="!portal && check.page.portalPid" class=" uk-margin-small-bottom">
|
||||
<span class="title">Portal PID: </span>{{check.page.portalPid}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="!isPortalAdministrator && ((check.page.top || check.page.bottom || check.page.left ||
|
||||
<div *ngIf="!isPortalAdministrator && ((check.page.top || check.page.bottom || check.page.left ||
|
||||
check.page.right) || pageWithDivIds.includes(check.page._id) )" class="uk-width-1-4">
|
||||
<div class="title uk-margin-medium-bottom">Help texts</div>
|
||||
<div class=" uk-margin-small-bottom">
|
||||
<a *ngIf="check.page.top || check.page.bottom || check.page.left || check.page.right"
|
||||
class="helpContents"
|
||||
[queryParams]="{pageId: check.page._id}"
|
||||
routerLink="../helptexts">
|
||||
Manage page help texts
|
||||
<span *ngIf="pageHelpContentsCount[check.page._id]">({{pageHelpContentsCount[check.page._id]}})</span>
|
||||
</a>
|
||||
<div class="title uk-margin-medium-bottom">Help texts</div>
|
||||
<div class=" uk-margin-small-bottom">
|
||||
<a *ngIf="check.page.top || check.page.bottom || check.page.left || check.page.right"
|
||||
class="helpContents"
|
||||
[queryParams]="{pageId: check.page._id}"
|
||||
routerLink="../helptexts">
|
||||
Manage page help texts
|
||||
<span *ngIf="pageHelpContentsCount[check.page._id]">({{pageHelpContentsCount[check.page._id]}})</span>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a *ngIf="pageWithDivIds.includes(check.page._id)"
|
||||
[queryParams]="{ pageId: check.page._id}"
|
||||
routerLink="../classContents">Manage class help texts
|
||||
<span *ngIf="pageClassContentsCount[check.page._id]">({{pageClassContentsCount[check.page._id]}})</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<a *ngIf="pageWithDivIds.includes(check.page._id)"
|
||||
[queryParams]="{ pageId: check.page._id}"
|
||||
routerLink="../classContents">Manage class help texts
|
||||
<span *ngIf="pageClassContentsCount[check.page._id]">({{pageClassContentsCount[check.page._id]}})</span>
|
||||
</a>
|
||||
<div *ngIf="!isPortalAdministrator" class="uk-width-1-4">
|
||||
<div class="title uk-margin-medium-bottom">Enable/disable</div>
|
||||
<mat-slide-toggle [checked]="check.page.isEnabled"
|
||||
(change)="($event.source.checked = check.page.isEnabled);togglePages(!check.page.isEnabled,[check.page._id])"
|
||||
uk-tooltip="title:<div class='uk-padding-small uk-width-large'><div class='uk-text-bold '>Disable a page to hide it from community dashboard portal.</div><div class=' uk-margin-top'>If the page is disabled, a message 'Can't find that page' will appear in case the url of that page is loaded. If the disabled page belongs to the menu, the link will be removed from menu, too.</div></div>">
|
||||
</mat-slide-toggle>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="!isPortalAdministrator" class="uk-width-1-4">
|
||||
<div class="title uk-margin-medium-bottom">Enable/disable</div>
|
||||
<mat-slide-toggle [checked]="check.page.isEnabled"
|
||||
(change)="($event.source.checked = check.page.isEnabled);togglePages(!check.page.isEnabled,[check.page._id])"
|
||||
uk-tooltip="title:<div class='uk-padding-small uk-width-large'><div class='uk-text-bold '>Disable a page to hide it from community dashboard portal.</div><div class=' uk-margin-top'>If the page is disabled, a message 'Can't find that page' will appear in case the url of that page is loaded. If the disabled page belongs to the menu, the link will be removed from menu, too.</div></div>">
|
||||
</mat-slide-toggle>
|
||||
<div *ngIf="isPortalAdministrator || (check.page.portalType == properties.adminToolsPortalType && check.page.portalPid == portal)" class="uk-width-1-5">
|
||||
<div class="uk-flex uk-flex-center uk-flex-column uk-height-1-1">
|
||||
<div class="uk-flex uk-flex-center">
|
||||
<div class="actions">
|
||||
<button [disabled]="!portal && check.page.portalPid" [attr.uk-tooltip]="((!portal && check.page.portalPid)?'This page belongs to ' + check.page.portalPid:null)"
|
||||
class="uk-button action uk-margin-top uk-flex uk-flex-middle" (click)="editPage(i)">
|
||||
<icon name="edit"></icon>
|
||||
<span class="uk-margin-small-left"> Edit</span>
|
||||
</button>
|
||||
<button class="uk-button action uk-margin-top uk-flex uk-flex-middle" (click)="confirmDeletePage(check.page._id)">
|
||||
<icon name="remove"></icon>
|
||||
<span class="uk-margin-small-left"> Delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
|
|
@ -242,7 +242,7 @@ export class PagesComponent implements OnInit {
|
|||
this.index = this.pages.findIndex(value => value._id === page._id);
|
||||
this.pageForm = this._fb.group({
|
||||
_id: this._fb.control(page._id),
|
||||
route: this._fb.control(page.route, Validators.required),
|
||||
route: this._fb.control(page.route, [Validators.required, StringUtils.validRoute(this.pages, 'route', page.route)]),
|
||||
name: this._fb.control(page.name, Validators.required),
|
||||
isEnabled: this._fb.control(page.isEnabled),
|
||||
portalType: this._fb.control(page.portalType, Validators.required),
|
||||
|
@ -268,7 +268,7 @@ export class PagesComponent implements OnInit {
|
|||
this.entitiesCtrl = this._fb.array([]);
|
||||
this.pageForm = this._fb.group({
|
||||
_id: this._fb.control(null),
|
||||
route: this._fb.control('', Validators.required),
|
||||
route: this._fb.control('', [Validators.required, StringUtils.validRoute(this.pages, 'route')]),
|
||||
name: this._fb.control('', Validators.required),
|
||||
isEnabled: this._fb.control(true),
|
||||
portalType: this._fb.control('', Validators.required),
|
||||
|
@ -364,7 +364,7 @@ export class PagesComponent implements OnInit {
|
|||
if (error == null) {
|
||||
// this.formComponent.reset();
|
||||
this.pageForm = this._fb.group({
|
||||
route: this._fb.control('', Validators.required),
|
||||
route: this._fb.control('', [Validators.required, StringUtils.validRoute(this.pages, 'route')]),
|
||||
name: this._fb.control('', Validators.required),
|
||||
isEnabled: this._fb.control(true),
|
||||
portalType: this._fb.control('', Validators.required),
|
||||
|
|
|
@ -16,7 +16,7 @@ import {PagesRoutingModule} from "./pages-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 {add, edit, remove} from "../../utils/icons/icons";
|
||||
import {LoadingModule} from "../../utils/loading/loading.module";
|
||||
|
||||
@NgModule({
|
||||
|
@ -29,6 +29,6 @@ import {LoadingModule} from "../../utils/loading/loading.module";
|
|||
})
|
||||
export class PagesModule {
|
||||
constructor(private iconsService: IconsService) {
|
||||
this.iconsService.registerIcons([add]);
|
||||
this.iconsService.registerIcons([add, edit, remove]);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -69,9 +69,8 @@
|
|||
</td>
|
||||
<td>
|
||||
<div class="actions" href="#">
|
||||
<i class="clickable" uk-icon="pencil" (click)="editPortal(i)"></i>
|
||||
<i class="clickable uk-text-danger" uk-icon="trash"
|
||||
(click)="confirmDeletePortal(check.portal._id)"></i>
|
||||
<icon class="clickable" name="edit" (click)="editPortal(i)"></icon>
|
||||
<icon class="clickable uk-margin-small-left" [customClass]="'uk-text-danger'" name="remove" (click)="confirmDeletePortal(check.portal._id)"></icon>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
|
|
|
@ -10,7 +10,7 @@ import {AdminTabsModule} from "../sharedComponents/admin-tabs/admin-tabs.module"
|
|||
import {PageContentModule} from "../sharedComponents/page-content/page-content.module";
|
||||
import {PortalsRoutingModule} from "./portals-routing.module";
|
||||
import {IconsService} from "../../utils/icons/icons.service";
|
||||
import {add} from "../../utils/icons/icons";
|
||||
import {add, edit, remove} from "../../utils/icons/icons";
|
||||
import {IconsModule} from "../../utils/icons/icons.module";
|
||||
import {SearchInputModule} from "../../sharedComponents/search-input/search-input.module";
|
||||
import {LoadingModule} from "../../utils/loading/loading.module";
|
||||
|
@ -26,6 +26,6 @@ import {LoadingModule} from "../../utils/loading/loading.module";
|
|||
})
|
||||
export class PortalsModule {
|
||||
constructor(private iconsService: IconsService) {
|
||||
this.iconsService.registerIcons([add]);
|
||||
this.iconsService.registerIcons([add, edit, remove]);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -12,7 +12,7 @@ import { properties } from 'src/environments/environment';
|
|||
<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 === '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="env === 'development' && portal" [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>
|
||||
</ul>
|
||||
`
|
||||
|
|
|
@ -1,8 +1,9 @@
|
|||
import {UrlSegment} from '@angular/router';
|
||||
import {AbstractControl, ValidatorFn, Validators} from "@angular/forms";
|
||||
import {AbstractControl, ValidationErrors, ValidatorFn, Validators} from "@angular/forms";
|
||||
import {Stakeholder} from "../monitor/entities/stakeholder";
|
||||
import {CommunityInfo} from "../connect/community/communityInfo";
|
||||
import {properties} from "../../../environments/environment";
|
||||
import {Page} from "./entities/adminTool/page";
|
||||
|
||||
export class Dates {
|
||||
public static yearMin = 1800;
|
||||
|
@ -247,6 +248,8 @@ export class StringUtils {
|
|||
'[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.' +
|
||||
'[a-zA-Z0-9]+\.[^\s]{2,}';
|
||||
|
||||
public static routeRegex = '^[a-zA-Z0-9\/][a-zA-Z0-9\/-]*$';
|
||||
|
||||
public static urlPrefix(url: string): string {
|
||||
if (url.startsWith("http://") || url.startsWith("https://") || url.startsWith("//")) {
|
||||
return "";
|
||||
|
@ -302,6 +305,21 @@ export class StringUtils {
|
|||
return Validators.pattern(StringUtils.urlRegex);
|
||||
}
|
||||
|
||||
public static validRoute(pages: any[], field: string, initial: string = null): ValidatorFn {
|
||||
return (control: AbstractControl): ValidationErrors | null => {
|
||||
if(control.value) {
|
||||
if(!new RegExp(this.routeRegex).test(control.value)) {
|
||||
return {error: 'Route should contain only letters or numbers, e.g /route or route'}
|
||||
}
|
||||
if(pages && pages.length > 0 && control.value !== initial) {
|
||||
const forbidden = pages.filter(page => page[field].replace('/', '') === control.value.replace('/', '')).length > 0;
|
||||
return forbidden ? {error: 'This route is used by an other page'} : null;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
}
|
||||
|
||||
public static sliceString(mystr, size: number): string {
|
||||
const sliced = String(mystr).substr(0, size);
|
||||
return sliced + (String(mystr).length > size ? '...' : '');
|
||||
|
|
Loading…
Reference in New Issue