@strapi/content-manager 0.0.0-next.c9f32f6f0c2be1b88323373117f12eb33219d20e → 0.0.0-next.cb374d6b06692607bcfbd4d5131bafd4c990aa29

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

@@ -0,0 +1,150 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useForm } from '@strapi/admin/strapi-admin';
+import { Flex, Typography, Box, Menu, VisuallyHidden } from '@strapi/design-system';
+import { Plus } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { useDoc } from '../../../hooks/useDocument.mjs';
+import { useGetContentTypeConfigurationQuery } from '../../../services/contentTypes.mjs';
+import { checkIfAttributeIsDisplayable } from '../../../utils/attributes.mjs';
+import { getTranslation } from '../../../utils/translations.mjs';
+import { DraggableCard } from './DraggableCard.mjs';
+
+const SortDisplayedFields = ()=>{
+    const { formatMessage } = useIntl();
+    const { model, schema } = useDoc();
+    const [isDraggingSibling, setIsDraggingSibling] = React.useState(false);
+    const [lastAction, setLastAction] = React.useState(null);
+    const scrollableContainerRef = React.useRef(null);
+    const values = useForm('SortDisplayedFields', (state)=>state.values.layout ?? []);
+    const addFieldRow = useForm('SortDisplayedFields', (state)=>state.addFieldRow);
+    const removeFieldRow = useForm('SortDisplayedFields', (state)=>state.removeFieldRow);
+    const moveFieldRow = useForm('SortDisplayedFields', (state)=>state.moveFieldRow);
+    const { metadata: allMetadata } = useGetContentTypeConfigurationQuery(model, {
+        selectFromResult: ({ data })=>({
+                metadata: data?.contentType.metadatas ?? {}
+            })
+    });
+    /**
+   * This is our list of fields that are not displayed in the current layout
+   * so we create their default state to be added to the layout.
+   */ const nonDisplayedFields = React.useMemo(()=>{
+        if (!schema) {
+            return [];
+        }
+        const displayedFieldNames = values.map((field)=>field.name);
+        return Object.entries(schema.attributes).reduce((acc, [name, attribute])=>{
+            if (!displayedFieldNames.includes(name) && checkIfAttributeIsDisplayable(attribute)) {
+                const { list: metadata } = allMetadata[name];
+                acc.push({
+                    name,
+                    label: metadata.label || name,
+                    sortable: metadata.sortable
+                });
+            }
+            return acc;
+        }, []);
+    }, [
+        allMetadata,
+        values,
+        schema
+    ]);
+    const handleAddField = (field)=>{
+        setLastAction('add');
+        addFieldRow('layout', field);
+    };
+    const handleRemoveField = (index)=>{
+        setLastAction('remove');
+        removeFieldRow('layout', index);
+    };
+    const handleMoveField = (dragIndex, hoverIndex)=>{
+        moveFieldRow('layout', dragIndex, hoverIndex);
+    };
+    React.useEffect(()=>{
+        if (lastAction === 'add' && scrollableContainerRef?.current) {
+            scrollableContainerRef.current.scrollLeft = scrollableContainerRef.current.scrollWidth;
+        }
+    }, [
+        lastAction
+    ]);
+    return /*#__PURE__*/ jsxs(Flex, {
+        alignItems: "stretch",
+        direction: "column",
+        gap: 4,
+        children: [
+            /*#__PURE__*/ jsx(Typography, {
+                variant: "delta",
+                tag: "h2",
+                children: formatMessage({
+                    id: getTranslation('containers.SettingPage.view'),
+                    defaultMessage: 'View'
+                })
+            }),
+            /*#__PURE__*/ jsxs(Flex, {
+                padding: 4,
+                borderColor: "neutral300",
+                borderStyle: "dashed",
+                borderWidth: "1px",
+                hasRadius: true,
+                children: [
+                    /*#__PURE__*/ jsx(Box, {
+                        flex: "1",
+                        overflow: "auto hidden",
+                        ref: scrollableContainerRef,
+                        children: /*#__PURE__*/ jsx(Flex, {
+                            gap: 3,
+                            children: values.map((field, index)=>/*#__PURE__*/ jsx(DraggableCard, {
+                                    index: index,
+                                    isDraggingSibling: isDraggingSibling,
+                                    onMoveField: handleMoveField,
+                                    onRemoveField: ()=>handleRemoveField(index),
+                                    setIsDraggingSibling: setIsDraggingSibling,
+                                    ...field,
+                                    attribute: schema.attributes[field.name],
+                                    label: typeof field.label === 'object' ? formatMessage(field.label) : field.label
+                                }, field.name))
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs(Menu.Root, {
+                        children: [
+                            /*#__PURE__*/ jsxs(Menu.Trigger, {
+                                paddingLeft: 2,
+                                paddingRight: 2,
+                                justifyContent: "center",
+                                endIcon: null,
+                                disabled: nonDisplayedFields.length === 0,
+                                variant: "tertiary",
+                                children: [
+                                    /*#__PURE__*/ jsx(VisuallyHidden, {
+                                        tag: "span",
+                                        children: formatMessage({
+                                            id: getTranslation('components.FieldSelect.label'),
+                                            defaultMessage: 'Add a field'
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx(Plus, {
+                                        "aria-hidden": true,
+                                        focusable: false,
+                                        style: {
+                                            position: 'relative',
+                                            top: 2
+                                        }
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(Menu.Content, {
+                                children: nonDisplayedFields.map((field)=>/*#__PURE__*/ jsx(Menu.Item, {
+                                        onSelect: ()=>handleAddField(field),
+                                        children: typeof field.label === 'object' ? formatMessage(field.label) : field.label
+                                    }, field.name))
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+export { SortDisplayedFields };
+//# sourceMappingURL=SortDisplayedFields.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SortDisplayedFields.mjs","sources":["../../../../../admin/src/pages/ListConfiguration/components/SortDisplayedFields.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useForm } from '@strapi/admin/strapi-admin';\nimport { Box, Flex, VisuallyHidden, Typography, Menu } from '@strapi/design-system';\nimport { Plus } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { useDoc } from '../../../hooks/useDocument';\nimport { useGetContentTypeConfigurationQuery } from '../../../services/contentTypes';\nimport { checkIfAttributeIsDisplayable } from '../../../utils/attributes';\nimport { getTranslation } from '../../../utils/translations';\n\nimport { DraggableCard, DraggableCardProps } from './DraggableCard';\n\nimport type { ListLayout } from '../../../hooks/useDocumentLayout';\nimport type { FormData } from '../ListConfigurationPage';\n\ninterface SortDisplayedFieldsProps extends Pick<ListLayout, 'layout'> {}\n\nconst SortDisplayedFields = () => {\n  const { formatMessage } = useIntl();\n  const { model, schema } = useDoc();\n  const [isDraggingSibling, setIsDraggingSibling] = React.useState(false);\n  const [lastAction, setLastAction] = React.useState<string | null>(null);\n  const scrollableContainerRef = React.useRef<HTMLDivElement>(null);\n\n  const values = useForm<FormData['layout']>(\n    'SortDisplayedFields',\n    (state) => state.values.layout ?? []\n  );\n  const addFieldRow = useForm('SortDisplayedFields', (state) => state.addFieldRow);\n  const removeFieldRow = useForm('SortDisplayedFields', (state) => state.removeFieldRow);\n  const moveFieldRow = useForm('SortDisplayedFields', (state) => state.moveFieldRow);\n\n  const { metadata: allMetadata } = useGetContentTypeConfigurationQuery(model, {\n    selectFromResult: ({ data }) => ({ metadata: data?.contentType.metadatas ?? {} }),\n  });\n\n  /**\n   * This is our list of fields that are not displayed in the current layout\n   * so we create their default state to be added to the layout.\n   */\n  const nonDisplayedFields = React.useMemo(() => {\n    if (!schema) {\n      return [];\n    }\n\n    const displayedFieldNames = values.map((field) => field.name);\n\n    return Object.entries(schema.attributes).reduce<Array<FormData['layout'][number]>>(\n      (acc, [name, attribute]) => {\n        if (!displayedFieldNames.includes(name) && checkIfAttributeIsDisplayable(attribute)) {\n          const { list: metadata } = allMetadata[name];\n\n          acc.push({\n            name,\n            label: metadata.label || name,\n            sortable: metadata.sortable,\n          });\n        }\n\n        return acc;\n      },\n      []\n    );\n  }, [allMetadata, values, schema]);\n\n  const handleAddField = (field: FormData['layout'][number]) => {\n    setLastAction('add');\n    addFieldRow('layout', field);\n  };\n\n  const handleRemoveField = (index: number) => {\n    setLastAction('remove');\n    removeFieldRow('layout', index);\n  };\n\n  const handleMoveField: DraggableCardProps['onMoveField'] = (dragIndex, hoverIndex) => {\n    moveFieldRow('layout', dragIndex, hoverIndex);\n  };\n\n  React.useEffect(() => {\n    if (lastAction === 'add' && scrollableContainerRef?.current) {\n      scrollableContainerRef.current.scrollLeft = scrollableContainerRef.current.scrollWidth;\n    }\n  }, [lastAction]);\n\n  return (\n    <Flex alignItems=\"stretch\" direction=\"column\" gap={4}>\n      <Typography variant=\"delta\" tag=\"h2\">\n        {formatMessage({\n          id: getTranslation('containers.SettingPage.view'),\n          defaultMessage: 'View',\n        })}\n      </Typography>\n\n      <Flex padding={4} borderColor=\"neutral300\" borderStyle=\"dashed\" borderWidth=\"1px\" hasRadius>\n        <Box flex=\"1\" overflow=\"auto hidden\" ref={scrollableContainerRef}>\n          <Flex gap={3}>\n            {values.map((field, index) => (\n              <DraggableCard\n                key={field.name}\n                index={index}\n                isDraggingSibling={isDraggingSibling}\n                onMoveField={handleMoveField}\n                onRemoveField={() => handleRemoveField(index)}\n                setIsDraggingSibling={setIsDraggingSibling}\n                {...field}\n                attribute={schema!.attributes[field.name]}\n                label={typeof field.label === 'object' ? formatMessage(field.label) : field.label}\n              />\n            ))}\n          </Flex>\n        </Box>\n\n        <Menu.Root>\n          <Menu.Trigger\n            paddingLeft={2}\n            paddingRight={2}\n            justifyContent=\"center\"\n            endIcon={null}\n            disabled={nonDisplayedFields.length === 0}\n            variant=\"tertiary\"\n          >\n            <VisuallyHidden tag=\"span\">\n              {formatMessage({\n                id: getTranslation('components.FieldSelect.label'),\n                defaultMessage: 'Add a field',\n              })}\n            </VisuallyHidden>\n            <Plus aria-hidden focusable={false} style={{ position: 'relative', top: 2 }} />\n          </Menu.Trigger>\n          <Menu.Content>\n            {nonDisplayedFields.map((field) => (\n              <Menu.Item key={field.name} onSelect={() => handleAddField(field)}>\n                {typeof field.label === 'object' ? formatMessage(field.label) : field.label}\n              </Menu.Item>\n            ))}\n          </Menu.Content>\n        </Menu.Root>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport { SortDisplayedFields };\nexport type { SortDisplayedFieldsProps };\n"],"names":["SortDisplayedFields","formatMessage","useIntl","model","schema","useDoc","isDraggingSibling","setIsDraggingSibling","React","useState","lastAction","setLastAction","scrollableContainerRef","useRef","values","useForm","state","layout","addFieldRow","removeFieldRow","moveFieldRow","metadata","allMetadata","useGetContentTypeConfigurationQuery","selectFromResult","data","contentType","metadatas","nonDisplayedFields","useMemo","displayedFieldNames","map","field","name","Object","entries","attributes","reduce","acc","attribute","includes","checkIfAttributeIsDisplayable","list","push","label","sortable","handleAddField","handleRemoveField","index","handleMoveField","dragIndex","hoverIndex","useEffect","current","scrollLeft","scrollWidth","_jsxs","Flex","alignItems","direction","gap","_jsx","Typography","variant","tag","id","getTranslation","defaultMessage","padding","borderColor","borderStyle","borderWidth","hasRadius","Box","flex","overflow","ref","DraggableCard","onMoveField","onRemoveField","Menu","Root","Trigger","paddingLeft","paddingRight","justifyContent","endIcon","disabled","length","VisuallyHidden","Plus","aria-hidden","focusable","style","position","top","Content","Item","onSelect"],"mappings":"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"}