@acorex/components 4.1.6 → 4.2.0

package/src/lib/property-editor/editors/range-editor/range.editor.ts

@@ -0,0 +1,153 @@
+import { Component,  ChangeDetectorRef, ViewChild, TemplateRef, ChangeDetectionStrategy, ElementRef } from '@angular/core';
+import { AXTranslator } from '@acorex/core';
+import { AXProperyEditorComponent } from '../../property-editor.class';
+import { AXPopupService } from '../../../popup/popup.service';
+import { AXValidationFormComponent } from '../../../validation/validation-form.component';
+
+
+export interface AXRangeModel {
+    title: string;
+    color?: string;
+    minValue: number;
+    maxValue: number;
+}
+
+
+
+@Component({
+    templateUrl: './range.editor.html',
+    styleUrls: ['./range.editor.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AXRangePropertyEditorComponent extends AXProperyEditorComponent<AXRangeModel[]>  {
+
+
+    private form: AXValidationFormComponent;
+
+    @ViewChild('tplEdit')
+    tplEdit: TemplateRef<any>;
+
+    ranges: AXRangeModel[] = [];
+
+    editRow: AXRangeModel;
+
+    showSeparator: boolean = true;
+    decimalNumber: number = 2;
+
+    constructor(protected cdr: ChangeDetectorRef, private popupService: AXPopupService) {
+        super(cdr);
+    }
+
+
+    ngOnInit() {
+        this.ranges = this.value ? JSON.parse(JSON.stringify(this.value)) : [];
+        this.cdr.detectChanges();
+    }
+
+
+    ngAfterViewInit() {
+        this.onRenderCompleted.emit();
+    }
+
+    // getRanges() {
+    //     return this.ranges.sort((a, b) => a.minValue - b.minValue);
+    // }
+
+    onFormInit(e) {
+        this.form = e.component;
+    }
+
+
+    handleEditClick(item: AXRangeModel) {
+        this.editRow = Object.assign({}, item);
+        const popup = this.popupService.open(this.tplEdit, {
+            size: 'sm',
+            footerButtons: [
+                {
+                    name: 'confirm',
+                    text: AXTranslator.get('common.confirm'),
+                    style: 'success',
+                    submitBehavior: true,
+                    cancelBehavior: false,
+                    onClick: () => {
+                        this.form.validate().then(c => {
+                            if (c.result) {
+                                super.handleValueChange(this.ranges);
+                                Object.assign(item, this.editRow);
+                                popup.close();
+                                this.editRow = null;
+                                this.cdr.detectChanges();
+                            }
+                        });
+                    }
+                },
+                {
+                    name: 'cancel',
+                    text: AXTranslator.get('common.cancel'),
+                    style: 'danger blank',
+                    submitBehavior: false,
+                    cancelBehavior: true,
+                    onClick: () => {
+                        popup.close();
+                        this.editRow = null;
+                        this.cdr.detectChanges();
+                    }
+                }
+            ],
+            title: AXTranslator.get('common.edit')
+        });
+    }
+
+    handleAddClick() {
+        const min = this.ranges?.length ? Math.max(...this.ranges.map(c => c.maxValue)) : 0;
+        this.editRow = {
+            title: '',
+            minValue: min,
+            maxValue: min + 1,
+            color: null
+        };
+        const popup = this.popupService.open(this.tplEdit, {
+            title: AXTranslator.get('common.add-item'),
+            size: 'sm',
+            footerButtons: [
+                {
+                    name: 'confirm',
+                    text: AXTranslator.get('common.confirm'),
+                    style: 'success',
+                    submitBehavior: true,
+                    cancelBehavior: false,
+                    onClick: () => {
+                        this.form.validate().then(c => {
+                            if (c.result) {
+                                super.handleValueChange(this.ranges);
+                                this.ranges.push(this.editRow);
+                                popup.close();
+                                this.editRow = null;
+                                this.cdr.detectChanges();
+                            }
+                        });
+                    }
+                },
+                {
+                    name: 'cancel',
+                    text: AXTranslator.get('common.cancel'),
+                    style: 'danger blank',
+                    submitBehavior: false,
+                    cancelBehavior: true,
+                    onClick: () => {
+                        popup.close();
+                        this.editRow = null;
+                        this.cdr.detectChanges();
+                    }
+                }
+            ],
+        });
+        this.cdr.detectChanges();
+    }
+
+    handleRemoveClick(item: AXRangeModel) {
+        this.ranges = this.ranges.filter(c => c.minValue !== item.minValue);
+        super.handleValueChange(this.ranges);
+    }
+
+}

package/src/lib/property-editor/editors/range-editor/range.module.ts

@@ -0,0 +1,37 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXRangePropertyEditorComponent } from './range.editor';
+import { FormsModule } from '@angular/forms';
+import { AXTextBoxModule } from '../../../textbox/textbox.module';
+import { AXNumberBoxModule } from '../../../number-box/number-box.module';
+import { AXColorPickerModule } from '../../../color-picker/color-picker.module';
+import { AXLabelModule } from '../../../label/label.module';
+import { AXPageModule } from '../../../page/page.module';
+import { AXButtonModule } from '../../../button/button.module';
+import { AXTranslatorModule } from '@acorex/core';
+import { AXValidationModule } from '../../../validation/validation.module';
+
+
+
+
+@NgModule({
+    declarations: [AXRangePropertyEditorComponent],
+    imports: [
+        CommonModule,
+        FormsModule,
+        AXTranslatorModule,
+        AXTextBoxModule,
+        AXNumberBoxModule,
+        AXColorPickerModule,
+        AXLabelModule,
+        AXPageModule,
+        AXValidationModule,
+        AXButtonModule
+    ],
+    exports: [AXRangePropertyEditorComponent],
+    providers: []
+})
+export class AXRangePropertyEditorModule {
+    constructor() {
+    }
+}

package/src/lib/property-editor/editors/selectbox-editor/selectbox.editor.html

@@ -0,0 +1,15 @@
+<ax-select-box [mode]="selectionMode"
+                [textField]="textField" 
+                [valueField]="valueField" 
+                [selectedValues]="value" 
+                [remoteOperation]="remoteOperation"
+                [allowSearch]="allowSearch" 
+                [allowNull]="allowNull"
+                [readonly]="readonly"
+                [disabled]="disabled"
+                (selectionChanged)="handleValueChange($event)">
+    <ax-data-source [provideData]="provideData">
+    </ax-data-source>
+    <ax-validation [rules]="validation?.rules">
+    </ax-validation>
+</ax-select-box>

package/src/lib/property-editor/editors/selectbox-editor/selectbox.editor.ts

@@ -0,0 +1,77 @@
+import { Component, OnInit, ChangeDetectorRef, ViewChild } from '@angular/core';
+import { AXProperyEditorComponent } from '../../property-editor.class';
+import { AXValidation } from '../../../validation/validation.component';
+import { AXSelectBoxComponent } from '../../../selectbox/selectbox.component';
+
+@Component({
+    templateUrl: './selectbox.editor.html',
+})
+export class AXSelectBoxPropertyEditorComponent extends AXProperyEditorComponent<any>  {
+
+
+    valueField: string = 'id';
+    textField: string = 'text';
+    selectionMode: string = 'single';
+    selectionDataMode: string = 'value';
+    allowSearch: boolean = true;
+    allowNull: boolean = false;
+    disabled: boolean = false;
+    items: any = [];
+    remoteOperation = false;
+
+    validation: AXValidation;
+
+    @ViewChild(AXSelectBoxComponent, { static: true })
+    selectBox: AXSelectBoxComponent;
+
+
+
+    private _filter: any;
+    public get filter(): any {
+        return this._filter;
+    }
+    public set filter(v: any) {
+        this._filter = v;
+        if (this.value && this.initiated) {
+            this.value = null;
+            this.selectBox?.refresh();
+        }
+    }
+
+
+    constructor(protected cdr: ChangeDetectorRef) {
+        super(cdr);
+    }
+
+    handleValueChange(e: any) {
+        super.handleValueChange(e.selectedValues);
+    }
+
+    ngAfterViewInit() {
+        this.registerForValidationForm(this.selectBox);
+        this.onRenderCompleted.emit();
+    }
+
+    provideData = (e): Promise<any> => {
+        return new Promise((resolve) => {
+            const func = () => {
+                if (Array.isArray(this.items)) {
+                    resolve(this.items.slice());
+                }
+                else if (typeof this.items === 'function') {
+                    const a = Object.assign(e, { sender: this })
+                    resolve(this.items(a));
+                }
+                else {
+                    resolve([]);
+                }
+            };
+            const intVal = setInterval(() => {
+                if (this.initiated) {
+                    func();
+                    clearInterval(intVal);
+                }
+            },50);
+        });
+    }
+}

package/src/lib/property-editor/editors/selectbox-editor/selectbox.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { AXSelectBoxPropertyEditorComponent } from './selectbox.editor';
+import { AXSelectBoxModule } from '../../../selectbox/selectbox.module';
+import { AXDataSourceModule } from '../../../data-source/datasource.module';
+import { AXValidationModule } from '../../../validation/validation.module';
+
+
+
+
+@NgModule({
+    declarations: [AXSelectBoxPropertyEditorComponent],
+    imports: [CommonModule, FormsModule, AXSelectBoxModule, AXDataSourceModule, AXValidationModule],
+    exports: [AXSelectBoxPropertyEditorComponent],
+    providers: []
+})
+export class AXSelectBoxPropertyEditorModule {
+    constructor() {
+    }
+}

package/src/lib/property-editor/editors/switch-editor/number.editor.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit, ChangeDetectorRef, ViewChild } from '@angular/core';
+import { AXProperyEditorComponent } from '../../property-editor.class';
+
+@Component({
+    template: `
+        <ax-switch (onValueChanged)="handleValueChange($event)" [value]="value"></ax-switch>
+    `,
+})
+export class AXSwitchPropertyEditorComponent extends AXProperyEditorComponent<boolean>  {
+
+
+
+    constructor(protected cdr: ChangeDetectorRef) {
+        super(cdr);
+    }
+
+
+    handleValueChange(e: any) {
+        super.handleValueChange(e.value);
+    }
+
+    ngAfterViewInit() {
+        this.onRenderCompleted.emit();
+    }
+
+}

