@haus-tech/product-import-export-plugin 3.0.24-0 → 3.0.26-0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 3.0.25-0
+
+This was a version bump only for product-import-export-plugin to align it with other projects, there were no code changes.
+
+## 3.0.24-0
+
+This was a version bump only for product-import-export-plugin to align it with other projects, there were no code changes.
+
 ## 3.0.23-0
 
 ### 🚀 Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haus-tech/product-import-export-plugin",
-  "version": "3.0.24-0",
+  "version": "3.0.26-0",
   "description": "A Vendure plugin for importing and exporting products using a CSV file",
   "author": "Haus Tech",
   "repository": {

package/src/ui/components/export-dialog.component.html

@@ -0,0 +1,83 @@
+<ng-template vdrDialogTitle>{{ 'product-export.dialog.title' | translate }}</ng-template>
+<div class="input-row">
+  <vdr-form-field [label]="'product-export.dialog.label' | translate">
+    <input
+      type="text"
+      [(ngModel)]="fileName"
+      [placeholder]="config?.defaultFileName || 'products_export.csv'"
+      style="width: 100%"
+      #fileNameInput
+    />
+  </vdr-form-field>
+</div>
+
+<div class="input-row" style="margin-top: 16px">
+  <input type="checkbox" (change)="toggleSelectAll($event)" [checked]="toggleAllChecked" />
+  {{ 'product-export.dialog.selectAll' | translate }}
+</div>
+
+<div class="input-row" style="margin-top: 16px">
+  <label style="margin-bottom: 8px; display: inline-block">{{
+    'product-export.dialog.availableExportFieldsLabel' | translate
+  }}</label>
+  <div *ngFor="let field of availableExportFields">
+    <input
+      type="checkbox"
+      [value]="field"
+      (change)="toggleExportFieldSelection(field)"
+      [checked]="selectedExportFields.includes(field)"
+      [disabled]="config.requiredExportFields.includes(field)"
+    />
+    {{ field }}
+  </div>
+</div>
+
+<div class="input-row" style="margin-top: 16px">
+  <label style="margin-bottom: 8px; display: inline-block">{{
+    'product-export.dialog.customFieldsLabel' | translate
+  }}</label>
+  <div *ngFor="let field of customFields">
+    <input
+      type="checkbox"
+      [value]="field"
+      (change)="toggleFieldSelection(field)"
+      [checked]="selectedFields.includes(field)"
+    />
+    {{ field }}
+  </div>
+</div>
+
+<span style="margin-top: 16px; margin-bottom: 8px; display: block">{{
+  'product-export.dialog.exportAssetsAs' | translate
+}}</span>
+<div class="input-row" style="margin-top: 8px">
+  <label *ngIf="config?.exportAssetsAsOptions?.includes('url')">
+    <input
+      type="radio"
+      name="exportAssets"
+      value="url"
+      [(ngModel)]="exportAssetsAs"
+      style="width: fit-content"
+    />
+    {{ 'product-export.dialog.exportAssetsAsOptions.url' | translate }}
+  </label>
+  <label *ngIf="config?.exportAssetsAsOptions?.includes('json')">
+    <input
+      type="radio"
+      name="exportAssets"
+      value="json"
+      [(ngModel)]="exportAssetsAs"
+      style="width: fit-content"
+    />
+    {{ 'product-export.dialog.exportAssetsAsOptions.json' | translate }}
+  </label>
+</div>
+
+<ng-template vdrDialogButtons>
+  <button type="button" class="btn" (click)="cancel()">
+    {{ 'common.cancel' | translate }}
+  </button>
+  <button type="button" class="btn btn-primary" (click)="export()">
+    {{ 'product-export.dialog.export' | translate }}
+  </button>
+</ng-template>

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

@@ -0,0 +1,165 @@
+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'
+  | 'enabled'
+
+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',
+    'enabled',
+  ]
+
+  config: PluginInitOptions
+  toggleAllChecked: boolean = false
+
+  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)
+    }
+
+    this.toggleAllChecked = this.selectedFields.length === this.availableExportFields.length
+  }
+
+  toggleExportFieldSelection(fieldName: ProductFields | VariantFields) {
+    const index = this.selectedExportFields.indexOf(fieldName)
+    if (index > -1) {
+      this.selectedExportFields.splice(index, 1)
+    } else {
+      this.selectedExportFields.push(fieldName)
+    }
+
+    this.toggleAllChecked = this.selectedExportFields.length === this.availableExportFields.length
+  }
+
+  toggleSelectAll(event: Event) {
+    const isChecked = (event.target as HTMLInputElement).checked
+    this.toggleAllChecked = isChecked
+    if (isChecked) {
+      this.selectedExportFields = [...this.availableExportFields]
+      this.selectedFields = [...this.customFields]
+    } else {
+      this.selectedExportFields = [
+        ...this.availableExportFields.filter((field) =>
+          this.config.requiredExportFields?.includes(field),
+        ),
+      ]
+      this.selectedFields = []
+    }
+  }
+}

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

@@ -0,0 +1,123 @@
+<!-- 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"
+      style="margin-top: 24px; border-top: 1px solid #cdcdcd"
+    >
+      <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>{{ 'product-import.card.select-main-language' | translate }}</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
+          style="
+            margin-top: 8px;
+            padding-top: 8px;
+            font-style: italic;
+            font-size: 12px;
+            line-height: 1.4;
+          "
+        >
+          <clr-icon shape="info-circle" size="16" class="is-info"></clr-icon>
+          {{ 'product-import.card.main-language-info' | translate }}
+        </div>
+      </div>
+
+      <div class="input-row" style="margin-top: 16px">
+        <div>{{ 'product-import.card.updating-strategy' | translate }}</div>
+        <div>
+          <label>
+            <input
+              type="radio"
+              name="updatingStrategy"
+              value="merge"
+              [(ngModel)]="updatingStrategy"
+              style="width: fit-content"
+            />
+            {{ 'product-import.card.merge' | translate }}
+          </label>
+        </div>
+        <div>
+          <label>
+            <input
+              type="radio"
+              name="updatingStrategy"
+              value="replace"
+              [(ngModel)]="updatingStrategy"
+              style="width: fit-content"
+            />
+            {{ 'product-import.card.overwrite' | translate }}<br />
+            <span *ngIf="updatingStrategy === 'replace'" style="color: red; font-size: 12px">{{
+              'product-import.card.overwrite-warning' | translate
+            }}</span>
+          </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>