@acorex/components 6.5.26 → 6.5.28

package/src/lib/data-filter/filter-panel/filter-panel.component.scss

@@ -0,0 +1,143 @@
+.ax-filter-panel {
+    padding: 2px;
+    position: relative;
+    height: 100%;
+    font-size: var(--font-md-size);
+
+    .empty-list {
+        text-align: center;
+        padding: var(--sp-sm-size);
+        color: var(--gray)
+    }
+
+    .saved-list {
+        border-bottom: 1px solid var(--border-color);
+
+        .list {
+            ul {
+
+                list-style-type: none;
+                display: flex;
+                flex-direction: column;
+                padding: 0px;
+                margin-bottom: var(--sp-md-size);
+
+                li {
+
+
+                    .item-line {
+                        cursor: pointer;
+                        display: flex;
+                        flex-direction: row;
+                        justify-content: space-between;
+
+                        .title {
+                            i {
+                                opacity: 0.1;
+                            }
+                        }
+
+                        .tools {
+
+                            display: inline;
+
+                            i {
+                                opacity: 0.2;
+                                cursor: pointer;
+                                &:hover {
+                                    opacity: 1;
+                                }
+                            }
+                        }
+
+                        &.selected {
+                            font-weight: bold;
+                            .title {
+                                i {
+                                    opacity: 1;
+                                }
+                            }
+                        }
+
+
+                    }
+                }
+            }
+        }
+    }
+
+    .body {
+        .form-inline {
+            justify-content: space-between
+        }
+
+        overflow-y: auto;
+        overflow-x: hidden;
+        height: calc(100% - 150px);
+    }
+
+    .group-header {
+        background: var(--white-color);
+        display: flex;
+        align-items: center;
+        padding: var(--sp-sm-size) var(--sp-md-size);
+        border-bottom: 1px solid var(--border-color);
+        background: var(--gray-dark-color);
+        color: var(--gray-dark);
+
+        i {
+            margin-right: var(--sp-sm-size)
+        }
+    }
+
+    .ax-filter-item-header {
+        height: var(--el-md-size);
+        display: flex;
+        align-items: center;
+    }
+
+    .footer {
+        width: 100%;
+
+        position: absolute;
+        background-color: var(--white-color);
+        bottom: 0;
+        padding: var(--sp-sm-size);
+        border-top: 1px solid var(--border-color);
+
+        .filter-panel {
+            display: flex;
+            align-items: center;
+
+            ax-button {
+                margin: 0 2px;
+            }
+        }
+
+        .save-panel {}
+    }
+
+    .ax-filter-section {
+        padding: var(--sp-md-size) var(--sp-lg-size);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        >div {
+            flex: 1
+        }
+    }
+
+    .ax-filter-section-value {
+        padding: 0px var(--sp-md-size) var(--sp-md-size) var(--sp-md-size);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        &>* {
+            margin: 0px 3px;
+        }
+    }
+
+
+}

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

