278 lines
9.4 KiB
HTML
278 lines
9.4 KiB
HTML
{% load i18n %}
|
|
<style>
|
|
.oh-sticky-table-container {
|
|
max-width: 2000px;
|
|
max-height: 170px;
|
|
}
|
|
.oh-sticky-table-request {
|
|
max-height: 500px;
|
|
overflow-y: auto;
|
|
}
|
|
.row-status--orange {
|
|
border-left: 4px solid orange;
|
|
border-radius: 5px;
|
|
}
|
|
.row-status--gray {
|
|
border-left: 4px solid gray;
|
|
border-radius: 5px;
|
|
}
|
|
.row-status--yellow {
|
|
border-left: 4px solid yellowgreen;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.kanban-card-container {
|
|
display: flex;
|
|
gap: 10px;
|
|
width:100%;
|
|
overflow-x: scroll;
|
|
}
|
|
.oh-kanban-card {
|
|
min-width: 350px;
|
|
flex-basis: calc(17% - 15px);
|
|
}
|
|
.oh-sticky-table-container + .oh-sticky-table-request {
|
|
margin-top: 20px;
|
|
}
|
|
</style>
|
|
|
|
<div class="d-flex flex-row-reverse">
|
|
<span class="m-3">
|
|
<span
|
|
class="oh-dot oh-dot--small me-1"
|
|
style="background-color: gray"
|
|
></span>
|
|
{% trans "Cancelled" %}
|
|
</span>
|
|
<span class="m-3">
|
|
<span
|
|
class="oh-dot oh-dot--small me-1"
|
|
style="background-color: orange"
|
|
></span>
|
|
{% trans "Requested" %}
|
|
</span>
|
|
<span class="m-3">
|
|
<span
|
|
class="oh-dot oh-dot--small me-1"
|
|
style="background-color: yellowgreen"
|
|
></span>
|
|
{% trans "Approved" %}
|
|
</span>
|
|
</div>
|
|
|
|
{% if user_leaves %}
|
|
<!-- Profile leave type card -->
|
|
<div class="oh-sticky-table-container">
|
|
<div class="oh-sticky-table">
|
|
<div class="kanban-card-container">
|
|
<!-- Container for Kanban cards -->
|
|
{% for user_leave in user_leaves %}
|
|
<div
|
|
class="oh-kanban-card"
|
|
data-toggle="oh-modal-toggle"
|
|
data-target="#editDialog"
|
|
hx-get="{% url 'user-request' user_leave.leave_type_id.id %}"
|
|
hx-target="#requestForm"
|
|
>
|
|
<div class="oh-kanban-card__avatar">
|
|
<div class="oh-kanban-card__profile-container">
|
|
{% if user_leave.leave_type_id.icon %}
|
|
<img
|
|
src="{{user_leave.leave_type_id.icon.url }}"
|
|
class="oh-kanban-card__profile-image"
|
|
alt="Leave Icon"
|
|
/>
|
|
{% else %}
|
|
<img
|
|
src="https://ui-avatars.com/api/?name={{user_leave.leave_type_id}}&background=random"
|
|
class="oh-kanban-card__profile-image"
|
|
alt="Leave Icon"
|
|
/>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="oh-kanban-card__details">
|
|
<span class="oh-kanban-card__title"
|
|
>{{user_leave.leave_type_id}}</span
|
|
>
|
|
<span class="oh-kanban-card__subtitle"
|
|
>{% trans "Available Leave Days" %} :
|
|
{{user_leave.available_days}}</span
|
|
><br />
|
|
<span class="oh-kanban-card__subtitle"
|
|
>{% trans "Carryforward Leave Days" %} :
|
|
{{user_leave.carryforward_days}}</span
|
|
><br />
|
|
<span class="oh-kanban-card__subtitle"
|
|
>{% trans "Total Leave Days" %} :
|
|
{{user_leave.total_leave_days}}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% elif employee_leaves %}
|
|
<!-- Employe leave type card -->
|
|
<div class="oh-sticky-table-container">
|
|
<div class="oh-sticky-table">
|
|
<div class="kanban-card-container">
|
|
<!-- Container for Kanban cards -->
|
|
{% for employee_leave in employee_leaves %}
|
|
<div
|
|
class="oh-kanban-card"
|
|
data-toggle="oh-modal-toggle"
|
|
data-target="#editDialog"
|
|
hx-get="{% url 'leave-request-creation' employee_leave.leave_type_id.id employee_leave.employee_id.id%}"
|
|
hx-target="#requestForm"
|
|
>
|
|
<div class="oh-kanban-card__avatar">
|
|
<div class="oh-kanban-card__profile-container">
|
|
{% if employee_leave.leave_type_id.icon %}
|
|
<img
|
|
src="{{employee_leave.leave_type_id.icon.url }}"
|
|
class="oh-kanban-card__profile-image"
|
|
alt="Leave Icon"
|
|
/>
|
|
{% else %}
|
|
<img
|
|
src="https://ui-avatars.com/api/?name={{employee_leave.leave_type_id}}&background=random"
|
|
class="oh-kanban-card__profile-image"
|
|
alt="Leave Icon"
|
|
/>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="oh-kanban-card__details">
|
|
<span class="oh-kanban-card__title"
|
|
>{{employee_leave.leave_type_id}}</span
|
|
>
|
|
<span class="oh-kanban-card__subtitle"
|
|
>{% trans "Available Leave Days" %} :
|
|
{{employee_leave.available_days}}</span
|
|
><br />
|
|
<span class="oh-kanban-card__subtitle"
|
|
>{% trans "Carryforward Leave Days" %} :
|
|
{{employee_leave.carryforward_days}}</span
|
|
><br />
|
|
<span class="oh-kanban-card__subtitle"
|
|
>{% trans "Total Leave Days" %} :
|
|
{{employee_leave.total_leave_days}}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
|
|
{% endif %}
|
|
|
|
<div class="oh-sticky-table-request">
|
|
<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">{% trans "Leave Type" %}</div>
|
|
<div class="oh-sticky-table__th">{% trans "Start Date" %}</div>
|
|
<div class="oh-sticky-table__th">{% trans "End Date" %}</div>
|
|
<div class="oh-sticky-table__th">{% trans "Requested days" %}</div>
|
|
<div class="oh-sticky-table__th">{% trans "Status" %}</div>
|
|
{% if perms.leave.change_leaverequest %}
|
|
<div class="oh-sticky-table__th"></div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="oh-sticky-table__tbody">
|
|
{% for leave_request in employee.leaverequest_set.all %}
|
|
<div class="oh-sticky-table__tr" draggable="true">
|
|
<div class="oh-sticky-table__sd {% if leave_request.status == "requested" %}row-status--orange {% elif leave_request.status == "cancelled" %} row-status--gray {% elif leave_request.status == "approved" %} row-status--yellow{% endif %}"
|
|
data-toggle="oh-modal-toggle" data-target="#tableTimeOff" hx-get="{% url 'user-request-one' leave_request.id %}" hx-target="#userRequestView">
|
|
<div class="oh-profile oh-profile--md">
|
|
<div class="oh-profile__avatar mr-1">
|
|
{% if leave_request.leave_type_id.icon %}
|
|
<img
|
|
src="{{leave_request.leave_type_id.icon.url}}"
|
|
class="oh-profile__image"
|
|
alt="Leave Type Icon"
|
|
/>
|
|
{% else%}
|
|
<img
|
|
src="https://ui-avatars.com/api/?name={{leave_request.leave_type_id}}&background=random"
|
|
class="oh-profile__image"
|
|
alt="Leave type icon"
|
|
/>
|
|
{% endif %}
|
|
</div>
|
|
<span class="oh-profile__name oh-text--dark"
|
|
>{{leave_request.leave_type_id}}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="oh-sticky-table__td">{{leave_request.start_date}}</div>
|
|
<div class="oh-sticky-table__td">{{leave_request.end_date}}</div>
|
|
<div class="oh-sticky-table__td">{{leave_request.requested_days}}</div>
|
|
<div class="oh-sticky-table__td">
|
|
{{leave_request.get_status_display}}
|
|
</div>
|
|
{% if perms.leave.change_leaverequest %}
|
|
<div class="oh-sticky-table__td">
|
|
<div class="oh-btn-group">
|
|
{% if leave_request.status != 'approved' %}
|
|
<a type="submit" href="{% url 'request-approve' leave_request.id leave_request.employee_id.id %}" title="{% trans 'Approve' %}"
|
|
class="oh-btn oh-btn--success w-100">
|
|
<ion-icon class="me-1" name="checkmark-outline"></ion-icon>
|
|
</a>
|
|
{% else %}
|
|
<a type="submit" href="{% url 'request-approve' leave_request.id leave_request.employee_id.id %}" title="{% trans 'Approve' %}"
|
|
class="oh-btn oh-btn--success oh-btn--disabled
|
|
w-100">
|
|
<ion-icon class="me-1" name="checkmark-outline"></ion-icon>
|
|
</a>
|
|
{% endif %}
|
|
{% if leave_request.status != 'cancelled' %}
|
|
<a type="submit" href="{% url 'request-cancel' leave_request.id leave_request.employee_id.id %}" title="{% trans 'Cancel' %}"
|
|
class="oh-btn oh-btn--danger w-100">
|
|
<ion-icon class="me-1" name="close-circle-outline"></ion-icon>
|
|
|
|
</a>
|
|
{% else %}
|
|
<a type="submit" href="{% url 'request-cancel' leave_request.id leave_request.employee_id.id %}" title="{% trans 'Cancel' %}"
|
|
class="oh-btn oh-btn--danger oh-btn--disabled
|
|
w-100" >
|
|
<ion-icon class="me-1" name="close-circle-outline"></ion-icon>
|
|
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="oh-modal"
|
|
id="editDialog"
|
|
role="dialog"
|
|
aria-labelledby="editDialogModal"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="oh-modal__dialog oh-modal__dialog--timeoff">
|
|
<div class="oh-modal__dialog-header">
|
|
<span class="oh-modal__dialog-title" id="editDialogDialog"
|
|
>{% trans "Leave Request" %}</span
|
|
>
|
|
<button class="oh-modal__close" aria-label="Close">
|
|
<ion-icon name="close-outline"></ion-icon>
|
|
</button>
|
|
</div>
|
|
<div id="requestForm"></div>
|
|
</div>
|
|
</div>
|