@hestia-earth/ui-components 0.41.20 → 0.41.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1876,11 +1876,11 @@ class CollapsibleBoxComponent {
|
|
|
1876
1876
|
this.boxStyle = input(CollapsibleBoxStyle.primary, ...(ngDevMode ? [{ debugName: "boxStyle" }] : []));
|
|
1877
1877
|
}
|
|
1878
1878
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CollapsibleBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1879
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CollapsibleBoxComponent, isStandalone: true, selector: "he-collapsible-box", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, hasShadow: { classPropertyName: "hasShadow", publicName: "hasShadow", isSignal: true, isRequired: false, transformFunction: null }, hasBorder: { classPropertyName: "hasBorder", publicName: "hasBorder", isSignal: true, isRequired: false, transformFunction: null }, boxStyle: { classPropertyName: "boxStyle", publicName: "boxStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, ngImport: i0, template: "<div\n class=\"is-flex is-flex-direction-column | is-{{ boxStyle() }}\"\n [class.box]=\"hasShadow()\"\n [class.is-gap-24]=\"hasShadow()\"\n [class.has-border]=\"hasBorder()\">\n <div\n class=\"is-flex is-align-items-center is-justify-content-space-between is-gap-8 is-py-2 | collapsible-box--header\"\n [class.is-px-2]=\"!hasShadow()\">\n <ng-content select=\"[box-title]\" />\n\n <a class=\"has-text-secondary\" [class.is-px-3]=\"hasShadow()\" (click)=\"open.set(!open())\">\n <he-svg-icon [name]=\"open() ? 'chevron-up' : 'chevron-down'\" />\n </a>\n </div>\n\n @if (open()) {\n <div class=\"is-p-2 | collapsible-box--content\">\n <ng-content select=\"[box-content]\" />\n </div>\n }\n</div>\n", styles: [":host{--collapsible-box-header-border-color: transparent;--collapsible-box-border-color: transparent}:host .collapsible-box--header{border-bottom:1px solid var(--collapsible-box-header-border-color)}:host .has-border .collapsible-box--header{border-radius:6px 6px 0 0;border:1px solid var(--collapsible-box-border-color)}:host .has-border .collapsible-box--content{border-radius:0 0 6px 6px;border:1px solid var(--collapsible-box-border-color);border-top:0}:host .is-primary{--collapsible-box-header-border-color: #ffc000}:host .is-primary.has-border{--collapsible-box-border-color: #ffc000}:host .is-secondary{--collapsible-box-header-border-color: #193957}:host .is-secondary.has-border{--collapsible-box-border-color: #193957}:host .is-secondary-accent{--collapsible-box-header-border-color: #dbe3ea}:host .is-secondary-accent.has-border{--collapsible-box-border-color: #dbe3ea}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1879
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CollapsibleBoxComponent, isStandalone: true, selector: "he-collapsible-box", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, hasShadow: { classPropertyName: "hasShadow", publicName: "hasShadow", isSignal: true, isRequired: false, transformFunction: null }, hasBorder: { classPropertyName: "hasBorder", publicName: "hasBorder", isSignal: true, isRequired: false, transformFunction: null }, boxStyle: { classPropertyName: "boxStyle", publicName: "boxStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, ngImport: i0, template: "<div\n class=\"is-flex is-flex-direction-column | is-{{ boxStyle() }}\"\n [class.box]=\"hasShadow()\"\n [class.is-gap-24]=\"hasShadow()\"\n [class.has-border]=\"hasBorder()\">\n <div\n class=\"is-flex is-align-items-center is-justify-content-space-between is-gap-8 is-py-2 | collapsible-box--header\"\n [class.is-px-2]=\"!hasShadow()\">\n <ng-content select=\"[box-title]\" />\n\n <a class=\"has-text-secondary\" [class.is-px-3]=\"hasShadow()\" (click)=\"open.set(!open())\">\n <he-svg-icon [name]=\"open() ? 'chevron-up' : 'chevron-down'\" size=\"24\" />\n </a>\n </div>\n\n @if (open()) {\n <div class=\"is-p-2 | collapsible-box--content\">\n <ng-content select=\"[box-content]\" />\n </div>\n }\n</div>\n", styles: [":host{--collapsible-box-header-border-color: transparent;--collapsible-box-border-color: transparent}:host .collapsible-box--header{border-bottom:1px solid var(--collapsible-box-header-border-color)}:host .has-border .collapsible-box--header{border-radius:6px 6px 0 0;border:1px solid var(--collapsible-box-border-color)}:host .has-border .collapsible-box--content{border-radius:0 0 6px 6px;border:1px solid var(--collapsible-box-border-color);border-top:0}:host .is-primary{--collapsible-box-header-border-color: #ffc000}:host .is-primary.has-border{--collapsible-box-border-color: #ffc000}:host .is-secondary{--collapsible-box-header-border-color: #193957}:host .is-secondary.has-border{--collapsible-box-border-color: #193957}:host .is-secondary-accent{--collapsible-box-header-border-color: #dbe3ea}:host .is-secondary-accent.has-border{--collapsible-box-border-color: #dbe3ea}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1880
1880
|
}
|
|
1881
1881
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CollapsibleBoxComponent, decorators: [{
|
|
1882
1882
|
type: Component$1,
|
|
1883
|
-
args: [{ selector: 'he-collapsible-box', imports: [HESvgIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"is-flex is-flex-direction-column | is-{{ boxStyle() }}\"\n [class.box]=\"hasShadow()\"\n [class.is-gap-24]=\"hasShadow()\"\n [class.has-border]=\"hasBorder()\">\n <div\n class=\"is-flex is-align-items-center is-justify-content-space-between is-gap-8 is-py-2 | collapsible-box--header\"\n [class.is-px-2]=\"!hasShadow()\">\n <ng-content select=\"[box-title]\" />\n\n <a class=\"has-text-secondary\" [class.is-px-3]=\"hasShadow()\" (click)=\"open.set(!open())\">\n <he-svg-icon [name]=\"open() ? 'chevron-up' : 'chevron-down'\" />\n </a>\n </div>\n\n @if (open()) {\n <div class=\"is-p-2 | collapsible-box--content\">\n <ng-content select=\"[box-content]\" />\n </div>\n }\n</div>\n", styles: [":host{--collapsible-box-header-border-color: transparent;--collapsible-box-border-color: transparent}:host .collapsible-box--header{border-bottom:1px solid var(--collapsible-box-header-border-color)}:host .has-border .collapsible-box--header{border-radius:6px 6px 0 0;border:1px solid var(--collapsible-box-border-color)}:host .has-border .collapsible-box--content{border-radius:0 0 6px 6px;border:1px solid var(--collapsible-box-border-color);border-top:0}:host .is-primary{--collapsible-box-header-border-color: #ffc000}:host .is-primary.has-border{--collapsible-box-border-color: #ffc000}:host .is-secondary{--collapsible-box-header-border-color: #193957}:host .is-secondary.has-border{--collapsible-box-border-color: #193957}:host .is-secondary-accent{--collapsible-box-header-border-color: #dbe3ea}:host .is-secondary-accent.has-border{--collapsible-box-border-color: #dbe3ea}\n"] }]
|
|
1883
|
+
args: [{ selector: 'he-collapsible-box', imports: [HESvgIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"is-flex is-flex-direction-column | is-{{ boxStyle() }}\"\n [class.box]=\"hasShadow()\"\n [class.is-gap-24]=\"hasShadow()\"\n [class.has-border]=\"hasBorder()\">\n <div\n class=\"is-flex is-align-items-center is-justify-content-space-between is-gap-8 is-py-2 | collapsible-box--header\"\n [class.is-px-2]=\"!hasShadow()\">\n <ng-content select=\"[box-title]\" />\n\n <a class=\"has-text-secondary\" [class.is-px-3]=\"hasShadow()\" (click)=\"open.set(!open())\">\n <he-svg-icon [name]=\"open() ? 'chevron-up' : 'chevron-down'\" size=\"24\" />\n </a>\n </div>\n\n @if (open()) {\n <div class=\"is-p-2 | collapsible-box--content\">\n <ng-content select=\"[box-content]\" />\n </div>\n }\n</div>\n", styles: [":host{--collapsible-box-header-border-color: transparent;--collapsible-box-border-color: transparent}:host .collapsible-box--header{border-bottom:1px solid var(--collapsible-box-header-border-color)}:host .has-border .collapsible-box--header{border-radius:6px 6px 0 0;border:1px solid var(--collapsible-box-border-color)}:host .has-border .collapsible-box--content{border-radius:0 0 6px 6px;border:1px solid var(--collapsible-box-border-color);border-top:0}:host .is-primary{--collapsible-box-header-border-color: #ffc000}:host .is-primary.has-border{--collapsible-box-border-color: #ffc000}:host .is-secondary{--collapsible-box-header-border-color: #193957}:host .is-secondary.has-border{--collapsible-box-border-color: #193957}:host .is-secondary-accent{--collapsible-box-header-border-color: #dbe3ea}:host .is-secondary-accent.has-border{--collapsible-box-border-color: #dbe3ea}\n"] }]
|
|
1884
1884
|
}], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], hasShadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasShadow", required: false }] }], hasBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBorder", required: false }] }], boxStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "boxStyle", required: false }] }] } });
|
|
1885
1885
|
|
|
1886
1886
|
class DataTableComponent {
|
|
@@ -5259,23 +5259,15 @@ const axisHoverPlugin = {
|
|
|
5259
5259
|
id: 'axisHover',
|
|
5260
5260
|
afterEvent(chart, args) {
|
|
5261
5261
|
const { event } = args;
|
|
5262
|
-
const { maxDistance = 15, onHoverLabel } = (chart.config.options.plugins.axisHover ||
|
|
5262
|
+
const { maxDistance = 15, onHoverLabel } = (chart.config.options.plugins.axisHover ||
|
|
5263
|
+
{});
|
|
5263
5264
|
const yScale = chart.scales.y;
|
|
5264
5265
|
const isOverYAxis = event.x >= yScale.left && event.x <= yScale.right;
|
|
5265
|
-
|
|
5266
|
-
|
|
5267
|
-
|
|
5268
|
-
|
|
5269
|
-
|
|
5270
|
-
const tickY = yScale.getPixelForTick(index);
|
|
5271
|
-
if (Math.abs(event.y - tickY) < maxDistance) {
|
|
5272
|
-
label = chart.data.labels[tick.value];
|
|
5273
|
-
// Provide page coordinates for the tooltip placement
|
|
5274
|
-
position = { x: event.native.pageX, y: event.native.pageY };
|
|
5275
|
-
}
|
|
5276
|
-
});
|
|
5277
|
-
}
|
|
5278
|
-
onHoverLabel({ label, ...position });
|
|
5266
|
+
const closestTick = isOverYAxis
|
|
5267
|
+
? yScale.getTicks().find((tick, index) => Math.abs(event.y - yScale.getPixelForTick(index)) < maxDistance)
|
|
5268
|
+
: null;
|
|
5269
|
+
const label = closestTick ? chart.data.labels[closestTick.value] : '';
|
|
5270
|
+
onHoverLabel({ label, event });
|
|
5279
5271
|
}
|
|
5280
5272
|
};
|
|
5281
5273
|
|
|
@@ -6064,10 +6056,12 @@ class ChartTooltipComponent {
|
|
|
6064
6056
|
this.tooltipX = signal(0, ...(ngDevMode ? [{ debugName: "tooltipX" }] : []));
|
|
6065
6057
|
this.tooltipY = signal(0, ...(ngDevMode ? [{ debugName: "tooltipY" }] : []));
|
|
6066
6058
|
}
|
|
6067
|
-
show(data, x, y) {
|
|
6059
|
+
show(data, x, y, options = { placement: 'bottom' }) {
|
|
6068
6060
|
this.tooltipX.set(x);
|
|
6069
6061
|
this.tooltipY.set(y);
|
|
6070
6062
|
const text = this.tooltipFn()(data);
|
|
6063
|
+
this.tooltip().container = options?.container;
|
|
6064
|
+
this.tooltip().placement = options?.placement;
|
|
6071
6065
|
text && setTimeout(() => this.tooltip().open({ data: text }));
|
|
6072
6066
|
}
|
|
6073
6067
|
hide() {
|
|
@@ -6986,7 +6980,9 @@ const nodeTypeIcon = {
|
|
|
6986
6980
|
[NodeType.Organisation]: 'organisation',
|
|
6987
6981
|
[NodeType.Site]: 'pin',
|
|
6988
6982
|
[NodeType.Source]: 'source',
|
|
6989
|
-
[NodeType.Term]: 'term'
|
|
6983
|
+
[NodeType.Term]: 'term',
|
|
6984
|
+
[SchemaType.Property]: 'magnifier',
|
|
6985
|
+
[SchemaType.Transformation]: 'truck'
|
|
6990
6986
|
};
|
|
6991
6987
|
|
|
6992
6988
|
class NodeLinkComponent {
|
|
@@ -9378,6 +9374,7 @@ const icons = [
|
|
|
9378
9374
|
'loading-circle-filled',
|
|
9379
9375
|
'loading-circle-filled-withshadow',
|
|
9380
9376
|
'log',
|
|
9377
|
+
'magnifier',
|
|
9381
9378
|
'mail',
|
|
9382
9379
|
'map',
|
|
9383
9380
|
'menu',
|
|
@@ -9440,6 +9437,7 @@ const icons = [
|
|
|
9440
9437
|
'tool',
|
|
9441
9438
|
'trash',
|
|
9442
9439
|
'tree',
|
|
9440
|
+
'truck',
|
|
9443
9441
|
'turn-phone',
|
|
9444
9442
|
'unit',
|
|
9445
9443
|
'upload',
|
|
@@ -12380,11 +12378,11 @@ class FilesUploadErrorsComponent {
|
|
|
12380
12378
|
return value !== firstVal;
|
|
12381
12379
|
}
|
|
12382
12380
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilesUploadErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12383
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: FilesUploadErrorsComponent, isStandalone: true, selector: "he-files-upload-errors", inputs: { error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: true, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (error()) {\n <div class=\"is-flex is-flex-direction-column is-gap-8 has-text-danger\">\n @switch (message()) {\n @case (ErrorKeys.PrivacyNotAllowed) {\n <div>\n <span>\n Uploading data with\n <code class=\"is-px-1\">dataPrivate={{ error().value }}</code>\n is not allowed.\n </span>\n <span class=\"is-pl-1\">\n Please try uploading with\n <code class=\"is-px-1\">dataPrivate={{ !error().value }}</code>\n instead.\n </span>\n </div>\n }\n @case (ErrorKeys.InvalidJSON) {\n <div>\n <p>The uploaded content does not appear to contain valid JSON data:</p>\n <div class=\"is-my-2\">\n <pre><code>{{error().error}}</code></pre>\n </div>\n <p>\n Please validate your JSON content before uploading it using an\n <a href=\"https://jsoneditoronline.org\" target=\"_blank\">online tool</a>\n for example.\n </p>\n </div>\n }\n @case (ErrorKeys.NoData) {\n <div>\n <p>No Nodes could be found in your Upload. Please verify the column headers match the HESTIA schema.</p>\n <ng-container *ngTemplateOutlet=\"defaultError\" />\n </div>\n }\n @case (ErrorKeys.SetValueError) {\n <div class=\"notification is-danger\" role=\"alert\">\n <p>\n <he-svg-icon name=\"exclamation-triangle\" />\n <span>\n We could not convert the data in your Upload. This can be due to setting 2 different formats in the same\n field.\n </span>\n <span class=\"px-1\">Please refer to the</span>\n <a [href]=\"schemaUrl()\" target=\"_blank\">schema</a>\n <span class=\"pl-1\">and then correct the column headers indicated below.</span>\n </p>\n <ng-container *ngTemplateOutlet=\"defaultError\" />\n </div>\n <div>\n <pre><code>{{error().key}}</code></pre>\n </div>\n }\n @case (SchemaErrorKeys.PropertyNotFound) {\n <div class=\"notification is-danger\" role=\"alert\">\n <p>\n <he-svg-icon name=\"exclamation-triangle\" />\n <span class=\"is-pl-2\">You have column headers that do not match the HESTIA schema.</span>\n <span class=\"px-1\">Please refer to the</span>\n <a [href]=\"schemaUrl()\" target=\"_blank\">schema</a>\n <span class=\"pl-1\">and then correct the column headers indicated below.</span>\n </p>\n <ng-container *ngTemplateOutlet=\"defaultError\" />\n </div>\n <div>\n <pre><code>{{error().key}}</code></pre>\n </div>\n }\n @case (SchemaErrorKeys.PropertyInvalidFormat) {\n <div>\n <div>\n <span>\n The following value in the column\n <i>{{ error().key }}</i>\n is not in the correct format:\n </span>\n <br />\n <pre class=\"is-mt-2\"><code>{{stringify(error().value)}}</code></pre>\n </div>\n @switch (hasNumberWithCommasError()) {\n @case (true) {\n <p class=\"is-mt-2\">\n Please format your numbers to remove commas and use a decimal point to separate the whole part of the\n number from the fractional part of the number.\n </p>\n <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n <pre class=\"is-mt-2\"><code>3,510.1</code></pre>\n <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n <pre class=\"is-mt-2\"><code>3510.1</code></pre>\n }\n @case (false) {\n <ng-container *ngTemplateOutlet=\"schemaError\" />\n <p>The error could either be a value in the column, or an error with the column header.</p>\n <p>\n If you are trying to set no data, we accept either\n <code>-</code>\n or an empty cell.\n </p>\n }\n }\n </div>\n }\n @case (ErrorKeys.PropertyRequired) {\n <div>\n <div>\n <span class=\"pr-1\">The following field is required in the</span>\n @if (error().schema) {\n <a class=\"pr-1\" [href]=\"schemaUrl()\" target=\"_blank\">{{ error().schema }}</a>\n }\n <span>schema:</span>\n <br />\n <pre class=\"is-mt-2\"><code>{{error().property}}</code></pre>\n </div>\n <p>\n @switch (error().property) {\n @case ('id') {\n <span>\n You must assign a unique\n <code>id</code>\n for every record in your data.\n </span>\n }\n @case ('type') {\n <span>\n Every record in your data must contain a\n <code>type</code>\n .\n </span>\n }\n }\n </p>\n </div>\n }\n @case (ErrorKeys.PropertyInternal) {\n <div>\n <div>\n <span class=\"pr-1\">\n The following field is\n <code>internal</code>\n in the\n </span>\n <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schema }} schema</a>\n <span>:</span>\n <br />\n <pre class=\"is-mt-2\"><code>{{error().schemaKey || error().key}}</code></pre>\n </div>\n <p>\n You cannot upload\n <code>internal</code>\n fields to HESTIA.\n </p>\n </div>\n }\n @case (SchemaErrorKeys.SchemaNotFound) {\n <div>\n @if (error().key) {\n <div>\n <span>The following Node does not exist in the schema:</span>\n <br />\n <pre class=\"is-mt-2\"><code>{{error().key}}</code></pre>\n </div>\n } @else if (error().schema) {\n <div>\n <span>The following Node Type does not exist in the schema or can not be uploaded directly:</span>\n <br />\n <pre class=\"is-mt-2\"><code>{{error().schema}}</code></pre>\n </div>\n }\n <p>\n <span>The list of accepted values is:</span>\n </p>\n <div class=\"content\">\n <ul>\n @for (type of nodeTypes; track type) {\n <li>\n <i>{{ type }}</i>\n </li>\n }\n </ul>\n </div>\n </div>\n }\n @case (ErrorKeys.InvalidFirstColumn) {\n <div>\n <span>\n No data in the HESTIA format was detected on the first sheet. Either try selecting a different sheet in the\n upload screen, or check the sheet to ensure the headers follow the schema - see examples\n </span>\n <a class=\"pl-1\" href=\"/guide/guide-file-upload-examples\" target=\"_blank\">here</a>\n </div>\n }\n @case (ErrorKeys.InvalidExcelFile) {\n <div>\n This file has been uploaded with a\n <code>{{ fileExt() }}</code>\n extension, but does not appear to be a valid Excel file.\n </div>\n }\n @case (ErrorKeys.NoHeaders) {\n <div>\n <p>\n No headers matching the HESTIA schema were found on the first row. Please remove all empty rows at the\n begining of the file and try uploading again.\n </p>\n <ng-container *ngTemplateOutlet=\"defaultError\" />\n </div>\n }\n @case (ErrorKeys.InvalidSheetName) {\n <div>\n <div>\n <span class=\"pr-1\">The Excel sheet</span>\n <code>{{ error().value }}</code>\n <span class=\"pl-1\">does not exist.</span>\n <span class=\"pl-1\">Your Excel file contains the following sheets:</span>\n <ul class=\"mt-1 content is-list-style-disc pl-5\">\n @for (e of error().error.split(';'); track e) {\n <li>\n <code>{{ e }}</code>\n </li>\n }\n </ul>\n </div>\n <p>\n <span>Please re-upload selecting one of the sheets above.</span>\n </p>\n </div>\n }\n @case (ErrorKeys.DuplicatedHeaders) {\n <div>\n <span>Your upload contains duplicated column headers.</span>\n </div>\n }\n @case (ErrorKeys.DuplicatedIds) {\n <div>\n <div>\n <span class=\"is-pr-1\">You have multiple</span>\n <code>{{ error().schema | pluralize }}</code>\n <span class=\"is-px-1\">with the same</span>\n <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n <span class=\"is-px-1\">but different data. The</span>\n <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n <span class=\"is-pl-1\">is:</span>\n <br />\n <pre class=\"is-mt-2\"><code>{{error().value}}</code></pre>\n </div>\n <p class=\"is-mt-2 is-italic\">\n <span class=\"is-pr-1\">Please note that ussing different case does not make the</span>\n <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n <span class=\"is-pl-1\">unique.</span>\n </p>\n </div>\n }\n @case (SchemaErrorKeys.DuplicatedIdFields) {\n <div>\n <span class=\"is-pr-1\">You have used both the</span>\n <code>@id</code>\n <span class=\"is-px-1\">and</span>\n <code>id</code>\n <span class=\"is-px-1\">fields in the same data. Please use</span>\n <code>@id</code>\n <span class=\"is-px-1\">when linking to existing nodes on the Platform, and</span>\n <code>id</code>\n <span class=\"is-px-1\">when linking to nodes you are uploading in this file using the same</span>\n <code>id</code>\n <span class=\"is-px-1\">field.</span>\n </div>\n }\n @case (ErrorKeys.NestedHeaders) {\n <div>\n <p>\n To link nodes together, you first need to define the node (e.g.,\n <code>source.id</code>\n ,\n <code>source.bibliography.title</code>\n ) and then create the link (e.g.,\n <code>cycle.defaultSource.id</code>\n ). We do not allow nesting (e.g.,\n <code>cycle.defaultSource.bibliography.title</code>\n ).\n </p>\n </div>\n }\n @case (ErrorKeys.NestedNodes) {\n <div>\n <p>To link nodes together, you need to upload each node separately, as we do not allow nesting:</p>\n <pre class=\"is-mt-2\"><code>{{ sampleLinkedNodes | json }}</code></pre>\n </div>\n }\n @case (ErrorKeys.ReferenceExistingHeaders) {\n <div>\n <p>\n You have used the internal\n <code>@id</code>\n field to upload a new Node.\n </p>\n <p>\n The\n <code>@id</code>\n field should only be used to reference existing Node or Terms. Example:\n </p>\n <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n <pre class=\"is-mt-2\"><code>cycle.@id,cycle.inputs.0.term.@id,source.id</code></pre>\n <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n <pre class=\"is-mt-2\"><code>cycle.id,cycle.inputs.0.term.@id,source.id</code></pre>\n </div>\n }\n @case (ErrorKeys.InvalidBlankNodeHeaders) {\n <div>\n <p>Evry blank node must be followed by a number, e.g.:</p>\n <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n <pre class=\"is-mt-2\"><code>cycle.inputs.term.name</code></pre>\n <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n <pre class=\"is-mt-2\"><code>cycle.inputs.0.term.name</code></pre>\n </div>\n }\n @case (ErrorKeys.MultipleNodeTypeCase) {\n <div>\n <p>You are using a combination of mixed cases in your headers:</p>\n <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n <pre class=\"is-mt-2\"><code>impactAssessment.id,impactAssessment.name</code></pre>\n <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n <pre class=\"is-mt-2\"><code>impactAssessment.id,impactassessment.name</code></pre>\n\n <p>\n Please make sure to always use either\n <code>impactAssessment</code>\n or\n <code>impactassessment</code>\n , but not both.\n </p>\n </div>\n }\n @case (ErrorKeys.MultipleTermHeaders) {\n <div>\n <p>\n You are using both\n <code>@id</code>\n (or\n <code>id</code>\n ) and\n <code>name</code>\n fields to upload an existing Node (e.g., a Term).\n </p>\n <p>\n Using both fields can lead to inconsistencies, if you are not uploading the correct value in either one.\n Instead, you should only use one of them:\n </p>\n <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n <pre class=\"is-mt-2\"><code>cycle.inputs.0.term.@id,cycle.inputs.0.term.name</code></pre>\n <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n <pre class=\"is-mt-2\"><code>cycle.inputs.0.term.@id</code></pre>\n </div>\n }\n @case (SchemaErrorKeys.ObjectArrayInvalid) {\n <div>\n <p>The column header {{ error().key }} must use the array format. Examples:</p>\n <pre class=\"is-mt-2\"><code>{{ error().key + '.0.term.name' }}</code></pre>\n <pre class=\"is-mt-2\"><code>{{ error().key + '.0.value' }}</code></pre>\n <pre class=\"is-mt-2\"><code>{{ error().key + '.1.term.name' }}</code></pre>\n <pre class=\"is-mt-2\"><code>{{ error().key + '.1.value' }}</code></pre>\n <ng-container *ngTemplateOutlet=\"schemaError\" />\n </div>\n }\n @case (ErrorKeys.MaxSize) {\n <div>\n <span>The maximum file size limit is {{ maxFileSizeMb }}Mb (current file size: {{ error().value }}Mb).</span>\n <span class=\"pl-1\">Please re-upload these data in multiple files.</span>\n </div>\n }\n @case (ErrorKeys.MaxRows) {\n <div>\n <span>\n Your file has {{ error().value | number }} rows. This might be an error caused by adding some data at the\n bottom of a spreadsheet by accident: delete any unused rows and resubmit the file.\n </span>\n </div>\n }\n @case (ErrorKeys.Mendeley) {\n <div>\n <p>An error occured while fetching the bibliographic information. Please try re-uploading the file.</p>\n <ng-container *ngTemplateOutlet=\"reportError\" />\n </div>\n }\n @case (ErrorKeys.Timeout) {\n <div>\n <p>Time exceeded for current step.</p>\n\n @if (debug()) {\n <span>You can try to \"Re-index\" or \"Re-upload\" if it still does not work.</span>\n }\n\n <ng-container *ngTemplateOutlet=\"reportError\" />\n </div>\n }\n @default {\n <div>\n <p>{{ message() }}</p>\n\n @if (debug()) {\n <pre><code>{{ error() | json }}</code></pre>\n }\n\n <ng-container *ngTemplateOutlet=\"reportError\" />\n </div>\n }\n }\n\n @if (hasGeoJSONError()) {\n <div>\n <p>If the GeoJSON is too large, please try to simplify it following these steps:</p>\n <ul class=\"is-my-1 content is-list-style-decimal pl-5\">\n <li>\n <span class=\"is-pr-1\">Go to</span>\n <a href=\"https://mapshaper.org/\" target=\"_blank\">https://mapshaper.org/</a>\n </li>\n <li>\n <span>\n Save the boundary in a valid\n <code>.geojson</code>\n file.\n </span>\n </li>\n <li>\n <span>Import it on mapshaper.</span>\n </li>\n <li>\n <span>Click \"Simplify\" in the top right corner in the menu bar.</span>\n </li>\n <li>\n <span>Adjust the percentage to a lower value, like 50% to start with.</span>\n </li>\n <li>\n <span>\n Export to\n <code>GeoJson</code>\n or\n <code>CSV</code>\n .\n </span>\n </li>\n <li>\n <span>Copy the resulting content into your upload file.</span>\n </li>\n </ul>\n <p>If you encounter the error again, try again using a lower percentage at step 5.</p>\n </div>\n }\n\n @if (columns().length || (error().index && !isSchemaError())) {\n <div>\n <b>Hint:</b>\n <span class=\"pl-1\">the error might be located</span>\n @if (error().index && !isSchemaError()) {\n <span class=\"pl-1\">on row {{ error().index }}</span>\n }\n @if (columns().length) {\n <span class=\"pl-1\">in {{ 'column' | pluralize: columns().length }}:</span>\n <ul class=\"mt-1 content is-list-style-disc pl-5\">\n @for (column of columns(); track column) {\n <li>\n <b class=\"pr-2\">{{ column.column }}</b>\n <code>{{ column.name }}</code>\n </li>\n }\n </ul>\n }\n </div>\n }\n\n @if (error().suggestions?.length) {\n <div>\n <b>Suggestions:</b>\n <span class=\"pl-1\">did you mean instead:</span>\n <ul class=\"mt-1 content is-list-style-disc pl-5\">\n @for (suggestion of error().suggestions; track suggestion) {\n <li>\n <code>{{ suggestion }}</code>\n </li>\n }\n </ul>\n </div>\n }\n\n @if (showCsvPreview()) {\n <div>\n <b>\n Preview\n <sup>1</sup>\n :\n </b>\n <div class=\"table-container is-mt-2\">\n <table class=\"table is-bordered is-fullwidth is-hoverable is-narrow mb-0\">\n <thead>\n @if (error().index) {\n <th></th>\n }\n @for (header of headers(); track header) {\n <th>{{ header }}</th>\n }\n </thead>\n <tbody>\n @for (row of rows(); track row) {\n <tr>\n @if (error().index) {\n <td class=\"has-text-danger\">\n <span class=\"is-nowrap\">Row {{ error().index }}</span>\n </td>\n }\n @for (col of row; track col; let colIndex = $index) {\n <td>\n <span\n [class.has-text-danger]=\"\n message() === ErrorKeys.DuplicatedIds && hasDuplicatedError(col, colIndex)\n \">\n {{ col | ellipsis: 50 }}\n </span>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n <p class=\"is-size-7\">\n <i>1. The preview does not necessarily reflect the original Upload's order or content.</i>\n </p>\n </div>\n }\n\n @if (showJsonPreview()) {\n <div>\n <b>Preview:</b>\n <pre class=\"is-mt-2\"><code>{{stringify(error().node)}}</code></pre>\n </div>\n }\n </div>\n}\n\n<ng-template #defaultError>\n <p class=\"is-mt-2 has-text-black\">\n <span class=\"is-pr-1\">If you are still stuck, please see</span>\n <a [href]=\"baseUrl + '/guide/guide-file-upload-prepare-file'\" target=\"_blank\">the example uploads and videos</a>\n <span class=\"is-px-1\">\n or try using the Wizard to get the first few rows of data formatted correctly, or use the chat to ask for help.\n </span>\n </p>\n</ng-template>\n\n<ng-template #reportError>\n <p class=\"is-mt-2\">\n To report this error, please\n <a class=\"is-pl-1\" [href]=\"reportErrorUrl()\" target=\"_blank\">click here</a>\n .\n </p>\n</ng-template>\n\n<ng-template #schemaError>\n <p>\n <span class=\"pr-1\">You can see the accepted field type and some examples</span>\n <a [href]=\"schemaKeyUrl()\" target=\"_blank\">here</a>\n <span>.</span>\n </p>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
12381
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: FilesUploadErrorsComponent, isStandalone: true, selector: "he-files-upload-errors", inputs: { error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: true, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (error()) {\n <div class=\"is-flex is-flex-direction-column is-gap-8 has-text-danger\">\n @switch (message()) {\n @case (ErrorKeys.PrivacyNotAllowed) {\n <div>\n <span>\n Uploading data with\n <code class=\"is-px-1\">dataPrivate={{ error().value }}</code>\n is not allowed.\n </span>\n <span class=\"is-pl-1\">\n Please try uploading with\n <code class=\"is-px-1\">dataPrivate={{ !error().value }}</code>\n instead.\n </span>\n </div>\n }\n @case (ErrorKeys.InvalidJSON) {\n <div>\n <p>The uploaded content does not appear to contain valid JSON data:</p>\n <div class=\"is-my-2\">\n <pre><code>{{error().error}}</code></pre>\n </div>\n <p>\n Please validate your JSON content before uploading it using an\n <a href=\"https://jsoneditoronline.org\" target=\"_blank\">online tool</a>\n for example.\n </p>\n </div>\n }\n @case (ErrorKeys.NoData) {\n <div>\n <p>No Nodes could be found in your Upload. Please verify the column headers match the HESTIA schema.</p>\n <ng-container *ngTemplateOutlet=\"defaultError\" />\n </div>\n }\n @case (ErrorKeys.SetValueError) {\n <div class=\"notification is-danger\" role=\"alert\">\n <p>\n <he-svg-icon name=\"exclamation-triangle\" />\n <span class=\"is-pl-3\">\n We could not convert the data in your Upload. This can be due to setting 2 different formats in the same\n field.\n </span>\n <span class=\"px-1\">Please refer to the</span>\n <a [href]=\"schemaUrl()\" target=\"_blank\">schema</a>\n <span class=\"pl-1\">and then correct the column headers indicated below.</span>\n </p>\n <ng-container *ngTemplateOutlet=\"defaultError\" />\n </div>\n <div>\n <pre><code>{{error().key}}</code></pre>\n </div>\n }\n @case (SchemaErrorKeys.PropertyNotFound) {\n <div class=\"notification is-danger\" role=\"alert\">\n <p>\n <he-svg-icon name=\"exclamation-triangle\" />\n <span class=\"is-pl-2\">You have column headers that do not match the HESTIA schema.</span>\n <span class=\"px-1\">Please refer to the</span>\n <a [href]=\"schemaUrl()\" target=\"_blank\">schema</a>\n <span class=\"pl-1\">and then correct the column headers indicated below.</span>\n </p>\n <ng-container *ngTemplateOutlet=\"defaultError\" />\n </div>\n <div>\n <pre><code>{{error().key}}</code></pre>\n </div>\n }\n @case (SchemaErrorKeys.PropertyInvalidFormat) {\n <div>\n <div>\n <span>\n The following value in the column\n <i>{{ error().key }}</i>\n is not in the correct format:\n </span>\n <br />\n <pre class=\"is-mt-2\"><code>{{stringify(error().value)}}</code></pre>\n </div>\n @switch (hasNumberWithCommasError()) {\n @case (true) {\n <p class=\"is-mt-2\">\n Please format your numbers to remove commas and use a decimal point to separate the whole part of the\n number from the fractional part of the number.\n </p>\n <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n <pre class=\"is-mt-2\"><code>3,510.1</code></pre>\n <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n <pre class=\"is-mt-2\"><code>3510.1</code></pre>\n }\n @case (false) {\n <ng-container *ngTemplateOutlet=\"schemaError\" />\n <p>The error could either be a value in the column, or an error with the column header.</p>\n <p>\n If you are trying to set no data, we accept either\n <code>-</code>\n or an empty cell.\n </p>\n }\n }\n </div>\n }\n @case (ErrorKeys.PropertyRequired) {\n <div>\n <div>\n <span class=\"pr-1\">The following field is required in the</span>\n @if (error().schema) {\n <a class=\"pr-1\" [href]=\"schemaUrl()\" target=\"_blank\">{{ error().schema }}</a>\n }\n <span>schema:</span>\n <br />\n <pre class=\"is-mt-2\"><code>{{error().property}}</code></pre>\n </div>\n <p>\n @switch (error().property) {\n @case ('id') {\n <span>\n You must assign a unique\n <code>id</code>\n for every record in your data.\n </span>\n }\n @case ('type') {\n <span>\n Every record in your data must contain a\n <code>type</code>\n .\n </span>\n }\n }\n </p>\n </div>\n }\n @case (ErrorKeys.PropertyInternal) {\n <div>\n <div>\n <span class=\"pr-1\">\n The following field is\n <code>internal</code>\n in the\n </span>\n <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schema }} schema</a>\n <span>:</span>\n <br />\n <pre class=\"is-mt-2\"><code>{{error().schemaKey || error().key}}</code></pre>\n </div>\n <p>\n You cannot upload\n <code>internal</code>\n fields to HESTIA.\n </p>\n </div>\n }\n @case (SchemaErrorKeys.SchemaNotFound) {\n <div>\n @if (error().key) {\n <div>\n <span>The following Node does not exist in the schema:</span>\n <br />\n <pre class=\"is-mt-2\"><code>{{error().key}}</code></pre>\n </div>\n } @else if (error().schema) {\n <div>\n <span>The following Node Type does not exist in the schema or can not be uploaded directly:</span>\n <br />\n <pre class=\"is-mt-2\"><code>{{error().schema}}</code></pre>\n </div>\n }\n <p>\n <span>The list of accepted values is:</span>\n </p>\n <div class=\"content\">\n <ul>\n @for (type of nodeTypes; track type) {\n <li>\n <i>{{ type }}</i>\n </li>\n }\n </ul>\n </div>\n </div>\n }\n @case (ErrorKeys.InvalidFirstColumn) {\n <div>\n <span>\n No data in the HESTIA format was detected on the first sheet. Either try selecting a different sheet in the\n upload screen, or check the sheet to ensure the headers follow the schema - see examples\n </span>\n <a class=\"pl-1\" href=\"/guide/guide-file-upload-examples\" target=\"_blank\">here</a>\n </div>\n }\n @case (ErrorKeys.InvalidExcelFile) {\n <div>\n This file has been uploaded with a\n <code>{{ fileExt() }}</code>\n extension, but does not appear to be a valid Excel file.\n </div>\n }\n @case (ErrorKeys.NoHeaders) {\n <div>\n <p>\n No headers matching the HESTIA schema were found on the first row. Please remove all empty rows at the\n begining of the file and try uploading again.\n </p>\n <ng-container *ngTemplateOutlet=\"defaultError\" />\n </div>\n }\n @case (ErrorKeys.InvalidSheetName) {\n <div>\n <div>\n <span class=\"pr-1\">The Excel sheet</span>\n <code>{{ error().value }}</code>\n <span class=\"pl-1\">does not exist.</span>\n <span class=\"pl-1\">Your Excel file contains the following sheets:</span>\n <ul class=\"mt-1 content is-list-style-disc pl-5\">\n @for (e of error().error.split(';'); track e) {\n <li>\n <code>{{ e }}</code>\n </li>\n }\n </ul>\n </div>\n <p>\n <span>Please re-upload selecting one of the sheets above.</span>\n </p>\n </div>\n }\n @case (ErrorKeys.DuplicatedHeaders) {\n <div>\n <span>Your upload contains duplicated column headers.</span>\n </div>\n }\n @case (ErrorKeys.DuplicatedIds) {\n <div>\n <div>\n <span class=\"is-pr-1\">You have multiple</span>\n <code>{{ error().schema | pluralize }}</code>\n <span class=\"is-px-1\">with the same</span>\n <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n <span class=\"is-px-1\">but different data. The</span>\n <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n <span class=\"is-pl-1\">is:</span>\n <br />\n <pre class=\"is-mt-2\"><code>{{error().value}}</code></pre>\n </div>\n <p class=\"is-mt-2 is-italic\">\n <span class=\"is-pr-1\">Please note that ussing different case does not make the</span>\n <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n <span class=\"is-pl-1\">unique.</span>\n </p>\n </div>\n }\n @case (SchemaErrorKeys.DuplicatedIdFields) {\n <div>\n <span class=\"is-pr-1\">You have used both the</span>\n <code>@id</code>\n <span class=\"is-px-1\">and</span>\n <code>id</code>\n <span class=\"is-px-1\">fields in the same data. Please use</span>\n <code>@id</code>\n <span class=\"is-px-1\">when linking to existing nodes on the Platform, and</span>\n <code>id</code>\n <span class=\"is-px-1\">when linking to nodes you are uploading in this file using the same</span>\n <code>id</code>\n <span class=\"is-px-1\">field.</span>\n </div>\n }\n @case (ErrorKeys.NestedHeaders) {\n <div>\n <p>\n To link nodes together, you first need to define the node (e.g.,\n <code>source.id</code>\n ,\n <code>source.bibliography.title</code>\n ) and then create the link (e.g.,\n <code>cycle.defaultSource.id</code>\n ). We do not allow nesting (e.g.,\n <code>cycle.defaultSource.bibliography.title</code>\n ).\n </p>\n </div>\n }\n @case (ErrorKeys.NestedNodes) {\n <div>\n <p>To link nodes together, you need to upload each node separately, as we do not allow nesting:</p>\n <pre class=\"is-mt-2\"><code>{{ sampleLinkedNodes | json }}</code></pre>\n </div>\n }\n @case (ErrorKeys.ReferenceExistingHeaders) {\n <div>\n <p>\n You have used the internal\n <code>@id</code>\n field to upload a new Node.\n </p>\n <p>\n The\n <code>@id</code>\n field should only be used to reference existing Node or Terms. Example:\n </p>\n <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n <pre class=\"is-mt-2\"><code>cycle.@id,cycle.inputs.0.term.@id,source.id</code></pre>\n <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n <pre class=\"is-mt-2\"><code>cycle.id,cycle.inputs.0.term.@id,source.id</code></pre>\n </div>\n }\n @case (ErrorKeys.InvalidBlankNodeHeaders) {\n <div>\n <p>Evry blank node must be followed by a number, e.g.:</p>\n <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n <pre class=\"is-mt-2\"><code>cycle.inputs.term.name</code></pre>\n <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n <pre class=\"is-mt-2\"><code>cycle.inputs.0.term.name</code></pre>\n </div>\n }\n @case (ErrorKeys.MultipleNodeTypeCase) {\n <div>\n <p>You are using a combination of mixed cases in your headers:</p>\n <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n <pre class=\"is-mt-2\"><code>impactAssessment.id,impactAssessment.name</code></pre>\n <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n <pre class=\"is-mt-2\"><code>impactAssessment.id,impactassessment.name</code></pre>\n\n <p>\n Please make sure to always use either\n <code>impactAssessment</code>\n or\n <code>impactassessment</code>\n , but not both.\n </p>\n </div>\n }\n @case (ErrorKeys.MultipleTermHeaders) {\n <div>\n <p>\n You are using both\n <code>@id</code>\n (or\n <code>id</code>\n ) and\n <code>name</code>\n fields to upload an existing Node (e.g., a Term).\n </p>\n <p>\n Using both fields can lead to inconsistencies, if you are not uploading the correct value in either one.\n Instead, you should only use one of them:\n </p>\n <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n <pre class=\"is-mt-2\"><code>cycle.inputs.0.term.@id,cycle.inputs.0.term.name</code></pre>\n <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n <pre class=\"is-mt-2\"><code>cycle.inputs.0.term.@id</code></pre>\n </div>\n }\n @case (SchemaErrorKeys.ObjectArrayInvalid) {\n <div>\n <p>The column header {{ error().key }} must use the array format. Examples:</p>\n <pre class=\"is-mt-2\"><code>{{ error().key + '.0.term.name' }}</code></pre>\n <pre class=\"is-mt-2\"><code>{{ error().key + '.0.value' }}</code></pre>\n <pre class=\"is-mt-2\"><code>{{ error().key + '.1.term.name' }}</code></pre>\n <pre class=\"is-mt-2\"><code>{{ error().key + '.1.value' }}</code></pre>\n <ng-container *ngTemplateOutlet=\"schemaError\" />\n </div>\n }\n @case (ErrorKeys.MaxSize) {\n <div>\n <span>The maximum file size limit is {{ maxFileSizeMb }}Mb (current file size: {{ error().value }}Mb).</span>\n <span class=\"pl-1\">Please re-upload these data in multiple files.</span>\n </div>\n }\n @case (ErrorKeys.MaxRows) {\n <div>\n <span>\n Your file has {{ error().value | number }} rows. This might be an error caused by adding some data at the\n bottom of a spreadsheet by accident: delete any unused rows and resubmit the file.\n </span>\n </div>\n }\n @case (ErrorKeys.Mendeley) {\n <div>\n <p>An error occured while fetching the bibliographic information. Please try re-uploading the file.</p>\n <ng-container *ngTemplateOutlet=\"reportError\" />\n </div>\n }\n @case (ErrorKeys.Timeout) {\n <div>\n <p>Time exceeded for current step.</p>\n\n @if (debug()) {\n <span>You can try to \"Re-index\" or \"Re-upload\" if it still does not work.</span>\n }\n\n <ng-container *ngTemplateOutlet=\"reportError\" />\n </div>\n }\n @default {\n <div>\n <p>{{ message() }}</p>\n\n @if (debug()) {\n <pre><code>{{ error() | json }}</code></pre>\n }\n\n <ng-container *ngTemplateOutlet=\"reportError\" />\n </div>\n }\n }\n\n @if (hasGeoJSONError()) {\n <div>\n <p>If the GeoJSON is too large, please try to simplify it following these steps:</p>\n <ul class=\"is-my-1 content is-list-style-decimal pl-5\">\n <li>\n <span class=\"is-pr-1\">Go to</span>\n <a href=\"https://mapshaper.org/\" target=\"_blank\">https://mapshaper.org/</a>\n </li>\n <li>\n <span>\n Save the boundary in a valid\n <code>.geojson</code>\n file.\n </span>\n </li>\n <li>\n <span>Import it on mapshaper.</span>\n </li>\n <li>\n <span>Click \"Simplify\" in the top right corner in the menu bar.</span>\n </li>\n <li>\n <span>Adjust the percentage to a lower value, like 50% to start with.</span>\n </li>\n <li>\n <span>\n Export to\n <code>GeoJson</code>\n or\n <code>CSV</code>\n .\n </span>\n </li>\n <li>\n <span>Copy the resulting content into your upload file.</span>\n </li>\n </ul>\n <p>If you encounter the error again, try again using a lower percentage at step 5.</p>\n </div>\n }\n\n @if (columns().length || (error().index && !isSchemaError())) {\n <div>\n <b>Hint:</b>\n <span class=\"pl-1\">the error might be located</span>\n @if (error().index && !isSchemaError()) {\n <span class=\"pl-1\">on row {{ error().index }}</span>\n }\n @if (columns().length) {\n <span class=\"pl-1\">in {{ 'column' | pluralize: columns().length }}:</span>\n <ul class=\"mt-1 content is-list-style-disc pl-5\">\n @for (column of columns(); track column) {\n <li>\n <b class=\"pr-2\">{{ column.column }}</b>\n <code>{{ column.name }}</code>\n </li>\n }\n </ul>\n }\n </div>\n }\n\n @if (error().suggestions?.length) {\n <div>\n <b>Suggestions:</b>\n <span class=\"pl-1\">did you mean instead:</span>\n <ul class=\"mt-1 content is-list-style-disc pl-5\">\n @for (suggestion of error().suggestions; track suggestion) {\n <li>\n <code>{{ suggestion }}</code>\n </li>\n }\n </ul>\n </div>\n }\n\n @if (showCsvPreview()) {\n <div>\n <b>\n Preview\n <sup>1</sup>\n :\n </b>\n <div class=\"table-container is-mt-2\">\n <table class=\"table is-bordered is-fullwidth is-hoverable is-narrow mb-0\">\n <thead>\n @if (error().index) {\n <th></th>\n }\n @for (header of headers(); track header) {\n <th>{{ header }}</th>\n }\n </thead>\n <tbody>\n @for (row of rows(); track row) {\n <tr>\n @if (error().index) {\n <td class=\"has-text-danger\">\n <span class=\"is-nowrap\">Row {{ error().index }}</span>\n </td>\n }\n @for (col of row; track col; let colIndex = $index) {\n <td>\n <span\n [class.has-text-danger]=\"\n message() === ErrorKeys.DuplicatedIds && hasDuplicatedError(col, colIndex)\n \">\n {{ col | ellipsis: 50 }}\n </span>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n <p class=\"is-size-7\">\n <i>1. The preview does not necessarily reflect the original Upload's order or content.</i>\n </p>\n </div>\n }\n\n @if (showJsonPreview()) {\n <div>\n <b>Preview:</b>\n <pre class=\"is-mt-2\"><code>{{stringify(error().node)}}</code></pre>\n </div>\n }\n </div>\n}\n\n<ng-template #defaultError>\n <p class=\"is-mt-2 has-text-black\">\n <span class=\"is-pr-1\">If you are still stuck, please see</span>\n <a [href]=\"baseUrl + '/guide/guide-file-upload-prepare-file'\" target=\"_blank\">the example uploads and videos</a>\n <span class=\"is-px-1\">\n or try using the Wizard to get the first few rows of data formatted correctly, or use the chat to ask for help.\n </span>\n </p>\n</ng-template>\n\n<ng-template #reportError>\n <p class=\"is-mt-2\">\n To report this error, please\n <a class=\"is-pl-1\" [href]=\"reportErrorUrl()\" target=\"_blank\">click here</a>\n .\n </p>\n</ng-template>\n\n<ng-template #schemaError>\n <p>\n <span class=\"pr-1\">You can see the accepted field type and some examples</span>\n <a [href]=\"schemaKeyUrl()\" target=\"_blank\">here</a>\n <span>.</span>\n </p>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
12384
12382
|
}
|
|
12385
12383
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilesUploadErrorsComponent, decorators: [{
|
|
12386
12384
|
type: Component$1,
|
|
12387
|
-
args: [{ selector: 'he-files-upload-errors', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, HESvgIconComponent, DecimalPipe, JsonPipe, EllipsisPipe, PluralizePipe], template: "@if (error()) {\n <div class=\"is-flex is-flex-direction-column is-gap-8 has-text-danger\">\n @switch (message()) {\n @case (ErrorKeys.PrivacyNotAllowed) {\n <div>\n <span>\n Uploading data with\n <code class=\"is-px-1\">dataPrivate={{ error().value }}</code>\n is not allowed.\n </span>\n <span class=\"is-pl-1\">\n Please try uploading with\n <code class=\"is-px-1\">dataPrivate={{ !error().value }}</code>\n instead.\n </span>\n </div>\n }\n @case (ErrorKeys.InvalidJSON) {\n <div>\n <p>The uploaded content does not appear to contain valid JSON data:</p>\n <div class=\"is-my-2\">\n <pre><code>{{error().error}}</code></pre>\n </div>\n <p>\n Please validate your JSON content before uploading it using an\n <a href=\"https://jsoneditoronline.org\" target=\"_blank\">online tool</a>\n for example.\n </p>\n </div>\n }\n @case (ErrorKeys.NoData) {\n <div>\n <p>No Nodes could be found in your Upload. Please verify the column headers match the HESTIA schema.</p>\n <ng-container *ngTemplateOutlet=\"defaultError\" />\n </div>\n }\n @case (ErrorKeys.SetValueError) {\n <div class=\"notification is-danger\" role=\"alert\">\n <p>\n <he-svg-icon name=\"exclamation-triangle\" />\n <span>\n We could not convert the data in your Upload. This can be due to setting 2 different formats in the same\n field.\n </span>\n <span class=\"px-1\">Please refer to the</span>\n <a [href]=\"schemaUrl()\" target=\"_blank\">schema</a>\n <span class=\"pl-1\">and then correct the column headers indicated below.</span>\n </p>\n <ng-container *ngTemplateOutlet=\"defaultError\" />\n </div>\n <div>\n <pre><code>{{error().key}}</code></pre>\n </div>\n }\n @case (SchemaErrorKeys.PropertyNotFound) {\n <div class=\"notification is-danger\" role=\"alert\">\n <p>\n <he-svg-icon name=\"exclamation-triangle\" />\n <span class=\"is-pl-2\">You have column headers that do not match the HESTIA schema.</span>\n <span class=\"px-1\">Please refer to the</span>\n <a [href]=\"schemaUrl()\" target=\"_blank\">schema</a>\n <span class=\"pl-1\">and then correct the column headers indicated below.</span>\n </p>\n <ng-container *ngTemplateOutlet=\"defaultError\" />\n </div>\n <div>\n <pre><code>{{error().key}}</code></pre>\n </div>\n }\n @case (SchemaErrorKeys.PropertyInvalidFormat) {\n <div>\n <div>\n <span>\n The following value in the column\n <i>{{ error().key }}</i>\n is not in the correct format:\n </span>\n <br />\n <pre class=\"is-mt-2\"><code>{{stringify(error().value)}}</code></pre>\n </div>\n @switch (hasNumberWithCommasError()) {\n @case (true) {\n <p class=\"is-mt-2\">\n Please format your numbers to remove commas and use a decimal point to separate the whole part of the\n number from the fractional part of the number.\n </p>\n <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n <pre class=\"is-mt-2\"><code>3,510.1</code></pre>\n <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n <pre class=\"is-mt-2\"><code>3510.1</code></pre>\n }\n @case (false) {\n <ng-container *ngTemplateOutlet=\"schemaError\" />\n <p>The error could either be a value in the column, or an error with the column header.</p>\n <p>\n If you are trying to set no data, we accept either\n <code>-</code>\n or an empty cell.\n </p>\n }\n }\n </div>\n }\n @case (ErrorKeys.PropertyRequired) {\n <div>\n <div>\n <span class=\"pr-1\">The following field is required in the</span>\n @if (error().schema) {\n <a class=\"pr-1\" [href]=\"schemaUrl()\" target=\"_blank\">{{ error().schema }}</a>\n }\n <span>schema:</span>\n <br />\n <pre class=\"is-mt-2\"><code>{{error().property}}</code></pre>\n </div>\n <p>\n @switch (error().property) {\n @case ('id') {\n <span>\n You must assign a unique\n <code>id</code>\n for every record in your data.\n </span>\n }\n @case ('type') {\n <span>\n Every record in your data must contain a\n <code>type</code>\n .\n </span>\n }\n }\n </p>\n </div>\n }\n @case (ErrorKeys.PropertyInternal) {\n <div>\n <div>\n <span class=\"pr-1\">\n The following field is\n <code>internal</code>\n in the\n </span>\n <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schema }} schema</a>\n <span>:</span>\n <br />\n <pre class=\"is-mt-2\"><code>{{error().schemaKey || error().key}}</code></pre>\n </div>\n <p>\n You cannot upload\n <code>internal</code>\n fields to HESTIA.\n </p>\n </div>\n }\n @case (SchemaErrorKeys.SchemaNotFound) {\n <div>\n @if (error().key) {\n <div>\n <span>The following Node does not exist in the schema:</span>\n <br />\n <pre class=\"is-mt-2\"><code>{{error().key}}</code></pre>\n </div>\n } @else if (error().schema) {\n <div>\n <span>The following Node Type does not exist in the schema or can not be uploaded directly:</span>\n <br />\n <pre class=\"is-mt-2\"><code>{{error().schema}}</code></pre>\n </div>\n }\n <p>\n <span>The list of accepted values is:</span>\n </p>\n <div class=\"content\">\n <ul>\n @for (type of nodeTypes; track type) {\n <li>\n <i>{{ type }}</i>\n </li>\n }\n </ul>\n </div>\n </div>\n }\n @case (ErrorKeys.InvalidFirstColumn) {\n <div>\n <span>\n No data in the HESTIA format was detected on the first sheet. Either try selecting a different sheet in the\n upload screen, or check the sheet to ensure the headers follow the schema - see examples\n </span>\n <a class=\"pl-1\" href=\"/guide/guide-file-upload-examples\" target=\"_blank\">here</a>\n </div>\n }\n @case (ErrorKeys.InvalidExcelFile) {\n <div>\n This file has been uploaded with a\n <code>{{ fileExt() }}</code>\n extension, but does not appear to be a valid Excel file.\n </div>\n }\n @case (ErrorKeys.NoHeaders) {\n <div>\n <p>\n No headers matching the HESTIA schema were found on the first row. Please remove all empty rows at the\n begining of the file and try uploading again.\n </p>\n <ng-container *ngTemplateOutlet=\"defaultError\" />\n </div>\n }\n @case (ErrorKeys.InvalidSheetName) {\n <div>\n <div>\n <span class=\"pr-1\">The Excel sheet</span>\n <code>{{ error().value }}</code>\n <span class=\"pl-1\">does not exist.</span>\n <span class=\"pl-1\">Your Excel file contains the following sheets:</span>\n <ul class=\"mt-1 content is-list-style-disc pl-5\">\n @for (e of error().error.split(';'); track e) {\n <li>\n <code>{{ e }}</code>\n </li>\n }\n </ul>\n </div>\n <p>\n <span>Please re-upload selecting one of the sheets above.</span>\n </p>\n </div>\n }\n @case (ErrorKeys.DuplicatedHeaders) {\n <div>\n <span>Your upload contains duplicated column headers.</span>\n </div>\n }\n @case (ErrorKeys.DuplicatedIds) {\n <div>\n <div>\n <span class=\"is-pr-1\">You have multiple</span>\n <code>{{ error().schema | pluralize }}</code>\n <span class=\"is-px-1\">with the same</span>\n <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n <span class=\"is-px-1\">but different data. The</span>\n <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n <span class=\"is-pl-1\">is:</span>\n <br />\n <pre class=\"is-mt-2\"><code>{{error().value}}</code></pre>\n </div>\n <p class=\"is-mt-2 is-italic\">\n <span class=\"is-pr-1\">Please note that ussing different case does not make the</span>\n <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n <span class=\"is-pl-1\">unique.</span>\n </p>\n </div>\n }\n @case (SchemaErrorKeys.DuplicatedIdFields) {\n <div>\n <span class=\"is-pr-1\">You have used both the</span>\n <code>@id</code>\n <span class=\"is-px-1\">and</span>\n <code>id</code>\n <span class=\"is-px-1\">fields in the same data. Please use</span>\n <code>@id</code>\n <span class=\"is-px-1\">when linking to existing nodes on the Platform, and</span>\n <code>id</code>\n <span class=\"is-px-1\">when linking to nodes you are uploading in this file using the same</span>\n <code>id</code>\n <span class=\"is-px-1\">field.</span>\n </div>\n }\n @case (ErrorKeys.NestedHeaders) {\n <div>\n <p>\n To link nodes together, you first need to define the node (e.g.,\n <code>source.id</code>\n ,\n <code>source.bibliography.title</code>\n ) and then create the link (e.g.,\n <code>cycle.defaultSource.id</code>\n ). We do not allow nesting (e.g.,\n <code>cycle.defaultSource.bibliography.title</code>\n ).\n </p>\n </div>\n }\n @case (ErrorKeys.NestedNodes) {\n <div>\n <p>To link nodes together, you need to upload each node separately, as we do not allow nesting:</p>\n <pre class=\"is-mt-2\"><code>{{ sampleLinkedNodes | json }}</code></pre>\n </div>\n }\n @case (ErrorKeys.ReferenceExistingHeaders) {\n <div>\n <p>\n You have used the internal\n <code>@id</code>\n field to upload a new Node.\n </p>\n <p>\n The\n <code>@id</code>\n field should only be used to reference existing Node or Terms. Example:\n </p>\n <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n <pre class=\"is-mt-2\"><code>cycle.@id,cycle.inputs.0.term.@id,source.id</code></pre>\n <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n <pre class=\"is-mt-2\"><code>cycle.id,cycle.inputs.0.term.@id,source.id</code></pre>\n </div>\n }\n @case (ErrorKeys.InvalidBlankNodeHeaders) {\n <div>\n <p>Evry blank node must be followed by a number, e.g.:</p>\n <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n <pre class=\"is-mt-2\"><code>cycle.inputs.term.name</code></pre>\n <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n <pre class=\"is-mt-2\"><code>cycle.inputs.0.term.name</code></pre>\n </div>\n }\n @case (ErrorKeys.MultipleNodeTypeCase) {\n <div>\n <p>You are using a combination of mixed cases in your headers:</p>\n <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n <pre class=\"is-mt-2\"><code>impactAssessment.id,impactAssessment.name</code></pre>\n <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n <pre class=\"is-mt-2\"><code>impactAssessment.id,impactassessment.name</code></pre>\n\n <p>\n Please make sure to always use either\n <code>impactAssessment</code>\n or\n <code>impactassessment</code>\n , but not both.\n </p>\n </div>\n }\n @case (ErrorKeys.MultipleTermHeaders) {\n <div>\n <p>\n You are using both\n <code>@id</code>\n (or\n <code>id</code>\n ) and\n <code>name</code>\n fields to upload an existing Node (e.g., a Term).\n </p>\n <p>\n Using both fields can lead to inconsistencies, if you are not uploading the correct value in either one.\n Instead, you should only use one of them:\n </p>\n <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n <pre class=\"is-mt-2\"><code>cycle.inputs.0.term.@id,cycle.inputs.0.term.name</code></pre>\n <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n <pre class=\"is-mt-2\"><code>cycle.inputs.0.term.@id</code></pre>\n </div>\n }\n @case (SchemaErrorKeys.ObjectArrayInvalid) {\n <div>\n <p>The column header {{ error().key }} must use the array format. Examples:</p>\n <pre class=\"is-mt-2\"><code>{{ error().key + '.0.term.name' }}</code></pre>\n <pre class=\"is-mt-2\"><code>{{ error().key + '.0.value' }}</code></pre>\n <pre class=\"is-mt-2\"><code>{{ error().key + '.1.term.name' }}</code></pre>\n <pre class=\"is-mt-2\"><code>{{ error().key + '.1.value' }}</code></pre>\n <ng-container *ngTemplateOutlet=\"schemaError\" />\n </div>\n }\n @case (ErrorKeys.MaxSize) {\n <div>\n <span>The maximum file size limit is {{ maxFileSizeMb }}Mb (current file size: {{ error().value }}Mb).</span>\n <span class=\"pl-1\">Please re-upload these data in multiple files.</span>\n </div>\n }\n @case (ErrorKeys.MaxRows) {\n <div>\n <span>\n Your file has {{ error().value | number }} rows. This might be an error caused by adding some data at the\n bottom of a spreadsheet by accident: delete any unused rows and resubmit the file.\n </span>\n </div>\n }\n @case (ErrorKeys.Mendeley) {\n <div>\n <p>An error occured while fetching the bibliographic information. Please try re-uploading the file.</p>\n <ng-container *ngTemplateOutlet=\"reportError\" />\n </div>\n }\n @case (ErrorKeys.Timeout) {\n <div>\n <p>Time exceeded for current step.</p>\n\n @if (debug()) {\n <span>You can try to \"Re-index\" or \"Re-upload\" if it still does not work.</span>\n }\n\n <ng-container *ngTemplateOutlet=\"reportError\" />\n </div>\n }\n @default {\n <div>\n <p>{{ message() }}</p>\n\n @if (debug()) {\n <pre><code>{{ error() | json }}</code></pre>\n }\n\n <ng-container *ngTemplateOutlet=\"reportError\" />\n </div>\n }\n }\n\n @if (hasGeoJSONError()) {\n <div>\n <p>If the GeoJSON is too large, please try to simplify it following these steps:</p>\n <ul class=\"is-my-1 content is-list-style-decimal pl-5\">\n <li>\n <span class=\"is-pr-1\">Go to</span>\n <a href=\"https://mapshaper.org/\" target=\"_blank\">https://mapshaper.org/</a>\n </li>\n <li>\n <span>\n Save the boundary in a valid\n <code>.geojson</code>\n file.\n </span>\n </li>\n <li>\n <span>Import it on mapshaper.</span>\n </li>\n <li>\n <span>Click \"Simplify\" in the top right corner in the menu bar.</span>\n </li>\n <li>\n <span>Adjust the percentage to a lower value, like 50% to start with.</span>\n </li>\n <li>\n <span>\n Export to\n <code>GeoJson</code>\n or\n <code>CSV</code>\n .\n </span>\n </li>\n <li>\n <span>Copy the resulting content into your upload file.</span>\n </li>\n </ul>\n <p>If you encounter the error again, try again using a lower percentage at step 5.</p>\n </div>\n }\n\n @if (columns().length || (error().index && !isSchemaError())) {\n <div>\n <b>Hint:</b>\n <span class=\"pl-1\">the error might be located</span>\n @if (error().index && !isSchemaError()) {\n <span class=\"pl-1\">on row {{ error().index }}</span>\n }\n @if (columns().length) {\n <span class=\"pl-1\">in {{ 'column' | pluralize: columns().length }}:</span>\n <ul class=\"mt-1 content is-list-style-disc pl-5\">\n @for (column of columns(); track column) {\n <li>\n <b class=\"pr-2\">{{ column.column }}</b>\n <code>{{ column.name }}</code>\n </li>\n }\n </ul>\n }\n </div>\n }\n\n @if (error().suggestions?.length) {\n <div>\n <b>Suggestions:</b>\n <span class=\"pl-1\">did you mean instead:</span>\n <ul class=\"mt-1 content is-list-style-disc pl-5\">\n @for (suggestion of error().suggestions; track suggestion) {\n <li>\n <code>{{ suggestion }}</code>\n </li>\n }\n </ul>\n </div>\n }\n\n @if (showCsvPreview()) {\n <div>\n <b>\n Preview\n <sup>1</sup>\n :\n </b>\n <div class=\"table-container is-mt-2\">\n <table class=\"table is-bordered is-fullwidth is-hoverable is-narrow mb-0\">\n <thead>\n @if (error().index) {\n <th></th>\n }\n @for (header of headers(); track header) {\n <th>{{ header }}</th>\n }\n </thead>\n <tbody>\n @for (row of rows(); track row) {\n <tr>\n @if (error().index) {\n <td class=\"has-text-danger\">\n <span class=\"is-nowrap\">Row {{ error().index }}</span>\n </td>\n }\n @for (col of row; track col; let colIndex = $index) {\n <td>\n <span\n [class.has-text-danger]=\"\n message() === ErrorKeys.DuplicatedIds && hasDuplicatedError(col, colIndex)\n \">\n {{ col | ellipsis: 50 }}\n </span>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n <p class=\"is-size-7\">\n <i>1. The preview does not necessarily reflect the original Upload's order or content.</i>\n </p>\n </div>\n }\n\n @if (showJsonPreview()) {\n <div>\n <b>Preview:</b>\n <pre class=\"is-mt-2\"><code>{{stringify(error().node)}}</code></pre>\n </div>\n }\n </div>\n}\n\n<ng-template #defaultError>\n <p class=\"is-mt-2 has-text-black\">\n <span class=\"is-pr-1\">If you are still stuck, please see</span>\n <a [href]=\"baseUrl + '/guide/guide-file-upload-prepare-file'\" target=\"_blank\">the example uploads and videos</a>\n <span class=\"is-px-1\">\n or try using the Wizard to get the first few rows of data formatted correctly, or use the chat to ask for help.\n </span>\n </p>\n</ng-template>\n\n<ng-template #reportError>\n <p class=\"is-mt-2\">\n To report this error, please\n <a class=\"is-pl-1\" [href]=\"reportErrorUrl()\" target=\"_blank\">click here</a>\n .\n </p>\n</ng-template>\n\n<ng-template #schemaError>\n <p>\n <span class=\"pr-1\">You can see the accepted field type and some examples</span>\n <a [href]=\"schemaKeyUrl()\" target=\"_blank\">here</a>\n <span>.</span>\n </p>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
|
|
12385
|
+
args: [{ selector: 'he-files-upload-errors', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, HESvgIconComponent, DecimalPipe, JsonPipe, EllipsisPipe, PluralizePipe], template: "@if (error()) {\n <div class=\"is-flex is-flex-direction-column is-gap-8 has-text-danger\">\n @switch (message()) {\n @case (ErrorKeys.PrivacyNotAllowed) {\n <div>\n <span>\n Uploading data with\n <code class=\"is-px-1\">dataPrivate={{ error().value }}</code>\n is not allowed.\n </span>\n <span class=\"is-pl-1\">\n Please try uploading with\n <code class=\"is-px-1\">dataPrivate={{ !error().value }}</code>\n instead.\n </span>\n </div>\n }\n @case (ErrorKeys.InvalidJSON) {\n <div>\n <p>The uploaded content does not appear to contain valid JSON data:</p>\n <div class=\"is-my-2\">\n <pre><code>{{error().error}}</code></pre>\n </div>\n <p>\n Please validate your JSON content before uploading it using an\n <a href=\"https://jsoneditoronline.org\" target=\"_blank\">online tool</a>\n for example.\n </p>\n </div>\n }\n @case (ErrorKeys.NoData) {\n <div>\n <p>No Nodes could be found in your Upload. Please verify the column headers match the HESTIA schema.</p>\n <ng-container *ngTemplateOutlet=\"defaultError\" />\n </div>\n }\n @case (ErrorKeys.SetValueError) {\n <div class=\"notification is-danger\" role=\"alert\">\n <p>\n <he-svg-icon name=\"exclamation-triangle\" />\n <span class=\"is-pl-3\">\n We could not convert the data in your Upload. This can be due to setting 2 different formats in the same\n field.\n </span>\n <span class=\"px-1\">Please refer to the</span>\n <a [href]=\"schemaUrl()\" target=\"_blank\">schema</a>\n <span class=\"pl-1\">and then correct the column headers indicated below.</span>\n </p>\n <ng-container *ngTemplateOutlet=\"defaultError\" />\n </div>\n <div>\n <pre><code>{{error().key}}</code></pre>\n </div>\n }\n @case (SchemaErrorKeys.PropertyNotFound) {\n <div class=\"notification is-danger\" role=\"alert\">\n <p>\n <he-svg-icon name=\"exclamation-triangle\" />\n <span class=\"is-pl-2\">You have column headers that do not match the HESTIA schema.</span>\n <span class=\"px-1\">Please refer to the</span>\n <a [href]=\"schemaUrl()\" target=\"_blank\">schema</a>\n <span class=\"pl-1\">and then correct the column headers indicated below.</span>\n </p>\n <ng-container *ngTemplateOutlet=\"defaultError\" />\n </div>\n <div>\n <pre><code>{{error().key}}</code></pre>\n </div>\n }\n @case (SchemaErrorKeys.PropertyInvalidFormat) {\n <div>\n <div>\n <span>\n The following value in the column\n <i>{{ error().key }}</i>\n is not in the correct format:\n </span>\n <br />\n <pre class=\"is-mt-2\"><code>{{stringify(error().value)}}</code></pre>\n </div>\n @switch (hasNumberWithCommasError()) {\n @case (true) {\n <p class=\"is-mt-2\">\n Please format your numbers to remove commas and use a decimal point to separate the whole part of the\n number from the fractional part of the number.\n </p>\n <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n <pre class=\"is-mt-2\"><code>3,510.1</code></pre>\n <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n <pre class=\"is-mt-2\"><code>3510.1</code></pre>\n }\n @case (false) {\n <ng-container *ngTemplateOutlet=\"schemaError\" />\n <p>The error could either be a value in the column, or an error with the column header.</p>\n <p>\n If you are trying to set no data, we accept either\n <code>-</code>\n or an empty cell.\n </p>\n }\n }\n </div>\n }\n @case (ErrorKeys.PropertyRequired) {\n <div>\n <div>\n <span class=\"pr-1\">The following field is required in the</span>\n @if (error().schema) {\n <a class=\"pr-1\" [href]=\"schemaUrl()\" target=\"_blank\">{{ error().schema }}</a>\n }\n <span>schema:</span>\n <br />\n <pre class=\"is-mt-2\"><code>{{error().property}}</code></pre>\n </div>\n <p>\n @switch (error().property) {\n @case ('id') {\n <span>\n You must assign a unique\n <code>id</code>\n for every record in your data.\n </span>\n }\n @case ('type') {\n <span>\n Every record in your data must contain a\n <code>type</code>\n .\n </span>\n }\n }\n </p>\n </div>\n }\n @case (ErrorKeys.PropertyInternal) {\n <div>\n <div>\n <span class=\"pr-1\">\n The following field is\n <code>internal</code>\n in the\n </span>\n <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schema }} schema</a>\n <span>:</span>\n <br />\n <pre class=\"is-mt-2\"><code>{{error().schemaKey || error().key}}</code></pre>\n </div>\n <p>\n You cannot upload\n <code>internal</code>\n fields to HESTIA.\n </p>\n </div>\n }\n @case (SchemaErrorKeys.SchemaNotFound) {\n <div>\n @if (error().key) {\n <div>\n <span>The following Node does not exist in the schema:</span>\n <br />\n <pre class=\"is-mt-2\"><code>{{error().key}}</code></pre>\n </div>\n } @else if (error().schema) {\n <div>\n <span>The following Node Type does not exist in the schema or can not be uploaded directly:</span>\n <br />\n <pre class=\"is-mt-2\"><code>{{error().schema}}</code></pre>\n </div>\n }\n <p>\n <span>The list of accepted values is:</span>\n </p>\n <div class=\"content\">\n <ul>\n @for (type of nodeTypes; track type) {\n <li>\n <i>{{ type }}</i>\n </li>\n }\n </ul>\n </div>\n </div>\n }\n @case (ErrorKeys.InvalidFirstColumn) {\n <div>\n <span>\n No data in the HESTIA format was detected on the first sheet. Either try selecting a different sheet in the\n upload screen, or check the sheet to ensure the headers follow the schema - see examples\n </span>\n <a class=\"pl-1\" href=\"/guide/guide-file-upload-examples\" target=\"_blank\">here</a>\n </div>\n }\n @case (ErrorKeys.InvalidExcelFile) {\n <div>\n This file has been uploaded with a\n <code>{{ fileExt() }}</code>\n extension, but does not appear to be a valid Excel file.\n </div>\n }\n @case (ErrorKeys.NoHeaders) {\n <div>\n <p>\n No headers matching the HESTIA schema were found on the first row. Please remove all empty rows at the\n begining of the file and try uploading again.\n </p>\n <ng-container *ngTemplateOutlet=\"defaultError\" />\n </div>\n }\n @case (ErrorKeys.InvalidSheetName) {\n <div>\n <div>\n <span class=\"pr-1\">The Excel sheet</span>\n <code>{{ error().value }}</code>\n <span class=\"pl-1\">does not exist.</span>\n <span class=\"pl-1\">Your Excel file contains the following sheets:</span>\n <ul class=\"mt-1 content is-list-style-disc pl-5\">\n @for (e of error().error.split(';'); track e) {\n <li>\n <code>{{ e }}</code>\n </li>\n }\n </ul>\n </div>\n <p>\n <span>Please re-upload selecting one of the sheets above.</span>\n </p>\n </div>\n }\n @case (ErrorKeys.DuplicatedHeaders) {\n <div>\n <span>Your upload contains duplicated column headers.</span>\n </div>\n }\n @case (ErrorKeys.DuplicatedIds) {\n <div>\n <div>\n <span class=\"is-pr-1\">You have multiple</span>\n <code>{{ error().schema | pluralize }}</code>\n <span class=\"is-px-1\">with the same</span>\n <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n <span class=\"is-px-1\">but different data. The</span>\n <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n <span class=\"is-pl-1\">is:</span>\n <br />\n <pre class=\"is-mt-2\"><code>{{error().value}}</code></pre>\n </div>\n <p class=\"is-mt-2 is-italic\">\n <span class=\"is-pr-1\">Please note that ussing different case does not make the</span>\n <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n <span class=\"is-pl-1\">unique.</span>\n </p>\n </div>\n }\n @case (SchemaErrorKeys.DuplicatedIdFields) {\n <div>\n <span class=\"is-pr-1\">You have used both the</span>\n <code>@id</code>\n <span class=\"is-px-1\">and</span>\n <code>id</code>\n <span class=\"is-px-1\">fields in the same data. Please use</span>\n <code>@id</code>\n <span class=\"is-px-1\">when linking to existing nodes on the Platform, and</span>\n <code>id</code>\n <span class=\"is-px-1\">when linking to nodes you are uploading in this file using the same</span>\n <code>id</code>\n <span class=\"is-px-1\">field.</span>\n </div>\n }\n @case (ErrorKeys.NestedHeaders) {\n <div>\n <p>\n To link nodes together, you first need to define the node (e.g.,\n <code>source.id</code>\n ,\n <code>source.bibliography.title</code>\n ) and then create the link (e.g.,\n <code>cycle.defaultSource.id</code>\n ). We do not allow nesting (e.g.,\n <code>cycle.defaultSource.bibliography.title</code>\n ).\n </p>\n </div>\n }\n @case (ErrorKeys.NestedNodes) {\n <div>\n <p>To link nodes together, you need to upload each node separately, as we do not allow nesting:</p>\n <pre class=\"is-mt-2\"><code>{{ sampleLinkedNodes | json }}</code></pre>\n </div>\n }\n @case (ErrorKeys.ReferenceExistingHeaders) {\n <div>\n <p>\n You have used the internal\n <code>@id</code>\n field to upload a new Node.\n </p>\n <p>\n The\n <code>@id</code>\n field should only be used to reference existing Node or Terms. Example:\n </p>\n <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n <pre class=\"is-mt-2\"><code>cycle.@id,cycle.inputs.0.term.@id,source.id</code></pre>\n <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n <pre class=\"is-mt-2\"><code>cycle.id,cycle.inputs.0.term.@id,source.id</code></pre>\n </div>\n }\n @case (ErrorKeys.InvalidBlankNodeHeaders) {\n <div>\n <p>Evry blank node must be followed by a number, e.g.:</p>\n <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n <pre class=\"is-mt-2\"><code>cycle.inputs.term.name</code></pre>\n <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n <pre class=\"is-mt-2\"><code>cycle.inputs.0.term.name</code></pre>\n </div>\n }\n @case (ErrorKeys.MultipleNodeTypeCase) {\n <div>\n <p>You are using a combination of mixed cases in your headers:</p>\n <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n <pre class=\"is-mt-2\"><code>impactAssessment.id,impactAssessment.name</code></pre>\n <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n <pre class=\"is-mt-2\"><code>impactAssessment.id,impactassessment.name</code></pre>\n\n <p>\n Please make sure to always use either\n <code>impactAssessment</code>\n or\n <code>impactassessment</code>\n , but not both.\n </p>\n </div>\n }\n @case (ErrorKeys.MultipleTermHeaders) {\n <div>\n <p>\n You are using both\n <code>@id</code>\n (or\n <code>id</code>\n ) and\n <code>name</code>\n fields to upload an existing Node (e.g., a Term).\n </p>\n <p>\n Using both fields can lead to inconsistencies, if you are not uploading the correct value in either one.\n Instead, you should only use one of them:\n </p>\n <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n <pre class=\"is-mt-2\"><code>cycle.inputs.0.term.@id,cycle.inputs.0.term.name</code></pre>\n <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n <pre class=\"is-mt-2\"><code>cycle.inputs.0.term.@id</code></pre>\n </div>\n }\n @case (SchemaErrorKeys.ObjectArrayInvalid) {\n <div>\n <p>The column header {{ error().key }} must use the array format. Examples:</p>\n <pre class=\"is-mt-2\"><code>{{ error().key + '.0.term.name' }}</code></pre>\n <pre class=\"is-mt-2\"><code>{{ error().key + '.0.value' }}</code></pre>\n <pre class=\"is-mt-2\"><code>{{ error().key + '.1.term.name' }}</code></pre>\n <pre class=\"is-mt-2\"><code>{{ error().key + '.1.value' }}</code></pre>\n <ng-container *ngTemplateOutlet=\"schemaError\" />\n </div>\n }\n @case (ErrorKeys.MaxSize) {\n <div>\n <span>The maximum file size limit is {{ maxFileSizeMb }}Mb (current file size: {{ error().value }}Mb).</span>\n <span class=\"pl-1\">Please re-upload these data in multiple files.</span>\n </div>\n }\n @case (ErrorKeys.MaxRows) {\n <div>\n <span>\n Your file has {{ error().value | number }} rows. This might be an error caused by adding some data at the\n bottom of a spreadsheet by accident: delete any unused rows and resubmit the file.\n </span>\n </div>\n }\n @case (ErrorKeys.Mendeley) {\n <div>\n <p>An error occured while fetching the bibliographic information. Please try re-uploading the file.</p>\n <ng-container *ngTemplateOutlet=\"reportError\" />\n </div>\n }\n @case (ErrorKeys.Timeout) {\n <div>\n <p>Time exceeded for current step.</p>\n\n @if (debug()) {\n <span>You can try to \"Re-index\" or \"Re-upload\" if it still does not work.</span>\n }\n\n <ng-container *ngTemplateOutlet=\"reportError\" />\n </div>\n }\n @default {\n <div>\n <p>{{ message() }}</p>\n\n @if (debug()) {\n <pre><code>{{ error() | json }}</code></pre>\n }\n\n <ng-container *ngTemplateOutlet=\"reportError\" />\n </div>\n }\n }\n\n @if (hasGeoJSONError()) {\n <div>\n <p>If the GeoJSON is too large, please try to simplify it following these steps:</p>\n <ul class=\"is-my-1 content is-list-style-decimal pl-5\">\n <li>\n <span class=\"is-pr-1\">Go to</span>\n <a href=\"https://mapshaper.org/\" target=\"_blank\">https://mapshaper.org/</a>\n </li>\n <li>\n <span>\n Save the boundary in a valid\n <code>.geojson</code>\n file.\n </span>\n </li>\n <li>\n <span>Import it on mapshaper.</span>\n </li>\n <li>\n <span>Click \"Simplify\" in the top right corner in the menu bar.</span>\n </li>\n <li>\n <span>Adjust the percentage to a lower value, like 50% to start with.</span>\n </li>\n <li>\n <span>\n Export to\n <code>GeoJson</code>\n or\n <code>CSV</code>\n .\n </span>\n </li>\n <li>\n <span>Copy the resulting content into your upload file.</span>\n </li>\n </ul>\n <p>If you encounter the error again, try again using a lower percentage at step 5.</p>\n </div>\n }\n\n @if (columns().length || (error().index && !isSchemaError())) {\n <div>\n <b>Hint:</b>\n <span class=\"pl-1\">the error might be located</span>\n @if (error().index && !isSchemaError()) {\n <span class=\"pl-1\">on row {{ error().index }}</span>\n }\n @if (columns().length) {\n <span class=\"pl-1\">in {{ 'column' | pluralize: columns().length }}:</span>\n <ul class=\"mt-1 content is-list-style-disc pl-5\">\n @for (column of columns(); track column) {\n <li>\n <b class=\"pr-2\">{{ column.column }}</b>\n <code>{{ column.name }}</code>\n </li>\n }\n </ul>\n }\n </div>\n }\n\n @if (error().suggestions?.length) {\n <div>\n <b>Suggestions:</b>\n <span class=\"pl-1\">did you mean instead:</span>\n <ul class=\"mt-1 content is-list-style-disc pl-5\">\n @for (suggestion of error().suggestions; track suggestion) {\n <li>\n <code>{{ suggestion }}</code>\n </li>\n }\n </ul>\n </div>\n }\n\n @if (showCsvPreview()) {\n <div>\n <b>\n Preview\n <sup>1</sup>\n :\n </b>\n <div class=\"table-container is-mt-2\">\n <table class=\"table is-bordered is-fullwidth is-hoverable is-narrow mb-0\">\n <thead>\n @if (error().index) {\n <th></th>\n }\n @for (header of headers(); track header) {\n <th>{{ header }}</th>\n }\n </thead>\n <tbody>\n @for (row of rows(); track row) {\n <tr>\n @if (error().index) {\n <td class=\"has-text-danger\">\n <span class=\"is-nowrap\">Row {{ error().index }}</span>\n </td>\n }\n @for (col of row; track col; let colIndex = $index) {\n <td>\n <span\n [class.has-text-danger]=\"\n message() === ErrorKeys.DuplicatedIds && hasDuplicatedError(col, colIndex)\n \">\n {{ col | ellipsis: 50 }}\n </span>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n <p class=\"is-size-7\">\n <i>1. The preview does not necessarily reflect the original Upload's order or content.</i>\n </p>\n </div>\n }\n\n @if (showJsonPreview()) {\n <div>\n <b>Preview:</b>\n <pre class=\"is-mt-2\"><code>{{stringify(error().node)}}</code></pre>\n </div>\n }\n </div>\n}\n\n<ng-template #defaultError>\n <p class=\"is-mt-2 has-text-black\">\n <span class=\"is-pr-1\">If you are still stuck, please see</span>\n <a [href]=\"baseUrl + '/guide/guide-file-upload-prepare-file'\" target=\"_blank\">the example uploads and videos</a>\n <span class=\"is-px-1\">\n or try using the Wizard to get the first few rows of data formatted correctly, or use the chat to ask for help.\n </span>\n </p>\n</ng-template>\n\n<ng-template #reportError>\n <p class=\"is-mt-2\">\n To report this error, please\n <a class=\"is-pl-1\" [href]=\"reportErrorUrl()\" target=\"_blank\">click here</a>\n .\n </p>\n</ng-template>\n\n<ng-template #schemaError>\n <p>\n <span class=\"pr-1\">You can see the accepted field type and some examples</span>\n <a [href]=\"schemaKeyUrl()\" target=\"_blank\">here</a>\n <span>.</span>\n </p>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
|
|
12388
12386
|
}], ctorParameters: () => [], propDecorators: { error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: true }] }], file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }] } });
|
|
12389
12387
|
|
|
12390
12388
|
const nodeTerm = (node, key) => {
|