dc/client/src/app/xlmap/xlmap.component.html

<app-sidebar>
  <div *ngIf="xlmapsLoading" class="my-10-mx-auto text-center">
    <clr-spinner clrMedium></clr-spinner>
  </div>

  <clr-tree>
    <clr-tree-node class="search-node">
      <div class="tree-search-wrapper">
        <input
          clrInput
          #searchXLMapTreeInput
          placeholder="Filter by Id"
          name="input"
          [(ngModel)]="searchString"
          (keyup)="xlmapListOnFilter()"
          autocomplete="off"
        />
        <clr-icon
          *ngIf="searchXLMapTreeInput.value.length < 1"
          shape="search"
        ></clr-icon>
        <clr-icon
          *ngIf="searchXLMapTreeInput.value.length > 0"
          (click)="searchString = ''; xlmapListOnFilter()"
          shape="times"
        ></clr-icon>
      </div>
    </clr-tree-node>

    <ng-container *ngFor="let xlmap of xlmaps">
      <clr-tree-node>
        <button
          (click)="xlmapOnClick(xlmap)"
          class="clr-treenode-link"
          [class.table-active]="isActiveXLMap(xlmap.id)"
        >
          <clr-icon shape="file"></clr-icon>
          {{ xlmap.id }}
        </button>
      </clr-tree-node>
    </ng-container>
  </clr-tree>
</app-sidebar>

