Files
ihrm/pms/templates/okr/kr_list.html

235 lines
12 KiB
HTML

{% load static %}{% load i18n mathfilters %}
{% if messages %}
<div class="oh-alert-container">
{% for message in messages %}
<div class="oh-alert oh-alert--animated {{message.tags}}">
{{ message }}
</div>
{% endfor %}
</div>
{% endif %}
{% if krs %}
<div class="oh-sticky-table">
<div class="oh-sticky-table__table">
<div class="oh-sticky-table__thead">
<div class="oh-sticky-table__tr">
<div class="oh-sticky-table__th" style="width: 10px">
<div class="centered-div">
<input
type="checkbox"
title='{% trans "Select All" %}'
class="oh-input oh-input__checkbox myTicketsAll"
onchange="$(this).closest('.oh-sticky-table').find('.my-tickets-row').prop('checked',$(this).is(':checked')).change();addingTicketsIds()"
/>
</div>
</div>
<div class="oh-sticky-table__th">{% trans "Title" %}</div>
<div class="oh-sticky-table__th">{% trans "Start Value" %}</div>
<div class="oh-sticky-table__th">{% trans "Current Value" %}</div>
<div class="oh-sticky-table__th">{% trans "Target Value" %}</div>
<div class="oh-sticky-table__th">{% trans "Progress Percentage" %}</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 "Status" %}</div>
{% if perms.pms.change_employeeobjective or emp_objective|is_manager:request.user %}
<div class="oh-sticky-table__th oh-sticky-table__right">{% trans "Actions" %}</div>
{% endif %}
</div>
</div>
<div class="oh-sticky-table__tbody">
{% for kr in krs.object_list %}
<div class="oh-sticky-table__tr" data-kr-id="{{kr.id}}"
{% comment %} onclick="window.location.href = `{% url 'ticket-detail' ticket.id %}`" {% endcomment %}
>
<div class="oh-sticky-table__sd"
onclick="event.stopPropagation()"
>
<div class="centered-div">
<input
type="checkbox"
id="{{kr.id}}"
onchange="highlightRow($(this));
if (!$(this).is(':checked')) {
$(this).closest('.oh-sticky-table').find('.myTicketsAll').prop('checked',false)
};addingTicketsIds()"
class="oh-input holiday-checkbox oh-input__checkbox my-tickets-row"
/>
</div>
</div>
<div class="oh-sticky-table__td">
<span class='d-flex justify-content-between align-items-center'
>
{{kr.key_result_id}}
<span title = 'due {% if kr.end_date == today %} {{today}} {% else %} in {{kr.end_date|sub:today}}{% endif %}'>
<ion-icon
class="text-{% if kr.end_date < today %} danger {% elif kr.end_date == today %}warning {% else %}success{% endif %}"
name="time-sharp"
>
</ion-icon>
</span>
</span>
</div>
<div class="oh-sticky-table__td">{{kr.start_value}}</div>
{% if perms.pms.change_employeeobjective or emp_objective|is_manager:request.user %}
<div class="oh-sticky-table__td">
<input
id = {{kr.id}}
type="number" class="oh-input p-1"
style="width: 100px;"
min="0"
value="{{kr.current_value}}"
name="current_value"
onchange="delayedProgress(this)"
/>
</div>
{% else %}
<div class="oh-sticky-table__td">{{kr.current_value}}</div>
{% endif %}
<div class="oh-sticky-table__td " data-value="{{kr.target_value}}" >{{kr.target_value}}</div>
<div class="oh-sticky-table__td p-percentage" >{{kr.progress_percentage}}% </div>
<div class="oh-sticky-table__td">{{kr.start_date}}</div>
<div class="oh-sticky-table__td">{{kr.end_date}}</div>
{% if perms.pms.change_employeeobjective or emp_objective|is_manager:request.user %}
<div class="oh-sticky-table__td">
<select
id="keyResultStatus" name="key_result_status"
hx-post="{% url 'employee-keyresult-update-status' kr.id %}"
hx-trigger="change" class="oh-table__editable-input w-100"
hx-target="#krData{{kr.employee_objective_id.id}}">
{% for value,label in key_result_status %}
{% if kr.status != value %}
<option value="{{value}}">{{label}}</option>
{% else %}
<option value="{{value}}" selected>{{label}}</option>
{% endif%}
{% endfor %}
</select>
</div>
{% else %}
<div class="oh-sticky-table__td">
{{ kr.get_status_display }}
</div>
{% endif %}
{% if perms.pms.change_employeeobjective or kr.employee_objective_id|is_manager:request.user %}
<div class="oh-sticky-table__td oh-sticky-table__right" onclick="event.stopPropagation()">
<div class="oh-btn-group">
<button
class="oh-btn oh-btn--light-bkg w-50"
title="{% trans 'Edit' %}"
data-toggle="oh-modal-toggle"
data-target="#objectCreateModal"
hx-get='{% url "employee-key-result-update" kr.id %}'
hx-target="#objectCreateModalTarget"
>
<ion-icon name="create-outline"></ion-icon>
</button>
<form
action='{% url "delete-employee-keyresult" kr.id %}'
class="w-50"
onsubmit="return confirm('{% trans 'Are you sure you want to delete this Key result?' %}');"
method='post' onclick="event.stopPropagation()" >
{% csrf_token %}
<button
type="submit"
class="oh-btn oh-btn--light-bkg w-100"
title="{% trans 'Delete' %}"
>
<ion-icon
class="me-1 md hydrated"
name="trash-outline"
role="img"
aria-label="trash outline"
></ion-icon>
</button>
</form>
</div>
</div>
{% endif %}
</div>
{% endfor %}
</div>
</div>
</div>
<div class="oh-pagination">
<span class="oh-pagination__page">
{% trans "Page" %} {{ krs.number }}
{%trans "of" %} {{ krs.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="krs_page"
class="oh-pagination__input"
value="{{krs.number}}"
hx-get="{% url 'kr-table-view' emp_objective.id %}?{{pd}}"
hx-target="#krData{{emp_objective.id}}"
min="1"
/>
<span class="oh-pagination__label"
>{% trans "of" %}
{{krs.paginator.num_pages}}</span
>
</div>
<ul class="oh-pagination__items">
{% if krs.has_previous %}
<li
class="oh-pagination__item oh-pagination__item--wide"
>
<a
hx-target="#krData{{emp_objective.id}}"
hx-get="{% url 'kr-table-view' emp_objective.id %}?{{pd}}&krs_page=1"
class="oh-pagination__link"
>{% trans "First" %}</a
>
</li>
<li
class="oh-pagination__item oh-pagination__item--wide"
>
<a
hx-target="#krData{{emp_objective.id}}"
hx-get="{% url 'kr-table-view' emp_objective.id %}?{{pd}}&krs_page={{ krs.previous_page_number }}"
class="oh-pagination__link"
>{% trans "Previous" %}</a
>
</li>
{% endif %} {% if krs.has_next %}
<li
class="oh-pagination__item oh-pagination__item--wide"
>
<a
hx-target="#krData{{emp_objective.id}}"
hx-get="{% url 'kr-table-view' emp_objective.id %}?{{pd}}&krs_page={{ krs.next_page_number }}"
class="oh-pagination__link"
>{% trans "Next" %}</a
>
</li>
<li
class="oh-pagination__item oh-pagination__item--wide"
>
<a
hx-target="#krData{{emp_objective.id}}"
hx-get="{% url 'kr-table-view' emp_objective.id %}?{{pd}}&krs_page={{ krs.paginator.num_pages }}"
class="oh-pagination__link"
>{% trans "Last" %}</a
>
</li>
{% endif %}
</ul>
</nav>
</div>
{% else %}
<!-- start of empty page -->
<h5 class="oh-404__subtitle" style="padding: 30px;">
{% trans "No valid key result assigned!" %}
</h5>
<!-- end of empty page -->
{% endif %}