nestict/ihrm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[UPDT] Added style for current view type

Browse Source
This commit is contained in:
Horilla
2023-09-25 15:57:17 +05:30
parent ceceabb885
commit ce299bb288
12 changed files with 142 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
employee/static/employee/search.js
View File

@@ -18,6 +18,8 @@ $(document).ready(function () {
history.pushState({}, "", newURL);
$("#employee-search").attr("hx-vals", `{"view":"${view}"}`);
$('#filterForm').attr("hx-vals", `{"view":"${view}"}`);
$(".oh-btn--view-active").removeClass("oh-btn--view-active")
$(this).children("a").addClass("oh-btn--view-active")
}
});

4
employee/templates/employee_nav.html
View File

@@ -146,7 +146,7 @@
{% comment %} href = "{% url 'employee-view-list' %}" {% endcomment %}
hx-get="{% url 'employee-filter-view' %}?view=list"
hx-target="#view-container"
class="oh-btn oh-btn--view"
class="oh-btn oh-btn--view {% if request.GET.view != 'card' %} oh-btn--view-active {% endif %}"
title='{% trans "List" %}'
><ion-icon name="list-outline"></ion-icon
></a>
@@ -157,7 +157,7 @@
{% comment %} href = "{% url 'employee-view-card' %}" {% endcomment %}
hx-get="{% url 'employee-filter-view' %}?view=card"
hx-target="#view-container"
class="oh-btn oh-btn--view"
class="oh-btn oh-btn--view {% if request.GET.view == 'card' %} oh-btn--view-active {% endif %}"
title='{% trans "Card" %}'
><ion-icon name="grid-outline"></ion-icon
></a>

2
onboarding/templates/onboarding/dashboard.html
View File

@@ -79,7 +79,7 @@
</div>
</div>
<div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent" style="width:50%">
<div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent" style="width:50%;cursor: default;" >
<div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
<span class="oh-card-dashboard__title">{% trans "Candidates on Onboard" %}</span>
</div>

2
onboarding/templates/onboarding/kanban/kanban.html
View File

@@ -39,7 +39,7 @@
name="list-outline" role="img" class="md hydrated" aria-label="list outline"></ion-icon></a>
</li>
<li class="oh-view-type candidate-view-type" data-view="card" title="{% trans "Card" %}">
<a href="{% url 'kanban-view' %}" hx-target="#section" class="oh-btn oh-btn--view"><ion-icon
<a href="{% url 'kanban-view' %}" hx-target="#section" class="oh-btn oh-btn--view oh-btn--view-active"><ion-icon
name="grid-outline" role="img" class="md hydrated" aria-label="grid outline"></ion-icon></a>
</li>
</ul>

2
onboarding/templates/onboarding/onboarding-view.html
View File

@@ -47,7 +47,7 @@
</div>
<ul class="oh-view-types ml-2" style="margin-bottom: 0;">
<li class="oh-view-type candidate-view-type" data-view="list" title="{% trans "List" %}">
<a href="{% url 'onboarding-view' %}" hx-target="#section" class="oh-btn oh-btn--view "><ion-icon
<a href="{% url 'onboarding-view' %}" hx-target="#section" class="oh-btn oh-btn--view oh-btn--view-active"><ion-icon
name="list-outline" role="img" class="md hydrated" aria-label="list outline"></ion-icon></a>
</li>
<li class="oh-view-type candidate-view-type" data-view="card" title="{% trans "Card" %}">

113
payroll/static/payroll/dashboard.js
View File

