@hitsoft/e-donusum 1.0.5

package/src/lib/components/hit-xslt-formats/hit-xslt-format.component.ts

@@ -0,0 +1,179 @@
+import { ABP, isNullOrEmpty, isNullOrUndefined, ListService, PagedResultDto } from '@abp/ng.core';
+import { Confirmation, ConfirmationService, ToasterService } from '@abp/ng.theme.shared';
+import { DateAdapter } from '@abp/ng.theme.shared/extensions';
+import { ChangeDetectionStrategy, Component, OnInit, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { NgbDateAdapter } from '@ng-bootstrap/ng-bootstrap';
+import { XsltFormatDto, XsltFormatService } from '../../proxy/xslt-formats';
+import { DxDataGridComponent, DxHtmlEditorComponent } from 'devextreme-angular';
+import { finalize, tap, filter, switchMap, ReplaySubject, Observable } from 'rxjs';
+import { HitXsltFormatService } from '../../hit-proxy/hit-xslt-formats/hit-xslt-format.service';
+import { ContentMasterInputDto } from '../../hit-proxy/hit-content-master/models';
+import { NoteRuleCreateDto } from '../../proxy/note-rules';
+import { HitXsltFormatCreateDto } from '../../hit-proxy/hit-xslt-formats/models';
+
+@Component({
+    selector: 'lib-xslt-format',
+    changeDetection: ChangeDetectionStrategy.Default,
+    providers: [ListService, { provide: NgbDateAdapter, useClass: DateAdapter }],
+    templateUrl: './hit-xslt-format.component.html',
+    styles: [],
+})
+export class HitXsltFormatComponent implements OnInit {
+    @ViewChild('dxXsltFormatInstance', { static: false }) dxXsltFormatInstance: DxDataGridComponent
+    constructor(
+        private readonly toasterService: ToasterService,
+        private confirmation: ConfirmationService,
+        private readonly service: XsltFormatService,
+        private readonly hitXsltFormatService: HitXsltFormatService,
+        private fb: FormBuilder
+    ) { }
+
+    xsltFormatDataSource: any;
+    typesDataSource = [];
+
+    form: FormGroup;
+    isModalBusy = false;
+    isModalOpen = false;
+    selected?: XsltFormatDto;
+
+    selectedFile?: ContentMasterInputDto
+
+    ngOnInit() {
+        this.xsltFormatDataSource = this.hitXsltFormatService.LoadXsltFormats
+
+        this.hitXsltFormatService.getTypes().subscribe(list => {
+            this.typesDataSource = list;
+        })
+    }
+
+    buildForm() {
+        const { name, type, fileName, isDefault } = this.selected || {};
+
+        this.form = this.fb.group({
+            name: [name ?? null, [Validators.required, Validators.maxLength(64)]],
+            type: [type ?? 0, []],
+            fileName: [fileName ?? null, [Validators.required, Validators.maxLength(64)]],
+            isDefault: [isDefault ?? false, []],
+        });
+    }
+
+    hideForm() {
+        this.isModalOpen = false;
+        this.form.reset();
+    }
+
+    showForm() {
+        this.buildForm();
+        this.isModalOpen = true;
+    }
+
+    submitForm() {
+        if (this.form.invalid) return;
+
+        const request = this.selected
+            ? this.hitXsltFormatService.update(this.selected.id, {
+                ...this.form.value,
+                concurrencyStamp: this.selected.concurrencyStamp,
+            })
+            : this.hitXsltFormatService.create(
+                {
+                    xsltFormat: this.form.value,
+                    selectedFile: this.selectedFile
+                }
+            );
+
+        this.isModalBusy = true;
+
+        request
+            .pipe(
+                finalize(() => (this.isModalBusy = false)),
+                tap(() => this.hideForm())
+            )
+            .subscribe(() => this.dxXsltFormatInstance.instance.refresh());
+    }
+
+    create() {
+        this.selected = undefined;
+        this.showForm();
+    }
+
+    update(record: XsltFormatDto) {
+        this.selected = record;
+        this.showForm();
+    }
+
+    delete(record: XsltFormatDto) {
+        this.confirmation
+            .warn('eDonusum::DeleteConfirmationMessage', 'eDonusum::AreYouSure', {
+                messageLocalizationParams: [],
+            })
+            .pipe(
+                filter(status => status === Confirmation.Status.confirm),
+                switchMap(() => this.service.delete(record.id))
+            )
+            .subscribe(() => this.dxXsltFormatInstance.instance.refresh());
+    }
+
+    openAttachment() {
+        document.getElementById('attachment').click();
+    }
+
+    changeHitFileUpload(event) {
+        debugger;
+        var files = event.target.files;
+        if (files.length > 0) {
+            var fileToLoad = files[0];
+            this.convertFile(fileToLoad).subscribe(base64 => {
+                this.selectedFile = {
+                    blobInputDto: {
+                        content: base64,
+                        name: fileToLoad.name
+                    },
+                    contentMasterCreateDto: {
+                        tableName: "XSLTFORMATS",
+                        moduleName: "EDONUSUM",
+                    }
+                }
+            });
+            this.form.controls.fileName.setValue(fileToLoad.name)
+        };
+    }
+
+    convertFile(file: File): Observable<string> {
+        const result = new ReplaySubject<string>(1);
+        const reader = new FileReader();
+        reader.readAsBinaryString(file);
+        reader.onload = event => result.next(btoa(event.target.result.toString()));
+
+        return result;
+    }
+
+    downloadFile(){
+        this.hitXsltFormatService.downloadXsltFile(this.selected?.id).subscribe(item => {
+            debugger
+            const source = `data:${item.mimeType};base64,${item.content}`;
+            const link = document.createElement('a');
+            link.href = source;
+            link.download = `${item.filename}`;
+            this.toasterService.success('eDonusum::Done')
+            link.click();
+        });
+    }
+
+
+    // deleteEquipmentFile(row: any) {
+    //     console.log(row)
+    //     if (row.data.equipmentFile.blobId) {
+    //         //db den sil
+    //         this.equipmentFileService.delete(row.data.equipmentFile.id).subscribe(() => {
+    //             this.dxEquipmentFileDataSource.splice(row.rowIndex, 1);
+    //         })
+    //     } else {
+    //         //listeden sil
+    //         this.dxEquipmentFileDataSource.splice(row.rowIndex, 1);
+
+    //     }
+    // }
+
+}

package/src/lib/components/hit-xslt-formats/hit-xslt-format.module.ts

@@ -0,0 +1,38 @@
+import { CoreModule } from '@abp/ng.core';
+import { ThemeSharedModule } from '@abp/ng.theme.shared';
+import { NgModule } from '@angular/core';
+import {
+  NgbCollapseModule,
+  NgbDatepickerModule,
+  NgbDropdownModule,
+} from '@ng-bootstrap/ng-bootstrap';
+import { NgxValidateCoreModule } from '@ngx-validate/core';
+import { CommercialUiModule } from '@volo/abp.commercial.ng.ui';
+import { PageModule } from '@abp/ng.components/page';
+import { DxDataGridModule, DxHtmlEditorModule, DxLookupModule, DxSelectBoxModule, DxTabPanelModule, DxTextAreaModule, DxTextBoxModule } from 'devextreme-angular';
+import { HitXsltFormatComponent } from './hit-xslt-format.component';
+
+@NgModule({
+  declarations: [HitXsltFormatComponent],
+  imports: [
+    CoreModule,
+    ThemeSharedModule,
+    CommercialUiModule,
+    NgxValidateCoreModule,
+    NgbCollapseModule,
+    NgbDatepickerModule,
+    NgbDropdownModule,
+    DxDataGridModule,
+    DxTextAreaModule,
+    DxTextBoxModule,
+    DxSelectBoxModule,
+    DxLookupModule,
+    DxTabPanelModule,
+    PageModule,
+  ],
+})
+export class HitXsltFormatModule {}
+
+export function loadHitXsltFormatModuleModuleAsChild() {
+  return Promise.resolve(HitXsltFormatModule);
+}

package/src/lib/components/hit-xslt-rules/hit-xslt-rule.component.html

@@ -0,0 +1,341 @@
+<abp-page [title]="'eDonusum::XsltRules' | abpLocalization">
+  <abp-page-toolbar-container class="col">
+    <div class="text-lg-end pt-2">
+      <button *abpPermission="'eDonusum.XsltRules.Create'" class="btn btn-primary btn-sm" type="button"
+        (click)="create()">
+        <i class="fa fa-plus me-1" aria-hidden="true"></i>
+        {{ 'eDonusum::NewXsltRule' | abpLocalization }}
+      </button>
+    </div>
+  </abp-page-toolbar-container>
+
+  <div class="card">
+    <div class="card-body">
+      <dx-data-grid #dxXsltRuleInstance [dataSource]="xsltRuleDataSource" [showRowLines]="true" [showBorders]="true"
+        [remoteOperations]="true" [hoverStateEnabled]="true" [repaintChangesOnly]="true" [allowColumnResizing]="true"
+        columnResizingMode="widget" [allowColumnReordering]="true" [columnAutoWidth]="true" [columnHidingEnabled]="true"
+        style="height: 75vh;">
+        <dxo-pager [visible]="true" [showInfo]="true" [allowedPageSizes]="[50,100,200]" [showNavigationButtons]="true"
+          [showPageSizeSelector]="true">
+        </dxo-pager>
+        <dxo-paging [pageSize]="50"></dxo-paging>
+        <dxo-column-chooser [allowSearch]="true" [enabled]="true" mode="select"></dxo-column-chooser>
+        <dxo-column-fixing [enabled]="true"></dxo-column-fixing>
+        <dxo-group-panel [visible]="true" [allowColumnDragging]="true"></dxo-group-panel>
+        <dxo-grouping #expand [autoExpandAll]="false" [allowCollapsing]="true"
+          [contextMenuEnabled]="true"></dxo-grouping>
+        <dxo-header-filter [allowSearch]="true" [visible]="true"></dxo-header-filter>
+        <dxo-filter-row [visible]="true"></dxo-filter-row>
+        <dxo-export [enabled]="true" [allowExportSelectedData]="false"></dxo-export>
+        <dxo-column-fixing [enabled]="true"></dxo-column-fixing>
+        <dxo-filter-builder [allowHierarchicalFields]="true"></dxo-filter-builder>
+        <dxo-filter-panel [visible]="true"></dxo-filter-panel>
+        <dxo-sorting mode="single"></dxo-sorting>
+        <dxo-scrolling mode="horizontal" showScrollbar="always"></dxo-scrolling>
+        <dxi-column [fixed]="true" dataField="id" width="120" [allowGrouping]="false" [allowFiltering]="false"
+          [allowHeaderFiltering]="false" [allowHiding]="false" [allowReordering]="false"
+          cellTemplate="operationTemplate" caption="{{ 'AbpUi::Actions' | abpLocalization }}">
+          <div *dxTemplate="let row of 'operationTemplate'">
+            <div ngbDropdown container="body" class="d-inline-block">
+              <button class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
+                ngbDropdownToggle [disabled]="disabledIdColumn">
+                <i class="fa fa-cog mr-1" aria-hidden="true"></i>
+                {{ 'AbpUi::Actions' | abpLocalization }}
+              </button>
+              <div ngbDropdownMenu>
+                <button ngbDropdownItem (click)="update(row.data)">
+                  <i class="fa fa-edit" aria-hidden="true"></i> {{ 'AbpUi::Edit' | abpLocalization }}
+                </button>
+                <button ngbDropdownItem (click)="delete(row.data)">
+                  <i class="fa fa-trash" aria-hidden="true"></i> {{ 'AbpUi::Delete' | abpLocalization
+                  }}
+                </button>
+              </div>
+            </div>
+          </div>
+        </dxi-column>
+        <dxi-column dataField="xsltRule.ruleName" caption="{{'eDonusum::RuleName'|abpLocalization}}"></dxi-column>
+        <dxi-column dataField="xsltRule.orderNo" caption="{{'eDonusum::OrderNo'|abpLocalization}}"></dxi-column>
+        <dxi-column dataField="xsltRule.isPassive" caption="{{'eDonusum::IsPassive'|abpLocalization}}"></dxi-column>
+      </dx-data-grid>
+    </div>
+  </div>
+</abp-page>
+
+<abp-modal [busy]="isModalBusy" [(visible)]="isModalOpen" [options]="{ size: 'lg' }">
+  <ng-template #abpHeader>
+    <h3>
+      {{ (selected ? 'AbpUi::Edit' : 'eDonusum::NewXsltRule') | abpLocalization }}
+    </h3>
+  </ng-template>
+
+  <ng-template #abpBody>
+    <form [formGroup]="form" id="xslt-rule" (ngSubmit)="submitForm()" validateOnSubmit>
+      <dx-tab-panel [animationEnabled]="true" [swipeEnabled]="true" [loop]="true" #tabPanel>
+        <dxi-item title="{{ 'eDonusum::RuleInfo' | abpLocalization }}" icon="fas fa-file-alt">
+          <div class="container-fluid">
+            <div class="mt-2 fade-in-top">
+              <div class="row" style="margin-top:20px">
+                <div class="col-md">
+                  <div class="mb-3">
+                    <label class="form-label" for="xslt-rule-rule-name">
+                      {{ 'eDonusum::RuleName' | abpLocalization }} *
+                    </label>
+
+                    <dx-text-box id="xslt-rule-rule-name" [disabled]="isUpdate" formControlName="ruleName"
+                      class="form-control" maxlength="256" autofocus></dx-text-box>
+                  </div>
+                </div>
+                <div class="col-md">
+                  <div class="mb-3">
+                    <label class="form-label" for="xslt-rule-order-no">
+                      {{ 'eDonusum::OrderNo' | abpLocalization }}
+                    </label>
+
+                    <input type="number" [min]="0" id="xslt-rule-order-no" formControlName="orderNo"
+                      class="form-control" />
+                  </div>
+                </div>
+              </div>             
+              <div class="row">
+                <div class="col-md">
+                  <div class="mb-3">
+                    <label class="form-label" for="xslt-rule-order-no">
+                      {{ 'eDonusum::XsltType' | abpLocalization }}
+                    </label>
+                    <dx-select-box id="xslt-rule-xslt-type" formControlName="xsltType" (onValueChanged)="xsltTypeChanged()"
+                      class="form-control" displayExpr="displayName" valueExpr="id" [dataSource]="xsltFormatTypesDataSource" [value]="xsltFormatTypesDataSource[0].id"
+                      placeholder="{{ 'eDonusum::Pick' | abpLocalization }}..">
+                    </dx-select-box>
+                  </div>
+                </div>
+                <div class="col-md">
+                  <div class="mb-3">
+                    <label class="form-label" for="xslt-rule-xslt-format">
+                      {{ 'eDonusum::XsltFormat' | abpLocalization }}
+                    </label>
+
+                    <dx-drop-down-box [(value)]="xsltFormatGridBoxValue" [(opened)]="isXsltFormatGridBoxOpened"
+                    valueExpr="id" [deferRendering]="false" [displayExpr]="xsltFormatGridBox_displayExpr"
+                    placeholder="{{ 'eDonusum::SelectAValue' | abpLocalization }}"
+                    [showClearButton]="false" [dataSource]="xsltFormats" formControlName="xsltFormatId"
+                    (onOptionChanged)="onXsltFormatGridBoxOptionChanged($event)">
+                    <dx-data-grid [dataSource]="xsltFormats" [hoverStateEnabled]="true" [height]="250"
+                        [(selectedRowKeys)]="xsltFormatGridBoxValue" [remoteOperations]="true">
+                        <dxi-column dataField="name" caption="Name"></dxi-column>
+                        <dxi-column dataField="fileName" caption="FileName"></dxi-column>
+                        <dxo-selection mode="single"></dxo-selection>
+                        <dxo-filter-row [visible]="true"></dxo-filter-row>
+                        <dxo-scrolling mode="infinite"></dxo-scrolling>
+                        <dxo-paging [enabled]="true" [pageSize]="10"></dxo-paging>
+                    </dx-data-grid>
+                </dx-drop-down-box>
+                  </div>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-md">
+                  <div class="mb-3">
+                    <label class="form-label" for="note-rule-rule-type">
+                      {{ 'eDonusum::Document' | abpLocalization }}
+                    </label>
+
+                    <dx-select-box id="xslt-rule-document" [disabled]="isUpdate" formControlName="document"
+                      (onValueChanged)="documentChanged()" class="form-control" displayExpr="text" valueExpr="id"
+                      [dataSource]="tablesDataSource" placeholder="{{ 'eDonusum::Pick' | abpLocalization }}..">
+                    </dx-select-box>
+                  </div>
+                </div>
+                <div class = "col-md"></div>
+              </div>
+              <div class="row">
+                <div class="col-md">
+                  <div class="mb-3">
+                    <label class="form-label" for="xslt-rule-note-query">
+                      {{ 'eDonusum::RuleQuery' | abpLocalization }}
+                    </label>
+                    <dx-html-editor #dxHtmlEditor class="form-control" id="xslt-rule-note-query-html" [height]="100"
+                      maxlength="4096" formControlName="noteQueryHTML">
+                      <dxi-mention valueExpr="text" displayExpr="text" searchExpr="text"
+                        [dataSource]="htmlMentionDataSource"></dxi-mention>
+                    </dx-html-editor>
+                  </div>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-md">
+                  <div class="mb-3">
+                    <label class="form-label" for="xslt-rule-desc">
+                      {{ 'eDonusum::Desc' | abpLocalization }}
+                    </label>
+
+                    <input id="xslt-rule-desc" formControlName="desc" class="form-control" maxlength="512" />
+                  </div>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-md">
+                  <div class="form-check mb-3">
+                    <input type="checkbox" id="xslt-rule-is-passive" formControlName="isPassive"
+                      class="form-check-input" />
+
+                    <label for="xslt-rule-is-passive" class="form-check-label">
+                      {{ 'eDonusum::IsPassive' | abpLocalization }}
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </dxi-item>
+        <dxi-item title="{{ 'eDonusum::Scenarios' | abpLocalization }}" icon="fas fa-pencil-alt">
+          <div class="container-fluid">
+            <div class="mt-2 fade-in-top">
+              <div class="row" style="margin-top:20px; margin-bottom:20px">
+                <div class="col">
+                  <dx-data-grid #dxScenarioInstance [dataSource]="scenarioDataSource" [showRowLines]="true"
+                    [showBorders]="true" [remoteOperations]="true" [hoverStateEnabled]="true"
+                    [repaintChangesOnly]="true" [allowColumnResizing]="true" columnResizingMode="widget"
+                    [allowColumnReordering]="true" [columnAutoWidth]="true" [columnHidingEnabled]="true"
+                    style="height: 50vh;" keyExpr="id" [(selectedRowKeys)]="selectedScenarios">
+                    <dxo-selection mode="multiple" selectAllMode="page">
+                    </dxo-selection>
+
+                    <dxo-column-fixing [enabled]="true"></dxo-column-fixing>
+
+                    <dxo-header-filter [allowSearch]="true" [visible]="true"></dxo-header-filter>
+
+                    <dxo-filter-row [visible]="true"></dxo-filter-row>
+
+                    <dxo-column-fixing [enabled]="true"></dxo-column-fixing>
+
+                    <dxo-sorting mode="single"></dxo-sorting>
+
+                    <dxo-scrolling mode="horizontal" showScrollbar="always"></dxo-scrolling>
+
+                    <dxi-column dataField="displayName" caption="{{ 'eDonusum::Name' | abpLocalization }}"></dxi-column>
+                  </dx-data-grid>
+                </div>
+              </div>
+            </div>
+          </div>
+        </dxi-item>
+        <dxi-item title="{{ 'eDonusum::DocTypes' | abpLocalization }}" icon="fas fa-envelope">
+          <div class="container-fluid">
+            <div class="mt-2 fade-in-top">
+              <div class="row" style="margin-top:20px; margin-bottom:20px">
+                <div class="col">
+                  <dx-data-grid #dxDocTypeInstance [dataSource]="docTypeDataSource" [showRowLines]="true"
+                    [showBorders]="true" [remoteOperations]="true" [hoverStateEnabled]="true"
+                    [repaintChangesOnly]="true" [allowColumnResizing]="true" columnResizingMode="widget"
+                    [allowColumnReordering]="true" [columnAutoWidth]="true" [columnHidingEnabled]="true"
+                    style="height: 50vh;" keyExpr="id" [(selectedRowKeys)]="selectedDocTypes">
+                    <dxo-selection mode="multiple" selectAllMode="page">
+                    </dxo-selection>
+
+                    <dxo-column-fixing [enabled]="true"></dxo-column-fixing>
+
+                    <dxo-header-filter [allowSearch]="true" [visible]="true"></dxo-header-filter>
+
+                    <dxo-filter-row [visible]="true"></dxo-filter-row>
+
+                    <dxo-column-fixing [enabled]="true"></dxo-column-fixing>
+
+                    <dxo-sorting mode="single"></dxo-sorting>
+
+                    <dxo-scrolling mode="horizontal" showScrollbar="always"></dxo-scrolling>
+
+                    <dxi-column dataField="displayName" caption="{{ 'eDonusum::Name' | abpLocalization }}"></dxi-column>
+                  </dx-data-grid>
+                </div>
+              </div>
+            </div>
+          </div>
+        </dxi-item>
+      </dx-tab-panel>
+
+    </form>
+  </ng-template>
+
+  <ng-template #abpFooter>
+    <button type="button" class="btn btn-secondary" abpClose>
+      {{ 'AbpUi::Cancel' | abpLocalization }}
+    </button>
+    <button type="button" class="btn btn-secondary" (click)="previewQuery()">
+      {{ 'eDonusum::PreviewQuery' | abpLocalization }}
+    </button>
+    <!-- <abp-button iconClass="fa fa-check" buttonType="submit" formName="note-rule">
+      {{ 'AbpUi::Save' | abpLocalization }}
+    </abp-button> -->
+    <button type="button" iconClass="fa fa-check" class="btn btn-primary" formName="xslt-rule" (click)="submitForm()">
+      {{ 'AbpUi::Save' | abpLocalization }}
+    </button>
+  </ng-template>
+</abp-modal>
+
+<abp-modal [busy]="isModalBusyPreview" [(visible)]="isModalOpenPreview" [options]="{ size: 'lg' }">
+  <ng-template #abpHeader>
+    <h3>
+      {{ (selected ? 'AbpUi::Edit' : 'eDonusum::PreviewQuery') | abpLocalization }}
+    </h3>
+  </ng-template>
+
+  <ng-template #abpBody>
+    <form id="note-rule-preview">
+
+      <div *ngIf="!isParameterless">
+        <h3>{{ 'eDonusum::Parameters' | abpLocalization }}</h3>
+        <hr>
+        <dx-data-grid #dxParamInstance [dataSource]="paramsDataSource" [showRowLines]="true" [showBorders]="true"
+          [hoverStateEnabled]="true" [repaintChangesOnly]="true" [allowColumnResizing]="true"
+          columnResizingMode="widget" [allowColumnReordering]="true" [columnAutoWidth]="true"
+          [columnHidingEnabled]="true" style="height: 40vh;">
+
+          <dxo-editing mode="cell" [useIcons]="false" [allowUpdating]="true" [allowAdding]="false"
+            [allowDeleting]="false">
+          </dxo-editing>
+
+          <dxo-column-fixing [enabled]="true"></dxo-column-fixing>
+          <dxo-column-fixing [enabled]="true"></dxo-column-fixing>
+          <dxo-sorting mode="single"></dxo-sorting>
+          <dxo-scrolling mode="horizontal" showScrollbar="always"></dxo-scrolling>
+
+          <dxi-column dataField="paramName" [allowEditing]="false"
+            caption="{{'eDonusum::ParamName'|abpLocalization}}"></dxi-column>
+          <dxi-column dataField="paramValue" caption="{{'eDonusum::ParamValue'|abpLocalization}}"></dxi-column>
+        </dx-data-grid>
+        <br>
+        <button type="button" class="btn btn-primary" style="float: right;" (click)="runQuery()">
+          {{ 'eDonusum::RunQuery' | abpLocalization }}
+        </button>
+        <br><br>
+      </div>
+
+      <h3>{{ 'eDonusum::QueryResult' | abpLocalization }}</h3>
+      <hr>
+      <dx-data-grid #dxPreview [dataSource]="previewDataSource" [showRowLines]="true" [showBorders]="true"
+        [remoteOperations]="true" [hoverStateEnabled]="true" [repaintChangesOnly]="true" [allowColumnResizing]="true"
+        columnResizingMode="widget" [allowColumnReordering]="true" [columnAutoWidth]="true" [columnHidingEnabled]="true"
+        style="height: 60vh;">
+        <dxo-column-fixing [enabled]="true"></dxo-column-fixing>
+
+        <dxo-header-filter [allowSearch]="true" [visible]="true"></dxo-header-filter>
+
+        <dxo-filter-row [visible]="true"></dxo-filter-row>
+
+        <dxo-column-fixing [enabled]="true"></dxo-column-fixing>
+
+        <dxo-sorting mode="single"></dxo-sorting>
+
+        <dxo-scrolling mode="horizontal" showScrollbar="always"></dxo-scrolling>
+
+      </dx-data-grid>
+    </form>
+  </ng-template>
+
+  <ng-template #abpFooter>
+    <button type="button" class="btn btn-secondary" abpClose>
+      {{ 'AbpUi::Cancel' | abpLocalization }}
+    </button>
+  </ng-template>
+</abp-modal>