MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[Library | Trunk]: Change admin-tools pages header layout. Add search-input 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@60211 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou 2021-01-11 18:33:24 +00:00
parent edee649e7c
commit 0c9f2e4f2e
10 changed files with 485 additions and 416 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

199
dashboard/divId/divIds.component.html
View File

@ -1,105 +1,108 @@
<div page-content> <div page-content class="admin-pages">
<admin-tabs tab = "class" header></admin-tabs> <div header>
<div inner class="admin-pages"> <admin-tabs tab="class" header></admin-tabs>
<div *ngIf="!errorMessage && !showLoading" class="filters" uk-sticky="offset:150"> <div *ngIf="!errorMessage && !showLoading" class="uk-grid filters" uk-grid>
<div class="show-options uk-float-right"> <div class="uk-width-1-1">
<button class="uk-button uk-button-primary " type="button">Bulk Actions</button> <ul class="uk-subnav uk-subnav-pill">
<div uk-dropdown="mode: click"> <li [class.uk-active]="filterForm.get('type').value === 'all'" class="uk-margin-small-bottom"><a
<ul class="uk-nav uk-margin-left" (click)="filterForm.get('type').setValue('all')"><span
[attr.uk-tooltip]="getSelectedDivIds().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'" class="title">All portals</span></a></li>
title="Select at least one class"> <li *ngFor="let type of portalUtils.portalTypes; let i=index"
<li><a [class]="getSelectedDivIds().length == 0 ? 'uk-disabled' : ''" [class.uk-active]="filterForm.get('type').value === type.value" class="uk-margin-small-bottom"><a
(click)="confirmDeleteSelectedDivIds()"><i></i> Delete </a></li> (click)="filterForm.get('type').setValue(type.value)"><span
class="title">{{type.label}}</span></a></li>
</ul> </ul>
</div> </div>
</div> <div class="uk-width-1-1 uk-flex uk-flex-right uk-flex-middle">
<div class="uk-inline uk-width-medium uk-float-right uk-margin-right" > <div search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search"
<span class="uk-position-center-right"><i class="material-icons">search</i></span> [bordered]="true" colorClass="uk-text-secondary"></div>
<div dashboard-input [formInput]="filterForm.controls.keyword" <div class="uk-margin-left show-options">
placeholder="Search"></div> <button class="uk-button uk-button-secondary">Bulk Actions</button>
</div> <div uk-dropdown="mode: click">
<ul class="uk-subnav uk-subnav-pill subCategoriesTabs ignore admin " > <ul class="uk-nav uk-margin-left"
<li [class.uk-active]="filterForm.get('type').value === 'all'" class="uk-margin-small-bottom"><a [attr.uk-tooltip]="getSelectedDivIds().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
(click)="filterForm.get('type').setValue('all')"><span title="Select at least one class">
class="title">All portals</span></a></li> <li><a [class]="getSelectedDivIds().length == 0 ? 'uk-disabled' : ''"
<li *ngFor="let type of portalUtils.portalTypes; let i=index" (click)="confirmDeleteSelectedDivIds()"><i></i> Delete </a></li>
[class.uk-active]="filterForm.get('type').value === type.value" class="uk-margin-small-bottom"><a </ul>
(click)="filterForm.get('type').setValue(type.value)"><span
class="title">{{type.label}}</span></a></li>
</ul>
</div>
<div class="content-wrapper" id="contentWrapper">
<a *ngIf="!showLoading && !errorMessage" (click)="newDivId()"
class="uk-flex uk-flex-right uk-flex-middle uk-margin-small-bottom uk-width-1-1">
<div class="uk-button-default large uk-icon-button uk-margin-small-right" uk-icon="plus">
</div>
Add class
</a>
<div>
<div class="contentPanel">
<div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
<a class="uk-alert-close" uk-close></a>
{{updateErrorMessage}}
</div> </div>
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger uk-margin-large-top" </div>
role="alert">{{errorMessage}}</div> <div class="uk-margin-left">
<div [style.display]="showLoading ? 'inline' : 'none'" <a (click)="newDivId()"
class="uk-animation-fade uk-margin-large-top uk-width-1-1" role="alert"><img 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 class</button>
</a>
</div>
</div>
</div>
</div>
<div inner>
<div>
<div class="contentPanel">
<div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
<a class="uk-alert-close" uk-close></a>
{{updateErrorMessage}}
</div>
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger uk-margin-large-top"
role="alert">{{errorMessage}}</div>
<div [style.display]="showLoading ? 'inline' : 'none'"
class="uk-animation-fade uk-margin-large-top uk-width-1-1" role="alert"><img
class="uk-align-center loading-gif"></div> class="uk-align-center loading-gif"></div>
<div class="md-card uk-margin-medium-bottom" *ngIf="!errorMessage && !showLoading"> <div class="md-card uk-margin-medium-bottom" *ngIf="!errorMessage && !showLoading">
<div class="md-card-content"> <div class="md-card-content">
<div class="uk-overflow-container"> <div class="uk-overflow-container">
<table class="uk-table uk-table-striped uk-table-large"> <table class="uk-table uk-table-striped uk-table-large">
<thead class="form-header"> <thead class="form-header">
<tr> <tr>
<th <th
class="uk-width-small"><input id="allDivIdCheckbox" type="checkbox" (change)="toggleCheckBoxes($event)"></th> class="uk-width-small"><input id="allDivIdCheckbox" type="checkbox"
<th>Name</th> (change)="toggleCheckBoxes($event)"></th>
<th *ngIf="!selectedCommunityPid">Portal Type</th> <th>Name</th>
<th>Page</th> <th *ngIf="!selectedCommunityPid">Portal Type</th>
<th>Actions</th> <th>Page</th>
</tr> <th>Actions</th>
</thead> </tr>
<tbody> </thead>
<tr *ngFor="let check of checkboxes; let i=index"> <tbody>
<td><input id="{{check.divId._id}}" class="checkBox" type="checkbox" <tr *ngFor="let check of checkboxes; let i=index">
name="divIdscb[]" value="{{check.divId._id}}" [(ngModel)]="check.checked"> <td><input id="{{check.divId._id}}" class="checkBox" type="checkbox"
</td> name="divIdscb[]" value="{{check.divId._id}}" [(ngModel)]="check.checked">
<td> </td>
<div class="name" href="#">{{check.divId.name}}</div> <td>
</td> <div class="name" href="#">{{check.divId.name}}</div>
<td *ngIf="!selectedCommunityPid"> </td>
<div class="portalType" href="#">{{check.divId.portalType}}</div> <td *ngIf="!selectedCommunityPid">
</td> <div class="portalType" href="#">{{check.divId.portalType}}</div>
<td> </td>
<div class="pages" href="#"> <td>
<div class="pages" href="#">
<span *ngFor="let page of check.divId.pages let i=index">{{page.name}}<span <span *ngFor="let page of check.divId.pages let i=index">{{page.name}}<span
*ngIf="i<(check.divId.pages.length-1)">, </span></span> *ngIf="i<(check.divId.pages.length-1)">, </span></span>
</div> </div>
</td> </td>
<td> <td>
<div class="actions" href="#"> <div class="actions" href="#">
<i class="clickable" uk-icon= "pencil" (click)="editDivId(i)"></i> <i class="clickable" uk-icon="pencil" (click)="editDivId(i)"></i>
<i class="clickable uk-text-danger" uk-icon= "trash" <i class="clickable uk-text-danger" uk-icon="trash"
(click)="confirmDeleteDivId(check.divId._id)"></i> (click)="confirmDeleteDivId(check.divId._id)"></i>
</div> </div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div *ngIf="checkboxes.length==0" class="col-md-12"> <div *ngIf="checkboxes.length==0" class="col-md-12">
<div class="uk-alert-warning uk-alert" >No classes found</div> <div class="uk-alert-warning uk-alert">No classes found</div>
</div> </div>
<div class="uk-width-1-1 uk-flex uk-flex-center "> <div class="uk-width-1-1 uk-flex uk-flex-center ">
<div class="uk-width-small uk-button uk-button-default" (click)="newDivId()"> <div class="uk-width-small uk-button uk-button-default" (click)="newDivId()">
<i class="" uk-icon= "plus"></i> <i class="" uk-icon="plus"></i>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -108,6 +111,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<modal-alert #AlertModalSaveDivId (alertOutput)="divIdSaveConfirmed($event)" <modal-alert #AlertModalSaveDivId (alertOutput)="divIdSaveConfirmed($event)"
[okDisabled]="myForm && (myForm.invalid || !myForm.dirty)"> [okDisabled]="myForm && (myForm.invalid || !myForm.dirty)">
@ -121,9 +125,9 @@
<mat-form-field class="example-chip-list uk-width-1-1 uk-margin-small-left"> <mat-form-field class="example-chip-list uk-width-1-1 uk-margin-small-left">
<mat-chip-list #chipList aria-label="Page selection"> <mat-chip-list #chipList aria-label="Page selection">
<mat-chip <mat-chip
*ngFor="let page of selectedPages" *ngFor="let page of selectedPages"
[selectable]="true" [selectable]="true"
[removable]="true"> [removable]="true">
{{page.name}} {{page.name}}
<span (click)="remove(page)" <span (click)="remove(page)"
class=" notranslate mat-chip-remove mat-chip-trailing-icon " uk-icon="trash"></span> class=" notranslate mat-chip-remove mat-chip-trailing-icon " uk-icon="trash"></span>
@ -138,7 +142,8 @@
</mat-autocomplete> </mat-autocomplete>
</mat-form-field> </mat-form-field>
<div [ngClass]="{'has-error':!myForm.controls.portalType.valid && myForm.controls.portalType.dirty}" class="form-group" uk-grid> <div [ngClass]="{'has-error':!myForm.controls.portalType.valid && myForm.controls.portalType.dirty}"
class="form-group" uk-grid>
<div class="uk-width-1-1 uk-margin-small-bottom uk-text-bold uk-form-label"> <div class="uk-width-1-1 uk-margin-small-bottom uk-text-bold uk-form-label">
Class exists in: Class exists in:
</div> </div>

