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

package/dist/ui/product-export.service.ts

@@ -0,0 +1,107 @@
+import { Injectable } from '@angular/core'
+import {
+  DataService,
+  LocalStorageService,
+  NotificationService,
+  getServerLocation,
+} from '@vendure/admin-ui/core'
+import { Product } from '@vendure/core'
+
+@Injectable()
+export class ProductExportService {
+  serverPath: string
+  constructor(
+    protected dataService: DataService,
+    private notificationService: NotificationService,
+    private localStorageService: LocalStorageService,
+  ) {
+    this.serverPath = getServerLocation()
+  }
+
+  async getCustomFields(productIds: string[]) {
+    return fetch(`${this.serverPath}/product-export/custom-fields`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        ...this.getHeaders(),
+      },
+      body: JSON.stringify(productIds),
+    })
+      .then((res) => res.json())
+      .then((data: { name: string; type: string }[]) => {
+        return data.map((field) => field.name)
+      })
+  }
+
+  async getConfig() {
+    return fetch(`${this.serverPath}/product-import-export/config`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        ...this.getHeaders(),
+      },
+    })
+      .then((res) => res.json())
+      .then((data) => data)
+  }
+
+  async exportProducts(
+    selection: Product[],
+    fileName?: string,
+    customFields?: string[],
+    exportAssetsAs?: 'url' | 'json',
+    selectedExportFields?: string[],
+  ) {
+    this.notificationService.info(`Exporting ${selection.length} products to ${fileName}.csv`)
+    const productIds = selection.map((product) => product.id)
+    try {
+      const res = await fetch(
+        `${this.serverPath}/product-export/export?fileName=${fileName}&customFields=${customFields}&exportAssetsAs=${exportAssetsAs}&selectedExportFields=${selectedExportFields}`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            ...this.getHeaders(),
+          },
+          body: JSON.stringify(productIds),
+        },
+      )
+      if (!res.ok) {
+        const json = await res.json()
+        throw Error(json?.message)
+      }
+      const header = res.headers.get('Content-Disposition')
+      const parts = header!.split(';')
+      const filename = parts[1].split('=')[1]
+      const blob = await res.blob()
+      await this.downloadBlob(blob, filename)
+    } catch (err: any) {
+      console.error(err)
+      this.notificationService.error(err.message)
+    }
+  }
+
+  private getHeaders(): Record<string, string> {
+    const headers: Record<string, string> = {}
+    const channelToken = this.localStorageService.get('activeChannelToken')
+    if (channelToken) {
+      headers['vendure-token'] = channelToken
+    }
+    const authToken = this.localStorageService.get('authToken')
+    if (authToken) {
+      headers.authorization = `Bearer ${authToken}`
+    }
+    return headers
+  }
+
+  private async downloadBlob(blob: Blob, fileName: string): Promise<void> {
+    const blobUrl = window.URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    document.body.appendChild(a)
+    a.setAttribute('hidden', 'true')
+    a.href = blobUrl
+    a.download = fileName
+    a.setAttribute('target', '_blank')
+    a.click()
+  }
+}

package/dist/ui/providers.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("@angular/core").Provider[];
+export default _default;

package/dist/ui/providers.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const core_1 = require("@vendure/admin-ui/core");
+const product_import_component_1 = require("./components/product-import.component");
+const export_dialog_component_1 = require("./components/export-dialog.component");
+const core_2 = require("@vendure/admin-ui/core");
+const product_export_service_1 = require("./product-export.service");
+const ngx_translate_extract_marker_1 = require("@biesbjerg/ngx-translate-extract-marker");
+exports.default = [
+    (0, core_1.registerPageTab)({
+        location: 'product-list',
+        tab: (0, ngx_translate_extract_marker_1.marker)('product-import.import-products'),
+        route: 'import',
+        tabIcon: 'import',
+        component: product_import_component_1.ProductImportComponent,
+    }),
+    (0, core_2.registerBulkAction)({
+        location: 'product-list',
+        label: (0, ngx_translate_extract_marker_1.marker)('product-export.action'),
+        icon: 'export',
+        onClick: ({ injector, selection }) => {
+            const modalService = injector.get(core_2.ModalService);
+            const productExportService = injector.get(product_export_service_1.ProductExportService);
+            const productIds = selection.map((product) => product.id);
+            const promises = [
+                productExportService.getCustomFields(productIds),
+                productExportService.getConfig(),
+            ];
+            Promise.all(promises).then(([customFields, config]) => {
+                modalService
+                    .fromComponent(export_dialog_component_1.ExportDialogComponent, {
+                    size: 'md',
+                    locals: {
+                        selection,
+                        customFields,
+                        config: config.exportOptions,
+                    },
+                    closable: true,
+                })
+                    .subscribe((response) => {
+                    if (response?.result) {
+                        productExportService.exportProducts(selection, response.fileName, response.selectedFields, response.exportAssetsAs, response.selectedExportFields);
+                    }
+                });
+            });
+        },
+    }),
+    product_export_service_1.ProductExportService,
+];

