fix: incorrectly looking for schema paths when upload is not enabled (#9146)
### What?  ### Why? Should not be attaching fields that it does not need. ### How? Conditionally render slate upload drawer like we do with the toggler.
This commit is contained in:
@@ -154,22 +154,27 @@ const UploadElementComponent: React.FC<{ enabledCollectionSlugs?: string[] }> =
|
|||||||
</div>
|
</div>
|
||||||
<div className={`${baseClass}__actions`}>
|
<div className={`${baseClass}__actions`}>
|
||||||
{Boolean(customFieldsMap) && (
|
{Boolean(customFieldsMap) && (
|
||||||
<DrawerToggler
|
<>
|
||||||
className={`${baseClass}__upload-drawer-toggler`}
|
<DrawerToggler
|
||||||
disabled={fieldProps?.field?.admin?.readOnly}
|
className={`${baseClass}__upload-drawer-toggler`}
|
||||||
slug={drawerSlug}
|
disabled={fieldProps?.field?.admin?.readOnly}
|
||||||
>
|
slug={drawerSlug}
|
||||||
<Button
|
>
|
||||||
buttonStyle="icon-label"
|
<Button
|
||||||
el="div"
|
buttonStyle="icon-label"
|
||||||
icon="edit"
|
el="div"
|
||||||
onClick={(e) => {
|
icon="edit"
|
||||||
e.preventDefault()
|
onClick={(e) => {
|
||||||
}}
|
e.preventDefault()
|
||||||
round
|
}}
|
||||||
tooltip={t('fields:editRelationship')}
|
round
|
||||||
|
tooltip={t('fields:editRelationship')}
|
||||||
|
/>
|
||||||
|
</DrawerToggler>
|
||||||
|
<UploadDrawer
|
||||||
|
{...{ drawerSlug, element, fieldProps, relatedCollection, schemaPath }}
|
||||||
/>
|
/>
|
||||||
</DrawerToggler>
|
</>
|
||||||
)}
|
)}
|
||||||
<ListDrawerToggler
|
<ListDrawerToggler
|
||||||
className={`${baseClass}__list-drawer-toggler`}
|
className={`${baseClass}__list-drawer-toggler`}
|
||||||
@@ -211,7 +216,6 @@ const UploadElementComponent: React.FC<{ enabledCollectionSlugs?: string[] }> =
|
|||||||
{children}
|
{children}
|
||||||
{value?.id && <DocumentDrawer onSave={updateUpload} />}
|
{value?.id && <DocumentDrawer onSave={updateUpload} />}
|
||||||
<ListDrawer onSelect={swapUpload} />
|
<ListDrawer onSelect={swapUpload} />
|
||||||
<UploadDrawer {...{ drawerSlug, element, fieldProps, relatedCollection, schemaPath }} />
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -156,10 +156,10 @@ export const EditMany: React.FC<EditManyProps> = (props) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
void getInitialState()
|
void getInitialState()
|
||||||
|
}
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
abortAndIgnore(controller)
|
abortAndIgnore(controller)
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}, [apiRoute, hasInitializedState, serverURL, slug, getFormState, user, collectionPermissions])
|
}, [apiRoute, hasInitializedState, serverURL, slug, getFormState, user, collectionPermissions])
|
||||||
|
|
||||||
@@ -186,7 +186,9 @@ export const EditMany: React.FC<EditManyProps> = (props) => {
|
|||||||
)
|
)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
abortAndIgnore(formStateAbortControllerRef.current)
|
return () => {
|
||||||
|
abortAndIgnore(formStateAbortControllerRef.current)
|
||||||
|
}
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
if (selectAll === SelectAllStatus.None || !hasUpdatePermission) {
|
if (selectAll === SelectAllStatus.None || !hasUpdatePermission) {
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import type { ClientCollectionConfig, StaticDescription } from 'payload'
|
import type { ClientCollectionConfig } from 'payload'
|
||||||
|
|
||||||
import { getTranslation } from '@payloadcms/translations'
|
import { getTranslation } from '@payloadcms/translations'
|
||||||
import LinkImport from 'next/link.js'
|
import LinkImport from 'next/link.js'
|
||||||
@@ -24,7 +24,6 @@ import { Pagination } from '../../elements/Pagination/index.js'
|
|||||||
import { PerPage } from '../../elements/PerPage/index.js'
|
import { PerPage } from '../../elements/PerPage/index.js'
|
||||||
import { PublishMany } from '../../elements/PublishMany/index.js'
|
import { PublishMany } from '../../elements/PublishMany/index.js'
|
||||||
import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'
|
import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'
|
||||||
import { StaggeredShimmers } from '../../elements/ShimmerEffect/index.js'
|
|
||||||
import { useStepNav } from '../../elements/StepNav/index.js'
|
import { useStepNav } from '../../elements/StepNav/index.js'
|
||||||
import { RelationshipProvider } from '../../elements/Table/RelationshipProvider/index.js'
|
import { RelationshipProvider } from '../../elements/Table/RelationshipProvider/index.js'
|
||||||
import { TableColumnsProvider } from '../../elements/TableColumns/index.js'
|
import { TableColumnsProvider } from '../../elements/TableColumns/index.js'
|
||||||
@@ -35,7 +34,6 @@ import { useConfig } from '../../providers/Config/index.js'
|
|||||||
import { useEditDepth } from '../../providers/EditDepth/index.js'
|
import { useEditDepth } from '../../providers/EditDepth/index.js'
|
||||||
import { useListQuery } from '../../providers/ListQuery/index.js'
|
import { useListQuery } from '../../providers/ListQuery/index.js'
|
||||||
import { SelectionProvider } from '../../providers/Selection/index.js'
|
import { SelectionProvider } from '../../providers/Selection/index.js'
|
||||||
import { useServerFunctions } from '../../providers/ServerFunctions/index.js'
|
|
||||||
import { useTranslation } from '../../providers/Translation/index.js'
|
import { useTranslation } from '../../providers/Translation/index.js'
|
||||||
import { useWindowInfo } from '../../providers/WindowInfo/index.js'
|
import { useWindowInfo } from '../../providers/WindowInfo/index.js'
|
||||||
import './index.scss'
|
import './index.scss'
|
||||||
@@ -98,8 +96,6 @@ export const DefaultListView: React.FC<ListViewClientProps> = (props) => {
|
|||||||
}
|
}
|
||||||
}, [InitialTable])
|
}, [InitialTable])
|
||||||
|
|
||||||
const payloadServerAction = useServerFunctions()
|
|
||||||
|
|
||||||
const { user } = useAuth()
|
const { user } = useAuth()
|
||||||
|
|
||||||
const { getEntityConfig } = useConfig()
|
const { getEntityConfig } = useConfig()
|
||||||
@@ -136,30 +132,18 @@ export const DefaultListView: React.FC<ListViewClientProps> = (props) => {
|
|||||||
breakpoints: { s: smallBreak },
|
breakpoints: { s: smallBreak },
|
||||||
} = useWindowInfo()
|
} = useWindowInfo()
|
||||||
|
|
||||||
useEffect(() => {
|
const docs = React.useMemo(() => {
|
||||||
if (!collectionConfig) {
|
if (isUploadCollection) {
|
||||||
const getNewConfig = async () => {
|
return data.docs.map((doc) => {
|
||||||
// @ts-expect-error eslint-disable-next-line
|
return {
|
||||||
const res = (await payloadServerAction('render-config', {
|
...doc,
|
||||||
collectionSlug,
|
filesize: formatFilesize(doc.filesize),
|
||||||
languageCode: i18n.language,
|
}
|
||||||
})) as any as ClientCollectionConfig
|
})
|
||||||
}
|
} else {
|
||||||
|
return data.docs
|
||||||
void getNewConfig()
|
|
||||||
}
|
}
|
||||||
}, [payloadServerAction, collectionConfig, collectionSlug, data, i18n])
|
}, [data.docs, isUploadCollection])
|
||||||
|
|
||||||
let docs = data.docs || []
|
|
||||||
|
|
||||||
if (isUploadCollection) {
|
|
||||||
docs = docs?.map((doc) => {
|
|
||||||
return {
|
|
||||||
...doc,
|
|
||||||
filesize: formatFilesize(doc.filesize),
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const openBulkUpload = React.useCallback(() => {
|
const openBulkUpload = React.useCallback(() => {
|
||||||
setCollectionSlug(collectionSlug)
|
setCollectionSlug(collectionSlug)
|
||||||
@@ -182,14 +166,14 @@ export const DefaultListView: React.FC<ListViewClientProps> = (props) => {
|
|||||||
<TableColumnsProvider
|
<TableColumnsProvider
|
||||||
collectionSlug={collectionSlug}
|
collectionSlug={collectionSlug}
|
||||||
columnState={columnState}
|
columnState={columnState}
|
||||||
docs={data.docs}
|
docs={docs}
|
||||||
enableRowSelections={enableRowSelections}
|
enableRowSelections={enableRowSelections}
|
||||||
listPreferences={listPreferences}
|
listPreferences={listPreferences}
|
||||||
preferenceKey={preferenceKey}
|
preferenceKey={preferenceKey}
|
||||||
setTable={setTable}
|
setTable={setTable}
|
||||||
>
|
>
|
||||||
<div className={`${baseClass} ${baseClass}--${collectionSlug}`}>
|
<div className={`${baseClass} ${baseClass}--${collectionSlug}`}>
|
||||||
<SelectionProvider docs={data.docs} totalDocs={data.totalDocs} user={user}>
|
<SelectionProvider docs={docs} totalDocs={data.totalDocs} user={user}>
|
||||||
{BeforeList}
|
{BeforeList}
|
||||||
<Gutter className={`${baseClass}__wrap`}>
|
<Gutter className={`${baseClass}__wrap`}>
|
||||||
<ListHeader
|
<ListHeader
|
||||||
@@ -221,16 +205,8 @@ export const DefaultListView: React.FC<ListViewClientProps> = (props) => {
|
|||||||
renderedFilters={renderedFilters}
|
renderedFilters={renderedFilters}
|
||||||
/>
|
/>
|
||||||
{BeforeListTable}
|
{BeforeListTable}
|
||||||
{!data.docs && (
|
{docs.length > 0 && <RelationshipProvider>{Table}</RelationshipProvider>}
|
||||||
<StaggeredShimmers
|
{docs.length === 0 && (
|
||||||
className={[`${baseClass}__shimmer`, `${baseClass}__shimmer--rows`].join(' ')}
|
|
||||||
count={6}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{data.docs && data.docs.length > 0 && (
|
|
||||||
<RelationshipProvider>{Table}</RelationshipProvider>
|
|
||||||
)}
|
|
||||||
{data.docs && data.docs.length === 0 && (
|
|
||||||
<div className={`${baseClass}__no-results`}>
|
<div className={`${baseClass}__no-results`}>
|
||||||
<p>
|
<p>
|
||||||
{i18n.t('general:noResults', { label: getTranslation(labels?.plural, i18n) })}
|
{i18n.t('general:noResults', { label: getTranslation(labels?.plural, i18n) })}
|
||||||
@@ -255,7 +231,7 @@ export const DefaultListView: React.FC<ListViewClientProps> = (props) => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{AfterListTable}
|
{AfterListTable}
|
||||||
{data.docs && data.docs.length > 0 && (
|
{docs.length > 0 && (
|
||||||
<div className={`${baseClass}__page-controls`}>
|
<div className={`${baseClass}__page-controls`}>
|
||||||
<Pagination
|
<Pagination
|
||||||
hasNextPage={data.hasNextPage}
|
hasNextPage={data.hasNextPage}
|
||||||
@@ -268,7 +244,7 @@ export const DefaultListView: React.FC<ListViewClientProps> = (props) => {
|
|||||||
prevPage={data.prevPage}
|
prevPage={data.prevPage}
|
||||||
totalPages={data.totalPages}
|
totalPages={data.totalPages}
|
||||||
/>
|
/>
|
||||||
{data?.totalDocs > 0 && (
|
{data.totalDocs > 0 && (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<div className={`${baseClass}__page-info`}>
|
<div className={`${baseClass}__page-info`}>
|
||||||
{data.page * data.limit - (data.limit - 1)}-
|
{data.page * data.limit - (data.limit - 1)}-
|
||||||
|
|||||||
Reference in New Issue
Block a user