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

1. Navbar: Change navbar to be sticky always. 2. Search Filter: Add new inputs. 3. Page-content: Remove offset changing base on menu. 4. Pages add new search-input. 5. Advanced Search Input: Add enter behaviour and make inputs by default equal size.

This commit is contained in:
Konstantinos Triantafyllou 2022-04-07 18:17:52 +03:00
parent ac3e721dfc
commit f20fe90aa2
8 changed files with 138 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,9 +15,9 @@
<div *ngIf="showLoading" class="uk-position-center"> <div *ngIf="showLoading" class="uk-position-center">
<loading></loading> <loading></loading>
</div> </div>
<div *ngIf="!showLoading"> <ng-container *ngIf="!showLoading">
<div class="uk-grid uk-margin-medium-bottom" uk-grid> <div class="uk-grid uk-flex-middle uk-margin-top uk-margin-medium-bottom" uk-grid>
<div class="uk-width-expand"> <div class="uk-width-expand@m uk-width-1-1">
<ul class="uk-subnav uk-subnav-pill"> <ul class="uk-subnav uk-subnav-pill">
<li [class.uk-active]="filterForm.get('type').value === 'all'"><a <li [class.uk-active]="filterForm.get('type').value === 'all'"><a
(click)="filterForm.get('type').setValue('all')"><span>All pages</span></a></li> (click)="filterForm.get('type').setValue('all')"><span>All pages</span></a></li>
@ -26,18 +26,11 @@
(click)="filterForm.get('type').setValue(type.value)"><span>{{type.label}}</span></a></li> (click)="filterForm.get('type').setValue(type.value)"><span>{{type.label}}</span></a></li>
</ul> </ul>
</div> </div>
<div <div class="uk-width-1-3@m uk-width-1-1 uk-flex uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid>
class="uk-flex uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" <div search-input [expandable]="true" [searchControl]="filterForm.get('keyword')" searchInputClass="outer" placeholder="Search page" class="uk-width-expand"></div>
uk-grid>
<div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false"
placeholder="Search page"
[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 *ngIf="isPortalAdministrator"> <div *ngIf="isPortalAdministrator">
<a (click)="newPage()" <a (click)="newPage()"
class="uk-flex uk-flex-middle uk-text-uppercase"> class="uk-flex uk-flex-middle uk-text-uppercase">
<button class="large uk-icon-button uk-button-secondary"> <button class="large uk-icon-button uk-button-secondary">
<icon name="add"></icon> <icon name="add"></icon>
</button> </button>
@ -46,111 +39,109 @@
</div> </div>
</div> </div>
</div> </div>
</div> <div *ngIf="checkboxes.length > 0" class="uk-section uk-section-small">
<div *ngIf="!showLoading && checkboxes.length > 0" class="uk-padding uk-padding-remove-top"> <div
<div class="uk-display-inline"
class="uk-display-inline" [attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : null"
[attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : null" title="Select at least one page"><input id="checkAll" type="checkbox" (click)="selectAll()"
title="Select at least one page"><input id="checkAll" type="checkbox" (click)="selectAll()" [ngModel]="getSelectedPages().length ==checkboxes.length"/>
[ngModel]="getSelectedPages().length ==checkboxes.length"/> <span *ngIf="getSelectedPages().length > 0" class="uk-margin-left uk-text-muted">
<span *ngIf="getSelectedPages().length > 0" class="uk-margin-left uk-text-muted">
{{getSelectedPages().length}} pages selected </span> {{getSelectedPages().length}} pages selected </span>
<a class="uk-margin-left">Actions</a> <a class="uk-margin-left">Actions</a>
<div uk-dropdown="mode: click"> <div uk-dropdown="mode: click">
<ul class="uk-nav uk-dropdown-nav" <ul class="uk-nav uk-dropdown-nav"
[attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'" [attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
title="Select at least one page"> title="Select at least one page">
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''" <li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
(click)="togglePages(true,getSelectedPages())"><i></i> Enable (click)="togglePages(true,getSelectedPages())"><i></i> Enable
</a></li> </a></li>
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''" <li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
(click)="togglePages(false,getSelectedPages())"><i></i> Disable (click)="togglePages(false,getSelectedPages())"><i></i> Disable
</a> </a>
</li> </li>
<li *ngIf="isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''" <li *ngIf="isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
(click)="confirmDeleteSelectedPages()"><i></i> Delete </a></li> (click)="confirmDeleteSelectedPages()"><i></i> Delete </a></li>
</ul> </ul>
</div>
</div> </div>
</div> </div>
</div> <ul *ngIf="checkboxes.length > 0" class="uk-list pages">
<div *ngIf="!showLoading"> <li *ngFor="let check of checkboxes; let i=index" class="uk-card uk-card-default uk-margin-bottom">
<ul *ngIf="checkboxes.length > 0" class="uk-list pages"> <div class="uk-grid uk-grid-divider uk-padding" uk-grid>
<li *ngFor="let check of checkboxes; let i=index" class="uk-card uk-card-default uk-margin-bottom"> <div class="uk-grid uk-width-expand" uk-grid>
<div class="uk-grid uk-grid-divider uk-padding" uk-grid> <div class=""><input id="{{check.page._id}}" class="checkBox" type="checkbox"
<div class="uk-grid uk-width-expand" uk-grid> name="pagescb[]" value="{{check.page._id}}" [(ngModel)]="check.checked">
<div class=""><input id="{{check.page._id}}" class="checkBox" type="checkbox" </div>
name="pagescb[]" value="{{check.page._id}}" [(ngModel)]="check.checked"> <div class="uk-width-expand">
</div> <div class="title uk-margin-medium-bottom">Name</div>
<div class="uk-width-expand"> <div class="name uk-margin-medium-bottom" href="#">{{check.page.name}}</div>
<div class="title uk-margin-medium-bottom">Name</div> <div *ngIf="check.page.entities && check.page.entities.length > 0"><span
<div class="name uk-margin-medium-bottom" href="#">{{check.page.name}}</div> class="title">Entities: </span>
<div *ngIf="check.page.entities && check.page.entities.length > 0"><span {{getEntitiesAsString(check.page)}}</div>
class="title">Entities: </span> <div class=" uk-margin-small-bottom"><span class="title">Route: </span> {{check.page.route}}</div>
{{getEntitiesAsString(check.page)}}</div> <div *ngIf="!pagesType" class=" uk-margin-small-bottom"><span
<div class=" uk-margin-small-bottom"><span class="title">Route: </span> {{check.page.route}}</div> class="title">Type: </span> {{check.page.type}}</div>
<div *ngIf="!pagesType" class=" uk-margin-small-bottom"><span <div *ngIf="!portal" class=" uk-margin-small-bottom">
class="title">Type: </span> {{check.page.type}}</div> <span class="title">Portal type: </span>{{check.page.portalType}}
<div *ngIf="!portal" class=" uk-margin-small-bottom"> </div>
<span class="title">Portal type: </span>{{check.page.portalType}} <div *ngIf="!portal && check.page.portalPid" class=" uk-margin-small-bottom">
</div> <span class="title">Portal PID: </span>{{check.page.portalPid}}
<div *ngIf="!portal && check.page.portalPid" class=" uk-margin-small-bottom"> </div>
<span class="title">Portal PID: </span>{{check.page.portalPid}} </div>
</div> <div *ngIf="!isPortalAdministrator && ((check.page.top || check.page.bottom || check.page.left ||
</div> check.page.right) || pageWithDivIds.includes(check.page._id) )" class="uk-width-1-4">
<div *ngIf="!isPortalAdministrator && ((check.page.top || check.page.bottom || check.page.left || <div class="title uk-margin-medium-bottom">Help texts</div>
check.page.right) || pageWithDivIds.includes(check.page._id) )" class="uk-width-1-4"> <div class=" uk-margin-small-bottom">
<div class="title uk-margin-medium-bottom">Help texts</div> <a *ngIf="check.page.top || check.page.bottom || check.page.left || check.page.right"
<div class=" uk-margin-small-bottom"> class="helpContents"
<a *ngIf="check.page.top || check.page.bottom || check.page.left || check.page.right" [queryParams]="{pageId: check.page._id}"
class="helpContents" routerLink="../helptexts">
[queryParams]="{pageId: check.page._id}" Manage page help texts
routerLink="../helptexts"> <span *ngIf="pageHelpContentsCount[check.page._id]">({{pageHelpContentsCount[check.page._id]}})</span>
Manage page help texts </a>
<span *ngIf="pageHelpContentsCount[check.page._id]">({{pageHelpContentsCount[check.page._id]}})</span> </div>
</a> <div>
</div> <a *ngIf="pageWithDivIds.includes(check.page._id)"
<div> [queryParams]="{ pageId: check.page._id}"
<a *ngIf="pageWithDivIds.includes(check.page._id)" routerLink="../classContents">Manage class help texts
[queryParams]="{ pageId: check.page._id}" <span *ngIf="pageClassContentsCount[check.page._id]">({{pageClassContentsCount[check.page._id]}})</span>
routerLink="../classContents">Manage class help texts </a>
<span *ngIf="pageClassContentsCount[check.page._id]">({{pageClassContentsCount[check.page._id]}})</span> </div>
</a> </div>
</div> <div *ngIf="!isPortalAdministrator" class="uk-width-1-4">
</div> <div class="title uk-margin-medium-bottom">Enable/disable</div>
<div *ngIf="!isPortalAdministrator" class="uk-width-1-4"> <mat-slide-toggle [checked]="check.page.isEnabled"
<div class="title uk-margin-medium-bottom">Enable/disable</div> (change)="($event.source.checked = check.page.isEnabled);togglePages(!check.page.isEnabled,[check.page._id])"
<mat-slide-toggle [checked]="check.page.isEnabled" 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>">
(change)="($event.source.checked = check.page.isEnabled);togglePages(!check.page.isEnabled,[check.page._id])" </mat-slide-toggle>
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>"> </div>
</mat-slide-toggle> </div>
</div> <div *ngIf="isPortalAdministrator || (check.page.portalType == properties.adminToolsPortalType && check.page.portalPid == portal)" class="uk-width-1-5">
</div> <div class="uk-flex uk-flex-center uk-flex-column uk-height-1-1">
<div *ngIf="isPortalAdministrator || (check.page.portalType == properties.adminToolsPortalType && check.page.portalPid == portal)" class="uk-width-1-5"> <div class="uk-flex uk-flex-center">
<div class="uk-flex uk-flex-center uk-flex-column uk-height-1-1"> <div class="actions">
<div class="uk-flex uk-flex-center"> <button [disabled]="!portal && check.page.portalPid" [attr.uk-tooltip]="((!portal && check.page.portalPid)?'This page belongs to ' + check.page.portalPid:null)"
<div class="actions"> class="uk-button action uk-margin-top uk-flex uk-flex-middle" (click)="editPage(i)">
<button [disabled]="!portal && check.page.portalPid" [attr.uk-tooltip]="((!portal && check.page.portalPid)?'This page belongs to ' + check.page.portalPid:null)" <icon name="edit"></icon>
class="uk-button action uk-margin-top uk-flex uk-flex-middle" (click)="editPage(i)"> <span class="uk-margin-small-left"> Edit</span>
<icon name="edit"></icon> </button>
<span class="uk-margin-small-left"> Edit</span> <button class="uk-button action uk-margin-top uk-flex uk-flex-middle" (click)="confirmDeletePage(check.page._id)">
</button> <icon name="remove"></icon>
<button class="uk-button action uk-margin-top uk-flex uk-flex-middle" (click)="confirmDeletePage(check.page._id)"> <span class="uk-margin-small-left"> Delete</span>
<icon name="remove"></icon> </button>
<span class="uk-margin-small-left"> Delete</span> </div>
</button> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </li>
</div>
</li>
</ul> </ul>
<div *ngIf="checkboxes.length == 0" <div *ngIf="checkboxes.length == 0"
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-top uk-margin-bottom uk-text-bold"> class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-top uk-margin-bottom uk-text-bold">
<div>No pages found</div> <div>No pages found</div>
</div> </div>
</div> </ng-container>
</div> </div>
</div> </div>
<modal-alert #editModal (alertOutput)="pageSaveConfirmed($event)" <modal-alert #editModal (alertOutput)="pageSaveConfirmed($event)"