<div class="content-area">
  <div *ngIf="!selectedXLMap" class="no-table-selected">
    <clr-icon
      shape="warning-standard"
      size="60"
      class="is-info icon-dc-fill"
    ></clr-icon>
    <h3 *ngIf="xlmaps.length > 0" class="text-center color-gray">
      Please select a map
    </h3>
    <h3 *ngIf="xlmaps.length < 1" class="text-center color-gray">
      No excel map is found
    </h3>
  </div>

  <div class="loadingSpinner" *ngIf="isLoading">
    <span class="spinner"> Loading... </span>
    <div>
      <h4>{{ isLoadingDesc }}</h4>
    </div>
  </div>

  <div
    appDragNdrop
    (fileDraggedOver)="onShowUploadModal()"
    class="card h-100 d-flex clr-flex-column"
    *ngIf="!isLoading && selectedXLMap"
  >
    <clr-tabs>
      <clr-tab>
        <button clrTabLink (click)="selectedTab = TabsEnum.Rules">Rules</button>
        <clr-tab-content *clrIfActive="selectedTab === TabsEnum.Rules">
        </clr-tab-content>
      </clr-tab>
      <clr-tab>
        <button clrTabLink (click)="selectedTab = TabsEnum.Data">Data</button>
        <clr-tab-content *clrIfActive="selectedTab === TabsEnum.Data">
        </clr-tab-content>
      </clr-tab>
    </clr-tabs>

    <ng-container *ngTemplateOutlet="actionButtons"></ng-container>

    <div class="clr-row m-0 mb-10-i viewerTitle">
      <h3 class="d-flex clr-col-12 clr-justify-content-center mt-5-i">
        {{ selectedXLMap.id }}
      </h3>
      <i class="d-flex clr-col-12 clr-justify-content-center mt-5-i">{{
        selectedXLMap.description
      }}</i>
      <h5 class="d-flex clr-col-12 clr-justify-content-center mt-5-i">
        Rules Source:
        <a
          cds-text="labelLink"
          class="ml-10"
          [routerLink]="'/view/data/' + rulesSource"
        >
          {{ rulesSource }}
        </a>
      </h5>
      <h5 class="d-flex clr-col-12 clr-justify-content-center mt-5-i">
        Target dataset:
        <a
          cds-text="labelLink"
          class="ml-10"
          [routerLink]="'/view/data/' + selectedXLMap.targetDS"
        >
          {{ selectedXLMap.targetDS }}
        </a>
      </h5>
    </div>

    <div class="clr-flex-1">
      <hot-table
        hotId="hotInstance"
        id="hot-table"
        [multiColumnSorting]="true"
        [viewportRowRenderingOffset]="50"
        [data]="selectedTab === TabsEnum.Rules ? xlmapRules : xlData"
        [colHeaders]="
          selectedTab === TabsEnum.Rules ? xlmapRulesHeaders : xlUploadHeader
        "
        [columns]="
          selectedTab === TabsEnum.Rules ? xlmapRulesColumns : xlUploadColumns
        "
        [filters]="true"
        [height]="'100%'"
        stretchH="all"
        [modifyColWidth]="maxWidthChecker"
        [cells]="getCellConfiguration"
        [maxRows]="hotTableMaxRows"
        [manualColumnResize]="true"
        [rowHeaders]="rowHeaders"
        [rowHeaderWidth]="15"
        [rowHeights]="20"
        [licenseKey]="hotTableLicenseKey"
      >
      </hot-table>
    </div>
  </div>

  <clr-modal
    appFileDrop
    (fileOver)="fileOverBase($event)"
    (fileDrop)="getFileDesc($event, true)"
    [uploader]="uploader"
    [clrModalSize]="'xl'"
    [clrModalStaticBackdrop]="false"
    [clrModalClosable]="true"
    [(clrModalOpen)]="showUploadModal"
    class="relative"
  >
    <h3 class="modal-title">Upload File</h3>
    <div class="modal-body">
      <div class="drop-area">
        <span>Drop file anywhere to upload!</span>
      </div>

      <div class="clr-col-md-12">
        <div class="clr-row card-block mt-15 d-flex justify-content-between">
          <div class="clr-col-md-3 filterBtn">
            <span class="filterBtn w-100">
              <label
                for="file-upload"
                class="btn btn-sm btn-outline profile-buttons w-100"
              >
                Browse
              </label>
            </span>
            <input
              hidden
              #fileUploadInput
              id="file-upload"
              type="file"
              appFileSelect
              [uploader]="uploader"
              (change)="getFileDesc($event)"
            />
          </div>
        </div>
      </div>
    </div>
  </clr-modal>

  <clr-modal [(clrModalOpen)]="submitLimitNotice">
    <h3 class="modal-title">Notice</h3>
    <div class="modal-body">
      <p class="m-0">
        Due to current licence, only
        {{ licenceState.value.submit_rows_limit }} rows in a file will be
        submitted. To remove the restriction, contact
        support&#64;datacontroller.io
      </p>
    </div>
    <div class="modal-footer">
      <button
        type="button"
        class="btn btn-sm btn-primary"
        (click)="submitLimitNotice = false"
      >
        Cancel
      </button>
      <button
        type="button"
        class="btn btn-sm btn-primary"
        (click)="submit(); submitLimitNotice = false"
      >
        Submit
      </button>
    </div>
  </clr-modal>
</div>

<ng-template #actionButtons>
  <div class="clr-row m-0 clr-justify-content-center">
    <div
      *ngIf="status === StatusEnum.ReadyToUpload"
      class="d-flex clr-justify-content-center clr-col-12 clr-col-lg-4"
    >
      <button
        type="button"
        class="btn btn-sm btn-success btn-block mr-0"
        (click)="onShowUploadModal()"
      >
        <clr-icon shape="upload"></clr-icon>
        <span>Upload</span>
      </button>
    </div>
    <div
      *ngIf="status === StatusEnum.ReadyToSubmit"
      class="d-flex clr-justify-content-center clr-col-12 clr-col-lg-4"
    >
      <button
        type="button"
        class="btn btn-sm btn-success btn-block mr-0"
        (click)="submitExcel()"
      >
        <clr-icon shape="upload"></clr-icon>
        <span>Submit</span>
      </button>
    </div>
    <div
      *ngIf="status === StatusEnum.ReadyToSubmit"
      class="d-flex clr-justify-content-center clr-col-12 clr-col-lg-4"
    >
      <button
        type="button"
        class="btn btn-sm btn-outline-danger btn-block mr-0"
        (click)="discardExtractedData()"
      >
        <clr-icon shape="times"></clr-icon>
        <span>Discard</span>
      </button>
    </div>
  </div>
</ng-template>