Fixes on reordering categories

Gruntfile.js

@@ -18,6 +18,7 @@ var jsMain = [
 //	'node_modules/jQuery-QueryBuilder/dist/js/jquery-builder.standalone.min.js',
 /*	'node_modules/jQuery-QueryBuilder/dist/i18n/query-builder.fr.js', */
 /*	'node_modules/isotope-layout/dist/isotope.pkgd.min.js', */
+	'node_modules/jquery-serializejson/jquery.serializejson.min.js',
 	'node_modules/bootstrap4-toggle/js/bootstrap4-toggle.min.js',
 	'node_modules/wew.js/dist/wew.min.js',
 	'node_modules/jquery.are-you-sure/jquery.are-you-sure.js',

app/DataTables/ParentDataTable.php

@@ -10,6 +10,10 @@ use Yajra\DataTables\Services\DataTable;
 
 class ParentDataTable extends DataTable
 {
+    public $rowReorder;
+    public $colReorder;         // ['selector' => 'tr']
+    public $fixedColumns;       // ['leftColumns' => 1, 'rightColumns' => 1]
+
      /**
      * Build DataTable class.
      *
@@ -18,7 +22,12 @@ class ParentDataTable extends DataTable
      */
     public function dataTable($query)
     {
-        return $this->addButtons(datatables()->eloquent($query));
+        return $this->modifier(datatables()->eloquent($query));
+    }
+
+    public function modifier($datatables)
+    {
+        return $this->addButtons($datatables);
     }
 
     /**
@@ -46,11 +55,11 @@ class ParentDataTable extends DataTable
     public function makeColumnButtons()
     {
         return Column::computed('action')
+            ->title('')
             ->exportable(false)
             ->printable(false)
             ->searchable(false)
-            ->width(120)
+            ->addClass('text-center text-nowrap');
-            ->addClass('text-center');
     }
 
     /**
@@ -86,19 +95,30 @@ class ParentDataTable extends DataTable
                     ->setTableId($id)
                     ->parameters($this->getParameters())
                     ->columns($this->getColumns())
-                    ->minifiedAjax()
+                    ->ajax(['data' => "function(d) { d.filters = $('#filters').serializeJSON(); }"])
                     ->dom($this->getDom())
                     ->orderBy(0,'asc')
-                    ->buttons(
+                    ->buttons($this->getButtons());
-                        Button::make('export'),
+    }
-                        Button::make('print')
+
-                    );
+    public function getButtons() {
+        return [
+            Button::make('export'),
+            Button::make('print'),
+            Button::make('colvis'),
+            Button::make('columnsToggle')
+        ];
     }
 
     public function getParameters()
     {
         return [
-            'pageLength' => 10
+            'pageLength' => 5,
+            'scrollX' => true,
+            'scrollCollapse' => true,
+            'colReorder' => $this->colReorder,
+            'rowReorder' => $this->rowReorder,
+            'fixedColumns' => $this->fixedColumns,
         ];
     }
 
@@ -106,7 +126,7 @@ class ParentDataTable extends DataTable
     {
         $dom = '';
         // $dom .= $this->getDatatablesHeaderDefault();
-        $dom .= "tr";
+        $dom .= "<'overlay-block'r<t>>";
         $dom .= $this->getDatatablesFooterDefault();
         return $dom;
     }
@@ -136,7 +156,7 @@ class ParentDataTable extends DataTable
     }
 
     public function getDatatablesFooterDefault() {
-        return "<'row dt-toolbar-footer'<'col-md-6'i><'col-md-6'p>>";
+        return "<'row pt-3 dt-toolbar-footer'<'col-md-6'i><'col-md-6'p>>";
     }
 
     /**
@@ -154,8 +174,8 @@ class ParentDataTable extends DataTable
      *
      * @return string
      */
-    protected function buildFilename($models_name)
+    protected function buildFilename($name)
     {
-        return $models_name . '_' . date('YmdHis');
+        return $name . '_' . date('YmdHis');
     }
 }

app/DataTables/Shop/CategoriesDataTable.php

@@ -12,6 +12,7 @@ class CategoriesDataTable extends DataTable
 
 	public function query(Category $model)
 	{
+		$model = $model::withCount('articles');
 		return self::buildQuery($model);
 	}
 
@@ -19,6 +20,7 @@ class CategoriesDataTable extends DataTable
 	{
 		return [
 			Column::make('name')->title('Nom'),
+			Column::make('articles_count')->title('Nb Articles')->class('text-right')->searchable(false),
 			self::makeColumnButtons(),
 		];
 	}

app/DataTables/Shop/TagsDataTable.php

@@ -9,6 +9,7 @@ use App\Models\Shop\Tag;
 class TagsDataTable extends DataTable
 {
 	public $model_name = 'Tags';
+	public $rowReorder = ['selector' => 'tr'];
 
 	public function query(Tag $model)
 	{

app/Http/Controllers/Shop/Admin/CategoryController.php

@@ -72,4 +72,12 @@ class CategoryController extends Controller
         return Categories::deleteImage($id, $index);
     }
 
+    public function moveTree(Request $request)
+    {
+        $node_id = $request->input('node_id');
+        $target_id = $request->input('target_id');
+        $type = $request->input('type');
+        return Categories::moveTree($node_id, $target_id, $type);
+    }
+
 }

app/Models/Shop/Category.php

@@ -5,7 +5,7 @@ namespace App\Models\Shop;
 use Illuminate\Database\Eloquent\Model;
 use Spatie\MediaLibrary\HasMedia\HasMedia;
 use Spatie\MediaLibrary\HasMedia\HasMediaTrait;
-use Rinvex\Categories\Traits\Categorizable;
+// use Rinvex\Categories\Traits\Categorizable;
 use Rinvex\Tags\Traits\Taggable;
 // use Conner\Tagging\Taggable;
 use Fico7489\Laravel\EloquentJoin\Traits\EloquentJoin;
@@ -18,14 +18,9 @@ class Category extends Model
     protected $guarded = ['id'];
     protected $table = 'shop_categories'; 
 
-    public function Category()
+    public function Articles()
     {
-        return $this->hasMany('App\Models\Category');
+        return $this->morphedByMany('App\Models\Shop\Article', 'categorizable');
-    }
-
-    public function Products()
-    {
-        return $this->hasMany('App\Models\Shop\Product');
     }
 
 }

