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

1152 lines
73 KiB
HTML

{% load i18n static basefilters horillafilters %}
{% 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-wrapper mt-4">
{% if employee.employee_work_info.shift_id %}
<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="#objectCreateModalTarget"
data-target="#objectCreateModal"
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 or request.user|is_reportingmanager %}
<button
class="oh-btn oh-btn--secondary-outline oh-stop-prop oh-accordion-meta__btn p-2"
title="{% trans 'Add' %}"
hx-get="{% url 'rotating-work-type-assign-add' %}?emp_id={{emp_id}}"
hx-target="#objectCreateModalTarget"
data-target="#objectCreateModal"
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="#objectCreateModalTarget"
data-target="#objectCreateModal"
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 or request.user|is_reportingmanager %}
<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="#objectCreateModalTarget"
data-target="#objectCreateModal"
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__td">
{% trans "Employee" %}
</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">
{% trans "Requested Date" %}
</div>
<div class="oh-sticky-table__th">
{% trans "Requested Till" %}
</div>
<div class="oh-sticky-table__th">
{% trans "Description" %}
</div>
<div class="oh-sticky-table__th">
{% trans "Status" %}
</div>
<div
class="oh-sticky-table__th"
style="width: 195px"
>
{% trans "Actions" %}
</div>
{% if not request.GET.profile %}
{% if perms.base.change_worktyperequest or request.user|is_reportingmanager %}
<div class="oh-sticky-table__th"></div>
{% endif %}
{% 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 %}?instances_ids={{work_type_requests_ids}}"
hx-target="#objectDetailsModalTarget"
data-target="#objectDetailsModal"
data-toggle="oh-modal-toggle"
draggable="true"
>
<div class="oh-sticky-table__td">
<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">
{{work_type_request.request_status}}
</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="#objectUpdateModalTarget"
data-toggle="oh-modal-toggle"
data-target="#objectUpdateModal"
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 %}
<a
class="oh-btn oh-btn--light-bkg w-50"
title="{% trans 'Duplicate' %}"
style="cursor: pointer"
data-toggle="oh-modal-toggle"
data-target="#objectCreateModal"
hx-target="#objectCreateModalTarget"
hx-get="{% url 'work-type-request-duplicate' work_type_request.id %}?{{pg}}"
>
<ion-icon
name="copy-outline"
></ion-icon>
</a>
{% if work_type_request.approved == False %}
<form
hx-confirm="{% trans 'Are you sure you want to delete this work type request?' %}"
hx-post="{% url 'work-type-request-delete' work_type_request.id %}"
hx-target="#shift_target"
class="w-50"
>
{% 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 oh-sticky-table__right"
onclick="event.stopPropagation();"
>
<div class="oh-btn-group">
{% if work_type_request.approved == False and work_type_request.canceled == False %}
<a
title="{% trans 'Approve' %}"
hx-confirm="{% trans 'Do you want to approve this request?' %}"
hx-post="/work-type-request-approve/{{work_type_request.id}}/?{{pd}}"
hx-target="#shift_target"
class="oh-btn oh-btn--success w-100"
>
<ion-icon
class="me-1"
name="checkmark-outline"
></ion-icon>
</a>
{% else %}
<button
class="oh-btn oh-btn--success w-100"
disabled
>
<ion-icon
class="me-1"
name="checkmark-outline"
></ion-icon>
</button>
{% endif %}
{% if work_type_request.canceled == False %}
<a
hx-confirm="{% trans 'Do you want to reject this request?' %}"
hx-post="/work-type-request-cancel/{{work_type_request.id}}/?{{pd}}"
hx-target="#shift_target"
title="{% trans 'Reject' %}"
class="oh-btn oh-btn--danger w-100"
>
<ion-icon
class="me-1"
name="close-circle-outline"
></ion-icon>
</a>
{% else %}
<button
disabled
class="oh-btn oh-btn--danger w-100"
>
<ion-icon
class="me-1"
name="close-circle-outline"
></ion-icon>
</button>
{% endif %}
</div>
</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__td">
{% trans "Employee" %}
</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">
{% trans "Start Date" %}
</div>
<div class="oh-sticky-table__th">
{% trans "Current Shift" %}
</div>
<div class="oh-sticky-table__th">
{% trans "Next Switch" %}
</div>
<div class="oh-sticky-table__th">
{% trans "Next Shift" %}
</div>
<div class="oh-sticky-table__th">
{% trans "Status" %}
</div>
{% if not request.GET.profile and perms.base.change_rotatingworktypeassign or perms.base.delete_rotatingshiftassign or request.user|check_manager:rshift_assign.0 or request.user|is_reportingmanager %}
<div
class="oh-sticky-table__th"
style="width: 250px"
>
{% trans "Actions" %}
</div>
{% endif %}
</div>
</div>
<div class="oh-sticky-table__tbody">
{% for rshift in rshift_assign %}
<div
class="oh-sticky-table__tr"
draggable="true"
data-toggle="oh-modal-toggle"
data-target="#objectDetailsModal"
hx-get="{% url 'rshift-individual-view' rshift.id %}?instances_ids={{rshift_assign_ids}}"
hx-target="#objectDetailsModalTarget"
>
<div class="oh-sticky-table__td">
<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 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 1st day of month " %}
{% elif rshift.rotate_every == "2" %}
{% trans "Rotate every 2nd day of month " %}
{% elif rshift.rotate_every == "3" %}
{% trans "Rotate every 3rd 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 ofmonth " %}
{% 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>
<div class="oh-sticky-table__td">
{% if rshift.is_active %}
{% trans "Is Active" %}
{% else %}
{% trans "Archived" %}
{% endif %}
</div>
{% if not request.GET.profile and perms.base.change_rotatingworktypeassign or perms.base.delete_rotatingshiftassign or request.user|check_manager:rshift or request.user|is_reportingmanager %}
<div
class="oh-sticky-table__td"
onclick="event.stopPropagation();"
>
<div class="oh-btn-group">
{% if perms.base.change_rotatingshiftassign or request.user|check_manager:rshift or request.user|is_reportingmanager %}
<a
hx-get="{% url 'rotating-shift-assign-update' rshift.id %}"
hx-target="#objectUpdateModalTarget"
hx-swap="innerHTML"
data-target="#objectUpdateModal"
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>
<a
class="oh-btn oh-btn--light-bkg w-100"
style="cursor: pointer"
title="{% trans 'Duplicate' %}"
data-toggle="oh-modal-toggle"
data-target="#objectCreateModal"
hx-target="#objectCreateModalTarget"
hx-get="{% url 'rotating-shift-assign-duplicate' rshift.id %}?{{pg}}"
>
<ion-icon
name="copy-outline"
></ion-icon>
</a>
{% endif %}
{% if perms.base.change_rotatingshiftassign or request.user|is_reportingmanager %}
{% if rshift.is_active %}
<form
hx-confirm="{% trans 'Do you want to archive this rotating shift assign?' %}"
hx-get="{% url 'rotating-shift-assign-archive' rshift.id %}?{{pd}}"
hx-target="#shift_target"
style="width: 100%"
>
<input
type="hidden"
name="is_active"
value="{% trans 'False' %}"
id=""
/>
<button
class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
title="{% trans 'Archive' %}"
>
<ion-icon
name="archive"
></ion-icon>
</button>
</form>
{% else %}
<form
hx-confirm="{% trans 'Do you Want to un-archive this rotating shift assign?' %}"
hx-get="{% url 'rotating-shift-assign-archive' rshift.id %}?{{pd}}"
hx-target="#shift_target"
style="width: 100%"
>
<button
class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
title="{% trans 'Un-Archive' %}"
>
<ion-icon
name="archive"
></ion-icon>
</button>
</form>
{% endif %}
{% endif %}
{% if perms.base.delete_rotatingshiftassign or request.user|is_reportingmanager %}
<form
hx-confirm="{% trans 'Are you sure you want to delete this rotating shift assign?' %}"
hx-post="{% url 'rotating-shift-assign-delete' rshift.id %}"
hx-target="#shift_target"
class="w-50"
>
{% 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__td">
{% trans "Employee" %}
</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">
{% trans "Start Date" %}
</div>
<div class="oh-sticky-table__th">
{% trans "Current Work Type" %}
</div>
<div class="oh-sticky-table__th">
{% trans "Next Switch" %}
</div>
<div class="oh-sticky-table__th">
{% trans "Next Work Type" %}
</div>
<div class="oh-sticky-table__th">
{% trans "Status" %}
</div>
{% if not request.GET.profile and perms.base.change_rotatingworktypeassign or perms.base.delete_rotatingworktypeassign or request.user|check_manager:rwork_type_assign.0 or request.user|is_reportingmanager %}
<div
class="oh-sticky-table__sd oh-sticky-table__right"
style="width: 250px"
>
<div class="d-flex">
<div>{% trans "Actions" %}</div>
</div>
</div>
{% endif %}
</div>
</div>
<div class="oh-sticky-table__tbody">
{% for rwork_type in rwork_type_assign %}
<div
class="oh-sticky-table__tr" hx-get="{% url "rwork-individual-view" rwork_type.id %}?instances_ids={{rwork_type_assign_ids}}"
data-toggle="oh-modal-toggle"
data-target="#objectDetailsModal"
hx-target="#objectDetailsModalTarget"
draggable="true"
>
<div class="oh-sticky-table__td">
<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 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 1st day of month " %}
{% elif rwork_type.rotate_every == "2" %}
{% trans "Rotate every 2nd day of month " %}
{% elif rwork_type.rotate_every == "3" %}
{% trans "Rotate every 3rd 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>
<div class="oh-sticky-table__td">
{% if rwork_type.is_active %}
{% trans "Is Active" %}
{% else %}
{% trans "Archived" %}
{% endif %}
</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 oh-sticky-table__right"
onclick="event.stopPropagation();"
>
<div class="oh-btn-group">
{% if perms.base.change_rotatingworktypeassign or request.user|is_reportingmanager %}
<a
hx-get="{% url 'rotating-work-type-assign-update' rwork_type.id %}"
hx-target="#objectUpdateModalTarget"
data-target="#objectUpdateModal"
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>
<a
hx-get="{% url 'rotating-work-type-assign-duplicate' rwork_type.id %}"
hx-target="#objectCreateModalTarget"
data-target="#objectCreateModal"
data-toggle="oh-modal-toggle"
type="button"
class="oh-btn oh-btn--light-bkg w-50"
title="{% trans 'Duplicate' %}"
>
<ion-icon
name="copy-outline"
></ion-icon>
</a>
{% endif %}
{% if perms.base.change_rotatingworktypeassign or request.user|is_reportingmanager %}
{% if rwork_type.is_active %}
<form
hx-confirm="{% trans 'Do you want to archive this rotating work type assign?' %}"
hx-get="{% url 'rotating-work-type-assign-archive' rwork_type.id %}?{{pd}}"
hx-target="#shift_target"
style="width: 100%"
>
<button
class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
title="{% trans 'Archive' %}"
>
<ion-icon name="archive"></ion-icon>
</button>
</form>
{% else %}
<form
hx-confirm="{% trans 'Do you want to un-archive this rotating work type assign?' %}"
hx-get="{% url 'rotating-work-type-assign-archive' rwork_type.id %}?{{pd}}"
hx-target="#shift_target"
style="width: 100%"
>
<button
class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
title="{% trans 'Un-Archive' %}"
>
<ion-icon name="archive"></ion-icon>
</button>
</form>
{% endif %}
{% endif %}
{% if perms.base.delete_rotatingworktypeassign or request.user|is_reportingmanager %}
<form
hx-confirm="{% trans 'Are you sure you want to delete this rotating work type assign?' %}"
hx-post="{% url 'rotating-work-type-assign-delete' rwork_type.id %}?{{pd}}"
hx-target="#shift_target"
style="width: 100%"
>
{% 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 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>{% 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">
{% trans "Requested Date" %}
</div>
<div class="oh-sticky-table__th">
{% trans "Requested Till" %}
</div>
<div class="oh-sticky-table__th">
{% trans "Description" %}
</div>
<div class="oh-sticky-table__th">
{% trans "Status" %}
</div>
<div class="oh-sticky-table__th" style="width: 195px">
{% trans "Actions" %}
</div>
{% if not request.GET.profile %}
{% if perms.base.change_shiftrequest or request.user|check_manager:shift_data.0 %}
<div class="oh-sticky-table__th"></div>
{% endif %}
{% endif %}
</div>
</div>
{% for shift_request in shift_data %}
<div class="oh-sticky-table__tbody">
<div
draggable="true"
class="oh-sticky-table__tr"
data-toggle="oh-modal-toggle"
data-target="#objectDetailsModal"
hx-get="{% url 'shift-request-details' shift_request.id %}?instances_ids={{shift_requests_ids}}"
hx-target="#objectDetailsModalTarget"
>
<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">
{% if shift_request.approved %}
{% trans "Approved" %}
{% elif shift_request.canceled %}
{% trans "Rejected" %}
{% else %}
{% trans "Requested" %}
{% endif %}
</div>
<div class="oh-sticky-table__td">
<div
class="oh-btn-group"
onclick="event.stopPropagation();"
>
{% 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 %}
<a
class="oh-btn oh-btn--light-bkg w-50"
title="{% trans 'Duplicate' %}"
style="cursor: pointer"
data-toggle="oh-modal-toggle"
data-target="#objectCreateModal"
hx-target="#objectCreateModalTarget"
hx-get="{% url 'shift-request-duplicate' shift_request.id %}?{{pg}}"
>
<ion-icon name="copy-outline"></ion-icon>
</a>
{% if shift_request.approved == False %}
<form
hx-confirm="{% trans "Are you sure you want to delete this shift request?" %}"
hx-post="{% url 'shift-request-delete' shift_request.id %}"
hx-target="#shift_target"
class="w-50"
>
{% 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|is_reportingmanager %}
<div
class="oh-sticky-table__td oh-sticky-table__right"
onclick="event.stopPropagation();"
>
<div class="oh-btn-group">
{% if shift_request.approved == False and shift_request.canceled == False %}
<a href="{% url 'shift-request-approve' shift_request.id %}"
title="{% trans 'Approve' %}"
onclick="return confirm('{% trans "Do you want to approve this request?" %}')"
class="oh-btn oh-btn--success">
<ion-icon class="me-1" name="checkmark-outline"></ion-icon>
</a>
{% else %}
<a
href="#"
title="{% trans 'Approve' %}"
class="oh-btn oh-btn--success oh-btn--disabled"
>
<ion-icon
class="me-1"
name="checkmark-outline"
></ion-icon>
</a>
{% endif %}
{% if shift_request.canceled == False %}
<a
href="{% url 'shift-request-cancel' shift_request.id %}"
title="{% trans 'Reject' %}"
onclick="return confirm('{% trans "Do you want to reject this request?" %}')"
class="oh-btn oh-btn--danger">
<ion-icon class="me-1" name="close-circle-outline"></ion-icon>
</a>
{% else %}
<a
type="submit"
href="#"
title="{% trans 'Reject' %}"
class="oh-btn oh-btn--danger oh-btn--disabled"
>
<ion-icon
class="me-1"
name="close-circle-outline"
></ion-icon>
</a>
{% endif %}
</div>
</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 Shift request has been created." %}
</h5>
</div>
{% endif %}
</div>
</div>
</div>
</div>
<div
class="oh-modal"
id="rotatingWorkTypeAssignDetailModal"
role="dialog"
aria-labelledby="rotatingWorkTypeAssignDetailModalLabel"
aria-hidden="true"
>
<div class="oh-modal__dialog" id="rotatingWorkTypeAssignDetail"></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="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>
<script>
$(document).ready(function () {
const activeTab = localStorage.getItem("EmployeeShiftActiveTab");
if (activeTab != null) {
$(".oh-tabs__content--active").toggleClass(
"oh-tabs__content--active"
);
$(".oh-tabs__tab--active").toggleClass("oh-tabs__tab--active");
$(`[data-target="${activeTab}"]`).toggleClass(
"oh-tabs__tab--active"
);
$(activeTab).toggleClass("oh-tabs__content--active");
}
$(".oh-tabs__tab[data-target]").click(function (e) {
e.preventDefault();
localStorage.setItem(
"EmployeeShiftActiveTab",
$(this).attr("data-target")
);
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>