@akbarsafari00/bonyan-content-manager 5.52.1-fa.2

package/dist/admin/pages/ListConfiguration/ListConfigurationPage.mjs

@@ -0,0 +1,178 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Page, useTracking, useNotification, useAPIErrorHandler, useScopedPersistentState, Layouts, Form } from '@strapi/admin/strapi-admin';
+import { Main, Flex, Divider } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { useParams, Navigate } from 'react-router-dom';
+import { SINGLE_TYPES } from '../../constants/collections.mjs';
+import { useDoc } from '../../hooks/useDocument.mjs';
+import { useDocLayout, convertListLayoutToFieldLayouts } from '../../hooks/useDocumentLayout.mjs';
+import { useTypedSelector } from '../../modules/hooks.mjs';
+import { useUpdateContentTypeConfigurationMutation } from '../../services/contentTypes.mjs';
+import { setIn } from '../../utils/objects.mjs';
+import { Header } from './components/Header.mjs';
+import { Settings } from './components/Settings.mjs';
+import { SortDisplayedFields } from './components/SortDisplayedFields.mjs';
+
+const ListConfiguration = ()=>{
+    const { formatMessage } = useIntl();
+    const { trackUsage } = useTracking();
+    const { toggleNotification } = useNotification();
+    const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
+    const { model, collectionType, schema } = useDoc();
+    const { isLoading: isLoadingLayout, list, edit, listViewConversionContext } = useDocLayout();
+    const [displayedHeaderNames, setDisplayedHeaderNames] = useScopedPersistentState(`STRAPI_LIST_VIEW_DISPLAYED_HEADERS:${model}`, null);
+    const [updateContentTypeConfiguration] = useUpdateContentTypeConfigurationMutation();
+    const handleSubmit = async (data)=>{
+        try {
+            trackUsage('willSaveContentTypeLayout');
+            const layoutData = data.layout ?? [];
+            /**
+       * We reconstruct the metadatas object by taking the existing edit metadatas
+       * and re-merging that by attribute name with the current list metadatas, whilst overwriting
+       * the data from the form we've built.
+       */ const meta = Object.entries(edit.metadatas).reduce((acc, [name, editMeta])=>{
+                const { mainField: _mainField, ...listMeta } = list.metadatas[name];
+                const { label, sortable } = layoutData.find((field)=>field.name === name) ?? {};
+                acc[name] = {
+                    edit: editMeta,
+                    list: {
+                        ...listMeta,
+                        label: label || listMeta.label,
+                        sortable: sortable || listMeta.sortable
+                    }
+                };
+                return acc;
+            }, {});
+            const res = await updateContentTypeConfiguration({
+                layouts: {
+                    edit: edit.layout.flatMap((panel)=>panel.map((row)=>row.map(({ name, size })=>({
+                                    name,
+                                    size
+                                })))),
+                    list: layoutData.map((field)=>field.name)
+                },
+                settings: setIn(data.settings, 'displayName', undefined),
+                metadatas: meta,
+                uid: model
+            });
+            if ('data' in res) {
+                setDisplayedHeaderNames(layoutData.map((field)=>field.name));
+                trackUsage('didEditListSettings');
+                toggleNotification({
+                    type: 'success',
+                    message: formatMessage({
+                        id: 'notification.success.saved',
+                        defaultMessage: 'Saved'
+                    })
+                });
+            } else {
+                toggleNotification({
+                    type: 'danger',
+                    message: formatAPIError(res.error)
+                });
+            }
+        } catch (err) {
+            console.error(err);
+            toggleNotification({
+                type: 'danger',
+                message: formatMessage({
+                    id: 'notification.error',
+                    defaultMessage: 'An error occurred'
+                })
+            });
+        }
+    };
+    const initialValues = React.useMemo(()=>{
+        const headerNames = displayedHeaderNames && displayedHeaderNames.length > 0 ? displayedHeaderNames : list.layout.map((field)=>field.name);
+        const headerMetadatas = headerNames.reduce((acc, name)=>{
+            acc[name] = list.metadatas[name] ?? {
+                label: name
+            };
+            return acc;
+        }, {});
+        /**
+     * Same context as `formatListLayout` / `ListViewPage#displayedHeaders` so `getMainField`
+     * can resolve component and relation list columns (see #25509, #25872).
+     */ const listFieldLayouts = listViewConversionContext ? convertListLayoutToFieldLayouts(headerNames, schema?.attributes, headerMetadatas, {
+            configurations: listViewConversionContext.componentConfigurations,
+            schemas: listViewConversionContext.componentSchemas
+        }, listViewConversionContext.contentTypeSchemas) : convertListLayoutToFieldLayouts(headerNames, schema?.attributes, headerMetadatas);
+        return {
+            layout: listFieldLayouts.map(({ label, sortable, name })=>({
+                    label: typeof label === 'string' ? label : formatMessage(label),
+                    sortable,
+                    name
+                })),
+            settings: list.settings
+        };
+    }, [
+        formatMessage,
+        list,
+        displayedHeaderNames,
+        schema,
+        listViewConversionContext
+    ]);
+    if (collectionType === SINGLE_TYPES) {
+        return /*#__PURE__*/ jsx(Navigate, {
+            to: `/single-types/${model}`
+        });
+    }
+    if (isLoadingLayout) {
+        return /*#__PURE__*/ jsx(Page.Loading, {});
+    }
+    return /*#__PURE__*/ jsxs(Layouts.Root, {
+        children: [
+            /*#__PURE__*/ jsx(Page.Title, {
+                children: `Configure ${list.settings.displayName} List View`
+            }),
+            /*#__PURE__*/ jsx(Main, {
+                children: /*#__PURE__*/ jsxs(Form, {
+                    initialValues: initialValues,
+                    onSubmit: handleSubmit,
+                    method: "PUT",
+                    children: [
+                        /*#__PURE__*/ jsx(Header, {
+                            collectionType: collectionType,
+                            model: model,
+                            name: list.settings.displayName ?? ''
+                        }),
+                        /*#__PURE__*/ jsx(Layouts.Content, {
+                            children: /*#__PURE__*/ jsxs(Flex, {
+                                alignItems: "stretch",
+                                background: "neutral0",
+                                direction: "column",
+                                gap: 6,
+                                hasRadius: true,
+                                shadow: "tableShadow",
+                                paddingTop: 6,
+                                paddingBottom: 6,
+                                paddingLeft: 7,
+                                paddingRight: 7,
+                                position: "relative",
+                                children: [
+                                    /*#__PURE__*/ jsx(Settings, {}),
+                                    /*#__PURE__*/ jsx(Divider, {}),
+                                    /*#__PURE__*/ jsx(SortDisplayedFields, {
+                                        metadatas: list.metadatas
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+const ProtectedListConfiguration = ()=>{
+    const { slug = '' } = useParams();
+    const permissions = useTypedSelector((state)=>state.admin_app.permissions.contentManager?.collectionTypesConfigurations);
+    return /*#__PURE__*/ jsx(Page.Protect, {
+        permissions: permissions,
+        children: /*#__PURE__*/ jsx(ListConfiguration, {}, slug)
+    });
+};
+
+export { ListConfiguration, ProtectedListConfiguration };
+//# sourceMappingURL=ListConfigurationPage.mjs.map

package/dist/admin/pages/ListConfiguration/ListConfigurationPage.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListConfigurationPage.mjs","sources":["../../../../admin/src/pages/ListConfiguration/ListConfigurationPage.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nimport {\r\n  Form,\r\n  type FormProps,\r\n  useNotification,\r\n  useScopedPersistentState,\r\n  useTracking,\r\n  useAPIErrorHandler,\r\n  Page,\r\n  Layouts,\r\n} from '@strapi/admin/strapi-admin';\r\nimport { Divider, Flex, Main } from '@strapi/design-system';\r\nimport { useIntl } from 'react-intl';\r\nimport { Navigate, useParams } from 'react-router-dom';\r\n\r\nimport { SINGLE_TYPES } from '../../constants/collections';\r\nimport { useDoc } from '../../hooks/useDocument';\r\nimport {\r\n  convertListLayoutToFieldLayouts,\r\n  type ListFieldLayout,\r\n  type ListLayout,\r\n  useDocLayout,\r\n} from '../../hooks/useDocumentLayout';\r\nimport { useTypedSelector } from '../../modules/hooks';\r\nimport { useUpdateContentTypeConfigurationMutation } from '../../services/contentTypes';\r\nimport { setIn } from '../../utils/objects';\r\n\r\nimport { Header } from './components/Header';\r\nimport { Settings } from './components/Settings';\r\nimport { SortDisplayedFields } from './components/SortDisplayedFields';\r\n\r\nimport type { Metadatas } from '../../../../shared/contracts/content-types';\r\n\r\ninterface FormData extends Pick<ListLayout, 'settings'> {\r\n  layout: Array<Pick<ListFieldLayout, 'sortable' | 'name'> & { label: string }>;\r\n}\r\n\r\nconst ListConfiguration = () => {\r\n  const { formatMessage } = useIntl();\r\n  const { trackUsage } = useTracking();\r\n  const { toggleNotification } = useNotification();\r\n  const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();\r\n\r\n  const { model, collectionType, schema } = useDoc();\r\n\r\n  const { isLoading: isLoadingLayout, list, edit, listViewConversionContext } = useDocLayout();\r\n  const [displayedHeaderNames, setDisplayedHeaderNames] = useScopedPersistentState<string[] | null>(\r\n    `STRAPI_LIST_VIEW_DISPLAYED_HEADERS:${model}`,\r\n    null\r\n  );\r\n\r\n  const [updateContentTypeConfiguration] = useUpdateContentTypeConfigurationMutation();\r\n  const handleSubmit: FormProps<FormData>['onSubmit'] = async (data) => {\r\n    try {\r\n      trackUsage('willSaveContentTypeLayout');\r\n      const layoutData = data.layout ?? [];\r\n      /**\r\n       * We reconstruct the metadatas object by taking the existing edit metadatas\r\n       * and re-merging that by attribute name with the current list metadatas, whilst overwriting\r\n       * the data from the form we've built.\r\n       */\r\n      const meta = Object.entries(edit.metadatas).reduce<Metadatas>((acc, [name, editMeta]) => {\r\n        const { mainField: _mainField, ...listMeta } = list.metadatas[name];\r\n\r\n        const { label, sortable } = layoutData.find((field) => field.name === name) ?? {};\r\n\r\n        acc[name] = {\r\n          edit: editMeta,\r\n          list: {\r\n            ...listMeta,\r\n            label: label || listMeta.label,\r\n            sortable: sortable || listMeta.sortable,\r\n          },\r\n        };\r\n\r\n        return acc;\r\n      }, {});\r\n\r\n      const res = await updateContentTypeConfiguration({\r\n        layouts: {\r\n          edit: edit.layout.flatMap((panel) =>\r\n            panel.map((row) => row.map(({ name, size }) => ({ name, size })))\r\n          ),\r\n          list: layoutData.map((field) => field.name),\r\n        },\r\n        settings: setIn(data.settings, 'displayName', undefined),\r\n        metadatas: meta,\r\n        uid: model,\r\n      });\r\n\r\n      if ('data' in res) {\r\n        setDisplayedHeaderNames(layoutData.map((field) => field.name));\r\n        trackUsage('didEditListSettings');\r\n        toggleNotification({\r\n          type: 'success',\r\n          message: formatMessage({ id: 'notification.success.saved', defaultMessage: 'Saved' }),\r\n        });\r\n      } else {\r\n        toggleNotification({\r\n          type: 'danger',\r\n          message: formatAPIError(res.error),\r\n        });\r\n      }\r\n    } catch (err) {\r\n      console.error(err);\r\n      toggleNotification({\r\n        type: 'danger',\r\n        message: formatMessage({ id: 'notification.error', defaultMessage: 'An error occurred' }),\r\n      });\r\n    }\r\n  };\r\n\r\n  const initialValues = React.useMemo(() => {\r\n    const headerNames =\r\n      displayedHeaderNames && displayedHeaderNames.length > 0\r\n        ? displayedHeaderNames\r\n        : list.layout.map((field) => field.name);\r\n\r\n    const headerMetadatas = headerNames.reduce<ListLayout['metadatas']>((acc, name) => {\r\n      acc[name] = list.metadatas[name] ?? { label: name };\r\n      return acc;\r\n    }, {});\r\n\r\n    /**\r\n     * Same context as `formatListLayout` / `ListViewPage#displayedHeaders` so `getMainField`\r\n     * can resolve component and relation list columns (see #25509, #25872).\r\n     */\r\n    const listFieldLayouts = listViewConversionContext\r\n      ? convertListLayoutToFieldLayouts(\r\n          headerNames,\r\n          schema?.attributes,\r\n          headerMetadatas,\r\n          {\r\n            configurations: listViewConversionContext.componentConfigurations,\r\n            schemas: listViewConversionContext.componentSchemas,\r\n          },\r\n          listViewConversionContext.contentTypeSchemas\r\n        )\r\n      : convertListLayoutToFieldLayouts(headerNames, schema?.attributes, headerMetadatas);\r\n\r\n    return {\r\n      layout: listFieldLayouts.map(({ label, sortable, name }) => ({\r\n        label: typeof label === 'string' ? label : formatMessage(label),\r\n        sortable,\r\n        name,\r\n      })),\r\n      settings: list.settings,\r\n    } satisfies FormData;\r\n  }, [formatMessage, list, displayedHeaderNames, schema, listViewConversionContext]);\r\n\r\n  if (collectionType === SINGLE_TYPES) {\r\n    return <Navigate to={`/single-types/${model}`} />;\r\n  }\r\n\r\n  if (isLoadingLayout) {\r\n    return <Page.Loading />;\r\n  }\r\n\r\n  return (\r\n    <Layouts.Root>\r\n      <Page.Title>{`Configure ${list.settings.displayName} List View`}</Page.Title>\r\n      <Main>\r\n        <Form initialValues={initialValues} onSubmit={handleSubmit} method=\"PUT\">\r\n          <Header\r\n            collectionType={collectionType}\r\n            model={model}\r\n            name={list.settings.displayName ?? ''}\r\n          />\r\n          <Layouts.Content>\r\n            <Flex\r\n              alignItems=\"stretch\"\r\n              background=\"neutral0\"\r\n              direction=\"column\"\r\n              gap={6}\r\n              hasRadius\r\n              shadow=\"tableShadow\"\r\n              paddingTop={6}\r\n              paddingBottom={6}\r\n              paddingLeft={7}\r\n              paddingRight={7}\r\n              position=\"relative\"\r\n            >\r\n              <Settings />\r\n              <Divider />\r\n              <SortDisplayedFields metadatas={list.metadatas} />\r\n            </Flex>\r\n          </Layouts.Content>\r\n        </Form>\r\n      </Main>\r\n    </Layouts.Root>\r\n  );\r\n};\r\n\r\nconst ProtectedListConfiguration = () => {\r\n  const { slug = '' } = useParams<{\r\n    slug: string;\r\n  }>();\r\n  const permissions = useTypedSelector(\r\n    (state) => state.admin_app.permissions.contentManager?.collectionTypesConfigurations\r\n  );\r\n\r\n  return (\r\n    <Page.Protect permissions={permissions}>\r\n      <ListConfiguration key={slug} />\r\n    </Page.Protect>\r\n  );\r\n};\r\n\r\nexport { ProtectedListConfiguration, ListConfiguration };\r\nexport type { FormData };\r\n"],"names":["ListConfiguration","formatMessage","useIntl","trackUsage","useTracking","toggleNotification","useNotification","_unstableFormatAPIError","formatAPIError","useAPIErrorHandler","model","collectionType","schema","useDoc","isLoading","isLoadingLayout","list","edit","listViewConversionContext","useDocLayout","displayedHeaderNames","setDisplayedHeaderNames","useScopedPersistentState","updateContentTypeConfiguration","useUpdateContentTypeConfigurationMutation","handleSubmit","data","layoutData","layout","meta","Object","entries","metadatas","reduce","acc","name","editMeta","mainField","_mainField","listMeta","label","sortable","find","field","res","layouts","flatMap","panel","map","row","size","settings","setIn","undefined","uid","type","message","id","defaultMessage","error","err","console","initialValues","React","useMemo","headerNames","length","headerMetadatas","listFieldLayouts","convertListLayoutToFieldLayouts","attributes","configurations","componentConfigurations","schemas","componentSchemas","contentTypeSchemas","SINGLE_TYPES","_jsx","Navigate","to","Page","Loading","_jsxs","Layouts","Root","Title","displayName","Main","Form","onSubmit","method","Header","Content","Flex","alignItems","background","direction","gap","hasRadius","shadow","paddingTop","paddingBottom","paddingLeft","paddingRight","position","Settings","Divider","SortDisplayedFields","ProtectedListConfiguration","slug","useParams","permissions","useTypedSelector","state","admin_app","contentManager","collectionTypesConfigurations","Protect"],"mappings":"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"}

package/dist/admin/pages/ListConfiguration/components/DraggableCard.js

@@ -0,0 +1,202 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+var Icons = require('@strapi/icons');
+var reactDndHtml5Backend = require('react-dnd-html5-backend');
+var reactIntl = require('react-intl');
+var styledComponents = require('styled-components');
+var CardDragPreview = require('../../../components/DragPreviews/CardDragPreview.js');
+var dragAndDrop = require('../../../constants/dragAndDrop.js');
+var useDragAndDrop = require('../../../hooks/useDragAndDrop.js');
+var translations = require('../../../utils/translations.js');
+var EditFieldForm = require('./EditFieldForm.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const DraggableCard = ({ attribute, index, isDraggingSibling, label, name, onMoveField, onRemoveField, setIsDraggingSibling })=>{
+    const [isModalOpen, setIsModalOpen] = React__namespace.useState(false);
+    const { formatMessage } = reactIntl.useIntl();
+    const [, forceRerenderAfterDnd] = React__namespace.useState(false);
+    const [{ isDragging }, objectRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop.useDragAndDrop(true, {
+        type: dragAndDrop.ItemTypes.FIELD,
+        item: {
+            index,
+            label,
+            name
+        },
+        index,
+        onMoveItem: onMoveField,
+        onEnd: ()=>setIsDraggingSibling(false)
+    });
+    React__namespace.useEffect(()=>{
+        dragPreviewRef(reactDndHtml5Backend.getEmptyImage(), {
+            captureDraggingState: false
+        });
+    }, [
+        dragPreviewRef
+    ]);
+    React__namespace.useEffect(()=>{
+        if (isDragging) {
+            setIsDraggingSibling(true);
+        }
+    }, [
+        isDragging,
+        setIsDraggingSibling
+    ]);
+    // Effect in order to force a rerender after reordering the components
+    // Since we are removing the Accordion when doing the DnD  we are losing the dragRef, therefore the replaced element cannot be dragged
+    // anymore, this hack forces a rerender in order to apply the dragRef
+    React__namespace.useEffect(()=>{
+        if (!isDraggingSibling) {
+            forceRerenderAfterDnd((prev)=>!prev);
+        }
+    }, [
+        isDraggingSibling
+    ]);
+    const composedRefs = designSystem.useComposedRefs(dropRef, objectRef);
+    return /*#__PURE__*/ jsxRuntime.jsxs(FieldWrapper, {
+        ref: composedRefs,
+        children: [
+            isDragging && /*#__PURE__*/ jsxRuntime.jsx(CardDragPreview.CardDragPreview, {
+                label: label
+            }),
+            !isDragging && isDraggingSibling && /*#__PURE__*/ jsxRuntime.jsx(CardDragPreview.CardDragPreview, {
+                isSibling: true,
+                label: label
+            }),
+            !isDragging && !isDraggingSibling && /*#__PURE__*/ jsxRuntime.jsxs(FieldContainer, {
+                borderColor: "neutral150",
+                background: "neutral100",
+                hasRadius: true,
+                justifyContent: "space-between",
+                onClick: ()=>setIsModalOpen(true),
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                        gap: 3,
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(DragButton, {
+                                ref: dragRef,
+                                "aria-label": formatMessage({
+                                    id: translations.getTranslation('components.DraggableCard.move.field'),
+                                    defaultMessage: 'Move {item}'
+                                }, {
+                                    item: label
+                                }),
+                                onClick: (e)=>e.stopPropagation(),
+                                type: "button",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Drag, {})
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                fontWeight: "bold",
+                                children: label
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                        paddingLeft: 3,
+                        onClick: (e)=>e.stopPropagation(),
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Modal.Root, {
+                                open: isModalOpen,
+                                onOpenChange: setIsModalOpen,
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Trigger, {
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(ActionButton, {
+                                            onClick: (e)=>{
+                                                e.stopPropagation();
+                                            },
+                                            "aria-label": formatMessage({
+                                                id: translations.getTranslation('components.DraggableCard.edit.field'),
+                                                defaultMessage: 'Edit {item}'
+                                            }, {
+                                                item: label
+                                            }),
+                                            type: "button",
+                                            children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Pencil, {
+                                                width: "1.2rem",
+                                                height: "1.2rem"
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(EditFieldForm.EditFieldForm, {
+                                        attribute: attribute,
+                                        name: `layout.${index}`,
+                                        onClose: ()=>{
+                                            setIsModalOpen(false);
+                                        }
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(ActionButton, {
+                                onClick: onRemoveField,
+                                "data-testid": `delete-${name}`,
+                                "aria-label": formatMessage({
+                                    id: translations.getTranslation('components.DraggableCard.delete.field'),
+                                    defaultMessage: 'Delete {item}'
+                                }, {
+                                    item: label
+                                }),
+                                type: "button",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Cross, {
+                                    width: "1.2rem",
+                                    height: "1.2rem"
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+const ActionButton = styledComponents.styled.button`
+  display: flex;
+  align-items: center;
+  height: ${({ theme })=>theme.spaces[7]};
+  color: ${({ theme })=>theme.colors.neutral600};
+
+  &:hover {
+    color: ${({ theme })=>theme.colors.neutral700};
+  }
+
+  &:last-child {
+    padding: 0 ${({ theme })=>theme.spaces[3]};
+  }
+`;
+const DragButton = styledComponents.styled(ActionButton)`
+  padding: 0 ${({ theme })=>theme.spaces[3]};
+  border-inline-end: 1px solid ${({ theme })=>theme.colors.neutral150};
+  cursor: all-scroll;
+`;
+const FieldContainer = styledComponents.styled(designSystem.Flex)`
+  max-height: 3.2rem;
+  cursor: pointer;
+`;
+const FieldWrapper = styledComponents.styled(designSystem.Box)`
+  &:last-child {
+    padding-inline-end: ${({ theme })=>theme.spaces[3]};
+  }
+`;
+
+exports.DraggableCard = DraggableCard;
+//# sourceMappingURL=DraggableCard.js.map

package/dist/admin/pages/ListConfiguration/components/DraggableCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraggableCard.js","sources":["../../../../../admin/src/pages/ListConfiguration/components/DraggableCard.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Box,\n  BoxComponent,\n  Flex,\n  FlexComponent,\n  Modal,\n  Typography,\n  useComposedRefs,\n} from '@strapi/design-system';\nimport { Cross, Drag, Pencil } from '@strapi/icons';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { CardDragPreview } from '../../../components/DragPreviews/CardDragPreview';\nimport { ItemTypes } from '../../../constants/dragAndDrop';\nimport { useDragAndDrop } from '../../../hooks/useDragAndDrop';\nimport { getTranslation } from '../../../utils/translations';\n\nimport { EditFieldForm } from './EditFieldForm';\n\nimport type { ListFieldLayout } from '../../../hooks/useDocumentLayout';\n\ntype DraggableCardProps = Omit<ListFieldLayout, 'label'> & {\n  label: string;\n  index: number;\n  isDraggingSibling: boolean;\n  onMoveField: (dragIndex: number, hoverIndex: number) => void;\n  onRemoveField: () => void;\n  setIsDraggingSibling: (isDragging: boolean) => void;\n};\n\nconst DraggableCard = ({\n  attribute,\n  index,\n  isDraggingSibling,\n  label,\n  name,\n  onMoveField,\n  onRemoveField,\n  setIsDraggingSibling,\n}: DraggableCardProps) => {\n  const [isModalOpen, setIsModalOpen] = React.useState(false);\n  const { formatMessage } = useIntl();\n  const [, forceRerenderAfterDnd] = React.useState(false);\n\n  const [{ isDragging }, objectRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop(true, {\n    type: ItemTypes.FIELD,\n    item: { index, label, name },\n    index,\n    onMoveItem: onMoveField,\n    onEnd: () => setIsDraggingSibling(false),\n  });\n\n  React.useEffect(() => {\n    dragPreviewRef(getEmptyImage(), { captureDraggingState: false });\n  }, [dragPreviewRef]);\n\n  React.useEffect(() => {\n    if (isDragging) {\n      setIsDraggingSibling(true);\n    }\n  }, [isDragging, setIsDraggingSibling]);\n\n  // Effect in order to force a rerender after reordering the components\n  // Since we are removing the Accordion when doing the DnD  we are losing the dragRef, therefore the replaced element cannot be dragged\n  // anymore, this hack forces a rerender in order to apply the dragRef\n  React.useEffect(() => {\n    if (!isDraggingSibling) {\n      forceRerenderAfterDnd((prev) => !prev);\n    }\n  }, [isDraggingSibling]);\n\n  const composedRefs = useComposedRefs<HTMLButtonElement>(\n    dropRef,\n    objectRef as React.RefObject<HTMLButtonElement>\n  );\n\n  return (\n    <FieldWrapper ref={composedRefs}>\n      {isDragging && <CardDragPreview label={label} />}\n      {!isDragging && isDraggingSibling && <CardDragPreview isSibling label={label} />}\n\n      {!isDragging && !isDraggingSibling && (\n        <FieldContainer\n          borderColor=\"neutral150\"\n          background=\"neutral100\"\n          hasRadius\n          justifyContent=\"space-between\"\n          onClick={() => setIsModalOpen(true)}\n        >\n          <Flex gap={3}>\n            <DragButton\n              ref={dragRef}\n              aria-label={formatMessage(\n                {\n                  id: getTranslation('components.DraggableCard.move.field'),\n                  defaultMessage: 'Move {item}',\n                },\n                { item: label }\n              )}\n              onClick={(e) => e.stopPropagation()}\n              type=\"button\"\n            >\n              <Drag />\n            </DragButton>\n            <Typography fontWeight=\"bold\">{label}</Typography>\n          </Flex>\n          <Flex paddingLeft={3} onClick={(e) => e.stopPropagation()}>\n            <Modal.Root open={isModalOpen} onOpenChange={setIsModalOpen}>\n              <Modal.Trigger>\n                <ActionButton\n                  onClick={(e) => {\n                    e.stopPropagation();\n                  }}\n                  aria-label={formatMessage(\n                    {\n                      id: getTranslation('components.DraggableCard.edit.field'),\n                      defaultMessage: 'Edit {item}',\n                    },\n                    { item: label }\n                  )}\n                  type=\"button\"\n                >\n                  <Pencil width=\"1.2rem\" height=\"1.2rem\" />\n                </ActionButton>\n              </Modal.Trigger>\n              <EditFieldForm\n                attribute={attribute}\n                name={`layout.${index}`}\n                onClose={() => {\n                  setIsModalOpen(false);\n                }}\n              />\n            </Modal.Root>\n            <ActionButton\n              onClick={onRemoveField}\n              data-testid={`delete-${name}`}\n              aria-label={formatMessage(\n                {\n                  id: getTranslation('components.DraggableCard.delete.field'),\n                  defaultMessage: 'Delete {item}',\n                },\n                { item: label }\n              )}\n              type=\"button\"\n            >\n              <Cross width=\"1.2rem\" height=\"1.2rem\" />\n            </ActionButton>\n          </Flex>\n        </FieldContainer>\n      )}\n    </FieldWrapper>\n  );\n};\n\nconst ActionButton = styled.button`\n  display: flex;\n  align-items: center;\n  height: ${({ theme }) => theme.spaces[7]};\n  color: ${({ theme }) => theme.colors.neutral600};\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.neutral700};\n  }\n\n  &:last-child {\n    padding: 0 ${({ theme }) => theme.spaces[3]};\n  }\n`;\n\nconst DragButton = styled(ActionButton)`\n  padding: 0 ${({ theme }) => theme.spaces[3]};\n  border-inline-end: 1px solid ${({ theme }) => theme.colors.neutral150};\n  cursor: all-scroll;\n`;\n\nconst FieldContainer = styled<FlexComponent>(Flex)`\n  max-height: 3.2rem;\n  cursor: pointer;\n`;\n\nconst FieldWrapper = styled<BoxComponent>(Box)`\n  &:last-child {\n    padding-inline-end: ${({ theme }) => theme.spaces[3]};\n  }\n`;\n\nexport { DraggableCard };\nexport type { DraggableCardProps };\n"],"names":["DraggableCard","attribute","index","isDraggingSibling","label","name","onMoveField","onRemoveField","setIsDraggingSibling","isModalOpen","setIsModalOpen","React","useState","formatMessage","useIntl","forceRerenderAfterDnd","isDragging","objectRef","dropRef","dragRef","dragPreviewRef","useDragAndDrop","type","ItemTypes","FIELD","item","onMoveItem","onEnd","useEffect","getEmptyImage","captureDraggingState","prev","composedRefs","useComposedRefs","_jsxs","FieldWrapper","ref","_jsx","CardDragPreview","isSibling","FieldContainer","borderColor","background","hasRadius","justifyContent","onClick","Flex","gap","DragButton","aria-label","id","getTranslation","defaultMessage","e","stopPropagation","Drag","Typography","fontWeight","paddingLeft","Modal","Root","open","onOpenChange","Trigger","ActionButton","Pencil","width","height","EditFieldForm","onClose","data-testid","Cross","styled","button","theme","spaces","colors","neutral600","neutral700","neutral150","Box"],"mappings":"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"}

package/dist/admin/pages/ListConfiguration/components/DraggableCard.mjs

@@ -0,0 +1,180 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useComposedRefs, Flex, Typography, Modal, Box } from '@strapi/design-system';
+import { Drag, Pencil, Cross } from '@strapi/icons';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import { CardDragPreview } from '../../../components/DragPreviews/CardDragPreview.mjs';
+import { ItemTypes } from '../../../constants/dragAndDrop.mjs';
+import { useDragAndDrop } from '../../../hooks/useDragAndDrop.mjs';
+import { getTranslation } from '../../../utils/translations.mjs';
+import { EditFieldForm } from './EditFieldForm.mjs';
+
+const DraggableCard = ({ attribute, index, isDraggingSibling, label, name, onMoveField, onRemoveField, setIsDraggingSibling })=>{
+    const [isModalOpen, setIsModalOpen] = React.useState(false);
+    const { formatMessage } = useIntl();
+    const [, forceRerenderAfterDnd] = React.useState(false);
+    const [{ isDragging }, objectRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop(true, {
+        type: ItemTypes.FIELD,
+        item: {
+            index,
+            label,
+            name
+        },
+        index,
+        onMoveItem: onMoveField,
+        onEnd: ()=>setIsDraggingSibling(false)
+    });
+    React.useEffect(()=>{
+        dragPreviewRef(getEmptyImage(), {
+            captureDraggingState: false
+        });
+    }, [
+        dragPreviewRef
+    ]);
+    React.useEffect(()=>{
+        if (isDragging) {
+            setIsDraggingSibling(true);
+        }
+    }, [
+        isDragging,
+        setIsDraggingSibling
+    ]);
+    // Effect in order to force a rerender after reordering the components
+    // Since we are removing the Accordion when doing the DnD  we are losing the dragRef, therefore the replaced element cannot be dragged
+    // anymore, this hack forces a rerender in order to apply the dragRef
+    React.useEffect(()=>{
+        if (!isDraggingSibling) {
+            forceRerenderAfterDnd((prev)=>!prev);
+        }
+    }, [
+        isDraggingSibling
+    ]);
+    const composedRefs = useComposedRefs(dropRef, objectRef);
+    return /*#__PURE__*/ jsxs(FieldWrapper, {
+        ref: composedRefs,
+        children: [
+            isDragging && /*#__PURE__*/ jsx(CardDragPreview, {
+                label: label
+            }),
+            !isDragging && isDraggingSibling && /*#__PURE__*/ jsx(CardDragPreview, {
+                isSibling: true,
+                label: label
+            }),
+            !isDragging && !isDraggingSibling && /*#__PURE__*/ jsxs(FieldContainer, {
+                borderColor: "neutral150",
+                background: "neutral100",
+                hasRadius: true,
+                justifyContent: "space-between",
+                onClick: ()=>setIsModalOpen(true),
+                children: [
+                    /*#__PURE__*/ jsxs(Flex, {
+                        gap: 3,
+                        children: [
+                            /*#__PURE__*/ jsx(DragButton, {
+                                ref: dragRef,
+                                "aria-label": formatMessage({
+                                    id: getTranslation('components.DraggableCard.move.field'),
+                                    defaultMessage: 'Move {item}'
+                                }, {
+                                    item: label
+                                }),
+                                onClick: (e)=>e.stopPropagation(),
+                                type: "button",
+                                children: /*#__PURE__*/ jsx(Drag, {})
+                            }),
+                            /*#__PURE__*/ jsx(Typography, {
+                                fontWeight: "bold",
+                                children: label
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(Flex, {
+                        paddingLeft: 3,
+                        onClick: (e)=>e.stopPropagation(),
+                        children: [
+                            /*#__PURE__*/ jsxs(Modal.Root, {
+                                open: isModalOpen,
+                                onOpenChange: setIsModalOpen,
+                                children: [
+                                    /*#__PURE__*/ jsx(Modal.Trigger, {
+                                        children: /*#__PURE__*/ jsx(ActionButton, {
+                                            onClick: (e)=>{
+                                                e.stopPropagation();
+                                            },
+                                            "aria-label": formatMessage({
+                                                id: getTranslation('components.DraggableCard.edit.field'),
+                                                defaultMessage: 'Edit {item}'
+                                            }, {
+                                                item: label
+                                            }),
+                                            type: "button",
+                                            children: /*#__PURE__*/ jsx(Pencil, {
+                                                width: "1.2rem",
+                                                height: "1.2rem"
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx(EditFieldForm, {
+                                        attribute: attribute,
+                                        name: `layout.${index}`,
+                                        onClose: ()=>{
+                                            setIsModalOpen(false);
+                                        }
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(ActionButton, {
+                                onClick: onRemoveField,
+                                "data-testid": `delete-${name}`,
+                                "aria-label": formatMessage({
+                                    id: getTranslation('components.DraggableCard.delete.field'),
+                                    defaultMessage: 'Delete {item}'
+                                }, {
+                                    item: label
+                                }),
+                                type: "button",
+                                children: /*#__PURE__*/ jsx(Cross, {
+                                    width: "1.2rem",
+                                    height: "1.2rem"
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+const ActionButton = styled.button`
+  display: flex;
+  align-items: center;
+  height: ${({ theme })=>theme.spaces[7]};
+  color: ${({ theme })=>theme.colors.neutral600};
+
+  &:hover {
+    color: ${({ theme })=>theme.colors.neutral700};
+  }
+
+  &:last-child {
+    padding: 0 ${({ theme })=>theme.spaces[3]};
+  }
+`;
+const DragButton = styled(ActionButton)`
+  padding: 0 ${({ theme })=>theme.spaces[3]};
+  border-inline-end: 1px solid ${({ theme })=>theme.colors.neutral150};
+  cursor: all-scroll;
+`;
+const FieldContainer = styled(Flex)`
+  max-height: 3.2rem;
+  cursor: pointer;
+`;
+const FieldWrapper = styled(Box)`
+  &:last-child {
+    padding-inline-end: ${({ theme })=>theme.spaces[3]};
+  }
+`;
+
+export { DraggableCard };
+//# sourceMappingURL=DraggableCard.mjs.map

package/dist/admin/pages/ListConfiguration/components/DraggableCard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraggableCard.mjs","sources":["../../../../../admin/src/pages/ListConfiguration/components/DraggableCard.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Box,\n  BoxComponent,\n  Flex,\n  FlexComponent,\n  Modal,\n  Typography,\n  useComposedRefs,\n} from '@strapi/design-system';\nimport { Cross, Drag, Pencil } from '@strapi/icons';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { CardDragPreview } from '../../../components/DragPreviews/CardDragPreview';\nimport { ItemTypes } from '../../../constants/dragAndDrop';\nimport { useDragAndDrop } from '../../../hooks/useDragAndDrop';\nimport { getTranslation } from '../../../utils/translations';\n\nimport { EditFieldForm } from './EditFieldForm';\n\nimport type { ListFieldLayout } from '../../../hooks/useDocumentLayout';\n\ntype DraggableCardProps = Omit<ListFieldLayout, 'label'> & {\n  label: string;\n  index: number;\n  isDraggingSibling: boolean;\n  onMoveField: (dragIndex: number, hoverIndex: number) => void;\n  onRemoveField: () => void;\n  setIsDraggingSibling: (isDragging: boolean) => void;\n};\n\nconst DraggableCard = ({\n  attribute,\n  index,\n  isDraggingSibling,\n  label,\n  name,\n  onMoveField,\n  onRemoveField,\n  setIsDraggingSibling,\n}: DraggableCardProps) => {\n  const [isModalOpen, setIsModalOpen] = React.useState(false);\n  const { formatMessage } = useIntl();\n  const [, forceRerenderAfterDnd] = React.useState(false);\n\n  const [{ isDragging }, objectRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop(true, {\n    type: ItemTypes.FIELD,\n    item: { index, label, name },\n    index,\n    onMoveItem: onMoveField,\n    onEnd: () => setIsDraggingSibling(false),\n  });\n\n  React.useEffect(() => {\n    dragPreviewRef(getEmptyImage(), { captureDraggingState: false });\n  }, [dragPreviewRef]);\n\n  React.useEffect(() => {\n    if (isDragging) {\n      setIsDraggingSibling(true);\n    }\n  }, [isDragging, setIsDraggingSibling]);\n\n  // Effect in order to force a rerender after reordering the components\n  // Since we are removing the Accordion when doing the DnD  we are losing the dragRef, therefore the replaced element cannot be dragged\n  // anymore, this hack forces a rerender in order to apply the dragRef\n  React.useEffect(() => {\n    if (!isDraggingSibling) {\n      forceRerenderAfterDnd((prev) => !prev);\n    }\n  }, [isDraggingSibling]);\n\n  const composedRefs = useComposedRefs<HTMLButtonElement>(\n    dropRef,\n    objectRef as React.RefObject<HTMLButtonElement>\n  );\n\n  return (\n    <FieldWrapper ref={composedRefs}>\n      {isDragging && <CardDragPreview label={label} />}\n      {!isDragging && isDraggingSibling && <CardDragPreview isSibling label={label} />}\n\n      {!isDragging && !isDraggingSibling && (\n        <FieldContainer\n          borderColor=\"neutral150\"\n          background=\"neutral100\"\n          hasRadius\n          justifyContent=\"space-between\"\n          onClick={() => setIsModalOpen(true)}\n        >\n          <Flex gap={3}>\n            <DragButton\n              ref={dragRef}\n              aria-label={formatMessage(\n                {\n                  id: getTranslation('components.DraggableCard.move.field'),\n                  defaultMessage: 'Move {item}',\n                },\n                { item: label }\n              )}\n              onClick={(e) => e.stopPropagation()}\n              type=\"button\"\n            >\n              <Drag />\n            </DragButton>\n            <Typography fontWeight=\"bold\">{label}</Typography>\n          </Flex>\n          <Flex paddingLeft={3} onClick={(e) => e.stopPropagation()}>\n            <Modal.Root open={isModalOpen} onOpenChange={setIsModalOpen}>\n              <Modal.Trigger>\n                <ActionButton\n                  onClick={(e) => {\n                    e.stopPropagation();\n                  }}\n                  aria-label={formatMessage(\n                    {\n                      id: getTranslation('components.DraggableCard.edit.field'),\n                      defaultMessage: 'Edit {item}',\n                    },\n                    { item: label }\n                  )}\n                  type=\"button\"\n                >\n                  <Pencil width=\"1.2rem\" height=\"1.2rem\" />\n                </ActionButton>\n              </Modal.Trigger>\n              <EditFieldForm\n                attribute={attribute}\n                name={`layout.${index}`}\n                onClose={() => {\n                  setIsModalOpen(false);\n                }}\n              />\n            </Modal.Root>\n            <ActionButton\n              onClick={onRemoveField}\n              data-testid={`delete-${name}`}\n              aria-label={formatMessage(\n                {\n                  id: getTranslation('components.DraggableCard.delete.field'),\n                  defaultMessage: 'Delete {item}',\n                },\n                { item: label }\n              )}\n              type=\"button\"\n            >\n              <Cross width=\"1.2rem\" height=\"1.2rem\" />\n            </ActionButton>\n          </Flex>\n        </FieldContainer>\n      )}\n    </FieldWrapper>\n  );\n};\n\nconst ActionButton = styled.button`\n  display: flex;\n  align-items: center;\n  height: ${({ theme }) => theme.spaces[7]};\n  color: ${({ theme }) => theme.colors.neutral600};\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.neutral700};\n  }\n\n  &:last-child {\n    padding: 0 ${({ theme }) => theme.spaces[3]};\n  }\n`;\n\nconst DragButton = styled(ActionButton)`\n  padding: 0 ${({ theme }) => theme.spaces[3]};\n  border-inline-end: 1px solid ${({ theme }) => theme.colors.neutral150};\n  cursor: all-scroll;\n`;\n\nconst FieldContainer = styled<FlexComponent>(Flex)`\n  max-height: 3.2rem;\n  cursor: pointer;\n`;\n\nconst FieldWrapper = styled<BoxComponent>(Box)`\n  &:last-child {\n    padding-inline-end: ${({ theme }) => theme.spaces[3]};\n  }\n`;\n\nexport { DraggableCard };\nexport type { DraggableCardProps };\n"],"names":["DraggableCard","attribute","index","isDraggingSibling","label","name","onMoveField","onRemoveField","setIsDraggingSibling","isModalOpen","setIsModalOpen","React","useState","formatMessage","useIntl","forceRerenderAfterDnd","isDragging","objectRef","dropRef","dragRef","dragPreviewRef","useDragAndDrop","type","ItemTypes","FIELD","item","onMoveItem","onEnd","useEffect","getEmptyImage","captureDraggingState","prev","composedRefs","useComposedRefs","_jsxs","FieldWrapper","ref","_jsx","CardDragPreview","isSibling","FieldContainer","borderColor","background","hasRadius","justifyContent","onClick","Flex","gap","DragButton","aria-label","id","getTranslation","defaultMessage","e","stopPropagation","Drag","Typography","fontWeight","paddingLeft","Modal","Root","open","onOpenChange","Trigger","ActionButton","Pencil","width","height","EditFieldForm","onClose","data-testid","Cross","styled","button","theme","spaces","colors","neutral600","neutral700","neutral150","Box"],"mappings":"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"}