Laravel Nova 4 compatibility (#26)

* Upgraded laravel nova requirement to v4.0 * Support both v3 and v4 for backward compatibility * Nova 4 JS configuration update * Modal removed + icons replaced with SVGs * FilesController.php updated for Nova 4 API compatibility * Assets recompiled * Laravel Nova 3 support dropped due to breaking changes on FilesController * UploadController.php init method updated * Bug fix: Dependency not included * `deep:true` added to `filesQueue` watcher * Vue dependencies simplified * Asset compilation update * Panel fix for `FilesController@init` * `UploadController@init` panel fetch fix * UI fixes (dark and white mode) * fix: remove unnecessary statement * fix: update assets * fix: syntax improvement * fix: remove duplicate js scripts * fix: remove unused dependency * fix: formatting changes * feat: use Nova's Icons * feat: show delete confirmation modal * fix: laravel nova paths * feat: add dev dependencies * fix: nova composer repository added * feat: use default nova view and delete buttons * feat: dist build * feat: use `Button` for download icon --------- Co-authored-by: Nedelcescu Radu <[email protected]>
ahmedkandel · Feb 8, 2024 · d401e37 · d401e37
1 parent 99db95f
commit d401e37
Show file tree

Hide file tree

Showing 13 changed files with 177 additions and 92 deletions.
diff --git a/composer.json b/composer.json
@@ -13,7 +13,7 @@
         "name": "Ahmed Kandel"
     }],
     "require": {
-        "laravel/nova": "^3.12"
+        "laravel/nova": "^4.0"
     },
     "autoload": {
         "psr-4": {
@@ -30,6 +30,12 @@
     "config": {
         "sort-packages": true
     },
+    "repositories": [
+        {
+            "type": "composer",
+            "url": "https://nova.laravel.com"
+        }
+    ],
     "minimum-stability": "dev",
     "prefer-stable": true
 }
diff --git a/dist/css/tool.css b/dist/css/tool.css
diff --git a/dist/js/tool.js b/dist/js/tool.js
diff --git a/dist/js/tool.js.LICENSE.txt b/dist/js/tool.js.LICENSE.txt
@@ -21,12 +21,6 @@
  * @license  MIT
  */
 
-/*!
- * Vue.js v2.6.14
- * (c) 2014-2021 Evan You
- * Released under the MIT License.
- */
-
 /*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
 
 /**

diff --git a/nova.mix.js b/nova.mix.js
@@ -0,0 +1,34 @@
+const mix = require('laravel-mix')
+const webpack = require('webpack')
+const path = require('path')
+
+class NovaExtension {
+  name() {
+    return 'nova-extension'
+  }
+
+  register(name) {
+    this.name = name
+  }
+
+  webpackConfig(webpackConfig) {
+    webpackConfig.externals = {
+      vue: 'Vue',
+    }
+
+    webpackConfig.resolve.alias = {
+      ...(webpackConfig.resolve.alias || {}),
+      'laravel-nova': path.join(
+        __dirname,
+        'vendor/laravel/nova/resources/js/mixins/packages.js'
+      ),
+      '@': path.join(__dirname, './vendor/laravel/nova/resources/js'),
+    }
+
+    webpackConfig.output = {
+      uniqueName: this.name,
+    }
+  }
+}
+
+mix.extend('nova', new NovaExtension())
diff --git a/package.json b/package.json
@@ -1,34 +1,35 @@
 {
     "private": true,
     "scripts": {
+        "nova:install": "npm --prefix='../../vendor/laravel/nova' ci",
         "dev": "mix",
         "watch": "mix watch",
         "hot": "mix watch --hot",
         "prod": "mix --production",
         "format": "prettier --write 'resources/**/*.{css,js,vue}'"
     },
     "devDependencies": {
+        "@uppy/core": "^2.2.0",
+        "@vue/compiler-sfc": "^3.2.22",
         "autoprefixer": "^10.4.0",
         "cross-env": "^7.0.3",
-        "laravel-mix": "^6.0.39",
-        "postcss": "^8.4.5",
+        "laravel-nova-ui": "^0.4.0",
+        "laravel-mix": "^6.0.41",
+        "postcss": "^8.3.11",
         "postcss-dir-pseudo-class": "^6.0.1",
         "postcss-import": "^14.0.1",
         "postcss-logical": "^5.0.1",
         "prettier": "^2.5.1",
         "resolve-url-loader": "^4.0.0",
         "sass": "^1.47.0",
         "sass-loader": "^12.4.0",
-        "vue": "^2.6.14",
-        "vue-loader": "^15.9.8",
-        "vue-template-compiler": "^2.6.14"
+        "vue-loader": "^16.8.3"
     },
     "dependencies": {
         "@uppy/aws-s3-multipart": "^2.2.0",
         "@uppy/image-editor": "^1.1.1",
         "@uppy/screen-capture": "^2.0.6",
         "@uppy/vue": "^0.4.5",
-        "@uppy/webcam": "^2.0.5",
-        "laravel-nova": "^1.12.3"
+        "@uppy/webcam": "^2.0.5"
     }
 }