package/src/lib/property-editor/editors/switch-editor/number.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { AXNumberBoxModule } from '../../../number-box/number-box.module';
+import { AXValidationModule } from '../../../validation/validation.module';
+import { AXSwitchPropertyEditorComponent } from './number.editor';
+import { AXSwitchModule } from '../../../switch/switch.module';
+
+
+
+
+@NgModule({
+    declarations: [AXSwitchPropertyEditorComponent],
+    imports: [CommonModule, FormsModule, AXNumberBoxModule, AXValidationModule, AXSwitchModule],
+    exports: [AXSwitchPropertyEditorComponent],
+    providers: []
+})
+export class AXSwitchPropertyEditorModule {
+    constructor() {
+    }
+}

package/src/lib/property-editor/editors/text-editor/text.editor.html

@@ -0,0 +1,4 @@
+<ax-text-box (onValueChanged)="handleValueChange($event)" [value]="value" [readonly]="readonly" [allowClear]="clearButton">
+    <ax-validation [rules]="validation?.rules">
+    </ax-validation>
+</ax-text-box>

package/src/lib/property-editor/editors/text-editor/text.editor.ts

@@ -0,0 +1,35 @@
+import { Component,  ChangeDetectorRef, ViewChild } from '@angular/core';
+import { AXTextBoxComponent } from '../../../textbox/textbox.component';
+import { AXValidation } from '../../../validation/validation.component';
+import { AXProperyEditorComponent } from '../../property-editor.class';
+
+@Component({
+    templateUrl: './text.editor.html',
+})
+export class AXTextPropertyEditorComponent extends AXProperyEditorComponent<string>  {
+
+
+    @ViewChild(AXTextBoxComponent)
+    private textBox: AXTextBoxComponent;
+
+
+    validation: AXValidation;
+    clearButton: boolean = false;
+
+
+    constructor(protected cdr: ChangeDetectorRef) {
+        super(cdr);
+    }
+
+
+    handleValueChange(e: any) {
+        super.handleValueChange(e.value);
+    }
+
+
+    ngAfterViewInit() {
+        this.registerForValidationForm(this.textBox);
+        this.onRenderCompleted.emit();
+    }
+
+}

