@tunghtml/strapi-plugin-export-import-clsx 1.0.1 → 1.1.0

package/strapi-admin.js

@@ -1,8 +1,8 @@
-import React from 'react';
-import pluginPkg from './package.json';
-import pluginId from './admin/src/pluginId';
-import Initializer from './admin/src/components/Initializer';
-import ExportImportButtons from './admin/src/components/ExportImportButtons';
+import React from "react";
+import pluginPkg from "./package.json";
+import pluginId from "./admin/src/pluginId";
+import Initializer from "./admin/src/components/Initializer";
+import ExportImportButtons from "./admin/src/components/ExportImportButtons";
 
 const name = pluginPkg.strapi.name;
 
@@ -23,38 +23,41 @@ export default {
     try {
       // Method 1: Direct injection
       if (app.injectContentManagerComponent) {
-        app.injectContentManagerComponent('listView', 'actions', {
-          name: 'export-import-buttons',
+        app.injectContentManagerComponent("listView", "actions", {
+          name: "export-import-buttons",
           Component: ExportImportButtons,
         });
       }
       // Method 2: Plugin-based injection
       else if (app.getPlugin) {
-        const contentManager = app.getPlugin('content-manager');
+        const contentManager = app.getPlugin("content-manager");
         if (contentManager && contentManager.injectComponent) {
-          contentManager.injectComponent('listView', 'actions', {
-            name: 'export-import-buttons',
+          contentManager.injectComponent("listView", "actions", {
+            name: "export-import-buttons",
             Component: ExportImportButtons,
           });
         }
       }
       // Method 3: Global injection
       else if (app.addComponent) {
-        app.addComponent('content-manager.listView.actions', ExportImportButtons);
+        app.addComponent(
+          "content-manager.listView.actions",
+          ExportImportButtons
+        );
       }
     } catch (error) {
-      console.warn('Failed to inject export-import buttons:', error);
-      
+      console.warn("Failed to inject export-import buttons:", error);
+
       // Fallback: Add as menu item if injection fails
       app.addMenuLink({
         to: `/plugins/${pluginId}`,
-        icon: () => React.createElement('span', null, '📊'),
+        icon: () => React.createElement("span", null, "📊"),
         intlLabel: {
           id: `${pluginId}.plugin.name`,
-          defaultMessage: 'Export Import',
+          defaultMessage: "Export Import",
         },
         Component: async () => {
-          const component = await import('./admin/src/pages/App');
+          const component = await import("./admin/src/pages/App");
           return component;
         },
         permissions: [],
@@ -85,4 +88,4 @@ export default {
 
     return Promise.resolve(importedTrads);
   },
-};
+};

package/admin/src/components/ExportButton/index.js

@@ -1,48 +0,0 @@
-import React from 'react';
-
-const ExportButton = ({ layout, modifiedData }) => {
-  const handleExport = async () => {
-    try {
-      const contentType = layout.uid;
-      const entryId = modifiedData.id;
-      
-      if (!entryId) {
-        alert('Please save the entry first');
-        return;
-      }
-
-      const response = await fetch(`/export-import-clsx/export/${contentType}/${entryId}`);
-      
-      if (response.ok) {
-        const blob = await response.blob();
-        const url = window.URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = `entry-${entryId}-${new Date().toISOString().split('T')[0]}.xlsx`;
-        document.body.appendChild(a);
-        a.click();
-        window.URL.revokeObjectURL(url);
-        document.body.removeChild(a);
-      } else {
-        throw new Error('Export failed');
-      }
-    } catch (error) {
-      alert('Export failed: ' + error.message);
-    }
-  };
-
-  return React.createElement('button', {
-    onClick: handleExport,
-    style: {
-      padding: '8px 16px',
-      backgroundColor: '#4945ff',
-      color: 'white',
-      border: 'none',
-      borderRadius: '4px',
-      cursor: 'pointer',
-      marginLeft: '8px'
-    }
-  }, 'Export Entry');
-};
-
-export default ExportButton;

package/admin/src/components/ExportImportButtons/index.js

@@ -1,245 +0,0 @@
-import React, { useState } from 'react';
-
-const ExportImportButtons = (props) => {
-  const [isExporting, setIsExporting] = useState(false);
-  const [isImporting, setIsImporting] = useState(false);
-
-  // Get current content type from props or URL
-  const getContentType = () => {
-    if (props.layout?.uid) {
-      return props.layout.uid;
-    }
-    // Fallback: extract from URL
-    const path = window.location.pathname;
-    const match = path.match(/\/admin\/content-manager\/collection-types\/([^\/]+)/);
-    return match ? match[1] : null;
-  };
-
-  // Get current filters from URL
-  const getCurrentFilters = () => {
-    const urlParams = new URLSearchParams(window.location.search);
-    const filters = {};
-    
-    for (const [key, value] of urlParams.entries()) {
-      if (key.startsWith('filters[') || key === 'sort' || key === 'page' || key === 'pageSize' || key === 'locale') {
-        filters[key] = value;
-      }
-    }
-    
-    return filters;
-  };
-
-  // Get selected entries from props
-  const getSelectedEntries = () => {
-    // Try to get selected entries from various possible props
-    if (props.selectedEntries && props.selectedEntries.length > 0) {
-      return props.selectedEntries;
-    }
-    if (props.selected && props.selected.length > 0) {
-      return props.selected;
-    }
-    if (props.selection && props.selection.length > 0) {
-      return props.selection;
-    }
-    
-    // Try to get from global state or context
-    try {
-      // Check if there's a selection in the page context
-      const checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
-      const selectedIds = [];
-      checkboxes.forEach(checkbox => {
-        const value = checkbox.value;
-        if (value && value !== 'on' && value !== 'all') {
-          selectedIds.push(value);
-        }
-      });
-      return selectedIds;
-    } catch (error) {
-      return [];
-    }
-  };
-
-  const handleExport = async () => {
-    const contentType = getContentType();
-    if (!contentType) {
-      alert('Could not determine content type');
-      return;
-    }
-
-    setIsExporting(true);
-    try {
-      const filters = getCurrentFilters();
-      const selectedEntries = getSelectedEntries();
-      
-      const queryParams = new URLSearchParams({
-        format: 'excel',
-        contentType: contentType,
-        ...filters
-      });
-
-      // Add selected IDs if any
-      if (selectedEntries.length > 0) {
-        queryParams.set('selectedIds', JSON.stringify(selectedEntries));
-      }
-
-      const response = await fetch(`/export-import-clsx/export?${queryParams}`);
-      
-      if (response.ok) {
-        const blob = await response.blob();
-        const url = window.URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        
-        // Set filename based on selection
-        const filename = selectedEntries.length > 0 
-          ? `${contentType.replace('api::', '')}-selected-${selectedEntries.length}-${new Date().toISOString().split('T')[0]}.xlsx`
-          : `${contentType.replace('api::', '')}-export-${new Date().toISOString().split('T')[0]}.xlsx`;
-        
-        a.download = filename;
-        document.body.appendChild(a);
-        a.click();
-        window.URL.revokeObjectURL(url);
-        document.body.removeChild(a);
-      } else {
-        throw new Error('Export failed');
-      }
-    } catch (error) {
-      alert('Export failed: ' + error.message);
-    } finally {
-      setIsExporting(false);
-    }
-  };
-
-  const handleImport = async (event) => {
-    const file = event.target.files[0];
-    if (!file) return;
-
-    const contentType = getContentType();
-    if (!contentType) {
-      alert('Could not determine content type');
-      return;
-    }
-
-    setIsImporting(true);
-    const formData = new FormData();
-    formData.append('file', file);
-    formData.append('contentType', contentType);
-
-    try {
-      const response = await fetch('/export-import-clsx/import', {
-        method: 'POST',
-        body: formData,
-      });
-
-      if (response.ok) {
-        const result = await response.json();
-        
-        // Create simple, human message
-        const created = result.summary?.created || result.result.created;
-        const updated = result.summary?.updated || result.result.updated;
-        const errors = result.result.errors?.length || 0;
-        
-        const total = created + updated;
-        let message = 'Import completed!\n\n';
-        
-        if (total > 0) {
-          message += `Processed ${total} ${total === 1 ? 'entry' : 'entries'}\n`;
-          if (created > 0) {
-            message += `• Created: ${created}\n`;
-          }
-          if (updated > 0) {
-            message += `• Updated: ${updated}\n`;
-          }
-        } else if (errors === 0) {
-          message += 'No changes were made\n';
-        }
-        
-        if (errors > 0) {
-          message += `\nFound ${errors} ${errors === 1 ? 'error' : 'errors'}:\n`;
-          result.result.errors.slice(0, 2).forEach((error, index) => {
-            message += `• ${error}\n`;
-          });
-          if (errors > 2) {
-            message += `• ... and ${errors - 2} more\n`;
-          }
-        }
-        
-        alert(message);
-        
-        // Reload the page to show new data
-        window.location.reload();
-      } else {
-        const error = await response.json();
-        throw new Error(error.error || 'Import failed');
-      }
-    } catch (error) {
-      alert('Import failed: ' + error.message);
-    } finally {
-      setIsImporting(false);
-      event.target.value = '';
-    }
-  };
-
-  const selectedEntries = getSelectedEntries();
-  const exportButtonText = isExporting 
-    ? 'Exporting...' 
-    : selectedEntries.length > 0 
-      ? `Export (${selectedEntries.length})`
-      : 'Export';
-
-  return React.createElement('div', { 
-    style: { 
-      display: 'flex', 
-      gap: '8px', 
-      alignItems: 'center',
-      marginRight: '16px',
-      order: -1 // This will place it before other elements
-    } 
-  },
-    // Export Button
-    React.createElement('button', {
-      onClick: handleExport,
-      disabled: isExporting,
-      style: {
-        padding: '8px 16px',
-        backgroundColor: isExporting ? '#dcdce4' : '#4945ff',
-        color: 'white',
-        border: 'none',
-        borderRadius: '4px',
-        fontSize: '14px',
-        fontWeight: '500',
-        cursor: isExporting ? 'not-allowed' : 'pointer',
-        transition: 'background-color 0.2s'
-      }
-    }, exportButtonText),
-
-    // Import Button - same color as Export
-    React.createElement('div', { style: { position: 'relative' } },
-      React.createElement('input', {
-        type: 'file',
-        accept: '.xlsx,.xls,.json',
-        onChange: handleImport,
-        disabled: isImporting,
-        style: { display: 'none' },
-        id: 'import-file-input'
-      }),
-      React.createElement('label', {
-        htmlFor: 'import-file-input',
-        style: {
-          display: 'inline-block',
-          padding: '8px 16px',
-          backgroundColor: isImporting ? '#dcdce4' : '#4945ff', // Same color as Export
-          color: 'white',
-          border: 'none',
-          borderRadius: '4px',
-          fontSize: '14px',
-          fontWeight: '500',
-          cursor: isImporting ? 'not-allowed' : 'pointer',
-          transition: 'background-color 0.2s'
-        }
-      }, isImporting ? 'Importing...' : 'Import')
-    )
-  );
-};
-
-export default ExportImportButtons;

package/admin/src/components/ImportButton/index.js

@@ -1,54 +0,0 @@
-import React from 'react';
-
-const ImportButton = () => {
-  const handleImport = async (event) => {
-    const file = event.target.files[0];
-    if (!file) return;
-
-    const formData = new FormData();
-    formData.append('file', file);
-
-    try {
-      const response = await fetch('/export-import-clsx/import', {
-        method: 'POST',
-        body: formData,
-      });
-
-      if (response.ok) {
-        const result = await response.json();
-        alert(`Import completed! Imported: ${result.result.imported}, Errors: ${result.result.errors.length}`);
-        window.location.reload();
-      } else {
-        throw new Error('Import failed');
-      }
-    } catch (error) {
-      alert('Import failed: ' + error.message);
-    } finally {
-      event.target.value = '';
-    }
-  };
-
-  return React.createElement('div', { style: { display: 'inline-block', marginLeft: '8px' } },
-    React.createElement('input', {
-      type: 'file',
-      accept: '.xlsx,.xls,.json',
-      onChange: handleImport,
-      style: { display: 'none' },
-      id: 'import-file-input'
-    }),
-    React.createElement('label', {
-      htmlFor: 'import-file-input',
-      style: {
-        display: 'inline-block',
-        padding: '8px 16px',
-        backgroundColor: '#328048',
-        color: 'white',
-        border: 'none',
-        borderRadius: '4px',
-        cursor: 'pointer'
-      }
-    }, 'Import Data')
-  );
-};
-
-export default ImportButton;