@acorex/layout 4.2.0 → 4.2.1

package/src/lib/widget-board/widget-host.component.html

@@ -1,30 +0,0 @@
-<div class='widget-container'>
-    <div class="widget-config-overlay" *ngIf="!isConfigured" (click)="handleConfig($event)">
-        <div class="widget-title">{{config.title}}</div>
-        <div class="widget-config-box">
-            <div class="config-title">{{ 'widget-board.configure' | trans}}</div>
-            <div class="config-icon"><i class="fas fa-cogs fa-5x" aria-hidden="true"></i></div>
-        </div>
-    </div>
-    <div class='widget-edit-overlay'>
-        <div class='widget-edit-menu'>
-            <button class="widget-edit-menu-button" (click)="handleConfig($event)"
-                (mousedown)="$event.stopPropagation()" *ngIf="_hasProps" (mouseup)="$event.stopPropagation()">
-                <i class="far fa-cogs" aria-hidden="true"></i>
-            </button>
-            <button class="widget-edit-menu-button" (click)="remove($event)" (mousedown)="$event.stopPropagation()"
-                (mouseup)="$event.stopPropagation()">
-                <i class="far fa-times" aria-hidden="true"></i>
-            </button>
-        </div>
-
-    </div>
-    <div class="widget-options-menu"  *ngIf="_hasMenu">
-        <ax-menu [items]='configMenuItem' direction="horizontal"></ax-menu>
-    </div>
-    <!-- <ax-loading-panel [visible]="isBusy">
-    </ax-loading-panel> -->
-    <div class="widget-content">
-        <ng-container #vc></ng-container>
-    </div>
-</div>

package/src/lib/widget-board/widget-host.component.ts

