List, Pagination and Delete function

app/Http/Controllers/UrlShortenerController.php

@@ -19,7 +19,9 @@ class UrlShortenerController extends Controller
 
     public function viewList()
     {
-        return view('list');
+        return view('list', [
+            "url" => URL::to('/'),
+        ]);
     }
 
     public function createShortURL(Request $request)
@@ -169,4 +171,30 @@ class UrlShortenerController extends Controller
             ], 400);
         }
     }
+
+    public function urlAddressList(Request $request)
+    {
+        $user = $request->session()->get('user');
+        return UrlAddress::where('user_id', $user)->paginate();
+    }
+
+    public function urlAddressDelete(Request $request, $id)
+    {
+        $urlAddress = UrlAddress::find($id);
+        if ($urlAddress) {
+            if ($urlAddress->delete()) {
+                return response()->json([
+                    "message" => "Success delete"
+                ], 200);
+            } else {
+                return response()->json([
+                    "message" => "Failed delete"
+                ], 500);
+            }
+        } else {
+            return response()->json([
+                "message" => "URL Address with id $id is not exist"
+            ], 400);
+        }
+    }
 }

app/UrlAddress.php

@@ -3,8 +3,40 @@
 namespace App;
 
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Support\Carbon;
 
 class UrlAddress extends Model
 {
-    //
+    protected $appends = [
+        'is_expired',
+        'full_url_destination'
+    ];
+
+    public function getFullUrlDestinationAttribute()
+    {
+        $httpPath = "http://";
+        $httpsPath = "https://";
+
+        $hasHttpOrHttps = false;
+        $url = $this['url_destination'];
+        if ($httpPath == substr($url, 0, strlen($httpPath))) {
+            $hasHttpOrHttps = true;
+        } else if ($httpsPath == substr($url, 0, strlen($httpsPath))) {
+            $hasHttpOrHttps = true;
+        }
+        return ($hasHttpOrHttps ? "" : "http://") . $this['url_destination'];
+    }
+
+    public function getIsExpiredAttribute()
+    {
+        $urlExpired = false;
+        if ($this['date_expired'] != null) {
+            $today = Carbon::now()->setTime(0, 0, 0);
+            $urlExpiredDate = Carbon::parse($this['date_expired']);
+            if (!$today->equalTo($urlExpiredDate)) {
+                $urlExpired = $urlExpiredDate->lessThanOrEqualTo($today);
+            }
+        }
+        return $urlExpired;
+    }
 }

resources/views/list.blade.php

@@ -11,68 +11,39 @@
 @section('content')
     <div class="box box-info">
         <div class="box-header">
-            <h3 class="box-title">
+            <h3 class="box-title"></h3>
-                <input type="text" class="form-control" placeholder="Search"/>
-            </h3>
 
-            <div class="box-tools">
+            <div class="box-tools"></div>
-                <ul class="pagination pagination-sm no-margin pull-right">
-                    <li><a href="#">&laquo;</a></li>
-                    <li><a href="#">1</a></li>
-                    <li><a href="#">2</a></li>
-                    <li><a href="#">3</a></li>
-                    <li><a href="#">&raquo;</a></li>
-                </ul>
-            </div>
         </div>
         <!-- /.box-header -->
         <div class="box-body">
-            <table class="table table-condensed">
+            <table class="table table-bordered">
+                <thead>
                 <tr>
-                    <th style="width: 10px">#</th>
                     <th>Destination</th>
                     <th>Short URL</th>
-                    <th>Click</th>
+                    <th style="text-align:center;">Click</th>
                     <th>Expired Date</th>
                     <th>Protection</th>
-                    <th style="width: 40px">Action</th>
+                    <th>Action</th>
                 </tr>
+                </thead>
+                <tbody id="table-url-address-body">
                 <tr>
