@acorex/components 6.5.26 → 6.5.28

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

@@ -0,0 +1,193 @@
+.column-item {
+    border: 1px solid var(--ax-gray-light-color);
+    margin-bottom: 5px;
+    display: flex;
+    padding: 5px;
+    border-radius: 5px;
+    justify-content: space-between;
+    font-weight: 500;
+    align-items: center;
+    .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: 100px;
+                    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);
+                }
+            }
+        }
+    }
+}
+
+.add-item {
+    border: 1px solid var(--ax-success-color);
+    background-color: transparent;
+    color: var(--ax-success-color);
+}
+
+table {
+    width: 100%;
+    margin-top: 1em;
+    thead {
+        th {
+            text-align: right;
+            padding: 0.4em;
+            border: 1px solid #00000029;
+            background-color: var(--ax-primary-trans-dark-color);
+        }
+    }
+    tbody {
+        tr {
+            td {
+                text-align: center;
+            }
+        }
+    }
+}
+
+.table {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    .thead {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .tr {
+            width: 100%;
+            display: flex;
+            border: 1px solid var(--ax-border-color);
+            background-color: var(--ax-primary-trans-light-color);
+            .th {
+                width: calc(100% / 7);
+                height: 100%;
+                display: flex;
+                justify-content: center;
+                flex-direction: column;
+                border-left: 1px solid var(--ax-border-color);
+                padding: .5em;
+                font-weight: bold;
+            }
+        }
+    }
+    .tbody {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        .tr {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            border: 1px solid var(--ax-border-color);
+            border-top: 0;
+            align-items: center;
+            justify-content: center;
+            .td {
+                width: calc(100% / 7);
+                height: 45px;
+                padding: 0 0.4em;
+                border-left: 1px solid var(--ax-border-color);
+                text-align: center;
+                align-items: center;
+                justify-content: center;
+                display: flex;
+                &:first-child {
+                    padding-right: 0 !important;
+                }
+                div {
+                    width: 12px;
+                    background-color: var(--ax-border-color);
+                    margin-left: .4em;
+                    height: 100%;
+                    cursor: move;
+                }
+                &:last-child {
+                    border-left: 0 !important;
+                }
+            }
+        }
+    }
+    .tr:first-child {
+        overflow: hidden;
+    }
+    .th:last-child {
+        border-left: 0 !important;
+    }
+}
+
+.drag-drop-table-item {
+    width: 100%;
+}
+
+.drag-drop-item-box {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    background: white;
+    font-size: 0.875rem;
+    z-index: 700000 !important;
+}
+
+.cdk-drag-preview {
+    box-sizing: border-box;
+    border-radius: var(--ax-size-border-radius);
+    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+    opacity: 0;
+}
+
+.cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.drag-drop-table-item.cdk-drop-list-dragging .drag-drop-item-box:not(.cdk-drag-placeholder) {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}

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

@@ -0,0 +1,124 @@
+import { Component, OnInit, ViewChild, TemplateRef, ChangeDetectorRef } from '@angular/core';
+import { AXTranslator } from '@acorex/core';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { AXProperyEditorComponent } from '../../property-editor.class';
+import { AXPopupService } from '../../../popup/popup.service';
+import { AXDataSourceReadParams } from '../../../data-source/read-param';
+
+
+export interface AXTableColumnModel {
+  id: number;
+  index: number;
+  fieldName: string;
+  caption?: string;
+  fieldType?: string;
+  displayType?: string;
+  fillByUser?: boolean;
+  rowHeader?: boolean;
+}
+
+@Component({
+  templateUrl: './column.editor.html',
+  styleUrls: ['./column.editor.scss']
+})
+export class ColumnPropertyEditorComponent extends AXProperyEditorComponent<AXTableColumnModel[]> implements OnInit {
+  @ViewChild('tplEdit')
+  tplEdit: TemplateRef<any>;
+
+  columns: AXTableColumnModel[] = [];
+
+  index: number = 2;
+
+  constructor(protected cdr: ChangeDetectorRef, private popupService: AXPopupService) {
+    super(cdr);
+  }
+
+  columnTypeData: any[] = [
+    { id: 1, title: 'String' },
+    { id: 2, title: 'Number' },
+    { id: 3, title: 'Boolean' },
+    { id: 4, title: 'Data' },
+    { id: 5, title: 'Time' }
+  ];
+
+  ngOnInit(): void {
+    this.columns = this.value ? JSON.parse(JSON.stringify(this.value)) : [];
+  }
+
+  ngAfterViewInit() {
+    this.onRenderCompleted.emit();
+  }
+
+  drop(event: CdkDragDrop<string[]>) {
+    moveItemInArray(this.columns, event.previousIndex, event.currentIndex);
+  }
+
+  handleAddColumn() {
+    this.columns.push({
+      id: Math.floor(1000*Math.random()*9000),
+      index: this.index,
+      fieldName: 'ستون' + this.index,
+      caption: 'ستون' + this.index,
+      fieldType: '',
+      displayType: '',
+      fillByUser: false,
+      rowHeader: false
+    });
+    this.index++;
+  }
+
+  handleAddClick() {
+    if (this.columns.length === 0) {
+      this.columns.push({
+        id: Math.floor(1000*Math.random()*9000),
+        index: 1,
+        fieldName: 'ستون 1',
+        caption: 'ستون 1',
+        fieldType: '',
+        displayType: '',
+        fillByUser: false,
+        rowHeader: false
+      });
+    }
+    const popup = this.popupService.open(this.tplEdit, {
+      title: 'ستون',
+      size: 'lg',
+      footerButtons: [
+        {
+          name: 'confirm',
+          text: AXTranslator.get('common.confirm'),
+          style: 'success',
+          submitBehavior: true,
+          cancelBehavior: false,
+          onClick: () => {
+            super.handleValueChange(this.columns);
+            this.cdr.detectChanges();
+            this.index++;
+            popup.close();
+          }
+        },
+        {
+          name: 'cancel',
+          text: AXTranslator.get('common.cancel'),
+          style: 'danger blank',
+          submitBehavior: false,
+          cancelBehavior: true,
+          onClick: () => {
+            this.cdr.detectChanges();
+            popup.close();
+          }
+        }
+      ]
+    });
+  }
+
+  handleRemoveClick(item: AXTableColumnModel) {
+    this.columns = this.columns.filter((c) => c.id !== item.id);
+    super.handleValueChange(this.columns);
+  }
+
+  handleDataReceived = (e: AXDataSourceReadParams) => {
+    return Promise.resolve(this.columnTypeData);
+  }
+
+}

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