app/Repositories/Shop/Categories.php

@@ -99,6 +99,11 @@ class Categories
         return "1";
     }
 
+    public static function moveTree($node_id, $target_id, $type)
+    {
+        return CategoryTrees::moveTree($node_id, $target_id, $type);
+    }
+
     public static function create($data)
     {
         $node = CategoryTrees::create($data);

app/Repositories/Shop/CategoryTrees.php

@@ -8,7 +8,7 @@ class CategoryTrees
 {
     public static function getTree()
     {
-        $categories = app('rinvex.categories.category')->get()->toTree()->toArray();
+        $categories = app('rinvex.categories.category')->orderBy('_lft','asc')->get()->toTree()->toArray();
         return self::getChildren($categories[0]['children']);
     } 
 
@@ -29,6 +29,25 @@ class CategoryTrees
         return $tree;
     }
 
+    public static function moveTree($node_id, $target_id, $type)
+    {
+        $category = self::getNode($node_id);
+        $category_target = self::getNode($target_id);
+
+        switch ($type) {
+            case 'after':
+                dump("$node_id After $target_id");
+                $category->afterNode($category_target);
+                break;
+            case 'inside':
+                dump("$node_id inside $target_id");
+                $category_target->appendNode($category);
+                break;
+        }
+        $category->save();
+        return "1";
+    }
+
 
     public static function create($data)
     {

resources/views/Shop/Admin/Categories/partials/tree.blade.php

@@ -13,12 +13,58 @@
 
 @push('scripts')
 	<script>
+		var position = '';
+		var target_node = '';
+
 		$(function() {
-		    $('#tree1').tree({
+
+		    var $tree = $('#tree1').tree({
 			  	dragAndDrop: true,
+			  	onDragStop: handleMove,
 			  	autoOpen: 0
 			});
+
+
+			$tree.on('tree.move', function(e) {
+			    // e.preventDefault();
+
+			    position = e.move_info.position;
+			    target_node = e.move_info.target_node;
+
+			    function getNewParentNode() {
+			        if (position == 'inside') {
+			            return target_node;
+			        }
+			        else {
+			            // before or after
+			            return target_node.parent;
+			        }
+			    }
+
+			    var parent_node = getNewParentNode();
+			    console.log("Parent node", parent_node);
+			});
+
+
 		});
+
+		function handleMove(node, e) {
+    		console.log(node);
+    		node_id = node.id;
+    		console.log(node_id);
+    		console.log(position);
+    		console.log(target_node);
+    		target_node_id = target_node.id;
+
+    		$.ajax({
+  				method: "POST",
+  				url: "{{ route('Shop.Admin.Categories.moveTree') }}",
+  				data: { node_id: node.id, type: position, target_id: target_node.id }
+			});
+    		// console.log(e);
+    		// console.log($('#tree1').tree('getTree'));
+		}
+
 	</script>
 @endpush
 

resources/views/load/fancytree.blade.php

@@ -7,7 +7,7 @@
 	<script src="/modules/fancytree/jquery.fancytree-all-deps.min.js"></script>
 
 	<script>
-		$(function(){
+		$(function() {
 			// Initialize Fancytree
 			$("#tree").fancytree({
 				extensions: ["childcounter", "dnd5", "edit", "glyph", "wide"],
@@ -15,13 +15,31 @@
 				checkbox: false,
 				selectMode: 3,
 				dnd5: {
-					dragStart: function(node, data) { return true; },
+					dragStart: function(node, data) {
-					dragEnter: function(node, data) { return true; },
+						return true;
-					dragDrop: function(node, data) { data.otherNode.copyTo(node, data.hitMode); }
+					},
+					dragEnter: function(node, data) {
+						return true;
+					},
+					dragDrop: function(node, data) {
+						alert("Drop on " + node + ":\n"
+          + "source:" + JSON.stringify(data.otherNodeData) + "\n"
+          + "hitMode:" + data.hitMode
+          + ", dropEffect:" + data.dropEffect
+          + ", effectAllowed:" + data.effectAllowed);
+
+
+						console.log(node);
+						console.log(data); 
+						data.otherNode.copyTo(node, data.hitMode);
+					}
 				},
 				glyph: glyph_opts,
 				// source: {url: "ajax-tree-taxonomy.json", debugDelay: 1000},
-				source: {url: "ajax-tree-products.json", debugDelay: 1000},
+				source: {
+					url: "ajax-tree-products.json",
+					debugDelay: 1000
+				},
 				// toggleEffect: { effect: "drop", options: {direction: "left"}, duration: 400 },
 				wide: {
 					iconWidth: "1em",       // Adjust this if @fancy-icon-width != "16px"
@@ -40,7 +58,10 @@
 					// }
 				},
 				lazyLoad: function(event, data) {
-					data.result = {url: "ajax-sub2.json", debugDelay: 1000};
+					data.result = {
+						url: "ajax-sub2.json",
+						debugDelay: 1000
+					};
 				}
 			});
 		};

routes/Shop/Admin/Categories.php

@@ -10,6 +10,7 @@ Route::prefix('Categories')->name('Categories.')->group(function () {
 
 	Route::any('getImages/{id?}', 'CategoryController@getImages')->name('getImages');
 	Route::post('deleteImage', 'CategoryController@deleteImage')->name('deleteImage');
+	Route::post('moveTree', 'CategoryController@moveTree')->name('moveTree');
 
 });