218 lines
9.8 KiB
HTML
218 lines
9.8 KiB
HTML
{% load i18n %} {% load horillafilters %} {% load static %}
|
|
{% 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 %}
|
|
{% if krs %}
|
|
<!-- start of select all -->
|
|
{% comment %} <div class="oh-checkpoint-badge text-success mb-2" id="selectAllInstances" style="cursor: pointer;">
|
|
{% trans "Select All" %}
|
|
</div>
|
|
<div class="oh-checkpoint-badge text-secondary mb-2" id="unselectAllInstances" style="cursor: pointer;display: none;">
|
|
{% trans "Unselect All" %}
|
|
</div>
|
|
<div class="oh-checkpoint-badge text-danger mb-2" id="selectedCandidate" style="display: none">
|
|
</div> {% endcomment %}
|
|
<!-- start of select all -->
|
|
<!-- start of column toggle -->
|
|
<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="krsCells">
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end of column toggle -->
|
|
<div id="krs-table" data-table-name="krs_table">
|
|
<!-- start of sticky table -->
|
|
<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: 10px; @media (max-width: 575.98px) { position: sticky; }">
|
|
<div class="centered-div">
|
|
<input
|
|
type="checkbox"
|
|
class="all-contract oh-input oh-input__checkbox"
|
|
id = "Allcontract"
|
|
title='{% trans "Select All" %}'
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="oh-sticky-table__th {% if request.sort_option.order == '-title' %}arrow-up {% elif request.sort_option.order == 'title' %}arrow-down {% else %}arrow-up-down {% endif %}"
|
|
hx-get="{% url 'filter-key-result' %}?{{pd}}&sortby=title"
|
|
hx-target="#krs-container"
|
|
>
|
|
{% trans "Key Results" %}
|
|
</div>
|
|
<div data-cell-index="1" data-cell-title="{% trans 'Progress Type' %}" class="oh-sticky-table__th">{% trans "Progress Type" %}</div>
|
|
<div data-cell-index="2" data-cell-title="{% trans 'Target Value' %}" class="oh-sticky-table__th">{% trans "Target Value" %}</div>
|
|
<div data-cell-index="3" data-cell-title="{% trans 'Duration' %}" class="oh-sticky-table__th">{% trans "Duration" %}</div>
|
|
<div data-cell-index="4" data-cell-title="{% trans 'Descrption' %}" class="oh-sticky-table__th">{% trans "Descrption" %}</div>
|
|
<div data-cell-index="5" data-cell-title="{% trans 'Company' %}" class="oh-sticky-table__th">{% trans "Company" %}</div>
|
|
{% comment %} <div data-cell-index="5" data-cell-title="{% trans 'Is Active' %}" class="oh-sticky-table__th">{% trans "Is Active" %}</div> {% endcomment %}
|
|
|
|
<div class="oh-sticky-table__th oh-sticky-table__right">{% trans "Actions" %}</div>
|
|
</div>
|
|
</div>
|
|
{% for kr in krs %}
|
|
<div class="oh-sticky-table__tbody " draggable="true"
|
|
>
|
|
<div class="oh-sticky-table__tr ">
|
|
<div class="oh-sticky-table__sd" onclick="event.stopPropagation()">
|
|
<div class="centered-div">
|
|
<input
|
|
type="checkbox"
|
|
id="{{kr.id}}"
|
|
onchange="highlightRow($(this))"
|
|
value="{{kr.id}}"
|
|
class="oh-input payslip-checkbox oh-input__checkbox all-contract-row"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="oh-sticky-table__td">
|
|
{{kr.title}}
|
|
</div>
|
|
<div data-cell-index="1" class="oh-sticky-table__td">
|
|
{{kr.get_progress_type_display}}
|
|
</div>
|
|
<div data-cell-index="2" class="oh-sticky-table__td">
|
|
{{kr.target_value}}
|
|
</div>
|
|
<div data-cell-index="3" class="oh-sticky-table__td">
|
|
{{kr.duration}}{% trans " Days" %}
|
|
</div>
|
|
<div data-cell-index="4" class="oh-sticky-table__td">
|
|
{{kr.description}}
|
|
</div>
|
|
<div data-cell-index="5" class="oh-sticky-table__td">
|
|
{{kr.company_id}}
|
|
</div>
|
|
<div class="oh-sticky-table__td oh-sticky-table__right">
|
|
<div class="oh-btn-group">
|
|
<a
|
|
onclick="event.stopPropagation();"
|
|
class="oh-btn oh-btn--light-bkg w-100"
|
|
data-toggle="oh-modal-toggle"
|
|
data-target="#objectUpdateModal"
|
|
hx-get="{% url 'update-key-result' kr.id %}"
|
|
hx-target="#objectUpdateModalTarget"
|
|
title='{% trans "Edit" %}'
|
|
>
|
|
<ion-icon
|
|
name="create-outline"
|
|
role="img"
|
|
class="md hydrated"
|
|
style="color: blue"
|
|
aria-label="create outline"
|
|
></ion-icon>
|
|
</a>
|
|
<a
|
|
class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
|
|
onclick = "event.preventDefault();event.stopPropagation();"
|
|
hx-confirm="{% trans 'Do you want to delete this Key result?' %}"
|
|
hx-post="{% url 'delete-key-result' kr.id %}?{{pd}}"
|
|
hx-target="#krs-container"
|
|
title="{% trans 'Delete' %}"
|
|
>
|
|
<ion-icon
|
|
name="trash-outline"
|
|
role="img"
|
|
class="md hydrated"
|
|
aria-label="trash outline"
|
|
></ion-icon>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<!-- end of sticky table -->
|
|
|
|
<!-- start of pagination -->
|
|
<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="page"
|
|
class="oh-pagination__input"
|
|
value="{{krs.number}}"
|
|
hx-get="{% url 'filter-key-result' %}?{{pd}}&view=list"
|
|
hx-target="#krs-container"
|
|
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='#krs-container' hx-get="{% url 'filter-key-result' %}?{{pd}}&view=list&page=1" class="oh-pagination__link">{% trans "First" %}</a>
|
|
</li>
|
|
<li class="oh-pagination__item oh-pagination__item--wide">
|
|
<a hx-target='#krs-container' hx-get="{% url 'filter-key-result' %}?{{pd}}&view=list&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='#krs-container' hx-get="{% url 'filter-key-result' %}?{{pd}}&view=list&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='#krs-container' hx-get="{% url 'filter-key-result' %}?{{pd}}&view=list&page={{ krs.paginator.num_pages }}" class="oh-pagination__link">{% trans "Last" %}</a>
|
|
</li>
|
|
{% endif %}
|
|
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<!-- end of pagination -->
|
|
</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>
|
|
// toggle columns //
|
|
toggleColumns("krs-table","krsCells")
|
|
localStoragekrsCells = localStorage.getItem("krs_table")
|
|
if (!localStoragekrsCells) {
|
|
$("#krsCells").find("[type=checkbox]").prop("checked",true)
|
|
}
|
|
$("[type=checkbox]").change()
|
|
|
|
</script>
|