@acorex/components 6.5.27 → 6.5.29

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

@@ -1,143 +0,0 @@
-.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

@@ -1,266 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,5 +0,0 @@
-<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

@@ -1,17 +0,0 @@
-.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;
-        }
-    }
-}