diff --git a/resources/js/components/FileCard.vue b/resources/js/components/FileCard.vue
@@ -24,46 +24,57 @@
             v-if="withMeta.canDownload || withMeta.canDelete"
             class="flex item-center ml-auto"
         >
-            <button
-                type="button"
-                v-if="withMeta.canDownload && withMeta.contentDisposition.includes('inline')"
-                v-tooltip.click="__('View')"
-                @keydown.enter.prevent="downloadFile('inline')"
-                @click.prevent="downloadFile('inline')"
-                class="cursor-pointer dim btn btn-link text-primary inline-flex items-center ml-3"
-            >
-                <icon type="view" view-box="0 0 22 16" width="16" height="16" />
-            </button>
-
-            <button
-                type="button"
-                v-if="withMeta.canDownload && withMeta.contentDisposition.includes('attachment')"
-                v-tooltip.click="__('Download')"
-                @keydown.enter.prevent="downloadFile('attachment')"
-                @click.prevent="downloadFile('attachment')"
-                class="cursor-pointer dim btn btn-link text-primary inline-flex items-center ml-3"
-            >
-                <icon type="download" view-box="2 2 20 20" width="16" height="16" />
-            </button>
-
-            <button
-                type="button"
-                v-if="withMeta.canDelete"
-                v-tooltip.click="__('Delete')"
-                @keydown.enter.prevent="openRemoveModal"
-                @click.prevent="openRemoveModal"
-                class="cursor-pointer dim btn btn-link text-primary inline-flex items-center ml-3"
-            >
-                <icon type="delete" view-box="0 0 20 20" width="16" height="16" />
-            </button>
+            <Button
+              v-if="withMeta.canDownload && withMeta.contentDisposition.includes('inline')"
+              as="Button"
+              @keydown.enter.prevent="downloadFile('inline')"
+              @click.stop="downloadFile('inline')"
+              v-tooltip.click="__('View')"
+              :aria-label="__('View')"
+              icon="eye"
+              variant="action"
+              class="hover:text-primary-500 dark:hover:text-primary-500"
+            />
+
+            <Button
+              v-if="withMeta.canDownload && withMeta.contentDisposition.includes('attachment')"
+              as="Button"
+              @keydown.enter.prevent="downloadFile('attachment')"
+              @click.stop="downloadFile('attachment')"
+              v-tooltip.click="__('Download')"
+              :aria-label="__('Download')"
+              icon="arrow down tray"
+              variant="action"
+              class="hover:text-primary-500 dark:hover:text-primary-500"
+            />
+
+            <Button
+              v-if="withMeta.canDelete"
+              as="Button"
+              @keydown.enter.prevent="openDeleteModal"
+              @click.stop="openDeleteModal"
+              v-tooltip.click="__('Delete')"
+              :aria-label="__('Delete')"
+              icon="trash"
+              variant="action"
+              class="hover:text-primary-500 dark:hover:text-primary-500"
+            />
         </div>
 
         <portal to="modals">
-            <confirm-upload-removal-modal
-                v-if="removeModalOpen"
-                @confirm="removeFile"
-                @close="closeRemoveModal"
-            />
+            <DeleteResourceModal
+              mode="delete"
+              :show="deleteModalOpen"
+              @confirm="removeFile"
+              @close="closeDeleteModal"
+            >
+              <ModalHeader v-text="__('Delete File')" />
+              <ModalContent>
+                <p class="leading-normal">
+                  {{ __('Are you sure you want to delete this file?') }}
+                </p>
+              </ModalContent>
+            </DeleteResourceModal>
         </portal>
     </card>
 </template>
@@ -72,14 +83,17 @@
 import { render } from 'preact';
 import getFileType from "@uppy/utils/lib/getFileType";
 import getFileTypeIcon from "@uppy/dashboard/lib/utils/getFileTypeIcon";
+import DeleteResourceModal from '@/components/Modals/DeleteResourceModal';
+import { Button } from 'laravel-nova-ui'
 
 export default {
+    components: { DeleteResourceModal, Button },
     props: ["fileKey", "fileName", "fileSize", "fileMeta", "apiUri", "withMeta"],
 
     data()
     {
         return {
-            removeModalOpen: false,
+            deleteModalOpen: false,
         };
     },
 
@@ -142,14 +156,14 @@ export default {
                 );
         },
 
-        openRemoveModal()
+        openDeleteModal()
         {
-            this.removeModalOpen = true;
+            this.deleteModalOpen = true;
         },
 
-        closeRemoveModal()
+        closeDeleteModal()
         {
-            this.removeModalOpen = false;
+            this.deleteModalOpen = false;
         },
 
         removeFile()
@@ -172,11 +186,6 @@ export default {
                     {
                         Nova.error(error.message);
                     }
-                )
-                .then(() =>
-                    {
-                        this.closeRemoveModal();
-                    }
                 );
         },
     }

