Skip to content

refactor(data-cleanup): replace native date inputs with flatpickr #1071

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JohnVillalovos merged 1 commit into from
Feb 22, 2026
+23 −33
Merged

refactor(data-cleanup): replace native date inputs with flatpickr #1071

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 23 additions & 33 deletions tpl/Admin/Configuration/data_cleanup.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{include file='globalheader.tpl' }
{include file='globalheader.tpl'}

<div id="page-data-cleanup" class="admin-page">

Expand All @@ -13,7 +13,7 @@
<div class="d-flex align-items-start">
<i class="bi bi-calendar-check fs-5 link-primary mt-1 me-2"></i>
<div>
<h6 class="mb-0 d-inline">{translate key=Reservations}
<h6 class="mb-0 d-block">{translate key=Reservations}
<span class="badge bg-primary ms-2">{$ReservationCount}</span>
</h6>
<div class="text-muted small">{translate key=DeleteReservationsBefore}</div>
Expand All @@ -23,10 +23,7 @@
<div class="col-12 col-md-5">
<div class="d-flex flex-column flex-md-row align-items-stretch align-items-md-center gap-2">
<div class="flex-grow-1">
<input type="date" id="reservationDeleteDate" class="form-control form-control-sm"
value="{formatdate date=$DeleteDate format='Y-m-d'}" />
<input type="hidden" id="formattedReservationDeleteDate"
value="{formatdate date=$DeleteDate key=system}" />
<input type="text" id="reservationDeleteDate" class="form-control form-control-sm" />
</div>
<div style="min-width: 120px;">
{delete_button id='deleteReservations' class='btn-sm w-100'}
Expand All @@ -43,7 +40,7 @@
<div class="d-flex align-items-start">
<i class="bi bi-trash fs-5 text-warning mt-1 me-2"></i>
<div>
<h6 class="mb-0 d-inline">{translate key=DeletedReservations}
<h6 class="mb-0 d-block">{translate key=DeletedReservations}
<span class="badge bg-warning text-dark ms-2">{$DeletedReservationCount}</span>
</h6>
<div class="text-muted small">{translate key=PermanentlyPurgeAllDeletedReservations}
Expand All @@ -52,7 +49,7 @@
</div>
</div>
<div class="col-12 col-md-5 text-md-end">
<button id="purgeReservations" type="button" class="btn btn-sm btn-warning w-100 w-md-auto">
<button id="purgeReservations" type="button" class="btn btn-sm btn-warning w-100">
<i class="bi bi-eraser me-1"></i>{translate key=Purge}
</button>
</div>
Expand All @@ -66,7 +63,7 @@
<div class="d-flex align-items-start">
<i class="bi bi-clock-history fs-5 link-primary mt-1 me-2"></i>
<div>
<h6 class="mb-0 d-inline">{translate key=ManageBlackouts}
<h6 class="mb-0 d-block">{translate key=ManageBlackouts}
<span class="badge bg-primary ms-2">{$BlackoutsCount}</span>
</h6>
<div class="text-muted small">{translate key=DeleteBlackoutsBefore}</div>
Expand All @@ -76,10 +73,7 @@
<div class="col-12 col-md-5">
<div class="d-flex flex-column flex-md-row align-items-stretch align-items-md-center gap-2">
<div class="flex-grow-1">
<input type="date" id="blackoutDeleteDate" class="form-control form-control-sm"
value="{formatdate date=$DeleteDate format='Y-m-d'}" />
<input type="hidden" id="formattedBlackoutDeleteDate"
value="{formatdate date=$DeleteDate key=system}" />
<input type="text" id="blackoutDeleteDate" class="form-control form-control-sm" />
</div>
<div style="min-width: 120px;">
{delete_button id='deleteBlackouts' class='btn-sm w-100'}
Expand All @@ -96,7 +90,7 @@
<div class="d-flex align-items-start">
<i class="bi bi-person-x fs-5 link-primary mt-1 me-2"></i>
<div>
<h6 class="mb-0 d-inline">{translate key=Users}
<h6 class="mb-0 d-block">{translate key=Users}
<span class="badge bg-primary ms-2">{$UserCount}</span>
</h6>
<div class="text-muted small">{translate key=PermanentlyDeleteUsers}</div>
Expand All @@ -106,10 +100,7 @@
<div class="col-12 col-md-5">
<div class="d-flex flex-column flex-md-row align-items-stretch align-items-md-center gap-2">
<div class="flex-grow-1">
<input type="date" id="userDeleteDate" class="form-control form-control-sm"
value="{formatdate date=$DeleteDate format='Y-m-d'}" />
<input type="hidden" id="formattedUserDeleteDate"
value="{formatdate date=$DeleteDate key=system}" />
<input type="text" id="userDeleteDate" class="form-control form-control-sm" />
</div>
<div style="min-width: 120px;">
{delete_button id='deleteUsers' class='btn-sm w-100'}
Expand Down Expand Up @@ -239,38 +230,37 @@
</div>

