Init Sortable links.

Author: Milan C

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 = (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 @@ 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,6 @@
 *
 !.gitignore
-!user.png
+!user.png
+!drag-dark.png
+!drag.png
+!loading.gif

img/drag-dark.png

@@ -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 @@ 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')

img/drag.png

@@ -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">

img/loading.gif

@@ -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');

resources/views/layouts/sidebar.blade.php

@@ -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("/img/drag-dark.png");
+    background-size: 22px;
+  }

resources/views/studio/links.blade.php

@@ -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("/img/drag.png");
+    background-size: 22px;
+  }