12
dashboard/divId/divIds.module.ts
View File

@ -16,14 +16,22 @@ import {MatChipsModule} from '@angular/material/chips';
import {AdminTabsModule} from "../sharedComponents/admin-tabs/admin-tabs.module"; import {AdminTabsModule} from "../sharedComponents/admin-tabs/admin-tabs.module";
import {PageContentModule} from "../sharedComponents/page-content/page-content.module"; import {PageContentModule} from "../sharedComponents/page-content/page-content.module";
import {ClassesRoutingModule} from "./classes-routing.module"; 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";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, RouterModule, FormsModule, CommonModule, RouterModule, FormsModule,
AlertModalModule, ReactiveFormsModule, AdminToolServiceModule, InputModule, MatAutocompleteModule, MatFormFieldModule, MatChipsModule, AlertModalModule, ReactiveFormsModule, AdminToolServiceModule, InputModule, MatAutocompleteModule, MatFormFieldModule, MatChipsModule,
MatCheckboxModule, AdminTabsModule, PageContentModule, ClassesRoutingModule MatCheckboxModule, AdminTabsModule, PageContentModule, ClassesRoutingModule, SearchInputModule, IconsModule
], ],
declarations: [DivIdsComponent], declarations: [DivIdsComponent],
exports: [DivIdsComponent] exports: [DivIdsComponent]
}) })
export class DivIdsModule { } export class DivIdsModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([add]);
}
}

218
dashboard/entity/entities.component.html
View File

