mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
@@ -7,9 +7,8 @@
|
|||||||
<!-- Add spacer, to align navigation to the right -->
|
<!-- Add spacer, to align navigation to the right -->
|
||||||
<div class="mdl-layout-spacer"></div>
|
<div class="mdl-layout-spacer"></div>
|
||||||
|
|
||||||
<!-- Search box -->
|
<!-- Search bar -->
|
||||||
<alfresco-search-control *ngIf="isLoggedIn()" [searchTerm]="searchTerm"
|
<search-bar></search-bar>
|
||||||
(searchChange)="searchTermChange($event);" [autocomplete]="false"></alfresco-search-control>
|
|
||||||
|
|
||||||
<!-- Navigation. We hide it in small screens. -->
|
<!-- Navigation. We hide it in small screens. -->
|
||||||
<nav class="mdl-navigation mdl-layout--large-screen-only">
|
<nav class="mdl-navigation mdl-layout--large-screen-only">
|
||||||
|
@@ -29,7 +29,7 @@ import {
|
|||||||
import { UploadButtonComponent } from 'ng2-alfresco-upload/dist/ng2-alfresco-upload';
|
import { UploadButtonComponent } from 'ng2-alfresco-upload/dist/ng2-alfresco-upload';
|
||||||
import { DataTableDemoComponent } from './components/datatable/datatable-demo.component';
|
import { DataTableDemoComponent } from './components/datatable/datatable-demo.component';
|
||||||
import { SearchComponent } from './components/search/search.component';
|
import { SearchComponent } from './components/search/search.component';
|
||||||
import { ALFRESCO_SEARCH_DIRECTIVES } from 'ng2-alfresco-search/dist/ng2-alfresco-search';
|
import { SearchBarComponent } from './components/search/search-bar.component';
|
||||||
import { LoginDemoComponent } from './components/login/login-demo.component';
|
import { LoginDemoComponent } from './components/login/login-demo.component';
|
||||||
import { TasksDemoComponent } from './components/tasks/tasks-demo.component';
|
import { TasksDemoComponent } from './components/tasks/tasks-demo.component';
|
||||||
|
|
||||||
@@ -39,7 +39,7 @@ declare var document: any;
|
|||||||
selector: 'alfresco-app',
|
selector: 'alfresco-app',
|
||||||
templateUrl: 'app/app.component.html',
|
templateUrl: 'app/app.component.html',
|
||||||
styleUrls: ['app/app.component.css'],
|
styleUrls: ['app/app.component.css'],
|
||||||
directives: [ALFRESCO_SEARCH_DIRECTIVES, ROUTER_DIRECTIVES, AuthRouterOutlet, MDL],
|
directives: [SearchBarComponent, ROUTER_DIRECTIVES, AuthRouterOutlet, MDL],
|
||||||
pipes: [AlfrescoPipeTranslate]
|
pipes: [AlfrescoPipeTranslate]
|
||||||
})
|
})
|
||||||
@RouteConfig([
|
@RouteConfig([
|
||||||
@@ -90,15 +90,4 @@ export class AppComponent {
|
|||||||
// todo: workaround for drawer closing
|
// todo: workaround for drawer closing
|
||||||
document.querySelector('.mdl-layout').MaterialLayout.toggleDrawer();
|
document.querySelector('.mdl-layout').MaterialLayout.toggleDrawer();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Called when a new search term is submitted
|
|
||||||
*
|
|
||||||
* @param params Parameters relating to the search
|
|
||||||
*/
|
|
||||||
searchTermChange(params) {
|
|
||||||
this.router.navigate(['Search', {
|
|
||||||
q: params.value
|
|
||||||
}]);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
@@ -1,7 +1,7 @@
|
|||||||
<table *ngIf="results && results.length && searchTerm" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
|
<table *ngIf="results && results.length && searchTerm" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr *ngFor="#result of results; #idx = index">
|
<tr *ngFor="#result of results; #idx = index">
|
||||||
<td>{{result.entry.name}}</td>
|
<td><a href="#" (click)="onItemClick(result, $event)">{{result.entry.name}}</a></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
@@ -15,7 +15,7 @@
|
|||||||
* limitations under the License.
|
* limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { Component, ElementRef, Input, OnChanges, Renderer } from 'angular2/core';
|
import { Component, ElementRef, EventEmitter, Input, OnChanges, Output, Renderer } from 'angular2/core';
|
||||||
import { AlfrescoService } from './../services/alfresco.service';
|
import { AlfrescoService } from './../services/alfresco.service';
|
||||||
|
|
||||||
import { AlfrescoPipeTranslate, AlfrescoTranslationService } from 'ng2-alfresco-core/dist/ng2-alfresco-core';
|
import { AlfrescoPipeTranslate, AlfrescoTranslationService } from 'ng2-alfresco-core/dist/ng2-alfresco-core';
|
||||||
@@ -32,6 +32,10 @@ declare let __moduleName: string;
|
|||||||
display: none;
|
display: none;
|
||||||
color: #555;
|
color: #555;
|
||||||
}
|
}
|
||||||
|
:host a {
|
||||||
|
color: #555;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
:host table {
|
:host table {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
}
|
}
|
||||||
@@ -65,7 +69,8 @@ export class AlfrescoSearchAutocompleteComponent implements OnChanges {
|
|||||||
@Input()
|
@Input()
|
||||||
ngClass: any;
|
ngClass: any;
|
||||||
|
|
||||||
route: any[] = [];
|
@Output()
|
||||||
|
preview: EventEmitter<any> = new EventEmitter();
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private _alfrescoService: AlfrescoService,
|
private _alfrescoService: AlfrescoService,
|
||||||
@@ -104,4 +109,17 @@ export class AlfrescoSearchAutocompleteComponent implements OnChanges {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onItemClick(node, event?: Event) {
|
||||||
|
if (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
if (node && node.entry) {
|
||||||
|
if (node.entry.isFile) {
|
||||||
|
this.preview.emit({
|
||||||
|
value: node
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@@ -5,9 +5,9 @@
|
|||||||
</label>
|
</label>
|
||||||
<div [class]="getTextFieldHolderClassName()">
|
<div [class]="getTextFieldHolderClassName()">
|
||||||
<input class="mdl-textfield__input" [type]="inputType" [autocomplete]="getAutoComplete()"
|
<input class="mdl-textfield__input" [type]="inputType" [autocomplete]="getAutoComplete()"
|
||||||
id="searchControl" [ngFormControl]="searchControl" [(ngModel)]="searchTerm" (focus)="onFocus()" (blur)="onBlur()">
|
id="searchControl" [ngFormControl]="searchControl" [(ngModel)]="searchTerm" (focus)="onFocus($event)" (blur)="onBlur($event)">
|
||||||
<label class="mdl-textfield__label" for="searchControl">{{'SEARCH.CONTROL.LABEL' | translate}}</label>
|
<label class="mdl-textfield__label" for="searchControl">{{'SEARCH.CONTROL.LABEL' | translate}}</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<alfresco-search-autocomplete [searchTerm]="autocompleteSearchTerm" [ngClass]="{active: searchActive, valid: searchValid}"></alfresco-search-autocomplete>
|
<alfresco-search-autocomplete [searchTerm]="autocompleteSearchTerm" [ngClass]="{active: searchActive, valid: searchValid}" (preview)="onFileClicked($event)"></alfresco-search-autocomplete>
|
||||||
|
@@ -51,6 +51,9 @@ export class AlfrescoSearchControlComponent implements AfterViewInit {
|
|||||||
@Output()
|
@Output()
|
||||||
searchChange = new EventEmitter();
|
searchChange = new EventEmitter();
|
||||||
|
|
||||||
|
@Output()
|
||||||
|
preview = new EventEmitter();
|
||||||
|
|
||||||
searchControl: Control;
|
searchControl: Control;
|
||||||
|
|
||||||
@Input()
|
@Input()
|
||||||
@@ -111,18 +114,20 @@ export class AlfrescoSearchControlComponent implements AfterViewInit {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onFocus(event) {
|
onFileClicked(event) {
|
||||||
if (event) {
|
this.preview.emit({
|
||||||
event.preventDefault();
|
value: event.value
|
||||||
}
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onFocus() {
|
||||||
this.searchActive = true;
|
this.searchActive = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
onBlur(event) {
|
onBlur() {
|
||||||
if (event) {
|
window.setTimeout(() => {
|
||||||
event.preventDefault();
|
this.searchActive = false;
|
||||||
}
|
}, 100);
|
||||||
this.searchActive = false;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user