@haus-tech/product-import-export-plugin 2.2.0-dev.0

package/dist/ui/components/export-dialog.component.js

@@ -0,0 +1,108 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExportDialogComponent = void 0;
+const core_1 = require("@angular/core");
+const forms_1 = require("@angular/forms");
+const core_2 = require("@vendure/admin-ui/core");
+const lodash_1 = require("lodash");
+let ExportDialogComponent = class ExportDialogComponent {
+    fileNameElement;
+    resolveWith;
+    selection = [];
+    fileName = '';
+    customFields = [];
+    selectedFields = [];
+    exportAssetsAs = 'url';
+    selectedExportFields = [];
+    availableExportFields = [
+        'productId',
+        'name',
+        'slug',
+        'description',
+        'assets',
+        'facets',
+        'optionGroups',
+        'sku',
+        'optionValues',
+        'price',
+        'taxCategory',
+        'stockOnHand',
+        'trackInventory',
+        'variantAssets',
+        'variantFacets',
+    ];
+    config;
+    ngOnInit() {
+        this.selectedFields = [...this.customFields];
+        if (this.config.defaultExportAssetsAs?.includes(this.config.defaultExportAssetsAs)) {
+            this.exportAssetsAs = this.config.defaultExportAssetsAs;
+        }
+        else {
+            this.exportAssetsAs = this.config.exportAssetsAsOptions?.[0] || 'url';
+        }
+        this.selectedExportFields = (0, lodash_1.uniq)([
+            ...(this.config.defaultExportFields || []),
+            ...(this.config.requiredExportFields || []),
+        ]);
+    }
+    ngAfterViewInit() {
+        if (this.fileNameElement) {
+            setTimeout(() => {
+                this.fileNameElement.nativeElement.focus();
+            }, 0);
+        }
+    }
+    export() {
+        this.fileName = this.fileName?.trim();
+        this.resolveWith({
+            result: true,
+            fileName: this.fileName,
+            selectedFields: this.selectedFields,
+            exportAssetsAs: this.exportAssetsAs,
+            selectedExportFields: this.selectedExportFields,
+        });
+    }
+    cancel() {
+        this.resolveWith({ result: false });
+    }
+    toggleFieldSelection(fieldName) {
+        const index = this.selectedFields.indexOf(fieldName);
+        if (index > -1) {
+            this.selectedFields.splice(index, 1);
+        }
+        else {
+            this.selectedFields.push(fieldName);
+        }
+    }
+    toggleExportFieldSelection(fieldName) {
+        const index = this.selectedExportFields.indexOf(fieldName);
+        if (index > -1) {
+            this.selectedExportFields.splice(index, 1);
+        }
+        else {
+            this.selectedExportFields.push(fieldName);
+        }
+    }
+};
+__decorate([
+    (0, core_1.ViewChild)('fileNameInput', { static: false }),
+    __metadata("design:type", core_1.ElementRef)
+], ExportDialogComponent.prototype, "fileNameElement", void 0);
+ExportDialogComponent = __decorate([
+    (0, core_1.Component)({
+        selector: 'vdr-export-dialog',
+        templateUrl: './export-dialog.component.html',
+        standalone: true,
+        imports: [core_2.SharedModule, forms_1.FormsModule],
+    })
+], ExportDialogComponent);
+exports.ExportDialogComponent = ExportDialogComponent;

package/dist/ui/components/export-dialog.component.ts

