[IMP] GENERAL: Settings view redesign
This commit is contained in:
Horilla
@@ -4,7 +4,7 @@
|
||||
<div
|
||||
class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center"
|
||||
>
|
||||
<h2 class="oh-inner-sidebar-content__title">{% trans "Permissions" %}</h2>
|
||||
<h2 class="oh-inner-sidebar-content__title">{% trans "Employee Permissions" %}</h2>
|
||||
<div class=" d-flex">
|
||||
<div class="oh-input-group oh-input__search-group" id="searchContainer" style="display: none;">
|
||||
<ion-icon name="search-outline" class="oh-input-group__icon oh-input-group__icon--left md hydrated" role="img" aria-label="search outline"></ion-icon>
|
||||
|
||||
@@ -71,125 +71,6 @@
|
||||
{% endif %}
|
||||
|
||||
|
||||
<!--start of Grace time -->
|
||||
<div class="oh-inner-sidebar-content">
|
||||
<div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
|
||||
<h2 class="oh-inner-sidebar-content__title">{% trans 'Grace Time' %}</h2>
|
||||
{% if perms.attendance.add_gracetime %}
|
||||
<button
|
||||
class="oh-btn oh-btn--secondary oh-btn--shadow"
|
||||
hx-target="#graceTimeModalTarget" type="button"
|
||||
hx-get="{% url 'create-grace-time' %}?default=False"
|
||||
class="oh-btn oh-btn--info" data-toggle="oh-modal-toggle"
|
||||
data-target="#graceTimeModal"
|
||||
>
|
||||
<ion-icon name="add-outline" class="me-1"></ion-icon>
|
||||
{% trans 'Create' %}
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if grace_times %}
|
||||
<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">
|
||||
{% trans 'Allowed time' %}
|
||||
</div>
|
||||
<div class="oh-sticky-table__th">
|
||||
{% trans 'Is active' %}
|
||||
</div>
|
||||
{% if perms.attendance.change_gracetime %}
|
||||
<div class="oh-sticky-table__th">{% trans 'Actions' %}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="oh-sticky-table__tbody">
|
||||
{% for grace_time in grace_times %}
|
||||
<div class="oh-sticky-table__tr" draggable="true">
|
||||
<div class="oh-sticky-table__td">{{ grace_time.allowed_time }} {% trans 'Minutes' %}</div>
|
||||
<div class="oh-sticky-table__td">
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="oh-switch">
|
||||
{% if perms.attendance.change_gracetime%}
|
||||
<input type="checkbox" id="GTIsActivate" data-id ="{{grace_time.id}}" class="oh-switch__checkbox" {% if grace_time.is_active %} checked {% endif %} onchange="updateIsActivate(this)">
|
||||
{% else %}
|
||||
<input type="checkbox" id="GTIsActivate" class="oh-switch__checkbox" {% if grace_time.is_active %} checked {% endif %} disabled>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if perms.attendance.change_gracetime%}
|
||||
<div class="oh-sticky-table__td">
|
||||
<div class="oh-btn-group">
|
||||
{% if perms.base.change_gracetime %}
|
||||
<a
|
||||
hx-get="{% url 'update-grace-time' grace_time.id %}?default=False"
|
||||
hx-target="#graceTimeModalTarget" type="button"
|
||||
data-toggle="oh-modal-toggle"
|
||||
data-target="#graceTimeModal"
|
||||
data-toggle="oh-modal-toggle"
|
||||
type="button"
|
||||
class="oh-btn oh-btn--light-bkg w-50"
|
||||
title="{% trans 'Edit' %}"
|
||||
>
|
||||
<ion-icon name="create-outline"></ion-icon
|
||||
></a>
|
||||
{% endif %}
|
||||
{% if perms.base.delete_gracetime %}
|
||||
<form action="{% url 'delete-grace-time' grace_time.id %}?view=shift" class="w-50"
|
||||
onsubmit="return confirm('{% trans "Are you sure you want to delete this grace time?" %}');"
|
||||
method='post'>
|
||||
{% csrf_token %}
|
||||
<button
|
||||
type="submit"
|
||||
class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
|
||||
title="{% trans 'Delete' %}"
|
||||
>
|
||||
<ion-icon name="trash-outline"></ion-icon>
|
||||
</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<button
|
||||
type="submit"
|
||||
class="oh-btn oh-btn--danger-outline oh-btn--light-bkg oh-btn-disabled w-100"
|
||||
title="{% trans 'Delete' %}"
|
||||
>
|
||||
<ion-icon name="trash-outline "></ion-icon>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
|
||||
<img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);" src="{% static 'images/ui/Hour_glass.png' %}" class="" alt="Page not found. 404." />
|
||||
<h5 class="oh-404__subtitle">{% trans "There is no grace time at this moment." %}</h5>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<!--end of Grace time -->
|
||||
|
||||
<!-- start of grace time modal -->
|
||||
<div
|
||||
class="oh-modal"
|
||||
id="graceTimeModal"
|
||||
role="dialog"
|
||||
aria-labelledby="graceTimeModal"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div class="oh-modal__dialog" id="graceTimeModalTarget" >
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of grace time modal -->
|
||||
|
||||
<script>
|
||||
function getCookie(name) {
|
||||
let cookieValue = null;
|
||||
|
||||
81
base/templates/base/tags/employee_tags.html
Normal file
81
base/templates/base/tags/employee_tags.html
Normal file
@@ -0,0 +1,81 @@
|
||||
{% extends 'settings.html' %}
|
||||
{% load i18n %}
|
||||
{% block settings %}{% load static %}
|
||||
|
||||
<!-- ******************* EMPLOYEE TAGS ******************* -->
|
||||
|
||||
<div class="oh-inner-sidebar-content">
|
||||
{% if perms.employee.view_employeetag %}
|
||||
<div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
|
||||
<h2 class="oh-inner-sidebar-content__title">{% trans "Employee Tags" %}</h2>
|
||||
{% if perms.employee.add_employeetag %}
|
||||
<button
|
||||
class="oh-btn oh-btn--secondary oh-btn--shadow"
|
||||
data-toggle="oh-modal-toggle"
|
||||
data-target="#emptagModal"
|
||||
hx-get="{% url 'employee-tag-create' %}"
|
||||
hx-target="#emptagForm"
|
||||
>
|
||||
<ion-icon name="add-outline" class="me-1"></ion-icon>
|
||||
{% trans "Create" %}
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if employeetags %}
|
||||
{% include 'base/employee_tag/employee_tag_view.html' %}
|
||||
{% else %}
|
||||
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
|
||||
<img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);" src="{% static 'images/ui/price-tag.png' %}" class="" alt="Page not found. 404." />
|
||||
<h5 class="oh-404__subtitle">{% trans "There is no employee tags at this moment." %}</h5>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- start of create modal -->
|
||||
<div
|
||||
class="oh-modal"
|
||||
id="emptagModal"
|
||||
role="dialog"
|
||||
aria-labelledby="emptagModal"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div class="oh-modal__dialog">
|
||||
<div class="oh-modal__dialog-header">
|
||||
<h2 class="oh-modal__dialog-title" id="createModalTitle">
|
||||
{% trans "Create Employee Tag" %}
|
||||
</h2>
|
||||
<button class="oh-modal__close" aria-label="Close">
|
||||
<ion-icon name="close-outline"></ion-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="oh-modal__dialog-body" id="emptagForm"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of create modal -->
|
||||
<!-- start of edit modal -->
|
||||
<div
|
||||
class="oh-modal"
|
||||
id="emptagEditModal"
|
||||
role="dialog"
|
||||
aria-labelledby="emptagEditModal"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div class="oh-modal__dialog">
|
||||
<div class="oh-modal__dialog-header">
|
||||
<h2 class="oh-modal__dialog-title" id="editModaltitle">
|
||||
{% trans "Employee Tag Update" %}
|
||||
</h2>
|
||||
<button class="oh-modal__close" aria-label="Close">
|
||||
<ion-icon name="close-outline"></ion-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="oh-modal__dialog-body" id="emptagEditForm"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of edit modal -->
|
||||
|
||||
|
||||
{% endblock settings %}
|
||||
82
base/templates/base/tags/helpdesk_tags.html
Normal file
82
base/templates/base/tags/helpdesk_tags.html
Normal file
@@ -0,0 +1,82 @@
|
||||
{% extends 'settings.html' %}
|
||||
{% load i18n %}
|
||||
{% block settings %}{% load static %}
|
||||
|
||||
<!-- ******************* HELPDESK TAGS ******************* -->
|
||||
|
||||
<div class="oh-inner-sidebar-content">
|
||||
{% if perms.base.view_tags %}
|
||||
<div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
|
||||
<h2 class="oh-inner-sidebar-content__title">{% trans "Helpdesk Tags" %}</h2>
|
||||
{% if perms.base.add_tags %}
|
||||
<button
|
||||
class="oh-btn oh-btn--secondary oh-btn--shadow"
|
||||
data-toggle="oh-modal-toggle"
|
||||
data-target="#tagModal"
|
||||
hx-get="{% url 'tag-create' %}"
|
||||
hx-target="#tagForm"
|
||||
>
|
||||
<ion-icon name="add-outline" class="me-1"></ion-icon>
|
||||
{% trans "Create" %}
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if tags %}
|
||||
{% include 'base/tags/tags_view.html' %}
|
||||
{% else %}
|
||||
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
|
||||
<img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);" src="{% static 'images/ui/price-tag.png' %}" class="" alt="Page not found. 404." />
|
||||
<h5 class="oh-404__subtitle">{% trans "There is no helpdesk tags at this moment." %}</h5>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- start of create modal -->
|
||||
<div
|
||||
class="oh-modal"
|
||||
id="tagModal"
|
||||
role="dialog"
|
||||
aria-labelledby="tagModal"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div class="oh-modal__dialog">
|
||||
<div class="oh-modal__dialog-header">
|
||||
<h2 class="oh-modal__dialog-title" id="createModalTitle">
|
||||
{% trans "Create Helpdesk Tag" %}
|
||||
</h2>
|
||||
<button class="oh-modal__close" aria-label="Close">
|
||||
<ion-icon name="close-outline"></ion-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="oh-modal__dialog-body" id="tagForm"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of create modal -->
|
||||
<!-- start of edit modal -->
|
||||
<div
|
||||
class="oh-modal"
|
||||
id="tagEditModal"
|
||||
role="dialog"
|
||||
aria-labelledby="tagEditModal"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div class="oh-modal__dialog">
|
||||
<div class="oh-modal__dialog-header">
|
||||
<h2 class="oh-modal__dialog-title" id="editModaltitle">
|
||||
{% trans "Helpdesk Tag Update" %}
|
||||
</h2>
|
||||
<button class="oh-modal__close" aria-label="Close">
|
||||
<ion-icon name="close-outline"></ion-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="oh-modal__dialog-body" id="tagEditForm"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of edit modal -->
|
||||
|
||||
|
||||
|
||||
{% endblock settings %}
|
||||
@@ -2,158 +2,6 @@
|
||||
{% load i18n %}
|
||||
{% block settings %}{% load static %}
|
||||
|
||||
<!-- ******************* EMPLOYEE TAGS ******************* -->
|
||||
|
||||
<div class="oh-inner-sidebar-content">
|
||||
{% if perms.employee.view_employeetag %}
|
||||
<div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
|
||||
<h2 class="oh-inner-sidebar-content__title">{% trans "Employee Tags" %}</h2>
|
||||
{% if perms.employee.add_employeetag %}
|
||||
<button
|
||||
class="oh-btn oh-btn--secondary oh-btn--shadow"
|
||||
data-toggle="oh-modal-toggle"
|
||||
data-target="#emptagModal"
|
||||
hx-get="{% url 'employee-tag-create' %}"
|
||||
hx-target="#emptagForm"
|
||||
>
|
||||
<ion-icon name="add-outline" class="me-1"></ion-icon>
|
||||
{% trans "Create" %}
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if employeetags %}
|
||||
{% include 'base/employee_tag/employee_tag_view.html' %}
|
||||
{% else %}
|
||||
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
|
||||
<img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);" src="{% static 'images/ui/price-tag.png' %}" class="" alt="Page not found. 404." />
|
||||
<h5 class="oh-404__subtitle">{% trans "There is no employee tags at this moment." %}</h5>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- start of create modal -->
|
||||
<div
|
||||
class="oh-modal"
|
||||
id="emptagModal"
|
||||
role="dialog"
|
||||
aria-labelledby="emptagModal"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div class="oh-modal__dialog">
|
||||
<div class="oh-modal__dialog-header">
|
||||
<h2 class="oh-modal__dialog-title" id="createModalTitle">
|
||||
{% trans "Create Employee Tag" %}
|
||||
</h2>
|
||||
<button class="oh-modal__close" aria-label="Close">
|
||||
<ion-icon name="close-outline"></ion-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="oh-modal__dialog-body" id="emptagForm"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of create modal -->
|
||||
<!-- start of edit modal -->
|
||||
<div
|
||||
class="oh-modal"
|
||||
id="emptagEditModal"
|
||||
role="dialog"
|
||||
aria-labelledby="emptagEditModal"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div class="oh-modal__dialog">
|
||||
<div class="oh-modal__dialog-header">
|
||||
<h2 class="oh-modal__dialog-title" id="editModaltitle">
|
||||
{% trans "Employee Tag Update" %}
|
||||
</h2>
|
||||
<button class="oh-modal__close" aria-label="Close">
|
||||
<ion-icon name="close-outline"></ion-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="oh-modal__dialog-body" id="emptagEditForm"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of edit modal -->
|
||||
|
||||
|
||||
|
||||
<!-- ******************* HELPDESK TAGS ******************* -->
|
||||
|
||||
<div class="oh-inner-sidebar-content">
|
||||
{% if perms.base.view_tags %}
|
||||
<div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
|
||||
<h2 class="oh-inner-sidebar-content__title">{% trans "Helpdesk Tags" %}</h2>
|
||||
{% if perms.base.add_tags %}
|
||||
<button
|
||||
class="oh-btn oh-btn--secondary oh-btn--shadow"
|
||||
data-toggle="oh-modal-toggle"
|
||||
data-target="#tagModal"
|
||||
hx-get="{% url 'tag-create' %}"
|
||||
hx-target="#tagForm"
|
||||
>
|
||||
<ion-icon name="add-outline" class="me-1"></ion-icon>
|
||||
{% trans "Create" %}
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if tags %}
|
||||
{% include 'base/tags/tags_view.html' %}
|
||||
{% else %}
|
||||
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
|
||||
<img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);" src="{% static 'images/ui/price-tag.png' %}" class="" alt="Page not found. 404." />
|
||||
<h5 class="oh-404__subtitle">{% trans "There is no helpdesk tags at this moment." %}</h5>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- start of create modal -->
|
||||
<div
|
||||
class="oh-modal"
|
||||
id="tagModal"
|
||||
role="dialog"
|
||||
aria-labelledby="tagModal"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div class="oh-modal__dialog">
|
||||
<div class="oh-modal__dialog-header">
|
||||
<h2 class="oh-modal__dialog-title" id="createModalTitle">
|
||||
{% trans "Create Helpdesk Tag" %}
|
||||
</h2>
|
||||
<button class="oh-modal__close" aria-label="Close">
|
||||
<ion-icon name="close-outline"></ion-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="oh-modal__dialog-body" id="tagForm"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of create modal -->
|
||||
<!-- start of edit modal -->
|
||||
<div
|
||||
class="oh-modal"
|
||||
id="tagEditModal"
|
||||
role="dialog"
|
||||
aria-labelledby="tagEditModal"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div class="oh-modal__dialog">
|
||||
<div class="oh-modal__dialog-header">
|
||||
<h2 class="oh-modal__dialog-title" id="editModaltitle">
|
||||
{% trans "Helpdesk Tag Update" %}
|
||||
</h2>
|
||||
<button class="oh-modal__close" aria-label="Close">
|
||||
<ion-icon name="close-outline"></ion-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="oh-modal__dialog-body" id="tagEditForm"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of edit modal -->
|
||||
|
||||
|
||||
<!-- ******************* AUDIT TAGS ******************* -->
|
||||
|
||||
|
||||
Reference in New Issue
Block a user