@strapi/content-manager 5.59.0 → 5.61.0

package/dist/admin/pages/ListView/ListViewPage.mjs

@@ -9,6 +9,8 @@ import { useIntl } from 'react-intl';
 import { useParams, useNavigate, Link } from 'react-router-dom';
 import { styled } from 'styled-components';
 import { InjectionZone } from '../../components/InjectionZone.mjs';
+import { COLLECTION_TYPES } from '../../constants/collections.mjs';
+import { CUSTOM_ORDER_FIELD, isCustomOrderFeatureEnabled, CUSTOM_ORDER_SORT } from '../../constants/customOrder.mjs';
 import { HOOKS } from '../../constants/hooks.mjs';
 import { PERMISSIONS } from '../../constants/plugin.mjs';
 import { DocumentRBAC, useDocumentRBAC } from '../../features/DocumentRBAC.mjs';
@@ -23,6 +25,7 @@ import { getTranslation } from '../../utils/translations.mjs';
 import { getDisplayName } from '../../utils/users.mjs';
 import { DocumentStatus } from '../EditView/components/DocumentStatus.mjs';
 import { BulkActionsRenderer } from './components/BulkActions/Actions.mjs';
+import { useCustomOrder, CustomOrder } from './components/CustomOrder.mjs';
 import { listViewFilters } from './components/Filters.mjs';
 import { TableActions } from './components/TableActions.mjs';
 import { CellContent, hasContent } from './components/TableCells/CellContent.mjs';
