@hitsoft/e-donusum 1.0.5

package/src/lib/despatch-line-order-line-references/despatch-line-order-line-reference/components/despatch-line-order-line-reference.component.html

@@ -0,0 +1,786 @@
+<abp-page [title]="'eDonusum::DespatchLineOrderLineReferences' | abpLocalization">
+  <abp-page-toolbar-container class="col">
+    <div class="text-lg-end pt-2">
+      <button
+        class="btn btn-primary btn-sm mx-2"
+        type="button"
+        [disabled]="isExportToExcelBusy"
+        (click)="exportToExcel()"
+      >
+        {{ 'eDonusum::ExportToExcel' | abpLocalization }}
+      </button>
+
+      <button
+        *abpPermission="'eDonusum.DespatchLineOrderLineReferences.Create'"
+        class="btn btn-primary btn-sm"
+        type="button"
+        (click)="create()"
+      >
+        <i class="fa fa-plus me-1" aria-hidden="true"></i>
+        {{ 'eDonusum::NewDespatchLineOrderLineReference' | abpLocalization }}
+      </button>
+    </div>
+  </abp-page-toolbar-container>
+
+  <abp-advanced-entity-filters localizationSourceName="eDonusum" [list]="list">
+    <abp-advanced-entity-filters-form>
+      <form #filterForm (keyup.enter)="list.get()">
+        <div class="row">
+          <div class="col-12 col-sm-auto">
+            <div class="mb-3">
+              <label class="form-label" for="lineIdFilter">
+                {{ 'eDonusum::LineId' | abpLocalization }}
+              </label>
+
+              <input
+                id="lineIdFilter"
+                class="form-control"
+                [(ngModel)]="filters.lineId"
+                [ngModelOptions]="{ standalone: true }"
+              />
+            </div>
+          </div>
+          <div class="col-12 col-sm-auto">
+            <div class="mb-3">
+              <label class="form-label" for="salesOrderLineIdFilter">
+                {{ 'eDonusum::SalesOrderLineId' | abpLocalization }}
+              </label>
+
+              <input
+                id="salesOrderLineIdFilter"
+                class="form-control"
+                [(ngModel)]="filters.salesOrderLineId"
+                [ngModelOptions]="{ standalone: true }"
+              />
+            </div>
+          </div>
+          <div class="col-12 col-sm-auto">
+            <div class="mb-3">
+              <label class="form-label" for="uuIdFilter">
+                {{ 'eDonusum::UuId' | abpLocalization }}
+              </label>
+
+              <input
+                id="uuIdFilter"
+                class="form-control"
+                [(ngModel)]="filters.uuId"
+                [ngModelOptions]="{ standalone: true }"
+              />
+            </div>
+          </div>
+          <div class="col-12 col-sm-auto">
+            <div class="mb-3">
+              <label class="form-label" for="lineStatusCodeFilter">
+                {{ 'eDonusum::LineStatusCode' | abpLocalization }}
+              </label>
+
+              <input
+                id="lineStatusCodeFilter"
+                class="form-control"
+                [(ngModel)]="filters.lineStatusCode"
+                [ngModelOptions]="{ standalone: true }"
+              />
+            </div>
+          </div>
+          <div class="col-12 col-sm-auto">
+            <div class="mb-3">
+              <label class="form-label" for="ordRefIdFilter">
+                {{ 'eDonusum::OrdRefId' | abpLocalization }}
+              </label>
+
+              <input
+                id="ordRefIdFilter"
+                class="form-control"
+                [(ngModel)]="filters.ordRefId"
+                [ngModelOptions]="{ standalone: true }"
+              />
+            </div>
+          </div>
+          <div class="col-12 col-sm-auto">
+            <div class="mb-3">
+              <label class="form-label" for="ordRefSalesOrderIdFilter">
+                {{ 'eDonusum::OrdRefSalesOrderId' | abpLocalization }}
+              </label>
+
+              <input
+                id="ordRefSalesOrderIdFilter"
+                class="form-control"
+                [(ngModel)]="filters.ordRefSalesOrderId"
+                [ngModelOptions]="{ standalone: true }"
+              />
+            </div>
+          </div>
+          <div class="col-12 col-sm-auto">
+            <div class="mb-3">
+              <label class="form-label" for="minOrdRefIssueDate">
+                {{ 'eDonusum::MinOrdRefIssueDate' | abpLocalization }}
+              </label>
+
+              <div class="input-group" validationTarget>
+                <input
+                  id="minOrdRefIssueDate"
+                  class="form-control"
+                  #minOrdRefIssueDateInput
+                  #minOrdRefIssueDateDatepicker="ngbDatepicker"
+                  name="minOrdRefIssueDate"
+                  ngbDatepicker
+                  container="body"
+                  readonly
+                  (click)="minOrdRefIssueDateDatepicker.toggle()"
+                  (keyup.space)="minOrdRefIssueDateDatepicker.toggle()"
+                  [(ngModel)]="filters.ordRefIssueDateMin"
+                  [ngModelOptions]="{ standalone: true }"
+                />
+                <div *ngIf="minOrdRefIssueDateInput.value" class="input-group-append">
+                  <button
+                    class="btn btn-link px-2"
+                    type="button"
+                    [title]="'AbpUi::Clear' | abpLocalization"
+                    (click)="
+                      minOrdRefIssueDateDatepicker.writeValue(null);
+                      minOrdRefIssueDateDatepicker.manualDateChange(null, true)
+                    "
+                  >
+                    <i class="fa fa-times" aria-hidden="true"></i>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-12 col-sm-auto">
+            <div class="mb-3">
+              <label class="form-label" for="maxOrdRefIssueDate">
+                {{ 'eDonusum::MaxOrdRefIssueDate' | abpLocalization }}
+              </label>
+
+              <div class="input-group" validationTarget>
+                <input
+                  id="maxOrdRefIssueDate"
+                  class="form-control"
+                  #maxOrdRefIssueDateInput
+                  #maxOrdRefIssueDateDatepicker="ngbDatepicker"
+                  name="maxOrdRefIssueDate"
+                  ngbDatepicker
+                  readonly
+                  (click)="maxOrdRefIssueDateDatepicker.toggle()"
+                  (keyup.space)="maxOrdRefIssueDateDatepicker.toggle()"
+                  [(ngModel)]="filters.ordRefIssueDateMax"
+                  [ngModelOptions]="{ standalone: true }"
+                />
+                <div *ngIf="maxOrdRefIssueDateInput.value" class="input-group-append">
+                  <button
+                    class="btn btn-link px-2"
+                    type="button"
+                    [title]="'AbpUi::Clear' | abpLocalization"
+                    (click)="
+                      maxOrdRefIssueDateDatepicker.writeValue(null);
+                      maxOrdRefIssueDateDatepicker.manualDateChange(null, true)
+                    "
+                  >
+                    <i class="fa fa-times" aria-hidden="true"></i>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-12 col-sm-auto">
+            <div class="mb-3">
+              <label class="form-label" for="ordRefOrderTypeCodeFilter">
+                {{ 'eDonusum::OrdRefOrderTypeCode' | abpLocalization }}
+              </label>
+
+              <input
+                id="ordRefOrderTypeCodeFilter"
+                class="form-control"
+                [(ngModel)]="filters.ordRefOrderTypeCode"
+                [ngModelOptions]="{ standalone: true }"
+              />
+            </div>
+          </div>
+          <div class="col-12 col-sm-auto">
+            <div class="mb-3">
+              <label class="form-label" for="docRefIdFilter">
+                {{ 'eDonusum::DocRefId' | abpLocalization }}
+              </label>
+
+              <input
+                id="docRefIdFilter"
+                class="form-control"
+                [(ngModel)]="filters.docRefId"
+                [ngModelOptions]="{ standalone: true }"
+              />
+            </div>
+          </div>
+          <div class="col-12 col-sm-auto">
+            <div class="mb-3">
+              <label class="form-label" for="minDocRefIssueDate">
+                {{ 'eDonusum::MinDocRefIssueDate' | abpLocalization }}
+              </label>
+
+              <div class="input-group" validationTarget>
+                <input
+                  id="minDocRefIssueDate"
+                  class="form-control"
+                  #minDocRefIssueDateInput
+                  #minDocRefIssueDateDatepicker="ngbDatepicker"
+                  name="minDocRefIssueDate"
+                  ngbDatepicker
+                  container="body"
+                  readonly
+                  (click)="minDocRefIssueDateDatepicker.toggle()"
+                  (keyup.space)="minDocRefIssueDateDatepicker.toggle()"
+                  [(ngModel)]="filters.docRefIssueDateMin"
+                  [ngModelOptions]="{ standalone: true }"
+                />
+                <div *ngIf="minDocRefIssueDateInput.value" class="input-group-append">
+                  <button
+                    class="btn btn-link px-2"
+                    type="button"
+                    [title]="'AbpUi::Clear' | abpLocalization"
+                    (click)="
+                      minDocRefIssueDateDatepicker.writeValue(null);
+                      minDocRefIssueDateDatepicker.manualDateChange(null, true)
+                    "
+                  >
+                    <i class="fa fa-times" aria-hidden="true"></i>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-12 col-sm-auto">
+            <div class="mb-3">
+              <label class="form-label" for="maxDocRefIssueDate">
+                {{ 'eDonusum::MaxDocRefIssueDate' | abpLocalization }}
+              </label>
+
+              <div class="input-group" validationTarget>
+                <input
+                  id="maxDocRefIssueDate"
+                  class="form-control"
+                  #maxDocRefIssueDateInput
+                  #maxDocRefIssueDateDatepicker="ngbDatepicker"
+                  name="maxDocRefIssueDate"
+                  ngbDatepicker
+                  readonly
+                  (click)="maxDocRefIssueDateDatepicker.toggle()"
+                  (keyup.space)="maxDocRefIssueDateDatepicker.toggle()"
+                  [(ngModel)]="filters.docRefIssueDateMax"
+                  [ngModelOptions]="{ standalone: true }"
+                />
+                <div *ngIf="maxDocRefIssueDateInput.value" class="input-group-append">
+                  <button
+                    class="btn btn-link px-2"
+                    type="button"
+                    [title]="'AbpUi::Clear' | abpLocalization"
+                    (click)="
+                      maxDocRefIssueDateDatepicker.writeValue(null);
+                      maxDocRefIssueDateDatepicker.manualDateChange(null, true)
+                    "
+                  >
+                    <i class="fa fa-times" aria-hidden="true"></i>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-12 col-sm-auto">
+            <div class="mb-3">
+              <label class="form-label" for="docRefDocumentTypeCodeFilter">
+                {{ 'eDonusum::DocRefDocumentTypeCode' | abpLocalization }}
+              </label>
+
+              <input
+                id="docRefDocumentTypeCodeFilter"
+                class="form-control"
+                [(ngModel)]="filters.docRefDocumentTypeCode"
+                [ngModelOptions]="{ standalone: true }"
+              />
+            </div>
+          </div>
+          <div class="col-12 col-sm-auto">
+            <div class="mb-3">
+              <label class="form-label" for="docRefDocumentTypeFilter">
+                {{ 'eDonusum::DocRefDocumentType' | abpLocalization }}
+              </label>
+
+              <input
+                id="docRefDocumentTypeFilter"
+                class="form-control"
+                [(ngModel)]="filters.docRefDocumentType"
+                [ngModelOptions]="{ standalone: true }"
+              />
+            </div>
+          </div>
+          <div class="col-12 col-sm-auto">
+            <div class="mb-3">
+              <label class="form-label" for="docRefDocumentDescriptionFilter">
+                {{ 'eDonusum::DocRefDocumentDescription' | abpLocalization }}
+              </label>
+
+              <input
+                id="docRefDocumentDescriptionFilter"
+                class="form-control"
+                [(ngModel)]="filters.docRefDocumentDescription"
+                [ngModelOptions]="{ standalone: true }"
+              />
+            </div>
+          </div>
+          <div class="col-12 col-sm-auto">
+            <div class="mb-3">
+              <label class="form-label" for="despatchLineIdFilter">
+                {{ 'eDonusum::DespatchLine' | abpLocalization }}
+              </label>
+              <abp-lookup-select
+                cid="despatchLineIdFilter"
+                [getFn]="service.getDespatchLineLookup"
+                [(ngModel)]="filters.despatchLineId"
+                [ngModelOptions]="{ standalone: true }"
+              ></abp-lookup-select>
+            </div>
+          </div>
+
+          <div class="col-12 col-sm-auto align-self-end mb-3">
+            <div class="row">
+              <div class="col-6 col-sm-auto d-grid">
+                <button type="button" class="btn btn-outline-primary" (click)="clearFilters()">
+                  <span>{{ 'AbpUi::Clear' | abpLocalization }}</span>
+                </button>
+              </div>
+              <div class="col-6 col-sm-auto d-grid">
+                <button type="button" class="btn btn-primary" (click)="list.get()">
+                  <span>{{ 'AbpUi::Refresh' | abpLocalization }}</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </form>
+    </abp-advanced-entity-filters-form>
+  </abp-advanced-entity-filters>
+
+  <div class="card">
+    <div class="card-body">
+      <ngx-datatable [rows]="data.items" [count]="data.totalCount" [list]="list" default>
+        <ngx-datatable-column
+          [name]="'AbpUi::Actions' | abpLocalization"
+          [maxWidth]="150"
+          [width]="150"
+          [sortable]="false"
+        >
+          <ng-template let-row="row" let-i="rowIndex" ngx-datatable-cell-template>
+            <div ngbDropdown container="body" class="d-inline-block">
+              <button
+                class="btn btn-primary btn-sm dropdown-toggle"
+                data-toggle="dropdown"
+                aria-haspopup="true"
+                ngbDropdownToggle
+              >
+                <i class="fa fa-cog me-1" aria-hidden="true"></i>
+                {{ 'AbpUi::Actions' | abpLocalization }}
+              </button>
+
+              <div ngbDropdownMenu>
+                <button
+                  ngbDropdownItem
+                  *abpPermission="'eDonusum.DespatchLineOrderLineReferences.Edit'"
+                  (click)="update(row)"
+                >
+                  {{ 'AbpUi::Edit' | abpLocalization }}
+                </button>
+
+                <button
+                  ngbDropdownItem
+                  *abpPermission="'eDonusum.DespatchLineOrderLineReferences.Delete'"
+                  (click)="delete(row)"
+                >
+                  {{ 'AbpUi::Delete' | abpLocalization }}
+                </button>
+              </div>
+            </div>
+          </ng-template>
+        </ngx-datatable-column>
+
+        <ngx-datatable-column
+          name="{{ 'eDonusum::LineId' | abpLocalization }}"
+          prop="despatchLineOrderLineReference.lineId"
+        >
+          <ng-template let-row="row" ngx-datatable-cell-template>
+            {{ row.despatchLineOrderLineReference.lineId }}
+          </ng-template>
+        </ngx-datatable-column>
+
+        <ngx-datatable-column
+          name="{{ 'eDonusum::SalesOrderLineId' | abpLocalization }}"
+          prop="despatchLineOrderLineReference.salesOrderLineId"
+        >
+          <ng-template let-row="row" ngx-datatable-cell-template>
+            {{ row.despatchLineOrderLineReference.salesOrderLineId }}
+          </ng-template>
+        </ngx-datatable-column>
+
+        <ngx-datatable-column
+          name="{{ 'eDonusum::UuId' | abpLocalization }}"
+          prop="despatchLineOrderLineReference.uuId"
+        >
+          <ng-template let-row="row" ngx-datatable-cell-template>
+            {{ row.despatchLineOrderLineReference.uuId }}
+          </ng-template>
+        </ngx-datatable-column>
+
+        <ngx-datatable-column
+          name="{{ 'eDonusum::LineStatusCode' | abpLocalization }}"
+          prop="despatchLineOrderLineReference.lineStatusCode"
+        >
+          <ng-template let-row="row" ngx-datatable-cell-template>
+            {{ row.despatchLineOrderLineReference.lineStatusCode }}
+          </ng-template>
+        </ngx-datatable-column>
+
+        <ngx-datatable-column
+          name="{{ 'eDonusum::OrdRefId' | abpLocalization }}"
+          prop="despatchLineOrderLineReference.ordRefId"
+        >
+          <ng-template let-row="row" ngx-datatable-cell-template>
+            {{ row.despatchLineOrderLineReference.ordRefId }}
+          </ng-template>
+        </ngx-datatable-column>
+
+        <ngx-datatable-column
+          name="{{ 'eDonusum::OrdRefSalesOrderId' | abpLocalization }}"
+          prop="despatchLineOrderLineReference.ordRefSalesOrderId"
+        >
+          <ng-template let-row="row" ngx-datatable-cell-template>
+            {{ row.despatchLineOrderLineReference.ordRefSalesOrderId }}
+          </ng-template>
+        </ngx-datatable-column>
+
+        <ngx-datatable-column
+          name="{{ 'eDonusum::OrdRefIssueDate' | abpLocalization }}"
+          prop="despatchLineOrderLineReference.ordRefIssueDate"
+        >
+          <ng-template let-row="row" ngx-datatable-cell-template>
+            {{ row.despatchLineOrderLineReference.ordRefIssueDate | date }}
+          </ng-template>
+        </ngx-datatable-column>
+
+        <ngx-datatable-column
+          name="{{ 'eDonusum::OrdRefOrderTypeCode' | abpLocalization }}"
+          prop="despatchLineOrderLineReference.ordRefOrderTypeCode"
+        >
+          <ng-template let-row="row" ngx-datatable-cell-template>
+            {{ row.despatchLineOrderLineReference.ordRefOrderTypeCode }}
+          </ng-template>
+        </ngx-datatable-column>
+
+        <ngx-datatable-column
+          name="{{ 'eDonusum::DocRefId' | abpLocalization }}"
+          prop="despatchLineOrderLineReference.docRefId"
+        >
+          <ng-template let-row="row" ngx-datatable-cell-template>
+            {{ row.despatchLineOrderLineReference.docRefId }}
+          </ng-template>
+        </ngx-datatable-column>
+
+        <ngx-datatable-column
+          name="{{ 'eDonusum::DocRefIssueDate' | abpLocalization }}"
+          prop="despatchLineOrderLineReference.docRefIssueDate"
+        >
+          <ng-template let-row="row" ngx-datatable-cell-template>
+            {{ row.despatchLineOrderLineReference.docRefIssueDate | date }}
+          </ng-template>
+        </ngx-datatable-column>
+
+        <ngx-datatable-column
+          name="{{ 'eDonusum::DocRefDocumentTypeCode' | abpLocalization }}"
+          prop="despatchLineOrderLineReference.docRefDocumentTypeCode"
+        >
+          <ng-template let-row="row" ngx-datatable-cell-template>
+            {{ row.despatchLineOrderLineReference.docRefDocumentTypeCode }}
+          </ng-template>
+        </ngx-datatable-column>
+
+        <ngx-datatable-column
+          name="{{ 'eDonusum::DocRefDocumentType' | abpLocalization }}"
+          prop="despatchLineOrderLineReference.docRefDocumentType"
+        >
+          <ng-template let-row="row" ngx-datatable-cell-template>
+            {{ row.despatchLineOrderLineReference.docRefDocumentType }}
+          </ng-template>
+        </ngx-datatable-column>
+
+        <ngx-datatable-column
+          name="{{ 'eDonusum::DocRefDocumentDescription' | abpLocalization }}"
+          prop="despatchLineOrderLineReference.docRefDocumentDescription"
+        >
+          <ng-template let-row="row" ngx-datatable-cell-template>
+            {{ row.despatchLineOrderLineReference.docRefDocumentDescription }}
+          </ng-template>
+        </ngx-datatable-column>
+
+        <ngx-datatable-column
+          name="{{ 'eDonusum::DespatchLine' | abpLocalization }}"
+          prop="despatchLine.itemName"
+        >
+          <ng-template let-row="row" ngx-datatable-cell-template>
+            {{ row.despatchLine?.itemName }}
+          </ng-template>
+        </ngx-datatable-column>
+      </ngx-datatable>
+    </div>
+  </div>
+</abp-page>
+
+<abp-modal [busy]="isModalBusy" [(visible)]="isModalOpen">
+  <ng-template #abpHeader>
+    <h3>
+      {{
+        (selected ? 'AbpUi::Edit' : 'eDonusum::NewDespatchLineOrderLineReference') | abpLocalization
+      }}
+    </h3>
+  </ng-template>
+
+  <ng-template #abpBody>
+    <form
+      [formGroup]="form"
+      id="despatch-line-order-line-reference"
+      (ngSubmit)="submitForm()"
+      validateOnSubmit
+    >
+      <div class="mt-2 fade-in-top">
+        <div class="mb-3">
+          <label class="form-label" for="despatch-line-order-line-reference-line-id">
+            {{ 'eDonusum::LineId' | abpLocalization }}
+          </label>
+
+          <input
+            id="despatch-line-order-line-reference-line-id"
+            formControlName="lineId"
+            class="form-control"
+            maxlength="64"
+            autofocus
+          />
+        </div>
+        <div class="mb-3">
+          <label class="form-label" for="despatch-line-order-line-reference-sales-order-line-id">
+            {{ 'eDonusum::SalesOrderLineId' | abpLocalization }}
+          </label>
+
+          <input
+            id="despatch-line-order-line-reference-sales-order-line-id"
+            formControlName="salesOrderLineId"
+            class="form-control"
+            maxlength="64"
+          />
+        </div>
+        <div class="mb-3">
+          <label class="form-label" for="despatch-line-order-line-reference-uu-id">
+            {{ 'eDonusum::UuId' | abpLocalization }}
+          </label>
+
+          <input
+            id="despatch-line-order-line-reference-uu-id"
+            formControlName="uuId"
+            class="form-control"
+            maxlength="64"
+          />
+        </div>
+        <div class="mb-3">
+          <label class="form-label" for="despatch-line-order-line-reference-line-status-code">
+            {{ 'eDonusum::LineStatusCode' | abpLocalization }}
+          </label>
+
+          <input
+            id="despatch-line-order-line-reference-line-status-code"
+            formControlName="lineStatusCode"
+            class="form-control"
+            maxlength="64"
+          />
+        </div>
+        <div class="mb-3">
+          <label class="form-label" for="despatch-line-order-line-reference-ord-ref-id">
+            {{ 'eDonusum::OrdRefId' | abpLocalization }}
+          </label>
+
+          <input
+            id="despatch-line-order-line-reference-ord-ref-id"
+            formControlName="ordRefId"
+            class="form-control"
+            maxlength="64"
+          />
+        </div>
+        <div class="mb-3">
+          <label class="form-label" for="despatch-line-order-line-reference-ord-ref-sales-order-id">
+            {{ 'eDonusum::OrdRefSalesOrderId' | abpLocalization }}
+          </label>
+
+          <input
+            id="despatch-line-order-line-reference-ord-ref-sales-order-id"
+            formControlName="ordRefSalesOrderId"
+            class="form-control"
+            maxlength="64"
+          />
+        </div>
+        <div class="mb-3">
+          <label class="form-label" for="despatch-line-order-line-reference-ord-ref-issue-date">
+            {{ 'eDonusum::OrdRefIssueDate' | abpLocalization }}
+          </label>
+
+          <div class="input-group" validationTarget>
+            <input
+              readonly
+              id="despatch-line-order-line-reference-ord-ref-issue-date"
+              formControlName="ordRefIssueDate"
+              class="form-control"
+              ngbDatepicker
+              #ordRefIssueDateInput
+              #ordRefIssueDateDatepicker="ngbDatepicker"
+              (click)="ordRefIssueDateDatepicker.open()"
+              (keyup.space)="ordRefIssueDateDatepicker.open()"
+            />
+            <div *ngIf="ordRefIssueDateInput.value" class="input-group-append">
+              <button
+                class="btn btn-link px-2"
+                type="button"
+                [title]="'AbpUi::Clear' | abpLocalization"
+                (click)="
+                  ordRefIssueDateDatepicker.writeValue(null);
+                  ordRefIssueDateDatepicker.manualDateChange(null, true)
+                "
+              >
+                <i class="fa fa-times" aria-hidden="true"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div class="mb-3">
+          <label
+            class="form-label"
+            for="despatch-line-order-line-reference-ord-ref-order-type-code"
+          >
+            {{ 'eDonusum::OrdRefOrderTypeCode' | abpLocalization }}
+          </label>
+
+          <input
+            id="despatch-line-order-line-reference-ord-ref-order-type-code"
+            formControlName="ordRefOrderTypeCode"
+            class="form-control"
+            maxlength="64"
+          />
+        </div>
+        <div class="mb-3">
+          <label class="form-label" for="despatch-line-order-line-reference-doc-ref-id">
+            {{ 'eDonusum::DocRefId' | abpLocalization }}
+          </label>
+
+          <input
+            id="despatch-line-order-line-reference-doc-ref-id"
+            formControlName="docRefId"
+            class="form-control"
+            maxlength="64"
+          />
+        </div>
+        <div class="mb-3">
+          <label class="form-label" for="despatch-line-order-line-reference-doc-ref-issue-date">
+            {{ 'eDonusum::DocRefIssueDate' | abpLocalization }}
+          </label>
+
+          <div class="input-group" validationTarget>
+            <input
+              readonly
+              id="despatch-line-order-line-reference-doc-ref-issue-date"
+              formControlName="docRefIssueDate"
+              class="form-control"
+              ngbDatepicker
+              #docRefIssueDateInput
+              #docRefIssueDateDatepicker="ngbDatepicker"
+              (click)="docRefIssueDateDatepicker.open()"
+              (keyup.space)="docRefIssueDateDatepicker.open()"
+            />
+            <div *ngIf="docRefIssueDateInput.value" class="input-group-append">
+              <button
+                class="btn btn-link px-2"
+                type="button"
+                [title]="'AbpUi::Clear' | abpLocalization"
+                (click)="
+                  docRefIssueDateDatepicker.writeValue(null);
+                  docRefIssueDateDatepicker.manualDateChange(null, true)
+                "
+              >
+                <i class="fa fa-times" aria-hidden="true"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div class="mb-3">
+          <label
+            class="form-label"
+            for="despatch-line-order-line-reference-doc-ref-document-type-code"
+          >
+            {{ 'eDonusum::DocRefDocumentTypeCode' | abpLocalization }}
+          </label>
+
+          <input
+            id="despatch-line-order-line-reference-doc-ref-document-type-code"
+            formControlName="docRefDocumentTypeCode"
+            class="form-control"
+            maxlength="32"
+          />
+        </div>
+        <div class="mb-3">
+          <label class="form-label" for="despatch-line-order-line-reference-doc-ref-document-type">
+            {{ 'eDonusum::DocRefDocumentType' | abpLocalization }}
+          </label>
+
+          <input
+            id="despatch-line-order-line-reference-doc-ref-document-type"
+            formControlName="docRefDocumentType"
+            class="form-control"
+            maxlength="32"
+          />
+        </div>
+        <div class="mb-3">
+          <label
+            class="form-label"
+            for="despatch-line-order-line-reference-doc-ref-document-description"
+          >
+            {{ 'eDonusum::DocRefDocumentDescription' | abpLocalization }}
+          </label>
+
+          <input
+            id="despatch-line-order-line-reference-doc-ref-document-description"
+            formControlName="docRefDocumentDescription"
+            class="form-control"
+          />
+        </div>
+        <div class="mb-3">
+          <label class="form-label" for="despatch-line-order-line-reference-despatch-line-id">
+            {{ 'eDonusum::DespatchLine' | abpLocalization }} *
+          </label>
+
+          <abp-lookup-select
+            cid="despatch-line-order-line-reference-despatch-line-id"
+            formControlName="despatchLineId"
+            [getFn]="service.getDespatchLineLookup"
+          ></abp-lookup-select>
+        </div>
+      </div>
+    </form>
+  </ng-template>
+
+  <ng-template #abpFooter>
+    <button type="button" class="btn btn-secondary" abpClose>
+      {{ 'AbpUi::Cancel' | abpLocalization }}
+    </button>
+
+    <abp-button
+      iconClass="fa fa-check"
+      buttonType="submit"
+      formName="despatch-line-order-line-reference"
+    >
+      {{ 'AbpUi::Save' | abpLocalization }}
+    </abp-button>
+  </ng-template>
+</abp-modal>