@acorex/components 6.5.25 → 6.5.27

package/src/lib/query-builder/query-builder-popup/query-builder-popup.component.html

@@ -0,0 +1,82 @@
+<div>
+    <ax-validation-form #form>
+        <div *ngFor="let rule of items">
+
+            <div *ngIf=" rule.control" [ngSwitch]="rule.control.type" style="padding: 1em;">
+                <div *ngSwitchCase="'textBox'">
+                    <ax-form-group>
+                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>
+                        <ax-text-box (onValueChanged)="textValueChange($event,rule)"
+                            placeholder="مقدار مورد نظر خود را وارد کنید" size="sm">
+                            <ax-validation>
+                                <ax-validation-rule type="required"></ax-validation-rule>
+                            </ax-validation>
+                        </ax-text-box>
+                    </ax-form-group>
+                </div>
+                <div *ngSwitchCase="'selectBox'">
+                    <ax-form-group>
+                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>
+                        <ax-select-box placeholder="مقدار مورد نظر خود را وارد کنید"
+                            [textField]="getOption('textField',rule)" [(selectedItems)]="rule.valueItem"
+                            [valueField]="getOption('valueField',rule)" [mode]="getOption('mode',rule)"
+                            (selectedItemsChange)="selectedItemsChange($event,rule)" size="sm" #selectBoxValue
+                            [remoteOperation]="getOption('remoteOperation',rule)">
+                            <ax-validation>
+                                <ax-validation-rule type="required"></ax-validation-rule>
+                            </ax-validation>
+                            <ax-data-source [provideData]="getProvideData" [params]="rule"></ax-data-source>
+                        </ax-select-box>
+                    </ax-form-group>
+                </div>
+                <div *ngSwitchCase="'numberBox'">
+                    <ax-form-group>
+                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>
+                        <ax-number-box (onValueChanged)="valueChange($event,rule)"
+                            placeholder="مقدار مورد نظر خود را وارد کنید" size="sm">
+                            <ax-validation>
+                                <ax-validation-rule type="required"></ax-validation-rule>
+                            </ax-validation>
+                        </ax-number-box>
+                    </ax-form-group>
+                </div>
+                <div *ngSwitchCase="'datePicker'">
+
+
+                </div>
+                <div *ngSwitchCase="'boolean'">
+                    <ax-form-group>
+                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>
+                        <ax-select-box #selectBoxBoolean (selectedItemsChange)="valueBooleanChange($event,rule)"
+                            allowNull="false" [selectedValues]="rule.value" size="sm" mode="single">
+                            <ax-data-source [provideData]="provideDataBoolean">
+                            </ax-data-source>
+                            <ax-validation>
+                                <ax-validation-rule type="required"></ax-validation-rule>
+                            </ax-validation>
+                        </ax-select-box>
+                    </ax-form-group>
+
+                </div>
+                <div *ngSwitchDefault>
+                    <ax-form-group>
+                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>
+                        <ax-text-box (onValueChanged)="textValueChange($event,rule)"
+                            placeholder="مقدار مورد نظر خود را وارد کنید" size="sm">
+                            <ax-validation>
+                                <ax-validation-rule type="required"></ax-validation-rule>
+                            </ax-validation>
+                        </ax-text-box>
+
+                    </ax-form-group>
+
+                </div>
+            </div>
+
+
+
+
+        </div>
+
+    </ax-validation-form>
+</div>

package/src/lib/query-builder/query-builder-popup/query-builder-popup.component.ts