@@ -0,0 +1,28 @@
+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 { AXCheckBoxModule } from './../../../checkbox/checkbox.module';
+import { ColumnPropertyEditorComponent } from './column.editor';
+import { AXSelectBoxModule } from '../../../selectbox/selectbox.module';
+import { AXDataSourceModule } from '../../../data-source/datasource.module';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+
+
+
+
+@NgModule({
+    declarations: [ColumnPropertyEditorComponent],
+    imports: [CommonModule, FormsModule, AXTextBoxModule, AXNumberBoxModule, AXColorPickerModule, AXLabelModule, AXPageModule, AXButtonModule, AXCheckBoxModule, AXSelectBoxModule, AXDataSourceModule, DragDropModule],
+    exports: [ColumnPropertyEditorComponent],
+    providers: []
+})
+export class AXColumnPropertyEditorModule {
+    constructor() {
+    }
+}

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

@@ -0,0 +1,80 @@
+<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.display }}</div>
+    </div>
+    <div [attr.title]="getTitle(r.operator)">
+        <div class="value">{{r.value}}</div>
+        <div>
+            <i class="far {{getIcon(r.operator)}}"></i>
+        </div>
+        <div class="value-text">{{'common.value' | trans}}</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.condition' | trans  }}</ax-label>
+                            <ax-select-box [(selectedValues)]="editRow.operator" [allowSearch]="false"
+                                [allowNull]="false" [items]="operators">
+                                <ax-validation>
+                                    <ax-validation-rule type="required"></ax-validation-rule>
+                                </ax-validation>
+                            </ax-select-box>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-12">
+                            <ax-label>{{ 'common.value' | trans  }}</ax-label>
+                            <div [ngSwitch]="dataType">
+                                <ax-text-box *ngSwitchCase="'string'" [(value)]="editRow.value">
+                                    <ax-validation>
+                                        <ax-validation-rule type="required"></ax-validation-rule>
+                                    </ax-validation>
+                                </ax-text-box>
+                                <ax-select-box *ngSwitchCase="'boolean'" [(selectedValues)]="editRow.value"
+                                    [allowSearch]="false" [allowNull]="false" [items]="booleanItems">
+                                    <ax-validation>
+                                        <ax-validation-rule type="required"></ax-validation-rule>
+                                    </ax-validation>
+                                </ax-select-box>
+                                <ax-number-box *ngSwitchDefault [(value)]="editRow.value"
+                                    [showSeparator]="showSeparator" [decimalNumber]="decimalNumber">
+                                    <ax-validation>
+                                        <ax-validation-rule type="required"></ax-validation-rule>
+                                    </ax-validation>
+                                </ax-number-box>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-12">
+                            <ax-label>{{ 'conditional-color-property-editor.replaced-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>
+                    <div class="row">
+                        <div class="col-12">
+                            <ax-label>{{ 'conditional-color-property-editor.replaced-title' | trans  }}</ax-label>
+                            <ax-text-box [(value)]="editRow.display">
+                            </ax-text-box>
+                        </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/conditional-color-editor/conditional-color.editor.scss

@@ -0,0 +1,71 @@
+.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;
+
+                &.value-text {
+                    color: var(--ax-success-color);
+                }
+
+                &.value {
+                    color: var(--ax-danger-color);
+
+                }
+            }
+
+        }
+    }
+}