@acorex/components 6.5.26 → 6.5.28

package/src/lib/data-filter/toolbar/filter-toolbar.component.ts

@@ -0,0 +1,179 @@
+import { Component, Input, ViewChild, ViewEncapsulation } from '@angular/core';
+import { AXHtmlUtil, AXMenuItem } from '@acorex/core';
+import { AXFilterPanelComponent } from '../filter-panel/filter-panel.component';
+import { AXToolbarItem } from '../../toolbar/toolbar-item';
+import { AXToolbarMenuComponent } from '../../toolbar/menu/toolbar-menu.component';
+import { AXMenuComponent } from '../../menu/menu.component';
+
+
+@Component({
+    selector: 'ax-toolbar-filter-view',
+    templateUrl: './filter-toolbar.component.html',
+    styleUrls: ['./filter-toolbar.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    providers: [{ provide: AXToolbarItem, useExisting: AXToolbarFilterViewComponent }]
+})
+export class AXToolbarFilterViewComponent {
+    constructor() { }
+    _uid: string = AXHtmlUtil.getUID();
+
+    @ViewChild('menu', { static: true }) menu: AXToolbarMenuComponent;
+    @ViewChild('contextMenu', { static: true }) contextMenu: AXMenuComponent;
+
+    @Input()
+    filterPanel: AXFilterPanelComponent;
+
+    contextMenuItems: AXMenuItem[] = [
+        // {
+        //     name: 'addFolder',
+        //     startIcon: 'fas fa-folder',
+        //     text: 'New Folder',
+        // },
+        {
+            name: 'remove',
+            startIcon: 'fas fa-trash',
+            text: 'Delete',
+        },
+    ];
+
+
+
+    menuItems: AXMenuItem[] = [
+        {
+            name: 'root',
+            startIcon: 'fas fa-filter',
+            text: 'Select All',
+            items: [
+                {
+                    name: 'selectAll',
+                    style: 'f',
+                    text: 'Select All',
+                },
+                // {
+                //     split: true,
+                //     name: 'addFolder',
+                //     startIcon: 'fas fa-folder',
+                //     text: 'New Folder',
+                // },
+                {
+                    divider: true,
+                    name: 'save',
+                    startIcon: 'fas fa-save',
+                    text: 'Save'
+                },
+                {
+                    divider: true,
+                    name: 'saveAs',
+                    startIcon: 'fas fa-save',
+                    text: 'Save As...'
+                }
+            ]
+        }
+
+    ];
+
+    ngAfterViewInit(): void {
+        setTimeout(() => {
+            this.selectAll();
+            this.addPredefinedList();
+        }, 100);
+    }
+
+    addPredefinedList() {
+        this.filterPanel.predefinedFilters.forEach(c => {
+            const item = {
+                name: c.name,
+                text: c.title,
+                type: 'f',
+                startIcon: 'fas',
+                data: c.value,
+                style: this._uid,
+                uid: AXHtmlUtil.getUID()
+            };
+            this.root.items.splice(1, 0, item);
+        });
+        this.update();
+    }
+
+    public selectAll(): void {
+        this.setCurrent(this.root.items[0]);
+        this.filterPanel.clear();
+        this.update();
+        this.menu.close();
+        // this.contextMenu.close();
+    }
+
+    itemClick(e: AXMenuItem) {
+
+        if (e.style === 'f') {
+            if (e.name === 'selectAll') {
+                this.selectAll();
+            }
+            else {
+                this.setCurrent(e);
+                this.filterPanel.load(e.data);
+            }
+        }
+        else {
+            if (e.name === 'saveAs') {
+                const name = prompt('Please enter the name;');
+                if (name) {
+                    const item = {
+                        text: name,
+                        type: 'f',
+                        style: this._uid,
+                        startIcon: 'fas',
+                        data: this.filterPanel.value,
+                        uid: AXHtmlUtil.getUID()
+                    };
+                    this.root.items.splice(1, 0, item);
+                    this.setCurrent(item);
+                }
+
+            }
+            if (e.name === 'save') {
+                const selected = this.findSelected();
+                if (selected) {
+                    selected.data = this.filterPanel.value;
+                }
+            }
+        }
+        this.update();
+    }
+
+    private findSelected(): AXMenuItem {
+        return this.root.items.find(c => c.selected);
+    }
+
+    private get root(): AXMenuItem {
+        return this.menuItems[0];
+    }
+
+    public update(): void {
+        this.menu.update();
+        setTimeout(() => {
+            // this.contextMenu.update();
+        }, 100);
+
+    }
+
+    private setCurrent(e: AXMenuItem) {
+        this.root.text = e.text;
+        this.root.items.filter(c => c.style === 'f').forEach(c => {
+            c.selected = false;
+            c.startIcon = 'fas';
+        });
+        e.selected = true;
+        e.startIcon = 'fas fa-check';
+        this.root.items.find(c => c.name === 'save').visible = e.name !== 'selectAll';
+    }
+
+    onCtxClick(e: AXMenuItem) {
+        const target = this.contextMenu.currentTarget as HTMLElement;
+        const menuId = target.getAttribute('data-uid');
+        if (e.name === 'remove' && menuId) {
+            this.root.items = this.root.items.filter(c => c.uid !== menuId);
+            this.selectAll();
+        }
+    }
+}

package/src/lib/data-list/core/data-list.component.ts

@@ -0,0 +1,62 @@
+import { ContentChild, Input, Directive } from '@angular/core';
+import { AXDataSourceComponent } from '../../data-source/datasource.component';
+import { AXDataSourceReadParams } from '../../data-source/read-param';
+import { AXBaseComponent } from '../../base/element.class';
+
+
+@Directive()
+export abstract class AXDataListComponent extends AXBaseComponent {
+
+
+
+  @Input()
+  items: any[] = [];
+
+  // @ContentChild(AXDataSourceComponent, { static: true })
+  // private _contentDataSource: AXDataSourceComponent;
+
+  // private _dataSource: AXDataSourceComponent;
+
+  // @Input()
+  // public get dataSource(): AXDataSourceComponent {
+  //   return this._dataSource ? this._dataSource : this._contentDataSource;
+  // }
+
+  // public set dataSource(v: AXDataSourceComponent) {
+  //   this._dataSource = v;
+  // }
+
+
+  abstract dataSource: AXDataSourceComponent;
+
+
+  // ngAfterContentInit(): void {
+  //   this.configDataList();
+  // }
+
+
+  protected configDataList() {
+    if (this.dataSource) {
+      this.dataSource.onDataReceived.subscribe(c => {
+        this.dataReceived(c.data.result);
+      });
+    }
+  }
+
+  private dataReceived(data: any) {
+    this.items = data;
+  }
+
+  private params: AXDataSourceReadParams = {};
+
+  fetch(params: AXDataSourceReadParams = {}) {
+    this.params = params;
+    if (this.dataSource) {
+      this.dataSource.fetch(params);
+    }
+  }
+
+  refresh() {
+    this.fetch(this.params);
+  }
+}

package/src/lib/data-list/list/list.component.html

@@ -0,0 +1,32 @@
+<div [style.height]="height" [style.width]="width">
+  <div class="ax-list-toolbar" *ngIf="toolbar">
+    <ng-content select="ax-toolbar"></ng-content>
+  </div>
+  <div class="ax-list-container" cdkDropList [id]="dropId" [cdkDropListConnectedTo]="connectedList"
+    (cdkDropListDropped)="dragDrop($event)" [cdkDropListData]="items"
+    [ngClass]="{'overflow-y': direction=='vertical' || direction=='horizontal-wrap','overflow-x': direction=='horizontal' || direction=='vertical-wrap'}">
+    <div class="item-wrapper" [ngClass]="direction">
+      <!-- <ng-container *ngIf="items && items.length; else emptyTemplate"> -->
+      <ng-container *ngIf="allowMoveItem; else elseTemplate">
+        <div class="ax-list-item" *ngFor="let item of items" cdkDrag [cdkDragData]="item">
+          <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item,direction:direction}">
+          </ng-container>
+          <div class="drop-placeholder" *cdkDragPlaceholder></div>
+        </div>
+      </ng-container>
+      <ng-template #elseTemplate>
+        <div class="ax-list-item" *ngFor="let item of items">
+          <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item,direction:direction }">
+          </ng-container>
+        </div>
+      </ng-template>
+      <!-- </ng-container> -->
+
+    </div>
+    <ng-container *ngIf="items==null || items.length==0">
+      <ng-container *ngTemplateOutlet="emptyTemplate">
+      </ng-container>
+    </ng-container>
+
+  </div>
+</div>