@ -1,120 +1,130 @@
<div page-content> <div page-content class="admin-pages">
<admin-tabs tab = "entity" [portal]="selectedCommunityPid" header></admin-tabs> <div header>
<div inner class="admin-pages"> <admin-tabs tab="entity" [portal]="selectedCommunityPid"></admin-tabs>
<div *ngIf="!errorMessage && !showLoading" class="filters" uk-sticky="offset:150"> <div *ngIf="!errorMessage && !showLoading" class="uk-grid filters" uk-grid>
<div class="show-options uk-float-right"> <div class="uk-width-1-1">
<button class="uk-button uk-button-primary " type="button">Bulk Actions</button> <ul *ngIf="!isPortalAdministrator" class="uk-subnav uk-subnav-pill">
<div uk-dropdown="mode: click"> <li [class.uk-active]="filterForm.get('status').value === 'all'"><a
<ul class="uk-nav uk-margin-left" (click)="filterForm.get('status').setValue('all')"><span
[attr.uk-tooltip]="getSelectedEntities().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'" class="title">All entities</span></a></li>
title="Select at least one entity"> <li [class.uk-active]="filterForm.get('status').value === 'enabled'"><a
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''" (click)="filterForm.get('status').setValue('enabled')"><span class="title">Enabled</span></a></li>
(click)="toggleEntities(true, getSelectedEntities())"><i></i> Activate <li [class.uk-active]="filterForm.get('status').value === 'disabled'"><a
</a></li> (click)="filterForm.get('status').setValue('disabled')"><span class="title">Disabled</span></a></li>
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''" </ul>
(click)="toggleEntities(false, getSelectedEntities())"><i></i> Deactivate </div>
</a></li> <div class="uk-width-1-1 uk-flex uk-flex-right uk-flex-middle">
<li *ngIf="isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''" <div search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search entity"
(click)="confirmDeleteSelectedEntities()"><i></i> Delete </a></li> [bordered]="true" colorClass="uk-text-secondary"></div>
</ul> <div class="uk-margin-left show-options">
<button class="uk-button uk-button-secondary">Bulk Actions</button>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-margin-left"
[attr.uk-tooltip]="getSelectedEntities().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
title="Select at least one entity">
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
(click)="toggleEntities(true, getSelectedEntities())"><i></i>
Activate
</a></li>
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
(click)="toggleEntities(false, getSelectedEntities())"><i></i>
Deactivate
</a></li>
<li *ngIf="isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
(click)="confirmDeleteSelectedEntities()"><i></i> Delete </a></li>
</ul>
</div>
</div>
<div *ngIf="isPortalAdministrator" class="uk-margin-left">
<a (click)="newEntity()"
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 entity</button>
</a>
</div> </div>
</div> </div>
<div class="uk-float-right uk-margin-right uk-width-medium">
<div dashboard-input [formInput]="filterForm.controls.keyword" placeholder="search entity"></div>
</div>
<ul *ngIf="!isPortalAdministrator" class="uk-subnav uk-subnav-pill subCategoriesTabs ignore admin " >
<li [class.uk-active]="filterForm.get('status').value === 'all'"><a
(click)="filterForm.get('status').setValue('all')"><span
class="title">All entities</span></a></li>
<li [class.uk-active]="filterForm.get('status').value === 'enabled'"><a (click)="filterForm.get('status').setValue('enabled')"><span class="title">Enabled</span></a></li>
<li [class.uk-active]="filterForm.get('status').value === 'disabled'"><a (click)="filterForm.get('status').setValue('disabled')"><span class="title">Disabled</span></a></li>
</ul>
</div> </div>
</div>
<div class="content-wrapper" id="contentWrapper"> <div inner>
<a *ngIf="!showLoading && isPortalAdministrator && !errorMessage" (click)="newEntity()" <div class="contentPanel ">
class="uk-flex uk-flex-right uk-flex-middle uk-margin-small-bottom"> <div *ngIf="!isPortalAdministrator" class="uk-alert uk-alert-primary uk-margin-top-large">
<div class="uk-button-default large uk-icon-button uk-margin-small-right" uk-icon="plus"> <div>
<span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
Disable an entity to hide it from community dashboard portal.
</div>
<div
class="uk-text-small">If an entity is disabled, all related search and advanced search pages will be
hidden from the community dashborad and a message "Can't find that page" will appear in case the url of that
page is loaded. If the related page belongs to the menu the link will be removed from menu, too.
</div> </div>
Add entity
</a>
<div class="contentPanel ">
<div *ngIf="!isPortalAdministrator" class="uk-alert uk-alert-primary uk-margin-top-large">
<div>
<span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
Disable an entity to hide it from community dashboard portal.
</div>
<div
class="uk-text-small">If an entity is disabled, all related search and advanced search pages will be hidden from the community dashborad and a message "Can't find that page" will appear in case the url of that page is loaded. If the related page belongs to the menu the link will be removed from menu, too.
</div>
</div> </div>
<div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert> <div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
<a class="uk-alert-close" uk-close></a> <a class="uk-alert-close" uk-close></a>
{{updateErrorMessage}} {{updateErrorMessage}}
</div> </div>
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger uk-margin-large-top" <div *ngIf="errorMessage" class="uk-alert uk-alert-danger uk-margin-large-top"
role="alert">{{errorMessage}}</div> role="alert">{{errorMessage}}</div>
<div [style.display]="showLoading ? 'inline' : 'none'" <div [style.display]="showLoading ? 'inline' : 'none'"
class="uk-animation-fade uk-margin-large-top uk-width-1-1" role="alert"><img class="uk-animation-fade uk-margin-large-top uk-width-1-1" role="alert"><img
class="uk-align-center loading-gif"></div> class="uk-align-center loading-gif"></div>
<div class="md-card uk-margin-medium-bottom" *ngIf="!errorMessage && !showLoading"> <div class="md-card uk-margin-medium-bottom" *ngIf="!errorMessage && !showLoading">
<div class="md-card-content"> <div class="md-card-content">
<div class="uk-overflow-container"> <div class="uk-overflow-container">
<table class="uk-table uk-table-striped uk-table-hover uk-table-large"> <table class="uk-table uk-table-striped uk-table-hover uk-table-large">
<thead class="form-header"> <thead class="form-header">
<tr> <tr>
<th <th
class="uk-width-small"><input id="allEntityCheckbox" type="checkbox" class="uk-width-small"><input id="allEntityCheckbox" type="checkbox"
(change)="toggleCheckBoxes($event)"></th> (change)="toggleCheckBoxes($event)"></th>
<th>Name</th> <th>Name</th>
<th *ngIf="!isPortalAdministrator">Status</th> <th *ngIf="!isPortalAdministrator">Status</th>
<th *ngIf="!isPortalAdministrator">Enable/Disable</th> <th *ngIf="!isPortalAdministrator">Enable/Disable</th>
<th *ngIf="isPortalAdministrator">Actions</th> <th *ngIf="isPortalAdministrator">Actions</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let check of checkboxes; let i=index"> <tr *ngFor="let check of checkboxes; let i=index">
<td><input id="{{check.entity._id}}" class="checkBox" type="checkbox" <td><input id="{{check.entity._id}}" class="checkBox" type="checkbox"
name="entitiescb[]" value="{{check.entity._id}}" [(ngModel)]="check.checked"> name="entitiescb[]" value="{{check.entity._id}}" [(ngModel)]="check.checked">
</td> </td>
<td> <td>
<div class="name" href="#">{{check.entity.name}}</div> <div class="name" href="#">{{check.entity.name}}</div>
</td> </td>
<td *ngIf="!isPortalAdministrator"> <td *ngIf="!isPortalAdministrator">
<div class="name" href="#">{{check.entity.isEnabled?"Enabled":"Disabled"}}</div> <div class="name" href="#">{{check.entity.isEnabled ? "Enabled" : "Disabled"}}</div>
</td> </td>
<td *ngIf="!isPortalAdministrator"> <td *ngIf="!isPortalAdministrator">
<mat-slide-toggle [checked]="check.entity.isEnabled" <mat-slide-toggle [checked]="check.entity.isEnabled"
(change)="($event.source.checked = check.entity.isEnabled);toggleEntities(!check.entity.isEnabled,[check.entity._id])"></mat-slide-toggle> (change)="($event.source.checked = check.entity.isEnabled);toggleEntities(!check.entity.isEnabled,[check.entity._id])"></mat-slide-toggle>
</td> </td>
<td *ngIf="isPortalAdministrator"> <td *ngIf="isPortalAdministrator">
<div class="actions" href="#"> <div class="actions" href="#">
<i class="clickable " uk-icon="pencil" (click)="editEntity(i)"></i> <i class="clickable " uk-icon="pencil" (click)="editEntity(i)"></i>
<i class="clickable uk-text-danger" uk-icon="trash" <i class="clickable uk-text-danger" uk-icon="trash"
(click)="confirmDeleteEntity(check.entity._id)"></i> (click)="confirmDeleteEntity(check.entity._id)"></i>
</div>
</td>
</tr>
</tbody>
</table>
<div class="uk-width-1-1 uk-flex uk-flex-center " *ngIf="isPortalAdministrator">
<div class="uk-width-small uk-button uk-button-default" (click)="newEntity()">
<i class="" uk-icon="plus"></i>
</div> </div>
</div> </td>
<div *ngIf="checkboxes.length==0" class="col-md-12"> </tr>
<div class="uk-alert-warning" uk-alert>No entities found</div> </tbody>
</div> </table>
<div class="uk-width-1-1 uk-flex uk-flex-center " *ngIf="isPortalAdministrator">
<div class="uk-width-small uk-button uk-button-default" (click)="newEntity()">
<i class="" uk-icon="plus"></i>
</div> </div>
</div> </div>
<div *ngIf="checkboxes.length==0" class="col-md-12">
<div class="uk-alert-warning" uk-alert>No entities found</div>
</div>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>
</div> </div>