package/src/lib/property-editor/editors/text-editor/text.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXTextPropertyEditorComponent } from './text.editor';
+import { FormsModule } from '@angular/forms';
+import { AXTextBoxModule } from '../../../textbox/textbox.module';
+import { AXValidationModule } from '../../../validation/validation.module';
+
+
+
+
+@NgModule({
+    declarations: [AXTextPropertyEditorComponent],
+    imports: [CommonModule, FormsModule, AXTextBoxModule, AXValidationModule],
+    exports: [AXTextPropertyEditorComponent],
+    providers: []
+})
+export class AXTextPropertyEditorModule {
+    constructor() {
+    }
+}

package/src/lib/property-editor/editors/textarea-editor/textarea.editor.html

@@ -0,0 +1,9 @@
+<ax-text-area (onValueChanged)="handleValueChange($event)" [value]="value" 
+        [readonly]="readonly" 
+        [allowClear]="clearButton"
+        [placeholder]="placeholder"
+        [rows]="rows"
+        >
+    <ax-validation [rules]="validation?.rules">
+    </ax-validation>
+</ax-text-area>

package/src/lib/property-editor/editors/textarea-editor/textarea.editor.ts

@@ -0,0 +1,37 @@
+import { Component,  ChangeDetectorRef, ViewChild } from '@angular/core';
+import { AXTextBoxComponent } from '../../../textbox/textbox.component';
+import { AXValidation } from '../../../validation/validation.component';
+import { AXProperyEditorComponent } from '../../property-editor.class';
+
+@Component({
+    templateUrl: './textarea.editor.html',
+})
+export class AXTextareaPropertyEditorComponent extends AXProperyEditorComponent<string>  {
+
+
+    @ViewChild(AXTextBoxComponent)
+    private textBox: AXTextBoxComponent;
+
+
+    validation: AXValidation;
+    clearButton: boolean = false;
+    placeholder: string = null;
+    rows: number = 3;
+
+
+    constructor(protected cdr: ChangeDetectorRef) {
+        super(cdr);
+    }
+
+
+    handleValueChange(e: any) {
+        super.handleValueChange(e.value);
+    }
+
+
+    ngAfterViewInit() {
+        this.registerForValidationForm(this.textBox);
+        this.onRenderCompleted.emit();
+    }
+
+}

