@acorex/components 5.1.2 → 5.1.6

package/src/lib/property-editor/editors/conditional-color-editor/conditional-color.editor.ts

@@ -0,0 +1,232 @@
+import { Component, ChangeDetectorRef, ViewChild, TemplateRef, ChangeDetectionStrategy, Input } from '@angular/core';
+import { AXObjectUtil, AXTranslator } from '@acorex/core';
+import { AXDataType, AXProperyEditorComponent } from '../../property-editor.class';
+import { AXPopupService } from '../../../popup/popup.service';
+import { AXValidationFormComponent } from '../../../validation/validation-form.component';
+
+
+
+
+export interface AXConditionalColorModel {
+    color: string;
+    operator: string;
+    value: any;
+    display?: string;
+}
+
+
+
+@Component({
+    templateUrl: './conditional-color.editor.html',
+    styleUrls: ['./conditional-color.editor.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AXConditionalColorPropertyEditorComponent extends AXProperyEditorComponent<AXConditionalColorModel[]>  {
+
+
+    form: AXValidationFormComponent;
+
+    @ViewChild('tplEdit')
+    tplEdit: TemplateRef<any>;
+
+    @Input()
+    dataType: AXDataType = 'number';
+
+    // @Input()
+    // mode: string[] = ['color', 'title'];
+
+    operators: { value: string, text: string, dataTypes?: AXDataType[] }[] = [];
+
+    ranges: AXConditionalColorModel[] = [];
+
+    editRow: AXConditionalColorModel;
+
+    showSeparator: boolean = true;
+    decimalNumber: number = 2;
+
+    booleanItems = [{ value: true, text: AXTranslator.get('queryBuilder.true') }, { value: false, text: AXTranslator.get('queryBuilder.false') }];
+
+    constructor(protected cdr: ChangeDetectorRef, private popupService: AXPopupService) {
+        super(cdr);
+    }
+
+
+    onFormInit(e) {
+        this.form = e.component;
+    }
+
+    ngOnInit() {
+        this.ranges = this.value ? AXObjectUtil.deepCopy(this.value) : [];
+        this.updateOperations();
+    }
+
+
+
+    updateOperations() {
+        this.operators = [
+            {
+                value: '<',
+                text: AXTranslator.get('queryBuilder.lt'),
+                dataTypes: ['string', 'number', 'date']
+            },
+            {
+                value: '<=',
+                text: AXTranslator.get('queryBuilder.lte'),
+                dataTypes: ['string', 'number', 'date']
+            },
+            {
+                value: '>',
+                text: AXTranslator.get('queryBuilder.gt'),
+                dataTypes: ['string', 'number', 'date']
+            },
+            {
+                value: '>=',
+                text: AXTranslator.get('queryBuilder.gte'),
+                dataTypes: ['string', 'number', 'date']
+            },
+            {
+                value: '==',
+                text: AXTranslator.get('queryBuilder.equal'),
+                dataTypes: ['string', 'boolean', 'number', 'date']
+            },
+            {
+                value: '<>',
+                text: AXTranslator.get('queryBuilder.not-equal'),
+                dataTypes: ['string', 'boolean', 'number', 'date']
+            }
+        ].filter(c => c.dataTypes == null || c.dataTypes.includes(this.dataType)) as any;
+    }
+
+
+    ngAfterViewInit() {
+        this.cdr.detectChanges();
+        this.onRenderCompleted.emit();
+    }
+
+    handleEditClick(item: AXConditionalColorModel) {
+        this.updateOperations();
+        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() {
+        this.updateOperations();
+        this.editRow = {
+            value: this.getDefaultValue(),
+            color: null,
+            operator: '=='
+        };
+        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();
+                    }
+                }
+            ],
+        });
+    }
+    getDefaultValue(): any {
+        switch (this.dataType) {
+            case 'boolean':
+                return true;
+            case 'number':
+                return 0;
+            default:
+                return null;
+        }
+    }
+
+    handleRemoveClick(item: AXConditionalColorModel) {
+        this.ranges = this.ranges.filter(c => !(c.value === item.value && c.operator === item.operator));
+        super.handleValueChange(this.ranges);
+    }
+
+
+    getTitle(opr: string) {
+        const oprItem = this.operators.find(c => c.value === opr);
+        return oprItem ? AXTranslator.get(oprItem.text) : '';
+    }
+
+    getIcon(opr: string) {
+        switch (opr) {
+            case '==':
+                return 'fa-equals';
+            case '<>':
+                return 'fa-not-equal';
+            case '<':
+                return 'fa-less-than';
+            case '<=':
+                return 'fa-less-than-equal';
+            case '>':
+                return 'fa-greater-than';
+            case '>=':
+                return 'fa-greater-than-equal';
+            default:
+                return null;
+        }
+    }
+
+}

