feat(plugin-import-export): working on adding page arg and other improvements

Author: DanRibbens

packages/plugin-import-export/src/components/Preview/index.tsx

@@ -28,6 +28,7 @@ export const Preview = () => {
   const { collection } = useImportExport()
   const { config } = useConfig()
   const { value: where } = useField({ path: 'where' })
+  const { value: page } = useField({ path: 'page' })
   const { value: limit } = useField<number>({ path: 'limit' })
   const { value: fields } = useField<string[]>({ path: 'fields' })
   const { value: sort } = useField({ path: 'sort' })
@@ -71,6 +72,7 @@ export const Preview = () => {
             format,
             limit,
             locale,
+            page,
             sort,
             where,
           }),
@@ -168,6 +170,7 @@ export const Preview = () => {
     i18n,
     limit,
     locale,
+    page,
     sort,
     where,
   ])

packages/plugin-import-export/src/export/createExport.ts

@@ -23,8 +23,10 @@ export type Export = {
   format: 'csv' | 'json'
   globals?: string[]
   id: number | string
+  limit?: number
   locale?: string
   name: string
+  page?: number
   slug: string
   sort: Sort
   user: string
@@ -57,6 +59,8 @@ export const createExport = async (args: CreateExportArgs) => {
       locale: localeInput,
       sort,
       user,
+      page,
+      limit,
       where,
     },
     req: { locale: localeArg, payload },

packages/plugin-import-export/src/export/getFields.ts

@@ -11,7 +11,7 @@ export const getFields = (config: Config, pluginConfig?: ImportExportPluginConfi
       name: 'locale',
       type: 'select',
       admin: {
-        width: '33%',
+        width: '180px',
       },
       defaultValue: 'all',
       // @ts-expect-error - this is not correctly typed in plugins right now
@@ -49,7 +49,7 @@ export const getFields = (config: Config, pluginConfig?: ImportExportPluginConfi
               admin: {
                 // Hide if a forced format is set via plugin config
                 condition: () => !pluginConfig?.format,
-                width: '33%',
+                width: '180px',
               },
               defaultValue: (() => {
                 // Default to plugin-defined format, otherwise 'csv'
@@ -74,11 +74,24 @@ export const getFields = (config: Config, pluginConfig?: ImportExportPluginConfi
               type: 'number',
               admin: {
                 placeholder: 'No limit',
-                width: '33%',
+                width: '180px',
               },
               // @ts-expect-error - this is not correctly typed in plugins right now
               label: ({ t }) => t('plugin-import-export:field-limit-label'),
             },
+            {
+              name: 'page',
+              type: 'number',
+              admin: {
+                condition: ({ limit }) => {
+                  return typeof limit === 'number' && limit !== 0
+                },
+                width: '180px',
+              },
+              defaultValue: 1,
+              // @ts-expect-error - this is not correctly typed in plugins right now
+              label: ({ t }) => t('plugin-import-export:field-page-label'),
+            },
             {
               name: 'sort',
               type: 'text',
@@ -109,7 +122,7 @@ export const getFields = (config: Config, pluginConfig?: ImportExportPluginConfi
                       collectionConfig?.versions?.drafts,
                   )
                 },
-                width: '33%',
+                width: '180px',
               },
               defaultValue: 'yes',
               // @ts-expect-error - this is not correctly typed in plugins right now
@@ -163,6 +176,7 @@ export const getFields = (config: Config, pluginConfig?: ImportExportPluginConfi
               value: 'all',
             },
           ],
+          virtual: true,
         },
         {
           name: 'fields',

packages/plugin-import-export/src/index.ts

@@ -63,7 +63,7 @@ export const importExportPlugin =
         path: '@payloadcms/plugin-import-export/rsc#ExportListMenuItem',
       })
 
-      // // Find fields explicitly marked as disabled for import/export
+      // Find fields explicitly marked as disabled for import/export
       const disabledFieldAccessors = collectDisabledFieldPaths(collection.fields)
 
       // Store disabled field accessors in the admin config for use in the UI
@@ -90,13 +90,14 @@ export const importExportPlugin =
       handler: async (req) => {
         await addDataAndFileToRequest(req)
 
-        const { collectionSlug, draft, fields, limit, locale, sort, where } = req.data as {
+        const { collectionSlug, draft, fields, limit, locale, page, sort, where } = req.data as {
           collectionSlug: string
           draft?: 'no' | 'yes'
           fields?: string[]
           format?: 'csv' | 'json'
           limit?: number
           locale?: string
+          page?: number
           sort?: any
           where?: any
         }
@@ -118,6 +119,7 @@ export const importExportPlugin =
           limit: limit && limit > 10 ? 10 : limit,
           locale,
           overrideAccess: false,
+          page,
           req,
           select,
           sort,

packages/plugin-import-export/src/translations/languages/en.ts

@@ -11,6 +11,7 @@ export const enTranslations = {
     'field-limit-label': 'Limit',
     'field-locale-label': 'Locale',
     'field-name-label': 'File name',
+    'field-page-label': 'Page',
     'field-selectionToUse-label': 'Selection to use',
     'field-sort-label': 'Sort by',
     'selectionToUse-allDocuments': 'Use all documents',

packages/plugin-import-export/src/translations/languages/translation-schema.json

@@ -49,6 +49,9 @@
         "field-name-label": {
           "type": "string"
         },
+        "field-page-label": {
+          "type": "string"
+        },
         "field-selectionToUse-label": {
           "type": "string"
         },

test/plugin-import-export/payload-types.ts

@@ -267,6 +267,7 @@ export interface Export {
   name?: string | null;
   format?: ('csv' | 'json') | null;
   limit?: number | null;
+  page?: number | null;
   sort?: string | null;
   locale?: ('all' | 'en' | 'es' | 'de') | null;
   drafts?: ('yes' | 'no') | null;
@@ -303,6 +304,7 @@ export interface ExportsTask {
   name?: string | null;
   format?: ('csv' | 'json') | null;
   limit?: number | null;
+  page?: number | null;
   sort?: string | null;
   locale?: ('all' | 'en' | 'es' | 'de') | null;
   drafts?: ('yes' | 'no') | null;
@@ -603,6 +605,7 @@ export interface ExportsSelect<T extends boolean = true> {
   name?: T;
   format?: T;
   limit?: T;
+  page?: T;
   sort?: T;
   locale?: T;
   drafts?: T;
@@ -630,6 +633,7 @@ export interface ExportsTasksSelect<T extends boolean = true> {
   name?: T;
   format?: T;
   limit?: T;
+  page?: T;
   sort?: T;
   locale?: T;
   drafts?: T;
@@ -721,6 +725,7 @@ export interface TaskCreateCollectionExport {
     name?: string | null;
     format?: ('csv' | 'json') | null;
     limit?: number | null;
+    page?: number | null;
     sort?: string | null;
     locale?: ('all' | 'en' | 'es' | 'de') | null;
     drafts?: ('yes' | 'no') | null;