@payloadcms/ui 3.32.0-internal.f2e77bd → 3.33.0-internal.d1efdd8

package/dist/elements/Table/OrderableTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderableTable.js","names":["React","useEffect","useState","toast","useListQuery","DraggableSortableItem","DraggableSortable","baseClass","OrderableTable","appearance","collection","columns","data","initialData","listQueryData","handleSortChange","orderableFieldName","query","serverData","docs","localData","setLocalData","cellMap","setCellMap","Object","fromEntries","map","item","index","String","id","_id","activeColumns","filter","col","active","includes","accessor","length","_jsx","handleDragEnd","moveFromIndex","moveToIndex","sort","warning","movedId","newBeforeRow","newAfterRow","previousData","currentData","newData","splice","target","key","newKeyWillBe","jsonBody","collectionSlug","slug","docsToMove","response","fetch","body","JSON","stringify","headers","method","status","Error","ok","err","error","message","rowIds","row","className","Boolean","join","ids","onDragEnd","_jsxs","cellPadding","cellSpacing","i","Heading","rowIndex","children","attributes","listeners","setNodeRef","transform","transition","ref","style","colIndex","cell","renderedCells"],"sources":["../../../src/elements/Table/OrderableTable.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientCollectionConfig, Column, OrderableEndpointBody } from 'payload'\n\nimport './index.scss'\n\nimport React, { useEffect, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { DraggableSortableItem } from '../DraggableSortable/DraggableSortableItem/index.js'\nimport { DraggableSortable } from '../DraggableSortable/index.js'\n\nconst baseClass = 'table'\n\nexport type Props = {\n  readonly appearance?: 'condensed' | 'default'\n  readonly collection: ClientCollectionConfig\n  readonly columns?: Column[]\n  readonly data: Record<string, unknown>[]\n}\n\nexport const OrderableTable: React.FC<Props> = ({\n  appearance = 'default',\n  collection,\n  columns,\n  data: initialData,\n}) => {\n  const { data: listQueryData, handleSortChange, orderableFieldName, query } = useListQuery()\n  // Use the data from ListQueryProvider if available, otherwise use the props\n  const serverData = listQueryData?.docs || initialData\n\n  // Local state to track the current order of rows\n  const [localData, setLocalData] = useState(serverData)\n\n  // id -> index for each column\n  const [cellMap, setCellMap] = useState<Record<string, number>>({})\n\n  // Update local data when server data changes\n  useEffect(() => {\n    setLocalData(serverData)\n    setCellMap(\n      Object.fromEntries(serverData.map((item, index) => [String(item.id ?? item._id), index])),\n    )\n  }, [serverData])\n\n  const activeColumns = columns?.filter((col) => col?.active)\n\n  if (\n    !activeColumns ||\n    activeColumns.filter((col) => !['_dragHandle', '_select'].includes(col.accessor)).length === 0\n  ) {\n    return <div>No columns selected</div>\n  }\n\n  const handleDragEnd = async ({ moveFromIndex, moveToIndex }) => {\n    if (query.sort !== orderableFieldName && query.sort !== `-${orderableFieldName}`) {\n      toast.warning('To reorder the rows you must first sort them by the \"Order\" column')\n      return\n    }\n\n    if (moveFromIndex === moveToIndex) {\n      return\n    }\n\n    const movedId = localData[moveFromIndex].id ?? localData[moveFromIndex]._id\n    const newBeforeRow =\n      moveToIndex > moveFromIndex ? localData[moveToIndex] : localData[moveToIndex - 1]\n    const newAfterRow =\n      moveToIndex > moveFromIndex ? localData[moveToIndex + 1] : localData[moveToIndex]\n\n    // Store the original data for rollback\n    const previousData = [...localData]\n\n    // Optimisitc update of local state to reorder the rows\n    setLocalData((currentData) => {\n      const newData = [...currentData]\n      // Update the rendered cell for the moved row to show \"pending\"\n      newData[moveFromIndex][orderableFieldName] = `pending`\n      // Move the item in the array\n      newData.splice(moveToIndex, 0, newData.splice(moveFromIndex, 1)[0])\n      return newData\n    })\n\n    try {\n      const target: OrderableEndpointBody['target'] = newBeforeRow\n        ? {\n            id: newBeforeRow.id ?? newBeforeRow._id,\n            key: newBeforeRow[orderableFieldName],\n          }\n        : {\n            id: newAfterRow.id ?? newAfterRow._id,\n            key: newAfterRow[orderableFieldName],\n          }\n\n      const newKeyWillBe =\n        (newBeforeRow && query.sort === orderableFieldName) ||\n        (!newBeforeRow && query.sort === `-${orderableFieldName}`)\n          ? 'greater'\n          : 'less'\n\n      const jsonBody: OrderableEndpointBody = {\n        collectionSlug: collection.slug,\n        docsToMove: [movedId],\n        newKeyWillBe,\n        orderableFieldName,\n        target,\n      }\n\n      const response = await fetch(`/api/reorder`, {\n        body: JSON.stringify(jsonBody),\n        headers: {\n          'Content-Type': 'application/json',\n        },\n        method: 'POST',\n      })\n\n      if (response.status === 403) {\n        throw new Error('You do not have permission to reorder these rows')\n      }\n\n      if (!response.ok) {\n        throw new Error(\n          'Failed to reorder. This can happen if you reorder several rows too quickly. Please try again.',\n        )\n      }\n    } catch (err) {\n      const error = err instanceof Error ? err.message : String(err)\n      // Rollback to previous state if the request fails\n      setLocalData(previousData)\n      toast.error(error)\n    }\n  }\n\n  const rowIds = localData.map((row) => row.id ?? row._id)\n\n  return (\n    <div\n      className={[baseClass, appearance && `${baseClass}--appearance-${appearance}`]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <DraggableSortable ids={rowIds} onDragEnd={handleDragEnd}>\n        <table cellPadding=\"0\" cellSpacing=\"0\">\n          <thead>\n            <tr>\n              {activeColumns.map((col, i) => (\n                <th id={`heading-${col.accessor}`} key={i}>\n                  {col.Heading}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {localData.map((row, rowIndex) => (\n              <DraggableSortableItem id={rowIds[rowIndex]} key={rowIds[rowIndex]}>\n                {({ attributes, listeners, setNodeRef, transform, transition }) => (\n                  <tr\n                    className={`row-${rowIndex + 1}`}\n                    ref={setNodeRef}\n                    style={{\n                      transform,\n                      transition,\n                    }}\n                  >\n                    {activeColumns.map((col, colIndex) => {\n                      const { accessor } = col\n\n                      // Use the cellMap to find which index in the renderedCells to use\n                      const cell = col.renderedCells[cellMap[row.id ?? row._id]]\n\n                      // For drag handles, wrap in div with drag attributes\n                      if (accessor === '_dragHandle') {\n                        return (\n                          <td className={`cell-${accessor}`} key={colIndex}>\n                            <div {...attributes} {...listeners}>\n                              {cell}\n                            </div>\n                          </td>\n                        )\n                      }\n\n                      return (\n                        <td className={`cell-${accessor}`} key={colIndex}>\n                          {cell}\n                        </td>\n                      )\n                    })}\n                  </tr>\n                )}\n              </DraggableSortableItem>\n            ))}\n          </tbody>\n        </table>\n      </DraggableSortable>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}