@@ -1,343 +0,0 @@
-import {
-    Component,
-    ViewEncapsulation, Input,
-    ElementRef, HostBinding, ComponentFactoryResolver, ViewChild,
-    ViewContainerRef, Output, EventEmitter, ChangeDetectionStrategy,
-    ChangeDetectorRef, ComponentRef
-} from '@angular/core';
-import { AXWidgetConfig, AXWidgetComponent, AXWidgetConfigChanged, AXWidgetConfigSavedEvent } from './widget.class';
-import { AXObjectUtil, AXRenderService } from '@acorex/core';
-import { AXPopupService, AXPropertyDecorators, AXPropertyDecorator, AXLoadingService } from '@acorex/components';
-import { AXWidgetConfigComponent } from './widget-config.component';
-import { AXMenuItem } from '@acorex/core';
-import { AXTranslator } from '@acorex/core';
-import { AXWidgetSaveComponent } from './widget-save.component';
-
-
-
-
-
-@Component({
-    selector: 'ax-widget-host',
-    templateUrl: "./widget-host.component.html",
-    host: { class: 'ax widget-host', tabindex: '0' },
-    encapsulation: ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-
-export class AXWidgetHostComponent {
-
-    private _widget: AXWidgetComponent;
-    public get widget(): AXWidgetComponent {
-        return this._widget;
-    }
-
-    _hasProps: boolean = false;
-
-
-    _hasMenu: boolean = false;
-
-    @Input()
-    provideValue: (e: any) => any;
-
-
-    get element(): HTMLDivElement {
-        return this.ref.nativeElement;
-    }
-
-
-    configMenuItem: AXMenuItem[] = [
-        {
-            icon: 'far fa-ellipsis-h',
-            items: []
-        }
-    ];
-
-
-    @Output()
-    onRemove: EventEmitter<AXWidgetHostComponent> = new EventEmitter<AXWidgetHostComponent>();
-
-    @Output()
-    onConfigChanged: EventEmitter<AXWidgetConfigChanged> = new EventEmitter<AXWidgetConfigChanged>();
-
-
-    @Output()
-    onResized: EventEmitter<AXWidgetConfigChanged> = new EventEmitter<AXWidgetConfigChanged>();
-
-    @Output()
-    onSave: EventEmitter<AXWidgetConfigSavedEvent> = new EventEmitter<AXWidgetConfigSavedEvent>();
-
-    @Input()
-    config: AXWidgetConfig;
-
-    @ViewChild('vc', { read: ViewContainerRef })
-    vc: ViewContainerRef;
-
-    private componentRef: ComponentRef<any>;
-    //private isLoading: boolean = true;
-
-    // get isBusy() {
-    //     return this._widget?.isBusy || this.isLoading;
-    // }
-
-
-    private _loadingId: number;
-
-    private _isLoading: boolean = false;
-    public get isLoading(): boolean {
-        return this._isLoading;
-    }
-    public set isLoading(v: boolean) {
-        this._isLoading = v;
-        if (this._loadingId && !v) {
-            this.loadingService.hide(this._loadingId);
-            this._loadingId = null;
-        }
-        if (v) {
-            this._loadingId = this.loadingService.show(this.ref.nativeElement);
-        }
-    }
-
-
-    get isConfigured(): boolean {
-        return this._widget?.isConfigured || false;
-    }
-
-
-    constructor(
-        private ref: ElementRef<HTMLDivElement>,
-        private componentFactoryResolver: ComponentFactoryResolver,
-        private rendererService: AXRenderService,
-        private cdr: ChangeDetectorRef,
-        private popup: AXPopupService,
-        private loadingService: AXLoadingService
-
-    ) {
-
-    }
-
-
-    ngOnInit() {
-        this.isLoading = true;
-    }
-
-
-    async ngAfterViewInit() {
-        let component: any;
-        if (typeof this.config.component === 'string') {
-            const route = await this.rendererService.findLoadedComponentByRoute(this.config.component, 20);
-            component = route?.component;
-        }
-        else if (typeof this.config.component === 'function') {
-            component = this.config.component;
-        }
-        if (component == null) {
-            console.error(`Invalid Widget Component!`, this.config);
-            this.onRemove.emit(this);
-            return;
-        }
-
-        const widgetFactory = this.componentFactoryResolver.resolveComponentFactory(component);
-        this.componentRef = this.vc.createComponent(widgetFactory);
-        this._widget = this.componentRef.instance as AXWidgetComponent;
-        this._widget.provideValue = this.provideValue;
-        if (this._widget.onBusyChanged) {
-            this._widget.onBusyChanged.subscribe((d) => {
-                if (!this._widget.widgetSize) {
-                    this._widget.setValue('widgetSize', [this.sizeX, this.sizeY]);
-                }
-                else {
-                    this.setSizeFromOptions();
-                }
-                this.isLoading = d.value;
-                this.cdr.detectChanges();
-            });
-        }
-        if (this._widget.onConfiguredChanged) {
-            this._widget.onConfiguredChanged.subscribe(() => {
-                this.setSizeFromOptions();
-            });
-        }
-        //
-        if (this.config.options) {
-            Object.assign(this._widget, this.config.options);
-        }
-        this._hasProps = AXPropertyDecorators.getProperties(this._widget).length > 0;
-
-        this.isLoading = false;
-        this.config['__meta__'].instance = this;
-        this._widget['__meta__'] = {};
-        this._widget['__meta__'].config = this.config;
-        //
-        this.configMenuItem[0].items.push({
-            name: 'refresh',
-            icon: 'far fa-undo',
-            text: AXTranslator.get('common.refresh'),
-            onClick: () => {
-                this?.widget?.refresh();
-            }
-        });
-        //
-        if (this._hasProps) {
-            this.configMenuItem[0].items.push({
-                name: 'configs',
-                icon: 'far fa-cogs',
-                text: AXTranslator.get('common.configs'),
-                onClick: () => {
-                    this.openConfigDialog();
-                }
-            });
-        }
-        this.configMenuItem[0].items.push({
-            name: 'save',
-            icon: 'far fa-save',
-            text: AXTranslator.get('common.save-as'),
-            onClick: () => {
-                this.openSaveDialog();
-            }
-        });
-        if (true) {
-            this.configMenuItem[0].items.push({
-                name: 'remove',
-                icon: 'far fa-times',
-                style: 'ax danger blank',
-                text: AXTranslator.get('common.remove'),
-                onClick: () => {
-                    this.onRemove.emit(this);
-                }
-            });
-        }
-        this._hasMenu = this.configMenuItem[0].items.length > 0;
-        this.cdr.detectChanges();
-    }
-
-    @HostBinding('attr.data-size-x')
-    @Input()
-    sizeX: number = 1;
-
-    @HostBinding('attr.data-size-y')
-    @Input()
-    sizeY: number = 1;
-
-    @HostBinding('attr.data-col')
-    @Input()
-    col: number = 1;
-
-
-    @HostBinding('attr.data-row')
-    @Input()
-    row: number = 1;
-
-
-    private setSizeFromOptions() {
-        this._widget.getValue('widgetSize').then(c => {
-            const oldSizeX = this.sizeX;
-            const oldSizeY = this.sizeY;
-            if (c && Array.isArray(c) && (oldSizeX !== c[0] || oldSizeY !== c[1])) {
-                this.config.sizeX = this.sizeX = c[0];
-                this.config.sizeY = this.sizeY = c[1];
-                this.onResized.emit({
-                    component: this._widget,
-                    config: this.config
-                });
-            }
-            this.cdr.detectChanges();
-        });
-    }
-
-    remove(e: MouseEvent) {
-        e.preventDefault();
-        e.stopPropagation();
-        this.onRemove.emit(this);
-        return false;
-    }
-
-    handleConfig(e: MouseEvent) {
-        e.preventDefault();
-        e.stopPropagation();
-        this.openConfigDialog();
-        return false;
-    }
-
-    private openConfigDialog() {
-        const ppp = this.getMergedProps();
-        this.popup.open(AXWidgetConfigComponent, {
-            title: AXTranslator.get('common.configs'),
-            size: 'sm',
-            data: {
-                props: ppp.map(c => ({ property: c.options, value: this._widget[c.options.name] })),
-                widget: this.widget
-            }
-        }).then(c => {
-            if (c.data) {
-                if (!this.config.options) {
-                    this.config.options = {};
-                }
-                c.data.forEach(p => {
-                    this._widget.setValue(p.property.name, p.value);
-                    this.config.options[p.property.name] = p.value;
-                });
-                this.emitConfigChanged();
-                this._widget.redraw();
-                this.cdr.detectChanges();
-            }
-        });
-    }
-
-    private openSaveDialog() {
-        const ppp = this.getMergedProps();
-        this.popup.open(AXWidgetSaveComponent, {
-            title: AXTranslator.get('common.save-as'),
-            size: 'sm',
-            data: {
-                config: this.config,
-                props: ppp.map(c => ({ property: c.options, value: this._widget[c.options.name] }))
-            }
-        }).then(c => {
-            if (c.data) {
-                this.onSave.emit({
-                    component: this._widget,
-                    data: c.data
-                });
-            }
-        });
-    }
-
-
-
-    handleOptionClick(e: MouseEvent) {
-        e.preventDefault();
-        e.stopPropagation();
-        this.openConfigDialog();
-        return false;
-    }
-
-    ngOnDestroy() {
-        this.vc.clear();
-        if (this.componentRef) {
-            this.componentRef.destroy();
-        }
-    }
-
-    private getMergedProps(): AXPropertyDecorator[] {
-        const ppp = AXObjectUtil.deepCopy(AXPropertyDecorators.getProperties(this._widget)) as AXPropertyDecorator[];
-        for (const key in this.config.props) {
-            if (Object.prototype.hasOwnProperty.call(this.config.props, key)) {
-                const newP = this.config.props[key];
-                const existPropDec = ppp.find(p => p.property === key);
-                if (existPropDec) {
-                    Object.assign(existPropDec.options, newP);
-                }
-            }
-        }
-        return ppp;
-    }
-
-    private emitConfigChanged() {
-        this.onConfigChanged.emit({
-            component: this._widget,
-            config: this.config
-        });
-    }
-
-}

package/src/lib/widget-board/widget-save.component.html

@@ -1,43 +0,0 @@
-<ax-page>
-    <ax-page-content>
-        <div class="container">
-            <div class="row">
-                <div class="col-12">
-                    <ax-form-group>
-                        <ax-label>{{'common.title' | trans}}</ax-label>
-                        <ax-text-box [(value)]="data.title"></ax-text-box>
-                    </ax-form-group>
-                </div>
-            </div>
-            <div class="row">
-                <div class="col-12">
-                    <ax-form-group>
-                        <ax-label>{{'common.description' | trans}}</ax-label>
-                        <ax-text-area [(value)]="data.description"></ax-text-area>
-                    </ax-form-group>
-                </div>
-            </div>
-            <!-- <div class="row">
-                <div class="col-12">
-                    <ax-form-group>
-                        <ax-label>{{'common.uniquename' | trans}}</ax-label>
-                        <ax-text-box></ax-text-box>
-                    </ax-form-group>
-                </div>
-            </div> -->
-            <div class="row" style="margin-block-end: var(--ax-size-md);margin-block-start: var(--ax-size-md);">
-                <div class="col-12">
-                    <ax-fieldset caption="{{'widget-board.configurable-props' | trans}}">
-                        <div class="row" *ngFor="let prop of displayProps">
-                            <div class="col-12" style="margin-block-end: var(--ax-size-sm)">
-                                <ax-check-box [(value)]="prop.allow" label="{{ prop.title | trans }}">
-
-                                </ax-check-box>
-                            </div>
-                        </div>
-                    </ax-fieldset>
-                </div>
-            </div>
-        </div>
-    </ax-page-content>
-</ax-page>

package/src/lib/widget-board/widget-save.component.ts

@@ -1,88 +0,0 @@
-import {
-    Component,
-    ViewEncapsulation,
-    ChangeDetectionStrategy,
-
-} from '@angular/core';
-import { AXWidgetConfig, AXWidgetSaveAsData } from './widget.class';
-import { AXButtonItem, AXHtmlUtil, AXObjectUtil, AXTranslator } from '@acorex/core';
-import { AXPropertyConfig, AXMenuItemClickEvent, AXBasePopupPageComponent } from '@acorex/components';
-
-
-
-@Component({
-    templateUrl: "./widget-save.component.html",
-    encapsulation: ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class AXWidgetSaveComponent extends AXBasePopupPageComponent {
-    config: AXWidgetConfig;
-    props: AXPropertyConfig[] = [];
-    displayProps: { name: string, title: string, allow: boolean }[];
-
-    data: AXWidgetSaveAsData;
-
-    getFooterButtons(): AXButtonItem[] {
-        return [
-            {
-                name: 'okay',
-                submitBehavior: true,
-                text: AXTranslator.get('common.confirm'),
-                style: 'ax success'
-            },
-            {
-                name: 'cancel',
-                cancelBehavior: true,
-                text: AXTranslator.get('common.cancel'),
-                style: 'ax light'
-            }
-        ];
-    }
-
-    ngOnInit() {
-        const titleProp = this.props.find(c => c.property.name === 'title' || c.property.name === 'name');
-        const title = titleProp?.value || this.config.title;
-        const pp: any = {};
-        this.props?.forEach(c => {
-            pp[c.property.name] = c.property;
-        });
-        this.data = {
-            component: this.config.component,
-            title,
-            uniqueName: `${this.config.uniqueName}-${AXHtmlUtil.getUID()}`,
-            options: AXObjectUtil.deepJSONClone(this.config.options),
-            props: AXObjectUtil.deepJSONClone(pp)
-        };
-        this.displayProps = this.props
-            .filter(c => c.property.visible !== false)
-            .sort((a, b) => a.property.order - b.property.order)
-            .map(c => ({
-                name: c.property.name,
-                title: c.property.title,
-                allow: true
-            }));
-    }
-
-
-
-    onFooterButtonClick(e: AXMenuItemClickEvent) {
-        if (e.name === 'cancel') {
-            this.close();
-        }
-        if (e.name === 'okay') {
-            this.props.forEach(p => {
-                const pp = this.displayProps.find(c => c.name === p.property.name);
-                if (pp == null || !pp.allow) {
-                    let ppp = this.data.props[p.property.name];
-                    if (ppp) {
-                        ppp.visible = false;
-                    }
-                    else {
-                        ppp = { visible: false };
-                    }
-                }
-            });
-            this.close(this.data);
-        }
-    }
-}

package/src/lib/widget-board/widget.class.ts

@@ -1,178 +0,0 @@
-import { EventEmitter, Injectable } from '@angular/core';
-import { AXValueEvent, AXBaseEvent, propertyEditor, AXDataEvent } from '@acorex/components';
-import { AXHtmlUtil, AXTranslator } from '@acorex/core';
-
-export interface AXWidgetConfig {
-    uniqueName: string;
-    component: any;
-    title: string;
-    sizeX: number;
-    sizeY: number;
-    col?: number;
-    row?: number;
-    options?: any;
-    props?: any;
-}
-
-export interface AXWidgetConfigChanged extends AXBaseEvent {
-    config: AXWidgetConfig;
-}
-
-
-
-export interface AXWidgetBoardConfigChanged extends AXBaseEvent {
-
-}
-
-export interface AXWidgetConfigSavedEvent extends AXDataEvent<AXWidgetSaveAsData> {
-
-}
-
-
-export interface AXWidgetSaveAsData {
-    title?: string;
-    description?: string;
-    icon?: string;
-    group?: string;
-    //
-    uniqueName: string;
-    component: any;
-    options?: any;
-    props?: any;
-}
-
-// @dynamic
-// TODO: Add Angular decorator.
-@Injectable()
-export abstract class AXWidgetComponent {
-
-    readonly uid: string = AXHtmlUtil.getUID();
-    provideValue: (e: any) => any;
-
-    onBusyChanged: EventEmitter<AXValueEvent<boolean>> = new EventEmitter<AXValueEvent<boolean>>();
-
-    private _isBusy: boolean = true;
-    public get isBusy(): boolean {
-        return this._isBusy;
-    }
-    public set isBusy(v: boolean) {
-        if (v !== this._isBusy) {
-            const eventData: AXValueEvent<boolean> = {
-                component: this,
-                oldValue: this._isBusy,
-                value: v
-            };
-            this._isBusy = v;
-            this.onBusyChanged.emit(eventData);
-        }
-    }
-
-    @propertyEditor({
-        editorClass: 'ax/editors/widget-size',
-        title: 'common.size',
-        visible: false,
-        order: -99,
-    })
-    widgetSize: number[];
-
-    @propertyEditor({
-        editorClass: 'ax/editors/select',
-        title: 'common.refresh-rate',
-        visible: true,
-        order: -98,
-        editorOptions: {
-            items: () => {
-                return [1, 2, 3, 5, 10, 20, 30, 60].map(c => ({
-                    id: 60000 * c,
-                    text: AXTranslator.get('dateTime.duration.format_minute').replace('{0}', c.toString())
-                }));
-            },
-            allowNull: false,
-            allowSearch: false,
-            selectionDataMode: 'value',
-            selectionMode: 'single',
-            valueField: 'id',
-        }
-    })
-    refreshRate: any = [{
-        id: 60000 * 5,
-        text: AXTranslator.get('dateTime.duration.format_minute').replace('{0}', '5')
-    }];
-
-    // ???
-    getRefreshRate() {
-        return Array.isArray(this.refreshRate) && this.refreshRate.length ? this.refreshRate[0].id : this.refreshRate;
-    }
-
-    private intervalId: number;
-
-    constructor() {
-        this.onConfiguredChanged.subscribe(() => {
-            if (this.isConfigured === true && this.getRefreshRate()) {
-                this.restartRefreshTimer();
-            }
-            else {
-                this.stopRefreshTimer();
-            }
-        });
-    }
-
-
-    private startRefreshTimer() {
-        this.intervalId = window.setInterval(this.refresh.bind(this), this.getRefreshRate());
-    }
-
-    private stopRefreshTimer() {
-        window.clearInterval(this.intervalId);
-    }
-
-    private restartRefreshTimer() {
-        this.stopRefreshTimer();
-        this.startRefreshTimer();
-    }
-
-    ngOnDestroy() {
-        this.stopRefreshTimer();
-    }
-
-    public redraw() {
-
-    }
-
-    public refresh() {
-        this.restartRefreshTimer();
-    }
-
-    onConfiguredChanged: EventEmitter<void> = new EventEmitter<void>();
-
-    get isConfigured(): boolean {
-        return true;
-    }
-
-    public setValue(name: string, value?: any) {
-        this[name] = value;
-        this.onConfiguredChanged.emit();
-    }
-
-    public getValue(name: string): Promise<any> {
-        const val = this[name];
-        const config = this['__meta__'].config;
-        const runtime = config.props[name]?.runtime;
-        if (runtime && this.provideValue) {
-            const res = this.provideValue({
-                name,
-                value: val,
-                uniqueName: config.uniqueName,
-                options: config.options,
-            });
-            if (this.provideValue instanceof Promise) {
-                return res;
-            }
-            else {
-                return Promise.resolve(res);
-            }
-        }
-        return Promise.resolve(val);
-    }
-
-}