12
dashboard/entity/entities.module.ts
View File

@ -10,13 +10,21 @@ import {InputModule} from "../../sharedComponents/input/input.module";
import {PageContentModule} from "../sharedComponents/page-content/page-content.module"; import {PageContentModule} from "../sharedComponents/page-content/page-content.module";
import {AdminTabsModule} from "../sharedComponents/admin-tabs/admin-tabs.module"; import {AdminTabsModule} from "../sharedComponents/admin-tabs/admin-tabs.module";
import {EntitiesRoutingModule} from "./entities-routing.module"; 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";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, RouterModule, FormsModule, AdminToolServiceModule, CommonModule, RouterModule, FormsModule, AdminToolServiceModule,
AlertModalModule, ReactiveFormsModule, MatSlideToggleModule, InputModule, PageContentModule, AdminTabsModule, EntitiesRoutingModule AlertModalModule, ReactiveFormsModule, MatSlideToggleModule, InputModule, PageContentModule, AdminTabsModule, EntitiesRoutingModule, SearchInputModule, IconsModule
], ],
declarations: [EntitiesComponent], declarations: [EntitiesComponent],
exports: [EntitiesComponent] exports: [EntitiesComponent]
}) })
export class EntitiesModule { } export class EntitiesModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([add]);
}
}

185
dashboard/page/pages.component.html
View File

