mirror of https://github.com/abpframework/abp.git
EmreKendirli
2 years ago
17 changed files with 491 additions and 108 deletions
@ -0,0 +1,85 @@ |
|||||
|
@page |
||||
|
|
||||
|
@using Microsoft.AspNetCore.Mvc.Localization |
||||
|
@using Volo.Abp.AspNetCore.Mvc.UI.Layout |
||||
|
@using Volo.CmsKit.Admin.Web.Pages.CmsKit.Comments |
||||
|
@using Volo.CmsKit.Admin.Web.Menus |
||||
|
@using Volo.CmsKit.Localization |
||||
|
|
||||
|
@inject IPageLayout PageLayout |
||||
|
@inject IHtmlLocalizer<CmsKitResource> L |
||||
|
|
||||
|
@model IndexModel |
||||
|
|
||||
|
@{ |
||||
|
PageLayout.Content.Title = L["Comments"].Value; |
||||
|
PageLayout.Content.BreadCrumb.Add(L["Menu:CMS"].Value); |
||||
|
PageLayout.Content.MenuItemName = CmsKitAdminMenus.Comments.CommentsMenu; |
||||
|
} |
||||
|
|
||||
|
@section styles { |
||||
|
<abp-style-bundle> |
||||
|
<abp-style src="/Pages/CmsKit/Comments/index.css" /> |
||||
|
</abp-style-bundle> |
||||
|
} |
||||
|
|
||||
|
@section scripts { |
||||
|
<abp-script-bundle> |
||||
|
<abp-script src="/client-proxies/cms-kit-common-proxy.js" /> |
||||
|
<abp-script src="/client-proxies/cms-kit-admin-proxy.js" /> |
||||
|
<abp-script src="/Pages/CmsKit/Comments/index.js" /> |
||||
|
</abp-script-bundle> |
||||
|
} |
||||
|
|
||||
|
<abp-alert id="commentsAlert" alert-type="Warning" style="display: none;"> |
||||
|
</abp-alert> |
||||
|
|
||||
|
<abp-card class="mb-4"> |
||||
|
<abp-card-body> |
||||
|
<div id="CmsKitCommentsWrapper"> |
||||
|
<form id="CmsKitCommentsFilterForm" method="post"> |
||||
|
<abp-row class="align-items-end"> |
||||
|
<abp-column size-lg="_4" size-md="_12"> |
||||
|
<abp-row> |
||||
|
<abp-column size-lg="_6" size-md="_6"> |
||||
|
<abp-input asp-for="@Model.CreationStartDate" class="singledatepicker" label="@L["StartDate"].Value" type="text" /> |
||||
|
</abp-column> |
||||
|
<abp-column size-lg="_6" size-md="_6"> |
||||
|
<abp-input asp-for="@Model.CreationEndDate" class="singledatepicker" label="@L["EndDate"].Value" type="text" /> |
||||
|
</abp-column> |
||||
|
</abp-row> |
||||
|
</abp-column> |
||||
|
|
||||
|
<abp-column size-lg="_2" size-md="_6"> |
||||
|
<abp-input asp-for="@Model.Author" label="@L["Username"].Value" type="text" /> |
||||
|
</abp-column> |
||||
|
|
||||
|
<abp-column size-lg="_2" size-md="_6"> |
||||
|
<abp-input asp-for="@Model.EntityType" label="@L["EntityType"].Value" type="text" /> |
||||
|
</abp-column> |
||||
|
|
||||
|
<abp-column size-lg="_2" size-md="_6"> |
||||
|
<select asp-for="@Model.IsApproved" label="@L["IsApproved"].Value"> |
||||
|
<option value="">@L["All"].Value</option> |
||||
|
<option value="true">@L["Approved"].Value</option> |
||||
|
<option value="false">@L["Rejected"].Value</option> |
||||
|
<option value="null">@L["Pending"].Value</option> |
||||
|
</select> |
||||
|
</abp-column> |
||||
|
|
||||
|
<abp-column size-lg="_2" size-md="_6"> |
||||
|
<abp-button class="w-100 mb-3" button-type="Primary" type="submit"> |
||||
|
<i class="fa fa-search" aria-hidden="true"></i> |
||||
|
</abp-button> |
||||
|
</abp-column> |
||||
|
</abp-row> |
||||
|
</form> |
||||
|
</div> |
||||
|
</abp-card-body> |
||||
|
</abp-card> |
||||
|
|
||||
|
<abp-card> |
||||
|
<abp-card-body> |
||||
|
<abp-table id="CommentsTable" class="nowrap"></abp-table> |
||||
|
</abp-card-body> |
||||
|
</abp-card> |
||||
@ -0,0 +1,18 @@ |
|||||
|
using System; |
||||
|
using Microsoft.AspNetCore.Mvc; |
||||
|
using Microsoft.AspNetCore.Mvc.RazorPages; |
||||
|
|
||||
|
namespace Volo.CmsKit.Admin.Web.Pages.CmsKit.Comments.Waiting; |
||||
|
|
||||
|
public class IndexModel : CmsKitAdminPageModel |
||||
|
{ |
||||
|
public string EntityType { get; set; } |
||||
|
|
||||
|
public string Author { get; set; } |
||||
|
|
||||
|
public DateTime? CreationStartDate { get; set; } |
||||
|
|
||||
|
public DateTime? CreationEndDate { get; set; } |
||||
|
public string IsApproved { get; set; } |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,230 @@ |
|||||
|
$(function () { |
||||
|
var l = abp.localization.getResource("CmsKit"); |
||||
|
|
||||
|
var commentsService = volo.cmsKit.admin.comments.commentAdmin; |
||||
|
|
||||
|
var detailsModal = new abp.ModalManager(abp.appPath + "CmsKit/Comments/DetailsModal"); |
||||
|
|
||||
|
moment()._locale.preparse = (string) => string; |
||||
|
moment()._locale.postformat = (string) => string; |
||||
|
|
||||
|
var getFormattedDate = function ($datePicker) { |
||||
|
if (!$datePicker.val()) { |
||||
|
return null; |
||||
|
} |
||||
|
var momentDate = moment($datePicker.val(), $datePicker.data('daterangepicker').locale.format); |
||||
|
return momentDate.isValid() ? momentDate.toISOString() : null; |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
var defaultStartDate = moment().add(-7, 'days'); |
||||
|
$("#CreationStartDate").val(defaultStartDate.format('L')); |
||||
|
|
||||
|
$('.singledatepicker').daterangepicker({ |
||||
|
"singleDatePicker": true, |
||||
|
"showDropdowns": true, |
||||
|
"autoUpdateInput": false, |
||||
|
"autoApply": true, |
||||
|
"opens": "center", |
||||
|
"drops": "auto" |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
|
||||
|
$('.singledatepicker').attr('autocomplete', 'off'); |
||||
|
|
||||
|
$('.singledatepicker').on('apply.daterangepicker', function (ev, picker) { |
||||
|
$(this).val(picker.startDate.format('l')); |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
var filterForm = $('#CmsKitCommentsFilterForm'); |
||||
|
|
||||
|
var getFilter = function () { |
||||
|
var filterObj = filterForm.serializeFormToObject(); |
||||
|
|
||||
|
filterObj.creationStartDate = getFormattedDate($('#CreationStartDate')); |
||||
|
filterObj.creationEndDate = getFormattedDate($('#CreationEndDate')); |
||||
|
|
||||
|
return filterObj; |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
var _dataTable = $('#CommentsTable').DataTable(abp.libs.datatables.normalizeConfiguration({ |
||||
|
processing: true, |
||||
|
serverSide: true, |
||||
|
paging: true, |
||||
|
scrollX: true, |
||||
|
searching: false, |
||||
|
scrollCollapse: true, |
||||
|
ajax: abp.libs.datatables.createAjax(commentsService.getList, getFilter), |
||||
|
columnDefs: [ |
||||
|
{ |
||||
|
width: "10%", |
||||
|
title: l("Actions"), |
||||
|
targets: 0, |
||||
|
orderable: false, |
||||
|
rowAction: { |
||||
|
items: [ |
||||
|
{ |
||||
|
text: l('Details'), |
||||
|
action: function (data) { |
||||
|
location.href = 'Comments/' + data.record.id; |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
text: l('Delete'), |
||||
|
visible: abp.auth.isGranted('CmsKit.Comments.Delete'), |
||||
|
confirmMessage: function (data) { |
||||
|
return l("CommentDeletionConfirmationMessage") |
||||
|
}, |
||||
|
action: function (data) { |
||||
|
commentsService |
||||
|
.delete(data.record.id) |
||||
|
.then(function () { |
||||
|
_dataTable.ajax.reloadEx(); |
||||
|
abp.notify.success(l('DeletedSuccessfully')); |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
text: function (data) { |
||||
|
return data.isApproved ? l('Revoke Approval') : l('Approve'); |
||||
|
}, |
||||
|
action: function (data) { |
||||
|
var newApprovalStatus = !data.record?.isApproved; |
||||
|
|
||||
|
commentsService |
||||
|
.updateApprovalStatus(data.record.id, { IsApproved: newApprovalStatus }) |
||||
|
.then(function () { |
||||
|
_dataTable.ajax.reloadEx(); |
||||
|
var message = newApprovalStatus ? l('ApprovedSuccessfully') : l('ApprovalRevokedSuccessfully'); |
||||
|
abp.notify.success(message); |
||||
|
}) |
||||
|
.catch(function (error) { |
||||
|
console.log("error", error) |
||||
|
abp.notify.error(error.message); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
width: "10%", |
||||
|
title: l("Username"), |
||||
|
orderable: false, |
||||
|
data: "author.userName", |
||||
|
render: function (data) { |
||||
|
if (data !== null) { |
||||
|
return GetFilterableDatatableContent('#Author', $.fn.dataTable.render.text().display(data)); //prevent against possible XSS
|
||||
|
} |
||||
|
return ""; |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
width: "15%", |
||||
|
title: l("EntityType"), |
||||
|
orderable: false, |
||||
|
data: "entityType", |
||||
|
render: function (data) { |
||||
|
if (data !== null) { |
||||
|
return GetFilterableDatatableContent('#EntityType', $.fn.dataTable.render.text().display(data)); |
||||
|
} |
||||
|
return ""; |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
title: l("URL"), |
||||
|
data: "url", |
||||
|
render: function (data, type, row) { |
||||
|
if (data !== null) { |
||||
|
return '<a href="' + data + '#comment-' + row.id + '" target="_blank"><i class="fa fa-location-arrow"></i></a>'; |
||||
|
} |
||||
|
return ""; |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
title: l("Text"), |
||||
|
data: "text", |
||||
|
orderable: false, |
||||
|
render: function (data) { |
||||
|
data = $.fn.dataTable.render.text().display(data || ""); |
||||
|
|
||||
|
var maxChars = 64; |
||||
|
|
||||
|
if (data.length > maxChars) { |
||||
|
return ( |
||||
|
'<span data-toggle="tooltip" title="' + |
||||
|
data + |
||||
|
'">' + |
||||
|
data.substring(0, maxChars) + |
||||
|
"..." + |
||||
|
"</span>" |
||||
|
); |
||||
|
} else { |
||||
|
return data; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
width: "15%", |
||||
|
title: l("CreationTime"), |
||||
|
data: "creationTime", |
||||
|
orderable: true, |
||||
|
dataFormat: "datetime" |
||||
|
}, |
||||
|
{ |
||||
|
width: "5%", |
||||
|
title: l("Status"), |
||||
|
orderable: false, |
||||
|
|
||||
|
data: "isApproved", |
||||
|
render: function (data, type, row) { |
||||
|
var icons = '' |
||||
|
|
||||
|
if (data === null) { |
||||
|
icons = '<i class="fa-solid fa-hourglass-start"></i>'; |
||||
|
} else if (typeof data === "boolean") { |
||||
|
if (data) { |
||||
|
icons = '<i class="fa-solid fa-check" style="color: #63E6BE;"></i>'; |
||||
|
} else { |
||||
|
icons = '<i class="fa-solid fa-x" style="color: #e0102f;"></i>'; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return icons; |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
})); |
||||
|
|
||||
|
function GetFilterableDatatableContent(filterSelector, data) { |
||||
|
return '<span class="datatableCell" data-field="' + filterSelector + '" data-val="' + data + '">' + data + '</span>'; |
||||
|
} |
||||
|
|
||||
|
$(document).on('click', '.datatableCell', function () { |
||||
|
var inputSelector = $(this).attr('data-field'); |
||||
|
var value = $(this).attr('data-val'); |
||||
|
|
||||
|
$(inputSelector).val(value); |
||||
|
|
||||
|
_dataTable.ajax.reloadEx(); |
||||
|
}); |
||||
|
|
||||
|
filterForm.submit(function (e) { |
||||
|
e.preventDefault(); |
||||
|
_dataTable.ajax.reloadEx(); |
||||
|
}); |
||||
|
// Get and display pending comment count
|
||||
|
commentsService.getPendingCommentCount().then(function (count) { |
||||
|
console.log(count) |
||||
|
if (count > 0) { |
||||
|
var alertMessage = 'You have pending comments: ' + count; |
||||
|
var alertElement = '<abp-alert alert-type="Warning">' + alertMessage + '</abp-alert>'; |
||||
|
console.log(count) |
||||
|
$('#commentsAlert').html(alertElement); |
||||
|
$('#commentsAlert').show() |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
Loading…
Reference in new issue