{include file="javascript-includes.tpl"}
{jsfile src="js/moment.min.js"}
{jsfile src="ajax-helpers.js"}

{control type="DatePickerSetupControl" ControlId="reservationDeleteDate" AltId="formattedReservationDeleteDate"}
{control type="DatePickerSetupControl" ControlId="blackoutDeleteDate" AltId="formattedBlackoutDeleteDate"}
{control type="DatePickerSetupControl" ControlId="userDeleteDate" AltId="formattedUserDeleteDate"}
{control type="DatePickerSetupControl" ControlId="reservationDeleteDate" DefaultDate=$DeleteDate}
{control type="DatePickerSetupControl" ControlId="blackoutDeleteDate" DefaultDate=$DeleteDate}
{control type="DatePickerSetupControl" ControlId="userDeleteDate" DefaultDate=$DeleteDate}

<script type="text/javascript">
$(document).ready(function() {
$('#deleteReservations').click(function(e) {
$('#formDeleteReservationDate').val($('#formattedReservationDeleteDate').val());
ajaxGet('{$smarty.server.SCRIPT_NAME}?dr=getReservationCount&date=' + $('#formattedReservationDeleteDate').val(), null, function (data) {
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('deleteReservations').addEventListener('click', function(e) {
$('#formDeleteReservationDate').val($('#reservationDeleteDate').val());
ajaxGet('{$smarty.server.SCRIPT_NAME}?dr=getReservationCount&date=' + $('#reservationDeleteDate').val(), null, function (data) {
$('#deleteReservationCount').text(data.count);
$('#deleteReservationsDialog').modal('show');
})
});

$('#purgeReservations').click(function(e) {
document.getElementById('purgeReservations').addEventListener('click', function(e) {
$('#purgeReservationsDialog').modal('show');
});

$('#deleteBlackouts').click(function(e) {
$('#formDeleteBlackoutDate').val($('#formattedBlackoutDeleteDate').val());
ajaxGet('{$smarty.server.SCRIPT_NAME}?dr=getBlackoutCount&date=' + $('#formattedBlackoutDeleteDate').val(), null, function (data) {
document.getElementById('deleteBlackouts').addEventListener('click', function(e) {
$('#formDeleteBlackoutDate').val($('#blackoutDeleteDate').val());
ajaxGet('{$smarty.server.SCRIPT_NAME}?dr=getBlackoutCount&date=' + $('#blackoutDeleteDate').val(), null, function (data) {
$('#deleteBlackoutCount').text(data.count);
$('#deleteBlackoutDialog').modal('show');
})
});

$('#deleteUsers').click(function(e) {
$('#formDeleteUserDate').val($('#formattedUserDeleteDate').val());
ajaxGet('{$smarty.server.SCRIPT_NAME}?dr=getUserCount&date=' + $('#formattedUserDeleteDate').val(), null, function (data) {
document.getElementById('deleteUsers').addEventListener('click', function(e) {
$('#formDeleteUserDate').val($('#userDeleteDate').val());
ajaxGet('{$smarty.server.SCRIPT_NAME}?dr=getUserCount&date=' + $('#userDeleteDate').val(), null, function (data) {
$('#deleteUserCount').text(data.count);
$('#deleteUsersDialog').modal('show');
})
Expand Down