Some enhancement for pagination and html attributes (#422)

* 👍 Add extra attributes to nova-file-manager component * feat: generation pagination on backend side --------- Co-authored-by: Donny <[email protected]> Co-authored-by: Fayne Guo <[email protected]> Co-authored-by: mikaelpopowicz <[email protected]>
oneduo · Aug 8, 2024 · 370c869 · 370c869
1 parent d1e84cc
commit 370c869
Show file tree

Hide file tree

Showing 11 changed files with 136 additions and 24 deletions.
diff --git a/config/nova-file-manager.php b/config/nova-file-manager.php
@@ -34,6 +34,12 @@
         // ... more disks
     ],
 
+    'paginate_options' => [
+        'pagination_start' => (int) env('NOVA_FILE_MANAGER_PAGINATE_START', 10),
+        'pagination_end' => (int) env('NOVA_FILE_MANAGER_PAGINATE_END', 50),
+        'pagination_step' => (int) env('NOVA_FILE_MANAGER_PAGINATE_STEP', 10),
+    ],
+
     /*
     |--------------------------------------------------------------------------
     | Show hidden files

diff --git a/dist/js/tool.js b/dist/js/tool.js
diff --git a/resources/js/@types/index.ts b/resources/js/@types/index.ts
@@ -28,6 +28,7 @@ export type BrowserConfig = {
   usePintura: boolean
   pinturaOptions?: PinturaOptions
   cropperOptions?: CropperOptions
+  paginationOptions?: number[]
   component?: string
 }
 
@@ -39,6 +40,7 @@ export type Config = {
   pinturaOptions: PinturaOptions
   cropperOptions: CropperOptions
   outdated?: boolean
+  paginationOptions?: number[]
 }
 
 export type Entity = {

diff --git a/resources/js/fields/FormField.vue b/resources/js/fields/FormField.vue
@@ -8,6 +8,7 @@ import draggable from 'vuedraggable'
 import Browser from '@/components/Browser.vue'
 import FieldCard from '@/components/Cards/FieldCard.vue'
 import useBrowserStore from '@/stores/browser'
+import omit from 'lodash/omit'
 
 export default defineComponent({
   mixins: [
@@ -69,6 +70,14 @@ export default defineComponent({
         ghostClass: 'opacity-0',
       }
     },
+
+    extraAttributes() {
+      const attrs = omit(this.field.extraAttributes, ['readonly'])
+
+      return {
+        ...attrs,
+      }
+    },
   },
 
   methods: {
@@ -108,6 +117,7 @@ export default defineComponent({
         usePintura: this.currentField.usePintura ?? false,
         pinturaOptions: this.currentField.pinturaOptions ?? {},
         cropperOptions: this.currentField.cropperOptions ?? {},
+        paginationOptions: this.currentField.paginationOptions ?? undefined,
         component: this.$inertia?.page?.component,
       })
     },
@@ -150,7 +160,7 @@ export default defineComponent({
 <template>
   <DefaultField :errors="errors" :field="currentField" :show-help-text="showHelpText">
     <template #field>
-      <div class="nova-file-manager">
+      <div class="nova-file-manager" v-bind="extraAttributes">
         <div :class="{ dark }">
           <div v-if="value?.length > 0" class="flex flex-row gap-2 flex-wrap w-full">
             <draggable

diff --git a/resources/js/pages/Tool.vue b/resources/js/pages/Tool.vue
@@ -25,6 +25,7 @@ onBeforeMount(() => {
     usePintura: props.config.usePintura || false,
     pinturaOptions: props.config.pinturaOptions || {},
     cropperOptions: props.config.cropperOptions || {},
+    paginationOptions: props.config.paginationOptions || undefined,
   })
 
   store.loadFromQueryString()

diff --git a/resources/js/stores/browser.ts b/resources/js/stores/browser.ts
@@ -87,8 +87,8 @@ const useBrowserStore = defineStore('nova-file-manager/browser', {
     disks: undefined,
     page: undefined,
     search: undefined,
-    perPage: 15,
-    perPageOptions: range(10, 50, 10),
+    perPage: 10,
+    perPageOptions: range(10, 60, 10),
     view: 'grid',
     modals: [],
     callback: () => {},
@@ -793,6 +793,7 @@ const useBrowserStore = defineStore('nova-file-manager/browser', {
       usePintura,
       pinturaOptions,
       cropperOptions,
+      paginationOptions,
       component,
     }: BrowserConfig) {
       this.isField = true
@@ -808,6 +809,7 @@ const useBrowserStore = defineStore('nova-file-manager/browser', {
       this.usePintura = usePintura
       this.pinturaOptions = pinturaOptions
       this.cropperOptions = cropperOptions
+      this.perPageOptions = paginationOptions ?? this.perPageOptions
       this.error = undefined
       this.permissions = permissions
       this.disk = undefined
@@ -831,7 +833,7 @@ const useBrowserStore = defineStore('nova-file-manager/browser', {
       this.usePintura = false
       this.pinturaOptions = {}
       this.cropperOptions = {}
-      this.error = undefined
+      ;(this.perPage = 10), (this.perPageOptions = range(10, 60, 10)), (this.error = undefined)
       this.permissions = undefined
       this.disk = undefined
 
@@ -845,7 +847,15 @@ const useBrowserStore = defineStore('nova-file-manager/browser', {
       this.closeBrowser()
     },
 
-    prepareTool({ singleDisk, permissions, tour, usePintura, pinturaOptions, cropperOptions }: Config) {
+    prepareTool({
+      singleDisk,
+      permissions,
+      tour,
+      usePintura,
+      pinturaOptions,
+      cropperOptions,
+      paginationOptions,
+    }: Config) {
       this.init()
       this.clearSelection()
 
@@ -858,6 +868,7 @@ const useBrowserStore = defineStore('nova-file-manager/browser', {
       this.usePintura = usePintura
       this.pinturaOptions = pinturaOptions
       this.cropperOptions = cropperOptions
+      this.perPageOptions = paginationOptions ?? this.perPageOptions
       this.error = undefined
     },
   },

diff --git a/src/Contracts/Support/InteractsWithFilesystem.php b/src/Contracts/Support/InteractsWithFilesystem.php
@@ -107,6 +107,10 @@ public function pinturaOptions(array $options): static;
 
     public function cropperOptions(array $options): static;
 
+    public function pagination(Closure $callback): static;
+
+    public function resolvePagination(NovaRequest $request): array;
+
     public function options(): array;
 
     public function merge(self $other): static;

diff --git a/src/Traits/Support/InteractsWithFilesystem.php b/src/Traits/Support/InteractsWithFilesystem.php
@@ -60,6 +60,8 @@ trait InteractsWithFilesystem
 
     public array $cropperOptions = [];
 
+    public ?Closure $pagination = null;
+
     public function filesystem(Closure $callback): static
     {
         $this->filesystem = $callback;
@@ -384,6 +386,26 @@ public function cropperOptions(array $options): static
         return $this;
     }
 
+    public function pagination(Closure $callback): static
+    {
+        $this->pagination = $callback;
+
+        return $this;
+    }
+
+    public function resolvePagination(NovaRequest $request): array
+    {
+        if (is_callable($this->pagination)) {
+            return call_user_func($this->pagination, $request);
+        }
+
+        return range(
+            config('nova-file-manager.paginate_options.pagination_start'),
+            config('nova-file-manager.paginate_options.pagination_end'),
+            config('nova-file-manager.paginate_options.pagination_step')
+        );
+    }
+
     public function options(): array
     {
         return with(app(NovaRequest::class), function (NovaRequest $request) {
@@ -407,6 +429,7 @@ public function options(): array
                 'usePintura' => config('nova-file-manager.use_pintura'),
                 'pinturaOptions' => $this->pinturaOptions,
                 'cropperOptions' => $this->cropperOptions,
+                'paginationOptions' => $this->resolvePagination($request),
             ];
         });
     }

diff --git a/tests/Feature/ToolTest.php b/tests/Feature/ToolTest.php
@@ -8,6 +8,9 @@
 use Laravel\Nova\Http\Middleware\BootTools;
 use Laravel\Nova\Http\Middleware\DispatchServingNovaEvent;
 use Laravel\Nova\Http\Middleware\HandleInertiaRequests;
+use Laravel\Nova\Http\Requests\NovaRequest;
+use Laravel\Nova\Nova;
+use Oneduo\NovaFileManager\NovaFileManager;
 
 use function Pest\Laravel\actingAs;
 
@@ -29,6 +32,7 @@
                 ->where('config.permissions', [
                     'file' => [
                         'delete' => true,
+                        'download' => true,
                         'edit' => true,
                         'rename' => true,
                         'unzip' => true,
@@ -39,6 +43,51 @@
                         'delete' => true,
                         'rename' => true,
                     ],
-                ]);
+                ])
+                ->where('config.paginationOptions', range(
+                    10,
+                    50,
+                    10
+                ));
+        });
+});
+
+it('can show the file manager tool with custom pagination', function () {
+    Nova::$tools = [
+        NovaFileManager::make()->pagination(function (NovaRequest $request) {
+            return [10, 42, 84];
+        }),
+    ];
+
+    Route::middlewareGroup('nova', [
+        'web',
+        HandleInertiaRequests::class,
+        DispatchServingNovaEvent::class,
+        BootTools::class,
+    ]);
+
+    actingAs(new User())
+        ->get(route('nova-file-manager.tool'))
+        ->assertInertia(function (Assert $page) {
+            $page
+                ->component('NovaFileManager', false)
+                ->where('config.upload', null)
+                ->where('config.singleDisk', false)
+                ->where('config.permissions', [
+                    'file' => [
+                        'delete' => true,
+                        'download' => true,
+                        'edit' => true,
+                        'rename' => true,
+                        'unzip' => true,
+                        'upload' => true,
+                    ],
+                    'folder' => [
+                        'create' => true,
+                        'delete' => true,
+                        'rename' => true,
+                    ],
+                ])
+                ->where('config.paginationOptions', [10, 42, 84]);
         });
 });
diff --git a/workbench/app/Nova/Page.php b/workbench/app/Nova/Page.php
@@ -58,7 +58,10 @@ public function fields(NovaRequest $request)
                 ->rules('required', 'max:255'),
 
             FileManager::make('Image')
-                ->rules('required'),
+                ->rules('required')
+                ->pagination(function (NovaRequest $request) {
+                    return [10, 42, 84];
+                }),
 
             Panel::make('Content', [
                 Flexible::make('Content')

diff --git a/workbench/app/Providers/NovaServiceProvider.php b/workbench/app/Providers/NovaServiceProvider.php
@@ -5,6 +5,7 @@
 namespace Workbench\App\Providers;
 
 use Illuminate\Support\Facades\Gate;
+use Laravel\Nova\Http\Requests\NovaRequest;
 use Laravel\Nova\Nova;
 use Laravel\Nova\NovaApplicationServiceProvider;
 use Oneduo\NovaFileManager\FileManager;
@@ -69,7 +70,9 @@ protected function dashboards()
     public function tools()
     {
         return [
-            NovaFileManager::make(),
+            NovaFileManager::make()->pagination(function (NovaRequest $request) {
+                return [10, 42, 84];
+            }),
         ];
     }