@@ -0,0 +1,178 @@
+import { AXButtonItem, AXTranslator } from '@acorex/core';
+import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
+import { AXBasePopupPageComponent } from '../../base/base-page.class';
+import { AXMenuItemClickEvent } from '../../menu/menu.component';
+import { AXQueryBuilderGroup, AXQueryBuilderPopup, AXQueryBuilderRule } from '../query-builder.class';
+
+import { AXDataSourceReadParams } from '../../data-source/read-param'
+import { AXToastService } from '../../toast/toast.service';
+import { AXValidationFormComponent } from '../../validation/validation-form.component';
+@Component({
+    templateUrl: './query-builder-popup.component.html'
+})
+
+export class AXQueryBuilderPopupComponent extends AXBasePopupPageComponent {
+    @ViewChild(AXValidationFormComponent) form: AXValidationFormComponent;
+    constructor(private toast: AXToastService) {
+        super();
+    }
+    group: AXQueryBuilderGroup;
+    items: AXQueryBuilderRule[] = [];
+    groupCopy: AXQueryBuilderGroup;
+    complateValue: boolean = true;
+    provideData: any;
+    makeJsonString(items: any[]) {
+        return new Promise((resolve, reject) => {
+            items.forEach((element, index, array) => {
+                if (element.items) {
+                    this.makeJsonString(element.items);
+                } else {
+                    if (element.control && element.control.options && (element.control.options.dataSource === '' || element.control.options.dataSource === undefined)) {
+                        element.control.options.dataSource = this.provideData;
+                    }
+                }
+                if (index === array.length - 1) {
+                    resolve(array[0]);
+                }
+            });
+        });
+    }
+    ngAfterViewInit() {
+        var groupString = JSON.stringify(this.group);
+        this.groupCopy = JSON.parse(groupString);
+        this.makeJsonString(this.groupCopy.items);
+        for (let i = 0; i < this.groupCopy.items.length; i++) {
+            this.getNoValueRule(this.groupCopy.items[i]);
+        }
+        if (this.items.length < 1) {
+            this.close(this.group);
+        }
+
+    }
+    getValue(v) {
+        return v.indexOf('????') == 0 ? v.split('|')[1] : v;
+    }
+    getNoValueRule(gr) {
+        // for (let i = 0; i < gr.items.length; i++) {
+        if (gr.condition) {
+            for (let i = 0; i < gr.items.length; i++) {
+                this.getNoValueRule(gr.items[i]);
+            }
+
+        } else {
+            if (gr.onDemandLabel?.indexOf('????') == 0) {
+                this.items.push(gr);
+            }
+        }
+
+        //  }
+    }
+
+    ngOnInit(): void {
+
+    }
+
+
+    textValueChange(e, rule) {
+        rule.value = e.value;
+        rule.text = e.value;
+
+    }
+    selectedItemsChange(e, rule) {
+        let n = this.getOption('textField', rule);
+        rule.text = e[0][n];
+        if (rule && rule.control.options.valueField) {
+            rule.value = e[0][rule.control.options.valueField];
+        } else {
+            rule.value = e[0].value;
+        }
+        rule.valueItem[0] = e[0];
+
+    }
+    valueChange(e, rule) {
+        rule.value = e.value;
+        rule.text = e.value;
+
+    }
+    valueBooleanChange(e, rule) {
+        rule.text = e.value == undefined ? e[0].value : e.value;
+        rule.value = e.value == undefined ? e[0].value : e.value;
+
+    }
+    getOption(name: string, rule) {
+        return rule.control.options ? rule.control.options[name] : null;
+    }
+    getProvideData = (e: AXDataSourceReadParams) => {
+        if (e.extra && e.extra.control.options && e.extra.control.options.dataSource) {
+            return e.extra.control.options.dataSource({ ...e, optionsData: { ...e.extra.control.options } });
+        }
+    };
+
+    provideDataBoolean = (e) => {
+        return new Promise((resolve) => {
+            resolve([
+                {
+                    value: 'true',
+                    text: AXTranslator.get('queryBuilder.true')
+                },
+                {
+                    value: 'false',
+                    text: AXTranslator.get('queryBuilder.false')
+                }
+
+            ])
+        })
+    }
+
+    findNullValue(gr) {
+        for (let i = 0; i < gr.length; i++) {
+            if (gr[i].value === null || gr[i].value === undefined || gr[i].value === '') {
+                this.complateValue = false;
+            }
+        }
+
+
+        // if (gr.condition) {
+        //     for (let i = 0; i < gr.items.length; i++) {
+        //         this.findNullValue(gr.items[i]);
+        //     }
+
+        // } else {
+        //     if (gr.onDemandLabel?.indexOf('????') == 0 || gr.value === null || gr.value === undefined || gr.value === '') {
+        //         this.complateValue = false;
+        //     }
+        // }
+
+    }
+
+    onFooterButtonClick(e: AXMenuItemClickEvent) {
+        if (e.name === 'confirm') {
+            this.form.validate().then(c => {
+                if (c.result === true) {
+                    this.close(this.groupCopy);
+                }
+            });
+        }
+        if (e.name === 'cancel') {
+            this.close();
+        }
+
+    }
+
+    getFooterButtons(): AXButtonItem[] {
+        return [
+            {
+                text: AXTranslator.get('common.confirm'),
+                name: 'confirm',
+                style: 'ax primary',
+                icon: 'far fa-check-circle'
+            },
+            {
+                text: AXTranslator.get('common.cancel'),
+                name: 'cancel',
+                style: 'ax light',
+                icon: 'far fa-times'
+            }
+        ]
+    }
+}

package/src/lib/query-builder/query-builder-rule.component.html

