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

package/dist/admin/pages/ListView/components/TableCells/Media.mjs

@@ -0,0 +1,76 @@
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import { Avatar, Tooltip, Flex, Typography } from '@strapi/design-system';
+import { styled } from 'styled-components';
+import { prefixFileUrlWithBackendUrl } from '../../../../utils/urls.mjs';
+
+const getFileExtension = (ext)=>ext && ext[0] === '.' ? ext.substring(1) : ext;
+const MediaSingle = ({ url, mime, alternativeText, name, ext, formats })=>{
+    const fileURL = prefixFileUrlWithBackendUrl(url);
+    if (mime?.includes('image')) {
+        const thumbnail = formats?.thumbnail?.url;
+        const mediaURL = prefixFileUrlWithBackendUrl(thumbnail) || fileURL;
+        const mediaLabel = alternativeText || name || undefined;
+        return /*#__PURE__*/ jsx(Avatar.Item, {
+            src: mediaURL,
+            alt: mediaLabel,
+            fallback: mediaLabel,
+            preview: true
+        });
+    }
+    const fileExtension = getFileExtension(ext);
+    const fileName = name && name.length > 100 ? `${name.substring(0, 100)}...` : name;
+    return /*#__PURE__*/ jsx(Tooltip, {
+        label: fileName,
+        children: /*#__PURE__*/ jsx("span", {
+            children: /*#__PURE__*/ jsx(FileWrapper, {
+                children: fileExtension
+            })
+        })
+    });
+};
+const FileWrapper = ({ children })=>{
+    return /*#__PURE__*/ jsx(Flex, {
+        tag: "span",
+        position: "relative",
+        borderRadius: "50%",
+        width: "26px",
+        height: "26px",
+        borderColor: "neutral200",
+        background: "neutral150",
+        paddingLeft: "1px",
+        justifyContent: "center",
+        alignItems: "center",
+        children: /*#__PURE__*/ jsx(FileTypography, {
+            variant: "sigma",
+            textColor: "neutral600",
+            children: children
+        })
+    });
+};
+const FileTypography = styled(Typography)`
+  font-size: 0.9rem;
+  line-height: 0.9rem;
+`;
+const MediaMultiple = ({ content })=>{
+    return /*#__PURE__*/ jsx(Avatar.Group, {
+        children: content.map((file, index)=>{
+            const key = `${file.id}${index}`;
+            if (index === 3) {
+                const remainingFiles = `+${content.length - 3}`;
+                return /*#__PURE__*/ jsx(FileWrapper, {
+                    children: remainingFiles
+                }, key);
+            }
+            if (index > 3) {
+                return null;
+            }
+            return /*#__PURE__*/ jsx(MediaSingle, {
+                ...file
+            }, key);
+        })
+    });
+};
+
+export { MediaMultiple, MediaSingle };
+//# sourceMappingURL=Media.mjs.map

