feat: entry-actionbar

- can now pick from multiple models via entry-actionbar.

Author: felixroos

packages/data/src/lib/data.module.ts

@@ -24,13 +24,15 @@ import { ResourceModule } from './resource/resource.module';
 import { HistoryService } from './sdk/history.service';
 import { SdkModule } from './sdk/sdk.module';
 import { EntryListSelectComponent } from './entry-list-select/entry-list-select.component';
+import { EntryActionbarComponent } from './entry-actionbar/entry-actionbar.component';
 
 export const dataModuleConfig = {
   entryComponents: [
     DefaultEntryInputComponent,
     DefaultEntryOutputComponent,
     AdminEntryInputComponent,
     EntrySelectComponent,
+    EntryActionbarComponent,
     EntryListSelectComponent,
     EntryListPopComponent,
   ],
@@ -46,6 +48,7 @@ export const dataModuleConfig = {
     EntryListSelectComponent,
     CrudComponent,
     EntrySelectComponent,
+    EntryActionbarComponent,
     EntryListPopComponent,
   ],
   imports: [FormsModule, CommonModule, UiModule, SdkModule, FilesModule, AuthModule, ResourceModule, DndModule],
@@ -57,6 +60,7 @@ export const dataModuleConfig = {
     EntryPopComponent,
     CrudComponent,
     EntrySelectComponent,
+    EntryActionbarComponent,
     EntryListSelectComponent,
     EntryListPopComponent,
     RouterModule,

packages/data/src/lib/entry-actionbar/entry-actionbar.component.ts

@@ -0,0 +1,107 @@
+import { ChangeDetectorRef, Component, ElementRef, EventEmitter, forwardRef, Input, OnInit } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Item } from '@ec.components/core';
+import { ModelConfigService } from '../model-config/model-config.service';
+import { Action, ActionbarComponent, ListComponent, selectTemplate } from '@ec.components/ui';
+import EntryResource from 'ec.sdk/lib/resources/publicAPI/EntryResource';
+import LiteEntryResource from 'ec.sdk/lib/resources/publicAPI/LiteEntryResource';
+import { CrudConfig } from '../crud/crud-config.interface';
+import { ResourceConfig } from '../resource-config/resource-config.service';
+import { SdkService } from '../sdk/sdk.service';
+
+@Component({
+  selector: 'ec-entry-actionbar',
+  template: selectTemplate,
+  /* encapsulation: ViewEncapsulation.None, */
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => EntryActionbarComponent),
+      multi: true,
+    },
+  ],
+})
+export class EntryActionbarComponent extends ActionbarComponent implements OnInit {
+  entrySelectActions: Action[];
+  selectedEntries;
+  /** The event that focuses the input */
+  @Input() focusEvent: EventEmitter<boolean> = new EventEmitter();
+  /** The model to pick from, alternative to field with model property set. */
+  @Input() model: string;
+  /** The config that should be merged into the generated config */
+  // tslint:disable-next-line:no-input-rename
+  @Input('config') crudConfig: CrudConfig<EntryResource>;
+  lightModel: any;
+
+  constructor(
+    public sdk: SdkService,
+    public resourceConfig: ResourceConfig,
+    public elementRef: ElementRef,
+    public cdr: ChangeDetectorRef,
+    public modelConfig: ModelConfigService,
+  ) {
+    super(elementRef, cdr);
+  }
+
+  ngOnInit() {
+    if (!this.model) {
+      this.loadModelActions();
+    } else {
+      this.loadEntryActions(this.model);
+    }
+  }
+
+  getEntryAction(entry: EntryResource | LiteEntryResource) {
+    return {
+      id: entry._id,
+      title: entry._entryTitle,
+    };
+  }
+
+  async loadModelActions() {
+    delete this.model;
+    this.placeholder = 'Select Model...';
+    const modelActions = await this.getModelActions();
+    this.loadActions(modelActions);
+  }
+
+  async getModelActions(): Promise<Action[]> {
+    await this.sdk.ready;
+    return this.sdk.api.models.map((model) => ({
+      id: 'model',
+      select: false,
+      title: model.title,
+      action: () => this.loadEntryActions(model.title),
+    }));
+  }
+
+  async loadEntryActions(model, filterOptions = {}) {
+    this.model = model;
+    this.lightModel = await this.modelConfig.getLightModel(this.model);
+    const entryList = await this.sdk.api.entryList(model, filterOptions);
+    const entryActions: any[] = entryList.getAllItems().map((entry) => this.getEntryAction(entry));
+    this.placeholder = 'Select Entry from "' + model + '"...';
+    entryActions.unshift({
+      id: 'select-another-model',
+      title: 'Select another model...',
+      select: false,
+      action: () => this.loadModelActions(),
+    });
+    this.loadActions(entryActions);
+  }
+
+  writeValue(value) {
+    if (!value) {
+      value = [];
+    }
+    this.selection.replaceWith(value.map((liteEntry) => new Item(this.getEntryAction(liteEntry), this.config)));
+  }
+
+  filterDropdownList(listComponent: ListComponent<any>, query) {
+    if (this.lightModel && this.model) {
+      this.loadEntryActions(this.model, { [this.lightModel.titleField]: { search: query } }); // title: { search: query }
+    } else {
+      return super.filterDropdownList(listComponent, query);
+    }
+  }
+}