@ -1,85 +1,91 @@
<div page-content> <div page-content class="admin-pages">
<admin-tabs tab = "page" [portal]="selectedCommunityPid" header></admin-tabs> <div header>
<div inner class="admin-pages"> <admin-tabs tab="page" [portal]="selectedCommunityPid"></admin-tabs>
<div *ngIf="!errorMessage && !showLoading" class="filters" uk-sticky="offset:150"> <div *ngIf="!errorMessage && !showLoading" class="uk-grid filters" uk-grid>
<div class="show-options uk-float-right"> <div class="uk-width-1-1">
<button class="uk-button uk-button-primary " type="button">Bulk Actions</button> <ul class="uk-subnav uk-subnav-pill">
<div uk-dropdown="mode: click"> <li [class.uk-active]="filterForm.get('type').value === 'all'"><a
<ul class="uk-nav uk-margin-left" (click)="filterForm.get('type').setValue('all')"><span
[attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'" class="title">All pages</span></a></li>
title="Select at least one page"> <li *ngFor="let type of typeOptions; let i=index"
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''" [class.uk-active]="filterForm.get('type').value === type.value"><a
(click)="togglePages(true, getSelectedPages())"> Activate (click)="filterForm.get('type').setValue(type.value)"><span
</a></li> class="title">{{type.label}}</span></a></li>
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''" </ul>
(click)="togglePages(false, getSelectedPages())"> Deactivate </div>
</a></li> <div class="uk-width-1-1 uk-flex uk-flex-right uk-flex-middle">
<li *ngIf="isPortalAdministrator"><a (click)="confirmDeleteSelectedPages()"> Delete </a></li> <div search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search page"
</ul> [bordered]="true" colorClass="uk-text-secondary"></div>
<div class="uk-margin-left show-options">
<button class="uk-button uk-button-secondary">Bulk Actions</button>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-margin-left"
[attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
title="Select at least one page">
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
(click)="togglePages(true, getSelectedPages())"> Activate
</a></li>
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
(click)="togglePages(false, getSelectedPages())"> Deactivate
</a></li>
<li *ngIf="isPortalAdministrator"><a (click)="confirmDeleteSelectedPages()"> Delete </a></li>
</ul>
</div>
</div>
<div *ngIf="isPortalAdministrator" class="uk-margin-left">
<a (click)="newPage()"
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 page</button>
</a>
</div> </div>
</div> </div>
<div class="uk-inline uk-width-medium uk-float-right uk-margin-right">
<div dashboard-input [formInput]="filterForm.controls.keyword" placeholder="search page" ></div>
</div>
<ul class="uk-subnav uk-subnav-pill subCategoriesTabs ignore admin " >
<li [class.uk-active]="filterForm.get('type').value === 'all'"><a
(click)="filterForm.get('type').setValue('all')"><span
class="title">All pages</span></a></li>
<li *ngFor="let type of typeOptions; let i=index"
[class.uk-active]="filterForm.get('type').value === type.value"><a
(click)="filterForm.get('type').setValue(type.value)"><span
class="title">{{type.label}}</span></a></li>
</ul>
<!-- <input class="uk-width-1-1 "-->
<!-- placeholder="SEARCH FOR A COUNTRY" type="text" autocomplete="off" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true">-->
</div> </div>
</div>
<div inner>
<div class="contentPanel ">
<div *ngIf="!isPortalAdministrator" class="uk-alert uk-alert-primary uk-margin-top-large">
<div>
<span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
Disable a page to hide it from community dashboard portal.
</div>
<div
class="uk-text-small">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 class="content-wrapper uk-margin-top" id="contentWrapper"> </div>
<a *ngIf="!showLoading && isPortalAdministrator && !errorMessage" (click)="newPage()" <div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
class="uk-flex uk-flex-right uk-flex-middle uk-margin-small-bottom uk-width-1-1"> <a class="uk-alert-close" uk-close></a>
<div class="uk-button-default large uk-icon-button uk-margin-small-right" uk-icon="plus"> {{updateErrorMessage}}
</div> </div>
Add page <div *ngIf="errorMessage" class="uk-alert uk-alert-danger uk-margin-large-top"
</a> role="alert">{{errorMessage}}</div>
<div class="contentPanel "> <div [style.display]="showLoading ? 'inline' : 'none'"
<div *ngIf="!isPortalAdministrator" class="uk-alert uk-alert-primary uk-margin-top-large"> class="uk-animation-fade uk-margin-large-top uk-width-1-1" role="alert"><img
<div>
<span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
Disable a page to hide it from community dashboard portal.
</div>
<div
class="uk-text-small">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>
<div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
<a class="uk-alert-close" uk-close></a>
{{updateErrorMessage}}
</div>
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger uk-margin-large-top"
role="alert">{{errorMessage}}</div>
<div [style.display]="showLoading ? 'inline' : 'none'"
class="uk-animation-fade uk-margin-large-top uk-width-1-1" role="alert"><img
class="uk-align-center loading-gif"></div> class="uk-align-center loading-gif"></div>
<div class="md-card uk-margin-medium-bottom" *ngIf="!errorMessage && !showLoading"> <div class="md-card uk-margin-medium-bottom" *ngIf="!errorMessage && !showLoading">
<div class="md-card-content"> <div class="md-card-content">
<div class="uk-overflow-container"> <div class="uk-overflow-container">
<ul class="uk-list pages"> <ul class="uk-list pages">
<li *ngFor="let check of checkboxes; let i=index" class="uk-card uk-card-default uk-margin-bottom"> <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="uk-grid uk-padding">
<div class=""><input id="{{check.page._id}}" class="checkBox" type="checkbox" <div class=""><input id="{{check.page._id}}" class="checkBox" type="checkbox"
name="pagescb[]" value="{{check.page._id}}" [(ngModel)]="check.checked"> name="pagescb[]" value="{{check.page._id}}" [(ngModel)]="check.checked">
</div> </div>
<div class="uk-width-expand"> <div class="uk-width-expand">
<div class="title uk-margin-medium-bottom">Name</div> <div class="title uk-margin-medium-bottom">Name</div>
<div class="name uk-margin-medium-bottom" href="#">{{check.page.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 <div *ngIf="check.page.entities && check.page.entities.length > 0"><span
class="title">Entities: </span> class="title">Entities: </span>
{{check.page.entities.join(", ")}}</div> {{check.page.entities.join(", ")}}</div>
<div class=" uk-margin-small-bottom"><span class="title">Route: </span> {{check.page.route}}</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="!pagesType" class=" uk-margin-small-bottom"><span
class="title">Type: </span> {{check.page.type}}</div>
<div *ngIf="!selectedCommunityPid" class=" uk-margin-small-bottom"> <div *ngIf="!selectedCommunityPid" class=" uk-margin-small-bottom">
<span class="title" >Portal type: </span>{{check.page.portalType}} <span class="title">Portal type: </span>{{check.page.portalType}}
</div> </div>
</div> </div>
<div *ngIf="isPortalAdministrator" class="uk-width-1-4"> <div *ngIf="isPortalAdministrator" class="uk-width-1-4">
@ -102,8 +108,8 @@
</div> </div>
<div> <div>
<a *ngIf="pageWithDivIds.includes(check.page._id)" class="classHelpContents" <a *ngIf="pageWithDivIds.includes(check.page._id)" class="classHelpContents"
[queryParams]="{communityId: selectedCommunityPid, pageId: check.page._id}" [queryParams]="{communityId: selectedCommunityPid, pageId: check.page._id}"
routerLink="../../classContents">manage class contents</a> routerLink="../../classContents">manage class contents</a>
</div> </div>
</div> </div>
<div *ngIf="!isPortalAdministrator" class="uk-width-1-4"> <div *ngIf="!isPortalAdministrator" class="uk-width-1-4">
@ -111,18 +117,17 @@
<mat-slide-toggle [checked]="check.page.isEnabled" <mat-slide-toggle [checked]="check.page.isEnabled"
(change)="($event.source.checked = check.page.isEnabled);togglePages(!check.page.isEnabled,[check.page._id])"></mat-slide-toggle> (change)="($event.source.checked = check.page.isEnabled);togglePages(!check.page.isEnabled,[check.page._id])"></mat-slide-toggle>
</div> </div>
</div>
</li>
</ul>
<div *ngIf="checkboxes.length==0" class="col-md-12">
<div class="uk-alert-warning" uk-alert>No pages found</div>
</div>
<div *ngIf="isPortalAdministrator" class="uk-width-1-1 uk-flex uk-flex-center ">
<div class="uk-width-small uk-button uk-button-default" (click)="newPage()">
<i class="" uk-icon="plus"></i>
</div> </div>
</li>
</ul>
<div *ngIf="checkboxes.length==0" class="col-md-12">
<div class="uk-alert-warning" uk-alert>No pages found</div>
</div>
<div *ngIf="isPortalAdministrator" class="uk-width-1-1 uk-flex uk-flex-center ">
<div class="uk-width-small uk-button uk-button-default" (click)="newPage()">
<i class="" uk-icon="plus"></i>
</div> </div>
</div> </div>
</div> </div>
@ -132,7 +137,8 @@
</div> </div>
</div> </div>
<modal-alert #AlertModalSavePage (alertOutput)="pageSaveConfirmed($event)" [okDisabled]="myForm && (myForm.invalid || !myForm.dirty)"> <modal-alert #AlertModalSavePage (alertOutput)="pageSaveConfirmed($event)"
[okDisabled]="myForm && (myForm.invalid || !myForm.dirty)">
<div *ngIf="modalErrorMessage" class="uk-alert-danger" uk-alert aria-hidden="true">{{ modalErrorMessage }}</div> <div *ngIf="modalErrorMessage" class="uk-alert-danger" uk-alert aria-hidden="true">{{ modalErrorMessage }}</div>
<form [formGroup]="myForm"> <form [formGroup]="myForm">
@ -153,9 +159,9 @@
<mat-form-field class="example-chip-list uk-width-1-1 uk-margin-small-left"> <mat-form-field class="example-chip-list uk-width-1-1 uk-margin-small-left">
<mat-chip-list #chipList aria-label="Page selection"> <mat-chip-list #chipList aria-label="Page selection">
<mat-chip <mat-chip
*ngFor="let entity of selectedEntities" *ngFor="let entity of selectedEntities"
[selectable]="true" [selectable]="true"
[removable]="true"> [removable]="true">
{{entity.name}} {{entity.name}}
<span (click)="remove(entity)" <span (click)="remove(entity)"
class=" notranslate mat-chip-remove mat-chip-trailing-icon " uk-icon="trash"></span> class=" notranslate mat-chip-remove mat-chip-trailing-icon " uk-icon="trash"></span>
@ -170,7 +176,7 @@
</mat-autocomplete> </mat-autocomplete>
</mat-form-field> </mat-form-field>
<div class="form-group" > <div class="form-group">
<label class="uk-text-danger uk-margin-small-bottom"> <label class="uk-text-danger uk-margin-small-bottom">
By disabling a position, all contents in this position will be deleted. By disabling a position, all contents in this position will be deleted.
</label> </label>
@ -178,7 +184,7 @@
<div class=" uk-grid"> <div class=" uk-grid">
<span dashboard-input class="" [formInput]="myForm.get('top')" <span dashboard-input class="" [formInput]="myForm.get('top')"
type="checkbox" type="checkbox"
label="Top" > label="Top">
</span> </span>
<span dashboard-input class="uk-margin-small-left" [formInput]="myForm.get('right')" <span dashboard-input class="uk-margin-small-left" [formInput]="myForm.get('right')"
type="checkbox" type="checkbox"
@ -194,7 +200,8 @@
</span> </span>
</div> </div>
</div> </div>
<div [ngClass]="{'has-error':!myForm.controls.portalType.valid && myForm.controls.portalType.dirty}" class="form-group" > <div [ngClass]="{'has-error':!myForm.controls.portalType.valid && myForm.controls.portalType.dirty}"
class="form-group">
<div class="uk-width-1-1 uk-margin-small-bottom uk-text-bold uk-form-label"> <div class="uk-width-1-1 uk-margin-small-bottom uk-text-bold uk-form-label">
Page exists in: Page exists in:
</div> </div>

12
dashboard/page/pages.module.ts
View File

@ -10,13 +10,21 @@ import {InputModule} from "../../sharedComponents/input/input.module";
import {AdminTabsModule} from "../sharedComponents/admin-tabs/admin-tabs.module"; import {AdminTabsModule} from "../sharedComponents/admin-tabs/admin-tabs.module";
import {PageContentModule} from "../sharedComponents/page-content/page-content.module"; import {PageContentModule} from "../sharedComponents/page-content/page-content.module";
import {PagesRoutingModule} from "./pages-routing.module"; 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";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, RouterModule, FormsModule, AlertModalModule, ReactiveFormsModule, MatSlideToggleModule, AdminToolServiceModule, InputModule, CommonModule, RouterModule, FormsModule, AlertModalModule, ReactiveFormsModule, MatSlideToggleModule, AdminToolServiceModule, InputModule,
MatAutocompleteModule, MatFormFieldModule, MatChipsModule, AdminTabsModule, PageContentModule, PagesRoutingModule MatAutocompleteModule, MatFormFieldModule, MatChipsModule, AdminTabsModule, PageContentModule, PagesRoutingModule, SearchInputModule, IconsModule
], ],
declarations: [PagesComponent], declarations: [PagesComponent],
exports: [PagesComponent] exports: [PagesComponent]
}) })
export class PagesModule { } export class PagesModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([add]);
}
}