@@ -0,0 +1,266 @@
+import { Component, Input, ViewChild, ViewChildren, QueryList, ViewEncapsulation, ChangeDetectionStrategy, Output, EventEmitter, ChangeDetectorRef, ElementRef, ViewContainerRef } from '@angular/core';
+import { AXFilterColumnGroup, AXFilterColumnComponent, AXFilterCondition, AXFilterPredefined } from '../filter.class';
+import { AXMenuItem, AXHtmlUtil, AXKeyboardEvent } from '@acorex/core';
+import { AXMenuComponent } from '../../menu/menu.component';
+import { AXTextBoxComponent } from '../../textbox/textbox.component';
+import { AXToastService } from '../../toast/toast.service';
+import { AXValueEvent } from '../../base/events.class';
+
+
+
+
+@Component({
+    selector: 'ax-filter-panel',
+    templateUrl: './filter-panel.component.html',
+    styleUrls: ['./filter-panel.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AXFilterPanelComponent {
+
+    @ViewChild('panel', { static: true }) panel: ElementRef<HTMLDivElement>;
+    @ViewChild('footer', { static: true }) footer: ElementRef<HTMLDivElement>;
+    @ViewChild('savedList', { static: true }) savedList: ElementRef<HTMLDivElement>;
+    @ViewChild('body', { static: true }) body: ElementRef<HTMLDivElement>;
+    @ViewChild('menu', { static: false }) menu: AXMenuComponent;
+    @ViewChild('tbxName', { static: true }) tbxName: AXTextBoxComponent;
+
+    @ViewChildren(AXFilterColumnComponent) filters: QueryList<AXFilterColumnComponent>;
+
+    @Input()
+    groups: AXFilterColumnGroup[] = [];
+
+    @Input()
+    predefinedFilters: AXFilterPredefined[] = [];
+
+    @Input()
+    mode: 'click' | 'immediate' = 'click';
+
+    saveItems: AXMenuItem[] = [
+        {
+            name: 'saveAs',
+            text: 'Save',
+            startIcon: 'fas fa-save',
+            items: [
+                {
+                    name: 'save',
+                    text: 'Save current'
+                },
+                {
+                    name: 'saveAs',
+                    text: 'Save as New'
+                }
+            ]
+        },
+
+    ];
+
+    @Output()
+    filterChange: EventEmitter<AXFilterCondition[]> = new EventEmitter<AXFilterCondition[]>();
+
+    constructor(private cdr: ChangeDetectorRef, private toast: AXToastService) { }
+
+    apply() {
+        this.filterChange.emit(this.value);
+        this.updateMenu();
+    }
+
+    public clear() {
+        this.filters.forEach(e => {
+            e.clear();
+        });
+        this.predefinedFilters.forEach(c => {
+            (c as any).selected = false;
+        });
+        this.filterChange.emit(this.value);
+        this.updateMenu();
+    }
+
+    onValueChange(e) {
+        if (this.mode === 'immediate') {
+            setTimeout(() => {
+                this.filterChange.emit(this.value);
+                this.updateMenu();
+            }, 50);
+
+        }
+    }
+
+    onCheckValueChange(v, e: AXValueEvent<boolean>) {
+
+
+        if (!e.value && this.mode === 'immediate') {
+            this.filters.forEach(c => {
+                if (c.field === v.field) {
+                    c.clear();
+                }
+            })
+            setTimeout(() => {
+                this.filterChange.emit(this.value.filter(c => c.field !== v.field));
+                this.updateMenu();
+            }, 50);
+
+        }
+    }
+
+    get value(): AXFilterCondition[] {
+        const con: AXFilterCondition[] = [];
+        if (this.filters) {
+            this.filters.forEach(e => {
+
+                if (e.active && e.condition && ((e.condition.value != null) || (e.condition.value == null && (e.condition.condition === 'is-empty' || e.condition.condition === 'is-not-empty')))) {
+                    con.push(e.condition);
+                }
+            });
+        }
+        return con;
+    }
+
+
+
+    public load(filters: AXFilterCondition[]): void {
+        this.filters.forEach(e => {
+            e.clear();
+        });
+        this.cancelSaveFilter();
+        filters.forEach(f => {
+            const col = this.filters.find(c => c.field === f.field);
+            if (col) {
+                col.setFilter(f.value, f.condition);
+            }
+
+        });
+        this.filterChange.emit(this.value);
+        this.updateMenu();
+    }
+
+    ngAfterViewInit(): void {
+        const footer = this.panel.nativeElement.querySelector('.footer');
+        if (!footer) {
+            this.body.nativeElement.style.height = 'calc(100% - 110px)';
+        }
+        setTimeout(() => {
+            if (this.predefinedFilters) {
+                this.setFilterByIndex(0);
+            }
+            else {
+                this.clear();
+            }
+        }, 100);
+        this.applySize();
+    }
+
+    setFilterByIndex(index: number) {
+        const f = this.predefinedFilters[index];
+        if (f) {
+            this.setFilterByName(f.name);
+        }
+    }
+
+    setFilterByName(name: string) {
+        const f = this.predefinedFilters.find(c => c.name === name);
+        if (f) {
+            this.load(f.value);
+            this.predefinedFilters.forEach(c => {
+                (c as any).selected = false;
+            });
+            (f as any).selected = true;
+        }
+    }
+
+
+
+    removeFilter(f: AXFilterPredefined) {
+        this.predefinedFilters = this.predefinedFilters.filter(c => c.name != f.name);
+        this.updateMenu();
+    }
+
+    private get
+        currentFilter(): AXFilterPredefined {
+        return this.predefinedFilters.find(c => (c as any).selected);
+    }
+
+
+    private applySize() {
+        let h = 0;
+        h += this.footer.nativeElement.getBoundingClientRect().height;
+        h += this.savedList.nativeElement.getBoundingClientRect().height;
+        h += 10;
+        this.body.nativeElement.style.height = `calc(100% - ${h}px)`;
+    }
+
+    // SAVE FILTERS
+
+    private updateMenu(): void {
+        setTimeout(() => {
+            this.saveItems[0].items[0].visible = this.currentFilter != null;
+            this.saveItems[0].items[1].visible = this.currentFilter != null;
+            // this.menu.update();
+        }, 100);
+    }
+
+    applySaveFilter() {
+        const f = this.currentFilter;
+        if (f) {
+            // TODO
+            // this.tbxName.validate().then(c => {
+            //     if (c.result) {
+            //         f.value = this.value;
+            //         (f as any).isInEdit = false;
+            //         (f as any).isNew = false;
+            //         f.title = this.tbxName.value;
+            //         this.toast.success('Filter saved successfully.');
+            //         this.updateMenu();
+            //     }
+            // });
+        }
+    }
+
+    cancelSaveFilter() {
+        const f = this.currentFilter;
+        if (f) {
+            if ((f as any).isNew) {
+                this.removeFilter(f);
+            }
+            else {
+                (f as any).isInEdit = false;
+            }
+        }
+        this.updateMenu();
+    }
+
+    onMenuItemClick(e: AXMenuItem) {
+        if (e.name === 'save') {
+            this.applySaveFilter();
+        }
+        if (e.name === 'saveAs') {
+            const f = {
+                name: AXHtmlUtil.getUID(),
+                title: '',
+                value: this.value
+            };
+            this.predefinedFilters.push(f);
+            (f as any).isNew = true;
+            this.setFilterByName(f.name);
+            this.handleRenameClick(f)
+        }
+    }
+
+    tbxNameOnKey(e: AXKeyboardEvent) {
+        if (e.type === 'keyup' && e.key === 'Enter') {
+            this.applySaveFilter();
+        }
+        if (e.type === 'keyup' && e.key === 'Escape') {
+            this.cancelSaveFilter();
+        }
+    }
+
+    handleRenameClick(f: AXFilterPredefined) {
+        (f as any).isInEdit = true;
+        this.cdr.detectChanges();
+        setTimeout(() => {
+            this.tbxName.value = f.title;
+            this.tbxName.focus();
+        }, 50);
+    }
+}

package/src/lib/data-filter/filter.class.ts

@@ -0,0 +1,73 @@
+import { Input, ChangeDetectorRef, EventEmitter, Output, Directive } from '@angular/core';
+
+export interface AXFilterColumn {
+    field: string;
+    caption: string;
+    type?: 'text' | 'selection' | 'date' | 'number';
+    options?: any;
+}
+
+export interface AXFilterColumnGroup {
+    caption?: string;
+    columns: AXFilterColumn[];
+}
+
+export interface AXFilterCondition {
+    field: string;
+    condition: string;
+    dataType: 'string' | 'date' | 'datetime' | 'time' | 'number';
+    value: any;
+}
+
+export interface AXFilterPredefined {
+    name: string;
+    title: string;
+    value: AXFilterCondition[];
+}
+
+@Directive()
+export abstract class AXFilterColumnComponent {
+
+    constructor(protected cdr: ChangeDetectorRef) {
+
+    }
+    operator: string = 'equal';
+    value: any = null;
+    @Input()
+    field: string = null;
+
+    @Output()
+    valueChange: EventEmitter<void> = new EventEmitter<void>();
+
+
+    @Output()
+    activeChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+    private _active: boolean;
+    @Input()
+    public get active(): boolean {
+        return this._active;
+    }
+    public set active(v: boolean) {
+        this._active = v;
+        this.activeChange.emit(v);
+    }
+
+
+    abstract get condition(): AXFilterCondition;
+
+    clear() {
+        this.active = false;
+        this.value = null;
+        this.cdr.detectChanges();
+    }
+
+    setFilter(value: any, operator: string) {
+        this.active = true;
+        this.operator = operator;
+        this.value = value;
+        this.cdr.detectChanges();
+    }
+}
+
+

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

@@ -0,0 +1,52 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXFilterPanelComponent } from './filter-panel/filter-panel.component';
+import { AXFilterColumnStringComponent } from './columns/filter-column-string.component';
+import { FormsModule } from '@angular/forms';
+import { AXFilterColumnSelectionComponent } from './columns/filter-column-selection.component';
+import { AXFilterColumnDateComponent } from './columns/filter-column-date.component';
+import { AXFilterColumnNumberComponent } from './columns/filter-column-number.component';
+import { AXToolbarFilterViewComponent } from './toolbar/filter-toolbar.component';
+import { AXPanelBoxModule } from '../panel-box/panel-box.module';
+import { AXDatePickerModule } from '../date-picker/date-picker.module';
+import { AXCheckBoxModule } from '../checkbox/checkbox.module';
+import { AXTextBoxModule } from '../textbox/textbox.module';
+import { AXToastModule } from '../toast/toast.module';
+import { AXToolbarModule } from '../toolbar/toolbar.module';
+import { AXMenuModule } from '../menu/menu.module';
+import { AXSelectionListModule } from '../selection-list/selection-list.module';
+import { AXButtonModule } from '../button/button.module';
+import { AXValidationModule } from '../validation/validation.module';
+
+
+
+
+const COMPONENTS = [
+    AXFilterPanelComponent,
+    AXFilterColumnStringComponent,
+    AXFilterColumnSelectionComponent,
+    AXFilterColumnDateComponent,
+    AXFilterColumnNumberComponent,
+    AXToolbarFilterViewComponent,
+]
+
+@NgModule({
+    declarations: [COMPONENTS],
+    imports: [
+        CommonModule,
+        FormsModule,
+        AXPanelBoxModule,
+        AXDatePickerModule,
+        AXCheckBoxModule,
+        AXTextBoxModule,
+        AXValidationModule,
+        AXToastModule,
+        AXToolbarModule,
+        AXMenuModule,
+        AXSelectionListModule,
+        AXButtonModule
+    ],
+    exports: [COMPONENTS],
+    providers: [],
+})
+export class AXFilterModule { }

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

@@ -0,0 +1,5 @@
+<ax-toolbar-menu [items]="menuItems" (onItemClick)="itemClick($event)" #menu >
+   
+</ax-toolbar-menu>
+<ax-menu target=".{{_uid}}" [items]="contextMenuItems"  direction="vertical"  #contextMenu (onItemClick)="onCtxClick($event)">
+</ax-menu>

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

@@ -0,0 +1,17 @@
+.ax-toolbar-menu-item
+{
+    .icon-remove
+    {
+        visibility:hidden;
+        color:var(--danger-color);
+        margin-inline-start: 25px;
+        font-size: var(--font-sm-size);
+    }
+
+    &:hover{
+        & > .icon-remove
+        {
+            visibility:unset;
+        }
+    }
+}