@haus-tech/product-import-export-plugin 3.0.29-0 → 3.0.29

package/src/dashboard/export.tsx

@@ -1,337 +1,25 @@
-import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  Input,
-  Label,
-  RadioGroup,
-  RadioGroupItem,
-  DataTableBulkActionItem,
-} from '@vendure/dashboard'
-import { DownloadIcon } from 'lucide-react'
-import { useState, useEffect } from 'react'
-import { toast } from 'sonner'
-import {
-  getServerLocation,
-  getChannelHeader,
-  type PluginInitOptions,
-  type ExportFields,
-  type ProductFields,
-  type VariantFields,
-} from './utils'
+import { Button } from '@vendure/dashboard'
+import { useState } from 'react'
+import { ExportDialog } from './export-dialog'
 
-// Export Dialog Component
-function ExportDialog({
-  open,
-  onOpenChange,
-  productIds,
-}: {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  productIds: string[]
-}) {
-  const [fileName, setFileName] = useState('')
-  const [customFields, setCustomFields] = useState<string[]>([])
-  const [selectedFields, setSelectedFields] = useState<string[]>([])
-  const [exportAssetsAs, setExportAssetsAs] = useState<'url' | 'json'>('url')
-  const [selectedExportFields, setSelectedExportFields] = useState<ExportFields>([])
-  const [availableExportFields] = useState<ExportFields>([
-    'productId',
-    'name',
-    'slug',
-    'description',
-    'assets',
-    'facets',
-    'optionGroups',
-    'sku',
-    'optionValues',
-    'price',
-    'taxCategory',
-    'stockOnHand',
-    'trackInventory',
-    'variantAssets',
-    'variantFacets',
-    'enabled',
-  ])
-  const [config, setConfig] = useState<PluginInitOptions['exportOptions'] | null>(null)
-  const [toggleAllChecked, setToggleAllChecked] = useState(false)
-
-  useEffect(() => {
-    const fetchConfig = async () => {
-      try {
-        const serverPath = getServerLocation()
-        const [configRes, customFieldsRes] = await Promise.all([
-          fetch(`${serverPath}/product-import-export/config`, {
-            method: 'GET',
-            headers: {
-              'Content-Type': 'application/json',
-              ...getChannelHeader(),
-            },
-            credentials: 'include',
-          }),
-          fetch(`${serverPath}/product-export/custom-fields`, {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-              ...getChannelHeader(),
-            },
-            credentials: 'include',
-            body: JSON.stringify(productIds),
-          }),
-        ])
-
-        const configData = await configRes.json()
-        const customFieldsData = await customFieldsRes.json()
-        setConfig(configData.exportOptions)
-        setCustomFields(customFieldsData.map((field: { name: string }) => field.name))
-        setSelectedFields([...customFieldsData.map((field: { name: string }) => field.name)])
-        setExportAssetsAs(
-          configData.exportOptions?.defaultExportAssetsAs ||
-            configData.exportOptions?.exportAssetsAsOptions?.[0] ||
-            'url',
-        )
-        if (
-          configData.exportOptions?.defaultExportFields ||
-          configData.exportOptions?.requiredExportFields
-        ) {
-          setSelectedExportFields([
-            ...(configData.exportOptions.defaultExportFields || []),
-            ...(configData.exportOptions.requiredExportFields || []),
-          ])
-        }
-      } catch (error) {
-        console.error('Failed to fetch config:', error)
-      }
-    }
-
-    if (open && productIds.length > 0) {
-      fetchConfig()
-    }
-  }, [open, productIds])
-
-  const toggleFieldSelection = (fieldName: string) => {
-    setSelectedFields((prev) =>
-      prev.includes(fieldName) ? prev.filter((f) => f !== fieldName) : [...prev, fieldName],
-    )
-  }
-
-  const toggleExportFieldSelection = (fieldName: ProductFields | VariantFields) => {
-    setSelectedExportFields((prev) =>
-      prev.includes(fieldName) ? prev.filter((f) => f !== fieldName) : [...prev, fieldName],
-    )
-  }
-
-  const toggleSelectAll = (checked: boolean) => {
-    setToggleAllChecked(checked)
-    if (checked) {
-      setSelectedExportFields([...availableExportFields])
-      setSelectedFields([...customFields])
-    } else {
-      setSelectedExportFields([...(config?.requiredExportFields || [])])
-      setSelectedFields([])
-    }
-  }
-
-  const handleExport = async () => {
-    const trimmedFileName = fileName.trim()
-    const finalFileName = trimmedFileName || config?.defaultFileName || 'products_export.csv'
-
-    toast.info(`Exporting ${productIds.length} products to ${finalFileName}`)
-
-    try {
-      const serverPath = getServerLocation()
-      const res = await fetch(
-        `${serverPath}/product-export/export?fileName=${encodeURIComponent(finalFileName)}&customFields=${encodeURIComponent(selectedFields.join(','))}&exportAssetsAs=${exportAssetsAs}&selectedExportFields=${encodeURIComponent(selectedExportFields.join(','))}`,
-        {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            ...getChannelHeader(),
-          },
-          credentials: 'include',
-          body: JSON.stringify(productIds),
-        },
-      )
-
-      if (!res.ok) {
-        const json = await res.json()
-        throw new Error(json?.message || 'Export failed')
-      }
-
-      console.log('res', res)
-      const header = res.headers.get('Content-Disposition')
-
-      const parts = header!.split(';')
-      const filename = parts[1].split('=')[1]
-      const blob = await res.blob()
-
-      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()
-
-      onOpenChange(false)
-      toast.success('Products exported successfully')
-    } catch (error: any) {
-      console.error(error)
-      toast.error(error.message || 'Failed to export products')
-    }
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
-        <DialogHeader>
-          <DialogTitle>Export products to CSV</DialogTitle>
-          <DialogDescription>Configure export options</DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-4">
-          <div>
-            <Label htmlFor="file-name">File name (optional)</Label>
-            <Input
-              id="file-name"
-              value={fileName}
-              onChange={(e) => setFileName(e.target.value)}
-              placeholder={config?.defaultFileName || 'products_export.csv'}
-              className="mt-1"
-            />
-          </div>
-
-          <div className="flex items-center space-x-2">
-            <input
-              type="checkbox"
-              id="select-all"
-              checked={toggleAllChecked}
-              onChange={(e) => toggleSelectAll(e.target.checked)}
-            />
-            <Label htmlFor="select-all" className="font-normal">
-              Select all
-            </Label>
-          </div>
-
-          <div>
-            <Label>Fields to export</Label>
-            <div className="grid grid-cols-2 gap-2 mt-2">
-              {availableExportFields.map((field) => (
-                <div key={field} className="flex items-center space-x-2">
-                  <input
-                    type="checkbox"
-                    id={`field-${field}`}
-                    checked={selectedExportFields.includes(field)}
-                    onChange={() => toggleExportFieldSelection(field)}
-                    disabled={config?.requiredExportFields?.includes(field)}
-                  />
-                  <Label htmlFor={`field-${field}`} className="font-normal">
-                    {field}
-                  </Label>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          {customFields.length > 0 && (
-            <div>
-              <Label>Custom fields to include in the export</Label>
-              <div className="grid grid-cols-2 gap-2 mt-2">
-                {customFields.map((field) => (
-                  <div key={field} className="flex items-center space-x-2">
-                    <input
-                      type="checkbox"
-                      id={`custom-${field}`}
-                      checked={selectedFields.includes(field)}
-                      onChange={() => toggleFieldSelection(field)}
-                    />
-                    <Label htmlFor={`custom-${field}`} className="font-normal">
-                      {field}
-                    </Label>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-
-          <div>
-            <Label>Export assets as:</Label>
-            <RadioGroup
-              value={exportAssetsAs}
-              onValueChange={(val) => setExportAssetsAs(val as 'url' | 'json')}
-            >
-              {config?.exportAssetsAsOptions?.includes('url') && (
-                <div className="flex items-center space-x-2">
-                  <RadioGroupItem value="url" id="assets-url" />
-                  <Label htmlFor="assets-url" className="font-normal">
-                    URL
-                  </Label>
-                </div>
-              )}
-              {config?.exportAssetsAsOptions?.includes('json') && (
-                <div className="flex items-center space-x-2">
-                  <RadioGroupItem value="json" id="assets-json" />
-                  <Label htmlFor="assets-json" className="font-normal">
-                    JSON
-                  </Label>
-                </div>
-              )}
-            </RadioGroup>
-          </div>
-        </div>
-
-        <DialogFooter>
-          <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
-            Cancel
-          </Button>
-          <Button type="button" onClick={handleExport}>
-            Export
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-// Export Bulk Action Component for Product List
-export function ExportProductsBulkAction({
-  selection,
-  table,
-}: {
-  selection: Array<{ id: string }>
-  table: any
-}) {
+export function ProductExportBlock() {
   const [dialogOpen, setDialogOpen] = useState(false)
-  const productIds = selection.map((product) => product.id)
 
-  const handleClose = () => {
-    setDialogOpen(false)
-    table.resetRowSelection()
+  const handleExport = () => {
+    setDialogOpen(true)
   }
 
   return (
-    <>
-      <DataTableBulkActionItem
-        onClick={() => setDialogOpen(true)}
-        label="Export products to CSV"
-        icon={DownloadIcon}
-      />
+    <div className="space-y-4">
+      <div>
+        <Button onClick={handleExport}>Export all products</Button>
+      </div>
       <ExportDialog
         open={dialogOpen}
-        onOpenChange={(open) => {
-          if (open) {
-            setDialogOpen(true)
-          } else {
-            handleClose()
-          }
-        }}
-        productIds={productIds}
+        onOpenChange={setDialogOpen}
+        productIds={[]}
+        isExportAll={true}
       />
-    </>
+    </div>
   )
 }

package/src/dashboard/exported-list.tsx

@@ -0,0 +1,234 @@
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@vendure/dashboard'
+import { getServerLocation, getChannelHeader } from './utils'
+import { useState, useEffect, useMemo } from 'react'
+import { DownloadIcon, ChevronLeftIcon, ChevronRightIcon, TrashIcon } from 'lucide-react'
+import { toast } from 'sonner'
+
+interface ExportedFile {
+  fileName: string
+  size: number
+  created: string
+}
+
+export function ExportedList() {
+  const [exportedFiles, setExportedFiles] = useState<ExportedFile[]>([])
+  const [error, setError] = useState<string | null>(null)
+  const [currentPage, setCurrentPage] = useState(1)
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
+  const [fileToDelete, setFileToDelete] = useState<string | null>(null)
+  const itemsPerPage = 10
+
+  const getExportFiles = async () => {
+    const serverPath = getServerLocation()
+    try {
+      const res = await fetch(`${serverPath}/product-export/exported-files`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          ...getChannelHeader(),
+        },
+        credentials: 'include',
+      })
+      if (!res.ok) {
+        setError('Could not get exported files, please try again later')
+        return
+      }
+      const data = await res.json()
+      setExportedFiles(data)
+      setError(null)
+    } catch (error) {
+      setError('Could not get exported files, please try again later')
+      console.error('Error getting exported files', error)
+    }
+  }
+
+  useEffect(() => {
+    getExportFiles()
+  }, [])
+
+  // Pagination calculations
+  const paginatedFiles = useMemo(() => {
+    const startIndex = (currentPage - 1) * itemsPerPage
+    const endIndex = startIndex + itemsPerPage
+    return exportedFiles.slice(startIndex, endIndex)
+  }, [exportedFiles, currentPage])
+
+  const totalPages = Math.ceil(exportedFiles.length / itemsPerPage)
+
+  const downLoadFile = async (fileName: string) => {
+    const serverPath = getServerLocation()
+    const res = await fetch(`${serverPath}/product-export/download/${fileName}`, {
+      method: 'GET',
+      headers: {
+        ...getChannelHeader(),
+      },
+      credentials: 'include',
+    })
+
+    const blob = await res.blob()
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = fileName
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  }
+
+  const handleDeleteClick = (fileName: string) => {
+    setFileToDelete(fileName)
+    setDeleteDialogOpen(true)
+  }
+
+  const deleteFile = async () => {
+    if (!fileToDelete) return
+
+    const serverPath = getServerLocation()
+    try {
+      const res = await fetch(`${serverPath}/product-export/delete/${fileToDelete}`, {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json',
+          ...getChannelHeader(),
+        },
+        credentials: 'include',
+      })
+
+      if (!res.ok) {
+        const json = await res.json()
+        throw new Error(json?.message || 'Failed to delete file')
+      }
+
+      toast.success('File deleted successfully')
+      setDeleteDialogOpen(false)
+      setFileToDelete(null)
+      await getExportFiles()
+    } catch (error: any) {
+      console.error('Delete error:', error)
+      toast.error(error.message || 'Failed to delete file')
+    }
+  }
+
+  const formatFileSize = (bytes: number): string => {
+    if (bytes < 1024) return bytes + ' B'
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + ' KB'
+    return (bytes / (1024 * 1024)).toFixed(2) + ' MB'
+  }
+
+  if (error) {
+    return (
+      <div className="text-center text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed">
+        <p className="text-red-500">{error}</p>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      {exportedFiles.length > 0 && (
+        <div className="space-y-2">
+          <div className="border rounded-md divide-y">
+            {paginatedFiles.map((file) => (
+              <div key={file.fileName} className="p-4 hover:bg-muted/50 transition-colors">
+                <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+                  <div className="flex-1">
+                    <p className="font-medium">{file.fileName}</p>
+                    <div className="flex flex-col sm:flex-row gap-2 sm:gap-4 text-sm text-muted-foreground mt-1">
+                      <span>Size: {formatFileSize(file.size)}</span>
+                      <span>
+                        Created:{' '}
+                        {new Date(file.created).toLocaleString(navigator.language || undefined)}
+                      </span>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Button variant="outline" size="sm" onClick={() => downLoadFile(file.fileName)}>
+                      <DownloadIcon className="mr-2 h-4 w-4" />
+                      Download
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => handleDeleteClick(file.fileName)}
+                      className="text-destructive hover:text-destructive"
+                    >
+                      <TrashIcon className="h-4 w-4" /> Delete
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* Pagination controls */}
+          {totalPages > 1 && (
+            <div className="flex items-center justify-between py-2 border-t">
+              <div className="text-sm text-muted-foreground">
+                Showing {(currentPage - 1) * itemsPerPage + 1} to{' '}
+                {Math.min(currentPage * itemsPerPage, exportedFiles.length)} of{' '}
+                {exportedFiles.length}
+              </div>
+              <div className="flex items-center gap-1">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
+                  disabled={currentPage === 1}
+                >
+                  <ChevronLeftIcon className="h-4 w-4" />
+                </Button>
+                <div className="text-sm text-muted-foreground px-2">
+                  {currentPage} / {totalPages}
+                </div>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setCurrentPage((prev) => Math.min(totalPages, prev + 1))}
+                  disabled={currentPage === totalPages}
+                >
+                  <ChevronRightIcon className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+      {exportedFiles.length === 0 && (
+        <div className="text-center py-8 text-muted-foreground text-sm">
+          <p>You have no exported files</p>
+        </div>
+      )}
+
+      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Delete {fileToDelete}?</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to delete this file? This action cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDeleteDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button variant="destructive" onClick={deleteFile}>
+              Delete
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
+
+export default ExportedList