Files
ihrm/templates/dashboard_chart_form.html

91 lines
3.8 KiB
HTML

{% load i18n %} {% load static %}
<div class="oh-modal__dialog-header">
<h2 class="oh-modal__dialog-title" id="createTitle">
{% trans "Dashboard Chart Select" %}
</h2>
<button type="button" class="oh-modal__close" aria-label="Close">
<ion-icon name="close-outline"></ion-icon>
</button>
</div>
<!-- htmx form -->
<div class="oh-modal__dialog-body">
<div class="oh-modal__dialog-body" style="padding: 0">
<div class="oh-dropdown_btn-header">
<button class="oh-btn oh-btn--success-outline" id="select_all">{% trans "Select All Rows" %}</button>
<button class="oh-btn oh-btn--primary-outline" id="unselect_all">{% trans "Unselect All Rows" %}</button>
</div>
<form
hx-post="{% url 'employee-chart-show' %}"
hx-target="#objectDetailsModalTarget"
id="dashboardChartForm"
>
<div class="oh-sticky-table">
<div class="oh-sticky-table__table">
<div class="oh-sticky-table__thead">
<div class="oh-sticky-table__th">
{% trans "Charts" %}
</div>
<div class="oh-sticky-table__th" align="center">
{% trans "View" %}
</div>
</div>
<div class="oh-sticky-table__tbody">
{% for chart in dashboard_charts %}
<div class="oh-sticky-table__tr">
<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={{chart.1}}&background=random"
class="oh-profile__image"
/>
</div>
<span class="oh-profile__name oh-text--dark"
>{{chart.1}}</span
>
</div>
</div>
<div class="oh-sticky-table__td">
<div class="d-flex justify-content-center">
<div class="oh-switch">
<input
type="checkbox"
name="{{chart.0}}"
style="cursor: pointer"
class="oh-switch__checkbox"
{% if not chart.0 in employee_chart%}
checked
{% endif %}
/>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<div class="d-flex flex-row-reverse">
<button
type="submit"
class="oh-btn oh-btn--secondary mt-2 mr-0 pl-4 pr-5 oh-btn--w-100-resp"
>
{% trans "Save" %}
</button>
</div>
</form>
</div>
</div>
<script>
$(document).ready(function() {
$("#select_all").on("click", function(){
$("#dashboardChartForm").find("[type=checkbox]").prop("checked",true).change();
})
$("#unselect_all").on("click", function(){
$("#dashboardChartForm").find("[type=checkbox]").prop("checked",false).change();
})
})
</script>