226
dashboard/portal/portals.component.html
View File

@ -1,129 +1,131 @@
<div page-content> <div page-content class="admin-pages">
<admin-tabs tab = "portal" header></admin-tabs> <div header>
<div inner class="admin-pages"> <admin-tabs tab="portal"></admin-tabs>
<div *ngIf="!errorMessage && !showLoading" class="filters" uk-sticky="offset:150"> <div *ngIf="!errorMessage && !showLoading" class="uk-grid filters" uk-grid>
<div class="show-options uk-float-right"> <div class="uk-width-1-1">
<button class="uk-button uk-button-primary " type="button">Bulk Actions</button> <ul class="uk-subnav uk-subnav-pill">
<div uk-dropdown="mode: click"> <li [class.uk-active]="filterForm.get('type').value === 'all'" class="uk-margin-small-bottom"><a
<ul class="uk-nav uk-margin-left" (click)="filterForm.get('type').setValue('all')"><span
[attr.uk-tooltip]="getSelectedCommunities().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'" class="title">All portals</span></a></li>
title="Select at least one portal"> <li *ngFor="let type of portalUtils.portalTypes; let i=index"
<li><a [class]="getSelectedCommunities().length == 0 ? 'uk-disabled' : ''" [class.uk-active]="filterForm.get('type').value === type.value" class="uk-margin-small-bottom"><a
(click)="confirmDeleteSelectedCommunities()"><i></i> Delete </a></li> (click)="filterForm.get('type').setValue(type.value)"><span
</ul> class="title">{{type.label}}</span></a></li>
</ul>
</div>
<div class="uk-width-1-1 uk-flex uk-flex-right uk-flex-middle">
<div search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search page"
[bordered]="true" colorClass="uk-text-secondary"></div>
<div class="uk-margin-left show-options">
<button class="uk-button uk-button-secondary">Bulk Actions</button>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-margin-left"
[attr.uk-tooltip]="getSelectedCommunities().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
title="Select at least one portal">
<li><a [class]="getSelectedCommunities().length == 0 ? 'uk-disabled' : ''"
(click)="confirmDeleteSelectedCommunities()"><i></i> Delete </a></li>
</ul>
</div>
</div>
<div class="uk-margin-left">
<a (click)="newCommunity()"
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 portal</button>
</a>
</div> </div>
</div> </div>
<div class="uk-inline uk-width-medium uk-float-right uk-margin-right" >
<span class="uk-position-center-right"><i class="material-icons">search</i></span>
<div dashboard-input [formInput]="filterForm.controls.keyword"
placeholder="Search"></div>
</div>
<ul class="uk-subnav uk-subnav-pill subCategoriesTabs ignore admin " >
<li [class.uk-active]="filterForm.get('type').value === 'all'" class="uk-margin-small-bottom"><a
(click)="filterForm.get('type').setValue('all')"><span
class="title">All portals</span></a></li>
<li *ngFor="let type of portalUtils.portalTypes; let i=index"
[class.uk-active]="filterForm.get('type').value === type.value" class="uk-margin-small-bottom"><a
(click)="filterForm.get('type').setValue(type.value)"><span
class="title">{{type.label}}</span></a></li>
</ul>
</div> </div>
</div>
<div class="uk-margin-top"> <div inner>
<a *ngIf="!showLoading && !errorMessage" (click)="newCommunity()" <div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
class="uk-flex uk-flex-right uk-flex-middle uk-margin-small-bottom"> <a class="uk-alert-close" uk-close></a>
<div class="uk-button-default large uk-icon-button uk-margin-small-right" uk-icon="plus"> {{updateErrorMessage}}
</div> </div>
Add portal <div *ngIf="errorMessage" class="uk-alert uk-alert-danger uk-margin-large-top"
</a> role="alert">{{errorMessage}}</div>
<div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert> <div [style.display]="showLoading ? 'inline' : 'none'"
<a class="uk-alert-close" uk-close></a> class="uk-animation-fade uk-margin-large-top uk-width-1-1" role="alert"><img
{{updateErrorMessage}}
</div>
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger uk-margin-large-top"
role="alert">{{errorMessage}}</div>
<div [style.display]="showLoading ? 'inline' : 'none'"
class="uk-animation-fade uk-margin-large-top uk-width-1-1" role="alert"><img
class="uk-align-center loading-gif"></div> class="uk-align-center loading-gif"></div>
<div class=" uk-margin-medium-bottom" *ngIf="!errorMessage && !showLoading">
<div class=" uk-margin-medium-bottom" *ngIf="!errorMessage && !showLoading"> <div class="">
<div class="uk-overflow-container">
<table class="uk-table uk-table-striped uk-table-hover">
<thead class="form-header">
<tr>
<th><input id="allCommunityCheckbox" type="checkbox" (change)="toggleCheckBoxes($event)"></th>
<th>Name</th>
<th>Type</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let check of checkboxes; let i=index">
<td><input id="{{check.community._id}}" class="checkBox" type="checkbox"
name="communitiescb[]" value="{{check.community._id}}" [(ngModel)]="check.checked">
</td>
<td>
<div class="name" href="#">{{check.community.name}}</div>
</td>
<td>
<div class="type" href="#">{{check.community.type}}</div>
</td>
<td>
<div class="actions" href="#">
<i class="clickable" uk-icon="pencil" (click)="editCommunity(i)"></i>
<i class="clickable uk-text-danger" uk-icon="trash"
(click)="confirmDeleteCommunity(check.community._id)"></i>
</div>
</td>
<div class=""> </tr>
<div class="uk-overflow-container">
<table class="uk-table uk-table-striped uk-table-hover">
<thead class="form-header">
<tr>
<th><input id="allCommunityCheckbox" type="checkbox" (change)="toggleCheckBoxes($event)"></th>
<th>Name</th>
<th>Type</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let check of checkboxes; let i=index">
<td><input id="{{check.community._id}}" class="checkBox" type="checkbox"
name="communitiescb[]" value="{{check.community._id}}" [(ngModel)]="check.checked">
</td>
<td>
<div class="name" href="#">{{check.community.name}}</div>
</td>
<td>
<div class="type" href="#">{{check.community.type}}</div>
</td>
<td>
<div class="actions" href="#">
<i class="clickable" uk-icon="pencil" (click)="editCommunity(i)"></i>
<i class="clickable uk-text-danger" uk-icon="trash"
(click)="confirmDeleteCommunity(check.community._id)"></i>
</div>
</td>
</tr> </tbody>
</table>
</tbody> <div *ngIf="checkboxes.length==0" class="col-md-12">
</table> <div class="uk-alert-warning" uk-alert>No portals found</div>
<div *ngIf="checkboxes.length==0" class="col-md-12">
<div class="uk-alert-warning" uk-alert>No portals found</div>
</div>
<!--<div class="uk-width-1-1 uk-flex uk-flex-center ">
<div class="uk-width-small uk-button-default uk-button" (click)="newCommunity()">
<i class="" uk-icon="plus"></i>
</div>
</div>-->
</div> </div>
<!--<div class="uk-width-1-1 uk-flex uk-flex-center ">
<div class="uk-width-small uk-button-default uk-button" (click)="newCommunity()">
<i class="" uk-icon="plus"></i>
</div>
</div>-->
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<modal-alert #AlertModalSaveCommunity (alertOutput)="communitySaveConfirmed($event)" <modal-alert #AlertModalSaveCommunity (alertOutput)="communitySaveConfirmed($event)"
[okDisabled]="portalFG && (portalFG.invalid || !portalFG.dirty)"> [okDisabled]="portalFG && (portalFG.invalid || !portalFG.dirty)">
<div *ngIf="modalErrorMessage" class="uk-alert-danger" uk-alert aria-hidden="true">{{ modalErrorMessage }}</div> <div *ngIf="modalErrorMessage" class="uk-alert-danger" uk-alert aria-hidden="true">{{ modalErrorMessage }}</div>
<form [formGroup]="portalFG"> <form [formGroup]="portalFG">
<div dashboard-input class="uk-margin-small-left" [formInput]="portalFG.controls.name" <div dashboard-input class="uk-margin-small-left" [formInput]="portalFG.controls.name"
type="text" type="text"
label="Portal Name"> label="Portal Name">
</div> </div>
<div [ngClass]="{'has-error':!portalFG.controls.type.valid && portalFG.controls.type.dirty}"> <div [ngClass]="{'has-error':!portalFG.controls.type.valid && portalFG.controls.type.dirty}">
<label for="portalTypeTag">*Portal Type</label> <label for="portalTypeTag">*Portal Type</label>
<select formControlName="type" id="portalTypeTag" class="form-control uk-select"> <select formControlName="type" id="portalTypeTag" class="form-control uk-select">
<option *ngFor="let option of portalUtils.portalTypes" [value]="option.value">{{option.label}}</option> <option *ngFor="let option of portalUtils.portalTypes" [value]="option.value">{{option.label}}</option>
</select> </select>
</div> </div>
<div dashboard-input class="uk-margin-small-left " [formInput]="portalFG.controls.pid" <div dashboard-input class="uk-margin-small-left " [formInput]="portalFG.controls.pid"
type="text" type="text"
label="Portal persistent id for portal"> label="Portal persistent id for portal">
</div> </div>
<div dashboard-input class="uk-margin-small-left" [formInput]="portalFG.controls.piwik" <div dashboard-input class="uk-margin-small-left" [formInput]="portalFG.controls.piwik"
type="text" type="text"
label="Piwik id"> label="Piwik id">
</div> </div>
<input type="hidden" formControlName="_id"> <input type="hidden" formControlName="_id">
</form> </form>
</modal-alert> </modal-alert>
<modal-alert #AlertModalDeleteCommunities (alertOutput)="confirmedDeleteCommunities($event)"></modal-alert> <modal-alert #AlertModalDeleteCommunities (alertOutput)="confirmedDeleteCommunities($event)"></modal-alert>

