160 lines
7.5 KiB
HTML
160 lines
7.5 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/animate_cdn_css.html" %}
|
|
{% include "cdn_through_html/modal_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">
|
|
<a href="{% url 'module_auth:user_view' id=principal_id.id %}" style="height: fit-content;width: fit-content;display: inline-block;">
|
|
<h3 class="card-title m-2 d-flex align-items-center gap-2" style="width: fit-content;"><span class="fw-bold material-symbols-outlined">
|
|
arrow_back
|
|
</span><span>Medication Record -- {{principal_id.id}} -- {{principal_id.first_name}}</span></h3>
|
|
</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="sorting_asc text-center dt-no-sorting" tabindex="0"
|
|
aria-controls="style-3" aria-sort="ascending"
|
|
style="width: 50.2656px;">Sr. No</th>
|
|
<th class="sorting_asc text-center" tabindex="0"
|
|
aria-controls="style-3" aria-sort="ascending"
|
|
style="width: 50.2656px;">Record ID</th>
|
|
<th class="sorting text-center" tabindex="1" aria-controls="style-3"
|
|
colspan="1"
|
|
style="width: 44.2344px;">Date</th>
|
|
<th class="sorting text-center" tabindex="2" aria-controls="style-3"
|
|
colspan="1"
|
|
style="width: 44.2344px;">Time</th>
|
|
<th class="text-center dt-no-sorting" tabindex="5" aria-controls="style-3"
|
|
style="width: 79.7969px;">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{% endblock content %}
|
|
|
|
{% block javascript %}
|
|
|
|
<!-- include required css cdn link through html here -->
|
|
|
|
{% include "cdn_through_html/datatable_cdn_js.html" %}
|
|
|
|
<script>
|
|
|
|
|
|
// Define DataTable instance
|
|
var dataTableInstance;
|
|
var mainUrl = "{% url 'module_activity:medication_list' principal_id=principal_id.id %}?deleted_flag=False"
|
|
var viewUrl = "{% url 'module_activity:medication_detail' pk=0 %}"
|
|
|
|
// Entry point
|
|
$(document).ready(function() {
|
|
|
|
tableName = $('#table');
|
|
dataTableInstance = initializeDataTable(tableName, mainUrl);
|
|
});
|
|
|
|
// Function to initialize DataTable
|
|
function initializeDataTable(tableName, mainUrl) {
|
|
return tableName.DataTable({
|
|
processing: true,
|
|
serverSide: true,
|
|
ajax: {
|
|
url: mainUrl,
|
|
type: "GET",
|
|
},
|
|
columns: [
|
|
{
|
|
data: null,
|
|
className: "text-center",
|
|
render: function(data, type, row, meta) {
|
|
// Calculate sequence number based on page, page length, and index
|
|
var sequenceNumber = meta.row + meta.settings._iDisplayStart + 1;
|
|
return sequenceNumber;
|
|
}
|
|
},
|
|
{ data: "id", className: "text-center" },
|
|
{ data: "date", className: "text-center" },
|
|
{ data: "time", className: "text-center" },
|
|
{ data: null, className: "text-center", render: renderActions }
|
|
],
|
|
debug: true,
|
|
columnDefs: [
|
|
{
|
|
targets: [1, 2, 3],
|
|
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'f>>>" +
|
|
"<'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>>",
|
|
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
|
|
});
|
|
}
|
|
|
|
// Function to reload the DataTable
|
|
function reloadDataTable() {
|
|
dataTableInstance.ajax.reload();
|
|
}
|
|
|
|
|
|
// Render actions
|
|
function renderActions(data, type, row) {
|
|
return `
|
|
<a href="${viewUrl.replace('0', row.id)}" class="bs-tooltip" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-original-title="View" data-bs-original-title="View" aria-label="View">
|
|
<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-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
|
|
</a>
|
|
`;
|
|
}
|
|
|
|
|
|
</script>
|
|
{% endblock %} |