[UPDT] PMS: Group By as separate button in objective
This commit is contained in:
Horilla
@@ -1,244 +1,320 @@
|
||||
{% extends 'index.html' %}
|
||||
{% load static i18n %}
|
||||
{% load i18n %}
|
||||
{% load widget_tweaks %}
|
||||
{% load mathfilters %}
|
||||
{% load basefilters %}
|
||||
{% block styles %}
|
||||
{% extends 'index.html' %} {% load static i18n %} {% load i18n %} {% load widget_tweaks %} {% load mathfilters %} {% load basefilters %} {% block styles %}
|
||||
<link rel="stylesheet" href="{% static 'css/pms.css' %}" />
|
||||
{% endblock styles %}
|
||||
|
||||
{% block content %}
|
||||
{% if messages %}
|
||||
{% endblock styles %} {% block content %} {% if messages %}
|
||||
<!-- form errors -->
|
||||
<div class="oh-wrapper">
|
||||
<div class="oh-alert-container">
|
||||
{% for message in messages %}
|
||||
<div class="oh-alert oh-alert--animated {{message.tags}}">
|
||||
{{message}}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="oh-alert-container">
|
||||
{% for message in messages %}
|
||||
<div class="oh-alert oh-alert--animated {{message.tags}}">{{message}}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
|
||||
<section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}">
|
||||
<div class="oh-main__titlebar oh-main__titlebar--left">
|
||||
<h1 class="oh-main__titlebar-title fw-bold">{% trans "Objective Key Results (OKR)" %} </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">
|
||||
<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 name="search" hx-get="{% url 'objective-list-search' %}" hx-target="#objective_list"
|
||||
hx-trigger='keyup delay:500ms' type="text" class="oh-input oh-input__icon" aria-label="Search Input"
|
||||
placeholder="{% trans 'Search' %}" />
|
||||
</div>
|
||||
<div class="oh-main__titlebar-button-container">
|
||||
<div class="oh-dropdown" x-data="{open: false}">
|
||||
<button class="oh-btn ml-2" @click="open = !open">
|
||||
<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;">
|
||||
<form
|
||||
hx-get="{% url 'objective-list-search' %}"
|
||||
hx-target="#objective_list"
|
||||
hx-swap="innerHTML"
|
||||
method="get"
|
||||
id="filterForm">
|
||||
<div class="oh-dropdown__filter-body">
|
||||
<div class="oh-accordion">
|
||||
<div class="oh-accordion-header">{% trans "Objective" %}</div>
|
||||
<div class="oh-accordion-body">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-12 col-lg-6">
|
||||
<div class="oh-input-group">
|
||||
<label class="oh-label">{% trans "Objective" %}</label>
|
||||
{{objective_filer_form.objective}}
|
||||
</div>
|
||||
<div class="oh-input-group">
|
||||
<label class="oh-label">{% trans "Status" %}</label>
|
||||
{{objective_filer_form.status}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-12 col-lg-6">
|
||||
<div class="oh-input-group">
|
||||
<label class="oh-label">{% trans "Employee" %}</label>
|
||||
{{objective_filer_form.employee_id}}
|
||||
</div>
|
||||
<div class="oh-input-group">
|
||||
<label class="oh-label">{% trans "Created" %} </label>
|
||||
{{objective_filer_form.created_at}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-12 col-lg-6">
|
||||
<div class="oh-input-group">
|
||||
<label class="oh-label">{% trans "Start Date" %}</label>
|
||||
{{objective_filer_form.start_date}}
|
||||
</div>
|
||||
<div class="oh-input-group">
|
||||
<label class="oh-label">{% trans "Updated At" %}</label>
|
||||
{{objective_filer_form.updated_at}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-12 col-lg-6">
|
||||
<div class="oh-input-group">
|
||||
<label class="oh-label">{% trans "End Date" %}</label>
|
||||
{{objective_filer_form.end_date}}
|
||||
</div>
|
||||
<div class="oh-input-group">
|
||||
<label class="oh-label">{% trans "Archive" %}</label>
|
||||
{{ objective_filer_form.archive }}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="oh-input-group">
|
||||
<label class="oh-label">{% trans "Key Result" %}</label>
|
||||
{{ objective_filer_form.emp_obj_id }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="oh-accordion">
|
||||
<div class="oh-accordion-header">{% trans "Advanced" %}</div>
|
||||
<div class="oh-accordion-body">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-12 col-lg-6">
|
||||
<div class="oh-input-group fil">
|
||||
<a hx-get="{%url 'objective-list-search' %}?created_at_date_range=today" hx-target="#objective_list" class="oh-btn oh-btn--secondary oh-btn--small w-100">{% trans "Today" %}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-12 col-lg-6">
|
||||
<div class="oh-input-group fil">
|
||||
<a hx-get="{%url 'objective-list-search' %}?created_at_date_range=yesterday" hx-target="#objective_list" class="oh-btn oh-btn--secondary oh-btn--small w-100">{% trans "Yesterday" %}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-12 col-lg-6">
|
||||
<div class="oh-input-group fil">
|
||||
<a hx-get="{%url 'objective-list-search' %}?created_at_date_range=week" hx-target="#objective_list" class="oh-btn oh-btn--secondary oh-btn--small w-100">{% trans "This Week" %}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-12 col-lg-6">
|
||||
<div class="oh-input-group fil">
|
||||
<a hx-get="{%url 'objective-list-search' %}?created_at_date_range=month" hx-target="#objective_list" class="oh-btn oh-btn--secondary oh-btn--small w-100">{% trans "This Month" %}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="oh-accordion">
|
||||
<div class="oh-accordion-header">{% trans "Group By" %}</div>
|
||||
<div class="oh-accordion-body">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-12 col-lg-6">
|
||||
<div class="oh-input-group">
|
||||
<label class="oh-label">{% trans "Field" %}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-12 col-lg-6">
|
||||
<div class="oh-input-group">
|
||||
<select
|
||||
class="oh-select mt-1 w-100"
|
||||
id="id_field"
|
||||
name="field"
|
||||
class="select2-selection select2-selection--single"
|
||||
id="gp"
|
||||
>
|
||||
{% for field in gp_fields %}
|
||||
<option value="{{ field.0 }}">{% trans field.1 %}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="oh-dropdown__filter-footer">
|
||||
<button class="oh-btn oh-btn--secondary oh-btn--small w-100 filterButton" id="objective-filter-form-submit">{% trans "Filter" %}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}">
|
||||
<div class="oh-main__titlebar oh-main__titlebar--left">
|
||||
<h1 class="oh-main__titlebar-title fw-bold">
|
||||
{% trans "Objective Key Results (OKR)" %}
|
||||
</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">
|
||||
<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
|
||||
name="search"
|
||||
hx-get="{% url 'objective-list-search' %}"
|
||||
hx-target="#objective_list"
|
||||
hx-trigger="keyup delay:500ms"
|
||||
type="text"
|
||||
class="oh-input oh-input__icon"
|
||||
aria-label="Search Input"
|
||||
placeholder="{% trans 'Search' %}"
|
||||
/>
|
||||
</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">
|
||||
|
||||
<li class="oh-dropdown__item">
|
||||
<a href="#" class="oh-dropdown__link " id="archiveObjectives"
|
||||
|
||||
>{% trans "Archive" %}</a
|
||||
>
|
||||
</li>
|
||||
<form
|
||||
hx-get="{% url 'objective-list-search' %}"
|
||||
hx-target="#objective_list"
|
||||
hx-swap="innerHTML"
|
||||
method="get"
|
||||
id="filterForm"
|
||||
>
|
||||
<div class="oh-main__titlebar-button-container">
|
||||
<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-dropdown__filter-body">
|
||||
<div class="oh-accordion">
|
||||
<div class="oh-accordion-header">{% trans "Objective" %}</div>
|
||||
<div class="oh-accordion-body">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-12 col-lg-6">
|
||||
<div class="oh-input-group">
|
||||
<label class="oh-label"
|
||||
>{% trans "Objective" %}</label
|
||||
>
|
||||
{{objective_filer_form.objective}}
|
||||
</div>
|
||||
<div class="oh-input-group">
|
||||
<label class="oh-label">{% trans "Status" %}</label>
|
||||
{{objective_filer_form.status}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-12 col-lg-6">
|
||||
<div class="oh-input-group">
|
||||
<label class="oh-label">{% trans "Employee" %}</label>
|
||||
{{objective_filer_form.employee_id}}
|
||||
</div>
|
||||
<div class="oh-input-group">
|
||||
<label class="oh-label">{% trans "Created" %} </label>
|
||||
{{objective_filer_form.created_at}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-12 col-lg-6">
|
||||
<div class="oh-input-group">
|
||||
<label class="oh-label"
|
||||
>{% trans "Start Date" %}</label
|
||||
>
|
||||
{{objective_filer_form.start_date}}
|
||||
</div>
|
||||
<div class="oh-input-group">
|
||||
<label class="oh-label"
|
||||
>{% trans "Updated At" %}</label
|
||||
>
|
||||
{{objective_filer_form.updated_at}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-12 col-lg-6">
|
||||
<div class="oh-input-group">
|
||||
<label class="oh-label">{% trans "End Date" %}</label>
|
||||
{{objective_filer_form.end_date}}
|
||||
</div>
|
||||
<div class="oh-input-group">
|
||||
<label class="oh-label">{% trans "Archive" %}</label>
|
||||
{{ objective_filer_form.archive }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="oh-input-group">
|
||||
<label class="oh-label">{% trans "Key Result" %}</label>
|
||||
{{ objective_filer_form.emp_obj_id }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="oh-accordion">
|
||||
<div class="oh-accordion-header">{% trans "Advanced" %}</div>
|
||||
<div class="oh-accordion-body">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-12 col-lg-6">
|
||||
<div class="oh-input-group fil">
|
||||
<a
|
||||
hx-get="{%url 'objective-list-search' %}?created_at_date_range=today"
|
||||
hx-target="#objective_list"
|
||||
class="oh-btn oh-btn--secondary oh-btn--small w-100"
|
||||
>{% trans "Today" %}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-12 col-lg-6">
|
||||
<div class="oh-input-group fil">
|
||||
<a
|
||||
hx-get="{%url 'objective-list-search' %}?created_at_date_range=yesterday"
|
||||
hx-target="#objective_list"
|
||||
class="oh-btn oh-btn--secondary oh-btn--small w-100"
|
||||
>{% trans "Yesterday" %}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-12 col-lg-6">
|
||||
<div class="oh-input-group fil">
|
||||
<a
|
||||
hx-get="{%url 'objective-list-search' %}?created_at_date_range=week"
|
||||
hx-target="#objective_list"
|
||||
class="oh-btn oh-btn--secondary oh-btn--small w-100"
|
||||
>{% trans "This Week" %}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-12 col-lg-6">
|
||||
<div class="oh-input-group fil">
|
||||
<a
|
||||
hx-get="{%url 'objective-list-search' %}?created_at_date_range=month"
|
||||
hx-target="#objective_list"
|
||||
class="oh-btn oh-btn--secondary oh-btn--small w-100"
|
||||
>{% trans "This Month" %}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="oh-dropdown__filter-footer">
|
||||
<button
|
||||
class="oh-btn oh-btn--secondary oh-btn--small w-100 filterButton"
|
||||
id="objective-filter-form-submit"
|
||||
>
|
||||
{% trans "Filter" %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<li class="oh-dropdown__item">
|
||||
<a href="#" class="oh-dropdown__link "
|
||||
|
||||
id="unArchiveObjectives"
|
||||
>{% trans "Un-Archive" %}</a
|
||||
>
|
||||
</li>
|
||||
<div
|
||||
class="oh-dropdown"
|
||||
x-data="{open: false}"
|
||||
onclick="event.preventDefault()"
|
||||
>
|
||||
<button class="oh-btn ml-2" @click="open = !open">
|
||||
<ion-icon name="library-outline" class="mr-1"></ion-icon>{% trans "Group By" %}
|
||||
</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-accordion">
|
||||
<label>{% trans "Group By" %}</label>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-12 col-lg-6">
|
||||
<div class="oh-input-group">
|
||||
<label class="oh-label">{% trans "Field" %}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-12 col-lg-6">
|
||||
<div class="oh-input-group">
|
||||
<select
|
||||
class="oh-select mt-1 w-100"
|
||||
id="id_field"
|
||||
name="field"
|
||||
class="select2-selection select2-selection--single"
|
||||
>
|
||||
{% for field in gp_fields %}
|
||||
<option value="{{ field.0 }}">
|
||||
{% trans field.1 %}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{% if perms.pms.delete_employeeobjective %}
|
||||
<li class="oh-dropdown__item">
|
||||
<a
|
||||
href="#"
|
||||
class="oh-dropdown__link oh-dropdown__link--danger"
|
||||
id="deleteObjectives"
|
||||
>{% trans "Delete" %}</a
|
||||
>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
</ul>
|
||||
</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"
|
||||
onclick="event.preventDefault()"
|
||||
>
|
||||
{% trans "Actions" %}
|
||||
</button>
|
||||
<div
|
||||
class="oh-dropdown__menu oh-dropdown__menu--right"
|
||||
x-show="open"
|
||||
style="display: none"
|
||||
>
|
||||
<ul class="oh-dropdown__items">
|
||||
<li class="oh-dropdown__item">
|
||||
<a href="#" class="oh-dropdown__link" id="archiveObjectives"
|
||||
>{% trans "Archive" %}</a
|
||||
>
|
||||
</li>
|
||||
|
||||
<!-- checking user permission for objective creation -->
|
||||
{% if perms.pms.view_questiontemplate or request.user|filtersubordinates %}
|
||||
<div class="oh-btn-group ml-2">
|
||||
<div>
|
||||
<a href="{%url 'objective-creation' %}" class="oh-btn oh-btn--secondary oh-btn--shadow" style="text-decoration: none;">
|
||||
<ion-icon class="me-2" name="add-outline"></ion-icon>
|
||||
{% trans "Create" %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="oh-wrapper" id="objective_list">
|
||||
{% include 'okr/objective_list.html' %}
|
||||
|
||||
</div>
|
||||
<li class="oh-dropdown__item">
|
||||
<a
|
||||
href="#"
|
||||
class="oh-dropdown__link"
|
||||
id="unArchiveObjectives"
|
||||
>{% trans "Un-Archive" %}</a
|
||||
>
|
||||
</li>
|
||||
|
||||
{% if perms.pms.delete_employeeobjective %}
|
||||
<li class="oh-dropdown__item">
|
||||
<a
|
||||
href="#"
|
||||
class="oh-dropdown__link oh-dropdown__link--danger"
|
||||
id="deleteObjectives"
|
||||
>{% trans "Delete" %}</a
|
||||
>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- checking user permission for objective creation -->
|
||||
{% if perms.pms.view_questiontemplate or request.user|filtersubordinates %}
|
||||
<div class="oh-btn-group ml-2">
|
||||
<div>
|
||||
<a
|
||||
href="{%url 'objective-creation' %}"
|
||||
class="oh-btn oh-btn--secondary oh-btn--shadow"
|
||||
style="text-decoration: none"
|
||||
>
|
||||
<ion-icon class="me-2" name="add-outline"></ion-icon>
|
||||
{% trans "Create" %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="oh-wrapper" id="objective_list">
|
||||
{% include 'okr/objective_list.html' %}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="{% static '/base/filter.js' %}"></script>
|
||||
<script src="{% static 'src/okr/action.js' %}"></script>
|
||||
<script src="{% static 'src/okr/action.js' %}"></script>
|
||||
<script>
|
||||
$(".fil").click(function () {
|
||||
$("#filterCount").text("(1)");
|
||||
});
|
||||
|
||||
$(".fil").click(function() {
|
||||
$("#filterCount").text("(1)");
|
||||
});
|
||||
|
||||
$(document).ready(function () {
|
||||
$("#id_field").on("change", function () {
|
||||
$(".filterButton")[0].click();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
Reference in New Issue
Block a user