12
dashboard/portal/portals.module.ts
View File

@ -9,14 +9,22 @@ import {InputModule} from "../../sharedComponents/input/input.module";
import {AdminTabsModule} from "../sharedComponents/admin-tabs/admin-tabs.module"; import {AdminTabsModule} from "../sharedComponents/admin-tabs/admin-tabs.module";
import {PageContentModule} from "../sharedComponents/page-content/page-content.module"; import {PageContentModule} from "../sharedComponents/page-content/page-content.module";
import {PortalsRoutingModule} from "./portals-routing.module"; import {PortalsRoutingModule} from "./portals-routing.module";
import {IconsService} from "../../utils/icons/icons.service";
import {add} from "../../utils/icons/icons";
import {IconsModule} from "../../utils/icons/icons.module";
import {SearchInputModule} from "../../sharedComponents/search-input/search-input.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, FormsModule, AlertModalModule, CommonModule, FormsModule, AlertModalModule,
ReactiveFormsModule, ReactiveFormsModule,
RouterModule, AdminToolServiceModule, InputModule, AdminTabsModule, PageContentModule, PortalsRoutingModule RouterModule, AdminToolServiceModule, InputModule, AdminTabsModule, PageContentModule, PortalsRoutingModule, IconsModule, SearchInputModule
], ],
declarations: [PortalsComponent], declarations: [PortalsComponent],
exports: [PortalsComponent] exports: [PortalsComponent]
}) })
export class PortalsModule { } export class PortalsModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([add]);
}
}

