@hitsoft/e-donusum 1.0.5

package/src/lib/components/hit-invoices/hit-invoice.component.ts

@@ -0,0 +1,114 @@
+import { ABP, isNullOrEmpty, isNullOrUndefined, ListService, PagedResultDto } from '@abp/ng.core';
+import { DateAdapter } from '@abp/ng.theme.shared/extensions';
+import { ChangeDetectionStrategy, Component, HostListener, OnInit, Pipe, PipeTransform, ViewChild } from '@angular/core';
+import { NgbDateAdapter } from '@ng-bootstrap/ng-bootstrap';
+import { DxDataGridComponent } from 'devextreme-angular';
+import { HitInvoiceService } from '../../hit-proxy/hit-invoices/hit-invoice.service';
+
+@Component({
+    selector: 'lib-invoice',
+    changeDetection: ChangeDetectionStrategy.Default,
+    providers: [ListService, { provide: NgbDateAdapter, useClass: DateAdapter }],
+    templateUrl: './hit-invoice.component.html',
+    styles: [],
+})
+export class HitInvoiceComponent implements OnInit {
+    @ViewChild('dxInvoiceInstance', { static: false }) dxInvoiceInstance: DxDataGridComponent
+
+    invoicesDataSource: any
+    invoiceStatusLookup: any
+    invoiceReceiverResponseLookup: any
+    invoiceObjectsEnumLookup: any
+
+    isPreviewModalOpen = false;
+    isPreviewModalBusy = false;
+
+    faturaOnizleme: any;
+
+    constructor(
+        public readonly list: ListService,
+        private readonly invoiceService: HitInvoiceService,
+    ) { }
+
+    ngOnInit(): void {
+        this.invoicesDataSource = this.invoiceService.LoadInvoices;
+        this.invoiceService.getStatuses().subscribe(list => {
+            this.invoiceStatusLookup = list;
+        });
+        this.invoiceService.getReceiverResponses().subscribe(list => {
+            this.invoiceReceiverResponseLookup = list;
+        })
+        this.invoiceService.getSapObjects().subscribe(list => {
+            this.invoiceObjectsEnumLookup = list;
+        })
+    }
+
+    sendInvoiceSingle(record) {
+        let ids: string[] = [record.id];
+        
+        this.invoiceService.sendInvoiceById(ids).subscribe(() => this.dxInvoiceInstance.instance.refresh());
+    }
+
+    sendInvoiceMultiple() {
+        let ids: string[] = [];
+
+        this.dxInvoiceInstance.instance.getVisibleRows().filter(i => i.isSelected == true).forEach(element => {
+            ids.push(element.data.id)
+        })
+
+        this.invoiceService.sendInvoiceById(ids).subscribe(() => this.dxInvoiceInstance.instance.refresh());
+    }
+
+    sendInvoiceToEntegrator() {
+        this.invoiceService.sendInvoiceToEntegrator().subscribe(() => this.dxInvoiceInstance.instance.refresh());
+    }
+
+    getInvoicesFromConnector() {
+        this.invoiceService.getInvoicesFromConnector().subscribe(() => this.dxInvoiceInstance.instance.refresh());
+    }
+
+    getInvoiceResponses() {
+        this.invoiceService.getInvoicesResponses().subscribe(() => this.dxInvoiceInstance.instance.refresh());
+    }
+
+    getInvoiceView(record) {
+        this.invoiceService.getInvoiceView(record.uuId).subscribe(item => {
+            const source = `data:${item.mimeType};base64,${item.content}`;
+            const link = document.createElement('a');
+            link.href = source;
+            link.download = `${item.filename}`;
+            link.click();
+        });
+    }
+
+
+    getInvoicePreview(record) {
+        this.invoiceService.getInvoicePreview(record.id, "OINV").subscribe(fatura => {
+            const source = `data:text/html;base64,${fatura.previewHTML}`;
+            const newTab = window.open();
+            newTab.document.title = record.id
+            newTab.document.body.innerHTML = `<iframe src="${source}" width="100%" height="100%" style="border:none;"></iframe>`;
+        });
+    }
+    
+    getReceiverResponseName(responseId) {
+        const response = this.invoiceReceiverResponseLookup.find((x) => x.id === responseId);
+        if (response) {
+            return response.displayName;
+        }
+        return "";
+    }
+
+    getIconClass(responseId) {
+        if (responseId == 0) {
+            return "fas fa-clock";
+        }
+        else if (responseId == 1) {
+            return "fas fa-check-circle";
+        }
+        else if (responseId == 2) {
+            return "fas fa-times-circle";
+        }
+        return "";
+    }
+}

