Init Sortable links.

app/Http/Controllers/UserController.php

@@ -134,10 +134,50 @@ public function addLink(request $request)
         $links->title = $title;
         $links->button_id = $buttonId;
         $links->save();
+        $links->order = ($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 = $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 @@ public function clickNumber(request $request)
     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 @@ public function showLinks()
     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 @@ public function showLinks20()
     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 @@ public function showLinks30()
     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,4 @@
 *
 !.gitignore
-!user.png
+!user.png
+!loading.gif

resources/views/layouts/sidebar.blade.php

@@ -7,8 +7,10 @@
 @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') }}">
+	<base href="{{asset('')}}" />
 
     <link href="//fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900" rel="stylesheet">
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
@@ -376,6 +378,8 @@ function URL_event_exists(string $urlsb): bool
     <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>
-            <td title="{{ $link->link }}">{{ Str::limit($link->link, 30) }}</td>
+          <tr data-id="{{$link->id}}">
+            <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(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

@@ -8317,4 +8317,13 @@ a[data-toggle="collapse"] {
     background-color: #171a1d;
     border-radius: 30px;
     border: 3px none #ffffff;
-  }
+  }
+
+  .sortable-handle {
+    padding: 0px 12px;
+    margin-right: 5px;
+    cursor: grab;
+    cursor: -webkit-grabbing;
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgEAQAAACJ4248AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAAAGAAAABgAPBrQs8AAAAHdElNRQfmCA4SKAHpnofvAAABx0lEQVRYw+1XQZLBUBDtryxZCPao4hAkVipuoJzCVrGa4ghOQVxAuQClKlwAOzuRFOt+s/hlyPxkokamZpO3y89L9/udzkt/ogQvAMjnwe02uFaL5HKtBjZNQNPiSc7NJnC5AADADIxG4ULHY8kBAMcBG0YMu9/t4AMzuFoN3PlX8jvVtqPip6IllMv+ayHUNSKiUknee6ZWKjFUwLL8FTifgVxO5Wka4Dh+7nT6vgAuFKQI1wXbNljXw7mGAbZtwHWB6RRcKLwtIEGCv4Z4hQR0u0StFtHhQJhMROp6DeRxNkui15M+sVwKEcdniOHQ/22v1+B0Wk2eToM3Gz93MIhBwOkEBfW6KkDXVd7pFBX/BSsOlqUsiYA1Yo6hAoOB/wezWoW+AqzX/gr0+1HxX2zCTofINIn2e9mEt1sgjzMZ2YSVCmGxECnLersCCRL8O8DFIjCfA54H3m5/GjTlALvbAZ4HWFYsA4lM/gzHCR/J7tPz3TNmsxgEeJ7isGya6u7bbdWKXTcqfrQV43D4LonoeFSJx6Ni0cqzv6kAG8Zj2mUGPj7CqzUaPc4G5zPQaLwtQAbWNLBpBh1IVMHVqjyaqX2SIAif51/9O/JnKdwAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjItMDgtMTRUMTg6NDA6MDErMDA6MDCpWH8eAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIyLTA4LTE0VDE4OjQwOjAxKzAwOjAw2AXHogAAACh0RVh0ZGF0ZTp0aW1lc3RhbXAAMjAyMi0wOC0xNFQxODo0MDowMSswMDowMI8Q5n0AAAAASUVORK5CYII=");
+    background-size: 22px;
+  }

studio/css/style-dashboard.css

@@ -8317,4 +8317,13 @@ a[data-toggle="collapse"] {
     background-color: #323232;
     border-radius: 30px;
     border: 3px none #ffffff;
-  }
+  }
+
+  .sortable-handle {
+    padding: 0px 12px;
+    margin-right: 5px;
+    cursor: grab;
+    cursor: -webkit-grabbing;
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAA7AAAAOwBeShxvQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAGDSURBVFiF7dexThRBHMfxj0BDAgUKvZhAZWen3JXHGxA638DYGAOVwUfgKVBewDeQmAiNpdDRHdwlJiYUtxY75G7nZm8351oY9pdssbPf/c1vdnf+M8tD12JN7gm6ge9XsNt4gVv8nj/aWN1glmGEoxnsx8BkuEGniQAXwfD+GGErwW1PdH5/fK8yX6gRYDM6f5Rog6fh2qSe1fCv1GfFUfWxluAeyx/7JHvSRID1EGIgf6Q7M9hOYAah8/UmArRq9U9VtxTv4y2eywvTXQm3ind4jWX8+NuAcKg4t8+wlOCW8C1iD5oIcB2ZZniZ4HYS3HWVeZ1SnFJWs200p39BB4qj+qr8FZxF7Psq83jxKNMeeviJY/wq4VbwRr4IfZGX8Fat/n9t4BRDnJu90ezKS/VQPgMa2ZCcKs7tG+VbstuI/dREgKHpEttLcLsJblBlXqcUX0bnGa4S3JXpchzfO5c6xrvdET7MYI+M/w36eNVEAPL325P+IYm1FdjUd9JqSn8A5m9yuDzg2a8AAAAASUVORK5CYII=");
+    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);