@@ -0,0 +1,142 @@
+import { Component, ViewChild, ElementRef, AfterViewInit, OnInit } from '@angular/core'
+import { Dialog } from '@vendure/admin-ui/core'
+import { FormsModule } from '@angular/forms'
+import { SharedModule } from '@vendure/admin-ui/core'
+import { uniq } from 'lodash'
+
+type ProductFields =
+  | 'productId'
+  | 'name'
+  | 'slug'
+  | 'description'
+  | 'assets'
+  | 'facets'
+  | 'optionGroups'
+
+type VariantFields =
+  | 'sku'
+  | 'optionValues'
+  | 'price'
+  | 'taxCategory'
+  | 'stockOnHand'
+  | 'trackInventory'
+  | 'variantAssets'
+  | 'variantFacets'
+
+type ExportFields = Array<ProductFields | VariantFields>
+interface PluginInitOptions {
+  defaultFileName?: string
+  exportAssetsAsOptions?: Array<'url' | 'json'>
+  defaultExportAssetsAs?: 'url' | 'json'
+  defaultExportFields?: ExportFields
+  requiredExportFields?: ExportFields
+}
+
+@Component({
+  selector: 'vdr-export-dialog',
+  templateUrl: './export-dialog.component.html',
+  standalone: true,
+  imports: [SharedModule, FormsModule],
+})
+export class ExportDialogComponent
+  implements
+    Dialog<{
+      result: boolean
+      fileName?: string
+      selectedFields?: string[]
+      exportAssetsAs?: 'url' | 'json'
+      selectedExportFields?: ExportFields
+    }>,
+    AfterViewInit,
+    OnInit
+{
+  @ViewChild('fileNameInput', { static: false }) fileNameElement: ElementRef<HTMLInputElement>
+
+  resolveWith: (result?: {
+    result: boolean
+    fileName?: string
+    selectedFields?: string[]
+    exportAssetsAs?: 'url' | 'json'
+    selectedExportFields?: ExportFields
+  }) => void
+  selection: any[] = []
+  fileName: string = ''
+  customFields: string[] = []
+  selectedFields: string[] = []
+  exportAssetsAs: 'url' | 'json' = 'url'
+  selectedExportFields: ExportFields = []
+  availableExportFields: ExportFields = [
+    'productId',
+    'name',
+    'slug',
+    'description',
+    'assets',
+    'facets',
+    'optionGroups',
+    'sku',
+    'optionValues',
+    'price',
+    'taxCategory',
+    'stockOnHand',
+    'trackInventory',
+    'variantAssets',
+    'variantFacets',
+  ]
+
+  config: PluginInitOptions
+
+  ngOnInit(): void {
+    this.selectedFields = [...this.customFields]
+    if (this.config.defaultExportAssetsAs?.includes(this.config.defaultExportAssetsAs)) {
+      this.exportAssetsAs = this.config.defaultExportAssetsAs
+    } else {
+      this.exportAssetsAs = this.config.exportAssetsAsOptions?.[0] || 'url'
+    }
+
+    this.selectedExportFields = uniq([
+      ...(this.config.defaultExportFields || []),
+      ...(this.config.requiredExportFields || []),
+    ])
+  }
+
+  ngAfterViewInit(): void {
+    if (this.fileNameElement) {
+      setTimeout(() => {
+        this.fileNameElement.nativeElement.focus()
+      }, 0)
+    }
+  }
+
+  export() {
+    this.fileName = this.fileName?.trim()
+    this.resolveWith({
+      result: true,
+      fileName: this.fileName,
+      selectedFields: this.selectedFields,
+      exportAssetsAs: this.exportAssetsAs,
+      selectedExportFields: this.selectedExportFields,
+    })
+  }
+
+  cancel() {
+    this.resolveWith({ result: false })
+  }
+
+  toggleFieldSelection(fieldName: string) {
+    const index = this.selectedFields.indexOf(fieldName)
+    if (index > -1) {
+      this.selectedFields.splice(index, 1)
+    } else {
+      this.selectedFields.push(fieldName)
+    }
+  }
+
+  toggleExportFieldSelection(fieldName: ProductFields | VariantFields) {
+    const index = this.selectedExportFields.indexOf(fieldName)
+    if (index > -1) {
+      this.selectedExportFields.splice(index, 1)
+    } else {
+      this.selectedExportFields.push(fieldName)
+    }
+  }
+}

package/dist/ui/components/product-import.component.d.ts

