534 lines
17 KiB
HTML
534 lines
17 KiB
HTML
<app-sidebar>
|
|
<div *ngIf="datasetsLoading" class="my-10-mx-auto text-center">
|
|
<clr-spinner clrMedium></clr-spinner>
|
|
</div>
|
|
|
|
<div *ngIf="!parsedDatasets.length" class="text-center mb-10">
|
|
<button
|
|
(click)="fileUploadInput.click()"
|
|
id="browse-file"
|
|
class="btn btn-primary btn-sm"
|
|
[disabled]="selectedFile !== null || submittingCsv"
|
|
>
|
|
Browse file
|
|
</button>
|
|
<input
|
|
hidden
|
|
#fileUploadInput
|
|
id="file-upload"
|
|
type="file"
|
|
(change)="onFileChange($event)"
|
|
multiple
|
|
/>
|
|
</div>
|
|
|
|
<ng-container *ngIf="parsedDatasets.length && !submittedCsvDatasets.length">
|
|
<div *ngIf="!excelsSubmitted" class="text-center mb-10">
|
|
<button (click)="onDiscard()" class="btn btn-danger btn-sm mr-10">
|
|
Discard
|
|
</button>
|
|
<button
|
|
(click)="onSubmitAll()"
|
|
id="submit-all"
|
|
class="btn btn-primary btn-sm"
|
|
>
|
|
Submit All
|
|
</button>
|
|
</div>
|
|
|
|
<p cds-text="caption" class="ml-10 mb-10">Found tables:</p>
|
|
<clr-tree>
|
|
<clr-tree-node *ngFor="let dataset of parsedDatasets">
|
|
<button
|
|
(click)="onParsedDatasetClick(dataset)"
|
|
class="clr-treenode-link whitespace-nowrap d-flex clr-align-items-center"
|
|
[class.active]="dataset.active"
|
|
>
|
|
<ng-container *ngIf="dataset.submitResult">
|
|
<cds-icon
|
|
*ngIf="dataset.submitResult.error"
|
|
status="danger"
|
|
shape="exclamation-circle"
|
|
></cds-icon>
|
|
<cds-icon
|
|
*ngIf="dataset.submitResult.success"
|
|
status="success"
|
|
shape="check-circle"
|
|
></cds-icon>
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="!dataset.submitResult">
|
|
<ng-container *ngIf="dataset.datasource">
|
|
<cds-icon
|
|
*ngIf="!(dataset.datasource.length && dataset.parseResult)"
|
|
status="danger"
|
|
shape="exclamation-circle"
|
|
></cds-icon>
|
|
<cds-icon
|
|
*ngIf="dataset.datasource.length && dataset.parseResult"
|
|
shape="table"
|
|
></cds-icon>
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="!dataset.datasource">
|
|
<cds-icon *ngIf="!dataset.parsingTable" shape="table"></cds-icon>
|
|
|
|
<clr-spinner *ngIf="dataset.parsingTable" clrSmall></clr-spinner>
|
|
</ng-container>
|
|
</ng-container>
|
|
|
|
<span class="ml-5"> {{ dataset.libds }} </span>
|
|
</button>
|
|
</clr-tree-node>
|
|
</clr-tree>
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="submittedCsvDatasets.length">
|
|
<p cds-text="caption" class="ml-10 mb-10 mt-10">Submitted tables:</p>
|
|
<clr-tree>
|
|
<clr-tree-node *ngFor="let dataset of submittedCsvDatasets">
|
|
<button
|
|
(click)="onSubmittedCsvDatasetClick(dataset)"
|
|
class="clr-treenode-link whitespace-nowrap"
|
|
[class.active]="dataset.active"
|
|
>
|
|
<cds-icon
|
|
*ngIf="dataset.error"
|
|
status="danger"
|
|
shape="exclamation-circle"
|
|
></cds-icon>
|
|
<cds-icon
|
|
*ngIf="dataset.success"
|
|
status="success"
|
|
shape="check-circle"
|
|
></cds-icon>
|
|
<cds-icon shape="table"></cds-icon>
|
|
{{ dataset.libds }}
|
|
</button>
|
|
</clr-tree-node>
|
|
</clr-tree>
|
|
</ng-container>
|
|
|
|
<!-- <div *ngIf="librariesPaging" class="w-100 text-center">
|
|
<span class="spinner spinner-sm"> Loading... </span>
|
|
</div> -->
|
|
</app-sidebar>
|
|
|
|
<div #contentArea class="content-area">
|
|
<div class="card no-borders h-100 d-flex clr-flex-column">
|
|
<div
|
|
class="header-row clr-row justify-content-between clr-justify-content-center w-100 m-0"
|
|
>
|
|
<p cds-text="section">Multi Dataset Load</p>
|
|
</div>
|
|
|
|
<div
|
|
*ngIf="selectedFile === null && !submittingCsv"
|
|
class="no-table-selected pointer-events-none"
|
|
>
|
|
<clr-icon
|
|
shape="upload-cloud"
|
|
size="40"
|
|
class="is-info icon-dc-fill"
|
|
></clr-icon>
|
|
<p class="text-center color-gray mt-10" cds-text="section">
|
|
Please upload a file
|
|
</p>
|
|
</div>
|
|
|
|
<ng-container *ngIf="selectedFile !== null || submittingCsv">
|
|
<ng-container *ngIf="!parsedDatasets.length && selectedFile !== null">
|
|
<div class="d-flex clr-justify-content-center mt-15">
|
|
<div class="dataset-input-wrapper">
|
|
<p cds-text="secondary regular" class="mb-5">
|
|
Selected file: <strong>{{ selectedFile.name }}</strong>
|
|
<clr-tooltip>
|
|
<cds-icon
|
|
clrTooltipTrigger
|
|
(click)="onDiscardFile()"
|
|
shape="trash"
|
|
status="danger"
|
|
class="ml-5 cursor-pointer"
|
|
></cds-icon>
|
|
<clr-tooltip-content> Discard the file </clr-tooltip-content>
|
|
</clr-tooltip>
|
|
</p>
|
|
<p cds-text="secondary regular" class="mb-20">
|
|
File size: <strong>{{ selectedFile.sizeMB }} MB</strong>
|
|
</p>
|
|
<p cds-text="secondary regular" class="mb-15">
|
|
Paste or type the list of datasets to upload:
|
|
</p>
|
|
|
|
<clr-control-helper class="mb-5"
|
|
>Each row is one dataset. We will automatically detect tables by
|
|
the sheetname and populate if any.</clr-control-helper
|
|
>
|
|
|
|
<hot-table
|
|
#hotInstanceUserDataset
|
|
id="hotTableUserDataset"
|
|
class="mt-15"
|
|
[settings]="hotUserDatasetsSettings"
|
|
>
|
|
</hot-table>
|
|
|
|
<div class="dataset-selection-actions text-right mt-10">
|
|
<button
|
|
(click)="onStartParsingFile()"
|
|
id="continue-btn"
|
|
class="btn btn-primary btn-sm"
|
|
[disabled]="!matchedDatasets.length"
|
|
[clrLoading]="uploadLoading"
|
|
>
|
|
Continue
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-container
|
|
*ngIf="parsedDatasets.length && !submittedCsvDatasets.length"
|
|
>
|
|
<div
|
|
*ngIf="!activeParsedDataset"
|
|
class="no-table-selected pointer-events-none"
|
|
>
|
|
<ng-container *ngIf="fileLoadingState !== FileLoadingState.parsed">
|
|
<clr-icon
|
|
shape="process-on-vm"
|
|
size="40"
|
|
class="is-info icon-dc-fill"
|
|
></clr-icon>
|
|
|
|
<p class="text-center color-gray mt-10" cds-text="section">
|
|
{{ fileLoadingState }}...
|
|
</p>
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="fileLoadingState === FileLoadingState.parsed">
|
|
<clr-icon
|
|
shape="warning-standard"
|
|
size="40"
|
|
class="is-info icon-dc-fill"
|
|
></clr-icon>
|
|
<p class="text-center color-gray mt-10" cds-text="section">
|
|
Please select a dataset on the left to review the data
|
|
</p>
|
|
</ng-container>
|
|
</div>
|
|
|
|
<ng-container *ngIf="activeParsedDataset">
|
|
<div
|
|
*ngIf="activeParsedDataset.submitResult"
|
|
class="d-flex clr-justify-content-between p-10 mt-15 submission-results"
|
|
>
|
|
<div>
|
|
<p cds-text="secondary regular" class="mb-10">
|
|
Submit Status:
|
|
<span
|
|
*ngIf="activeParsedDataset.submitResult?.success"
|
|
class="color-green"
|
|
><strong>SUCCESS</strong></span
|
|
>
|
|
<span
|
|
*ngIf="activeParsedDataset.submitResult?.error"
|
|
class="color-red"
|
|
><strong>ERROR</strong></span
|
|
>
|
|
</p>
|
|
<p
|
|
*ngIf="activeParsedDataset.submitResult?.error"
|
|
cds-text="secondary regular"
|
|
>
|
|
Error details:
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<button
|
|
*ngIf="
|
|
!submittingCsv && activeParsedDataset.submitResult?.error
|
|
"
|
|
(click)="reSubmitTable(activeParsedDataset)"
|
|
class="btn btn-primary mt-10"
|
|
[clrLoading]="submitLoading"
|
|
>
|
|
Resubmit
|
|
</button>
|
|
<button
|
|
(click)="
|
|
downloadFile(
|
|
activeParsedDataset.submitResult.log ||
|
|
activeParsedDataset.submitResult.success ||
|
|
activeParsedDataset.submitResult.error
|
|
)
|
|
"
|
|
class="btn btn-primary-outline mt-10"
|
|
>
|
|
Download log
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
*ngIf="activeParsedDataset.submitResult?.error"
|
|
class="error-field mt-15"
|
|
>
|
|
<div class="log-wrapper">
|
|
{{ activeParsedDataset.submitResult?.error | json }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex clr-justify-content-between p-10 mt-15">
|
|
<div>
|
|
<p cds-text="secondary regular" class="mb-10">
|
|
Found in range:
|
|
|
|
<ng-container *ngIf="activeParsedDataset.parseResult">
|
|
<strong
|
|
>"{{
|
|
activeParsedDataset.parseResult.rangeSheetRes?.sheetName
|
|
}}"!{{
|
|
activeParsedDataset.parseResult.rangeSheetRes
|
|
?.rangeAddress
|
|
}}</strong
|
|
>
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="!activeParsedDataset.parseResult">
|
|
<strong *ngIf="!activeParsedDataset.parsingTable"
|
|
>No data found</strong
|
|
>
|
|
|
|
<span
|
|
*ngIf="activeParsedDataset.parsingTable"
|
|
class="d-flex clr-align-items-center"
|
|
>
|
|
<strong>Searching for the data...</strong>
|
|
<clr-spinner class="ml-5" clrSmall></clr-spinner>
|
|
</span>
|
|
</ng-container>
|
|
</p>
|
|
<p cds-text="secondary regular">
|
|
Dataset:
|
|
<strong>
|
|
<clr-tooltip>
|
|
<a
|
|
clrTooltipTrigger
|
|
[routerLink]="'/editor/' + activeParsedDataset.libds"
|
|
>{{ activeParsedDataset.libds }}</a
|
|
>
|
|
<clr-tooltip-content
|
|
[clrPosition]="'top-right'"
|
|
[clrSize]="'sm'"
|
|
>
|
|
Click to edit the table
|
|
</clr-tooltip-content>
|
|
</clr-tooltip>
|
|
</strong>
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<clr-toggle-wrapper>
|
|
<input
|
|
type="checkbox"
|
|
clrToggle
|
|
[(ngModel)]="activeParsedDataset.includeInSubmission"
|
|
name="options"
|
|
[disabled]="
|
|
!(
|
|
activeParsedDataset.datasource &&
|
|
activeParsedDataset.parseResult
|
|
)
|
|
"
|
|
required
|
|
value="option1"
|
|
/>
|
|
<label>Include in submission</label>
|
|
</clr-toggle-wrapper>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="isHotHidden" class="text-center w-100">
|
|
<clr-spinner class="spinner-md"></clr-spinner>
|
|
</div>
|
|
|
|
<hot-table
|
|
#hotInstanceMain
|
|
id="hotTable"
|
|
class="mt-15"
|
|
[settings]="hotMainTableSettings"
|
|
>
|
|
</hot-table>
|
|
</ng-container>
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="submittedCsvDatasets.length">
|
|
<div
|
|
*ngIf="!activeSubmittedCsvDataset"
|
|
class="no-table-selected pointer-events-none"
|
|
>
|
|
<clr-icon
|
|
shape="warning-standard"
|
|
size="40"
|
|
class="is-info icon-dc-fill"
|
|
></clr-icon>
|
|
<p class="text-center color-gray mt-10" cds-text="section">
|
|
Please select a dataset on the left to review the submit results
|
|
</p>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="activeSubmittedCsvDataset">
|
|
<div class="d-flex clr-justify-content-between p-10">
|
|
<div>
|
|
<p cds-text="secondary regular" class="mb-10">
|
|
Matched with dataset:
|
|
<strong>
|
|
<clr-tooltip>
|
|
<a
|
|
clrTooltipTrigger
|
|
[routerLink]="'/editor/' + activeSubmittedCsvDataset.libds"
|
|
>{{ activeSubmittedCsvDataset.libds }}</a
|
|
>
|
|
<clr-tooltip-content
|
|
[clrPosition]="'top-right'"
|
|
[clrSize]="'sm'"
|
|
>
|
|
Click to edit the table
|
|
</clr-tooltip-content>
|
|
</clr-tooltip>
|
|
</strong>
|
|
</p>
|
|
<p cds-text="secondary regular" class="mb-10">
|
|
Status:
|
|
<span
|
|
*ngIf="activeSubmittedCsvDataset.success"
|
|
class="color-green"
|
|
><strong>SUCCESS</strong></span
|
|
>
|
|
<span *ngIf="activeSubmittedCsvDataset.error" class="color-red"
|
|
><strong>ERROR</strong></span
|
|
>
|
|
</p>
|
|
<p
|
|
*ngIf="activeSubmittedCsvDataset.error"
|
|
cds-text="secondary regular"
|
|
>
|
|
Error details:
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<button
|
|
(click)="
|
|
downloadFile(
|
|
activeSubmittedCsvDataset.success ||
|
|
activeSubmittedCsvDataset.error
|
|
)
|
|
"
|
|
class="btn btn-primary-outline mt-10"
|
|
>
|
|
Download log
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="activeSubmittedCsvDataset.error" class="error-field mt-15">
|
|
<div class="log-wrapper">
|
|
{{ activeSubmittedCsvDataset.error | json }}
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
</ng-container>
|
|
|
|
<!-- <div>
|
|
<p
|
|
*ngIf="
|
|
licenceState.value.viewer_rows_allowed !== Infinity &&
|
|
hotTable.data &&
|
|
hotTable.data.length > licenceState.value.viewer_rows_allowed
|
|
"
|
|
class="mt-2-i w-100 text-center"
|
|
>
|
|
To display more than {{ licenceState.value.viewer_rows_allowed }} rows,
|
|
contact <contact-link />
|
|
</p>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
|
|
<clr-modal [(clrModalOpen)]="showSubmitReasonModal" [clrModalClosable]="false">
|
|
<h3 class="modal-title">
|
|
Submit {{ tablesToSubmit.length }}
|
|
{{ tablesToSubmit.length === 1 ? 'table' : 'tables' }} for approval
|
|
</h3>
|
|
<div class="modal-body">
|
|
<p
|
|
*ngIf="licenceState.value.submit_rows_limit !== Infinity"
|
|
cds-text="body"
|
|
class="licence-limit-notice mt-0 mb-15"
|
|
>
|
|
Due to current licence, only
|
|
{{ licenceState.value.submit_rows_limit }} rows in each file will be
|
|
submitted. To remove the restriction, contact
|
|
support@datacontroller.io.
|
|
</p>
|
|
|
|
<div class="text-area-full-width">
|
|
<label for="formFields_8" class="mb-5 d-block">Message</label>
|
|
<textarea
|
|
clrTextarea
|
|
[(ngModel)]="submitReasonMessage"
|
|
tabindex="0"
|
|
class="submit-reason"
|
|
type="text"
|
|
id="formFields_8"
|
|
></textarea>
|
|
</div>
|
|
|
|
<p cds-text="caption_clean" class="mt-10">
|
|
Tables will be sent sequentially, logs will be available after all tables
|
|
are submitted.
|
|
</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button
|
|
type="button"
|
|
class="btn btn-outline"
|
|
[disabled]="submitLoading"
|
|
(click)="showSubmitReasonModal = false"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="button"
|
|
id="submit-tables"
|
|
class="btn btn-primary"
|
|
[clrLoading]="submitLoading"
|
|
(click)="submitTables()"
|
|
>
|
|
Submit
|
|
</button>
|
|
</div>
|
|
</clr-modal>
|
|
|
|
<clr-modal [(clrModalOpen)]="csvSubmitting" [clrModalClosable]="false">
|
|
<h3 class="modal-title">
|
|
Submitting {{ csvFiles.length }} CSV
|
|
{{ csvFiles.length === 1 ? 'file' : 'files' }}
|
|
</h3>
|
|
<div class="modal-body">
|
|
<div class="text-center">
|
|
<clr-spinner clrMedium></clr-spinner>
|
|
</div>
|
|
|
|
<p cds-text="caption_clean" class="mt-10 text-center">
|
|
This will take few moments
|
|
</p>
|
|
</div>
|
|
</clr-modal>
|