Laravel Nova 5 Support (#33)

Author: alancolant

composer.json

@@ -14,7 +14,7 @@
     "license": "MIT",
     "require": {
         "php": ">=8.1",
-        "laravel/nova": "^4.28.0"
+        "laravel/nova": "^5.0"
     },
     "autoload": {
         "psr-4": {

dist/js/tool.js

@@ -1,3 +1,5 @@
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+
 /**!
  * Sortable 1.14.0
  * @author	RubaXa   <trash@rubaxa.org>

dist/js/tool.js.LICENSE.txt

@@ -2,7 +2,7 @@ import isEqual from 'lodash/isEqual'
 import cloneDeep from 'lodash/cloneDeep'
 
 export function toList(state) {
-    return state.filter(({ visible }) => visible).map(({ attribute }) => attribute)
+    return state.filter(({visible}) => visible).map(({attribute}) => attribute)
 }
 
 export function encode(state) {
@@ -13,9 +13,9 @@ export function decode(state) {
     return state ? JSON.parse(decodeURIComponent(escape(atob(state)))) : null
 }
 
-export function getStateFromLocalStorage(cacheKey) {
+export async function getStateFromLocalStorage(cacheKey) {
 
-    const value = localStorage.getItem(generateCacheKey(cacheKey))
+    const value = localStorage.getItem(await generateCacheKey(cacheKey))
 
     if (value === null) {
         return true
@@ -25,23 +25,24 @@ export function getStateFromLocalStorage(cacheKey) {
 
 }
 
-export function saveStateToLocalStorage(state, cacheKey) {
-    localStorage.setItem(generateCacheKey(cacheKey), encode(state))
+export async function saveStateToLocalStorage(state, cacheKey) {
+    localStorage.setItem(await generateCacheKey(cacheKey), encode(state))
 }
 
-export function generateCacheKey(cacheKey) {
+
+export async function generateCacheKey(cacheKey) {
     return [
         'column-toggler',
         cacheKey,
-        Nova.$router.page.component,
+        (await Nova.$router.decryptHistory()).props?.lens,
         Nova.config('column_toggler').enable_sorting,
     ].join('/')
 }
 
 export function registerMixin(component) {
 
     if (component.computed.resourceRequestQueryString === undefined) {
-        component = component.mixins.find(({ computed }) => typeof computed.resourceRequestQueryString === 'function')
+        component = component.mixins.find(({computed}) => typeof computed.resourceRequestQueryString === 'function')
     }
 
     const originalResourceRequestQueryString = component.computed.resourceRequestQueryString
@@ -53,19 +54,22 @@ export function registerMixin(component) {
         unmounted() {
             Nova.$off(this.columnTogglerEventKey, this.columnTogglerOnStateChange)
         },
+        async beforeMount() {
+            this.columnTogglerState = await  getStateFromLocalStorage(this.resourceName)
+        },
         data() {
             return {
-                columnTogglerState: getStateFromLocalStorage(this.resourceName),
+                columnTogglerState: true,
             }
         },
         methods: {
-            columnTogglerOnStateChange(state) {
+            async columnTogglerOnStateChange(state) {
 
                 const currentState = this.columnTogglerState
 
                 if (isEqual(state, currentState) === false) {
 
-                    saveStateToLocalStorage(state, this.resourceName)
+                    await saveStateToLocalStorage(state, this.resourceName)
 
                     this.columnTogglerState = cloneDeep(state)
 
@@ -79,14 +83,13 @@ export function registerMixin(component) {
         },
         computed: {
             columnTogglerEventKey() {
-                return `column-toggler:state-changed:${ [ this.resourceName, this.lens, this.actionQueryString?.viaRelationship ].filter(Boolean).join('/') }`
+                return `column-toggler:state-changed:${[this.resourceName, this.lens, this.actionQueryString?.viaRelationship].filter(Boolean).join('/')}`
             },
             columnTogglerEncodedColumns() {
 
                 if (typeof this.columnTogglerState === 'boolean') {
                     return this.columnTogglerState
                 }
-
                 const columns = toList(this.columnTogglerState)
 
                 if (columns.length === 0) {

resources/js/components/ColumnToggler.js

@@ -143,14 +143,13 @@
             },
         },
         watch: {
-            'tableToolbar.resources'(resources) {
+            async 'tableToolbar.resources'(resources) {
 
                 const attributes = resources[ 0 ]?.columnToggler
 
                 if (attributes) {
 
-                    let localStorageState = getStateFromLocalStorage(this.tableToolbar.resourceName)
-
+                    let localStorageState = await getStateFromLocalStorage(this.tableToolbar.resourceName)
                     if (localStorageState && this.isDifferentState(attributes, localStorageState)) {
                         localStorageState = attributes
                     }

resources/js/components/ColumnToggler.vue

@@ -1,14 +1,35 @@
 import ColumnToggler from './components/ColumnToggler.vue'
-import { registerMixin } from './components/ColumnToggler'
-import { createVNode, render } from 'vue'
+import {registerMixin} from './components/ColumnToggler'
+import {createVNode, render} from 'vue'
 
 try {
 
-    registerMixin(Nova.pages[ 'Nova.Lens' ].components[ 'ResourceLens' ])
+    const page = Nova.pages['Nova.Lens']
+    if (!page || typeof page.setup !== 'function') {
+        throw new Error('Nova.Lens page or setup function not found');
+    }
+
+    const originalSetup = page.setup;
 
-} catch {
+    page.setup = (...args) => {
+        const result = originalSetup(...args);
 
-    console.error('ColumnToggler: Unable to register mixin for Lens view')
+        if (typeof result === 'function') {
+            return (...renderArgs) => {
+                const vnode = result(...renderArgs);
+                if (vnode.type?.name === 'Lens') {
+                    registerMixin(vnode.type);
+                }
+
+                return vnode;
+            };
+        }
+
+        console.warn('Setup did not return a render function');
+        return result;
+    };
+} catch (e) {
+    console.error('ColumnToggler: Unable to register mixin for Lens view', e)
 
 }
 
@@ -17,7 +38,6 @@ Nova.booting(app => {
     const componentFn = app.component
 
     app.component = function (name, component) {
-
         if (name === 'ResourceIndex') {
             registerMixin(component)
         }
@@ -40,11 +60,11 @@ Nova.booting(app => {
                 let target
 
                 if (relationship) {
-                    target = `[dusk="${ resourceName }-index-component"][data-relationship="${ relationship }"] div.h-9.ml-auto.flex.items-center.pr-2.md\\:pr-3 > div.hidden.md\\:flex.px-2`
+                    target = `[dusk="${resourceName}-index-component"][data-relationship="${relationship}"] div.h-9.ml-auto.flex.items-center.pr-2.md\\:pr-3 > div.hidden.md\\:flex.px-2`
                 } else if (this.isLensView) {
-                    target = `[dusk="${ resourceName }-lens-component"] div.h-9.ml-auto.flex.items-center.pr-2.md\\:pr-3 > div.hidden.md\\:flex.px-2`
+                    target = `[dusk="${resourceName}-lens-component"] div.h-9.ml-auto.flex.items-center.pr-2.md\\:pr-3 > div.hidden.md\\:flex.px-2`
                 } else {
-                    target = `[dusk="${ resourceName }-index-component"] div.h-9.ml-auto.flex.items-center.pr-2.md\\:pr-3 > div.hidden.md\\:flex.px-2`
+                    target = `[dusk="${resourceName}-index-component"] div.h-9.ml-auto.flex.items-center.pr-2.md\\:pr-3 > div.hidden.md\\:flex.px-2`
                 }
 
                 const element = this._.vnode.el.querySelector(target)
@@ -53,7 +73,7 @@ Nova.booting(app => {
 
                     element.insertAdjacentElement('afterend', container)
 
-                    const vnode = createVNode(ColumnToggler, { tableToolbar: this })
+                    const vnode = createVNode(ColumnToggler, {tableToolbar: this})
                     vnode.appContext = app._context
 
                     render(vnode, container)