package/dist/ui/providers.ts

@@ -0,0 +1,57 @@
+import { registerPageTab } from '@vendure/admin-ui/core'
+import { ProductImportComponent } from './components/product-import.component'
+import { ExportDialogComponent } from './components/export-dialog.component'
+import { ModalService, registerBulkAction } from '@vendure/admin-ui/core'
+import { ProductExportService } from './product-export.service'
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'
+
+export default [
+  registerPageTab({
+    location: 'product-list',
+    tab: _('product-import.import-products'),
+    route: 'import',
+    tabIcon: 'import',
+    component: ProductImportComponent,
+  }),
+  registerBulkAction({
+    location: 'product-list',
+    label: _('product-export.action'),
+    icon: 'export',
+    onClick: ({ injector, selection }) => {
+      const modalService = injector.get(ModalService)
+      const productExportService = injector.get(ProductExportService)
+
+      const productIds = selection.map((product) => product.id)
+
+      const promises = [
+        productExportService.getCustomFields(productIds),
+        productExportService.getConfig(),
+      ]
+
+      Promise.all(promises).then(([customFields, config]) => {
+        modalService
+          .fromComponent(ExportDialogComponent, {
+            size: 'md',
+            locals: {
+              selection,
+              customFields,
+              config: config.exportOptions,
+            },
+            closable: true,
+          })
+          .subscribe((response) => {
+            if (response?.result) {
+              productExportService.exportProducts(
+                selection,
+                response.fileName,
+                response.selectedFields,
+                response.exportAssetsAs,
+                response.selectedExportFields,
+              )
+            }
+          })
+      })
+    },
+  }),
+  ProductExportService,
+]

package/dist/ui/routes.d.ts

@@ -0,0 +1,29 @@
+declare const _default: {
+    resolve: {
+        detail?: import("@angular/router").ResolveFn<{
+            entity: import("rxjs").Observable<any>;
+            result?: any;
+        }> | undefined;
+    };
+    data: {
+        breadcrumb: import("rxjs").BehaviorSubject<import("@vendure/admin-ui/core").BreadcrumbValue> | ((data: any) => any);
+    };
+    component: typeof import("@vendure/admin-ui/core").AngularRouteComponent;
+    title?: string | import("@angular/core").Type<import("@angular/router").Resolve<string>> | import("@angular/router").ResolveFn<string> | undefined;
+    path: string;
+    pathMatch?: "prefix" | "full" | undefined;
+    matcher?: import("@angular/router").UrlMatcher | undefined;
+    loadComponent?: (() => import("@angular/core").Type<unknown> | import("rxjs").Observable<import("@angular/core").Type<unknown> | import("@angular/router").DefaultExport<import("@angular/core").Type<unknown>>> | Promise<import("@angular/core").Type<unknown> | import("@angular/router").DefaultExport<import("@angular/core").Type<unknown>>>) | undefined;
+    redirectTo?: string | undefined;
+    outlet?: string | undefined;
+    canActivate?: any[] | undefined;
+    canMatch?: any[] | undefined;
+    canActivateChild?: any[] | undefined;
+    canDeactivate?: any[] | undefined;
+    canLoad?: any[] | undefined;
+    children?: import("@angular/router").Routes | undefined;
+    loadChildren?: import("@angular/router").LoadChildrenCallback | undefined;
+    runGuardsAndResolvers?: import("@angular/router").RunGuardsAndResolvers | undefined;
+    providers: (import("@angular/core").Provider | import("@angular/core").EnvironmentProviders)[];
+}[];
+export default _default;

package/dist/ui/routes.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const core_1 = require("@vendure/admin-ui/core");
+const product_import_component_1 = require("./components/product-import.component");
+exports.default = [
+    (0, core_1.registerRouteComponent)({
+        component: product_import_component_1.ProductImportComponent,
+        path: '',
+        title: 'Import Products',
+        breadcrumb: 'Import Products',
+    }),
+];

package/dist/ui/routes.ts

@@ -0,0 +1,11 @@
+import { registerRouteComponent } from '@vendure/admin-ui/core'
+import { ProductImportComponent } from './components/product-import.component'
+
+export default [
+  registerRouteComponent({
+    component: ProductImportComponent,
+    path: '',
+    title: 'Import Products',
+    breadcrumb: 'Import Products',
+  }),
+]

package/dist/ui/translations/en.json

