Files
ihrm/employee/templates/tabs/shift-tab.html

972 lines
39 KiB
HTML

{% load i18n %} {% load static %}
{% load basefilters %}
{% load attendancefilters %}
<div class="oh-wrapper mt-4">
{% if employee.employee_work_info.shift_id or shift_data%}
<span class="fw-bold" style="font-size:17px;"> {% if employee.employee_work_info.shift_id %} {% trans "Current Shift" %} &nbsp : &nbsp {{employee.employee_work_info.shift_id}} {% endif %}</span>
<button style="display:inline-block;"
class="oh-btn oh-btn--secondary ms-3"
data-toggle="oh-modal-toggle"
data-target="#shiftRequestModal"
hx-get="{% url 'shift-request-reallocate' %}?emp_id={{request.user.employee_get.id}}"
hx-target="#shiftRequestTargetModal"
>
<ion-icon name="add-sharp" class="mr-1 md hydrated" role="img" aria-label="add sharp"></ion-icon>{% trans "Reallocate Shift." %}
</button>
{% endif %}
<div class="oh-tabs mt-3">
<ul class="oh-tabs__tablist">
<li class="oh-tabs__tab oh-tabs__tab--active" data-target="#shift_tab_1">
<div>
<img
src="{% static 'images/ui/work-from-home (1).png' %}"
alt=""
style="width: 25px; height: 25px; margin-right: 3px"
/>
{% trans "Work type request" %}
</div>
<button
class="oh-btn oh-btn--secondary-outline oh-stop-prop oh-accordion-meta__btn p-2"
title="Add"
hx-get="{% url 'work-type-request' %}?emp_id={{emp_id}}"
hx-target="#formBody"
data-target="#workTypeRequestModal"
data-toggle="oh-modal-toggle"
>
<ion-icon
class="md hydrated"
name="add-outline"
role="img"
aria-label="add outline"
></ion-icon>
</button>
</li>
<li class="oh-tabs__tab" data-target="#shift_tab_3">
<div>
<img
src="{% static 'images/ui/work-from-home.png' %}"
alt=""
style="width: 25px; height: 25px; margin-right: 3px"
/>
{% trans "Rotating work type" %}
</div>
{% if not request.GET.profile and perms.base.add_rotatingworktypeassign %}
<button
class="oh-btn oh-btn--secondary-outline oh-stop-prop oh-accordion-meta__btn p-2"
title="Add"
hx-get="{% url 'rotating-work-type-assign-add' %}?emp_id={{emp_id}}"
hx-target="#rotatingWorkTypeAssignModalBody"
data-target="#rotating-work-type-modal"
data-toggle="oh-modal-toggle"
>
<ion-icon
class="md hydrated"
name="add-outline"
role="img"
aria-label="add outline"
></ion-icon>
</button>
{% endif%}
</li>
<li class="oh-tabs__tab" data-target="#shift_tab_4">
<div>
<img
src="{% static 'images/ui/time-management.png' %}"
alt=""
style="width: 25px; height: 25px; margin-right: 3px; opacity: 0.5"
/>
{% trans "Shift request" %}
</div>
<button
class="oh-btn oh-btn--secondary-outline oh-stop-prop oh-accordion-meta__btn p-2"
title="Add"
hx-get="{% url 'shift-request' %}?emp_id={{emp_id}}"
hx-target="#shiftRequestTargetModal"
data-target="#shiftRequestModal"
data-toggle="oh-modal-toggle"
>
<ion-icon
class="md hydrated"
name="add-outline"
role="img"
aria-label="add outline"
></ion-icon>
</button>
</li>
<li class="oh-tabs__tab" data-target="#shift_tab_2">
<div>
<img
src="{% static 'images/ui/shift.png' %}"
alt=""
style="width: 25px; height: 25px; margin-right: 3px"
/>
{% trans "Rotating Shift" %}
</div>
{% if not request.GET.profile and perms.add_rotatingworktypeassign %}
<button
class="oh-btn oh-btn--secondary-outline oh-stop-prop oh-accordion-meta__btn p-2"
title="Add"
hx-get="{% url 'rotating-shift-assign-add' %}?emp_id={{emp_id}}"
hx-target="#rotatingShiftAssignModalBody"
data-target="#rotating-shift-modal"
data-toggle="oh-modal-toggle"
>
<ion-icon
class="md hydrated"
name="add-outline"
role="img"
aria-label="add outline"
></ion-icon>
</button>
{% endif %}
</li>
</ul>
<div class="oh-tabs__contents" id="view-container">
<div class="oh-tabs__content oh-tabs__content--active" id="shift_tab_1">
<!-- Sticky Table -->
{% if work_data %}
<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">
<div class="d-flex">
<div
hx-get="{% url 'work-type-request-search' %}?{{pd}}&orderby=employee_id__employee_first_name"
hx-target="#view-container"
>
{% trans "Employee" %}
</div>
</div>
</div>
<div class="oh-sticky-table__th">
{% trans "Requested Work Type" %}
</div>
<div class="oh-sticky-table__th">
{% trans "Previous/Current Work Type" %}
</div>
<div
class="oh-sticky-table__th"
hx-get="{% url 'work-type-request-search' %}?{{pd}}&orderby=requested_date"
hx-target="#view-container"
>
{% trans "Requested Date" %}
</div>
<div
class="oh-sticky-table__th"
hx-get="{% url 'work-type-request-search' %}?{{pd}}&orderby=requested_till"
hx-target="#view-container"
>
{% trans "Requested Till" %}
</div>
<div class="oh-sticky-table__th">{% trans "Description" %}</div>
<div class="oh-sticky-table__th"></div>
{% if not request.GET.profile %}
<div class="oh-sticky-table__th"></div>
<div class="oh-sticky-table__th"></div>
{% endif %}
</div>
</div>
{% for work_type_request in work_data %}
<div class="oh-sticky-table__tbody">
<div
class="oh-sticky-table__tr"
hx-get="{% url 'work-type-request-single-view' work_type_request.id %}"
hx-target="#singleViewTarget"
data-target="#singleViewModal"
data-toggle="oh-modal-toggle"
draggable="true"
>
<div class="oh-sticky-table__sd">
<div class="d-flex">
<div class="oh-profile oh-profile--md">
<div class="oh-profile__avatar mr-1">
<img
src="https://ui-avatars.com/api/?name={{work_type_request.employee_id}}&amp;background=random"
class="oh-profile__image"
alt="Username"
/>
</div>
<span class="oh-profile__name oh-text--dark"
>{{work_type_request.employee_id}}</span
>
</div>
</div>
</div>
<div class="oh-sticky-table__td">
{{work_type_request.work_type_id}}
</div>
<div class="oh-sticky-table__td">
{{work_type_request.previous_work_type_id}}
</div>
<div class="oh-sticky-table__td dateformat_changer">
{{work_type_request.requested_date}}
</div>
<div class="oh-sticky-table__td dateformat_changer">
{{work_type_request.requested_till}}
</div>
<div class="oh-sticky-table__td">
{{work_type_request.description}}
</div>
<div class="oh-sticky-table__td">
<div class="oh-btn-group" onclick="event.stopPropagation();">
{% if work_type_request.approved == False and not work_type_request.canceled %}
<a
hx-get="{% url 'work-type-request-update' work_type_request.id %}"
hx-target="#workTypeRequestUpdateModalBody"
data-toggle="oh-modal-toggle"
data-target="#workTypeRequestUpdateModal"
class="oh-btn oh-btn--light-bkg w-50"
title="{% trans 'Edit' %}"
><ion-icon name="create-outline"></ion-icon
></a>
{% else %}
<button class="oh-btn oh-btn--light-bkg w-50" disabled>
<ion-icon name="create-outline"></ion-icon>
</button>
{% endif %} {% if work_type_request.approved == False %}
<form action="{% url 'work-type-request-delete' work_type_request.id %}"
onsubmit="return confirm('{% trans "Are you sure you want to delete this work type request?"%}');"
method='post' style="width: 87.01px; height:40.78px;">
{% 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>
{% else %}
<button class="oh-btn oh-btn--light-bkg w-50" disabled>
<ion-icon name="trash-outline"></ion-icon>
</button>
{% endif %}
</div>
</div>
{% if not request.GET.profile %}
{% if perms.base.change_worktyperequest or request.user|is_reportingmanager %}
<div
class="oh-sticky-table__td"
onclick="event.stopPropagation();"
>
{% if work_type_request.approved == False and work_type_request.canceled == False %}
<a href="/work-type-request-approve/{{work_type_request.id}}/"
onclick="return confirm('{% trans "Do you want to approve this request?" %}')"
class='oh-btn oh-btn--info'>
{% trans "Approve"%}
</a>
{% else %}
<button class="oh-btn oh-btn--info w-100" disabled>
{% trans "Approve" %}
</button>
{% endif %}
</div>
<div
class="oh-sticky-table__td"
onclick="event.stopPropagation();"
>
{% if work_type_request.canceled == False %}
<a href="/work-type-request-cancel/{{work_type_request.id}}/"
onclick="return confirm('{% trans "Do you want to cancel this request?" %}')"
class='oh-btn oh-btn--primary'>
{% trans "Cancel" %}
</a>
{% else %}
<button disabled class="oh-btn oh-btn--primary w-100">
{% trans "Canceled" %}
</button>
{% endif %}
</div>
{% endif %}
{% endif %}
</div>
</div>
{% endfor %}
</div>
</div>
{% else %}
<div
class="d-flex justify-content-center align-items-center"
style="height: 40vh"
>
<h5 class="oh-404__subtitle">
{% trans "No work type request has been created." %}
</h5>
</div>
{% endif %}
</div>
<div class="oh-tabs__content" id="shift_tab_2">
{% if rshift_assign %}
<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">
<div class="d-flex">
<div
hx-target="#view-container"
hx-get="{% url 'rotating-shift-assign-view' %}?{{pd}}&orderby=employee_id__employee_first_name"
>
{% trans "Employee" %}
</div>
</div>
</div>
<div class="oh-sticky-table__th">{% trans "Title" %}</div>
<div class="oh-sticky-table__th">{% trans "Based On" %}</div>
<div class="oh-sticky-table__th">{% trans "Rotate" %}</div>
<div
class="oh-sticky-table__th"
hx-target="#view-container"
hx-get="{% url 'rotating-shift-assign-view' %}?{{pd}}&orderby=start_date"
>
{% trans "Start Date" %}
</div>
<div class="oh-sticky-table__th">
{% trans "Current Shift" %}
</div>
<div
class="oh-sticky-table__th"
hx-target="#view-container"
hx-get="{% url 'rotating-shift-assign-view' %}?{{pd}}&orderby=next_change_date"
>
{% trans "Next Switch" %}
</div>
<div class="oh-sticky-table__th">{% trans "Next Shift" %}</div>
{% if not request.GET.profile and perms.base.change_rotatingworktypeassign or perms.base.delete_rotatingshiftassign or request.user|check_manager:rshift %}
<div class="oh-sticky-table__th"></div>
{% endif %}
</div>
</div>
<div class="oh-sticky-table__tbody">
{% for rshift in rshift_assign %}
<div class="oh-sticky-table__tr" draggable="true">
<div class="oh-sticky-table__sd">
<div class="d-flex">
<div class="oh-profile oh-profile--md">
<div class="oh-profile__avatar mr-1">
<img
src="https://ui-avatars.com/api/?name={{rshift.employee_id.employee_first_name}}+{{rshift.employee_id.employee_last_name}}&background=random"
class="oh-profile__image"
alt="Username"
/>
</div>
<span class="oh-profile__name oh-text--dark"
>{{rshift.employee_id}}</span
>
</div>
</div>
</div>
<div class="oh-sticky-table__td">
{{rshift.rotating_shift_id}}
</div>
<div class="oh-sticky-table__td">
{{rshift.get_based_on_display }}
</div>
<div class="oh-sticky-table__td">
{% if rshift.based_on == 'after' %}
{% trans "Rotate after" %}{{rshift.rotate_after_day}}{% trans "days" %}
{% elif rshift.based_on == "weekly" %}
{% trans "Weekly every" %}{{rshift.rotate_every_weekend}}
{% elif rshift.based_on == "monthly" %}
{% if rshift.rotate_every == "1" %}
{% trans "Rotate every " %}{{rshift.rotate_every}}{% trans "st day of month " %}
{% elif rshift.rotate_every == "2" %}
{% trans "Rotate every " %}{{rshift.rotate_every}}{% trans "nd day of month " %}
{% elif rshift.rotate_every == "3" %}
{% trans "Rotate every " %}{{rshift.rotate_every}}{% trans "rd day of month" %}
{% elif rshift.rotate_every == "last" %}
{% trans "Rotate every last day of month" %}
{% else %}
{% trans "Rotate every " %}{{rshift.rotate_every}}{% trans "th day of month " %}
{% endif %}
{% endif %}
</div>
<div class="oh-sticky-table__td dateformat_changer">{{rshift.start_date}}</div>
<div class="oh-sticky-table__td">{{rshift.current_shift}}</div>
<div class="oh-sticky-table__td dateformat_changer">
{{rshift.next_change_date}}
</div>
<div class="oh-sticky-table__td">{{rshift.next_shift}}</div>
{% if not request.GET.profile and perms.base.change_rotatingworktypeassign or perms.base.delete_rotatingshiftassign or request.user|check_manager:rshift %}
<div class="oh-sticky-table__td">
<div class="oh-btn-group">
{% if perms.base.change_rotatingshiftassign or perms.base.change_rotatingworktypeassign or request.user|check_manager:rshift %}
<a
hx-get="{% url 'rotating-shift-assign-update' rshift.id %}"
hx-target="#rotatingShiftAssignUpdateModalBody"
hx-swap="innerHTML"
data-target="#rotating-shift-update-modal"
data-toggle="oh-modal-toggle"
type="button"
class="oh-btn oh-btn--light-bkg w-50"
title="{% trans 'Update' %}"
>
<ion-icon name="create-outline"></ion-icon
></a>
{% endif %}
{% if perms.base.delete_rotatingshiftassign %}
<form action="{% url 'rotating-shift-assign-delete' rshift.id %}"
onsubmit="return confirm('{% trans "Are you sure you want to delete this rotating shift assign?" %}');"
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>
{% endif %}
</div>
</div>
{% endif %}
</div>
{% endfor %}
</div>
</div>
</div>
{% else %}
<div
class="d-flex justify-content-center align-items-center"
style="height: 40vh"
>
<h5 class="oh-404__subtitle">
{% trans "No rotating shift has been assigned." %}
</h5>
</div>
{% endif %}
</div>
<div class="oh-tabs__content" id="shift_tab_3">
{% if rwork_type_assign %}
<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">
<div class="d-flex">
<div
hx-target="#view-container"
hx-get="{% url 'rotating-work-type-assign-view' %}?{{pd}}&orderby=employee_id__employee_first_name"
>
{% trans "Employee" %}
</div>
</div>
</div>
<div class="oh-sticky-table__th">{% trans "Title" %}</div>
<div class="oh-sticky-table__th">{% trans "Based On" %}</div>
<div class="oh-sticky-table__th">{% trans "Rotate" %}</div>
<div
class="oh-sticky-table__th"
hx-target="#view-container"
hx-get="{% url 'rotating-work-type-assign-view' %}?{{pd}}&orderby=start_date"
>
{% trans "Start Date" %}
</div>
<div class="oh-sticky-table__th">
{% trans "Current Work Type" %}
</div>
<div
class="oh-sticky-table__th"
hx-target="#view-container"
hx-get="{% url 'rotating-work-type-assign-view' %}?{{pd}}&orderby=next_change_date"
>
{% trans "Next Switch" %}
</div>
<div class="oh-sticky-table__th">
{% trans "Next Work Type" %}
</div>
{% if not request.GET.profile and perms.base.change_rotatingworktypeassign or perms.base.delete_rotatingworktypeassign or request.user|check_manager:rwork_type %}
<div class="oh-sticky-table__th"></div>
{% endif %}
</div>
</div>
<div class="oh-sticky-table__tbody">
{% for rwork_type in rwork_type_assign %}
<div class="oh-sticky-table__tr" draggable="true">
<div class="oh-sticky-table__sd">
<div class="d-flex">
<div class="oh-profile oh-profile--md">
<div class="oh-profile__avatar mr-1">
<img
src="https://ui-avatars.com/api/?name={{rwork_type.employee_id.employee_first_name}}+{{rwork_type.employee_id.employee_last_name}}&background=random"
class="oh-profile__image"
alt="Username"
/>
</div>
<span class="oh-profile__name oh-text--dark"
>{{rwork_type.employee_id}}</span
>
</div>
</div>
</div>
<div class="oh-sticky-table__td">
{{rwork_type.rotating_work_type_id}}
</div>
<div class="oh-sticky-table__td">
{{rwork_type.get_based_on_display}}
</div>
<div class="oh-sticky-table__td">
{% if rwork_type.based_on == 'after' %}
{% trans "Rotate after" %}{{rwork_type.rotate_after_day}}{% trans " days" %}
{% elif rwork_type.based_on == "weekly" %}
{% trans "Weekly every" %}{{rwork_type.rotate_every_weekend}}
{% elif rwork_type.based_on == "monthly" %}
{% if rwork_type.rotate_every == "1" %}
{% trans "Rotate every "%}{{rwork_type.rotate_every}}{% trans "st day of month " %}
{% elif rwork_type.rotate_every == "2" %}
{% trans "Rotate every" %}{{rwork_type.rotate_every}}{% trans "nd day of month " %}
{% elif rwork_type.rotate_every == "3" %}
{% trans "Rotate every " %}{{rwork_type.rotate_every}}{% trans "rd day of month" %}
{% elif rwork_type.rotate_every == "last" %}
{% trans "Rotate every last day of month " %}
{% else %}
{% trans "Rotate every " %}{{rwork_type.rotate_every}}{% trans "th day of month " %}
{% endif %}
{% endif %}
</div>
<div class="oh-sticky-table__td dateformat_changer">{{rwork_type.start_date}}</div>
<div class="oh-sticky-table__td">
{{rwork_type.current_work_type}}
</div>
<div class="oh-sticky-table__td dateformat_changer">
{{rwork_type.next_change_date}}
</div>
<div class="oh-sticky-table__td">
{{rwork_type.next_work_type}}
</div>
{% if not request.GET.profile and perms.base.change_rotatingworktypeassign or perms.base.delete_rotatingworktypeassign or request.user|check_manager:rwork_type %}
<div class="oh-sticky-table__td">
<div class="oh-btn-group">
{% if perms.base.change_rotatingworktypeassign or request.user|check_manager:rwork_type %}
<a
hx-get="{% url 'rotating-work-type-assign-update' rwork_type.id %}"
hx-target="#rotatingWorkTypeAssignModalBody"
data-target="#rotating-work-type-modal"
data-toggle="oh-modal-toggle"
type="button"
class="oh-btn oh-btn--light-bkg w-50"
title="{% trans 'Update' %}"
>
<ion-icon name="create-outline"></ion-icon
></a>
{% endif %}
{% if perms.base.delete_rotatingworktypeassign %}
<form action="{% url 'rotating-work-type-assign-delete' rwork_type.id %}"
onsubmit="return confirm('{% trans "Are you sure you want to delete this rotating work type assign?"%}');"
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>
{% endif %}
</div>
</div>
{% endif %}
</div>
{% endfor %}
</div>
</div>
</div>
{% else %}
<div
class="d-flex justify-content-center align-items-center"
style="height: 40vh"
>
<h5 class="oh-404__subtitle">
{% trans "No rotating work type has been assigned." %}
</h5>
</div>
{% endif %}
</div>
</div>
<div class="oh-tabs__content" id="shift_tab_4">
{% if shift_data %}
<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">
<div class="d-flex">
<div
hx-target="#view-container"
hx-get="{% url 'shift-request-search' %}?{{pd}}&orderby=employee_id__employee_first_name"
hx-target="#view-container"
>
{% trans "Employee" %}
</div>
</div>
</div>
<div class="oh-sticky-table__th">
{% trans "Requested Shift" %}
</div>
<div class="oh-sticky-table__th">
{% trans "Previous/Current Shift" %}
</div>
<div
class="oh-sticky-table__th"
hx-get="{% url 'shift-request-search' %}?{{pd}}&orderby=requested_date"
hx-target="#view-container"
>
{% trans "Requested Date" %}
</div>
<div
class="oh-sticky-table__th"
hx-get="{% url 'shift-request-search' %}?{{pd}}&orderby=requested_till"
hx-target="#view-container"
>
{% trans "Requested Till" %}
</div>
<div class="oh-sticky-table__th">{% trans "Description" %}</div>
<div class="oh-sticky-table__th"></div>
{% if not request.GET.profile %}
<div class="oh-sticky-table__th"></div>
<div class="oh-sticky-table__th"></div>
{% endif %}
</div>
</div>
{% for shift_request in shift_data %}
<div class="oh-sticky-table__tbody">
<div
class="oh-sticky-table__tr"
hx-get="{% url 'shift-request-details' shift_request.id %}"
hx-target="#singleViewTarget"
data-toggle="oh-modal-toggle"
data-target="#singleViewModal"
draggable="true"
>
<div class="oh-sticky-table__sd">
<div class="d-flex">
<div class="oh-profile oh-profile--md">
<div class="oh-profile__avatar mr-1">
<img
src="https://ui-avatars.com/api/?name={{shift_request.employee_id}}&amp;background=random"
class="oh-profile__image"
alt="Username"
/>
</div>
<span class="oh-profile__name oh-text--dark"
>{{shift_request.employee_id}}</span
>
</div>
</div>
</div>
<div class="oh-sticky-table__td">{{shift_request.shift_id}}</div>
<div class="oh-sticky-table__td">
{{shift_request.previous_shift_id}}
</div>
<div class="oh-sticky-table__td dateformat_changer">
{{shift_request.requested_date}}
</div>
<div class="oh-sticky-table__td dateformat_changer">
{{shift_request.requested_till}}
</div>
<div class="oh-sticky-table__td">
{{shift_request.description}}
</div>
<div class="oh-sticky-table__td">
<div class="oh-btn-group" onclick="event.stopPropagation();">
{% comment %} start of edit button {% endcomment %}
{% if shift_request.approved == False and not shift_request.canceled %}
<a
hx-get="{% url 'shift-request-update' shift_request.id %}"
hx-target="#shiftRequestModalUpdateBody"
data-toggle="oh-modal-toggle"
data-target="#shiftRequestModalUpdate"
class="oh-btn oh-btn--light-bkg w-50"
title="{% trans 'Edit' %}"
><ion-icon name="create-outline"></ion-icon
></a>
{% else %}
<button class="oh-btn oh-btn--light-bkg w-50" disabled>
<ion-icon name="create-outline"></ion-icon>
</button>
{% endif %} {% comment %} end of edit button {% endcomment %}
{% if shift_request.approved == False %}
<form action="{% url 'shift-request-delete' shift_request.id %}"
onsubmit="return confirm('{% trans "Are you sure you want to delete this shift request?" %}');"
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>
{% else %}
<button class="oh-btn oh-btn--light-bkg w-50" disabled>
<ion-icon name="trash-outline"></ion-icon>
</button>
{% endif %}
</div>
</div>
{% if not request.GET.profile %}
{% if perms.base.change_shiftrequest or request.user|check_manager:shift_request %}
<div
class="oh-sticky-table__td"
onclick="event.stopPropagation();"
>
{% if shift_request.approved == False and shift_request.canceled == False%}
<a href="/shift-request-approve/{{shift_request.id}}/"
onclick="return confirm('{% trans "Do you want to approve this request?" %}')"
class='oh-btn oh-btn--info'>
{% trans "Approve" %}
</a>
{% else %}
<button class="oh-btn oh-btn--info w-100" disabled>
{% trans "Approve" %}
</button>
{% endif %}
</div>
<div
class="oh-sticky-table__td"
onclick="event.stopPropagation();"
>
{% if shift_request.canceled == False %}
<a href="/shift-request-cancel/{{shift_request.id}}/"
onclick="return confirm('{% trans "Do you want to cancel this request?" %}')" class='oh-btn oh-btn--primary'>
{% trans "Cancel" %}
</a>
{% else %}
<button disabled class="oh-btn oh-btn--primary w-100">
{% trans "Canceled" %}
</button>
{% endif %}
</div>
{% endif %}
{% endif %}
</div>
</div>
{% endfor %}
</div>
{% else %}
<div
class="d-flex justify-content-center align-items-center"
style="height: 40vh"
>
<h5 class="oh-404__subtitle">
{% trans "No Shift request has been created." %}
</h5>
</div>
{% endif %}
</div>
</div>
</div>
<div
class="oh-modal"
id="singleViewModal"
role="dialog"
aria-labelledby="singleViewModal"
aria-hidden="true"
>
<div class="oh-modal__dialog">
<div class="oh-modal__dialog-body" id="singleViewTarget"></div>
</div>
</div>
<div
class="oh-modal"
id="workTypeRequestUpdateModal"
role="dialog"
aria-labelledby="workTypeRequestUpdateModal"
aria-hidden="true"
>
<div class="oh-modal__dialog">
<div class="oh-modal__dialog-header">
<h5 class="oh-modal__dialog-title" id="workTypeRequestUpdateModalLabel">
{% trans "Work type Request" %}
</h5>
<button
class="oh-modal_close--custom"
onclick="event.stopPropagation(); var modalElement = this.closest('.oh-modal'); modalElement.classList.toggle('oh-modal--show');"
>
<ion-icon name="close-outline"></ion-icon>
</button>
</div>
<div
class="oh-modal__dialog-body"
id="workTypeRequestUpdateModalBody"
></div>
</div>
</div>
<div
class="oh-modal"
id="rotating-work-type-modal"
role="dialog"
aria-labelledby="rotating-work-type-modal"
aria-hidden="true"
>
<div class="oh-modal__dialog">
<div class="oh-modal__dialog-header">
<h2 class="oh-modal__dialog-title" id="rotatingWorkTypeAssignModalLabel">
{% trans "Rotating Work Type Update" %}
</h2>
<button class="oh-modal__close" aria-label="Close">
<ion-icon name="close-outline"></ion-icon>
</button>
</div>
<div
class="oh-modal__dialog-body"
id="rotatingWorkTypeAssignModalBody"
></div>
</div>
</div>
<div
class="oh-modal"
id="shiftRequestModalUpdate"
role="dialog"
aria-labelledby="shiftRequestModalUpdate"
aria-hidden="true"
>
<div class="oh-modal__dialog">
<div class="oh-modal__dialog-header">
<h5 class="oh-modal__dialog-title" id="shiftRequestModalUpdateLabel">
{% trans "Update Shift Request" %}
</h5>
<button class="oh-modal__close" aria-label="Close">
<ion-icon name="close-outline"></ion-icon>
</button>
</div>
<div class="oh-modal__dialog-body" id="shiftRequestModalUpdateBody"></div>
</div>
</div>
<div
class="oh-modal"
id="rotating-shift-update-modal"
role="dialog"
aria-labelledby="rotating-shift-update-modal"
aria-hidden="true"
>
<div class="oh-modal__dialog">
<div class="oh-modal__dialog-header">
<h2 class="oh-modal__dialog-title" id="">
{% trans "Rotating Shift Assign Update" %}
</h2>
<button class="oh-modal__close" aria-label="Close">
<ion-icon name="close-outline"></ion-icon>
</button>
</div>
<div
class="oh-modal__dialog-body"
id="rotatingShiftAssignUpdateModalBody"
></div>
</div>
</div>
<div
class="oh-modal"
id="workTypeRequestModal"
role="dialog"
aria-labelledby="workTypeRequestModal"
aria-hidden="true"
>
<div class="oh-modal__dialog">
<div class="oh-modal__dialog-header">
<h5 class="oh-modal__dialog-title" id="workTypeRequestModalLabel">
{% trans "Work Type Request" %}
</h5>
<button class="oh-modal__close" aria-label="Close">
<ion-icon name="close-outline"></ion-icon>
</button>
</div>
<div class="oh-modal__dialog-body" id="formBody"></div>
</div>
</div>
<div
class="oh-modal"
id="shiftRequestModal"
role="dialog"
aria-labelledby="shiftRequestModal"
aria-hidden="true"
>
<div class="oh-modal__dialog">
<div class="oh-modal__dialog-header">
<h5 class="oh-modal__dialog-title" id="shiftRequestModalLabel">
{% trans "Shift Request" %}
</h5>
<button class="oh-modal__close" aria-label="Close">
<ion-icon name="close-outline"></ion-icon>
</button>
</div>
<div class="oh-modal__dialog-body" id="shiftRequestModal">
<div id="shiftRequestTargetModal"></div>
</div>
</div>
</div>
<div
class="oh-modal"
id="rotating-shift-modal"
role="dialog"
aria-labelledby="rotating-shift-modal"
aria-hidden="true"
>
<div class="oh-modal__dialog">
<div class="oh-modal__dialog-header">
<h2 class="oh-modal__dialog-title" id="rotatingShiftAssignModalLabel">
{% trans "Rotating Shift Assign" %}
</h2>
<button class="oh-modal__close" aria-label="Close">
<ion-icon name="close-outline"></ion-icon>
</button>
</div>
<div class="oh-modal__dialog-body" id="rotatingShiftAssignModalBody"></div>
</div>
</div>
<div
class="oh-modal"
id="rotating-work-type-update-modal"
role="dialog"
aria-labelledby="rotating-work-type-update-modal"
aria-hidden="true"
>
<div class="oh-modal__dialog">
<div class="oh-modal__dialog-header">
<h2 class="oh-modal__dialog-title" id="">
{% trans "Rotating Work Type Assign Update" %}
</h2>
<button class="oh-modal__close" aria-label="Close">
<ion-icon name="close-outline"></ion-icon>
</button>
</div>
<div
class="oh-modal__dialog-body"
id="rotatingWorkTypeAssignUpdateModalLabel"
></div>
</div>
</div>
<script>
$(document).ready(function () {
$(".oh-tabs__tab[data-target]").click(function (e) {
e.preventDefault();
var newActiveTab = $(this).attr("data-target");
$(".oh-tabs__content--active").toggleClass("oh-tabs__content--active");
$(".oh-tabs__tab--active").toggleClass("oh-tabs__tab--active");
$(`[data-target="${newActiveTab}"]`).toggleClass("oh-tabs__tab--active");
$(newActiveTab).toggleClass("oh-tabs__content--active");
});
});
</script>