packages/data/src/lib/entry-form/default-entry-input.component.html

@@ -8,6 +8,10 @@
     <ec-entry-select [focusEvent]="focusEvent" [placeholder]="field.placeholder" [formControl]="group.get(field.property)"
       [model]="field['relation']" [id]="field.id" [config]="field.nestedCrudConfig"></ec-entry-select>
   </div>
+  <div *ngSwitchCase="'entries-actionbar'">
+    <ec-entry-actionbar [focusEvent]="focusEvent" [placeholder]="field.placeholder" [formControl]="group.get(field.property)"
+    [model]="field['relation']" [id]="field.id" [config]="field.nestedCrudConfig"></ec-entry-actionbar>
+  </div>
   <div *ngSwitchCase="'entry-list-select'">
     <!--  [placeholder]="field.placeholder" -->
     <!--  [config]="field.nestedCrudConfig" -->

packages/data/src/lib/model-config/type-config.service.ts

@@ -126,11 +126,14 @@ export class TypeConfigService {
     },
     entries: {
       view: 'tags',
-      inputView: 'entries-select',
+      inputView: 'entries-actionbar',
       inputViews: [
         {
           name: 'entries-select',
         },
+        {
+          name: 'entries-actionbar',
+        },
         {
           name: 'entry-list-select',
           levels: 2,

packages/ui/src/lib/actionbar/actionbar.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, Input, ElementRef, ChangeDetectorRef } from '@angular/core';
 import { SelectComponent } from '../select/select.component';
+import { selectTemplate } from '../select/select.component.html';
 import { ListConfig, List, Item } from '@ec.components/core';
 
 export type ActionFunction = (item?: Item<Action> | any, actionbar?: ActionbarComponent) => any;
@@ -17,7 +18,7 @@ export interface ActionbarConfig extends ListConfig<Action> {}
 
 @Component({
   selector: 'ec-actionbar',
-  templateUrl: '../select/select.component.html',
+  template: selectTemplate,
 })
 export class ActionbarComponent extends SelectComponent<Action> implements OnInit {
   @Input() root = 'ROOT'; // id of root stack item

packages/ui/src/lib/list/searchbar/searchbar.component.ts

@@ -161,6 +161,7 @@ export class SearchbarComponent implements AfterViewInit, Focus, OnInit, OnChang
     if (query !== this.latestQuery) {
       this.query = query;
     }
+    /* this.queryValue.next(query); */
     this.cdr.markForCheck();
   }
 

src/app/resource-select/resource-select-demo.component.html

@@ -35,6 +35,10 @@ <h3>Asset Select</h3>
   [config]="assetSelectConfig"
 ></ec-resource-select>
 
+<h3>Entry Actionbar</h3>
+<ec-entry-actionbar [(ngModel)]="selectedEntries"></ec-entry-actionbar>
+{{ selectedEntries | json}}
+
 <!-- <h3>Resource Actionbar</h3>
 <ec-resource-actionbar></ec-resource-actionbar> -->