[UPDT] ATTENDANCE: Updated attendance delete method by converting to htmx method
This commit is contained in:
Horilla
@@ -2,144 +2,153 @@
|
||||
{% load i18n %}
|
||||
{% load static %}
|
||||
{% include 'filter_tags.html' %}
|
||||
<div id="activity-table">
|
||||
{% if data %}
|
||||
<div class="oh-table_sticky--wrapper">
|
||||
<div class="oh-sticky-dropdown--header">
|
||||
<div class="oh-dropdown" x-data="{open: false}">
|
||||
<button class="oh-sticky-dropdown_btn " @click="open = !open"><ion-icon name="ellipsis-vertical-sharp"
|
||||
role="img" class="md hydrated" aria-label="ellipsis vertical sharp"></ion-icon></button>
|
||||
<div class="oh-dropdown__menu oh-sticky-table_dropdown" x-show="open" @click.outside="open = false">
|
||||
<ul class="oh-dropdown__items" id="AttendanceActivityCells">
|
||||
</ul>
|
||||
</div>
|
||||
{% if messages %}
|
||||
<div class="oh-wrapper">
|
||||
{% for message in messages %}
|
||||
<div class="oh-alert-container">
|
||||
<div class="oh-alert oh-alert--animated {{message.tags}}">
|
||||
{{ message }}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if data %}
|
||||
<div class="oh-table_sticky--wrapper">
|
||||
<div class="oh-sticky-dropdown--header">
|
||||
<div class="oh-dropdown" x-data="{open: false}">
|
||||
<button class="oh-sticky-dropdown_btn " @click="open = !open"><ion-icon name="ellipsis-vertical-sharp"
|
||||
role="img" class="md hydrated" aria-label="ellipsis vertical sharp"></ion-icon></button>
|
||||
<div class="oh-dropdown__menu oh-sticky-table_dropdown" x-show="open" @click.outside="open = false">
|
||||
<ul class="oh-dropdown__items" id="AttendanceActivityCells">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="attendance-activity-table" data-table-name="attendance_activity_tab">
|
||||
<div class="oh-sticky-table" >
|
||||
<div class="oh-sticky-table__table oh-table--sortable">
|
||||
<div class="oh-sticky-table__thead">
|
||||
<div class="oh-sticky-table__tr">
|
||||
<div class="oh-sticky-table__th" style="width: 20px;">
|
||||
</div>
|
||||
<div id="attendance-activity-table" data-table-name="attendance_activity_tab">
|
||||
<div class="oh-sticky-table" >
|
||||
<div class="oh-sticky-table__table oh-table--sortable">
|
||||
<div class="oh-sticky-table__thead">
|
||||
<div class="oh-sticky-table__tr">
|
||||
<div class="oh-sticky-table__th" style="width: 20px;">
|
||||
<div class="centered-div">
|
||||
<input type="checkbox" title="{% trans 'Select All' %}"
|
||||
class="oh-input oh-input__checkbox all-attendance-activity"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="oh-sticky-table__th {% if request.sort_option.order == '-employee_id__employee_first_name' %}arrow-up {% elif request.sort_option.order == 'employee_id__employee_first_name' %}arrow-down {% else %}arrow-up-down {% endif %}" hx-target='#activity-table' hx-get="{% url 'attendance-activity-search' %}?{{pd}}&orderby=employee_id__employee_first_name">{% trans "Employee" %}</div>
|
||||
<div data-cell-index="1" data-cell-title='{% trans "Attendance Date" %}' class="oh-sticky-table__th {% if request.sort_option.order == '-attendance_date' %}arrow-up {% elif request.sort_option.order == 'attendance_date' %}arrow-down {% else %}arrow-up-down {% endif %}" hx-target='#activity-table' hx-get="{% url 'attendance-activity-search' %}?{{pd}}&orderby=attendance_date">{% trans "Attendance Date" %}</div>
|
||||
<div data-cell-index="2" data-cell-title='{% trans "In Date" %}' class="oh-sticky-table__th {% if request.sort_option.order == '-clock_in_date' %}arrow-up {% elif request.sort_option.order == 'clock_in_date' %}arrow-down {% else %}arrow-up-down {% endif %}" hx-target='#activity-table' hx-get="{% url 'attendance-activity-search' %}?{{pd}}&orderby=clock_in_date">{% trans "In Date" %}</div>
|
||||
<div data-cell-index="3" data-cell-title='{% trans "Check In" %}' class='oh-sticky-table__th'>{% trans "Check In" %}</div>
|
||||
<div data-cell-index="4" data-cell-title='{% trans "Check Out" %}' class='oh-sticky-table__th'>{% trans "Check Out" %}</div>
|
||||
<div data-cell-index="5" data-cell-title='{% trans "Out Date" %}' class="oh-sticky-table__th {% if request.sort_option.order == '-clock_out_date' %}arrow-up {% elif request.sort_option.order == 'clock_out_date' %}arrow-down {% else %}arrow-up-down {% endif %}" hx-target='#activity-table' hx-get="{% url 'attendance-activity-search' %}?{{pd}}&orderby=clock_out_date">{% trans "Out Date" %}</div>
|
||||
<div class='oh-sticky-table__th oh-sticky-table__right' scope="col" style="width: 86px;">{% trans "Actions" %}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="oh-sticky-table__tbody">
|
||||
{% for activity in data %}
|
||||
<div class="oh-sticky-table__tr" draggable="true">
|
||||
<div class="oh-sticky-table__sd" onclick="event.stopPropagation();">
|
||||
<div class="centered-div">
|
||||
<input type="checkbox" title="{% trans 'Select All' %}"
|
||||
class="oh-input oh-input__checkbox all-attendance-activity"/>
|
||||
<input type="checkbox"
|
||||
id="{{activity.id}}"
|
||||
onchange="highlightRow($(this))"
|
||||
class="oh-input attendance-checkbox oh-input__checkbox all-attendance-activity-row" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="oh-sticky-table__th {% if request.sort_option.order == '-employee_id__employee_first_name' %}arrow-up {% elif request.sort_option.order == 'employee_id__employee_first_name' %}arrow-down {% else %}arrow-up-down {% endif %}" hx-target='#activity-table' hx-get="{% url 'attendance-activity-search' %}?{{pd}}&orderby=employee_id__employee_first_name">{% trans "Employee" %}</div>
|
||||
<div data-cell-index="1" data-cell-title='{% trans "Attendance Date" %}' class="oh-sticky-table__th {% if request.sort_option.order == '-attendance_date' %}arrow-up {% elif request.sort_option.order == 'attendance_date' %}arrow-down {% else %}arrow-up-down {% endif %}" hx-target='#activity-table' hx-get="{% url 'attendance-activity-search' %}?{{pd}}&orderby=attendance_date">{% trans "Attendance Date" %}</div>
|
||||
<div data-cell-index="2" data-cell-title='{% trans "In Date" %}' class="oh-sticky-table__th {% if request.sort_option.order == '-clock_in_date' %}arrow-up {% elif request.sort_option.order == 'clock_in_date' %}arrow-down {% else %}arrow-up-down {% endif %}" hx-target='#activity-table' hx-get="{% url 'attendance-activity-search' %}?{{pd}}&orderby=clock_in_date">{% trans "In Date" %}</div>
|
||||
<div data-cell-index="3" data-cell-title='{% trans "Check In" %}' class='oh-sticky-table__th'>{% trans "Check In" %}</div>
|
||||
<div data-cell-index="4" data-cell-title='{% trans "Check Out" %}' class='oh-sticky-table__th'>{% trans "Check Out" %}</div>
|
||||
<div data-cell-index="5" data-cell-title='{% trans "Out Date" %}' class="oh-sticky-table__th {% if request.sort_option.order == '-clock_out_date' %}arrow-up {% elif request.sort_option.order == 'clock_out_date' %}arrow-down {% else %}arrow-up-down {% endif %}" hx-target='#activity-table' hx-get="{% url 'attendance-activity-search' %}?{{pd}}&orderby=clock_out_date">{% trans "Out Date" %}</div>
|
||||
<div class='oh-sticky-table__th oh-sticky-table__right' scope="col" style="width: 86px;">{% trans "Actions" %}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="oh-sticky-table__tbody">
|
||||
{% for activity in data %}
|
||||
<div class="oh-sticky-table__tr" draggable="true">
|
||||
<div class="oh-sticky-table__sd" onclick="event.stopPropagation();">
|
||||
<div class="centered-div">
|
||||
<input type="checkbox"
|
||||
id="{{activity.id}}"
|
||||
onchange="highlightRow($(this))"
|
||||
class="oh-input attendance-checkbox oh-input__checkbox all-attendance-activity-row" />
|
||||
</div>
|
||||
<div class="oh-sticky-table__td">
|
||||
<div class="oh-profile oh-profile--md">
|
||||
<div class="oh-profile__avatar mr-1">
|
||||
<img
|
||||
src="{{activity.employee_id.get_avatar}}"
|
||||
class="oh-profile__image"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<span class="oh-profile__name oh-text--dark"
|
||||
>{{activity.employee_id}}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="oh-sticky-table__td">
|
||||
<div class="oh-profile oh-profile--md">
|
||||
<div class="oh-profile__avatar mr-1">
|
||||
<img
|
||||
src="{{activity.employee_id.get_avatar}}"
|
||||
class="oh-profile__image"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<span class="oh-profile__name oh-text--dark"
|
||||
>{{activity.employee_id}}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div data-cell-index="1" class="oh-sticky-table__td dateformat_changer">{{activity.attendance_date}}</div>
|
||||
<div data-cell-index="2" class="oh-sticky-table__td dateformat_changer">{{activity.clock_in_date}}</div>
|
||||
<div data-cell-index="3" class="oh-sticky-table__td timeformat_changer">{{activity.clock_in}}</div>
|
||||
<div data-cell-index="4" class="oh-sticky-table__td timeformat_changer">{{activity.clock_out}}</div>
|
||||
<div data-cell-index="5" class="oh-sticky-table__td dateformat_changer">{{activity.clock_out_date}}</div>
|
||||
<div class="oh-sticky-table__td oh-sticky-table__right">
|
||||
{% if perms.attendance.delete_attendanceactivity %}
|
||||
<form action="{% url 'attendance-activity-delete' activity.id %}"
|
||||
onclick="event.stopPropagation()" onsubmit="return confirm('{% trans "Are you sure want to delete this attendance?" %}')"
|
||||
hx-target="#tab_contents" method='post'>
|
||||
<div data-cell-index="1" class="oh-sticky-table__td dateformat_changer">{{activity.attendance_date}}</div>
|
||||
<div data-cell-index="2" class="oh-sticky-table__td dateformat_changer">{{activity.clock_in_date}}</div>
|
||||
<div data-cell-index="3" class="oh-sticky-table__td timeformat_changer">{{activity.clock_in}}</div>
|
||||
<div data-cell-index="4" class="oh-sticky-table__td timeformat_changer">{{activity.clock_out}}</div>
|
||||
<div data-cell-index="5" class="oh-sticky-table__td dateformat_changer">{{activity.clock_out_date}}</div>
|
||||
<div class="oh-sticky-table__td oh-sticky-table__right">
|
||||
{% if perms.attendance.delete_attendanceactivity %}
|
||||
<form hx-confirm="{% trans 'Are you sure want to delete this attendance?' %}"
|
||||
hx-post="{% url 'attendance-activity-delete' activity.id %}?{{pd}}"
|
||||
onclick="event.stopPropagation()" hx-target="#activity-table">
|
||||
{% csrf_token %}
|
||||
<button type='submit' class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" title="{% trans 'Remove' %}"><ion-icon name="trash-outline"></ion-icon></button>
|
||||
<button type='submit' class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" title="{% trans 'Remove' %}">
|
||||
<ion-icon name="trash-outline"></ion-icon>
|
||||
</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="oh-pagination">
|
||||
<span
|
||||
class="oh-pagination__page"
|
||||
>
|
||||
{% trans "Page" %} {{ data.number }} {% trans "of" %} {{ data.paginator.num_pages }}.
|
||||
</span
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="oh-pagination">
|
||||
<span
|
||||
class="oh-pagination__page"
|
||||
>
|
||||
<nav class="oh-pagination__nav">
|
||||
<div class="oh-pagination__input-container me-3">
|
||||
<span class="oh-pagination__label me-1">{% trans "Page" %}</span>
|
||||
<input
|
||||
type="number"
|
||||
name="page"
|
||||
class="oh-pagination__input"
|
||||
value="{{data.number}}"
|
||||
hx-get="{% url 'attendance-activity-search' %}?{{pd}}"
|
||||
hx-target="#activity-table"
|
||||
min="1"
|
||||
/>
|
||||
<span class="oh-pagination__label">{% trans "of" %} {{data.paginator.num_pages}}</span>
|
||||
</div>
|
||||
<ul class="oh-pagination__items">
|
||||
{% if data.has_previous %}
|
||||
<li class="oh-pagination__item oh-pagination__item--wide">
|
||||
<a hx-target='#activity-table' hx-get="{% url 'attendance-activity-search' %}?{{pd}}&page=1" class="oh-pagination__link" onclick="tickactivityCheckboxes()">{% trans "First" %}</a>
|
||||
</li>
|
||||
<li class="oh-pagination__item oh-pagination__item--wide">
|
||||
<a hx-target='#activity-table' hx-get="{% url 'attendance-activity-search' %}?{{pd}}&page={{ data.previous_page_number }}" class="oh-pagination__link" onclick="tickactivityCheckboxes()">{% trans "Previous" %}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if data.has_next %}
|
||||
<li class="oh-pagination__item oh-pagination__item--wide">
|
||||
<a hx-target='#activity-table' hx-get="{% url 'attendance-activity-search' %}?{{pd}}&page={{ data.next_page_number }}" class="oh-pagination__link" onclick="tickactivityCheckboxes()">{% trans "Next" %}</a>
|
||||
</li>
|
||||
<li class="oh-pagination__item oh-pagination__item--wide">
|
||||
<a hx-target='#activity-table' hx-get="{% url 'attendance-activity-search' %}?{{pd}}&page={{ data.paginator.num_pages }}" class="oh-pagination__link" onclick="tickactivityCheckboxes()">{% trans "Last" %}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
{% trans "Page" %} {{ data.number }} {% trans "of" %} {{ data.paginator.num_pages }}.
|
||||
</span
|
||||
>
|
||||
<nav class="oh-pagination__nav">
|
||||
<div class="oh-pagination__input-container me-3">
|
||||
<span class="oh-pagination__label me-1">{% trans "Page" %}</span>
|
||||
<input
|
||||
type="number"
|
||||
name="page"
|
||||
class="oh-pagination__input"
|
||||
value="{{data.number}}"
|
||||
hx-get="{% url 'attendance-activity-search' %}?{{pd}}"
|
||||
hx-target="#activity-table"
|
||||
min="1"
|
||||
/>
|
||||
<span class="oh-pagination__label">{% trans "of" %} {{data.paginator.num_pages}}</span>
|
||||
</div>
|
||||
<ul class="oh-pagination__items">
|
||||
{% if data.has_previous %}
|
||||
<li class="oh-pagination__item oh-pagination__item--wide">
|
||||
<a hx-target='#activity-table' hx-get="{% url 'attendance-activity-search' %}?{{pd}}&page=1" class="oh-pagination__link" onclick="tickactivityCheckboxes()">{% trans "First" %}</a>
|
||||
</li>
|
||||
<li class="oh-pagination__item oh-pagination__item--wide">
|
||||
<a hx-target='#activity-table' hx-get="{% url 'attendance-activity-search' %}?{{pd}}&page={{ data.previous_page_number }}" class="oh-pagination__link" onclick="tickactivityCheckboxes()">{% trans "Previous" %}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if data.has_next %}
|
||||
<li class="oh-pagination__item oh-pagination__item--wide">
|
||||
<a hx-target='#activity-table' hx-get="{% url 'attendance-activity-search' %}?{{pd}}&page={{ data.next_page_number }}" class="oh-pagination__link" onclick="tickactivityCheckboxes()">{% trans "Next" %}</a>
|
||||
</li>
|
||||
<li class="oh-pagination__item oh-pagination__item--wide">
|
||||
<a hx-target='#activity-table' hx-get="{% url 'attendance-activity-search' %}?{{pd}}&page={{ data.paginator.num_pages }}" class="oh-pagination__link" onclick="tickactivityCheckboxes()">{% trans "Last" %}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
{% else %}
|
||||
<!-- start of empty page -->
|
||||
<div class="oh-404">
|
||||
<img
|
||||
style="width: 150px; height: 150px"
|
||||
src="{% static 'images/ui/no-results.png' %}"
|
||||
class="oh-404__image mb-4"
|
||||
/>
|
||||
<h5 class="oh-404__subtitle">
|
||||
{% trans "No search result found!" %}
|
||||
</h5>
|
||||
</div>
|
||||
<!-- end of empty page -->
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% else %}
|
||||
<!-- start of empty page -->
|
||||
<div class="oh-404">
|
||||
<img
|
||||
style="width: 150px; height: 150px"
|
||||
src="{% static 'images/ui/no-results.png' %}"
|
||||
class="oh-404__image mb-4"
|
||||
/>
|
||||
<h5 class="oh-404__subtitle">
|
||||
{% trans "No search result found!" %}
|
||||
</h5>
|
||||
</div>
|
||||
<!-- end of empty page -->
|
||||
{% endif %}
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
tickactivityCheckboxes();
|
||||
|
||||
@@ -1,23 +1,45 @@
|
||||
{% extends 'index.html' %}{% block content %} {% load i18n %}{% load static %}
|
||||
|
||||
<div >
|
||||
{% include 'attendance/attendance_activity/nav.html' %}
|
||||
<div class="oh-checkpoint-badge mb-2" id="selectedActivity" data-ids="[]" data-clicked="" style="display:none;" >
|
||||
{% trans "Selected Attendance" %}
|
||||
<div>
|
||||
{% include 'attendance/attendance_activity/nav.html' %}
|
||||
<div
|
||||
class="oh-checkpoint-badge mb-2"
|
||||
id="selectedActivity"
|
||||
data-ids="[]"
|
||||
data-clicked=""
|
||||
style="display: none"
|
||||
>
|
||||
{% trans "Selected Attendance" %}
|
||||
</div>
|
||||
<div class="oh-wrapper">
|
||||
<div
|
||||
class="oh-checkpoint-badge text-success mb-2"
|
||||
id="selectAllActivity"
|
||||
style="cursor: pointer"
|
||||
>
|
||||
{% trans "Select All Attendance" %}
|
||||
</div>
|
||||
<div class="oh-wrapper">
|
||||
<div class="oh-checkpoint-badge text-success mb-2" id="selectAllActivity" style="cursor: pointer;">
|
||||
{% trans "Select All Attendance" %}
|
||||
</div>
|
||||
<div class="oh-checkpoint-badge text-secondary mb-2" id="unselectAllActivity" style="cursor: pointer;display: none;">
|
||||
{% trans "Unselect All Attendance" %}
|
||||
</div>
|
||||
<div class="oh-checkpoint-badge text-info mb-2" id="exportActivity" style="cursor: pointer;display: none;">
|
||||
{% trans "Export Attendance" %}
|
||||
</div>
|
||||
<div class="oh-checkpoint-badge text-danger mb-2" id="selectedShowActivity" >
|
||||
</div>
|
||||
{% include 'attendance/attendance_activity/activity_list.html' %}
|
||||
<div
|
||||
class="oh-checkpoint-badge text-secondary mb-2"
|
||||
id="unselectAllActivity"
|
||||
style="cursor: pointer; display: none"
|
||||
>
|
||||
{% trans "Unselect All Attendance" %}
|
||||
</div>
|
||||
<div
|
||||
class="oh-checkpoint-badge text-info mb-2"
|
||||
id="exportActivity"
|
||||
style="cursor: pointer; display: none"
|
||||
>
|
||||
{% trans "Export Attendance" %}
|
||||
</div>
|
||||
<div
|
||||
class="oh-checkpoint-badge text-danger mb-2"
|
||||
id="selectedShowActivity"
|
||||
></div>
|
||||
<div id="activity-table">
|
||||
{% include 'attendance/attendance_activity/activity_list.html' %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,6 +1,17 @@
|
||||
{% load i18n %}
|
||||
{% load attendancefilters %}
|
||||
{% include 'filter_tags.html' %}
|
||||
{% if messages %}
|
||||
<div class="oh-wrapper">
|
||||
{% for message in messages %}
|
||||
<div class="oh-alert-container">
|
||||
<div class="oh-alert oh-alert--animated {{message.tags}}">
|
||||
{{ message }}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="oh-card">
|
||||
{% for attendance_list in data %}
|
||||
<div class="oh-accordion-meta">
|
||||
@@ -68,12 +79,14 @@
|
||||
<div class="oh-sticky-table__td dateformat_changer">{{activity.clock_out_date}}</div>
|
||||
<div class="oh-sticky-table__td oh-sticky-table__right">
|
||||
{% if perms.attendance.delete_attendanceactivity %}
|
||||
<form action="{% url 'attendance-activity-delete' activity.id %}"
|
||||
onclick="event.stopPropagation()" onsubmit="return confirm('{% trans "Are you sure want to delete this attendance?" %}')"
|
||||
hx-target="#tab_contents" method='post'>
|
||||
{% csrf_token %}
|
||||
<button type='submit' class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" title="{% trans 'Remove' %}"><ion-icon name="trash-outline"></ion-icon></button>
|
||||
</form>
|
||||
<form hx-confirm="{% trans 'Are you sure want to delete this attendance?' %}"
|
||||
hx-post="{% url 'attendance-activity-delete' activity.id %}?{{pd}}"
|
||||
onclick="event.stopPropagation()" hx-target="#activity-table">
|
||||
{% csrf_token %}
|
||||
<button type='submit' class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" title="{% trans 'Remove' %}">
|
||||
<ion-icon name="trash-outline"></ion-icon>
|
||||
</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user