strapi-plugin-bulk-editor 0.1.0

package/admin/src/components/BulkEditorAction.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { Button } from '@strapi/design-system';
+import { Pencil } from '@strapi/icons';
+import { BulkEditModal } from './BulkEditModal';
+
+interface BulkEditorActionProps {
+  documents: any[];
+  model: string;
+}
+
+export const BulkEditorAction: React.FC<BulkEditorActionProps> = ({
+  documents = [],
+  model = '',
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleClick = () => {
+    if (documents.length === 0) return;
+    setIsOpen(true);
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <>
+      <Button
+        onClick={handleClick}
+        variant="secondary"
+        size="S"
+        startIcon={<Pencil />}
+      >
+        Bulk Edit
+      </Button>
+
+      {isOpen && (
+        <BulkEditModal
+          documents={documents}
+          contentType={model}
+          onClose={handleClose}
+        />
+      )}
+    </>
+  );
+};

package/admin/src/components/BulkEditorButton.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { Button } from '@strapi/design-system';
+import { Pencil } from '@strapi/icons';
+import { BulkEditModal } from './BulkEditModal';
+
+interface BulkEditorButtonProps {
+  selectedEntries?: any[];
+  model?: string;
+}
+
+export const BulkEditorButton: React.FC<BulkEditorButtonProps> = (props) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Try to get selected entries from props or context
+  const selectedEntries = props.selectedEntries || [];
+  const model = props.model || '';
+
+  const handleClick = () => {
+    if (selectedEntries && selectedEntries.length > 0) {
+      setIsOpen(true);
+    }
+  };
+
+  // Don't render if no entries are selected
+  if (!selectedEntries || selectedEntries.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <Button
+        onClick={handleClick}
+        variant="secondary"
+        size="S"
+        startIcon={<Pencil />}
+      >
+        Bulk Edit
+      </Button>
+
+      {isOpen && (
+        <BulkEditModal
+          entries={selectedEntries}
+          contentType={model}
+          onClose={() => setIsOpen(false)}
+        />
+      )}
+    </>
+  );
+};

package/admin/src/components/ModalManager.tsx

@@ -0,0 +1,62 @@
+import React, { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { BulkEditModal } from './BulkEditModal';
+
+interface ModalData {
+  isOpen: boolean;
+  documents: any[];
+  model: string;
+  notificationFn?: any;
+  fetchClient?: any;
+}
+
+// Event emitter for modal
+const modalEmitter = {
+  listeners: [] as Array<(data: ModalData) => void>,
+  emit(data: ModalData) {
+    this.listeners.forEach(listener => listener(data));
+  },
+  subscribe(listener: (data: ModalData) => void) {
+    this.listeners.push(listener);
+    return () => {
+      this.listeners = this.listeners.filter(l => l !== listener);
+    };
+  }
+};
+
+export const openBulkEditModal = (documents: any[], model: string, notificationFn: any, fetchClient: any) => {
+  modalEmitter.emit({ isOpen: true, documents, model, notificationFn, fetchClient });
+};
+
+export const ModalManager: React.FC = () => {
+  const [modalState, setModalState] = useState<ModalData>({
+    isOpen: false,
+    documents: [],
+    model: '',
+    notificationFn: null,
+    fetchClient: null,
+  });
+
+  useEffect(() => {
+    const unsubscribe = modalEmitter.subscribe((data) => {
+      setModalState(data);
+    });
+
+    return unsubscribe;
+  }, []);
+
+  if (!modalState.isOpen || !modalState.notificationFn || !modalState.fetchClient) {
+    return null;
+  }
+
+  return createPortal(
+    <BulkEditModal
+      documents={modalState.documents}
+      contentType={modalState.model}
+      onClose={() => setModalState({ isOpen: false, documents: [], model: '', notificationFn: null, fetchClient: null })}
+      notificationFn={modalState.notificationFn}
+      fetchClient={modalState.fetchClient}
+    />,
+    document.body
+  );
+};

package/admin/src/index.tsx

@@ -0,0 +1,57 @@
+import { DesignSystemProvider } from '@strapi/design-system';
+import { Pencil } from '@strapi/icons';
+import { useFetchClient, useNotification } from '@strapi/strapi/admin';
+import ReactDOM from 'react-dom/client';
+import { ModalManager, openBulkEditModal } from './components/ModalManager';
+
+export default {
+  register(app: any) {
+    app.registerPlugin({
+      id: 'bulk-editor',
+      name: 'Bulk Editor',
+    });
+  },
+
+  bootstrap(app: any) {
+    // Create a div for the modal manager and render it once
+    const modalRoot = document.createElement('div');
+    modalRoot.id = 'bulk-editor-modal-root';
+    document.body.appendChild(modalRoot);
+
+    const root = ReactDOM.createRoot(modalRoot);
+    root.render(
+      <DesignSystemProvider locale="en">
+        <ModalManager />
+      </DesignSystemProvider>
+    );
+
+    const contentManager = app.getPlugin('content-manager');
+
+    if (contentManager && contentManager.apis) {
+      contentManager.apis.addBulkAction([
+        function BulkEditAction({ documents, model }: { documents: any[]; model: string }) {
+          // Access hooks here where we have proper context
+          const toggleNotification = useNotification();
+          const fetchClient = useFetchClient();
+
+          const handleClick = () => {
+            openBulkEditModal(documents, model, toggleNotification, fetchClient);
+          };
+
+          // Return props object that works
+          return {
+            label: 'Bulk Edit',
+            icon: <Pencil />,
+            onClick: handleClick,
+            children: 'Bulk Edit',
+            variant: 'secondary',
+          };
+        },
+      ]);
+    }
+  },
+
+  async registerTrads(app: any) {
+    return [];
+  },
+};

package/admin/src/translations/en.json

@@ -0,0 +1,4 @@
+{
+  "plugin.name": "Bulk Editor",
+  "plugin.description": "Edit multiple entries at once"
+}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "strapi-plugin-bulk-editor",
+  "version": "0.1.0",
+  "description": "Bulk edit Strapi entries in a spreadsheet-like interface",
+  "license": "MIT",
+  "author": "John Chedeville <hi@jchd.me>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/JTCHE/strapi-plugin-bulk-editor"
+  },
+  "keywords": [
+    "strapi",
+    "strapi-plugin",
+    "bulk-edit",
+    "spreadsheet",
+    "batch-update"
+  ],
+  "strapi": {
+    "name": "bulk-editor",
+    "displayName": "Bulk Editor",
+    "description": "Edit multiple entries at once in a spreadsheet view",
+    "kind": "plugin"
+  },
+  "main": "./strapi-server.js",
+  "exports": {
+    "./strapi-admin": {
+      "source": "./admin/src/index.tsx",
+      "require": "./strapi-admin.js"
+    },
+    "./strapi-server": {
+      "source": "./server/index.js",
+      "require": "./strapi-server.js"
+    }
+  },
+  "files": [
+    "admin",
+    "server",
+    "strapi-admin.js",
+    "strapi-server.js"
+  ],
+  "dependencies": {},
+  "peerDependencies": {
+    "@strapi/strapi": "^5.0.0"
+  }
+}