package/src/lib/components/hit-invoices/hit-invoice.module.ts

@@ -0,0 +1,43 @@
+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 dxTextBox from 'devextreme/ui/text_box';
+import { HitInvoiceComponent } from './hit-invoice.component';
+import { SanitizeHtmlPipe } from './sanitize-html.pipe';
+import { HtmlParser } from '@angular/compiler';
+
+@NgModule({
+  declarations: [HitInvoiceComponent, SanitizeHtmlPipe],
+  imports: [
+    CoreModule,
+    ThemeSharedModule,
+    CommercialUiModule,
+    NgxValidateCoreModule,
+    NgbCollapseModule,
+    NgbDatepickerModule,
+    NgbDropdownModule,
+    DxDataGridModule,
+    DxTextAreaModule,
+    DxTextBoxModule,
+    DxHtmlEditorModule,
+    DxSelectBoxModule,
+    DxLookupModule,
+    DxTabPanelModule,
+    PageModule,
+    
+  ],
+})
+export class HitInvoiceModule {}
+
+export function loadHitInvoiceModuleAsChild() {
+  return Promise.resolve(HitInvoiceModule);
+}

package/src/lib/components/hit-invoices/sanitize-html.pipe.ts

@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+@Pipe({ name: 'sanitizeHtml' })
+export class SanitizeHtmlPipe implements PipeTransform {
+
+    constructor(
+        private _sanitizer: DomSanitizer,
+    ) { }
+
+    transform(value: string): SafeHtml {
+        debugger;
+        return this._sanitizer.bypassSecurityTrustHtml(value);
+    }
+}

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

