@acorex/layout 4.1.4 → 4.2.0

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

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

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

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

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

@@ -0,0 +1,178 @@
+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);
+    }
+
+}