11
dashboard/page/pages.component.ts
View File

@ -64,8 +64,6 @@ export class PagesComponent implements OnInit {
private subscriptions: any[] = []; private subscriptions: any[] = [];
public portalUtils: PortalUtils = new PortalUtils(); public portalUtils: PortalUtils = new PortalUtils();
private index: number; private index: number;
public selectedKeyword: string;
@ViewChild('searchInputComponent') searchInputComponent: SearchInputComponent;
pageHelpContentsCount = {}; pageHelpContentsCount = {};
pageClassContentsCount = {}; pageClassContentsCount = {};
public stickyPageHeader: boolean = false; public stickyPageHeader: boolean = false;
@ -434,15 +432,6 @@ export class PagesComponent implements OnInit {
} }
} }
public onSearchClose() {
this.selectedKeyword = this.filterForm.get('keyword').value;
}
public reset() {
this.selectedKeyword = null;
this.searchInputComponent.reset()
}
selectAll() { selectAll() {
let checked = this.getSelectedPages().length != this.checkboxes.length; let checked = this.getSelectedPages().length != this.checkboxes.length;
for (let check of this.checkboxes) { for (let check of this.checkboxes) {

10
dashboard/sharedComponents/page-content/page-content.component.ts
View File

@ -1,4 +1,4 @@
import {AfterViewInit, Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild} from "@angular/core"; import {AfterViewInit, Component, EventEmitter, OnDestroy, OnInit, Output} from "@angular/core";
import {Subscription} from "rxjs"; import {Subscription} from "rxjs";
declare var UIkit; declare var UIkit;
@ -8,7 +8,7 @@ declare var UIkit;
template: ` template: `
<div id="page_content"> <div id="page_content">
<div id="header"> <div id="header">
<div id="page_content_header" [attr.uk-sticky]="shouldSticky?'media: @m':null" [attr.offset]="shouldSticky?offset:null"> <div id="page_content_header" [attr.uk-sticky]="shouldSticky?'media: @m':null" [attr.offset]="offset">
<div class="uk-container uk-container-large uk-padding-remove-vertical"> <div class="uk-container uk-container-large uk-padding-remove-vertical">
<div class="uk-padding-small uk-padding-remove-vertical"> <div class="uk-padding-small uk-padding-remove-vertical">
<ng-content select="[header]"></ng-content> <ng-content select="[header]"></ng-content>
@ -60,12 +60,6 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
initSticky() { initSticky() {
this.clear(); this.clear();
if(this.shouldSticky) { if(this.shouldSticky) {
this.subscriptions.push(UIkit.util.on(document, 'active', '#sticky-menu', () => {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--structure-header-height'));
}));
this.subscriptions.push(UIkit.util.on(document, 'inactive', '#sticky-menu', () => {
this.offset = 0;
}));
this.subscriptions.push(UIkit.util.on(document, 'active', '#page_content_header', () => { this.subscriptions.push(UIkit.util.on(document, 'active', '#page_content_header', () => {
this.sticky = true; this.sticky = true;
this.stickyEmitter.emit(this.sticky); this.stickyEmitter.emit(this.sticky);

38
searchPages/searchUtils/searchFilter.component.html
View File

@ -16,41 +16,17 @@
<span *ngIf="!isOpen">+ View all</span> <span *ngIf="!isOpen">+ View all</span>
</a> </a>
<div *ngIf="isOpen" class="uk-text-small uk-margin-small-bottom"> <div *ngIf="isOpen" class="uk-text-small uk-margin-small-bottom">
<div class=""> <div class="uk-margin-small-left">
<span class="uk-text-meta uk-margin-small-left">Top 100 values are <div class="uk-text-meta">Top 100 values are shown in the filters</div>
shown in the filters</span> <div class="uk-flex uk-flex-bottom uk-margin-top">
<div class="uk-grid uk-margin-small-left uk-flex uk-flex-bottom"> <div input class="uk-width-1-2@m uk-margin-right" [placeholder]="{label: 'Search', static: true}" inputClass="inner x-small" [(value)]="keyword"></div>
<!-- <input class="uk-input uk-margin-small-top uk-form-small uk-width-2-3@m uk-width-3-5@s text-input-box " <div *ngIf="showResultCount === true" input type="select" class="uk-width-expand" placeholder="Sort by" inputClass="border-bottom" [(value)]="sortBy" [options]="sortByOptions"></div>
name="filter-keyword"
placeholder="Search..." type="text" [(ngModel)]="keyword"> -->
<div input class="uk-width-2-3@m uk-width-3-5@s" placeholder="Search"
inputClass="inner x-small" [(value)]="keyword"></div>
<span *ngIf="showResultCount === true"
class="uk-width-1-3@m uk-width-2-5@s uk-padding-small uk-padding-remove-vertical uk-padding-remove-right">
<span class="uk-width-1-4 uk-text-muted"> Sort by:</span>
<!-- <select [(ngModel)]="sortBy"
class=" uk-width-expand uk-select uk-hidden@m uk-form-small"
id="form-horizontal-select" name="select_order">
<option value="num">Results number</option>
<option value="name">Name</option>
</select>-->
<mat-select [(ngModel)]="sortBy" (ngModelChange)="sort(filter.values)"
class="uk-width-expand matSelection uk-visible@m"
id="form-horizontal-select1" name="select_order"
[disableOptionCentering]="true" panelClass="matSelectionPanel">
<mat-option value="num">Results number</mat-option>
<mat-option value="name">Name</mat-option>
</mat-select>
</span>
</div> </div>
</div> </div>
<div class="uk-overflow-auto uk-height-max-small uk-margin-small-left uk-margin-small-right uk-margin-top">
<div class="uk-overflow-auto uk-height-max-small uk-padding-remove
uk-margin-small-left uk-margin-small-right uk-margin-small-top uk-width-1-1">
<ng-container *ngFor="let value of this.sortedValues"> <ng-container *ngFor="let value of this.sortedValues">
<div *ngIf="filterKeywords(value.name)" title="{{value.name}}" <div *ngIf="filterKeywords(value.name)" title="{{value.name}}"
class="uk-animation-fade filterItem searchFilterItem uk-text-small"> class="uk-animation-fade uk-text-small">
<ng-container <ng-container
*ngTemplateOutlet="input_label_wrapper; context: {filter: filter, value: value}"></ng-container> *ngTemplateOutlet="input_label_wrapper; context: {filter: filter, value: value}"></ng-container>
</div> </div>

2
searchPages/searchUtils/searchFilter.component.ts
View File

@ -11,6 +11,7 @@ import {Filter, Value} from './searchHelperClasses.class';
import {ActivatedRoute, Router} from "@angular/router"; import {ActivatedRoute, Router} from "@angular/router";
import {SearchFields} from "../../utils/properties/searchFields"; import {SearchFields} from "../../utils/properties/searchFields";
import {HelperFunctions} from "../../utils/HelperFunctions.class"; import {HelperFunctions} from "../../utils/HelperFunctions.class";
import {Option} from "../../sharedComponents/input/input.component";
@Component({ @Component({
selector: 'search-filter', selector: 'search-filter',
templateUrl: 'searchFilter.component.html' templateUrl: 'searchFilter.component.html'
@ -33,6 +34,7 @@ export class SearchFilterComponent implements OnInit, OnChanges {
@Output() onFilterChange = new EventEmitter(); @Output() onFilterChange = new EventEmitter();
keyword = ""; keyword = "";
sortBy: "name" | "num" = "name"; sortBy: "name" | "num" = "name";
sortByOptions: Option[] = [{label: 'Results number', value: 'num'}, {label: 'Name', value: 'name'}];
queryParams = {}; queryParams = {};
paramPosition = 0; paramPosition = 0;
@Input() actionRoute: boolean = false; @Input() actionRoute: boolean = false;

18
sharedComponents/advanced-search-input/advanced-search-input.component.ts
View File

@ -2,7 +2,7 @@ import {
AfterContentInit, AfterContentInit,
Component, Component,
ContentChildren, ContentChildren,
EventEmitter, EventEmitter, HostListener,
Input, Input,
OnDestroy, OnDestroy,
Output, Output,
@ -13,10 +13,10 @@ import {InputComponent} from "../input/input.component";
@Component({ @Component({
selector: 'advanced-search-input', selector: 'advanced-search-input',
template: ` template: `
<div class="search-input" [ngClass]="searchInputClass" [class.small-vertical]="smallVertical"> <div *ngIf="inputs.length > 0" class="search-input" [ngClass]="searchInputClass" [class.small-vertical]="smallVertical">
<div class="uk-grid uk-flex-middle" uk-grid> <div class="uk-flex uk-flex-middle">
<div class="uk-width-expand"> <div class="uk-width-expand">
<div class="uk-grid uk-grid-collapse inputs" uk-grid> <div class="uk-grid uk-grid-collapse inputs" [ngClass]="'uk-child-width-1-' + inputs.length" uk-grid>
<ng-content></ng-content> <ng-content></ng-content>
</div> </div>
</div> </div>
@ -36,6 +36,16 @@ export class AdvancedSearchInputComponent implements AfterContentInit, OnDestroy
@Input() smallVertical: boolean = false; @Input() smallVertical: boolean = false;
@Output() searchEmitter: EventEmitter<void> = new EventEmitter<void>(); @Output() searchEmitter: EventEmitter<void> = new EventEmitter<void>();
@HostListener('window:keydown', ['$event'])
keyEvent(event: KeyboardEvent) {
if(this.inputs.toArray().filter(input => input.focused).length > 0) {
if(event.code === 'Enter') {
event.preventDefault();
this.searchEmitter.emit();
}
}
}
constructor() { constructor() {
} }

25
sharedComponents/input/input.component.ts
View File

@ -65,12 +65,9 @@ declare var UIkit;
<div *ngIf="!formControl.value && placeholderInfo.static" class="input placeholder">{{placeholderInfo.label}}</div> <div *ngIf="!formControl.value && placeholderInfo.static" class="input placeholder">{{placeholderInfo.label}}</div>
</ng-template> </ng-template>
<ng-template [ngIf]="type === 'autocomplete'"> <ng-template [ngIf]="type === 'autocomplete'">
<div class="uk-grid uk-width-expand" uk-grid> <input *ngIf="focused" [attr.placeholder]="placeholderInfo.static?placeholderInfo.label:hint"
<div class="uk-width-expand"> #searchInput class="input" [formControl]="searchControl">
<input [attr.placeholder]="placeholderInfo.static?placeholderInfo.label:hint" <div *ngIf="!focused" class="input">{{getLabel(formAsControl.value)}}</div>
#searchInput class="input" [formControl]="searchControl">
</div>
</div>
</ng-template> </ng-template>
<ng-template [ngIf]="type === 'chips'"> <ng-template [ngIf]="type === 'chips'">
<div class="uk-grid uk-grid-small uk-grid-row-collapse uk-width-expand" uk-grid> <div class="uk-grid uk-grid-small uk-grid-row-collapse uk-width-expand" uk-grid>
@ -89,12 +86,12 @@ declare var UIkit;
</div> </div>
</ng-template> </ng-template>
<div *ngIf="formControl.disabled || icon || (type === 'select' && selectArrow) || type === 'autocomplete'" <div *ngIf="formControl.disabled || icon || (type === 'select' && selectArrow) || type === 'autocomplete'"
class="uk-margin-left uk-margin-right icon"> class="uk-margin-left icon">
<icon *ngIf="formControl.disabled" [name]="'lock'" [flex]="true"></icon> <icon *ngIf="formControl.disabled" [name]="'lock'" [flex]="true"></icon>
<ng-template [ngIf]="formControl.enabled"> <ng-template [ngIf]="formControl.enabled">
<icon *ngIf="!formControl.value && icon" [name]="icon" [flex]="true"></icon> <icon *ngIf="!formControl.value && icon" [name]="icon" [flex]="true"></icon>
<icon *ngIf="!icon && type === 'select' && selectArrow" name="arrow_drop_down" [flex]="true"></icon> <icon *ngIf="!icon && type === 'select' && selectArrow" name="arrow_drop_down" [flex]="true"></icon>
<icon *ngIf="formControl.value && type === 'autocomplete'" class="clickable" (click)="resetSearch($event)" <icon *ngIf="searchControl?.value && type === 'autocomplete'" class="clickable" (click)="resetSearch($event)"
[flex]="true" name="close"></icon> [flex]="true" name="close"></icon>
</ng-template> </ng-template>
</div> </div>
@ -335,9 +332,6 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
if (!this.searchControl) { if (!this.searchControl) {
this.searchControl = new FormControl('', this.validators); this.searchControl = new FormControl('', this.validators);
} }
if(this.formAsControl) {
this.searchControl.setValue(this.getLabel(this.formControl.value));
}
this.subscriptions.push(this.searchControl.valueChanges.subscribe(value => { this.subscriptions.push(this.searchControl.valueChanges.subscribe(value => {
this.filteredOptions = this.filter(value); this.filteredOptions = this.filter(value);
this.cdr.detectChanges(); this.cdr.detectChanges();
@ -364,9 +358,6 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
} else { } else {
this.formControl.markAsDirty(); this.formControl.markAsDirty();
} }
if (this.searchControl && this.formAsControl) {
this.searchControl.setValue(this.getLabel(this.formControl.value));
}
this.valueChange.emit(this.formControl.value); this.valueChange.emit(this.formControl.value);
})); }));
if (this.input) { if (this.input) {
@ -434,6 +425,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
this.formControl.markAsTouched(); this.formControl.markAsTouched();
} }
this.focused = value; this.focused = value;
this.cdr.detectChanges();
if (this.focused) { if (this.focused) {
if (this.input) { if (this.input) {
this.input.nativeElement.focus(); this.input.nativeElement.focus();
@ -451,7 +443,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
this.open(false); this.open(false);
if (this.searchControl) { if (this.searchControl) {
if(this.formAsControl) { if(this.formAsControl) {
this.searchControl.setValue(this.getLabel(this.formControl.value)); this.searchControl.setValue('');
} }
this.add(event); this.add(event);
} }
@ -477,9 +469,6 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
resetSearch(event: any) { resetSearch(event: any) {
event.stopPropagation(); event.stopPropagation();
this.formControl.markAsDirty();
this.formControl.setValue(null);
this.focus(true);
this.searchControl.setValue(''); this.searchControl.setValue('');
} }

4
sharedComponents/navigationBar.component.html
View File

@ -93,9 +93,7 @@
</div> </div>
</div> </div>
<div id="main-menu" class="uk-visible@m"> <div id="main-menu" class="uk-visible@m">
<div id="sticky-menu" class="uk-navbar-container" [ngClass]="portal + '-menu'" <div id="sticky-menu" class="uk-navbar-container" [ngClass]="portal + '-menu'" uk-sticky media="@m">
uk-sticky="show-on-up: true; top: #main-menu" media="@m" cls-active="uk-active uk-navbar-sticky"
[attr.animation]="(header.stickyAnimation?'uk-animation-slide-top':null)">
<div <div
*ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo && header.badge"> *ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo && header.badge">
<img class="uk-position-top-left" <img class="uk-position-top-left"