[FIX] BASE: Design error in settings user group assign

This commit is contained in:
Horilla
2023-11-16 14:42:29 +05:30
parent 94f8ad71c4
commit dd3d7547b1
3 changed files with 300 additions and 207 deletions

View File

@@ -1,29 +1,26 @@
{% extends 'settings.html' %}
{% load i18n %}
{% block settings %}
{% extends 'settings.html' %} {% load i18n %} {% block settings %}
<div class="oh-inner-sidebar-content">
<form action="" method="post" class='settings-label mb-1'>
{% csrf_token %}
<div class="oh-inner-sidebar-content__header">
<h2 class="oh-inner-sidebar-content__title">{% trans "Group Permissions" %}</h2>
</div>
<div class="oh-inner-sidebar-content__body">
<div class="oh-input-group">
{{form.as_p}}
</div>
</div>
<button type='submit' class="oh-btn oh-btn--secondary mt-2 mr-0 oh-btn--w-100-resp">
{% trans "Save Changes" %}
</button>
<div class="oh-inner-sidebar-content__footer">
</div>
</div>
</form>
<div id="permission-container">
<form action="" method="post" class="settings-label mb-1">
{% csrf_token %}
<div class="oh-inner-sidebar-content__header">
<h2 class="oh-inner-sidebar-content__title">
{% trans "Group Permissions" %}
</h2>
</div>
<div class="oh-inner-sidebar-content__body">
<div class="oh-input-group">{{form.as_p}}</div>
</div>
<button
type="submit"
class="oh-btn oh-btn--secondary mt-2 mr-0 oh-btn--w-100-resp"
>
{% trans "Save Changes" %}
</button>
<div class="oh-inner-sidebar-content__footer"></div>
</form>
<div id="permission-container">
{% include 'base/auth/group_view.html' %}
</div>
</div>
{% endblock settings %}
{% endblock settings %}

View File

@@ -1,64 +1,101 @@
{% load i18n %}
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12">
<div class="oh-card p-4">
<div class="oh-card__body">
<div class="oh-sticky-table oh-sticky-table--no-highlight">
<div class="oh-sticky-table__table">
<div class="oh-sticky-table__thead">
<div class="oh-sticky-table__tr">
<div class="oh-sticky-table__th">{% trans "Group" %}</div>
<div class="oh-sticky-table__th">{% trans "Permissions" %}</div>
<div class="oh-sticky-table__th"></div>
</div>
</div>
<div class="oh-sticky-table__tbody">
{% for gp in groups %}
<div class="oh-sticky-table__tr oh-permission-table__tr oh-permission-table--collapsed">
<div class="oh-sticky-table__sd oh-permission-table--toggle">
<div class="d-flex align-items-center">
<button class="oh-permission-table__collapse me-2">
<ion-icon class="oh-permission-table__collapse-down" title="{% trans 'Reveal' %}" name="chevron-down-outline"></ion-icon>
<ion-icon class="oh-permission-table__collapse-up" title="{% trans 'Collapse' %}" name="chevron-up-outline"></ion-icon>
</button>
<span class="oh-permission-table__user">{{gp}}.</span>
</div>
</div>
<div class="oh-sticky-table__td">
<span class="perm-count">{{gp.permissions.all|length}} {% trans "Permissions" %}</span>
{% for permission in gp.permissions.all %}
<span class="oh-permission-panel oh-collapse-panel" data-label='Permissions' data-count="{{gp.permissions.all|length}}">
{{permission}}
{% if perms.change_group %}
<form action="{% url 'group-permission-remove' permission.id gp.id %}" method="post">
{% csrf_token %}
<button type='submit' class="oh-permission-panel__remove" title='{% trans "Remove" %}'>
<ion-icon name="close-outline"></ion-icon>
</button>
</form>
{% endif %}
</span>
{% endfor %}
</div>
<div class="oh-sticky-table__sd">
<div class="d-flex">
{% if perms.change_group %}
<a href="{% url 'user-group-update' gp.id %}" 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.delete_group %}
<form action="{% url 'user-group-delete' gp.id %}" onsubmit="return confirm('{% trans "Are you sure you want to delete this group?" %}');" class="w-50" method='post'>
{% csrf_token %}
<button type='submit' class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" title="{% trans 'Remove' %}"><ion-icon name="trash-outline"></ion-icon></button>
</form>
{% endif %}
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-12">
<div class="oh-card p-4">
<div class="oh-card__body">
<div class="oh-sticky-table oh-sticky-table--no-highlight">
<div class="oh-sticky-table__table">
<div class="oh-sticky-table__thead">
<div class="oh-sticky-table__tr">
<div class="oh-sticky-table__th">{% trans "Group" %}</div>
<div class="oh-sticky-table__th">{% trans "Permissions" %}</div>
<div class="oh-sticky-table__th"></div>
</div>
</div>
<div class="oh-sticky-table__tbody">
{% for gp in groups %}
<div
class="oh-sticky-table__tr oh-permission-table__tr oh-permission-table--collapsed"
>
<div class="oh-sticky-table__sd oh-permission-table--toggle">
<div class="d-flex align-items-center">
<button class="oh-permission-table__collapse me-2">
<ion-icon
class="oh-permission-table__collapse-down"
title="{% trans 'Reveal' %}"
name="chevron-down-outline"
></ion-icon>
<ion-icon
class="oh-permission-table__collapse-up"
title="{% trans 'Collapse' %}"
name="chevron-up-outline"
></ion-icon>
</button>
<span class="oh-permission-table__user">{{gp}}.</span>
</div>
</div>
<div class="oh-sticky-table__td">
<span class="perm-count"
>{{gp.permissions.all|length}} {% trans "Permissions"%}</span
>
{% for permission in gp.permissions.all %}
<span
class="oh-permission-panel oh-collapse-panel"
data-label="Permissions"
data-count="{{gp.permissions.all|length}}"
>
{{permission}} {% if perms.change_group %}
<form
action="{% url 'group-permission-remove' permission.id gp.id %}"
method="post"
>
{% csrf_token %}
<button
type="submit"
class="oh-permission-panel__remove"
title='{% trans "Remove" %}'
>
<ion-icon name="close-outline"></ion-icon>
</button>
</form>
{% endif %}
</span>
{% endfor %}
</div>
<div class="oh-sticky-table__sd">
<div class="d-flex">
{% if perms.change_group %}
<a
href="{% url 'user-group-update' gp.id %}"
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.delete_group %}
<form action="{% url 'user-group-delete' gp.id %}"
onsubmit="return confirm('{% trans "Are you sure you want to delete this group?" %}');"
class="w-50" method='post'>
{% csrf_token %}
<button
type="submit"
class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
title="{% trans 'Remove' %}"
>
<ion-icon name="trash-outline"></ion-icon>
</button>
</form>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>