@@ -2,14 +2,26 @@ $(document).ready(function(){
var myDate = new Date();
var year = myDate.getFullYear();
var month = ('0' + (myDate.getMonth())).slice(-2); // Month is zero-indexed, so add 1 and pad with leading zero if needed
var month = ('0' + (myDate.getMonth())).slice(-2);
var formattedDate = year + '-' + month;
var start_index=0;
var per_page=10
$("#monthYearField").val(formattedDate);
function isBarChartEmpty(chartData) {
if (!chartData) {
return true;
}
for (let i = 0; i < chartData.length; i++) {
const hasNonZeroValues = chartData[i].data.some(value => value !== 0);
if (hasNonZeroValues) {
return false; // Return false if any non-zero value is found
}
}
return true; // Return true if all values are zero
}
function employee_chart(dataSet, labels) {
$("#employee_canvas_body").html('<canvas id="employeeChart"></canvas>');
@@ -69,7 +81,7 @@ $(document).ready(function(){
var clickedLabel = employeeChartData.labels[clickedBarIndex];
$.ajax({
url: '/payroll/filter-payslip?dashboard=true&search=' + clickedLabel,
url: '/payroll/filter-payslip?dashboard=true&start_date='+$("#monthYearField").val()+'-01&search=' + clickedLabel,
type: "GET",
dataType: "html",
headers: {
@@ -126,8 +138,18 @@ $(document).ready(function(){
item["data"]=item.data.slice(start_index,start_index+per_page,)
});
var values = Object.values(labels).slice(start_index, start_index + per_page);
employee_chart(dataSet,values)
if(isBarChartEmpty(dataSet)){
$("#employee_canvas_body").html(
`<div style="height: 310px; display:flex;align-items: center;justify-content: center;" class="">
<div style="" class="">
<img style="display: block;width: 70px;margin: 10px auto ;" src="/static/images/ui/no-money.png" class="" alt=""/>
<h3 style="font-size:16px" class="oh-404__subtitle">${response.message}</h3>
</div>
</div>`
)
}else{
employee_chart(dataSet,values)
}
},
error: (error) => {
console.log('Error', error);
@@ -188,7 +210,7 @@ $(document).ready(function(){
var clickedLabel = departmentChartData.labels[clickedBarIndex];
$.ajax({
url: '/payroll/filter-payslip?dashboard=true&department='+clickedLabel,
url: '/payroll/filter-payslip?dashboard=true&start_date='+$("#monthYearField").val()+'-01&department='+clickedLabel,
type: "GET",
dataType: "html",
headers: {
@@ -222,16 +244,38 @@ $(document).ready(function(){
dataSet = response.dataset;
labels = response.labels;
department_total = response.department_total
$("#department_total").html("")
$.each(department_total, function (key, value) {
$("#department_total").append(
"<li class='m-3 department'><span class='department_item'>"+value["department"]+"</span>: <span>"+value["amount"]+"</span></li>"
)
})
if (department_total.length!=0){
$("#department_total").html("")
$.each(department_total, function (key, value) {
$("#department_total").append(
`<li class='m-3 department' style = 'cursor: pointer;''><span class='department_item'>${value["department"]}</span>: <span> ${value["amount"]}</span></li>`
)
})
department_chart(dataSet,labels)
}else {
$("#department_total").html(
`<div style="display:flex;align-items: center;justify-content: center; padding-top:50px" class="">
<div style="" class="">
<img style="display: block;width: 70px;margin: 10px auto ;" src="/static/images/ui/money.png" class="" alt=""/>
<h3 style="font-size:16px" class="oh-404__subtitle">${response.message}</h3>
</div>
</div>`
)
}
if (isBarChartEmpty(dataSet)){
$("#department_canvas_body").html(
`<div style="height: 310px; display:flex;align-items: center;justify-content: center;" class="">
<div style="" class="">
<img style="display: block;width: 70px;margin: 10px auto ;" src="/static/images/ui/no-money.png" class="" alt=""/>
<h3 style="font-size:16px" class="oh-404__subtitle">${response.message}</h3>
</div>
</div>`
)
}else{
department_chart(dataSet,labels)
}
},
error: (error) => {
console.log('Error', error);
@@ -253,17 +297,26 @@ $(document).ready(function(){
},
success: (response) => {
var contract_end = response.contract_end
$("#contract_ending").html("")
$.each(contract_end, function (key,value) {
id=value.contract_id
elem = `<li class='m-3 contract_id' data-id=${id}> ${value.contract_name} </li>`
$("#contract_ending").append(elem)
})
$(".contract-number").html(Object.keys(contract_end).length)
if (contract_end.length!=0){
$("#contract_ending").html("")
$.each(contract_end, function (key,value) {
id=value.contract_id
elem = `<li class='m-3 contract_id' style = "cursor: pointer;" data-id=${id}> ${value.contract_name} </li>`
$("#contract_ending").append(elem)
})
$(".contract-number").html(Object.keys(contract_end).length)
}
else {
$("#contract_ending").html(
`<div style="display:flex;align-items: center;justify-content: center; padding-top:50px" class="">
<div style="" class="">
<img style="display: block;width: 70px;margin: 10px auto ;" src="/static/images/ui/contract.png" class="" alt=""/>
<h3 style="font-size:16px" class="oh-404__subtitle">${response.message}</h3>
</div>
</div>`
)
}
},
error: (error) => {
console.log('Error', error);
@@ -408,7 +461,7 @@ $(document).ready(function(){
$("#department_total").on("click",".department",function(){
department = $(this).children(".department_item").text()
$.ajax({
url: '/payroll/filter-payslip?dashboard=true&department='+department,
url: '/payroll/filter-payslip?dashboard=true&start_date='+$("#monthYearField").val()+'-01&department='+department,
type: "GET",
dataType: "html",
headers: {
@@ -426,8 +479,4 @@ $(document).ready(function(){
});
})
})
})

32
payroll/templates/payroll/allowance/view_allowance.html
View File

@@ -51,28 +51,28 @@
hx-vals="{'view':'card'}"
/>
</div>
<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"
>
{% include 'payroll/allowance/filter_allowance.html' %}
</div>
</div>
<div class="oh-main__titlebar-button-container">
<ul class="oh-view-types ml-2" style="margin-bottom: 0;">
<li class="oh-view-type allowance-view-type" data-view="list">
<a hx-get="{% url 'filter-allowance' %}?view=list" hx-target="#payroll-allowance-container" class="oh-btn oh-btn--view" title='{% trans "List" %}'><ion-icon name="list-outline" role="img" class="md hydrated" aria-label="list outline"></ion-icon></a>
<a hx-get="{% url 'filter-allowance' %}?view=list" hx-target="#payroll-allowance-container" class="oh-btn oh-btn--view {% if request.GET.view == 'list' %} oh-btn--view-active {% endif %}" title='{% trans "List" %}'><ion-icon name="list-outline" role="img" class="md hydrated" aria-label="list outline"></ion-icon></a>
</li>
<li class="oh-view-type allowance-view-type" data-view="card">
<a hx-get="{% url 'filter-allowance' %}?view=card" hx-target="#payroll-allowance-container" class="oh-btn oh-btn--view" title='{% trans "Card" %}'><ion-icon name="grid-outline" role="img" class="md hydrated" aria-label="grid outline"></ion-icon></a>
<a hx-get="{% url 'filter-allowance' %}?view=card" hx-target="#payroll-allowance-container" class="oh-btn oh-btn--view {% if request.GET.view != 'list' %} oh-btn--view-active {% endif %}" title='{% trans "Card" %}'><ion-icon name="grid-outline" role="img" class="md hydrated" aria-label="grid outline"></ion-icon></a>
</li>
</ul>
<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"
>
{% include 'payroll/allowance/filter_allowance.html' %}
</div>
</div>
<div class="oh-btn-group ml-2">
<div>
<a
@@ -147,6 +147,8 @@
newURL = currentURL + separator + "view="+view;
}
history.pushState({}, "", newURL);
$(".oh-btn--view-active").removeClass("oh-btn--view-active")
$(this).children("a").addClass("oh-btn--view-active")
});
$("#filter-allowance").focusout(function (e) {
$("#filterSearch").val($(this).val());

22
payroll/templates/payroll/dashboard.html
View File

@@ -80,9 +80,9 @@
</div>
<div class="oh-btn-group ms-2 mt-3 justify-content-between">
<div>
<label for="monthYearField" class="text-danger fw-bold">{% trans "Select Month and Year:" %}</label>
<input class="oh-select p-3 m-1" type="month" id="monthYearField" name="monthYearField">
<div style = "cursor: pointer;">
<label for="monthYearField" class="text-danger fw-bold" style = "cursor: pointer;">{% trans "Select Month and Year:" %}</label>
<input class="oh-select p-3 m-1" type="month" id="monthYearField" name="monthYearField" style = "cursor: pointer;">
</div>
<div class="oh-main__titlebar-button-container">
@@ -106,7 +106,7 @@
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-6">
<div class="oh-input-group">
<div class="oh-input-group" >
<label class="oh-label">{% trans "End Date" %}</label>
<input class="mb-3 oh-select p-3" type="date" name="end_date" id="end_date">
</div>
@@ -150,10 +150,10 @@
<div class="oh-dashboard__movable-cards row mt-4">
<div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable mb-4">
<div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
<div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
<span class="oh-card-dashboard__title" id="employee-previous"><ion-icon name="caret-back-outline"></ion-icon></span>
<div class="oh-card-dashboard__header oh-card-dashboard__header--divider" style = "cursor: default;">
<span class="oh-card-dashboard__title" id="employee-previous" style = "cursor: pointer;"><ion-icon name="caret-back-outline"></ion-icon></span>
<span class="oh-card-dashboard__title">{% trans "Employee Payslips" %}</span>
<span class="oh-card-dashboard__title float-end" id="payroll-employee-next"><ion-icon name="caret-forward"></ion-icon></span>
<span class="oh-card-dashboard__title float-end" id="payroll-employee-next" style = "cursor: pointer;"><ion-icon name="caret-forward"></ion-icon></span>
</div>
<div class="oh-card-dashboard__body" id="employee_canvas_body">
@@ -161,8 +161,8 @@
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable">
<div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
<div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable" >
<div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent" style = "cursor: default;">
<h6 class="ms-4 m-2 fw-bold">{% trans "Total Payslips Genarated :" %} <b><span class="payslip-number"></span></b></h6>
<h6 class="ms-4 m-2 fw-bold">{% trans "Total Amount :" %} <b>{{currency}} <span class="payslip-amount"></span></b></h6>
<h5 class="ms-4 m-2 fw-bold" style="color:#9C4000">{% trans "Department Total Amount" %}</h5>
@@ -172,7 +172,7 @@
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable">
<div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
<div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent" style = "cursor: default;">
<h4 class="ms-4 m-2 fw-bold text-danger">{% trans "Contracts ending this month" %} <b><span class=""></span></b></h4>
<h6 class="ms-4 fw-bold" >{% trans "Number of contracts expiring this month :" %} <b class="contract-number"></b></h6>
<hr class="line">
@@ -186,7 +186,7 @@
<div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
<span class="oh-card-dashboard__title">{% trans "Department Chart" %}</span>
</div>
<div class="oh-card-dashboard__body" id="department_canvas_body" style="width: 50%; margin: 0 auto;">
<div class="oh-card-dashboard__body" id="department_canvas_body" style="width: 50%; margin: 0 auto;" >
<canvas id="departmentChart"></canvas>
</div>
</div>

6
payroll/templates/payroll/deduction/view_deduction.html
View File

@@ -54,10 +54,10 @@
<div class="oh-main__titlebar-button-container">
<ul class="oh-view-types ml-2" style="margin-bottom: 0;">
<li class="oh-view-type deduction-view-type" data-view="list">
<a hx-get="{% url 'filter-deduction' %}?view=list" hx-target="#payroll-deduction-container" class="oh-btn oh-btn--view" title='{% trans "List" %}'><ion-icon name="list-outline" role="img" class="md hydrated" aria-label="list outline"></ion-icon></a>
<a hx-get="{% url 'filter-deduction' %}?view=list" hx-target="#payroll-deduction-container" class="oh-btn oh-btn--view {% if request.GET.view == 'list' %} oh-btn--view-active {% endif %}" title='{% trans "List" %}'><ion-icon name="list-outline" role="img" class="md hydrated" aria-label="list outline"></ion-icon></a>
</li>
<li class="oh-view-type deduction-view-type" data-view="card">
<a hx-get="{% url 'filter-deduction' %}?view=card" hx-target="#payroll-deduction-container" class="oh-btn oh-btn--view" title='{% trans "Card" %}'><ion-icon name="grid-outline" role="img" class="md hydrated" aria-label="grid outline"></ion-icon></a>
<a hx-get="{% url 'filter-deduction' %}?view=card" hx-target="#payroll-deduction-container" class="oh-btn oh-btn--view {% if request.GET.view != 'list' %} oh-btn--view-active {% endif %}" title='{% trans "Card" %}'><ion-icon name="grid-outline" role="img" class="md hydrated" aria-label="grid outline"></ion-icon></a>
</li>
</ul>
<div class="oh-dropdown" x-data="{open: false}">
@@ -120,6 +120,8 @@
newURL = currentURL + separator + "view="+view;
}
history.pushState({}, "", newURL);
$(".oh-btn--view-active").removeClass("oh-btn--view-active")
$(this).children("a").addClass("oh-btn--view-active")
});
$("#filter-deduction").focusout(function (e) {
$("#filterSearch").val($(this).val());

3
payroll/views/views.py
View File

@@ -489,6 +489,7 @@ def dashboard_employee_chart(request):
"dataset": dataset,
"labels": employee_label,
"employees": list_of_employees,
"message":_("No payslips generated for this month.")
}
return JsonResponse(response)
@@ -577,6 +578,7 @@ def dashboard_department_chart(request):
"dataset": dataset,
"labels": department,
"department_total": department_total,
"message":"No payslips generated for this month."
}
return JsonResponse(response)
@@ -602,6 +604,7 @@ def contract_ending(request):
response = {
"contract_end": ending_contract,
"message":"No contracts ending this month"
}
return JsonResponse(response)

29
templates/dashboard.html
View File

@@ -8,6 +8,9 @@
.oh-card-dashboard--moveable {
padding: 0 10px 20px 10px;
}
.oh-card-dashboard {
cursor: default;
}
</style>
<main>
<div class="oh-wrapper">
@@ -73,7 +76,7 @@
</select>
</div>
<div class="oh-card-dashboard__body">
<canvas id="overAllLeave"></canvas>
<canvas id="overAllLeave" style = "cursor: pointer;"></canvas>
</div>
</div>
</div>
@@ -85,7 +88,7 @@
<span class="oh-card-dashboard__title">{% trans "Hired Candidates" %}</span>
</div>
<div class="oh-card-dashboard__body">
<canvas id="hiredCandidate"></canvas>
<canvas id="hiredCandidate" style = "cursor: pointer;"></canvas>
</div>
</div>
</div>
@@ -95,7 +98,7 @@
<span class="oh-card-dashboard__title">{% trans "Candidate Started Onboarding" %}</span>
</div>
<div class="oh-card-dashboard__body">
<canvas id="onboardCandidate"></canvas>
<canvas id="onboardCandidate" style = "cursor: pointer;"></canvas>
</div>
</div>
</div>
@@ -108,7 +111,7 @@
<span class="oh-card-dashboard__title">{% trans "Daily Attendance Analytic" %}</span>
</div>
<div class="oh-card-dashboard__body">
<canvas id="dailyAnalytic"></canvas>
<canvas id="dailyAnalytic" style = "cursor: pointer;"></canvas>
</div>
</div>
</div>
@@ -121,7 +124,7 @@
<span class="oh-card-dashboard__title">{% trans "Employees Chart" %}</span>
</div>
<div class="oh-card-dashboard__body">
<canvas id="totalEmployees"></canvas>
<canvas id="totalEmployees" style = "cursor: pointer;"></canvas>
</div>
</div>
</div>
@@ -134,7 +137,7 @@
<span class="oh-card-dashboard__title">{% trans "Department Chart" %}</span>
</div>
<div class="oh-card-dashboard__body">
<canvas id="departmentChart"></canvas>
<canvas id="departmentChart" style = "cursor: pointer;"></canvas>
</div>
</div>
</div>
@@ -146,7 +149,7 @@
<span class="oh-card-dashboard__title">{% trans "Gender Chart" %}</span>
</div>
<div class="oh-card-dashboard__body">
<canvas id="genderChart"></canvas>
<canvas id="genderChart" style = "cursor: pointer;"></canvas>
</div>
</div>
</div>
@@ -158,7 +161,7 @@
<span class="oh-card-dashboard__title">{% trans "Recruitment Analytic" %}</span>
</div>
<div class="oh-card-dashboard__body">
<canvas id="recruitmentChart1"></canvas>
<canvas id="recruitmentChart1" style = "cursor: pointer;"></canvas>
</div>
</div>
</div>
@@ -171,7 +174,7 @@
<span class="oh-card-dashboard__title">{% trans "Objective status" %}</span>
</div>
<div class="oh-card-dashboard__body">
<canvas id="objectiveChart"></canvas>
<canvas id="objectiveChart" style = "cursor: pointer;"></canvas>
</div>
</div>
{% endif %}
@@ -183,7 +186,7 @@
<span class="oh-card-dashboard__title">{% trans "Key result status" %}</span>
</div>
<div class="oh-card-dashboard__body">
<canvas id="keyResultChart"></canvas>
<canvas id="keyResultChart" style = "cursor: pointer;"></canvas>
</div>
</div>
</div>
@@ -193,11 +196,11 @@
<div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
<div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
<span class="oh-card-dashboard__title">{% trans "Feedback Status" %}</span>
<span class="oh-card-dashboard__title float-end" id="feedback-status-chart"><ion-icon
<span class="oh-card-dashboard__title float-end" id="feedback-status-chart" style = "cursor: pointer;"><ion-icon
name="caret-forward"></ion-icon></span>
</div>
<div class="oh-card-dashboard__body">
<canvas id="feedbackChart"></canvas>
<canvas id="feedbackChart" style = "cursor: pointer;"></canvas>
</div>
</div>
</div>
@@ -218,7 +221,7 @@
</ul>
</div>
<div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent mt-3">
<div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
<div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
<span class="oh-card-dashboard__title">{% trans "On Leave" %}</span>
</div>

3
templates/filter_tags.html
View File

@@ -6,6 +6,9 @@
class="oh-filter-tag-container"
style="position: fixed; top: 150; z-index: 9999"
>
{% if filter_dict %}
<span class="oh-filter-tag">{% trans "Applied Filters :" %}</span>
{% endif %}
{%for field,values in filter_dict.items %} {%if values %}
{% with translation_field=field|filter_field %}
<span class="oh-filter-tag filter-field" data-x-field="{{field}}">