package/src/lib/property-editor/editors/textarea-editor/textarea.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXTextareaPropertyEditorComponent } from './textarea.editor';
+import { FormsModule } from '@angular/forms';
+import { AXTextAreaModule } from '../../../textarea/textarea.module';
+import { AXValidationModule } from '../../../validation/validation.module';
+
+
+
+
+@NgModule({
+    declarations: [AXTextareaPropertyEditorComponent],
+    imports: [CommonModule, FormsModule, AXTextAreaModule, AXValidationModule],
+    exports: [AXTextareaPropertyEditorComponent],
+    providers: []
+})
+export class AXTextareaPropertyEditorModule {
+    constructor() {
+    }
+}

package/src/lib/property-editor/editors/time-editor/time.editor.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit, ChangeDetectorRef, ViewChild } from '@angular/core';
+import { AXDatePickerComponent } from '../../../date-picker/date-picker.component';
+import { AXValidation } from '../../../validation/validation.component';
+import { AXProperyEditorComponent } from '../../property-editor.class';
+
+@Component({
+    template: `
+    <ax-time-picker [showCurentTime]="showCurentTime" [timeType]="timeType" [allowClear]="clearButton" (onValueChanged)="handleValueChange($event)">
+        <ax-validation [rules]="validation?.rules">
+        </ax-validation>
+    </ax-time-picker>
+         `,
+})
+export class AXTimePropertyEditorComponent extends AXProperyEditorComponent<String>  {
+
+
+    timeType: any;
+    validation: AXValidation;
+    showCurentTime: boolean = false;
+    clearButton: boolean = false;
+
+    @ViewChild(AXDatePickerComponent)
+    private time: AXDatePickerComponent;
+
+    constructor(protected cdr: ChangeDetectorRef) {
+        super(cdr);
+    }
+
+    handleValueChange(e: any) {
+        super.handleValueChange(e.value?.time);
+    }
+
+    ngAfterViewInit() {
+        this.registerForValidationForm(this.time);
+        this.onRenderCompleted.emit();
+    }
+
+}

package/src/lib/property-editor/editors/time-editor/time.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { AXValidationModule } from '../../../validation/validation.module';
+import { AXTimePickerModule } from '../../../time-picker/time-picker.module';
+import { AXTimePropertyEditorComponent } from './time.editor';
+
+
+
+
+@NgModule({
+    declarations: [AXTimePropertyEditorComponent],
+    imports: [CommonModule, FormsModule, AXTimePickerModule, AXValidationModule],
+    exports: [AXTimePropertyEditorComponent],
+    providers: []
+})
+export class AXTimePropertyEditorModule {
+    constructor() {
+    }
+}