Merge pull request #1282 from lee-to/table-builder-lazy

feat: TableBuilder lazy
moonshine-software · Oct 2, 2024 · f87f1b3 · f87f1b3
2 parents 93183c9 + 9832ccf
commit f87f1b3
Show file tree

Hide file tree

Showing 7 changed files with 144 additions and 98 deletions.
diff --git a/src/Laravel/config/moonshine.php b/src/Laravel/config/moonshine.php
@@ -22,9 +22,8 @@
 return [
     'title' => env('MOONSHINE_TITLE', 'MoonShine'),
     'domain' => env('MOONSHINE_DOMAIN'),
-
-    'prefix' => 'admin',
-    'page_prefix' => 'page',
+    'prefix' => env('MOONSHINE_ROUTE_PREFIX', 'admin'),
+    'page_prefix' =>env('MOONSHINE_PAGE_PREFIX', 'page'),
 
     'middleware' => [
         EncryptCookies::class,

diff --git a/src/UI/dist/assets/app.js b/src/UI/dist/assets/app.js
diff --git a/src/UI/resources/js/Components/TableBuilder.js b/src/UI/resources/js/Components/TableBuilder.js
@@ -2,6 +2,7 @@ import {crudFormQuery} from '../Support/Forms.js'
 import sortableFunction from './Sortable.js'
 import {listComponentRequest} from '../Request/Sets.js'
 import {urlWithQuery} from '../Request/Core.js'
+import {dispatchEvents} from '../Support/DispatchEvents.js'
 
 export default (
   creatable = false,
@@ -13,6 +14,7 @@ export default (
   actionsOpen: false,
   lastRow: null,
   table: null,
+  container: null,
   block: null,
   async: async,
   asyncUrl: asyncUrl,
@@ -23,6 +25,8 @@ export default (
   init() {
     this.block = this.$root
     this.table = this.$root.querySelector('table')
+    this.container = this.$root.closest('.js-table-builder-container')
+
     const removeAfterClone = this.table?.dataset?.removeAfterClone
     const tbody = this.table?.querySelector('tbody')
     const tfoot = this.table?.querySelector('tfoot')
@@ -56,6 +60,14 @@ export default (
     }
 
     this.initColumnSelection()
+
+    if(this.container?.dataset?.lazy) {
+      const event = this.container?.dataset?.lazy
+      this.container.removeAttribute('data-lazy')
+
+      this.$nextTick(() => dispatchEvents(event, 'success', this))
+
+    }
   },
   add(force = false) {
     if (!this.creatable && !force) {

diff --git a/src/UI/resources/js/Request/Sets.js b/src/UI/resources/js/Request/Sets.js
@@ -77,7 +77,10 @@ export function listComponentRequest(component, pushState = false) {
         dispatchEvents(t.$root.dataset.events, 'success', t)
       }
 
-      t.$root.outerHTML = data
+      let tempElement = document.createElement('div');
+      tempElement.innerHTML = data;
+
+      t.$root.outerHTML = tempElement.firstElementChild.innerHTML
       t.loading = false
     })
     .withErrorCallback(stopLoading)

diff --git a/src/UI/resources/views/components/table/builder.blade.php b/src/UI/resources/views/components/table/builder.blade.php
@@ -16,112 +16,118 @@
     'reorderable' => false,
     'searchable' => false,
     'sticky' => false,
+    'lazy' => false,
     'columnSelection' => false,
     'searchValue' => '',
     'translates' => [],
 ])
-<div x-data="tableBuilder(
+<div
+    class="js-table-builder-container"
+    @if($async && $lazy) data-lazy="{{ "table_updated:$name" }}" @endif
+>
+    <div x-data="tableBuilder(
     {{ (int) $creatable }},
     {{ (int) $reorderable }},
     {{ (int) $reindex }},
     {{ (int) $async }},
     '{{ $asyncUrl }}'
 )"
-     data-pushstate="{{ $attributes->get('data-pushstate', false)}}"
-    @defineEvent('table_row_added', $name, 'add(true)')
-    @defineEvent('table_reindex', $name, 'resolveReindex')
-    @defineEventWhen($async, 'table_updated', $name, 'asyncRequest')
-    {{ $attributes->only(['data-events'])}}
->
-    @if($async && $searchable)
-        <div class="flex items-center gap-2">
-            <form action="{{ $asyncUrl }}"
-                  @submit.prevent="asyncFormRequest"
-            >
-                <x-moonshine::form.input
-                    name="search"
-                    type="search"
-                    value="{{ $searchValue }}"
-                    placeholder="{{ $translates['search'] }}"
-                />
-            </form>
-        </div>
-    @endif
+         data-pushstate="{{ $attributes->get('data-pushstate', false)}}"
+        @defineEvent('table_row_added', $name, 'add(true)')
+        @defineEvent('table_reindex', $name, 'resolveReindex')
+        @defineEventWhen($async, 'table_updated', $name, 'asyncRequest')
+        {{ $attributes->only(['data-events'])}}
+    >
+        @if($async && $searchable)
+            <div class="flex items-center gap-2">
+                <form action="{{ $asyncUrl }}"
+                      @submit.prevent="asyncFormRequest"
+                >
+                    <x-moonshine::form.input
+                        name="search"
+                        type="search"
+                        value="{{ $searchValue }}"
+                        placeholder="{{ $translates['search'] }}"
+                    />
+                </form>
+            </div>
+        @endif
 
-    @if($columnSelection)
-    <x-moonshine::layout.flex justify-align="end">
-        <x-moonshine::dropdown>
-            <div class="p-2">
-                @foreach($columns as $column => $label)
-                    <div class="form-group form-group-inline">
-                        <x-moonshine::form.switcher
-                            :id="'column_selection_' . $column"
-                            data-column-selection-checker="true"
-                            data-column="{{ $column }}"
-                            @change="columnSelection()"
-                        />
+        @if($columnSelection)
+            <x-moonshine::layout.flex justify-align="end">
+                <x-moonshine::dropdown>
+                    <div class="p-2">
+                        @foreach($columns as $column => $label)
+                            <div class="form-group form-group-inline">
+                                <x-moonshine::form.switcher
+                                    :id="'column_selection_' . $column"
+                                    data-column-selection-checker="true"
+                                    data-column="{{ $column }}"
+                                    @change="columnSelection()"
+                                />
 
-                        <x-moonshine::form.label :for="'column_selection_' . $column">
-                            {{ $label }}
-                        </x-moonshine::form.label>
+                                <x-moonshine::form.label :for="'column_selection_' . $column">
+                                    {{ $label }}
+                                </x-moonshine::form.label>
+                            </div>
+                        @endforeach
                     </div>
-                @endforeach
-            </div>
 
-            <x-slot:toggler>
-                <x-moonshine::icon icon="table-cells" />
-            </x-slot:toggler>
-        </x-moonshine::dropdown>
-    </x-moonshine::layout.flex>
-    @endif
+                    <x-slot:toggler>
+                        <x-moonshine::icon icon="table-cells" />
+                    </x-slot:toggler>
+                </x-moonshine::dropdown>
+            </x-moonshine::layout.flex>
+        @endif
 
-    <x-moonshine::loader x-show="loading" />
-    <div x-show="!loading">
-        <x-moonshine::table
-            :simple="$simple"
-            :notfound="$notfound"
-            :attributes="$attributes"
-            :headAttributes="$headAttributes"
-            :bodyAttributes="$bodyAttributes"
-            :footAttributes="$footAttributes"
-            :creatable="$creatable"
-            :sticky="$sticky"
-            :translates="$translates"
-            data-name="{{ $name }}"
-        >
-            @if($headRows->isNotEmpty())
-                <x-slot:thead>
-                    @foreach($headRows as $row)
-                        {!! $row !!}
-                    @endforeach
-                </x-slot:thead>
-            @endif
+        <x-moonshine::loader x-show="loading" />
+        <div x-show="!loading">
+            <x-moonshine::table
+                :simple="$simple"
+                :notfound="$notfound"
+                :attributes="$attributes"
+                :headAttributes="$headAttributes"
+                :bodyAttributes="$bodyAttributes"
+                :footAttributes="$footAttributes"
+                :creatable="$creatable"
+                :sticky="$sticky"
+                :translates="$translates"
+                data-name="{{ $name }}"
+            >
+                @if($headRows->isNotEmpty())
+                    <x-slot:thead>
+                        @foreach($headRows as $row)
+                            {!! $row !!}
+                        @endforeach
+                    </x-slot:thead>
+                @endif
 
-            @if($rows->isNotEmpty())
-                <x-slot:tbody>
-                    @foreach($rows as $row)
-                        {!! $row !!}
-                    @endforeach
-                </x-slot:tbody>
-            @endif
+                @if($rows->isNotEmpty())
+                    <x-slot:tbody>
+                        @foreach($rows as $row)
+                            {!! $row !!}
+                        @endforeach
+                    </x-slot:tbody>
+                @endif
 
-            @if($footRows->isNotEmpty())
-                <x-slot:tfoot>
-                    @foreach($footRows as $row)
-                        {!! $row !!}
-                    @endforeach
-                </x-slot:tfoot>
-            @endif
-        </x-moonshine::table>
+                @if($footRows->isNotEmpty())
+                    <x-slot:tfoot>
+                        @foreach($footRows as $row)
+                            {!! $row !!}
+                        @endforeach
+                    </x-slot:tfoot>
+                @endif
+            </x-moonshine::table>
 
-        @if($creatable)
-            <x-moonshine::layout.divider />
+            @if($creatable)
+                <x-moonshine::layout.divider />
 
-            {!! $createButton !!}
-        @endif
+                {!! $createButton !!}
+            @endif
 
-        @if($hasPaginator)
-            {!! $paginator !!}
-        @endif
+            @if($hasPaginator)
+                {!! $paginator !!}
+            @endif
+        </div>
     </div>
 </div>
diff --git a/src/UI/src/Traits/HasAsync.php b/src/UI/src/Traits/HasAsync.php
@@ -22,6 +22,17 @@ public function isAsync(): bool
         return ! is_null($this->asyncUrl);
     }
 
+    /**
+     * @param  Closure(static $ctx): static  $callback
+     */
+    public function whenAsync(Closure $callback): static
+    {
+        return $this->when(
+            fn() => $this->getCore()->getRequest()->get('_component_name') === $this->getName(),
+            fn() => $callback($this)
+        );
+    }
+
     protected function prepareAsyncUrl(Closure|string|null $url = null): Closure|string|null
     {
         return $url;

diff --git a/src/UI/src/Traits/Table/TableStates.php b/src/UI/src/Traits/Table/TableStates.php
@@ -38,6 +38,8 @@ trait TableStates
 
     protected bool $isSticky = false;
 
+    protected bool $isLazy = false;
+
     protected bool $isColumnSelection = false;
 
     protected bool $searchable = false;
@@ -201,6 +203,18 @@ public function isSticky(): bool
         return $this->isSticky;
     }
 
+    public function lazy(): static
+    {
+        $this->isLazy = true;
+
+        return $this;
+    }
+
+    public function isLazy(): bool
+    {
+        return $this->isLazy;
+    }
+
     public function columnSelection(): static
     {
         $this->isColumnSelection = true;
@@ -267,6 +281,7 @@ public function statesToArray(): array
             'reorderable' => $this->isReorderable(),
             'simple' => $this->isSimple(),
             'sticky' => $this->isSticky(),
+            'lazy' => $this->isLazy(),
             'columnSelection' => $this->isColumnSelection(),
             'searchable' => $this->isSearchable(),
             'searchValue' => $this->getCore()->getRequest()->get('search', ''),