update table tree functional

agoalofalife · Mar 25, 2024 · 8f54f19 · 8f54f19
1 parent acb2914
commit 8f54f19
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 20 deletions.
diff --git a/public/js/orchid_fields.js b/public/js/orchid_fields.js
diff --git a/resources/js/controllers/table-tree_controller.js b/resources/js/controllers/table-tree_controller.js
@@ -9,12 +9,18 @@ export default class extends window.Controller {
         const hiddenColumns = JSON.parse(localStorage.getItem(this.slug));
 
         this.hiddenColumns = hiddenColumns || [];
+
+        // remove preloader
+        document.getElementById('table-tree-loader').classList.add('d-none');
+        document.getElementById('table-tree').classList.remove('d-none');
+
     }
 
     /**
      *
      */
     connect() {
+
         this.allowDefaultHidden();
         this.renderColumn();
 

diff --git a/resources/views/layouts/tree-table.blade.php b/resources/views/layouts/tree-table.blade.php
@@ -13,7 +13,13 @@
      data-table-slug="{{$slug}}"
 >
 
-    <div class="table-responsive">
+    <div id="table-tree-loader" class="d-flex justify-content-center align-items-center" style="height: 400px">
+        <div class="spinner-border" role="status">
+            <span class="visually-hidden">Loading...</span>
+        </div>
+    </div>
+
+    <div class="table-responsive d-none" id="table-tree" >
         <table @class([
                     'table',
                     'tree-table',
@@ -32,12 +38,11 @@
                 </tr>
                 </thead>
             @endif
-
             <tbody>
 
             @foreach($rows as $source)
                 <tr
-                    @if($source->getContent('parent') === $source->getContent($nameId) )
+                    @if($source->getContent('parent') === $source->getContent($nameId))
                         data-node-id="{{ $source->getContent($nameId) }}"
                     @else
                         data-node-id="{{ $source->getContent($nameId) }}" data-node-pid="{{  $source->getContent('parent') }}"

diff --git a/resources/views/partials/layouts/td.blade.php b/resources/views/partials/layouts/td.blade.php
@@ -1,13 +1,11 @@
 <td class="text-{{$align}} @if(!$width) text-truncate @endif"
+{{--    data-column="{{ $slug }}"--}}
     colspan="{{ $colspan }}"
-    style="
-    @empty(!$width)
-    min-width:{{ is_numeric($width) ? $width . 'px' : $width }};
-    @endempty
-    @if($isFirst)
-    display:flex;
-    @endif
-    "
+        @style([
+        "min-width:$width;" => $width,
+        "$style" => $style,
+         "display:flex" => $isFirst
+        ])
 >
     <div style="padding-left: 2%">
         @isset($render)

diff --git a/src/Layouts/TreeTable.php b/src/Layouts/TreeTable.php
@@ -15,15 +15,11 @@ class TreeTable extends Table
      * @var string
      */
     protected $template = 'platform-fields::layouts.tree-table';
-
-    public function __construct(string $target, protected array $columns, protected $nameId = 'id')
-    {
-        $this->target = $target;
-    }
+    protected $nameId = 'id';
 
     protected function columns(): iterable
     {
-        return $this->columns;
+        return [];
     }
 
     public function build(Repository $repository)

diff --git a/src/OrchidFieldsServiceProvider.php b/src/OrchidFieldsServiceProvider.php
@@ -8,6 +8,7 @@
 use Illuminate\Support\ServiceProvider;
 use Orchid\Platform\Dashboard;
 use Orchid\Screen\LayoutFactory;
+use Orchid\Screen\Layouts\Table;
 
 class OrchidFieldsServiceProvider extends ServiceProvider
 {
@@ -25,8 +26,26 @@ public function boot(Dashboard $dashboard): void
         $dashboard->registerResource('stylesheets', 'https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css');
 
         // tree table https://www.jqueryscript.net/table/simple-tree-table.html
-        LayoutFactory::macro('tableTree', function ($key, $columns, $nameId = 'id') {
-            return new TreeTable($key, $columns, $nameId);
+        LayoutFactory::macro('treeTable', function (string $target, array $columns, string $nameId = 'id') {
+            return new class($target, $columns, $nameId) extends TreeTable
+            {
+                /**
+                 * @var array
+                 */
+                protected $columns;
+
+                public function __construct(string $target, array $columns, string $nameId)
+                {
+                    $this->target = $target;
+                    $this->columns = $columns;
+                    $this->nameId = $nameId;
+                }
+
+                public function columns(): array
+                {
+                    return $this->columns;
+                }
+            };
         });
         $this->registerAssets();
     }