@@ -0,0 +1,55 @@
+import { ElementRef, ChangeDetectorRef, OnInit } from '@angular/core';
+import { NotificationService, LocalStorageService } from '@vendure/admin-ui/core';
+import { TranslateService } from '@ngx-translate/core';
+import { AdminUiConfig } from '@vendure/common/lib/shared-types';
+import { Channel, LanguageCode } from '@vendure/core';
+type ImportOptions = {
+    updateProductSlug?: string;
+};
+type ValidateReturnType = {
+    isValid: boolean;
+    langCodes?: (string | undefined)[];
+    clearFile?: boolean;
+};
+export interface PluginInitOptions {
+    visibleOptions?: Array<keyof ImportOptions>;
+    defaultOptions?: ImportOptions;
+}
+export declare class ProductImportComponent implements OnInit {
+    private notificationService;
+    private cd;
+    private translate;
+    private localStorageService;
+    serverPath: string;
+    validateFile: File | null;
+    selectedFile: File | null;
+    updateProductSlug: boolean;
+    selectedMainLanguage: LanguageCode | undefined;
+    availableLanguages: LanguageCode[];
+    fileUploadElement: ElementRef<HTMLInputElement>;
+    config: PluginInitOptions;
+    appConfig: AdminUiConfig;
+    currentChannel: Channel;
+    constructor(notificationService: NotificationService, cd: ChangeDetectorRef, translate: TranslateService, localStorageService: LocalStorageService);
+    ngOnInit(): Promise<void>;
+    doValidation(file: File): void;
+    onMainLanguageChange(): void;
+    onFileSelected(event: Event): void;
+    clearFile(): void;
+    validateCsvStructure(file: File): Promise<ValidateReturnType>;
+    uploadFile(): Promise<void>;
+    splitLines(text: string): string[];
+    checkifJson(text: string): {
+        startsWithJson: boolean;
+        endsWithJson: boolean;
+        startChar: string;
+        endChar: string;
+        isJson?: boolean;
+    };
+    getRequestHeaders(): Record<string, string>;
+    checkTranslatabeColumns(lines: string[], columns: string[], header: string[], languageCodes: (string | undefined)[]): {
+        errorRows: number[];
+        errorColumns: string[];
+    };
+}
+export {};

package/dist/ui/components/product-import.component.html

@@ -0,0 +1,76 @@
+<!-- product-import.component.html -->
+<vdr-page-block>
+  <vdr-card [title]="'product-import.card.title' | translate">
+    <div class="form-grid">
+      <vdr-form-field [label]="'product-import.card.description' | translate">
+        <input type="file" (change)="onFileSelected($event)" class="file-input" #fileUpload />
+
+        <div class="file-upload" style="display: flex; align-items: center; gap: 8px">
+          <button *ngIf="selectedFile" class="button-small" (click)="fileUpload.click()">
+            <clr-icon shape="file"></clr-icon>
+            {{ selectedFile?.name }}
+          </button>
+
+          <button class="button primary" *ngIf="!selectedFile" (click)="fileUpload.click()">
+            {{ 'product-import.card.button-select' | translate }}
+          </button>
+          <button
+            class="button primary"
+            *ngIf="selectedFile"
+            (click)="uploadFile()"
+            [disabled]="!selectedMainLanguage"
+          >
+            {{ 'product-import.card.button-upload' | translate }}
+          </button>
+        </div>
+      </vdr-form-field>
+    </div>
+    <div class="form-grid" *ngIf="selectedFile">
+      <div
+        class="input-row"
+        style="margin-top: 16px"
+        *ngIf="config.visibleOptions?.includes('updateProductSlug')"
+      >
+        <label>
+          <input
+            type="checkBox"
+            name="updateProductSlug"
+            value="url"
+            [(ngModel)]="updateProductSlug"
+            style="width: fit-content"
+          />
+          {{ 'product-import.card.update-product-slugs' | translate }}
+        </label>
+      </div>
+
+      <div class="input-row" style="margin-top: 16px">
+        <div>Välj huvudspråk för filen:</div>
+        <div *ngFor="let lang of availableLanguages">
+          <label>
+            <input
+              type="radio"
+              name="selectedMainLanguage"
+              [value]="lang"
+              [(ngModel)]="selectedMainLanguage"
+              style="width: fit-content"
+              (change)="onMainLanguageChange(lang)"
+            />
+            {{ lang }}
+          </label>
+        </div>
+      </div>
+    </div>
+  </vdr-card>
+</vdr-page-block>
+
+<style>
+  .form-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 1rem;
+  }
+
+  .file-input {
+    display: none;
+  }
+</style>