297 lines
15 KiB
HTML
297 lines
15 KiB
HTML
{% extends 'base_structure/layout/base_template.html' %}
|
|
{% load static %}
|
|
{% block stylesheet %}
|
|
<!-- include required css cdn link through html here -->
|
|
{% include "cdn_through_html/datatable_cdn_css.html" %}
|
|
{% include "cdn_through_html/switches_cdn_css.html" %}
|
|
{% include "cdn_through_html/sweetalert2_cdn_css.html" %}
|
|
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
|
|
<div class="row layout-top-spacing">
|
|
<div class="col-lg-12">
|
|
<div class="row mb-2">
|
|
<div class="col">
|
|
<h3>Manage User</h3>
|
|
</div>
|
|
<div class="col text-end">
|
|
{% comment %} <button class="btn btn-dark mb-2 me-4" onclick="history.back()">
|
|
<i class="fa fa-arrow-left"></i>
|
|
Back
|
|
</button> {% endcomment %}
|
|
{% comment %} <a class="btn btn-success mb-2 me-4" href="{% url 'module_cms:faq_category_add' %}">Add Category</a> {% endcomment %}
|
|
<a class="btn btn-primary mb-2 me-4" href="">Add User</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row layout-spacing">
|
|
<div class="col-lg-12">
|
|
<div class="statbox widget box box-shadow">
|
|
<div class="widget-content widget-content-area">
|
|
<div id="table_wrapper" class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer">
|
|
|
|
<div class="table-responsive">
|
|
<table id="table" class="table style-3 dt-table-hover dataTable" role="grid"
|
|
aria-describedby="style-3_info">
|
|
|
|
<thead>
|
|
<tr role="row">
|
|
<th class="checkbox-column sorting_asc text-center" tabindex="0"
|
|
aria-controls="style-3" aria-sort="ascending"
|
|
style="width: 50.2656px;">#</th>
|
|
<th class="sorting_asc text-center" tabindex="0"
|
|
aria-controls="style-3" aria-sort="ascending"
|
|
style="width: 50.2656px;">#</th>
|
|
<th class="sorting text-center" tabindex="1" aria-controls="style-3"
|
|
colspan="1"
|
|
style="width: 44.2344px;">Name</th>
|
|
<th class="sorting text-center" tabindex="2" aria-controls="style-3"
|
|
colspan="1"
|
|
style="width: 44.2344px;">Email</th>
|
|
<th class="sorting text-center" tabindex="3" aria-controls="style-3"
|
|
style="width: 79.7969px;">Phone No.</th>
|
|
<th class="sorting text-center" tabindex="4" aria-controls="style-3"
|
|
style="width: 79.7969px;">Date of Birth</th>
|
|
<th class="sorting text-center" tabindex="5" aria-controls="style-3"
|
|
style="width: 79.7969px;">Active</th>
|
|
<th class="sorting text-center" tabindex="6" aria-controls="style-3"
|
|
style="width: 79.7969px;">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<thead id="filterboxrow">
|
|
<tr>
|
|
<th class="text-center" rowspan="1" colspan="1">id</th>
|
|
<th class="text-center" rowspan="1" colspan="1">id</th>
|
|
<th rowspan="1" colspan="1">Email</th>
|
|
<th rowspan="1" colspan="1">Name</th>
|
|
<th rowspan="1" colspan="1">Phone No.</th>
|
|
<th rowspan="1" colspan="1">Date of Birth</th>
|
|
<th class="invisible" rowspan="1" colspan="1">Active</th>
|
|
<th class="invisible" rowspan="1" colspan="1">Action</th>
|
|
</tr>
|
|
<thead>
|
|
<tbody>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{% endblock content %}
|
|
|
|
{% block javascript %}
|
|
<!-- include required js cdn link through html here -->
|
|
{% include "cdn_through_html/datatable_cdn_js.html" %}
|
|
{% include "cdn_through_html/datatable_button_cdn_js.html" %}
|
|
{% include "cdn_through_html/sweetalert2_cdn_js.html" %}
|
|
|
|
<script>
|
|
var viewUrl = '{% url "module_auth:user_view" id=0 %}'
|
|
{% comment %} var editUrl =
|
|
var deleteUrl = {% endcomment %}
|
|
|
|
var table = $('#table').DataTable({
|
|
processing: true,
|
|
serverSide: true,
|
|
ajax: {
|
|
url: "{% url 'module_auth:users_list'%}",
|
|
type: "GET",
|
|
},
|
|
columns: [
|
|
{
|
|
data: null,
|
|
className : "text-center",
|
|
render: function (data, type, row) {
|
|
// Generate checkbox HTML
|
|
var checkboxHTML = '<div class="form-check form-check-danger">';
|
|
checkboxHTML += '<input class="form-check-input archive-checkbox" type="checkbox" value="' + row.id + '" id="checkbox-' + row.id + '">';
|
|
checkboxHTML += '</div>';
|
|
|
|
return checkboxHTML;
|
|
}
|
|
},
|
|
{
|
|
data: "id",
|
|
className : "text-center"
|
|
},
|
|
{
|
|
data: "first_name",
|
|
className : "text-center"
|
|
},
|
|
{
|
|
data: "email",
|
|
className : "text-center"
|
|
},
|
|
{
|
|
data: "phone_no",
|
|
className : "text-center"
|
|
},
|
|
{
|
|
data: "date_of_birth",
|
|
className : "text-center"
|
|
},
|
|
{
|
|
data: "is_active",
|
|
className : "text-center",
|
|
render: function (data, type, row) {
|
|
// Check if active is true or false and set checked attribute accordingly
|
|
var checkedAttribute = data ? 'checked' : '';
|
|
|
|
// Generate switch HTML
|
|
var switchHTML = '<div class="switch form-switch-custom switch-inline form-switch-primary">';
|
|
switchHTML += '<input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-checked' + row.id + '" ' + checkedAttribute + '>';
|
|
switchHTML += '</div>';
|
|
|
|
return switchHTML;
|
|
}
|
|
},
|
|
{
|
|
data: null,
|
|
className: "text-center", // Add class to action column
|
|
render: function (data, type, row) {
|
|
return `
|
|
<div class="dropdown">
|
|
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink${row.id}" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
|
|
</a>
|
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink${row.id}" style="">
|
|
<a class="dropdown-item view" href="javascript:void(0);" data-id="${row.id}">View</a>
|
|
<a class="dropdown-item edit" href="javascript:void(0);" data-id="${row.id}">Edit</a>
|
|
<a class="dropdown-item delete" href="javascript:void(0);" data-id="${row.id}">Delete</a>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
}
|
|
],
|
|
debug: true, // Enable debugging mode
|
|
columnDefs: [
|
|
{
|
|
targets: [1, 2, 3, 4, 5],
|
|
searchable: true,
|
|
orderable: true
|
|
},
|
|
{
|
|
targets: [0, -1], // Targeting the last column (action column)
|
|
searchable: false,
|
|
orderable: false
|
|
}
|
|
],
|
|
dom: "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'Bf>>>" +
|
|
"<'table-responsive'tr>" +
|
|
"<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count mb-sm-0 mb-3'i><'dt--pagination'p>>",
|
|
buttons: [
|
|
{
|
|
text: 'Archive',
|
|
className: "btn btn-dark buttons-archive",
|
|
action: function () {
|
|
// Add your action here, e.g., redirect to archive page
|
|
window.location.href = '/archive';
|
|
},
|
|
init: function(api, node, config){
|
|
$(node).hide();
|
|
}
|
|
},
|
|
{
|
|
text: 'View Archive List',
|
|
className: "btn btn-dark ",
|
|
action: function () {
|
|
// Add your action here, e.g., redirect to archive page
|
|
window.location.href = '/archive';
|
|
}
|
|
}
|
|
],
|
|
oLanguage: {
|
|
oPaginate: { "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>', "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>' },
|
|
sInfo: "Showing page _PAGE_ of _PAGES_",
|
|
sSearch: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
|
|
sSearchPlaceholder: "Search...",
|
|
sLengthMenu: " _MENU_",
|
|
},
|
|
stripeClasses: [],
|
|
lengthMenu: [5, 10, 20, 50],
|
|
pageLength: 10,
|
|
initComplete: function () {
|
|
var api = this.api();
|
|
|
|
// Add individual search inputs to the first row of the thead section
|
|
$('thead#filterboxrow th').each(function (index) {
|
|
var title = $(this).text();
|
|
var input = $('<input type="text" class="form-control" placeholder="Search ' + title + '"/>')
|
|
.on('keyup change', function () {
|
|
if (api.column(index).search() !== this.value) {
|
|
api
|
|
.column(index)
|
|
.search(this.value)
|
|
.draw();
|
|
}
|
|
});
|
|
|
|
$(this).empty().append(input);
|
|
});
|
|
|
|
// Add event listener for checkbox change
|
|
$('body').on('change', 'input[type="checkbox"]', function(){
|
|
var checkedCount = $('#table tbody input.archive-checkbox:checked').length;
|
|
var archiveButton = $('.buttons-archive');
|
|
console.log("checked checkbox count", + checkedCount)
|
|
// Show or hide the archive button based on the number of checked checkboxes
|
|
if (checkedCount > 0) {
|
|
console.log("checked it")
|
|
archiveButton.show();
|
|
} else {
|
|
console.log("unchecked it")
|
|
archiveButton.hide();
|
|
}
|
|
});
|
|
|
|
// Bind click event for the "View" buttons
|
|
$('body').on('click', '.view', function(){
|
|
var id =$(this).data('id')
|
|
|
|
window.location.href = viewUrl.replace('0', id);
|
|
|
|
console.log('Viewing user with Id:', id)
|
|
});
|
|
|
|
// Bind click event for the "View" buttons
|
|
$('body').on('click', '.edit', function(){
|
|
var id =$(this).data('id')
|
|
|
|
console.log('Viewing user with Id:', id)
|
|
});
|
|
|
|
// Bind click event for the "Delete" buttons
|
|
$('body').on('click', '.delete', function() {
|
|
var id = $(this).data('id');
|
|
// Perform action for deleting user with id userId
|
|
console.log('Deleting user with ID:', id);
|
|
Swal.fire({
|
|
title: 'Are you sure?',
|
|
text: 'Once deleted, you will not be able to recover this user!',
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#d33',
|
|
cancelButtonColor: '#3085d6',
|
|
confirmButtonText: 'Yes, delete it!'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
console.log("success")
|
|
}
|
|
})
|
|
});
|
|
}
|
|
});
|
|
|
|
</script>
|
|
{% endblock %} |