@@ -0,0 +1,44 @@
+{
+  "product-import": {
+    "import-products": "Import products",
+    "card": {
+      "title": "Import products from CSV",
+      "description": "Choose a CSV file to import products from",
+      "button-select": "Select file",
+      "button-upload": "Upload file",
+      "update-product-slugs": "Update product slugs based on name"
+    },
+    "notifications": {
+      "invalid-file-type": "Invalid file type. Please upload a CSV file.",
+      "invalid-file-structure": "Invalid file structure. Please upload a correct CSV file.",
+      "upload-success": "The file was uploaded and has been added to the import queue.",
+      "upload-error": "An error occurred while uploading the file.",
+      "no-file-selected": "No file selected.",
+      "mismatched-values": "Some fields are missing language specifications. Please fill in all languages: ",
+      "missing-base-columns": "Some columns are missing: ",
+      "missing-column": "Column is missing: ",
+      "no-lines-in-file": "The file is empty.",
+      "file-read-error": "An error occurred while reading the file.",
+      "invalid-json": "Invalid JSON structure. Please upload a correct JSON file.",
+      "missing-languages": "Your CSV file contains languages that are not available in the system. Please add the languages to the system or remove the languages that are not used and try again.",
+      "mismatched-option-values": "Some product variants are missing product options. Please fill in all options: ",
+      "missing-main-language-name": "Main language is missing for name. Please add the main language and try again.",
+      "missing-translation-values": "Some fields are missing translations for the main language that exist in other languages. These will not be imported: "
+    }
+  },
+  "product-export": {
+    "action": "Export products to CSV",
+    "dialog": {
+      "title": "Export products to CSV",
+      "label": "File name (optional)",
+      "export": "Export",
+      "cancel": "Cancel",
+      "customFieldsLabel": "Custom fields to include in the export",
+      "exportAssetsAs": "Export assets as: ",
+      "exportAssetsAsOptions": {
+        "url": "URL",
+        "json": "JSON"
+      }
+    }
+  }
+}

package/dist/ui/translations/sv.json

@@ -0,0 +1,44 @@
+{
+  "product-import": {
+    "import-products": "Importera produkter",
+    "card": {
+      "title": "Importera produkter från CSV",
+      "description": "Välj en CSV-fil att importera produkter från",
+      "button-select": "Välj fil",
+      "button-upload": "Ladda upp fil",
+      "update-product-slugs": "Uppdatera produkt-sluggar utifrån namn"
+    },
+    "notifications": {
+      "invalid-file-type": "Felaktig filtyp. Vänligen ladda upp en CSV-fil.",
+      "invalid-file-structure": "Felaktig filstruktur. Vänligen ladda upp en korrekt CSV-fil.",
+      "upload-success": "Filen laddades upp och har lagts till i kön för import.",
+      "upload-error": "Ett fel uppstod vid uppladdning av filen.",
+      "no-file-selected": "Ingen fil vald.",
+      "mismatched-values": "Det saknas språkspecifikationer för vissa fält. Vänligen fyll i alla språk: ",
+      "missing-base-columns": "Vissa kolumner saknas: ",
+      "missing-column": "Kolumnen saknas: ",
+      "no-lines-in-file": "Filen är tom.",
+      "file-read-error": "Ett fel uppstod vid läsning av filen.",
+      "invalid-json": "Felaktig JSON-struktur. Vänligen ladda upp en korrekt JSON-fil.",
+      "missing-languages": "Din CSV-fil innehåller språk som inte är tillgängliga i den här kanalen. Vänligen lägg till språken i kanalen eller ta bort de språk som inte används och försök igen.",
+      "mismatched-option-values": "Antalet produktalternativ för vissa produktvarianter är felaktigt: ",
+      "missing-main-language-name": "Huvudspråket saknas för namn. Vänligen lägg till huvudspråket och försök igen.",
+      "missing-translation-values": "Det saknas översättningar för vissa fält för huvudspråket som existerar i andra språk. Dessa kommer inte importeras: "
+    }
+  },
+  "product-export": {
+    "action": "Exportera produkter till CSV",
+    "dialog": {
+      "title": "Exportera produkter till CSV",
+      "label": "Filnamn (valfritt)",
+      "export": "Exportera",
+      "cancel": "Avbryt",
+      "customFieldsLabel": "Anpassade fält som ska inkluderas i exporten",
+      "exportAssetsAs": "Exportera filer som: ",
+      "exportAssetsAsOptions": {
+        "url": "URL",
+        "json": "JSON"
+      }
+    }
+  }
+}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@haus-tech/product-import-export-plugin",
+  "version": "2.2.0-dev.0",
+  "description": "A Vendure plugin for importing and exporting products using a CSV file",
+  "author": "Haus Tech",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/WeAreHausTech/haus-tech-vendure-plugins.git"
+  },
+  "license": "MIT",
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "start": "yarn ts-node test/dev-server.ts",
+    "build": "yarn run -T rimraf dist && yarn run -T tsc && yarn run -T copyfiles -u 1 'src/ui/**/*' dist/",
+    "test": "jest --preset=\"ts-jest\"",
+    "prepublishOnly": "yarn && yarn build"
+  },
+  "devDependencies": {
+    "csv-parse": "^5.5.6",
+    "csv-stringify": "^6.5.1"
+  }
+}