-                    <td>1.</td>
+                    <td colspan="6" style="text-align:center;color:#777;">
-                    <td>http://www.google.com</td>
+                        <i class="fa fa-spinner fa-spin"></i>
-                    <td>http://shorturl.test/s/sasd</td>
-                    <td>5</td>
-                    <td><label class="label label-success">2020-02-20</label></td>
-                    <td><label class="label label-danger">No</label></td>
-                    <td>
-                        <button class="btn btn-danger btn-xs"><i class="fa fa-trash"></i></button>
-                    </td>
-                </tr>
-                <tr>
-                    <td>1.</td>
-                    <td>http://www.google.com</td>
-                    <td>http://shorturl.test/s/ssdf</td>
-                    <td>5</td>
-                    <td><label class="label label-danger">2020-02-20</label></td>
-                    <td><label class="label label-success">Yes</label></td>
-                    <td>
-                        <button class="btn btn-danger btn-xs"><i class="fa fa-trash"></i></button>
-                    </td>
-                </tr>
-                <tr>
-                    <td>1.</td>
-                    <td>http://www.google.com</td>
-                    <td>http://shorturl.test/s/fffs</td>
-                    <td>5</td>
-                    <td><label class="label label-info">Never</label></td>
-                    <td><label class="label label-success">Yes</label></td>
-                    <td>
-                        <button class="btn btn-danger btn-xs"><i class="fa fa-trash"></i></button>
                     </td>
                 </tr>
+                </tbody>
             </table>
         </div>
         <!-- /.box-body -->
+        <div class="box-footer">
+            Page <span id="current-page">1</span>,
+            Showing <span id="range-start-data">0</span> to <span id="range-end-data">0</span>
+            of <span id="total-entries">0</span> entries
+            <ul class="pagination pagination-sm no-margin pull-right" id="pagination-button"></ul>
+        </div>
     </div>
     <!-- /.box -->
 @endsection
@@ -81,6 +52,10 @@
     <script type="application/javascript">
         const clipboard = new ClipboardJS('.btn');
 
