packages/data/src/lib/entry-list-pop/entry-list-pop.component.ts
A Pop that contains an entry list. TODO: add demo
| selector | ec-entry-list-pop |
| templateUrl | ./entry-list-pop.component.html |
Properties |
|
Methods |
Inputs |
Outputs |
HostBindings |
HostListeners |
constructor(modelConfig: ModelConfigService, popService: PopService, elementRef: ElementRef, cdr: ChangeDetectorRef)
|
|||||||||||||||
|
Parameters :
|
| config | |
Type : CrudConfig<EntryResource>
|
|
| model | |
Type : string
|
|
| selection | |
Type : Selection<EntryResource>
|
|
| active | |
Type : boolean
|
|
|
Inherited from
PopComponent
|
|
|
Defined in
PopComponent:28
|
|
|
If true, .ec-pop is part of the DOM (*ngIf) + .active is set on .ec-pop-container. |
|
| hideOnClickOutside | |
Default value : false
|
|
|
Inherited from
PopComponent
|
|
|
Defined in
PopComponent:34
|
|
|
If set to true, the pop will hide when a click happens outside the pop. |
|
| hideOnEscape | |
Default value : true
|
|
|
Inherited from
PopComponent
|
|
|
Defined in
PopComponent:36
|
|
|
If set to false, esc will not close the pop |
|
| type | |
Type : string
|
|
|
Inherited from
PopComponent
|
|
|
Defined in
PopComponent:32
|
|
|
The used type on the host element |
|
| columnClicked | |
Type : EventEmitter<Item<EntryResource>>
|
|
| toggle | |
Type : EventEmitter<boolean>
|
|
|
Inherited from
PopComponent
|
|
|
Defined in
PopComponent:38
|
|
| class |
Default value : 'ec-list-pop modal-wrapper modal-wrapper_backdrop'
|
|
Set host class to make sure the type is used |
| document:click |
Arguments : '$event'
|
document:click($event)
|
|
Inherited from
PopComponent
|
|
Defined in
PopComponent:43
|
|
Listens for document:click and hides |
| getHeader | ||||
getHeader(entryList)
|
||||
|
Parameters :
Returns :
string
|
| ngOnChanges |
ngOnChanges()
|
|
Returns :
void
|
| select | ||||
select(item)
|
||||
|
emits columnClicked event or toggles selection if no observers.
Parameters :
Returns :
void
|
| Public hide |
hide()
|
|
Inherited from
PopComponent
|
|
Defined in
PopComponent:88
|
|
Hides the pop. Sets active false and removes pop from popService.stack
Returns :
void
|
| isOutside | ||||
isOutside(element)
|
||||
|
Inherited from
PopComponent
|
||||
|
Defined in
PopComponent:58
|
||||
|
yields true if the given element is outside the pop / or is the wrapper element itself (the backdrop)
Parameters :
Returns :
boolean
|
| Public show | ||||
show(e?)
|
||||
|
Inherited from
PopComponent
|
||||
|
Defined in
PopComponent:72
|
||||
|
Shows the pop. Sets active true and adds pop to popService.stack
Parameters :
Returns :
void
|
| Public toggle | ||||
toggle(e?)
|
||||
|
Inherited from
PopComponent
|
||||
|
Defined in
PopComponent:63
|
||||
|
Shows if not active, hides if active.
Parameters :
Returns :
void
|
| Public cdr |
Type : ChangeDetectorRef
|
| Public elementRef |
Type : ElementRef
|
| lightModel |
Type : any
|
| Public modelConfig |
Type : ModelConfigService
|
| Public popService |
Type : PopService
|
| searchbar |
Type : SearchbarComponent
|
Decorators :
@ViewChild(SearchbarComponent)
|
| activated |
Default value : false
|
|
Inherited from
PopComponent
|
|
Defined in
PopComponent:30
|
|
Flip and stays true after first show |
| clickEvent |
|
Inherited from
PopComponent
|
|
Defined in
PopComponent:40
|
| Public elementRef |
Type : ElementRef
|
|
Inherited from
PopComponent
|
|
Defined in
PopComponent:55
|
import {
ChangeDetectorRef,
Component,
ElementRef,
EventEmitter,
HostBinding,
Input,
OnChanges,
Output,
ViewChild,
} from '@angular/core';
import { Item, Selection } from '@ec.components/core';
import { PopComponent, PopService, SearchbarComponent } from '@ec.components/ui';
import { CrudConfig } from '../crud/crud-config.interface';
import { ModelConfigService } from '../model-config/model-config.service';
import EntryResource from 'ec.sdk/lib/resources/publicAPI/EntryResource';
/** A Pop that contains an entry list. TODO: add demo */
@Component({
selector: 'ec-entry-list-pop',
templateUrl: './entry-list-pop.component.html',
})
export class EntryListPopComponent extends PopComponent implements OnChanges {
@Input() model: string;
@Input() config: CrudConfig<EntryResource>;
@Input() selection: Selection<EntryResource>;
@Output() columnClicked: EventEmitter<Item<EntryResource>> = new EventEmitter();
@ViewChild(SearchbarComponent) searchbar: SearchbarComponent;
/** Set host class to make sure the type is used */
@HostBinding('class') class = 'ec-list-pop modal-wrapper modal-wrapper_backdrop';
lightModel: any;
constructor(
public modelConfig: ModelConfigService,
public popService: PopService,
public elementRef: ElementRef,
public cdr: ChangeDetectorRef,
) {
super(popService, elementRef, cdr);
}
ngOnChanges() {
if (this.model) {
this.modelConfig.getLightModel(this.model).then((model) => (this.lightModel = model));
}
this.config = Object.assign({}, this.config || {}, { hidePagination: true, disableHeader: true });
}
/** emits columnClicked event or toggles selection if no observers. */
select(item) {
if (this.columnClicked.observers.length) {
this.columnClicked.emit(item);
} else if (this.selection) {
this.selection.toggle(item);
}
// this.searchbar.focusEvent.emit(true);
}
getHeader(entryList) {
const label = this.config.singularLabel || `${entryList.model}`;
if (!this.selection || this.selection.isEmpty()) {
return `${label}`;
}
return `${label}: ${this.selection.items.length} selected`;
}
}
<div class="modal " *ngIf="active" [attr.data-col]="config?.popColumns || '8@md'">
<button (click)="hide()" type="button" class="modal__dismiss">
<ec-icon name="close"></ec-icon>
</button>
<header class="modal__header">
{{ getHeader(entryList) }}
</header>
<ec-list-header [list]="entryList?.list" class="modal__header" [selection]="selection"></ec-list-header>
<div class="modal__body">
<ec-loader class="ec-loader loader is-local" #entryListLoader></ec-loader>
<ec-entry-list
#entryList
[loader]="entryListLoader"
[model]="model"
[config]="config"
[selection]="selection"
(columnClicked)="select($event)"
></ec-entry-list>
<!-- (changed)="searchbar.updatedList($event)" -->
</div>
<ec-pagination [pagination]="entryList?.list?.pagination"></ec-pagination>
</div>