@@ -41,6 +44,16 @@ const NON_LINKABLE_TYPES = new Set([
  * -----------------------------------------------------------------------------------------------*/ const LayoutsHeaderCustom = styled(Layouts.Header)`
   overflow-wrap: anywhere;
 `;
+/**
+ * When the entries of the collection type follow a custom order, that order is
+ * what the list shows unless the user sorts on a column.
+ */ const hasCustomOrderEnabled = (collectionType, settings)=>collectionType === COLLECTION_TYPES && settings.customOrder === true && isCustomOrderFeatureEnabled();
+const getDefaultSort = (settings, hasCustomOrder)=>{
+    if (hasCustomOrder) {
+        return CUSTOM_ORDER_SORT;
+    }
+    return settings.defaultSortBy ? `${settings.defaultSortBy}:${settings.defaultSortOrder}` : '';
+};
 const ListViewPage = ()=>{
     const { trackUsage } = useTracking();
     const navigate = useNavigate();
@@ -156,11 +169,26 @@ const ListViewPage = ()=>{
         schema?.attributes,
         schema?.uid
     ]);
+    const hasCustomOrder = hasCustomOrderEnabled(collectionType, list.settings);
     const [{ query }, setQuery] = useQueryParams({
         page: '1',
         pageSize: list.settings.pageSize.toString(),
-        sort: list.settings.defaultSortBy ? `${list.settings.defaultSortBy}:${list.settings.defaultSortOrder}` : ''
+        sort: getDefaultSort(list.settings, hasCustomOrder)
     });
+    // A sort on the custom order can be left over in the URL or in the saved view
+    // after the setting has been turned off.
+    React.useEffect(()=>{
+        if (!isLoadingLayout && !hasCustomOrder && typeof query.sort === 'string' && query.sort.startsWith(`${CUSTOM_ORDER_FIELD}:`)) {
+            setQuery(withEncodedUserParams(query, {
+                sort: undefined
+            }), 'push', true);
+        }
+    }, [
+        hasCustomOrder,
+        isLoadingLayout,
+        query,
+        setQuery
+    ]);
     React.useEffect(()=>{
         if (!configurationReady || !schema?.attributes || schema.uid !== model) {
             return;
@@ -225,7 +253,7 @@ const ListViewPage = ()=>{
         query,
         setQuery
     ]);
-    const { data, error, isLoading, isFetching } = useGetAllDocumentsQuery({
+    const { data, error, isLoading, isFetching, fulfilledTimeStamp } = useGetAllDocumentsQuery({
         model,
         params
     }, {
@@ -263,10 +291,19 @@ const ListViewPage = ()=>{
         query,
         navigate
     ]);
-    const { canCreate, isLoadingActionsRBAC } = useDocumentRBAC('ListViewPage', ({ canCreate, isLoading })=>({
+    const { canCreate, canUpdate, isLoadingActionsRBAC } = useDocumentRBAC('ListViewPage', ({ canCreate, canUpdate, isLoading })=>({
             canCreate,
+            canUpdate,
             isLoadingActionsRBAC: isLoading
         }));
+    const customOrder = useCustomOrder({
+        model,
+        isAvailable: hasCustomOrder,
+        canUpdate: canUpdate === true,
+        sort: query.sort,
+        params,
+        results,
+        pagination});
     const runHookWaterfall = useStrapiApp('ListViewPage', ({ runHookWaterfall })=>runHookWaterfall);
     /**
    * Run the waterfall and then inject our additional table headers.
@@ -305,10 +342,26 @@ const ListViewPage = ()=>{
                 sortable: !hasStatusFilter
             });
         }
+        if (hasCustomOrder) {
+            // Sorting on this column is how the user comes back to the custom order
+            formattedHeaders.unshift({
+                attribute: {
+                    type: 'custom'
+                },
+                name: CUSTOM_ORDER_FIELD,
+                label: formatMessage({
+                    id: getTranslation('containers.list.table-headers.order'),
+                    defaultMessage: 'order'
+                }),
+                searchable: false,
+                sortable: true
+            });
+        }
         return formattedHeaders;
     }, [
         displayedHeaders,
         formatMessage,
+        hasCustomOrder,
         hasStatusFilter,
         list,
         runHookWaterfall,
@@ -346,7 +399,7 @@ const ListViewPage = ()=>{
    * Only genuinely interactive cells are skipped: relations, media, components,
    * dynamic zones (they embed their own links/menus), plugin-formatted columns
    * (`cellFormatter`), and the synthetic `status` column.
-   */ const linkCandidates = tableHeaders.filter(({ name, attribute, cellFormatter })=>name !== 'status' && typeof cellFormatter !== 'function' && attribute && !NON_LINKABLE_TYPES.has(attribute.type));
+   */ const linkCandidates = tableHeaders.filter(({ name, attribute, cellFormatter })=>name !== 'status' && name !== CUSTOM_ORDER_FIELD && typeof cellFormatter !== 'function' && attribute && !NON_LINKABLE_TYPES.has(attribute.type));
     // The link column for a given row: the first candidate that actually has a
     // value (uses CellContent's own hasContent so it matches the "-" the cell
     // would otherwise render). documentId is checked directly (its own cell).
@@ -461,141 +514,152 @@ const ListViewPage = ()=>{
                             direction: "column",
                             alignItems: "stretch",
                             children: [
-                                /*#__PURE__*/ jsxs(Table.Root, {
-                                    rows: results,
-                                    headers: tableHeaders,
-                                    isLoading: isFetching,
-                                    children: [
-                                        /*#__PURE__*/ jsx(TableActionsBar, {}),
-                                        /*#__PURE__*/ jsxs(Table.Content, {
-                                            children: [
-                                                /*#__PURE__*/ jsxs(Table.Head, {
-                                                    children: [
-                                                        /*#__PURE__*/ jsx(Table.HeaderCheckboxCell, {}),
-                                                        tableHeaders.map((header)=>/*#__PURE__*/ jsx(Table.HeaderCell, {
-                                                                ...header
-                                                            }, header.name))
-                                                    ]
-                                                }),
-                                                /*#__PURE__*/ jsx(Table.Loading, {}),
-                                                /*#__PURE__*/ jsx(Table.Empty, {
-                                                    action: canCreate ? /*#__PURE__*/ jsx(CreateButton, {
-                                                        variant: "secondary"
-                                                    }) : null
-                                                }),
-                                                /*#__PURE__*/ jsx(Table.Body, {
-                                                    children: results.map((row)=>{
-                                                        const rowLinkField = getRowLinkField(row);
-                                                        return /*#__PURE__*/ jsxs(Table.Row, {
-                                                            cursor: "pointer",
-                                                            onClick: handleRowClick(row.documentId),
-                                                            children: [
-                                                                /*#__PURE__*/ jsx(Table.CheckboxCell, {
-                                                                    id: row.id
-                                                                }),
-                                                                tableHeaders.map(({ cellFormatter, ...header })=>{
-                                                                    if (header.name === 'status') {
-                                                                        const { status } = row;
-                                                                        return /*#__PURE__*/ jsx(Table.Cell, {
-                                                                            children: /*#__PURE__*/ jsx(DocumentStatus, {
-                                                                                status: status,
-                                                                                maxWidth: 'min-content'
-                                                                            })
-                                                                        }, header.name);
-                                                                    }
-                                                                    if ([
-                                                                        'createdBy',
-                                                                        'updatedBy'
-                                                                    ].includes(header.name.split('.')[0])) {
-                                                                        // Display the users full name
-                                                                        // Some entries doesn't have a user assigned as creator/updater (ex: entries created through content API)
-                                                                        // In this case, we display a dash
-                                                                        return /*#__PURE__*/ jsx(Table.Cell, {
-                                                                            children: /*#__PURE__*/ jsx(Typography, {
-                                                                                textColor: "neutral800",
-                                                                                children: row[header.name.split('.')[0]] ? getDisplayName(row[header.name.split('.')[0]]) : '-'
-                                                                            })
-                                                                        }, header.name);
-                                                                    }
-                                                                    if (header.name === 'documentId') {
-                                                                        // When documentId is the primary link column, only its
-                                                                        // id text becomes the link; the copy button stays outside.
-                                                                        const isDocumentIdLink = header.name === rowLinkField && Boolean(row.documentId);
-                                                                        return /*#__PURE__*/ jsx(Table.Cell, {
-                                                                            children: /*#__PURE__*/ jsxs(Flex, {
-                                                                                gap: 2,
-                                                                                alignItems: "center",
-                                                                                width: "100%",
-                                                                                minWidth: 0,
-                                                                                children: [
-                                                                                    isDocumentIdLink ? /*#__PURE__*/ jsx(Typography, {
-                                                                                        tag: Link,
-                                                                                        to: {
-                                                                                            pathname: row.documentId,
-                                                                                            search: stringify({
-                                                                                                plugins: query.plugins
-                                                                                            })
-                                                                                        },
-                                                                                        onClick: (e)=>e.stopPropagation(),
-                                                                                        textColor: "neutral800",
-                                                                                        maxWidth: "30rem",
-                                                                                        ellipsis: true,
-                                                                                        children: row.documentId
-                                                                                    }) : /*#__PURE__*/ jsx(Typography, {
-                                                                                        textColor: "neutral800",
-                                                                                        maxWidth: "30rem",
-                                                                                        ellipsis: true,
-                                                                                        children: row.documentId || '-'
-                                                                                    }),
-                                                                                    row.documentId && /*#__PURE__*/ jsx(IconButton, {
-                                                                                        variant: "ghost",
-                                                                                        size: "S",
-                                                                                        label: formatMessage({
-                                                                                            id: 'content-manager.actions.copy-documentId.label',
-                                                                                            defaultMessage: 'Copy'
+                                /*#__PURE__*/ jsx(CustomOrder.Root, {
+                                    state: customOrder,
+                                    children: /*#__PURE__*/ jsxs(Table.Root, {
+                                        rows: customOrder.rows,
+                                        headers: tableHeaders,
+                                        isLoading: isFetching && !customOrder.isMoving,
+                                        children: [
+                                            /*#__PURE__*/ jsx(TableActionsBar, {}),
+                                            /*#__PURE__*/ jsxs(Table.Content, {
+                                                children: [
+                                                    /*#__PURE__*/ jsxs(Table.Head, {
+                                                        children: [
+                                                            /*#__PURE__*/ jsx(Table.HeaderCheckboxCell, {}),
+                                                            tableHeaders.map((header)=>/*#__PURE__*/ jsx(Table.HeaderCell, {
+                                                                    ...header
+                                                                }, header.name))
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ jsx(Table.Loading, {}),
+                                                    /*#__PURE__*/ jsx(Table.Empty, {
+                                                        action: canCreate ? /*#__PURE__*/ jsx(CreateButton, {
+                                                            variant: "secondary"
+                                                        }) : null
+                                                    }),
+                                                    /*#__PURE__*/ jsx(Table.Body, {
+                                                        children: customOrder.rows.map((row, index)=>{
+                                                            const rowLinkField = getRowLinkField(row);
+                                                            return /*#__PURE__*/ jsxs(CustomOrder.Row, {
+                                                                cursor: "pointer",
+                                                                documentId: row.documentId,
+                                                                onClick: handleRowClick(row.documentId),
+                                                                children: [
+                                                                    /*#__PURE__*/ jsx(Table.CheckboxCell, {
+                                                                        id: row.id
+                                                                    }),
+                                                                    tableHeaders.map(({ cellFormatter, ...header })=>{
+                                                                        if (header.name === CUSTOM_ORDER_FIELD) {
+                                                                            return /*#__PURE__*/ jsx(CustomOrder.PositionCell, {
+                                                                                documentId: row.documentId,
+                                                                                position: ((pagination?.page ?? 1) - 1) * (pagination?.pageSize ?? 0) + index + 1,
+                                                                                total: pagination?.total ?? customOrder.rows.length
+                                                                            }, header.name);
+                                                                        }
+                                                                        if (header.name === 'status') {
+                                                                            const { status } = row;
+                                                                            return /*#__PURE__*/ jsx(Table.Cell, {
+                                                                                children: /*#__PURE__*/ jsx(DocumentStatus, {
+                                                                                    status: status,
+                                                                                    maxWidth: 'min-content'
+                                                                                })
+                                                                            }, header.name);
+                                                                        }
+                                                                        if ([
+                                                                            'createdBy',
+                                                                            'updatedBy'
+                                                                        ].includes(header.name.split('.')[0])) {
+                                                                            // Display the users full name
+                                                                            // Some entries doesn't have a user assigned as creator/updater (ex: entries created through content API)
+                                                                            // In this case, we display a dash
+                                                                            return /*#__PURE__*/ jsx(Table.Cell, {
+                                                                                children: /*#__PURE__*/ jsx(Typography, {
+                                                                                    textColor: "neutral800",
+                                                                                    children: row[header.name.split('.')[0]] ? getDisplayName(row[header.name.split('.')[0]]) : '-'
+                                                                                })
+                                                                            }, header.name);
+                                                                        }
+                                                                        if (header.name === 'documentId') {
+                                                                            // When documentId is the primary link column, only its
+                                                                            // id text becomes the link; the copy button stays outside.
+                                                                            const isDocumentIdLink = header.name === rowLinkField && Boolean(row.documentId);
+                                                                            return /*#__PURE__*/ jsx(Table.Cell, {
+                                                                                children: /*#__PURE__*/ jsxs(Flex, {
+                                                                                    gap: 2,
+                                                                                    alignItems: "center",
+                                                                                    width: "100%",
+                                                                                    minWidth: 0,
+                                                                                    children: [
+                                                                                        isDocumentIdLink ? /*#__PURE__*/ jsx(Typography, {
+                                                                                            tag: Link,
+                                                                                            to: {
+                                                                                                pathname: row.documentId,
+                                                                                                search: stringify({
+                                                                                                    plugins: query.plugins
+                                                                                                })
+                                                                                            },
+                                                                                            onClick: (e)=>e.stopPropagation(),
+                                                                                            textColor: "neutral800",
+                                                                                            maxWidth: "30rem",
+                                                                                            ellipsis: true,
+                                                                                            children: row.documentId
+                                                                                        }) : /*#__PURE__*/ jsx(Typography, {
+                                                                                            textColor: "neutral800",
+                                                                                            maxWidth: "30rem",
+                                                                                            ellipsis: true,
+                                                                                            children: row.documentId || '-'
                                                                                         }),
-                                                                                        onClick: (e)=>handleCopyDocumentId(e, row.documentId),
-                                                                                        children: /*#__PURE__*/ jsx(Duplicate, {})
-                                                                                    })
-                                                                                ]
-                                                                            })
-                                                                        }, header.name);
-                                                                    }
-                                                                    if (typeof cellFormatter === 'function') {
+                                                                                        row.documentId && /*#__PURE__*/ jsx(IconButton, {
+                                                                                            variant: "ghost",
+                                                                                            size: "S",
+                                                                                            label: formatMessage({
+                                                                                                id: 'content-manager.actions.copy-documentId.label',
+                                                                                                defaultMessage: 'Copy'
+                                                                                            }),
+                                                                                            onClick: (e)=>handleCopyDocumentId(e, row.documentId),
+                                                                                            children: /*#__PURE__*/ jsx(Duplicate, {})
+                                                                                        })
+                                                                                    ]
+                                                                                })
+                                                                            }, header.name);
+                                                                        }
+                                                                        if (typeof cellFormatter === 'function') {
+                                                                            return /*#__PURE__*/ jsx(Table.Cell, {
+                                                                                children: cellFormatter(row, header, {
+                                                                                    collectionType,
+                                                                                    model
+                                                                                })
+                                                                            }, header.name);
+                                                                        }
                                                                         return /*#__PURE__*/ jsx(Table.Cell, {
-                                                                            children: cellFormatter(row, header, {
-                                                                                collectionType,
-                                                                                model
+                                                                            children: /*#__PURE__*/ jsx(CellContent, {
+                                                                                content: row[header.name.split('.')[0]],
+                                                                                rowId: row.documentId,
+                                                                                ...header,
+                                                                                linkTo: header.name === rowLinkField ? {
+                                                                                    pathname: row.documentId,
+                                                                                    search: stringify({
+                                                                                        plugins: query.plugins
+                                                                                    })
+                                                                                } : undefined
                                                                             })
                                                                         }, header.name);
-                                                                    }
-                                                                    return /*#__PURE__*/ jsx(Table.Cell, {
-                                                                        children: /*#__PURE__*/ jsx(CellContent, {
-                                                                            content: row[header.name.split('.')[0]],
-                                                                            rowId: row.documentId,
-                                                                            ...header,
-                                                                            linkTo: header.name === rowLinkField ? {
-                                                                                pathname: row.documentId,
-                                                                                search: stringify({
-                                                                                    plugins: query.plugins
-                                                                                })
-                                                                            } : undefined
+                                                                    }),
+                                                                    /*#__PURE__*/ jsx(ActionsCell, {
+                                                                        onClick: (e)=>e.stopPropagation(),
+                                                                        children: /*#__PURE__*/ jsx(TableActions, {
+                                                                            document: row
                                                                         })
-                                                                    }, header.name);
-                                                                }),
-                                                                /*#__PURE__*/ jsx(ActionsCell, {
-                                                                    onClick: (e)=>e.stopPropagation(),
-                                                                    children: /*#__PURE__*/ jsx(TableActions, {
-                                                                        document: row
                                                                     })
-                                                                })
-                                                            ]
-                                                        }, row.id);
+                                                                ]
+                                                            }, row.id);
+                                                        })
                                                     })
-                                                })
-                                            ]
-                                        })
-                                    ]
+                                                ]
+                                            })
+                                        ]
+                                    })
                                 }),
                                 /*#__PURE__*/ jsxs(Pagination.Root, {
                                     ...pagination,