13
sharedComponents/search-input/search-input.component.css
View File

@ -11,7 +11,13 @@ input::placeholder {
font-weight: 600; font-weight: 600;
} }
@media only screen and (max-width: 980px) { @media only screen and (min-width: 960px) {
.bordered {
border-bottom: 1px solid currentColor !important;
}
}
@media only screen and (max-width: 959px) {
input { input {
font-size: 14px; font-size: 14px;
} }
@ -47,3 +53,8 @@ button.search .icon-bg {
.selected { .selected {
color: #1a1a1a; color: #1a1a1a;
} }
.overlay {
margin-left: -13px;
z-index: 1;
}

12
sharedComponents/search-input/search-input.component.ts
View File

@ -6,11 +6,11 @@ import {MatAutocompleteTrigger} from '@angular/material/autocomplete';
selector: '[search-input]', selector: '[search-input]',
styleUrls: ['search-input.component.css'], styleUrls: ['search-input.component.css'],
template: ` template: `
<div class="uk-flex uk-flex-middle uk-flex-center uk-align-center uk-margin-medium-bottom search-mobile" [ngClass]="colorClass"> <div class="uk-flex uk-flex-middle uk-flex-center search-mobile" [ngClass]="colorClass">
<div *ngIf="control" class="uk-width-expand"> <div *ngIf="control" class="uk-width-expand" [class.bordered]="bordered">
<form (ngSubmit)="search()"> <form (ngSubmit)="search()">
<input #input type="text" class="uk-width-1-1" <input #input type="text" class="uk-width-1-1"
[class.uk-animation-slide-right-medium]="showSearch && !control.value" [class.uk-animation-slide-right-medium]="showSearch"
[class.uk-hidden@m]="!showSearch" [class.uk-hidden@m]="!showSearch"
[class.uk-hidden]="selected" [class.uk-hidden]="selected"
[placeholder]="placeholder" [placeholder]="placeholder"
@ -40,14 +40,14 @@ import {MatAutocompleteTrigger} from '@angular/material/autocomplete';
<span [ngClass]="colorClass" class="icon-bg"> <span [ngClass]="colorClass" class="icon-bg">
<icon class="uk-position-center" name="search"></icon> <icon class="uk-position-center" name="search"></icon>
</span> </span>
<span class="uk-text-uppercase space">search</span> <span class="uk-text-uppercase overlay">search</span>
</button> </button>
<button [disabled]="loading" class="search uk-flex uk-flex-middle uk-hidden@m" <button [disabled]="loading" class="search uk-flex uk-flex-middle uk-hidden@m"
(mousedown)="$event.preventDefault()" (click)="search()"> (mousedown)="$event.preventDefault()" (click)="search()">
<span [ngClass]="colorClass" class="icon-bg"> <span [ngClass]="colorClass" class="icon-bg">
<icon class="uk-position-center" name="search"></icon> <icon class="uk-position-center" name="search"></icon>
</span> </span>
<span class="uk-text-uppercase space">search</span> <span class="uk-text-uppercase overlay">search</span>
</button> </button>
</div>` </div>`
}) })
@ -66,6 +66,8 @@ export class SearchInputComponent {
list: any = null; list: any = null;
@Input() @Input()
colorClass: string = 'portal-color'; colorClass: string = 'portal-color';
@Input()
bordered: boolean = false;
@ViewChild('input') input: ElementRef; @ViewChild('input') input: ElementRef;
@ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger; @ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger;
@Output() @Output()