package/server/controllers/bulk-editor.js

@@ -0,0 +1,171 @@
+export default {
+  // Fetch documents with all relations populated
+  async getPopulated(ctx) {
+    const { contentType, documentIds } = ctx.request.body;
+
+    if (!contentType || !documentIds || !Array.isArray(documentIds)) {
+      return ctx.badRequest('Missing or invalid contentType or documentIds');
+    }
+
+    try {
+      const results = [];
+
+      for (const docId of documentIds) {
+        try {
+          const doc = await strapi.documents(contentType).findOne({
+            documentId: docId,
+            populate: '*',
+          });
+
+          if (doc) {
+            results.push(doc);
+          }
+        } catch (error) {
+          console.error(`[BULK-EDITOR] Failed to fetch ${docId}:`, error.message);
+        }
+      }
+
+      return ctx.send({
+        success: true,
+        documents: results,
+      });
+    } catch (error) {
+      console.error('[BULK-EDITOR] Fatal error:', error);
+      return ctx.internalServerError('Failed to fetch documents', { error: error.message });
+    }
+  },
+
+  async bulkUpdate(ctx) {
+    const { contentType, updates, publish } = ctx.request.body;
+
+    if (!contentType || !updates || !Array.isArray(updates)) {
+      return ctx.badRequest('Missing or invalid contentType or updates');
+    }
+
+    try {
+      const results = [];
+
+      // Get the content type schema to identify relation fields
+      const contentTypeSchema = strapi.contentType(contentType);
+      const relationFields = Object.entries(contentTypeSchema.attributes || {})
+        .filter(([_, attr]) => attr.type === 'relation')
+        .map(([name, attr]) => ({ name, relation: attr.relation, mappedBy: attr.mappedBy, inversedBy: attr.inversedBy }));
+
+      // Collect mappedBy fields that need to be updated from the owning side
+      const mappedByUpdates = new Map();
+
+      // Process each update
+      for (const update of updates) {
+        const { id, data } = update;
+
+        if (!id || !data) {
+          results.push({ id, success: false, error: 'Missing id or data' });
+          continue;
+        }
+
+        // Transform relation fields to use Strapi v5's connect/disconnect/set syntax
+        const transformedData = { ...data };
+
+        relationFields.forEach(({ name, relation, mappedBy }) => {
+          if (name in transformedData) {
+            const value = transformedData[name];
+            const fieldAttr = contentTypeSchema.attributes[name];
+            const isManyRelation = relation.includes('ToMany') || relation === 'manyToMany';
+
+            // mappedBy fields are READ-ONLY - must update from owning side
+            if (mappedBy) {
+              const targetContentType = fieldAttr.target;
+
+              // Remove from this update - we'll handle it separately
+              delete transformedData[name];
+
+              // Schedule update on the owning side (target content type)
+              if (value !== null && value !== undefined && value !== '') {
+                if (!mappedByUpdates.has(targetContentType)) {
+                  mappedByUpdates.set(targetContentType, new Map());
+                }
+                const targetUpdates = mappedByUpdates.get(targetContentType);
+                const targetDocId = String(value);
+
+                if (!targetUpdates.has(targetDocId)) {
+                  targetUpdates.set(targetDocId, []);
+                }
+                targetUpdates.get(targetDocId).push({ field: mappedBy, targetDocId: id });
+              }
+              return;
+            }
+
+            // For owning side relations, use { set: [...] }
+            if (isManyRelation) {
+              const ids = Array.isArray(value) ? value : [];
+              transformedData[name] = { set: ids };
+            } else {
+              if (value === null || value === undefined || value === '') {
+                transformedData[name] = { set: [] };
+              } else {
+                transformedData[name] = { set: [value] };
+              }
+            }
+          }
+        });
+
+        try {
+          const updateOptions = {
+            documentId: id,
+            data: transformedData,
+            populate: '*',
+          };
+
+          if (publish !== undefined) {
+            updateOptions.status = publish ? 'published' : 'draft';
+          }
+
+          const updated = await strapi.documents(contentType).update(updateOptions);
+          results.push({ id, success: true, data: updated });
+        } catch (error) {
+          console.error(`[BULK-EDITOR] Update failed for ${id}:`, error.message);
+          results.push({ id, success: false, error: error.message });
+        }
+      }
+
+      // Update mappedBy relations from the owning side
+      if (mappedByUpdates.size > 0) {
+        for (const [targetContentType, targetUpdates] of mappedByUpdates.entries()) {
+          for (const [targetDocId, updates] of targetUpdates.entries()) {
+            // Group updates by field name to accumulate all IDs
+            const fieldToIds = new Map();
+            for (const { field, targetDocId: galleryId } of updates) {
+              if (!fieldToIds.has(field)) {
+                fieldToIds.set(field, []);
+              }
+              fieldToIds.get(field).push(galleryId);
+            }
+
+            // Build update data with all accumulated IDs per field
+            const updateData = {};
+            for (const [field, galleryIds] of fieldToIds.entries()) {
+              updateData[field] = { set: galleryIds };
+            }
+
+            try {
+              await strapi.documents(targetContentType).update({
+                documentId: targetDocId,
+                data: updateData,
+              });
+            } catch (error) {
+              console.error(`[BULK-EDITOR] Failed to update ${targetContentType}/${targetDocId}:`, error.message);
+            }
+          }
+        }
+      }
+
+      return ctx.send({
+        success: true,
+        results,
+      });
+    } catch (error) {
+      console.error('[BULK-EDITOR] Fatal error:', error);
+      return ctx.internalServerError('Bulk update failed', { error: error.message });
+    }
+  },
+};

package/server/controllers/index.js

@@ -0,0 +1,5 @@
+import bulkEditor from './bulk-editor.js';
+
+export default {
+  'bulk-editor': bulkEditor,
+};

package/server/index.js

@@ -0,0 +1,9 @@
+import controllers from './controllers/index.js';
+import routes from './routes/index.js';
+import services from './services/index.js';
+
+export default {
+  controllers,
+  routes,
+  services,
+};

package/server/routes/index.js

@@ -0,0 +1,20 @@
+export default [
+  {
+    method: 'POST',
+    path: '/bulk-update',
+    handler: 'bulk-editor.bulkUpdate',
+    config: {
+      policies: [],
+      auth: false,
+    },
+  },
+  {
+    method: 'POST',
+    path: '/get-populated',
+    handler: 'bulk-editor.getPopulated',
+    config: {
+      policies: [],
+      auth: false,
+    },
+  },
+];

package/server/services/index.js

@@ -0,0 +1 @@
+export default {};

package/strapi-admin.js

@@ -0,0 +1 @@
+export { default } from './admin/src/index.tsx';

package/strapi-server.js

@@ -0,0 +1 @@
+export { default } from './server/index.js';