package/src/lib/property-editor/editors/conditional-color-editor/conditional-color.module.ts

@@ -0,0 +1,52 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+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 { AXTranslator, AXTranslatorModule } from '@acorex/core';
+import { AXConditionalColorPropertyEditorComponent } from './conditional-color.editor';
+import { AXValidationModule } from '../../../validation/validation.module';
+import { AXSelectBoxModule } from '../../../selectbox/selectbox.module';
+
+
+
+
+@NgModule({
+    declarations: [AXConditionalColorPropertyEditorComponent],
+    imports: [
+        CommonModule,
+        FormsModule,
+        AXTranslatorModule,
+        AXTextBoxModule,
+        AXNumberBoxModule,
+        AXColorPickerModule,
+        AXLabelModule,
+        AXPageModule,
+        AXButtonModule,
+        AXSelectBoxModule,
+        AXValidationModule,
+    ],
+    exports: [AXConditionalColorPropertyEditorComponent],
+    providers: []
+})
+export class AXConditionalColorPropertyEditorModule {
+    constructor() {
+        AXTranslator.load('en', {
+            'conditional-color-property-editor': {
+                'replaced-color': 'Replaced Color',
+                'replaced-title': 'Replaced Title',
+            }
+        });
+        //
+        AXTranslator.load('fa', {
+            'conditional-color-property-editor': {
+                'replaced-color': 'رنگ جایگزین',
+                'replaced-title': 'متن جایگزین',
+            }
+        });
+    }
+}

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

@@ -0,0 +1,49 @@
+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';
+import { AXCalendarType } from '@acorex/core'
+
+@Component({
+    template: `
+    <ax-date-picker [size]="size" [dateType]="dateType" [showToday]="showToday" [disabled]="disabled" [allowClear]="clearButton" [readonly]="readonly" [max]="max" [min]="min" [placeholder]="placeholder" [showTodayButton]="showTodayButton" [selectableHoliday]="selectableHoliday" (onValueChanged)="handleValueChange($event)"
+             [type]="type" [textAlign]="textAlign" [(value)]="value">
+             <ax-validation [rules]="validation?.rules">
+            </ax-validation>
+    </ax-date-picker>
+         `,
+})
+export class AXDatePropertyEditorComponent extends AXProperyEditorComponent<Date>  {
+
+    showTodayButton: boolean = true;
+    selectableHoliday: boolean = true;
+    type: AXCalendarType = 'gregorian';
+    textAlign: 'right' | 'left' | null = null;
+    validation: AXValidation;
+    placeholder: string = ''
+    min: Date;
+    max: Date;
+    readonly: boolean;
+    disabled: boolean;
+    clearButton: boolean = false;
+    showToday: boolean = false;
+    dateType: any;
+    size: string = 'md';
+
+    @ViewChild(AXDatePickerComponent)
+    private date: AXDatePickerComponent;
+
+    constructor(protected cdr: ChangeDetectorRef) {
+        super(cdr);
+    }
+
+    handleValueChange(e: any) {
+        super.handleValueChange(e.value);
+    }
+
+    ngAfterViewInit() {
+        this.registerForValidationForm(this.date);
+        this.onRenderCompleted.emit();
+    }
+
+}

package/src/lib/property-editor/editors/date-editor/date.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 { AXDatePickerModule } from '../../../date-picker/date-picker.module';
+import { AXDatePropertyEditorComponent } from './date.editor';
+
+
+
+
+@NgModule({
+    declarations: [AXDatePropertyEditorComponent],
+    imports: [CommonModule, FormsModule, AXDatePickerModule, AXValidationModule],
+    exports: [AXDatePropertyEditorComponent],
+    providers: []
+})
+export class AXDatePropertyEditorModule {
+    constructor() {
+    }
+}

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

