Init Sortable links.

app/Http/Controllers/UserController.php

@@ -134,10 +134,50 @@ class UserController extends Controller
         $links->title = $title;
         $links->button_id = $buttonId;
         $links->save();
+        $links->order = (intval($links->id) - 1);
+        $links->save();
 
         return back();
     }
 
+    public function sortLinks(Request $request)
+    {
+        $linkOrders  = $request->input("linkOrders", []);
+        $currentPage = $request->input("currentPage", 1);
+        $perPage     = $request->input("perPage", 0);
+
+        if ($perPage == 0) {
+            $currentPage = 1;
+        }
+
+        $linkOrders = array_unique(array_filter($linkOrders));
+        if (!$linkOrders || $currentPage < 1) {
+            return response()->json([
+                'status' => 'ERROR',
+            ]);
+        }
+
+        $newOrder = $startLinkOrder = $perPage * ($currentPage - 1);
+        $linkNewOrders = [];
+        foreach ($linkOrders as $linkId) {
+            if ($linkId < 0) {
+                continue;
+            }
+
+            $linkNewOrders[$linkId] = $newOrder;
+            Link::where("id", $linkId)
+                ->update([
+                    'order' => $newOrder
+                ]);
+            $newOrder++;
+        }
+
+        return response()->json([
+            'status' => 'OK',
+            'linkOrders' => $linkNewOrders,
+        ]);
+    }
+
     //Count the number of clicks and redirect to link
     public function clickNumber(request $request)
     {
@@ -165,6 +205,7 @@ class UserController extends Controller
     public function showLinks()
     {
         $userId = Auth::user()->id;
+        $data['pagePage'] = 10;
         
         $data['links'] = Link::select('id', 'link', 'title', 'order', 'click_number', 'up_link', 'links.button_id')->where('user_id', $userId)->orderBy('up_link', 'asc')->orderBy('order', 'asc')->paginate(10);
         return view('studio/links', $data);
@@ -174,6 +215,7 @@ class UserController extends Controller
     public function showLinks20()
     {
         $userId = Auth::user()->id;
+        $data['pagePage'] = 20;
         
         $data['links'] = Link::select('id', 'link', 'title', 'order', 'click_number', 'up_link', 'links.button_id')->where('user_id', $userId)->orderBy('up_link', 'asc')->orderBy('order', 'asc')->paginate(20);
         return view('studio/links', $data);
@@ -183,6 +225,7 @@ class UserController extends Controller
     public function showLinks30()
     {
         $userId = Auth::user()->id;
+        $data['pagePage'] = 30;
         
         $data['links'] = Link::select('id', 'link', 'title', 'order', 'click_number', 'up_link', 'links.button_id')->where('user_id', $userId)->orderBy('up_link', 'asc')->orderBy('order', 'asc')->paginate(30);
         return view('studio/links', $data);
@@ -192,6 +235,7 @@ class UserController extends Controller
     public function showLinksAll()
     {
         $userId = Auth::user()->id;
+        $data['pagePage'] = 0;
         
         $data['links'] = Link::select('id', 'link', 'title', 'order', 'click_number', 'up_link', 'links.button_id')->where('user_id', $userId)->orderBy('up_link', 'asc')->orderBy('order', 'asc')->paginate(10000000000);
         return view('studio/links', $data);

img/.gitignore

@@ -1,3 +1,6 @@
 *
 !.gitignore
 !user.png
+!drag-dark.png
+!drag.png
+!loading.gif

resources/views/layouts/sidebar.blade.php

@@ -7,6 +7,7 @@
 @include('layouts.analytics')
 
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="csrf-token" content="{{ csrf_token() }}">
     <link rel="stylesheet" href="{{ asset('littlelink/css/hover-min.css') }}">
     <link rel="stylesheet" href="{{ asset('littlelink/css/animate.css') }}">
 
@@ -376,6 +377,8 @@ if(localStorage.getItem("firstTime")==null){
     <script src="{{ asset('/studio/js/jquery.min.js') }}"></script>
     <script src="{{ asset('/studio/js/popper.js') }}"></script>
     <script src="{{ asset('/studio/js/bootstrap.min.js') }}"></script>
+	<script src="{{ asset('/studio/js/Sortable.min.js') }}"></script>
+	<script src="{{ asset('/studio/js/jquery-block-ui.js') }}"></script>
     <script src="{{ asset('/studio/js/main-dashboard.js') }}"></script>
 
 	@stack('sidebar-scripts')

resources/views/studio/links.blade.php

@@ -29,10 +29,10 @@
             <th scope="col">Delete</th>
           </tr>
         </thead>
-        <tbody>
+        <tbody id="links-table-body" data-page="{{request('page', 1)}}" data-per-page="{{$pagePage ? $pagePage : 0}}">
         @foreach($links as $link)
-          <tr>
+          <tr data-id="{{$link->id}}">
-            <td title="{{ $link->link }}">{{ Str::limit($link->link, 30) }}</td>
+            <td title="{{ $link->link }}"><span class="sortable-handle"></span> {{ Str::limit($link->link, 30) }}</td>
             <td title="{{ $link->title }}">{{ Str::limit($link->title, 30) }}</td>
             <td class="text-right">{{ $link->click_number }}</td>
             <td class="text-right">{{ $link->order }}</td>
@@ -50,6 +50,9 @@
           @endforeach
         </tbody>
         </table>
+        <script type="text/javascript">
+          const linksTableOrders = "{{ implode("|", $links->pluck('id')->toArray()) }}"
+        </script>
 </div>
 
             <ul class="pagination justify-content-center">

routes/web.php

@@ -74,6 +74,7 @@ if(env('FORCE_HTTPS') == 'true'){URL::forceScheme('https');}
 if(isset($_COOKIE['LinkCount'])){if($_COOKIE['LinkCount'] == '20'){$LinkPage = 'showLinks20';}elseif($_COOKIE['LinkCount'] == '30'){$LinkPage = 'showLinks30';}elseif($_COOKIE['LinkCount'] == 'all'){$LinkPage = 'showLinksAll';} else {$LinkPage = 'showLinks';}} else {$LinkPage = 'showLinks';} //Shows correct link number
 Route::get('/studio/index', [UserController::class, 'index'])->name('studioIndex');
 Route::get('/studio/add-link', [UserController::class, 'showButtons'])->name('showButtons');
+Route::post('/studio/sort-link', [UserController::class, 'sortLinks'])->name('sortLinks');
 Route::post('/studio/add-link', [UserController::class, 'addLink'])->name('addLink');
 Route::get('/studio/links', [UserController::class, $LinkPage])->name($LinkPage);
 Route::get('/studio/links/10', [UserController::class, 'showLinks'])->name('showLinks');

studio/css/style-dashboard-dark.css

@@ -8318,3 +8318,12 @@ a[data-toggle="collapse"] {
     border-radius: 30px;
     border: 3px none #ffffff;
   }
+
+  .sortable-handle {
+    padding: 0px 12px;
+    margin-right: 5px;
+    cursor: grab;
+    cursor: -webkit-grabbing;
+    background-image: url("/img/drag-dark.png");
+    background-size: 22px;
+  }

studio/css/style-dashboard.css

@@ -8318,3 +8318,12 @@ a[data-toggle="collapse"] {
     border-radius: 30px;
     border: 3px none #ffffff;
   }
+
+  .sortable-handle {
+    padding: 0px 12px;
+    margin-right: 5px;
+    cursor: grab;
+    cursor: -webkit-grabbing;
+    background-image: url("/img/drag.png");
+    background-size: 22px;
+  }

studio/js/main-dashboard.js

@@ -13,7 +13,56 @@
 	fullHeight();
 
 	$('#sidebarCollapse').on('click', function () {
-      $('#sidebar').toggleClass('active');
+    	$('#sidebar').toggleClass('active');
-  });
+  	});
 	
+    $.ajaxSetup({
+		headers: {
+			'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
+		}
+    });
+  	var sortableTbody = document.getElementById("links-table-body");
+  	if (sortableTbody) {
+		const sortableLinkTable = Sortable.create(sortableTbody, {
+			handle: ".sortable-handle",
+			onChange: function(event) {
+			},
+			store: {
+				get: function (sortable) {
+					var order = linksTableOrders || "";
+					return order ? order.split('|') : [];
+				},
+				set: function (sortable) {
+					const linkOrders = sortable.toArray();
+					const currentPage = sortableTbody.dataset.page || 1;
+					const perPage     = sortableTbody.dataset.perPage || 0;
+					const formData = {
+						'linkOrders': linkOrders,
+						'currentPage': currentPage,
+						'perPage': perPage,
+					};
+					$.blockUI({ 
+						message: '<img width="70px" src="/img/loading.gif" />',
+						css: {
+							backgroundColor: 'transparent',
+							border: 'none',
+							color: '#444444',
+						}
+					});
+					$.post("/studio/sort-link", formData, function(response) {
+						if (response.linkOrders) {
+							$.each(response.linkOrders, function(linkId, linkOrder){
+								$("#links-table-body tr[data-id='"+linkId+"']")
+									.find("td:eq(3)")
+									.html(linkOrder);
+							});
+							$.unblockUI();
+						} else {
+							alert("Something went wrong! Please, Try again.")
+						}
+					});
+				}
+			}
+		});
+  	}
 })(jQuery);