@@ -0,0 +1,135 @@
+<div class="condition" *ngIf="parent">
+    <div class="text {{parent.condition}}">
+        <span>{{parent.condition}}</span>
+    </div>
+</div>
+<div class="handler">
+    <i class="far fa-grip-lines-vertical"></i>
+</div>
+
+<div class="caption" [ngClass]="{'editable': isEditing}">
+    <ng-container *ngIf="isEditing;else fieldsTemplate">
+        <ax-form-group>
+            <ax-select-box [readonly]="mode == 'edit'" (selectionChanged)="captionChange($event)" allowNull="false"
+                [(selectedItems)]="rule.dataFieldItem" textField="caption" valueField="dataField" [items]="fields"
+                mode="single">
+            </ax-select-box>
+        </ax-form-group>
+    </ng-container>
+    <ng-template #fieldsTemplate>
+        <div (click)="handleEditClick()">
+            {{rule.caption}}
+        </div>
+    </ng-template>
+</div>
+
+<div class="operator" [ngClass]="{'editable': isEditing,'radius':!showValue}">
+    <ng-container *ngIf="isEditing;else operatorTemplate">
+        <ax-form-group>
+            <ax-select-box [readonly]="mode == 'edit'" *ngIf="showOperatorSelectBox" [(selectedValues)]="rule.operator"
+                #selectBox (selectedItemsChange)="operatorChange($event)" allowNull="false" mode="single">
+                <ax-data-source [provideData]="provideDataOperator">
+                </ax-data-source>
+            </ax-select-box>
+        </ax-form-group>
+    </ng-container>
+    <ng-template #operatorTemplate>
+        <div class="text" (click)="handleEditClick()">
+            {{('queryBuilder.'+rule.operator) | trans}}
+        </div>
+    </ng-template>
+</div>
+<div *ngIf="showValue" class="value" [ngClass]="{'editable': isEditing}">
+    <ng-container *ngIf="isEditing;else valueTemplate">
+
+        <div *ngIf=" rule.control && !isOnDemandLabel" [ngSwitch]="rule.control.type">
+            <div *ngSwitchCase="'textBox'">
+                <ax-form-group>
+                    <ax-text-box (onValueChanged)="valueChange($event)" placeholder="مقدار مورد نظر خود را وارد کنید"
+                        [(value)]="rule.value">
+                    </ax-text-box>
+                </ax-form-group>
+            </div>
+            <div *ngSwitchCase="'selectBox'">
+                <ax-form-group>
+                    <ax-select-box *ngIf="showSelectBox" [mode]="getOption('mode')"
+                        [remoteOperation]="getOption('remoteOperation')" [valueField]="getOption('valueField')"
+                        placeholder="مقدار مورد نظر خود را وارد کنید" [textField]="getOption('textField')"
+                        [(selectedItems)]="rule.valueItem" (selectedItemsChange)="selectedItemsChange($event)"
+                        #selectBoxValue>
+                        <ax-data-source [provideData]="getProvideData"></ax-data-source>
+                    </ax-select-box>
+                </ax-form-group>
+            </div>
+
+            <div *ngSwitchCase="'numberBox'">
+                <ax-form-group>
+                    <ax-number-box [decimalNumber]="2" (onValueChanged)="valueChange($event)"
+                        placeholder="مقدار مورد نظر خود را وارد کنید" [(value)]="rule.value">
+                    </ax-number-box>
+                </ax-form-group>
+            </div>
+            <div *ngSwitchCase="'datetime'">
+                <ax-date-picker label="From" [(value)]="rule.value" (onValueChanged)="valueChange($event)">
+                </ax-date-picker>
+
+            </div>
+            <div *ngSwitchCase="'boolean'">
+
+                <ax-form-group>
+                    <ax-select-box #selectBoxBoolean (selectedItemsChange)="valueBooleanChange($event)"
+                        allowNull="false" [selectedValues]="rule.value" mode="single">
+                        <ax-data-source [provideData]="provideDataBoolean">
+                        </ax-data-source>
+                    </ax-select-box>
+                </ax-form-group>
+
+            </div>
+            <div *ngSwitchDefault>
+                <ax-form-group>
+                    <ax-text-box (onValueChanged)="valueChange($event)" placeholder="مقدار مورد نظر خود را وارد کنید"
+                        [(value)]="rule.value">
+                    </ax-text-box>
+
+                </ax-form-group>
+
+            </div>
+        </div>
+
+        <div *ngIf="isOnDemandLabel">
+
+            <ax-text-box #textBoxNameValue [value]="getOnDemandName(rule.onDemandLabel)"
+                (onValueChanged)="onDemandLabelChange($event)" placeholder="نام متغیر خود را وارد کنید">
+                <!-- <ax-validation>
+                    <ax-validation-rule type="required"></ax-validation-rule>
+                </ax-validation> -->
+            </ax-text-box>
+
+
+        </div>
+
+    </ng-container>
+    <ng-template #valueTemplate>
+        <div (click)="handleEditClick()">
+
+            {{rule.text}}
+
+        </div>
+    </ng-template>
+</div>
+
+<div class="buttons-list">
+    <div *ngIf="showValue && isEditing && mode == 'new'" class="button variable"
+        [ngClass]="{'active-button': isOnDemandLabel}">
+        <i class="far fa-dollar-sign"></i>
+        <ax-check-box [value]="isOnDemandLabel" (onClick)="onDemandLabel($event)">
+        </ax-check-box>
+    </div>
+
+    <div class="button commit" (click)="handleCommitClick()" *ngIf="isEditing">
+        <i class="far fa-check"></i>
+    </div>
+    <div class="button remove" (click)="handleRemoveClick()" *ngIf="mode == 'new'">
+        <i class="far fa-times"></i>
+    </div>
+</div>