+        let page = 1;
+        let canPageNext = false;
+        let canPagePrevious = false;
+
         $(document).ready(function () {
             clipboard.on('success', function (e) {
                 toastr.success("URL Copied");
@@ -90,6 +65,123 @@
             clipboard.on('error', function (e) {
                 toastr.failed("Cannot Copy URL");
             });
+
+            const loadURLAddress = function () {
+                $.ajax({
+                    type: "GET",
+                    url: "/web/url/address/list?page=" + page,
+                    headers: {
+                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
+                    },
+                    contentType: "application/json",
+                    async: true,
+                    beforeSend: function () {
+                        $("#table-url-address-body").html("<tr>\n" +
+                            "                            <td colspan=\"6\" style=\"text-align:center;color:#777;\">\n" +
+                            "                                <i class=\"fa fa-spinner fa-spin\"></i>\n" +
+                            "                            </td>\n" +
+                            "                        </tr>");
+                    },
+                    success: function (result) {
+                        rebuildPagination(result);
+                        if (result.data.length !== 0) {
+                            $("#table-url-address-body").html(result.data.map(m => urlAddressRowComponent(m)));
+                        } else {
+                            $("#table-url-address-body").html("<tr>\n" +
+                                "                            <td colspan=\"6\" style=\"text-align:center;color:#777;\">\n" +
+                                "                                <span>You don't have any shorten url address</span>\n" +
+                                "                            </td>\n" +
+                                "                        </tr>");
+                        }
+                    },
+                    error: function (result) {
+                        toastr.error(result.responseJSON.message);
+                    }
+                });
+            }
+
+            const deleteURLAddress = function (id) {
+                $.ajax({
+                    type: "DELETE",
+                    url: "/web/url/address/delete/" + id,
+                    headers: {
+                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
+                    },
+                    contentType: "application/json",
+                    async: true,
+                    success: function (result) {
+                        toastr.success(result.message);
+                        loadURLAddress();
+                    },
+                    error: function (result) {
+                        toastr.error(result.responseJSON.message);
+                    }
+                });
+            }
+
+            const urlAddressRowComponent = function (urlAddressData) {
+                let expiredStatus = "<label class=\"label label-info\">Never</label>";
+                if (urlAddressData.date_expired != null && urlAddressData.date_expired !== "") {
+                    expiredStatus = "<label class=\"label " + (urlAddressData.is_expired ? "label-danger" : "label-success") + "\">2020-02-20</label>";
+                }
+                const protectionStatus = "<label class=\"label " + (urlAddressData.password != null ? "label-success" : "label-danger") + "\">" + (urlAddressData.password != null ? "Yes" : "No") + "</label>";
+                const destination = urlAddressData.full_url_destination;
+                const generatedURL = "{{$url}}/s/" + urlAddressData.path_generated;
+                const row = "<tr>\n" +
+                    "                    <td><a href=\"" + destination + "\" target=\"_blank\">" + destination + "</a></td>\n" +
+                    "                    <td><a href=\"" + generatedURL + "\" target=\"_blank\">" + generatedURL + "</a></td>\n" +
+                    "                    <td align=\"center\">" + urlAddressData.click + "</td>\n" +
+                    "                    <td>" + expiredStatus + "</td>\n" +
+                    "                    <td>" + protectionStatus + "</td>\n" +
+                    "                    <td>\n" +
+                    "                        <button class=\"btn btn-danger btn-xs url-address-delete\"><i class=\"fa fa-trash\"></i></button>\n" +
+                    "                    </td>\n" +
+                    "                </tr>";
+                return $(row).on('click', 'button.url-address-delete', function () {
+                    deleteURLAddress(urlAddressData.id);
+                });
+            }
+
+            const rebuildPagination = function (paginationData) {
+                const totalData = paginationData.data.length;
+                if (totalData === 0 && page !== 1) {
+                    page -= 1;
+                    loadURLAddress();
+                }
+
+                $("#range-start-data").html(paginationData.from != null ? paginationData.from : 0);
+                $("#range-end-data").html(paginationData.to != null ? paginationData.to : 0);
+                $("#total-entries").html(paginationData.total);
+
+                const canPageNext = (paginationData.next_page_url != null && paginationData.next_page_url !== "");
+                const canPagePrevious = paginationData.prev_page_url != null && paginationData.prev_page_url !== ""
+
+                let buttonElements = [];
+                if (canPagePrevious) {
+                    buttonElements.push($("<li><a href='#' id='pagination-button-prev'>&laquo;</a></li>").click(function () {
+                        page -= 1;
+                        loadURLAddress();
+                    }));
+                }
+                if (totalData !== 0) {
+                    for (let i = 1; i <= paginationData.last_page; i++) {
+                        buttonElements.push($("<li><a href='#'>" + i + "</a></li>").click(function () {
+                            page = i;
+                            loadURLAddress();
+                        }));
+                    }
+                }
+                if (canPageNext) {
+                    buttonElements.push($("<li><a href='#' id='pagination-button-next'>&raquo;</a></li>").click(function () {
+                        page += 1;
+                        loadURLAddress();
+                    }));
+                }
+                $("#pagination-button").html(buttonElements);
+            }
+
+            // Initialize
+            loadURLAddress();
         });
     </script>
 @endsection

routes/web.php

@@ -21,6 +21,11 @@ Route::post('/s/{pathGenerated}/open/protection', "UrlShortenerController@openPr
 Route::middleware('auth.web')->group(function () {
     Route::get('/list', "UrlShortenerController@viewList");
 
+    // URL Shortener Controller
+    Route::get('/web/url/address/list', "UrlShortenerController@urlAddressList");
+    Route::delete('/web/url/address/delete/{id}', "UrlShortenerController@urlAddressDelete");
+
+    // Security Controller
     Route::post('/web/change/password', "SecurityController@formChangePassword");
 });