@tunghtml/strapi-plugin-export-import-clsx 1.0.0

package/README.md

@@ -0,0 +1,93 @@
+# @tunghtml/export-import-clsx
+
+A powerful Strapi plugin for exporting and importing data with enhanced functionality, including Excel support and advanced filtering.
+
+## Features
+
+- 📊 **Excel Export/Import**: Full support for .xlsx files
+- 🔍 **Advanced Filtering**: Export filtered data based on UI filters
+- 🎯 **Selective Export**: Export specific entries by selection
+- 🌐 **Multi-locale Support**: Handle localized content properly
+- 🔄 **Bulk Operations**: Import multiple entries efficiently
+- 📝 **Smart Deduplication**: Avoid duplicate entries during import
+- 🎨 **Clean UI**: Integrated seamlessly with Strapi admin panel
+
+## Installation
+
+```bash
+npm install @tunghtml/export-import-clsx
+```
+
+## Usage
+
+1. Install the plugin in your Strapi project
+2. Add it to your `config/plugins.js`:
+
+```javascript
+module.exports = {
+  'export-import-clsx': {
+    enabled: true,
+  },
+};
+```
+
+3. Restart your Strapi application
+4. Navigate to the plugin in your admin panel
+
+## API Endpoints
+
+### Export Data
+```
+GET /export-import-clsx/export
+```
+
+Query parameters:
+- `format`: `excel` or `json` (default: `excel`)
+- `contentType`: Specific content type to export (e.g., `api::article.article`)
+- `selectedIds`: Array of specific entry IDs to export
+- `filters[...]`: Advanced filtering options
+
+### Import Data
+```
+POST /export-import-clsx/import
+```
+
+Body: Excel file or JSON data
+
+## Examples
+
+### Export all articles as Excel
+```bash
+curl "http://localhost:1337/export-import-clsx/export?format=excel&contentType=api::article.article"
+```
+
+### Export filtered data
+```bash
+curl "http://localhost:1337/export-import-clsx/export?format=excel&contentType=api::article.article&filters[$and][0][title][$contains]=news"
+```
+
+### Export selected entries
+```bash
+curl "http://localhost:1337/export-import-clsx/export?format=excel&contentType=api::article.article&selectedIds=[\"1\",\"2\",\"3\"]"
+```
+
+## Configuration
+
+The plugin works out of the box with default settings. For advanced configuration, you can customize the behavior in your Strapi application.
+
+## Compatibility
+
+- Strapi v4.x
+- Strapi v5.x (with document service support)
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+MIT © tunghtml
+
+## Support
+
+For issues and questions, please create an issue on the GitHub repository.

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import ExportButton from '../ExportButton';
+import ImportButton from '../ImportButton';
+
+const BulkActions = ({ layout }) => {
+  const handleExportAll = async () => {
+    try {
+      const contentType = layout.uid;
+      
+      // Get current filters from URL if any
+      const urlParams = new URLSearchParams(window.location.search);
+      const filters = {};
+      
+      // Build filters from URL params
+      for (const [key, value] of urlParams.entries()) {
+        if (key.startsWith('filters[')) {
+          filters[key] = value;
+        }
+      }
+
+      const queryString = new URLSearchParams({
+        format: 'excel',
+        contentType: contentType,
+        ...filters
+      }).toString();
+
+      const response = await fetch(`/export-import-clsx/export?${queryString}`);
+      
+      if (response.ok) {
+        const blob = await response.blob();
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `${contentType.replace('api::', '')}-export-${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('div', { 
+    style: { 
+      display: 'flex', 
+      gap: '8px', 
+      alignItems: 'center',
+      marginLeft: '16px'
+    } 
+  },
+    React.createElement('button', {
+      onClick: handleExportAll,
+      style: {
+        padding: '8px 16px',
+        backgroundColor: '#4945ff',
+        color: 'white',
+        border: 'none',
+        borderRadius: '4px',
+        cursor: 'pointer'
+      }
+    }, 'Export All'),
+    React.createElement(ImportButton)
+  );
+};
+
+export default BulkActions;

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

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,245 @@
+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

@@ -0,0 +1,54 @@
+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;

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

@@ -0,0 +1,15 @@
+import { useEffect, useRef } from 'react';
+
+import pluginId from '../../pluginId';
+
+const Initializer = ({ setPlugin }) => {
+  const ref = useRef(setPlugin);
+
+  useEffect(() => {
+    ref.current(pluginId);
+  }, []);
+
+  return null;
+};
+
+export default Initializer;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Download } from '@strapi/icons';
+
+const PluginIcon = () => React.createElement(Download);
+
+export default PluginIcon;

package/admin/src/pages/App/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import HomePage from '../HomePage';
+
+const App = () => {
+  return React.createElement(HomePage);
+};
+
+export default App;