ml iterations

packages/core/upload/admin/src/components/PaginationFooter/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Box, Row } from '@strapi/parts';
+import { PaginationURLQuery, PageSizeURLQuery } from '@strapi/helper-plugin';
+
+export const PaginationFooter = ({ pagination }) => {
+  return (
+    <Box paddingTop={6}>
+      <Row alignItems="flex-end" justifyContent="space-between">
+        <PageSizeURLQuery trackedEvent="willChangeNumberOfEntriesPerPage" />
+        <PaginationURLQuery pagination={pagination} />
+      </Row>
+    </Box>
+  );
+};
+
+PaginationFooter.defaultProps = {
+  pagination: {
+    pageCount: 0,
+    pageSize: 10,
+    total: 0,
+  },
+};
+
+PaginationFooter.propTypes = {
+  pagination: PropTypes.shape({
+    page: PropTypes.number,
+    pageCount: PropTypes.number,
+    pageSize: PropTypes.number,
+    total: PropTypes.number,
+  }),
+};

packages/core/upload/admin/src/pages/App/components/ListView.js

@@ -7,50 +7,57 @@ import { ImageAssetCard } from '../../../components/AssetCard/ImageAssetCard';
 import { VideoAssetCard } from '../../../components/AssetCard/VideoAssetCard';
 import { DocAssetCard } from '../../../components/AssetCard/DocAssetCard';
 import { AssetType } from '../../../constants';
+import { PaginationFooter } from '../../../components/PaginationFooter';
 
 export const ListView = ({ assets }) => {
   return (
-    <KeyboardNavigable tagName="article">
+    <>
-      <GridLayout>
+      <KeyboardNavigable tagName="article">
-        {assets.map(asset => {
+        <GridLayout>
-          if (asset.mime.includes(AssetType.Video)) {
+          {assets.map(asset => {
+            if (asset.mime.includes(AssetType.Video)) {
+              return (
+                <VideoAssetCard
+                  id={asset.id}
+                  key={asset.id}
+                  name={asset.name}
+                  extension={getFileExtension(asset.ext)}
+                  url={prefixFileUrlWithBackendUrl(asset.url)}
+                  mime={asset.mime}
+                />
+              );
+            }
+
+            if (asset.mime.includes(AssetType.Image)) {
+              return (
+                <ImageAssetCard
+                  id={asset.id}
+                  key={asset.id}
+                  name={asset.name}
+                  extension={getFileExtension(asset.ext)}
+                  height={asset.height}
+                  width={asset.width}
+                  thumbnail={prefixFileUrlWithBackendUrl(
+                    asset?.formats?.thumbnail?.url || asset.url
+                  )}
+                />
+              );
+            }
+
             return (
-              <VideoAssetCard
+              <DocAssetCard
                 id={asset.id}
                 key={asset.id}
                 name={asset.name}
                 extension={getFileExtension(asset.ext)}
-                url={prefixFileUrlWithBackendUrl(asset.url)}
-                mime={asset.mime}
               />
             );
-          }
+          })}
+        </GridLayout>
+      </KeyboardNavigable>
 
-          if (asset.mime.includes(AssetType.Image)) {
+      <PaginationFooter />
-            return (
+    </>
-              <ImageAssetCard
-                id={asset.id}
-                key={asset.id}
-                name={asset.name}
-                extension={getFileExtension(asset.ext)}
-                height={asset.height}
-                width={asset.width}
-                thumbnail={prefixFileUrlWithBackendUrl(asset?.formats?.thumbnail?.url || asset.url)}
-              />
-            );
-          }
-
-          return (
-            <DocAssetCard
-              id={asset.id}
-              key={asset.id}
-              name={asset.name}
-              extension={getFileExtension(asset.ext)}
-            />
-          );
-        })}
-      </GridLayout>
-    </KeyboardNavigable>
   );
 };