147 lines
6.1 KiB
HTML
147 lines
6.1 KiB
HTML
{% load i18n %}
|
|
<section class="oh-main__topbar" x-data="{searchShow: false}">
|
|
<div class="oh-main__titlebar oh-main__titlebar--left">
|
|
<h1 class="oh-main__titlebar-title fw-bold mb-0">
|
|
{% trans "Skill Zone" %}
|
|
</h1>
|
|
<a
|
|
class="oh-main__titlebar-search-toggle"
|
|
role="button"
|
|
aria-label="Toggle Search"
|
|
@click="searchShow = !searchShow"
|
|
>
|
|
<ion-icon
|
|
name="search-outline"
|
|
class="oh-main__titlebar-serach-icon"
|
|
></ion-icon>
|
|
</a>
|
|
</div>
|
|
<div class="oh-main__titlebar oh-main__titlebar--right">
|
|
{% if skill_zones %}
|
|
<form hx-get='{% url "skill-zone-filter" %}' id="filterForm" hx-target='#skill_zone_container' class="d-flex">
|
|
|
|
<div
|
|
class="oh-input-group oh-input__search-group"
|
|
:class="searchShow ? 'oh-input__search-group--show' : ''"
|
|
>
|
|
<ion-icon
|
|
name="search-outline"
|
|
class="oh-input-group__icon oh-input-group__icon--left"
|
|
></ion-icon>
|
|
<input
|
|
type="text"
|
|
class="oh-input oh-input__icon"
|
|
aria-label="Search Input"
|
|
placeholder="{% trans 'Search' %}"
|
|
name="search"
|
|
hx-get="{% url 'skill-zone-filter' %}"
|
|
onkeyup="$('.filterButton').click()"
|
|
|
|
/>
|
|
</div>
|
|
<div class="oh-main__titlebar-button-container">
|
|
<ul class="oh-view-types ml-2" style="margin-bottom: 0;">
|
|
<li class="oh-view-type skill-zone-view-type" data-view="list">
|
|
<a
|
|
onclick="$(this).parents().closest('ul').find('[name=view]').val('list');$('.filterButton').click();$(this).toggleClass('oh-btn--view-active');$('#card').removeClass('oh-btn--view-active')"
|
|
class="oh-btn oh-btn--view {% if request.GET.view == 'list' %} oh-btn--view-active {% endif %}"
|
|
title='{% trans "List" %}'
|
|
id="list">
|
|
<ion-icon name="list-outline" role="img" class="md hydrated" aria-label="list outline"></ion-icon>
|
|
</a>
|
|
</li>
|
|
<li class="oh-view-type skill_zone-view-type" data-view="card">
|
|
<a
|
|
onclick="$(this).parents().closest('ul').find('[name=view]').val('card');$('.filterButton').click();$(this).toggleClass('oh-btn--view-active');$('#list').removeClass('oh-btn--view-active')"
|
|
class="oh-btn oh-btn--view {% if request.GET.view == 'card' %} oh-btn--view-active {% endif %}"
|
|
title='{% trans "Card" %}'
|
|
id="card">
|
|
<ion-icon name="grid-outline" role="img" class="md hydrated" aria-label="grid outline"></ion-icon>
|
|
</a>
|
|
</li>
|
|
<input type="hidden" name="view" value="{{request.GET.view}}">
|
|
</ul>
|
|
<div class="oh-dropdown" x-data="{open: false}">
|
|
<button class="oh-btn ml-2" @click="open = !open" onclick="event.preventDefault()">
|
|
<ion-icon name="filter" class="mr-1"></ion-icon>{% trans "Filter" %}<div id="filterCount"></div>
|
|
</button>
|
|
<div
|
|
class="oh-dropdown__menu oh-dropdown__menu--right oh-dropdown__filter p-4"
|
|
x-show="open"
|
|
@click.outside="open = false"
|
|
style="display: none;"
|
|
>
|
|
<div class="oh-input-group">
|
|
<label class="oh-label">{% trans "Is Active" %}?</label>
|
|
{{f.form.is_active}}
|
|
</div>
|
|
<div class="oh-dropdown__filter-footer">
|
|
<button type="submit" class="oh-btn oh-btn--secondary oh-btn--small w-100 filterButton" id="">{% trans "Filter" %}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="oh-btn-group ml-2">
|
|
<div class="oh-dropdown" x-data="{open: false}">
|
|
<button
|
|
class="oh-btn oh-btn--dropdown oh-btn oh-btn--shadow"
|
|
@click="open = !open"
|
|
@click.outside="open = false"
|
|
>
|
|
{% trans "Actions" %}
|
|
</button>
|
|
<div class="oh-dropdown__menu oh-dropdown__menu--right" x-show="open"
|
|
style="display: none;"
|
|
>
|
|
<ul class="oh-dropdown__items">
|
|
{% if perms.delete_skillzone %}
|
|
<li class="oh-dropdown__item">
|
|
<a href="#" class="oh-dropdown__link " id="archiveCandidates"
|
|
|
|
>{% trans "Archive" %}</a
|
|
>
|
|
</li>
|
|
{% endif %}
|
|
|
|
{% if perms.delete_skillzone %}
|
|
<li class="oh-dropdown__item">
|
|
<a href="#" class="oh-dropdown__link "
|
|
id="unArchiveCandidates"
|
|
>{% trans "Un-Archive" %}</a
|
|
>
|
|
</li>
|
|
{% endif %}
|
|
|
|
{% if perms.delete_skillzone %}
|
|
<li class="oh-dropdown__item">
|
|
<a
|
|
href="#"
|
|
class="oh-dropdown__link oh-dropdown__link--danger"
|
|
id="deleteCandidates"
|
|
>{% trans "Delete" %}</a
|
|
>
|
|
</li>
|
|
{% endif %}
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
{% endif %}
|
|
<div class="oh-btn-group ml-2">
|
|
<a
|
|
class="oh-btn oh-btn--secondary oh-btn--shadow"
|
|
data-toggle="oh-modal-toggle"
|
|
data-target="#createModal"
|
|
hx-get="{% url 'skill-zone-create' %}"
|
|
hx-target="#createTarget"
|
|
>
|
|
<ion-icon name="add-outline" class="me-1"></ion-icon>
|
|
{% trans "Create" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|