mirror of
https://github.com/supanadit/short-url.git
synced 2024-11-21 17:56:22 +00:00
List, Pagination and Delete function
This commit is contained in:
Supan Adit Pratama
parent
5da9a2380a
commit
e4c5a12b23
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,68 +11,39 @@
|
||||
@section('content')
|
||||
<div class="box box-info">
|
||||
<div class="box-header">
|
||||
<h3 class="box-title">
|
||||
<input type="text" class="form-control" placeholder="Search"/>
|
||||
</h3>
|
||||
<h3 class="box-title"></h3>
|
||||
|
||||
<div class="box-tools">
|
||||
<ul class="pagination pagination-sm no-margin pull-right">
|
||||
<li><a href="#">«</a></li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="box-tools"></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>http://www.google.com</td>
|
||||
<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 colspan="6" style="text-align:center;color:#777;">
|
||||
<i class="fa fa-spinner fa-spin"></i>
|
||||
</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'>«</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'>»</a></li>").click(function () {
|
||||
page += 1;
|
||||
loadURLAddress();
|
||||
}));
|
||||
}
|
||||
$("#pagination-button").html(buttonElements);
|
||||
}
|
||||
|
||||
// Initialize
|
||||
loadURLAddress();
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
|
||||
@ -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");
|
||||
});
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user