package/dist/admin/pages/ListView/components/TableCells/Media.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Media.mjs","sources":["../../../../../../admin/src/pages/ListView/components/TableCells/Media.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nimport { Avatar, Flex, Tooltip, Typography, TypographyComponent } from '@strapi/design-system';\r\nimport { styled } from 'styled-components';\r\n\r\nimport { prefixFileUrlWithBackendUrl } from '../../../../utils/urls';\r\n\r\nimport type { Data } from '@strapi/types';\r\n\r\ninterface MediaFile {\r\n  id?: Data.ID;\r\n  alternativeText?: string;\r\n  ext: string;\r\n  formats: {\r\n    thumbnail?: {\r\n      url?: string;\r\n    };\r\n  };\r\n  mime?: string | null;\r\n  name?: string | null;\r\n  url: string;\r\n}\r\n\r\n/* -------------------------------------------------------------------------------------------------\r\n * Media\r\n * -----------------------------------------------------------------------------------------------*/\r\n\r\ninterface MediaSingleProps extends MediaFile {}\r\n\r\nconst getFileExtension = (ext: string) => (ext && ext[0] === '.' ? ext.substring(1) : ext);\r\n\r\nconst MediaSingle = ({ url, mime, alternativeText, name, ext, formats }: MediaSingleProps) => {\r\n  const fileURL = prefixFileUrlWithBackendUrl(url)!;\r\n\r\n  if (mime?.includes('image')) {\r\n    const thumbnail = formats?.thumbnail?.url;\r\n    const mediaURL = prefixFileUrlWithBackendUrl(thumbnail) || fileURL;\r\n    const mediaLabel = alternativeText || name || undefined;\r\n\r\n    return <Avatar.Item src={mediaURL} alt={mediaLabel} fallback={mediaLabel} preview />;\r\n  }\r\n\r\n  const fileExtension = getFileExtension(ext);\r\n  const fileName = name && name.length > 100 ? `${name.substring(0, 100)}...` : name;\r\n\r\n  return (\r\n    <Tooltip label={fileName}>\r\n      <span>\r\n        <FileWrapper>{fileExtension}</FileWrapper>\r\n      </span>\r\n    </Tooltip>\r\n  );\r\n};\r\n\r\nconst FileWrapper = ({ children }: { children: React.ReactNode }) => {\r\n  return (\r\n    <Flex\r\n      tag=\"span\"\r\n      position=\"relative\"\r\n      borderRadius=\"50%\"\r\n      width=\"26px\"\r\n      height=\"26px\"\r\n      borderColor=\"neutral200\"\r\n      background=\"neutral150\"\r\n      paddingLeft=\"1px\"\r\n      justifyContent=\"center\"\r\n      alignItems=\"center\"\r\n    >\r\n      <FileTypography variant=\"sigma\" textColor=\"neutral600\">\r\n        {children}\r\n      </FileTypography>\r\n    </Flex>\r\n  );\r\n};\r\n\r\nconst FileTypography = styled<TypographyComponent>(Typography)`\r\n  font-size: 0.9rem;\r\n  line-height: 0.9rem;\r\n`;\r\n\r\n/* -------------------------------------------------------------------------------------------------\r\n * MediaMultiple\r\n * -----------------------------------------------------------------------------------------------*/\r\n\r\ninterface MediaMultipleProps {\r\n  content: MediaFile[];\r\n}\r\n\r\nconst MediaMultiple = ({ content }: MediaMultipleProps) => {\r\n  return (\r\n    <Avatar.Group>\r\n      {content.map((file, index) => {\r\n        const key = `${file.id}${index}`;\r\n\r\n        if (index === 3) {\r\n          const remainingFiles = `+${content.length - 3}`;\r\n\r\n          return <FileWrapper key={key}>{remainingFiles}</FileWrapper>;\r\n        }\r\n\r\n        if (index > 3) {\r\n          return null;\r\n        }\r\n\r\n        return <MediaSingle key={key} {...file} />;\r\n      })}\r\n    </Avatar.Group>\r\n  );\r\n};\r\n\r\nexport { MediaMultiple, MediaSingle };\r\nexport type { MediaMultipleProps, MediaSingleProps };\r\n"],"names":["getFileExtension","ext","substring","MediaSingle","url","mime","alternativeText","name","formats","fileURL","prefixFileUrlWithBackendUrl","includes","thumbnail","mediaURL","mediaLabel","undefined","_jsx","Avatar","Item","src","alt","fallback","preview","fileExtension","fileName","length","Tooltip","label","span","FileWrapper","children","Flex","tag","position","borderRadius","width","height","borderColor","background","paddingLeft","justifyContent","alignItems","FileTypography","variant","textColor","styled","Typography","MediaMultiple","content","Group","map","file","index","key","id","remainingFiles"],"mappings":"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"}

package/dist/admin/pages/ListView/components/TableCells/Relations.js