package/src/lib/data-list/list/list.component.scss

@@ -0,0 +1,64 @@
+.ax-list-container {
+
+    height: calc(100% - 45px);
+    min-height: 50px;
+
+    &.overflow-x {
+        overflow-x: auto;
+        overflow-y: hidden
+    }
+
+    &.overflow-y {
+        overflow-y: auto;
+        overflow-x: hidden
+    }
+
+
+    .item-wrapper {
+        height: auto;
+        display: flex;
+    }
+
+    .cdk-drop-list-dragging .cdk-drag {
+        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    .cdk-drag-animating {
+        transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    .drop-placeholder {
+        background: var(--gray-light-color);
+        border: dotted 2px var(--border-color);
+        min-height: 60px;
+        margin-bottom: 5px;
+        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    .vertical {
+        flex-direction: column;
+    }
+
+    .vertical-wrap {
+        flex-direction: column;
+        flex-wrap: wrap;
+    }
+
+    .horizontal-wrap {
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+
+    .horizontal {
+        flex-direction: row;
+    }
+    
+}
+
+.ax-list-toolbar {
+    padding: 4px 5px;
+    background: #fff;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    margin-bottom: 10px;
+}

package/src/lib/data-list/list/list.component.ts

@@ -0,0 +1,149 @@
+import {
+  Component,
+  ContentChild,
+  TemplateRef,
+  Input,
+  Output,
+  EventEmitter
+} from "@angular/core";
+import { AXDataListComponent } from "../core/data-list.component";
+import {
+  AXToolbarListViewComponent,
+  AXListViewDirection
+} from "./toolbar-list-view.component";
+import { ViewEncapsulation } from "@angular/core";
+import { AXToolbarSearchComponent } from '../../toolbar/search/toolbar-search.component';
+import { AXToolbarComponent } from '../../toolbar/toolbar.component';
+import { AXEvent, AXValueEvent } from '../../base/events.class';
+import { AXDataSourceComponent } from '../../data-source/datasource.component';
+
+
+
+
+
+
+@Component({
+  selector: "ax-list",
+  templateUrl: "./list.component.html",
+  styleUrls: ["./list.component.scss"],
+  encapsulation: ViewEncapsulation.None
+})
+export class AXListComponent extends AXDataListComponent {
+  constructor() {
+    super();
+  }
+  @Input() width: string = "";
+  @Input() height: string = "auto";
+
+  @Input("dropId") public dropId: string;
+  @Input("connectedList") public connectedList: string[] = [];
+
+  @Input() public allowMoveItem: boolean = false;
+
+
+  @ContentChild(AXDataSourceComponent, { static: true })
+  private _contentDataSource: AXDataSourceComponent;
+
+  private _dataSource: AXDataSourceComponent;
+
+  @Input()
+  public get dataSource(): AXDataSourceComponent {
+    return this._dataSource ? this._dataSource : this._contentDataSource;
+  }
+
+  public set dataSource(v: AXDataSourceComponent) {
+    this._dataSource = v;
+  }
+
+
+  @ContentChild('itemTemplate', { static: true })
+  _contentItemTemplate: TemplateRef<any>;
+
+
+  private _itemTemplate: TemplateRef<any>;
+  @Input()
+  public get itemTemplate(): TemplateRef<any> {
+    return this._itemTemplate ? this._itemTemplate : this._contentItemTemplate;
+  }
+  public set itemTemplate(v: TemplateRef<any>) {
+    this._itemTemplate = v;
+  }
+
+
+
+
+  @ContentChild('emptyTemplate', { static: true })
+  _contentEmptyTemplate: TemplateRef<any>;
+
+  private _emptyTemplate: TemplateRef<any>;
+  @Input()
+  public get emptyTemplate(): TemplateRef<any> {
+    return this._emptyTemplate ? this._emptyTemplate : this._contentEmptyTemplate;
+  }
+  public set emptyTemplate(v: TemplateRef<any>) {
+    this._emptyTemplate = v;
+  }
+
+
+  @ContentChild(AXToolbarSearchComponent, { static: true })
+  searchToolbar: AXToolbarSearchComponent;
+
+  @ContentChild(AXToolbarListViewComponent, { static: true })
+  viewToolbar: AXToolbarListViewComponent;
+
+  @ContentChild(AXToolbarComponent, { static: true })
+  toolbar: AXToolbarComponent;
+
+
+
+  @Output()
+  onDirectionChanged: EventEmitter<AXValueEvent<AXListViewDirection>> = new EventEmitter<AXValueEvent<AXListViewDirection>>();
+
+  private _direction: AXListViewDirection = "vertical";
+  @Input()
+  public get direction(): AXListViewDirection {
+    return this._direction;
+  }
+  public set direction(v: AXListViewDirection) {
+    if (this._direction != v) {
+      const old = this._direction;
+      this._direction = v;
+      this.setDirection(v);
+      this.onDirectionChanged.emit({
+        component: this,
+        value: v,
+        oldValue: old
+      });
+    }
+  }
+
+
+  ngAfterViewInit(): void {
+    this.fetch();
+    if (this.viewToolbar) {
+      this.viewToolbar.onDirectionChanged.subscribe(c => {
+        this.direction = c.value;
+      });
+    }
+  }
+
+  private setDirection(e: AXListViewDirection) {
+    this.direction = e;
+  }
+
+
+
+  // dragDrop(event: CdkDragDrop<any[]>) {
+  //   if (event.previousContainer === event.container) {
+  //     moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+  //   } else {
+  //     transferArrayItem(event.previousContainer.data,
+  //       event.container.data,
+  //       event.previousIndex,
+  //       event.currentIndex);
+  //   }
+  // }
+  dragDrop(event: any) {
+
+  }
+}

package/src/lib/data-list/list/list.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { AXListComponent } from './list.component';
+import { CommonModule } from '@angular/common';
+import { AXToolbarListViewComponent } from './toolbar-list-view.component';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { AXDataSourceModule } from '../../data-source/datasource.module';
+
+@NgModule({
+    declarations: [AXListComponent, AXToolbarListViewComponent],
+    imports: [CommonModule, AXDataSourceModule, DragDropModule],
+    exports: [AXListComponent, AXToolbarListViewComponent],
+    providers: [],
+})
+export class AXListModule { }

package/src/lib/data-list/list/toolbar-list-view.component.ts

@@ -0,0 +1,63 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { AXToolbarItem } from '../../toolbar/toolbar-item';
+import { AXValueEvent } from '../../base/events.class';
+
+export type AXListViewDirection = "vertical" | "vertical-wrap" | "horizontal-wrap" | "horizontal";
+
+@Component({
+    selector: 'ax-toolbar-list-view',
+    template: `
+    <div class="btn-group" role="group">
+        <button type="button" class="btn btn-light btn-sm" *ngIf="vertical" [class.active]="direction=='vertical'"   (click)="direction='vertical'" title="vertical">
+        <i class="far fa-bars"></i>
+        </button>
+        <button type="button" class="btn btn-light btn-sm"  *ngIf="verticalWrap" [class.active]="direction=='vertical-wrap'" (click)="direction='vertical-wrap'" title="vertical-wrap">
+        <i class="far fa-grip-horizontal"></i>
+        </button>
+        <button type="button" class="btn btn-light btn-sm"  *ngIf="horizontalWrap" [class.active]="direction=='horizontal-wrap'" title="horizontal-wrap'" (click)="direction='horizontal-wrap'" title="horizontal-wrap">
+        <i class="far fa-bars fa-rotate-90"></i>
+        </button>
+        <button type="button" class="btn btn-light btn-sm"  *ngIf="horizontal" [class.active]="direction=='horizontal'" (click)="direction='horizontal'" title="horizontal">
+        <i class="far fa-grip-horizontal fa-rotate-90"></i>
+        </button>
+    </div>
+    `,
+    providers: [{ provide: AXToolbarItem, useExisting: AXToolbarListViewComponent }]
+})
+export class AXToolbarListViewComponent {
+    constructor() { }
+
+    @Input('vertical')
+    vertical: boolean = true;
+
+    @Input('vertical-wrap')
+    verticalWrap: boolean = true;
+
+    @Input('horizontal-wrap')
+    horizontalWrap: boolean = true;
+
+    @Input('horizontal')
+    horizontal: boolean = true;
+
+
+    @Output()
+    onDirectionChanged: EventEmitter<AXValueEvent<AXListViewDirection>> = new EventEmitter<AXValueEvent<AXListViewDirection>>();
+
+    private _direction: AXListViewDirection = "vertical";
+    @Input()
+    public get direction(): AXListViewDirection {
+        return this._direction;
+    }
+    public set direction(v: AXListViewDirection) {
+        if (v != this._direction) {
+            const old = this._direction;
+            this._direction = v;
+            this.onDirectionChanged.emit({
+                component: this,
+                value: v,
+                oldValue: old
+            });
+        }
+    }
+
+}

package/src/lib/data-source/datasource.component.ts

@@ -0,0 +1,50 @@
+import { Component, ContentChild, EventEmitter, Input } from "@angular/core";
+import { AXDataSourceReadParams, AXDataSourceRead, AXDataSourceReceivedResult } from './read-param';
+import { AXBaseEvent, AXValueEvent } from '../base/events.class';
+import { AXDataEvent } from '../base/events.class';
+
+
+export class AXDataSourceReceivedEvent extends AXDataEvent<AXDataSourceReceivedResult>
+{
+
+}
+
+
+@Component({
+    selector: "ax-data-source",
+    template: "<ng-content></ng-content>"
+})
+export class AXDataSourceComponent {
+
+    onDataReceived: EventEmitter<AXDataSourceReceivedEvent> = new EventEmitter<AXDataSourceReceivedEvent>();
+    onFetchStart: EventEmitter<AXBaseEvent> = new EventEmitter<AXBaseEvent>();
+
+    @Input()
+    provideData: (params: AXDataSourceReadParams) => Promise<any>;
+
+    @Input()
+    params: any;
+
+    fetch(params: AXDataSourceReadParams) {
+        this.onFetchStart.emit({ component: this });
+        if (this.provideData) {
+            if (params === null) {
+                params = this.params === undefined ? null : this.params;
+            } else {
+                params.extra = this.params;
+            }
+
+            //
+            this.provideData(params).then(_data => {
+                const data: AXDataSourceReceivedResult = new AXDataSourceReceivedResult();
+                data.result = _data;
+                data.requestId = params == null ? null : params.requestId;
+                this.onDataReceived.emit({
+                    component: this,
+                    data: data
+                });
+            });
+        }
+    }
+
+}

package/src/lib/data-source/datasource.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { AXDataSourceComponent } from './datasource.component';
+import { AXHttpModule } from '@acorex/core';
+
+@NgModule({
+    declarations: [AXDataSourceComponent],
+    imports: [],
+    exports: [AXDataSourceComponent],
+    providers: [],
+})
+export class AXDataSourceModule { }

package/{lib/data-source/read-param.d.ts → src/lib/data-source/read-param.ts}

@@ -1,4 +1,7 @@
 import { EventEmitter } from '@angular/core';
+
+
+
 export interface AXSortParams {
     field?: string;
     sort?: 'asc' | 'desc';
@@ -6,15 +9,18 @@ export interface AXSortParams {
 export interface AXGroups {
     field?: string;
 }
+
 export interface AXFilterParams {
     field?: string;
     filters?: AXFilterConditionParams[];
 }
+
 export interface AXFilterConditionParams {
     dataType?: 'text' | 'number' | 'date';
     type?: 'contains' | 'equal' | 'notEqual';
     value?: any;
 }
+
 export interface AXDataSourceReadParams {
     skip?: number;
     take?: number;
@@ -25,16 +31,20 @@ export interface AXDataSourceReadParams {
     requestId?: any;
     extra?: any;
 }
-export declare class AXDataSourceReceivedResult {
+
+export class AXDataSourceReceivedResult {
     result?: any;
     requestId?: any;
 }
+
 export interface AXDataSourceGroupParams {
     parentData: any;
     keys: string[];
     fields: string[];
 }
-export declare abstract class AXDataSourceRead {
+
+
+export abstract class AXDataSourceRead {
     abstract fetch(params: AXDataSourceReadParams): void;
     abstract dataReceived: EventEmitter<any>;
-}
+}