View File

@@ -1,131 +1,190 @@
{% extends 'index.html' %}
{% block content %}
{% load static %}
{% load i18n %}
{% extends 'index.html' %} {% block content %} {% load static %} {% load i18n %}
<style>
.settings-label{
font-weight:bold;
font-size:15px;
}
.perm-count {
width: 100%;
display: flex;
padding: 0.5rem 0rem;
font-style: italic;
color: hsl(0deg,0%,37%);
width: 100%;
}
.settings-label {
font-weight: bold;
font-size: 15px;
}
.perm-count {
width: 100%;
display: flex;
padding: 0.5rem 0rem;
font-style: italic;
color: hsl(0deg, 0%, 37%);
width: 100%;
}
</style>
<section class="oh-wrapper oh-main__topbar">
<div
class="oh-main__titlebar oh-main__titlebar--left oh-d-flex-column--resp oh-mb-3--small"
>
<h1 class="oh-main__titlebar-title fw-bold">{% trans "Settings" %}</h1>
</div>
<div class="oh-main__titlebar oh-main__titlebar--right"></div>
<div
class="oh-main__titlebar oh-main__titlebar--left oh-d-flex-column--resp oh-mb-3--small"
>
<h1 class="oh-main__titlebar-title fw-bold">{% trans "Settings" %}</h1>
</div>
<div class="oh-main__titlebar oh-main__titlebar--right"></div>
</section>
<div class="oh-wrapper">
<div class="oh-card">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-3">
<button
class="oh-btn oh-btn--light oh-inner-sidebar-toggle w-100"
data-action="toggle"
data-target="#mobileMenu"
data-class="oh-resp-hidden--lg"
>
<ion-icon class="me-2" name="menu-outline"></ion-icon>{% trans "All Settings" %}
</button>
<div class="oh-inner-sidebar oh-resp-hidden--lg" style="font-weight:bold;" id="mobileMenu">
<ul class="oh-inner-sidebar__items">
<li class="oh-inner-sidebar__item">
<a
id="department"
href="{% url 'department-creation' %}"
class="oh-inner-sidebar__link oh-dropdown__link"
>{% trans "Department" %}</a
>
</li>
<li class="oh-inner-sidebar__item">
<a
id="jobPosition"
href="{% url 'job-position-creation' %}" class="oh-inner-sidebar__link oh-dropdown__link ">{% trans "Job Positions" %}</a>
</li>
<li class="oh-inner-sidebar__item">
<a id="jobRole" href="{% url 'job-role-create' %}" class="oh-inner-sidebar__link oh-dropdown__link">{% trans "Job Role" %}</a>
</li>
<li class="oh-inner-sidebar__item">
<a id="workType" href="{% url 'work-type-create' %}" class="oh-inner-sidebar__link oh-dropdown__link">{% trans "Work Type" %}</a>
</li>
<li class="oh-inner-sidebar__item">
<a id="rotatingWorkType" href="{% url 'rotating-work-type-create' %}" class="oh-inner-sidebar__link oh-dropdown__link">{% trans "Rotating Work Type" %}</a>
</li>
<li class="oh-inner-sidebar__item">
<a id="employeeType" href="{% url 'employee-type-create' %}" class="oh-inner-sidebar__link oh-dropdown__link">{% trans "Employee Type" %}</a>
</li>
<li class="oh-inner-sidebar__item">
<a id="employeeShift" href="{% url 'employee-shift-create' %}" class="oh-inner-sidebar__link oh-dropdown__link">{% trans "Employee Shift" %}</a>
</li>
<li class="oh-inner-sidebar__item">
<a id="employeeShiftSchedule" href="{% url 'employee-shift-schedule-create' %}" class="oh-inner-sidebar__link oh-dropdown__link"
>{% trans "Employee Shift Schedule" %}</a
>
</li>
<li class="oh-inner-sidebar__item">
<a id="rotatingShift" href="{% url 'rotating-shift-create' %}" class="oh-inner-sidebar__link oh-dropdown__link">{% trans "Rotating Shift" %}</a>
</li>
{% comment %} <li class="oh-inner-sidebar__item">
<a id="condition" href="{% url 'validation-condition-create' %}" class="oh-inner-sidebar__link oh-dropdown__link"
>{% trans "Attendance Break Point" %}</a>
</li> {% endcomment %}
<li class="oh-inner-sidebar__item">
<a id="condition" href="{% url 'attendance-settings' %}" class="oh-inner-sidebar__link oh-dropdown__link"
>{% trans "Attendance Break Point" %}</a>
</li>
<li class="oh-inner-sidebar__item">
<a id="employeePermission" href="{% url 'employee-permission-assign' %}" class="oh-inner-sidebar__link oh-dropdown__link"
>{% trans "Employee Permission" %}</a>
</li>
<li class="oh-inner-sidebar__item">
<a id="userGroup" href="{% url 'user-group-create' %}" class="oh-inner-sidebar__link oh-dropdown__link">{% trans "User Group" %}</a>
</li>
<li class="oh-inner-sidebar__item">
<a id="userGroupAssign" href="{% url 'user-group-assign' %}" class="oh-inner-sidebar__link oh-dropdown__link">{% trans "User Group Assign" %}</a>
</li>
<li class="oh-inner-sidebar__item">
<a id="company" href="{% url 'company-create' %}" class="oh-inner-sidebar__link oh-dropdown__link">{% trans "Company" %}</a>
</li>
<li class="oh-inner-sidebar__item">
<a id="currency" href="{% url 'currency-settings' %}" class="oh-inner-sidebar__link oh-dropdown__link">{% trans "Currency" %}</a>
</li>
</ul>
</div>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-9">
{% block settings %}
{% endblock settings %}
</div>
</div>
</div>
<div class="oh-card">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-3">
<button
class="oh-btn oh-btn--light oh-inner-sidebar-toggle w-100"
data-action="toggle"
data-target="#mobileMenu"
data-class="oh-resp-hidden--lg"
>
<ion-icon class="me-2" name="menu-outline"></ion-icon>{% trans "All
Settings" %}
</button>
<div
class="oh-inner-sidebar oh-resp-hidden--lg"
style="font-weight: bold"
id="mobileMenu"
>
<ul class="oh-inner-sidebar__items">
<li class="oh-inner-sidebar__item">
<a
id="department"
href="{% url 'department-creation' %}"
class="oh-inner-sidebar__link oh-dropdown__link"
>{% trans "Department" %}</a
>
</li>
<li class="oh-inner-sidebar__item">
<a
id="jobPosition"
href="{% url 'job-position-creation' %}"
class="oh-inner-sidebar__link oh-dropdown__link"
>{% trans "Job Positions" %}</a
>
</li>
<li class="oh-inner-sidebar__item">
<a
id="jobRole"
href="{% url 'job-role-create' %}"
class="oh-inner-sidebar__link oh-dropdown__link"
>{% trans "Job Role" %}</a
>
</li>
<li class="oh-inner-sidebar__item">
<a
id="workType"
href="{% url 'work-type-create' %}"
class="oh-inner-sidebar__link oh-dropdown__link"
>{% trans "Work Type" %}</a
>
</li>
<li class="oh-inner-sidebar__item">
<a
id="rotatingWorkType"
href="{% url 'rotating-work-type-create' %}"
class="oh-inner-sidebar__link oh-dropdown__link"
>{% trans "Rotating Work Type" %}</a
>
</li>
<li class="oh-inner-sidebar__item">
<a
id="employeeType"
href="{% url 'employee-type-create' %}"
class="oh-inner-sidebar__link oh-dropdown__link"
>{% trans "Employee Type" %}</a
>
</li>
<li class="oh-inner-sidebar__item">
<a
id="employeeShift"
href="{% url 'employee-shift-create' %}"
class="oh-inner-sidebar__link oh-dropdown__link"
>{% trans "Employee Shift" %}</a
>
</li>
<li class="oh-inner-sidebar__item">
<a
id="employeeShiftSchedule"
href="{% url 'employee-shift-schedule-create' %}"
class="oh-inner-sidebar__link oh-dropdown__link"
>{% trans "Employee Shift Schedule" %}</a
>
</li>
<li class="oh-inner-sidebar__item">
<a
id="rotatingShift"
href="{% url 'rotating-shift-create' %}"
class="oh-inner-sidebar__link oh-dropdown__link"
>{% trans "Rotating Shift" %}</a
>
</li>
<li class="oh-inner-sidebar__item">
<a
id="condition"
href="{% url 'attendance-settings' %}"
class="oh-inner-sidebar__link oh-dropdown__link"
>{% trans "Attendance Break Point" %}</a
>
</li>
<li class="oh-inner-sidebar__item">
<a
id="employeePermission"
href="{% url 'employee-permission-assign' %}"
class="oh-inner-sidebar__link oh-dropdown__link"
>{% trans "Employee Permission" %}</a
>
</li>
<li class="oh-inner-sidebar__item">
<a
id="userGroup"
href="{% url 'user-group-create' %}"
class="oh-inner-sidebar__link oh-dropdown__link"
>{% trans "User Group" %}</a
>
</li>
<li class="oh-inner-sidebar__item">
<a
id="userGroupAssign"
href="{% url 'user-group-assign' %}"
class="oh-inner-sidebar__link oh-dropdown__link"
>{% trans "User Group Assign" %}</a
>
</li>
<li class="oh-inner-sidebar__item">
<a
id="company"
href="{% url 'company-create' %}"
class="oh-inner-sidebar__link oh-dropdown__link"
>{% trans "Company" %}</a
>
</li>
<li class="oh-inner-sidebar__item">
<a
id="currency"
href="{% url 'currency-settings' %}"
class="oh-inner-sidebar__link oh-dropdown__link"
>{% trans "Currency" %}</a
>
</li>
</ul>
</div>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-9">
{% block settings %} {% endblock settings %}
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
var path = location.pathname
var menu = $(`a[href="${path}"].oh-inner-sidebar__link.oh-dropdown__link`)
if (menu.length == 0) {
var path = localStorage.getItem("lastActiveTab")
menu = $(`a[href="${path}"].oh-inner-sidebar__link.oh-dropdown__link`)
}
menu.addClass("oh-inner-sidebar__link--active");
menu.attr('style', 'border:1px solid #FF820D ; border-radius:2px;');
menu[0].scrollIntoView({ behavior: "smooth", block: "center" })
if (menu.length != undefined) {
localStorage.setItem("lastActiveTab",path)
}
})
$(document).ready(function () {
var path = location.pathname;
var menu = $(`a[href="${path}"].oh-inner-sidebar__link.oh-dropdown__link`);
if (menu.length == 0) {
var path = localStorage.getItem("lastActiveTab");
menu = $(`a[href="${path}"].oh-inner-sidebar__link.oh-dropdown__link`);
}
menu.addClass("oh-inner-sidebar__link--active");
menu.attr("style", "border:1px solid #FF820D ; border-radius:2px;");
menu[0].scrollIntoView({ behavior: "smooth", block: "center" });
if (menu.length != undefined) {
localStorage.setItem("lastActiveTab", path);
}
});
</script>
{% endblock content %}