@@ -0,0 +1,46 @@
+import { Component, OnInit, ChangeDetectorRef, ViewChild } from '@angular/core';
+import { AXNumberBoxComponent } from '../../../number-box/number-box.component';
+import { AXValidation } from '../../../validation/validation.component';
+import { AXProperyEditorComponent } from '../../property-editor.class';
+
+@Component({
+  template: `
+    <ax-number-box
+      (onValueChanged)="handleValueChange($event)"
+      [value]="value"
+      [showSeparator]="showSeparator"
+      [decimalNumber]="decimalNumber"
+      [min]="minValue"
+      [max]="maxValue"
+      [allowClear]="clearButton"
+      [showCounter]="showCounter"
+    >
+      <ax-validation [rules]="validation?.rules"> </ax-validation>
+    </ax-number-box>
+  `
+})
+export class AXNumberBoxPropertyEditorComponent extends AXProperyEditorComponent<number> {
+  showSeparator: boolean = true;
+  decimalNumber: number = 2;
+  minValue?: number = null;
+  maxValue?: number = null;
+  validation: AXValidation;
+  clearButton: boolean = false;
+  showCounter: boolean = true;
+
+  @ViewChild(AXNumberBoxComponent)
+  private textBox: AXNumberBoxComponent;
+
+  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/number-editor/number.module.ts

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

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

@@ -0,0 +1,67 @@
+<div *ngFor="let r of ranges" [style.border-color]="r.color" class="range-item" (click)="handleEditClick(r)">
+    <div>
+        <div [style.background-color]="r.color"></div>
+        <div>{{r.title}}</div>
+    </div>
+    <div>
+        <div class="min" title="minimum {{r.minValue}}">{{r.minValue}}</div>
+        <div>
+            <i class="far fa-long-arrow-left"></i>
+        </div>
+        <div class="max" title="maxmimum {{r.maxValue}}">{{r.maxValue}}</div>
+        <div class="remove-button" (click)="handleRemoveClick(r)"><i class="far fa-trash-alt"></i></div>
+    </div>
+</div>
+<ax-button icon="far fa-plus" type="success outline" (click)="handleAddClick()">{{ 'common.add-item' | trans  }}
+</ax-button>
+<ng-template #tplEdit>
+    <ax-page>
+        <ax-page-content>
+            <div class="container">
+                <ax-validation-form (onInit)="onFormInit($event)">
+                    <div class="row">
+                        <div class="col-12">
+                            <ax-label>{{ 'common.title' | trans  }}</ax-label>
+                            <ax-text-box [(value)]="editRow.title">
+                                <ax-validation>
+                                    <ax-validation-rule type="required"></ax-validation-rule>
+                                </ax-validation>
+                            </ax-text-box>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-6">
+                            <ax-label>{{ 'common.min-value' | trans  }}</ax-label>
+                            <ax-number-box [(value)]="editRow.minValue" [showSeparator]="showSeparator"
+                                [decimalNumber]="decimalNumber">
+                                <ax-validation>
+                                    <ax-validation-rule type="required"></ax-validation-rule>
+                                </ax-validation>
+                            </ax-number-box>
+                        </div>
+                        <div class="col-6">
+                            <ax-label>{{ 'common.max-value' | trans  }}</ax-label>
+                            <ax-number-box [(value)]="editRow.maxValue" [showSeparator]="showSeparator"
+                                [decimalNumber]="decimalNumber">
+                                <ax-validation>
+                                    <ax-validation-rule type="required"></ax-validation-rule>
+                                </ax-validation>
+                            </ax-number-box>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-12">
+                            <ax-label>{{ 'common.color' | trans  }}</ax-label>
+                            <ax-color-picker [(value)]="editRow.color">
+                                <ax-validation>
+                                    <ax-validation-rule type="required"></ax-validation-rule>
+                                </ax-validation>
+                            </ax-color-picker>
+                        </div>
+                    </div>
+                </ax-validation-form>
+            </div>
+            <div class="ax-mrg-md"></div>
+        </ax-page-content>
+    </ax-page>
+</ng-template>

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

@@ -0,0 +1,68 @@
+.range-item {
+    border: 1px solid var(--ax-gray-color);
+    margin-bottom: 5px;
+    display: flex;
+    padding: 5px;
+    border-radius: 5px;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+
+    .remove-button {
+        color: var(--ax-danger-color);
+        padding: var(--ax-size-sm);
+        display: flex;
+        justify-content: center;
+        cursor: pointer;
+
+        &:hover {
+            background-color: var(--ax-danger-trans-light-color);
+        }
+    }
+
+    div {
+        &:first-child {
+            display: flex;
+            align-items: center;
+
+            div {
+                &:first-child {
+                    width: 25px;
+                    height: 25px;
+                    border-radius: 3px;
+                }
+
+                &:last-child {
+                    margin-inline-start: 10px;
+                }
+            }
+        }
+
+        &:last-child {
+            display: flex;
+            align-items: center;
+
+            button {
+                background-color: transparent;
+                border: none;
+                cursor: pointer;
+
+                i {
+                    color: var(--ax-danger-color);
+                }
+            }
+
+            div {
+                min-width: 40px;
+
+                &.min {
+                    color: var(--ax-danger-color);
+                }
+
+                &.max {
+                    color: var(--ax-success-color);
+                }
+            }
+        }
+    }
+}