diff --git a/resources/js/components/Tool.vue b/resources/js/components/Tool.vue
@@ -39,12 +39,14 @@ export default {
 
     watch:
     {
-        filesQueue: function ()
-        {
-            if (!this.isSaving && this.filesQueue.length)
-            {
-                this.processQueue();
-            }
+        filesQueue: {
+            handler: function (){
+                if (!this.isSaving && this.filesQueue.length)
+                {
+                    this.processQueue();
+                }
+            },
+            deep: true
         },
     },
 

diff --git a/resources/js/tool.js b/resources/js/tool.js
@@ -1,3 +1,5 @@
-Nova.booting((Vue, router, store) => {
-    Vue.component('nova-s3-multipart-upload', require('./components/Tool').default)
+import Tool from './components/Tool'
+
+Nova.booting((app, store) => {
+  app.component('nova-s3-multipart-upload', Tool)
 })
diff --git a/resources/sass/tool.scss b/resources/sass/tool.scss
@@ -50,6 +50,14 @@ $zIndex-5: 15 !default;
 @import '@uppy/image-editor/src/style.scss';
 @import '@uppy/dashboard/src/style.scss';
 
+.uppy-Root {
+    color: rgb(var(--colors-gray-500));
+}
+
+.dark .uppy-Root {
+    color: rgb(var(--colors-gray-400));
+}
+
 // Override Uppy
 .uppy-panel .uppy-Dashboard-inner {
     width: 100%;
@@ -60,21 +68,24 @@ $zIndex-5: 15 !default;
 .uppy-panel .uppy-size--md .uppy-Dashboard-AddFiles-title {
     font-size: 1.5rem;
     max-width: none;
+    color: rgba(var(--colors-gray-500));
+}
+.dark .uppy-Dashboard-AddFiles-title {
+    color: rgba(var(--colors-gray-400));
 }
-
 .uppy-panel .uppy-size--md .uppy-DashboardContent-title,
 .uppy-panel .uppy-size--md .uppy-DashboardContent-back,
 .uppy-panel .uppy-size--md .uppy-DashboardContent-addMore {
     font-size: 1rem;
 }
 
 .uppy-panel .uppy-DashboardContent-back {
-    color: #{"var(--danger)"};
+    color: rgb(var(--colors-rose-600));
     font-weight: 800;
 }
 
 .uppy-panel .uppy-DashboardContent-addMore {
-    color: #{"var(--primary)"};
+    color: rgb(var(--colors-primary-600));
     font-weight: 800;
 }
 
@@ -109,20 +120,32 @@ $zIndex-5: 15 !default;
 
 .uppy-panel .uppy-c-btn-primary,
 .uppy-panel .uppy-StatusBar.is-waiting .uppy-StatusBar-actionBtn--upload {
-    background-color: #{"var(--primary)"};
+    background-color: rgb(var(--colors-primary-600));
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 
 .uppy-panel .uppy-c-btn-primary:hover,
 .uppy-panel .uppy-StatusBar.is-waiting .uppy-StatusBar-actionBtn--upload:hover {
-    background-color: #{"var(--primary-dark)"};
+    background-color: rgba(var(--colors-gray-900), 0.6)
 }
 
 .uppy-panel .uppy-DashboardContent-bar,
-.uppy-panel .uppy-StatusBar.is-waiting {
-    border-color: #{"var(--50)"};
+.uppy-panel .uppy-StatusBar.is-waiting,
+.uppy-StatusBar {
+    background-color: var(--colors-gray-100);
+    border-color: rgb(var(--colors-primary-600));
+}
+
+.dark .uppy-panel .uppy-DashboardContent-bar,
+.dark .uppy-panel .uppy-StatusBar.is-waiting,
+.dark .uppy-StatusBar,
+.dark .uppy-StatusBar::before {
+    background-color: rgba(var(--colors-gray-900), 0.6);
 }
 
+.uppy-StatusBar.is-waiting .uppy-StatusBar-actions {
+    background-color:transparent;
+}
 // FilesGrid
 .files-grid {
     display: grid;

diff --git a/src/Http/Controllers/FilesController.php b/src/Http/Controllers/FilesController.php
@@ -5,6 +5,7 @@
 use Ahmedkandel\NovaS3MultipartUpload\NovaS3MultipartUpload;
 use Illuminate\Support\Facades\Storage;
 use Laravel\Nova\Http\Requests\NovaRequest;
+use Laravel\Nova\ResourceToolElement;
 
 class FilesController
 {
@@ -34,7 +35,14 @@ private function init($request)
 
         $this->model = $resource->model();
 
-        $this->tool = collect($resource->availablePanelsForDetail($request, $resource))
+        $fields = $resource->availableFields($request)
+            ->map(
+                fn ($field) => $field instanceof ResourceToolElement
+                    ? $field->assignedPanel
+                    : $field
+            );
+
+        $this->tool = $fields
             ->whereInstanceOf(NovaS3MultipartUpload::class)
             ->firstWhere('attribute', $request->route('field'));