@@ -0,0 +1,133 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
+var useDocument = require('../../../../hooks/useDocument.js');
+var relations$1 = require('../../../../services/relations.js');
+var relations = require('../../../../utils/relations.js');
+var translations = require('../../../../utils/translations.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 RelationSingle = ({ mainField, content })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+        maxWidth: "50rem",
+        textColor: "neutral800",
+        ellipsis: true,
+        children: relations.getRelationLabel(content, mainField)
+    });
+};
+const RelationMultiple = ({ mainField, content, rowId, name })=>{
+    const { model } = useDocument.useDoc();
+    const { formatMessage } = reactIntl.useIntl();
+    const { notifyStatus } = designSystem.useNotifyAT();
+    const [isOpen, setIsOpen] = React__namespace.useState(false);
+    const [{ query }] = strapiAdmin.useQueryParams();
+    const locale = query.plugins?.i18n?.locale;
+    const [targetField] = name.split('.');
+    const { data, isLoading } = relations$1.useGetRelationsQuery({
+        model,
+        id: rowId,
+        targetField,
+        params: {
+            locale
+        }
+    }, {
+        skip: !isOpen,
+        refetchOnMountOrArgChange: true
+    });
+    const contentCount = Array.isArray(content) ? content.length : content.count;
+    React__namespace.useEffect(()=>{
+        if (data) {
+            notifyStatus(formatMessage({
+                id: translations.getTranslation('ListViewTable.relation-loaded'),
+                defaultMessage: 'Relations have been loaded'
+            }));
+        }
+    }, [
+        data,
+        formatMessage,
+        notifyStatus
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Menu.Root, {
+        onOpenChange: (isOpen)=>setIsOpen(isOpen),
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Trigger, {
+                onClick: (e)=>e.stopPropagation(),
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                    style: {
+                        cursor: 'pointer'
+                    },
+                    textColor: "neutral800",
+                    fontWeight: "regular",
+                    children: contentCount > 0 ? formatMessage({
+                        id: 'content-manager.containers.list.items',
+                        defaultMessage: '{number} {number, plural, =0 {items} one {item} other {items}}'
+                    }, {
+                        number: contentCount
+                    }) : '-'
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Menu.Content, {
+                children: [
+                    isLoading && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                        disabled: true,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Loader, {
+                            small: true,
+                            children: formatMessage({
+                                id: translations.getTranslation('ListViewTable.relation-loading'),
+                                defaultMessage: 'Relations are loading'
+                            })
+                        })
+                    }),
+                    data?.results && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                        children: [
+                            data.results.map((entry)=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                        maxWidth: "50rem",
+                                        ellipsis: true,
+                                        children: relations.getRelationLabel(entry, mainField)
+                                    })
+                                }, entry.documentId)),
+                            data?.pagination && data?.pagination.total > 10 && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                                "aria-disabled": true,
+                                "aria-label": formatMessage({
+                                    id: translations.getTranslation('ListViewTable.relation-more'),
+                                    defaultMessage: 'This relation contains more entities than displayed'
+                                }),
+                                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                    children: "…"
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+exports.RelationMultiple = RelationMultiple;
+exports.RelationSingle = RelationSingle;
+//# sourceMappingURL=Relations.js.map

package/dist/admin/pages/ListView/components/TableCells/Relations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Relations.js","sources":["../../../../../../admin/src/pages/ListView/components/TableCells/Relations.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nimport { useQueryParams } from '@strapi/admin/strapi-admin';\r\nimport { Typography, Loader, useNotifyAT, Menu } from '@strapi/design-system';\r\nimport { useIntl } from 'react-intl';\r\n\r\nimport { useDoc } from '../../../../hooks/useDocument';\r\nimport { useGetRelationsQuery } from '../../../../services/relations';\r\nimport { getRelationLabel } from '../../../../utils/relations';\r\nimport { getTranslation } from '../../../../utils/translations';\r\n\r\nimport type { CellContentProps } from './CellContent';\r\n\r\n/* -------------------------------------------------------------------------------------------------\r\n * RelationSingle\r\n * -----------------------------------------------------------------------------------------------*/\r\n\r\ninterface RelationSingleProps extends Pick<CellContentProps, 'mainField' | 'content'> {}\r\n\r\nconst RelationSingle = ({ mainField, content }: RelationSingleProps) => {\r\n  return (\r\n    <Typography maxWidth=\"50rem\" textColor=\"neutral800\" ellipsis>\r\n      {getRelationLabel(content, mainField)}\r\n    </Typography>\r\n  );\r\n};\r\n\r\n/* -------------------------------------------------------------------------------------------------\r\n * RelationMultiple\r\n * -----------------------------------------------------------------------------------------------*/\r\n\r\ninterface RelationMultipleProps\r\n  extends Pick<CellContentProps, 'mainField' | 'content' | 'name' | 'rowId'> {}\r\n\r\nconst RelationMultiple = ({ mainField, content, rowId, name }: RelationMultipleProps) => {\r\n  const { model } = useDoc();\r\n  const { formatMessage } = useIntl();\r\n  const { notifyStatus } = useNotifyAT();\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n  const [{ query }] = useQueryParams<{ plugins?: { i18n?: { locale?: string } } }>();\r\n  const locale = query.plugins?.i18n?.locale;\r\n\r\n  const [targetField] = name.split('.');\r\n\r\n  const { data, isLoading } = useGetRelationsQuery(\r\n    {\r\n      model,\r\n      id: rowId,\r\n      targetField,\r\n      params: { locale },\r\n    },\r\n    {\r\n      skip: !isOpen,\r\n      refetchOnMountOrArgChange: true,\r\n    }\r\n  );\r\n\r\n  const contentCount = Array.isArray(content) ? content.length : content.count;\r\n\r\n  React.useEffect(() => {\r\n    if (data) {\r\n      notifyStatus(\r\n        formatMessage({\r\n          id: getTranslation('ListViewTable.relation-loaded'),\r\n          defaultMessage: 'Relations have been loaded',\r\n        })\r\n      );\r\n    }\r\n  }, [data, formatMessage, notifyStatus]);\r\n\r\n  return (\r\n    <Menu.Root onOpenChange={(isOpen) => setIsOpen(isOpen)}>\r\n      <Menu.Trigger onClick={(e) => e.stopPropagation()}>\r\n        <Typography style={{ cursor: 'pointer' }} textColor=\"neutral800\" fontWeight=\"regular\">\r\n          {contentCount > 0\r\n            ? formatMessage(\r\n                {\r\n                  id: 'content-manager.containers.list.items',\r\n                  defaultMessage: '{number} {number, plural, =0 {items} one {item} other {items}}',\r\n                },\r\n                { number: contentCount }\r\n              )\r\n            : '-'}\r\n        </Typography>\r\n      </Menu.Trigger>\r\n      <Menu.Content>\r\n        {isLoading && (\r\n          <Menu.Item disabled>\r\n            <Loader small>\r\n              {formatMessage({\r\n                id: getTranslation('ListViewTable.relation-loading'),\r\n                defaultMessage: 'Relations are loading',\r\n              })}\r\n            </Loader>\r\n          </Menu.Item>\r\n        )}\r\n        {data?.results && (\r\n          <>\r\n            {data.results.map((entry) => (\r\n              <Menu.Item key={entry.documentId}>\r\n                <Typography maxWidth=\"50rem\" ellipsis>\r\n                  {getRelationLabel(entry, mainField)}\r\n                </Typography>\r\n              </Menu.Item>\r\n            ))}\r\n\r\n            {data?.pagination && data?.pagination.total > 10 && (\r\n              <Menu.Item\r\n                aria-disabled\r\n                aria-label={formatMessage({\r\n                  id: getTranslation('ListViewTable.relation-more'),\r\n                  defaultMessage: 'This relation contains more entities than displayed',\r\n                })}\r\n              >\r\n                <Typography>…</Typography>\r\n              </Menu.Item>\r\n            )}\r\n          </>\r\n        )}\r\n      </Menu.Content>\r\n    </Menu.Root>\r\n  );\r\n};\r\n\r\nexport { RelationSingle, RelationMultiple };\r\nexport type { RelationSingleProps, RelationMultipleProps };\r\n"],"names":["RelationSingle","mainField","content","_jsx","Typography","maxWidth","textColor","ellipsis","getRelationLabel","RelationMultiple","rowId","name","model","useDoc","formatMessage","useIntl","notifyStatus","useNotifyAT","isOpen","setIsOpen","React","useState","query","useQueryParams","locale","plugins","i18n","targetField","split","data","isLoading","useGetRelationsQuery","id","params","skip","refetchOnMountOrArgChange","contentCount","Array","isArray","length","count","useEffect","getTranslation","defaultMessage","_jsxs","Menu","Root","onOpenChange","Trigger","onClick","e","stopPropagation","style","cursor","fontWeight","number","Content","Item","disabled","Loader","small","results","_Fragment","map","entry","documentId","pagination","total","aria-disabled","aria-label"],"mappings":"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"}

package/dist/admin/pages/ListView/components/TableCells/Relations.mjs

@@ -0,0 +1,110 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useQueryParams } from '@strapi/admin/strapi-admin';
+import { Typography, useNotifyAT, Menu, Loader } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { useDoc } from '../../../../hooks/useDocument.mjs';
+import { useGetRelationsQuery } from '../../../../services/relations.mjs';
+import { getRelationLabel } from '../../../../utils/relations.mjs';
+import { getTranslation } from '../../../../utils/translations.mjs';
+
+const RelationSingle = ({ mainField, content })=>{
+    return /*#__PURE__*/ jsx(Typography, {
+        maxWidth: "50rem",
+        textColor: "neutral800",
+        ellipsis: true,
+        children: getRelationLabel(content, mainField)
+    });
+};
+const RelationMultiple = ({ mainField, content, rowId, name })=>{
+    const { model } = useDoc();
+    const { formatMessage } = useIntl();
+    const { notifyStatus } = useNotifyAT();
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [{ query }] = useQueryParams();
+    const locale = query.plugins?.i18n?.locale;
+    const [targetField] = name.split('.');
+    const { data, isLoading } = useGetRelationsQuery({
+        model,
+        id: rowId,
+        targetField,
+        params: {
+            locale
+        }
+    }, {
+        skip: !isOpen,
+        refetchOnMountOrArgChange: true
+    });
+    const contentCount = Array.isArray(content) ? content.length : content.count;
+    React.useEffect(()=>{
+        if (data) {
+            notifyStatus(formatMessage({
+                id: getTranslation('ListViewTable.relation-loaded'),
+                defaultMessage: 'Relations have been loaded'
+            }));
+        }
+    }, [
+        data,
+        formatMessage,
+        notifyStatus
+    ]);
+    return /*#__PURE__*/ jsxs(Menu.Root, {
+        onOpenChange: (isOpen)=>setIsOpen(isOpen),
+        children: [
+            /*#__PURE__*/ jsx(Menu.Trigger, {
+                onClick: (e)=>e.stopPropagation(),
+                children: /*#__PURE__*/ jsx(Typography, {
+                    style: {
+                        cursor: 'pointer'
+                    },
+                    textColor: "neutral800",
+                    fontWeight: "regular",
+                    children: contentCount > 0 ? formatMessage({
+                        id: 'content-manager.containers.list.items',
+                        defaultMessage: '{number} {number, plural, =0 {items} one {item} other {items}}'
+                    }, {
+                        number: contentCount
+                    }) : '-'
+                })
+            }),
+            /*#__PURE__*/ jsxs(Menu.Content, {
+                children: [
+                    isLoading && /*#__PURE__*/ jsx(Menu.Item, {
+                        disabled: true,
+                        children: /*#__PURE__*/ jsx(Loader, {
+                            small: true,
+                            children: formatMessage({
+                                id: getTranslation('ListViewTable.relation-loading'),
+                                defaultMessage: 'Relations are loading'
+                            })
+                        })
+                    }),
+                    data?.results && /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            data.results.map((entry)=>/*#__PURE__*/ jsx(Menu.Item, {
+                                    children: /*#__PURE__*/ jsx(Typography, {
+                                        maxWidth: "50rem",
+                                        ellipsis: true,
+                                        children: getRelationLabel(entry, mainField)
+                                    })
+                                }, entry.documentId)),
+                            data?.pagination && data?.pagination.total > 10 && /*#__PURE__*/ jsx(Menu.Item, {
+                                "aria-disabled": true,
+                                "aria-label": formatMessage({
+                                    id: getTranslation('ListViewTable.relation-more'),
+                                    defaultMessage: 'This relation contains more entities than displayed'
+                                }),
+                                children: /*#__PURE__*/ jsx(Typography, {
+                                    children: "…"
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+export { RelationMultiple, RelationSingle };
+//# sourceMappingURL=Relations.mjs.map

package/dist/admin/pages/ListView/components/TableCells/Relations.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Relations.mjs","sources":["../../../../../../admin/src/pages/ListView/components/TableCells/Relations.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nimport { useQueryParams } from '@strapi/admin/strapi-admin';\r\nimport { Typography, Loader, useNotifyAT, Menu } from '@strapi/design-system';\r\nimport { useIntl } from 'react-intl';\r\n\r\nimport { useDoc } from '../../../../hooks/useDocument';\r\nimport { useGetRelationsQuery } from '../../../../services/relations';\r\nimport { getRelationLabel } from '../../../../utils/relations';\r\nimport { getTranslation } from '../../../../utils/translations';\r\n\r\nimport type { CellContentProps } from './CellContent';\r\n\r\n/* -------------------------------------------------------------------------------------------------\r\n * RelationSingle\r\n * -----------------------------------------------------------------------------------------------*/\r\n\r\ninterface RelationSingleProps extends Pick<CellContentProps, 'mainField' | 'content'> {}\r\n\r\nconst RelationSingle = ({ mainField, content }: RelationSingleProps) => {\r\n  return (\r\n    <Typography maxWidth=\"50rem\" textColor=\"neutral800\" ellipsis>\r\n      {getRelationLabel(content, mainField)}\r\n    </Typography>\r\n  );\r\n};\r\n\r\n/* -------------------------------------------------------------------------------------------------\r\n * RelationMultiple\r\n * -----------------------------------------------------------------------------------------------*/\r\n\r\ninterface RelationMultipleProps\r\n  extends Pick<CellContentProps, 'mainField' | 'content' | 'name' | 'rowId'> {}\r\n\r\nconst RelationMultiple = ({ mainField, content, rowId, name }: RelationMultipleProps) => {\r\n  const { model } = useDoc();\r\n  const { formatMessage } = useIntl();\r\n  const { notifyStatus } = useNotifyAT();\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n  const [{ query }] = useQueryParams<{ plugins?: { i18n?: { locale?: string } } }>();\r\n  const locale = query.plugins?.i18n?.locale;\r\n\r\n  const [targetField] = name.split('.');\r\n\r\n  const { data, isLoading } = useGetRelationsQuery(\r\n    {\r\n      model,\r\n      id: rowId,\r\n      targetField,\r\n      params: { locale },\r\n    },\r\n    {\r\n      skip: !isOpen,\r\n      refetchOnMountOrArgChange: true,\r\n    }\r\n  );\r\n\r\n  const contentCount = Array.isArray(content) ? content.length : content.count;\r\n\r\n  React.useEffect(() => {\r\n    if (data) {\r\n      notifyStatus(\r\n        formatMessage({\r\n          id: getTranslation('ListViewTable.relation-loaded'),\r\n          defaultMessage: 'Relations have been loaded',\r\n        })\r\n      );\r\n    }\r\n  }, [data, formatMessage, notifyStatus]);\r\n\r\n  return (\r\n    <Menu.Root onOpenChange={(isOpen) => setIsOpen(isOpen)}>\r\n      <Menu.Trigger onClick={(e) => e.stopPropagation()}>\r\n        <Typography style={{ cursor: 'pointer' }} textColor=\"neutral800\" fontWeight=\"regular\">\r\n          {contentCount > 0\r\n            ? formatMessage(\r\n                {\r\n                  id: 'content-manager.containers.list.items',\r\n                  defaultMessage: '{number} {number, plural, =0 {items} one {item} other {items}}',\r\n                },\r\n                { number: contentCount }\r\n              )\r\n            : '-'}\r\n        </Typography>\r\n      </Menu.Trigger>\r\n      <Menu.Content>\r\n        {isLoading && (\r\n          <Menu.Item disabled>\r\n            <Loader small>\r\n              {formatMessage({\r\n                id: getTranslation('ListViewTable.relation-loading'),\r\n                defaultMessage: 'Relations are loading',\r\n              })}\r\n            </Loader>\r\n          </Menu.Item>\r\n        )}\r\n        {data?.results && (\r\n          <>\r\n            {data.results.map((entry) => (\r\n              <Menu.Item key={entry.documentId}>\r\n                <Typography maxWidth=\"50rem\" ellipsis>\r\n                  {getRelationLabel(entry, mainField)}\r\n                </Typography>\r\n              </Menu.Item>\r\n            ))}\r\n\r\n            {data?.pagination && data?.pagination.total > 10 && (\r\n              <Menu.Item\r\n                aria-disabled\r\n                aria-label={formatMessage({\r\n                  id: getTranslation('ListViewTable.relation-more'),\r\n                  defaultMessage: 'This relation contains more entities than displayed',\r\n                })}\r\n              >\r\n                <Typography>…</Typography>\r\n              </Menu.Item>\r\n            )}\r\n          </>\r\n        )}\r\n      </Menu.Content>\r\n    </Menu.Root>\r\n  );\r\n};\r\n\r\nexport { RelationSingle, RelationMultiple };\r\nexport type { RelationSingleProps, RelationMultipleProps };\r\n"],"names":["RelationSingle","mainField","content","_jsx","Typography","maxWidth","textColor","ellipsis","getRelationLabel","RelationMultiple","rowId","name","model","useDoc","formatMessage","useIntl","notifyStatus","useNotifyAT","isOpen","setIsOpen","React","useState","query","useQueryParams","locale","plugins","i18n","targetField","split","data","isLoading","useGetRelationsQuery","id","params","skip","refetchOnMountOrArgChange","contentCount","Array","isArray","length","count","useEffect","getTranslation","defaultMessage","_jsxs","Menu","Root","onOpenChange","Trigger","onClick","e","stopPropagation","style","cursor","fontWeight","number","Content","Item","disabled","Loader","small","results","_Fragment","map","entry","documentId","pagination","total","aria-disabled","aria-label"],"mappings":"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"}

package/dist/admin/pages/ListView/components/ViewSettingsMenu.js

@@ -0,0 +1,157 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var designSystem = require('@strapi/design-system');
+var Icons = require('@strapi/icons');
+var qs = require('qs');
+var reactIntl = require('react-intl');
+var reactRouterDom = require('react-router-dom');
+var useDocument = require('../../../hooks/useDocument.js');
+var useDocumentLayout = require('../../../hooks/useDocumentLayout.js');
+var hooks = require('../../../modules/hooks.js');
+var attributes = require('../../../utils/attributes.js');
+
+const ViewSettingsMenu = (props)=>{
+    const permissions = hooks.useTypedSelector((state)=>state.admin_app.permissions.contentManager?.collectionTypesConfigurations ?? []);
+    const [{ query }] = strapiAdmin.useQueryParams();
+    const { formatMessage } = reactIntl.useIntl();
+    const { allowedActions: { canConfigureView } } = strapiAdmin.useRBAC(permissions);
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Popover.Root, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Popover.Trigger, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                    label: formatMessage({
+                        id: 'components.ViewSettings.tooltip',
+                        defaultMessage: 'View Settings'
+                    }),
+                    children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Cog, {})
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Popover.Content, {
+                side: "bottom",
+                align: "end",
+                sideOffset: 4,
+                children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                    alignItems: "stretch",
+                    direction: "column",
+                    padding: 3,
+                    gap: 3,
+                    children: [
+                        canConfigureView ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.LinkButton, {
+                            size: "S",
+                            startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.ListPlus, {}),
+                            variant: "secondary",
+                            tag: reactRouterDom.NavLink,
+                            to: {
+                                pathname: 'configurations/list',
+                                search: query.plugins ? qs.stringify({
+                                    plugins: query.plugins
+                                }, {
+                                    encode: false
+                                }) : ''
+                            },
+                            children: formatMessage({
+                                id: 'app.links.configure-view',
+                                defaultMessage: 'Configure the view'
+                            })
+                        }) : null,
+                        /*#__PURE__*/ jsxRuntime.jsx(FieldPicker, {
+                            ...props
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+const FieldPicker = ({ headers = [], resetHeaders, setHeaders })=>{
+    const { trackUsage } = strapiAdmin.useTracking();
+    const { formatMessage, locale } = reactIntl.useIntl();
+    const { schema, model } = useDocument.useDoc();
+    const { list } = useDocumentLayout.useDocumentLayout(model);
+    const formatter = designSystem.useCollator(locale, {
+        sensitivity: 'base'
+    });
+    const attributes$1 = schema?.attributes ?? {};
+    const columns = Object.keys(attributes$1).filter((name)=>attributes.checkIfAttributeIsDisplayable(attributes$1[name])).map((name)=>({
+            name,
+            label: list.metadatas[name]?.label ?? ''
+        })).sort((a, b)=>formatter.compare(a.label, b.label));
+    const handleChange = (name)=>{
+        trackUsage('didChangeDisplayedFields');
+        /**
+     * create an array of the new headers, if the new name exists it should be removed,
+     * otherwise it should be added
+     */ const newHeaders = headers.includes(name) ? headers.filter((header)=>header !== name) : [
+            ...headers,
+            name
+        ];
+        setHeaders(newHeaders);
+    };
+    const handleReset = ()=>{
+        resetHeaders();
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+        tag: "fieldset",
+        direction: "column",
+        alignItems: "stretch",
+        gap: 1,
+        borderWidth: 0,
+        maxHeight: '240px',
+        padding: 1,
+        overflow: 'auto',
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                justifyContent: "space-between",
+                gap: 2,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                        tag: "legend",
+                        variant: "pi",
+                        fontWeight: "bold",
+                        children: formatMessage({
+                            id: 'containers.list.displayedFields',
+                            defaultMessage: 'Displayed fields'
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.TextButton, {
+                        onClick: handleReset,
+                        children: formatMessage({
+                            id: 'app.components.Button.reset',
+                            defaultMessage: 'Reset'
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                direction: "column",
+                alignItems: "stretch",
+                children: columns.map((header)=>{
+                    const isActive = headers.includes(header.name);
+                    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                        wrap: "wrap",
+                        gap: 2,
+                        background: isActive ? 'primary100' : 'transparent',
+                        hasRadius: true,
+                        padding: 2,
+                        marginBottom: 1,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Checkbox, {
+                            onCheckedChange: ()=>handleChange(header.name),
+                            checked: isActive,
+                            name: header.name,
+                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                fontSize: 1,
+                                children: header.label
+                            })
+                        })
+                    }, header.name);
+                })
+            })
+        ]
+    });
+};
+
+exports.ViewSettingsMenu = ViewSettingsMenu;
+//# sourceMappingURL=ViewSettingsMenu.js.map

package/dist/admin/pages/ListView/components/ViewSettingsMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewSettingsMenu.js","sources":["../../../../../admin/src/pages/ListView/components/ViewSettingsMenu.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nimport { useTracking, useRBAC, useQueryParams } from '@strapi/admin/strapi-admin';\r\nimport {\r\n  Flex,\r\n  IconButton,\r\n  Popover,\r\n  Checkbox,\r\n  TextButton,\r\n  Typography,\r\n  useCollator,\r\n  LinkButton,\r\n} from '@strapi/design-system';\r\nimport { Cog, ListPlus } from '@strapi/icons';\r\nimport { stringify } from 'qs';\r\nimport { useIntl } from 'react-intl';\r\nimport { NavLink } from 'react-router-dom';\r\n\r\nimport { useDoc } from '../../../hooks/useDocument';\r\nimport { useDocumentLayout } from '../../../hooks/useDocumentLayout';\r\nimport { useTypedSelector } from '../../../modules/hooks';\r\nimport { checkIfAttributeIsDisplayable } from '../../../utils/attributes';\r\n\r\ninterface ViewSettingsMenuProps extends FieldPickerProps {}\r\n\r\nconst ViewSettingsMenu = (props: ViewSettingsMenuProps) => {\r\n  const permissions = useTypedSelector(\r\n    (state) => state.admin_app.permissions.contentManager?.collectionTypesConfigurations ?? []\r\n  );\r\n  const [{ query }] = useQueryParams<{ plugins?: Record<string, unknown> }>();\r\n  const { formatMessage } = useIntl();\r\n  const {\r\n    allowedActions: { canConfigureView },\r\n  } = useRBAC(permissions);\r\n\r\n  return (\r\n    <Popover.Root>\r\n      <Popover.Trigger>\r\n        <IconButton\r\n          label={formatMessage({\r\n            id: 'components.ViewSettings.tooltip',\r\n            defaultMessage: 'View Settings',\r\n          })}\r\n        >\r\n          <Cog />\r\n        </IconButton>\r\n      </Popover.Trigger>\r\n      <Popover.Content side=\"bottom\" align=\"end\" sideOffset={4}>\r\n        <Flex alignItems=\"stretch\" direction=\"column\" padding={3} gap={3}>\r\n          {canConfigureView ? (\r\n            <LinkButton\r\n              size=\"S\"\r\n              startIcon={<ListPlus />}\r\n              variant=\"secondary\"\r\n              tag={NavLink}\r\n              to={{\r\n                pathname: 'configurations/list',\r\n                search: query.plugins\r\n                  ? stringify({ plugins: query.plugins }, { encode: false })\r\n                  : '',\r\n              }}\r\n            >\r\n              {formatMessage({\r\n                id: 'app.links.configure-view',\r\n                defaultMessage: 'Configure the view',\r\n              })}\r\n            </LinkButton>\r\n          ) : null}\r\n          <FieldPicker {...props} />\r\n        </Flex>\r\n      </Popover.Content>\r\n    </Popover.Root>\r\n  );\r\n};\r\n\r\ninterface FieldPickerProps {\r\n  headers?: string[];\r\n  setHeaders: (headers: string[]) => void;\r\n  resetHeaders: () => void;\r\n}\r\n\r\nconst FieldPicker = ({ headers = [], resetHeaders, setHeaders }: FieldPickerProps) => {\r\n  const { trackUsage } = useTracking();\r\n  const { formatMessage, locale } = useIntl();\r\n\r\n  const { schema, model } = useDoc();\r\n  const { list } = useDocumentLayout(model);\r\n\r\n  const formatter = useCollator(locale, {\r\n    sensitivity: 'base',\r\n  });\r\n\r\n  const attributes = schema?.attributes ?? {};\r\n\r\n  const columns = Object.keys(attributes)\r\n    .filter((name) => checkIfAttributeIsDisplayable(attributes[name]))\r\n    .map((name) => ({\r\n      name,\r\n      label: list.metadatas[name]?.label ?? '',\r\n    }))\r\n    .sort((a, b) => formatter.compare(a.label, b.label));\r\n\r\n  const handleChange = (name: string) => {\r\n    trackUsage('didChangeDisplayedFields');\r\n\r\n    /**\r\n     * create an array of the new headers, if the new name exists it should be removed,\r\n     * otherwise it should be added\r\n     */\r\n    const newHeaders = headers.includes(name)\r\n      ? headers.filter((header) => header !== name)\r\n      : [...headers, name];\r\n\r\n    setHeaders(newHeaders);\r\n  };\r\n\r\n  const handleReset = () => {\r\n    resetHeaders();\r\n  };\r\n\r\n  return (\r\n    <Flex\r\n      tag=\"fieldset\"\r\n      direction=\"column\"\r\n      alignItems=\"stretch\"\r\n      gap={1}\r\n      borderWidth={0}\r\n      maxHeight={'240px'}\r\n      padding={1}\r\n      overflow={'auto'}\r\n    >\r\n      <Flex justifyContent=\"space-between\" gap={2}>\r\n        <Typography tag=\"legend\" variant=\"pi\" fontWeight=\"bold\">\r\n          {formatMessage({\r\n            id: 'containers.list.displayedFields',\r\n            defaultMessage: 'Displayed fields',\r\n          })}\r\n        </Typography>\r\n\r\n        <TextButton onClick={handleReset}>\r\n          {formatMessage({\r\n            id: 'app.components.Button.reset',\r\n            defaultMessage: 'Reset',\r\n          })}\r\n        </TextButton>\r\n      </Flex>\r\n\r\n      <Flex direction=\"column\" alignItems=\"stretch\">\r\n        {columns.map((header) => {\r\n          const isActive = headers.includes(header.name);\r\n\r\n          return (\r\n            <Flex\r\n              wrap=\"wrap\"\r\n              gap={2}\r\n              background={isActive ? 'primary100' : 'transparent'}\r\n              hasRadius\r\n              padding={2}\r\n              marginBottom={1}\r\n              key={header.name}\r\n            >\r\n              <Checkbox\r\n                onCheckedChange={() => handleChange(header.name)}\r\n                checked={isActive}\r\n                name={header.name}\r\n              >\r\n                <Typography fontSize={1}>{header.label}</Typography>\r\n              </Checkbox>\r\n            </Flex>\r\n          );\r\n        })}\r\n      </Flex>\r\n    </Flex>\r\n  );\r\n};\r\n\r\nexport { ViewSettingsMenu };\r\nexport type { ViewSettingsMenuProps, FieldPickerProps };\r\n"],"names":["ViewSettingsMenu","props","permissions","useTypedSelector","state","admin_app","contentManager","collectionTypesConfigurations","query","useQueryParams","formatMessage","useIntl","allowedActions","canConfigureView","useRBAC","_jsxs","Popover","Root","_jsx","Trigger","IconButton","label","id","defaultMessage","Cog","Content","side","align","sideOffset","Flex","alignItems","direction","padding","gap","LinkButton","size","startIcon","ListPlus","variant","tag","NavLink","to","pathname","search","plugins","stringify","encode","FieldPicker","headers","resetHeaders","setHeaders","trackUsage","useTracking","locale","schema","model","useDoc","list","useDocumentLayout","formatter","useCollator","sensitivity","attributes","columns","Object","keys","filter","name","checkIfAttributeIsDisplayable","map","metadatas","sort","a","b","compare","handleChange","newHeaders","includes","header","handleReset","borderWidth","maxHeight","overflow","justifyContent","Typography","fontWeight","TextButton","onClick","isActive","wrap","background","hasRadius","marginBottom","Checkbox","onCheckedChange","checked","fontSize"],"mappings":"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"}