@@ -0,0 +1,384 @@
+<abp-page [title]="'eDonusum::NoteRules' | abpLocalization">
+  <abp-page-toolbar-container class="col">
+    <div class="text-lg-end pt-2">
+      <button *abpPermission="'eDonusum.NoteRules.Create'" class="btn btn-primary btn-sm" type="button"
+        (click)="create()">
+        <i class="fa fa-plus me-1" aria-hidden="true"></i>
+        {{ 'eDonusum::NewNoteRule' | abpLocalization }}
+      </button>
+    </div>
+  </abp-page-toolbar-container>
+
+  <div class="card">
+    <div class="card-body">
+      <dx-data-grid #dxNoteRuleInstance [dataSource]="noteRuleDataSource" [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="ruleName" caption="{{'eDonusum::RuleName'|abpLocalization}}"></dxi-column>
+        <dxi-column dataField="ruleType" caption="{{'eDonusum::RuleType'|abpLocalization}}">
+          <dxo-lookup [dataSource]="ruleTypesDataSource" valueExpr="id" displayExpr="displayName">
+          </dxo-lookup>
+        </dxi-column>
+        <dxi-column dataField="descType" caption="{{'eDonusum::DescType'|abpLocalization}}">
+          <dxo-lookup [dataSource]="descTypesDataSource" valueExpr="id" displayExpr="displayName">
+          </dxo-lookup>
+        </dxi-column>
+        <dxi-column dataField="orderNo" caption="{{'eDonusum::OrderNo'|abpLocalization}}"></dxi-column>
+        <dxi-column dataField="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::NewNoteRule') | abpLocalization }}
+    </h3>
+  </ng-template>
+
+  <ng-template #abpBody>
+    <form [formGroup]="form" id="note-rule" (ngSubmit)="submitForm()" validateOnSubmit>
+      <dx-tab-panel [animationEnabled]="true" [swipeEnabled]="true" [loop]="true" #tabPanel>
+        <dxi-item title="{{ 'eDonusum::QueryInfo' | 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="note-rule-rule-name">
+                      {{ 'eDonusum::RuleName' | abpLocalization }} *
+                    </label>
+
+                    <dx-text-box id="note-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="note-rule-order-no">
+                      {{ 'eDonusum::OrderNo' | abpLocalization }}
+                    </label>
+
+                    <input type="number" [min]="0" id="note-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="note-rule-rule-type">
+                      {{ 'eDonusum::RuleType' | abpLocalization }}
+                    </label>
+
+                    <dx-select-box id="note-rule-rule-type" [disabled]="isUpdate" formControlName="ruleType"
+                      (onValueChanged)="ruleTypeChanged()" class="form-control" displayExpr="displayName" valueExpr="id"
+                      [dataSource]="ruleTypesDataSource" placeholder="{{ 'eDonusum::Pick' | abpLocalization }}..">
+                    </dx-select-box>
+                  </div>
+                </div>
+                <div class="col-md">
+                  <div class="mb-3">
+                    <label class="form-label" for="note-rule-desc-type">
+                      {{ 'eDonusum::DescType' | abpLocalization }}
+                    </label>
+                    <dx-select-box id="note-rule-desc-type" [disabled]="isUpdate" formControlName="descType"
+                      class="form-control" displayExpr="displayName" valueExpr="id" [dataSource]="descTypesDataSource"
+                      placeholder="{{ 'eDonusum::Pick' | abpLocalization }}..">
+                    </dx-select-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="note-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="note-rule-first-desc">
+                      {{ 'eDonusum::FirstDesc' | abpLocalization }}
+                    </label>
+                    <dx-text-area class="form-control" id="note-rule-first-desc" [height]="70"
+                      formControlName="firstDesc" maxlength="4096" style="resize: none;">
+                    </dx-text-area>
+                  </div>
+                </div>
+              </div>
+              <div class="row" *ngIf="isQueryable">
+                <div class="col-md">
+                  <div class="mb-3">
+                    <label class="form-label" for="note-rule-note-query">
+                      {{ 'eDonusum::NoteQuery' | abpLocalization }}
+                    </label>
+                    <dx-html-editor #dxHtmlEditor class="form-control" id="note-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" *ngIf="!isQueryable">
+                <div class="col-md">
+                  <div class="mb-3">
+                    <label class="form-label" for="note-rule-fix-desc">
+                      {{ 'eDonusum::FixDesc' | abpLocalization }}
+                    </label>
+
+                    <dx-text-area id="note-rule-fix-desc" formControlName="fixDesc" class="form-control"
+                      [height]="100"></dx-text-area>
+                  </div>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-md">
+                  <div class="mb-3">
+                    <label class="form-label" for="note-rule-last-desc">
+                      {{ 'eDonusum::LastDesc' | abpLocalization }}
+                    </label>
+
+                    <dx-text-area class="form-control" id="note-rule-last-desc" [height]="70" formControlName="lastDesc"
+                      maxlength="4096" style="resize: none;">
+                    </dx-text-area>
+                  </div>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-md">
+                  <div class="mb-3">
+                    <label class="form-label" for="note-rule-desc">
+                      {{ 'eDonusum::Desc' | abpLocalization }}
+                    </label>
+
+                    <input id="note-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="note-rule-is-bold" formControlName="isBold" class="form-check-input" />
+
+                    <label for="note-rule-is-bold" class="form-check-label">
+                      {{ 'eDonusum::IsBold' | abpLocalization }}
+                    </label>
+                  </div>
+                </div>
+                <div class="col-md">
+                  <div class="form-check mb-3">
+                    <input type="checkbox" id="note-rule-is-passive" formControlName="isPassive"
+                      class="form-check-input" />
+
+                    <label for="note-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" *ngIf="isQueryable" (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="note-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>