Skip to content

Instantly share code, notes, and snippets.

@toanalien

toanalien/report-home-v5.html

Created May 2, 2018 07:14
Show Gist options
  • Save toanalien/6a86b1fa1e3380bed0f930169b1eb76e to your computer and use it in GitHub Desktop.
Save toanalien/6a86b1fa1e3380bed0f930169b1eb76e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
report-home-v5.html
{% extends "bsc_base.html" %}
{% load i18n l10n user_tags %}
<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--<meta charset="UTF-8">-->
<!--<title>{% trans "Export data" %}</title>-->
{% block title %}{% blocktrans %}Export data{% endblocktrans %}{% endblock %}
{% block content %}
<!--<link rel="stylesheet" href="{{ STATIC_URL }}bower_components/bootstrap/dist/css/bootstrap.min.css">-->
<!--{# <script src="{{ STATIC_URL }}bower_components/jquery/dist/jquery.js"></script>#}-->
<!--<script src="{{ STATIC_URL }}bower_components/jquery/dist/jquery.min.js"></script>-->
<!--<script src="{{ STATIC_URL }}bower_components/bootstrap/dist/js/bootstrap.min.js"></script>-->
<script src="{{ STATIC_URL }}v5/bower_components/jquery-loading/dist/jquery.loading.min.js"
type="text/javascript"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.autocomplete.js"></script>
<link href="{{ STATIC_URL }}v5/bower_components/jquery-loading/dist/jquery.loading.min.css" rel="stylesheet">
{##}
{# <link href="{{ STATIC_URL }}js/bootstrap-tagsinput/src/bootstrap-tagsinput.css" rel="stylesheet">#}
{# <script src="{{ STATIC_URL }}js/bootstrap-tagsinput/src/bootstrap-tagsinput.js" type="text/javascript"></script> remove because not use#}
<script src="{{ STATIC_URL }}select/select2.min.js"></script>
{# <script src="http://select2.github.io/select2/select2-3.5.3/select2.js?ts=2015-08-29T20%3A09%3A48%2B00%3A00"></script>#}
<link rel="stylesheet" href="{{ STATIC_URL }}select/select2.css">
<script type="text/javascript" src="{{ STATIC_URL }}v5/bower_components/vue-router/dist/vue-router.min.js"></script>
<script src="{{ STATIC_URL }}js/requestcenter.js?version={{ settings.VERSION }}" type="text/javascript"></script>
<!-- for excel -->
<script type="text/javascript"
src="{{ STATIC_URL }}js/exceljs.min.js"></script>
<script type="text/javascript"
src="{{ STATIC_URL }}js/Blob.js"></script>
<script type="text/javascript"
src="{{ STATIC_URL }}js/FileSaver.js"></script>
<script src="{{ STATIC_URL }}js/async.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/tree-init.js?v={{ settings.VERSION }}"></script>
<!-- for excel -->
<!-- import CSS -->
<!-- import JavaScript -->
<script src="{{ STATIC_URL }}element-ui/index.js"></script>
<link rel="stylesheet" href="{{ STATIC_URL }}element-ui/index.css">
<link href="{{ STATIC_URL }}fonts/open_sans/open_sans.css" rel="stylesheet">
</head>
<body>
<style type="text/css">
.select2-container.form-control{
padding: 0!important;
}
.select2-container.form-control>.select2-choice{
height: 100%!important;
border-radius: 0!important;
}
.select2-container.form-control>.select2-choices{
height: 100%!important;
border-radius: 0!important;
}
.title {
text-align: center;
font-size: 20px;
}
.search-status{
color: green;
}
.search-error{
color: red;
}
.gly-spin {
-webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
@-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
}
}
@-o-keyframes spin {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(359deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
.btn-export{
width:125px;
height:34px;
background: #008b8b;
font-size:14px;
color:#ffffff;
border-radius:3px;
margin-top:0px;
}
.btn-export:hover, .btn-export:focus{
background-color: #007777;
color:#ffffff;
}
.alert-loading{
top:65px;
width:334px;
height:44px;
position:absolute;
border-radius: 3px;
background-color: #e1ebf4;
color:#337ab7;
z-index:9999;
font-size:14px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
.alert-loading i{
font-size:20px;
margin-right:12px;
float:left;margin-top:-2px;
}
.alert-no-excore{
top:65px;
width:620px;
height:44px;
position:absolute;
border-radius: 3px;
background-color: #fae5e4;
color:#d9534f;
z-index:9999;
font-size:14px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
.alert-no-excore i{
font-size:20px;
margin-right:12px;
float:left;margin-top:-2px;
}
.alert-no-surbodinate{
top:65px;
width:334px;
height:44px;
position:absolute;
border-radius: 3px;
background-color: #fae5e4;
color:#d9534f;
z-index:9999;
font-size:14px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
.alert-no-surbodinate i{
font-size:20px;
margin-right:12px;
float:left;margin-top:-2px;
}
.alert-more-4-quarter{
top:65px;
width: 370px;
height:44px;
position:absolute;
border-radius: 3px;
background-color: #fdf1dd;
color:#f5a623;
z-index:9999;
font-size:14px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
.alert-more-4-quarter i{
font-size:20px;
margin-right:12px;
float:left;margin-top:-2px;
}
.btn-select{
width: 125px;
height: 40px;
border-radius:3px;
background: white;
border:1px solid #ccc;
}
#month .dropdown-menu li a{
font-size:14px;
line-height: 40px;
height:40px;
}
#month .open button{
border: 1px solid #008b8b;
}
.el-tabs__content{
overflow: unset;
}
#list_minus label, #list_team label, #list_personal label{
font-size:15px;
color:#565656;
font-weight: normal;
}
.stylish-input-group .input-group-addon{
background: white !important;
border-right:0px !important;
}
.stylish-input-group .form-control{
box-shadow:0 0 0;
border-color:#ccc;
}
.stylish-input-group button{
border:0;
background:transparent;
padding: 0px;
}
.img-circle{
width:40px;
height:40px;
float:left;
margin-right:10px;
}
.name-personal{
font-weight: bold;
font-size: 14px;
color: #333333;
}
.position-personal{
font-size:12px;
color:#333333;
}
.select2-container .select2-choice{
line-height:40px;
border:none;
}
.select2-container.form-control>.select2-choice{
background:white;
}
.select2-container .select2-choice .select2-arrow{
display:none;
}
.radio, .checkbox {
margin-top: 5px;
margin-bottom: 18px;
}
input[type=checkbox]:checked {
background-color: #a77e2d !important;
color: #ffffff !important;
}
#search_employee{
border-left:0px !important;
}
#search_employee:focus{
border:1px solid #008b8b;
}
#search_employee2{
border-left:0px !important;
}
#search_employee2:focus{
border:1px solid #008b8b;
}
#search_employee3{
border-left:0px !important;
}
#search_employee3:focus{
border:1px solid #008b8b;
}
#table_list_employees .modal-body table thead tr th{
background:#fff;
color:#666666;
border:none;
}
#table_list_employees .modal-body table tbody tr td{
line-height:24px;
color:#333333;
border-top:0.5px solid #ccc;
}
/*.list-group-item{*/
/*border-top: none !important;*/
/*}*/
/*.list-group-item:first-child {*/
/*border-top: 1px solid #ccc !important;*/
/*}*/
a.list-group-item:hover, a.list-group-item:focus{
background-color: #f9f9f9;
}
.el-tabs__item.is-active{
color: #008b8b;
font-weight:bold;
}
.el-tabs__active-bar{
background-color: #008b8b;
bottom:-1px;
}
.el-tabs__item{
padding-left:0px;
padding-right:30px;
height:39px;
}
.el-tabs__nav-scroll{
border-bottom: 2px solid #ABABAB;
height: 39px;
overflow: unset;
}
.list-group{
border-radius:3px;
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.2)
}
.list-group-item{
border:none
}
#app{
font-family: 'Open Sans', sans-serif;
}
.open>.dropdown-menu {
padding-top: 0px;
padding-bottom: 0px;
}
#month .dropdown-menu li a:hover {
background: #f9f9f9;
color:#008b8b;
}
.loading_list{
display:none;
}
.loading_list a:hover{
background: white;
}
.no-data{
display:none;
}
.no-data a:hover{
background:#fff;
cursor:unset;
}
.no-data a{
color:#ccc;
}
.arrow-up{
width: 8px;
height: 8px;
margin-left: 15px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
margin-bottom:-4px;
box-shadow: 0px 0px 4px 0 rgba(0, 0, 0, 0.2);
}
.form-group {
margin-bottom: 5px;
}
#container{
background: #f9f9f9;
position: absolute;
top: 0;
width: 100%;
bottom: 0;
}
</style>
<div id="app" v-show="!simple" style="margin-top:10px;">
<div class="alert alert-loading" style="display:none">
<i class="material-icons">info</i><p style="float:left;margin-top:-3px;"> {% trans 'Processing ' %}</p>
</div>
<div class="alert alert-no-surbodinate" style="display:none">
<i class="material-icons">cancel</i><p style="float:left;margin-top:-3px;"> {% trans 'No subordinate!' %} </p>
</div>
<div class="alert alert-no-excore" style="display:none">
<i class="material-icons">cancel</i><p style="float:left;margin-top:-3px;"> {% trans 'No subordinates or no extra scores in chosen months above' %}</p>
</div>
<div class="alert alert-more-4-quarter" style="display:none">
<i class="material-icons">error</i><p style="float:left;margin-top:-3px;"> {% trans 'Cannot choose more than 4 evaluation period' %}</p>
</div>
<div class="container" style="width:890px;">
<h4 style="font-weight:bold;text-transform: uppercase;margin-left:-10px;font-size:20px;margin-bottom:20px;">{% trans "Export Report" %}</h4>
<div class="row" style="border-radius:0px;background:#fff;box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);position:absolute;top:110px;width:890px;bottom:0px">
<div class="col-md-12">
<el-tabs v-model="activeTab" style="font-size:15px;padding:20px 20px;" @tab-click="tabs_change" >
<el-tab-pane label="{% trans 'List Employees KPI' %}" name="first" id="list_personal">
<div style=";margin-bottom:35px;margin-right:110px;margin-top:20px">
<div class="form-group">
<label for="usr">{% trans 'Search employee' %}:</label>
<div id="imaginary_container" style="margin-bottom:10px">
<div class="input-group stylish-input-group">
<span class="input-group-addon" style="height: 40px;">
<button type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
<input type="text" class="form-control" placeholder="{% trans 'Input employee email or name'%}" style="height: 40px;border-left:0px;padding-left:0px;color:#333333" v-model="query" v-on:input="search_user_limit()" id="search_employee">
</div>
</div>
</div>
<div class="list-group loading_list">
<a href="#" class="list-group-item" style="padding-bottom: 1px;height:48px;padding-top:13px;text-align:center;">
<i class="fa fa-spinner"></i>
</a>
</div>
<div class="arrow-up" v-if="user_list_search.length > 0"></div>
<div class="list-group" v-if="user_list_search.length > 0" style="max-height:240px;overflow: auto;margin-bottom:10px;z-index:9999;position:absolute;width:710px;">
<a href="#" class="list-group-item" style="padding-bottom:1px;" v-for="(user, index) in user_list_search" @click="position_to_display=index;search_user(user.user_id)">
<img :src="user.avatar" class="img-circle">
<span class="name-personal" v-if="user.display_name.length>0">${ user.display_name }$</span>
<span class="name-personal" v-if="user.display_name.length==0" style="padding:10px;"> </span>
<p class="position-personal" v-if="user.position != ''">${ user.position }$ | ${ user.email }$ </p>
<p class="position-personal" v-if="user.position == ''">${ user.email }$ </p>
</a>
</div>
<div class="list-group no-data">
<a href="#" class="list-group-item" style="padding-bottom: 1px;height:48px;padding-top:13px;text-align:center">
{% trans "No data found" %}
</a>
</div>
<div id="select-quarter" class="" v-if="user_profile">
<div class="form-group" style="text-align:left">
<label for="">{% trans 'Select evaluation period' %}</label>
<div style="font-size:15px; max-height: 155px; overflow: auto; border: 1px solid grey; padding: 10px; padding-bottom:0px; border-radius: 4px;color:#333333">
<div class="checkbox" v-for="quarter in quarter_period">
<label>
<input type="checkbox" v-bind:value="quarter.id" v-model="selected_quarter">
#${quarter.id }$ ${quarter.quarter_name}$ {% trans "DATE CREATED" %}
${quarter.created_at | formatDate}$
</label>
</div>
</div>
</div>
</div>
<div class="form-group text-left">
<button class="btn btn-export" v-on:click="get_simple_kpi()"
:disabled="(selected_quarter.length == 0 || selected_quarter.length>4) ? true:false" style="margin-top:15px;">{% trans 'Export Report' %}
</button>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="{% trans 'List Group KPI' %}" name="second" id="list_team">
<div style=";margin-bottom:35px;margin-right:110px;margin-top:20px">
<div class="form-group">
<label for="usr">{% trans 'Search manager' %}:</label>
<div id="imaginary_container" style="margin-bottom:10px">
<div class="input-group stylish-input-group">
<span class="input-group-addon" style="height: 40px;">
<button type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
<input type="text" class="form-control" placeholder="{% trans 'Input employee email or name'%}" style="height: 40px;border-left:0px;padding-left:0px;color:#333333" v-model="query" v-on:input="search_user_limit()" id="search_employee2" >
</div>
</div>
</div>
<div class="list-group loading_list">
<a href="#" class="list-group-item" style="padding-bottom: 1px;height:48px;padding-top:13px;text-align:center;">
<i class="fa fa-spinner"></i>
</a>
</div>
<div class="arrow-up" v-if="user_list_search.length > 0"></div>
<div class="list-group" v-if="user_list_search.length > 0" style="max-height:240px;overflow: auto;;margin-bottom:10px;z-index:9999;position:absolute;width:710px;">
<a href="#" class="list-group-item" style="padding-bottom:1px;" v-for="(user, index) in user_list_search" @click="position_to_display=index;getTeamMember(user.user_id)">
<img :src="user.avatar" class="img-circle">
<span class="name-personal" v-if="user.display_name.length>0">${ user.display_name }$</span>
<span class="name-personal" v-if="user.display_name.length==0" style="padding:10px;"> </span>
<p class="position-personal" v-if="user.position != ''">${ user.position }$ | ${ user.email }$ </p>
<p class="position-personal" v-if="user.position == ''">${ user.email }$ </p>
</a>
</div>
<div class="list-group no-data">
<a href="#" class="list-group-item" style="padding-bottom: 1px;height:48px;padding-top:13px;text-align:center;">
{% trans "No data found" %}
</a>
</div>
<div id="listTeamMember" class="" v-if="teamMember.length > 0" style="margin-bottom:5px;margin-top:15px;" >
<a data-toggle="modal" data-target="#table_list_employees" style="cursor:pointer;">{% trans 'View list employees' %}</a>
<!--<div class="form-group" style="text-align:left">-->
<!--<label for="">{% trans "List of employees of" %} [ ${ mng_display_name }$ ]:</label><br>-->
<!--<div style="font-size:15px; max-height: 300px; overflow: auto; border:1px solid gray; border-radius: 4px;">-->
<!--<ol>-->
<!--<li v-for="member in teamMember">-->
<!--${member.display_name}$ - ${member.email}$-->
<!--</li>-->
<!--</ol>-->
<!--</div>-->
<!--</div>-->
<!--<div class="form-group text-right">-->
<!--<button class="btn btn-success "-->
<!--v-on:click="get_simple_kpi_team()">{% trans "Export department KPI" %}</button>-->
<!--</div>-->
</div>
<button class="btn btn-export" v-on:click="get_simple_kpi_team()" :disabled="teamMember.length > 0 ? false : true" style="margin-top:15px;">{% trans 'Export Report' %}</button>
</div>
</el-tab-pane>
<el-tab-pane label="{% trans 'List Extra Scores' %}" name="third" id="list_minus">
<div style=";margin-bottom:35px;margin-right:110px;margin-top:20px">
<div class="form-group">
<label for="usr">{% trans 'Search manager' %}:</label>
<div id="imaginary_container" style="margin-bottom:10px;">
<div class="input-group stylish-input-group">
<span class="input-group-addon" style="height: 40px;">
<button type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
<input type="text" class="form-control" placeholder="{% trans 'Input employee email or name'%}" style="height: 40px;border-left:0px;padding-left:0px;color:#333333" v-model="query" v-on:input="search_user_limit()" id="search_employee3" >
</div>
</div>
</div>
<div class="list-group loading_list">
<a href="#" class="list-group-item" style="padding-bottom: 1px;height:48px;padding-top:13px;text-align:center;">
<i class="fa fa-spinner"></i>
</a>
</div>
<div class="arrow-up" v-if="user_list_search.length > 0"></div>
<div class="list-group" v-if="user_list_search.length > 0" style="max-height:240px;overflow: auto;margin-bottom:10px;z-index:9999;position:absolute;width:710px;">
<a href="#" class="list-group-item" style="padding-bottom:1px;" v-for="(user, index) in user_list_search" @click="position_to_display=index;getExscore(user.user_id)">
<img :src="user.avatar" class="img-circle">
<span class="name-personal" v-if="user.display_name.length>0">${ user.display_name }$</span>
<span class="name-personal" v-if="user.display_name.length==0" style="padding:10px;"> </span>
<p class="position-personal" v-if="user.position != ''">${ user.position }$ | ${ user.email }$ </p>
<p class="position-personal" v-if="user.position == ''">${ user.email }$ </p>
</a>
</div>
<div class="list-group no-data">
<a href="#" class="list-group-item" style="padding-bottom: 1px;height:48px;padding-top:13px;text-align:center;">
{% trans "No data found" %}
</a>
</div>
<div class="form-group" id="month" v-if="Exscore.length > 0">
<label for="usr">{% trans 'Choose month:' %}</label>
<div class="dropdown" style="margin-top:5px;" >
<button class="btn btn-select dropdown-toggle" type="button" data-toggle="dropdown"> ${ cache_month_excore }$
<span class="caret" style="margin-left:30px;"></span></button>
<ul class="dropdown-menu">
<li><a href="#" @click="month_excore = 1;cache_month_excore = quarter.month_1_name;getExscore(user_list_search[position_to_display].user_id)">${quarter.month_1_name}$</a></li>
<li><a href="#" @click="month_excore = 2;cache_month_excore = quarter.month_2_name;getExscore(user_list_search[position_to_display].user_id)">${quarter.month_2_name}$</a></li>
<li><a href="#" @click="month_excore = 3;cache_month_excore = quarter.month_3_name;getExscore(user_list_search[position_to_display].user_id)">${quarter.month_3_name}$</a></li>
</ul>
</div>
</div>
<button class="btn btn-export" :disabled="(Exscore.length > 0 && organization.exscore)?false:true" v-on:click="exportExcelExscore()" style="margin-top:15px;">{% trans 'Export Report' %}</button>
</div>
</el-tab-pane>
<el-tab-pane label="{% trans 'Strategy Map' %}" name="fourth">
<div style=";margin-bottom:35px;">
<p style="margin-top:30px; margin-bottom:20px;color:#565656">{% trans 'Export Strategy map report' %}</p>
<button class="btn btn-export" v-on:click="getGroup()">{% trans 'Export Report' %}</button>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
<!-- Modal -->
<div id="table_list_employees" class="modal fade" role="dialog">
<div class="modal-dialog" style="width:665px;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="border-bottom:none">
<button type="button" class="close" data-dismiss="modal"> <i class="material-icons">highlight_off</i></button>
<h4 class="modal-title" style="padding: 10px 0px 0px 20px;font-weight:bold;font-size:16px;">{% trans "List employees" %}</h4>
</div>
<div class="modal-body" style="max-height:240px;overflow: auto; padding: 0px 50px 0px 50px;">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>{% trans "Full name" %}</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr v-for="(member, index) in teamMember">
<td>${ index + 1}$</td>
<td>${member.display_name}$</td>
<td>${member.email}$</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer" style="border-top:0px;">
<!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
</div>
</div>
</div>
</div>
</div>
<script>
String.prototype.nextChar = function (i) {
function nextChar(c) {
var u = c.toUpperCase();
if (same(u, 'Z')) {
var txt = '';
var i = u.length;
while (i--) {
txt += 'A';
}
return (txt + 'A');
} else {
var p = "";
var q = "";
if (u.length > 1) {
p = u.substring(0, u.length - 1);
q = String.fromCharCode(p.slice(-1).charCodeAt(0));
}
var l = u.slice(-1).charCodeAt(0);
var z = nextLetter(l);
if (z === 'A') {
return p.slice(0, -1) + nextLetter(q.slice(-1).charCodeAt(0)) + z;
} else {
return p + z;
}
}
}
function nextLetter(l) {
if (l < 90) {
return String.fromCharCode(l + 1);
}
else {
return 'A';
}
}
function same(str, char) {
var i = str.length;
while (i--) {
if (str[i] !== char) {
return false;
}
}
return true;
}
var n = i | 1;
var char = this;
while (n--) {
char = nextChar(char);
}
return char;
};
String.prototype.prevChar = function (i) {
var n = i | 1;
return String.fromCharCode(this.charCodeAt(0) - n);
};
$(document).ready(function () {
// setTimeout(function () {
// var show_status=function(input){
// var $search_status=$(input).closest('.input-group').parent().find('.search-status');
// $search_status.show();
// }
// var hide_status=function(input){
// var $search_status=$(input).closest('.input-group').parent().find('.search-status');
// $search_status.hide();
// }
// var formatResult=function(item) {
// var markup = '<div>'+item.value+'</div>';
// return markup;
// };
// var general_conf={
// ajax: {
// url: "{% url "api_v2.searchable_peoplelist" %}" + '?all_sublevel=1&limit=10',
// dataType: 'json',
// // Additional AJAX parameters go here; see the end of this chapter for the full code of this example
// quietMillis: 250,
// data: function (term, page) {
// return {
// search_term: term, // search term
// };
// },
// results: function (data, page) { // parse the results into the format expected by Select2.
// // since we are using custom formatting functions we do not need to alter the remote JSON data
// return { results: data.data.suggestions };
// },
// cache: true,
//
// },
// formatResult: formatResult,
// formatSelection:formatResult,
// minimumInputLength: 2,
// placeholder:"{% trans 'Type name or email'%}..." ,
// //multiple:true,
// //maximumSelectionSize:1,
// formatNoMatches:"{% trans 'No matches' %}",
// formatSearching:"{% trans 'Searching...' %}",
// formatInputTooShort:"{% trans 'Search input too short' %}",
// formatInputTooLong: "{% trans 'Search input too long' %}",
// };
// var conf1=$.extend({}, general_conf, {
//
// });
// var conf2=$.extend({}, general_conf, {
//
// });
// var conf3=$.extend({}, general_conf, {
//
// });
//
// var selecting_handler1=function(e) {
// var that=this;
// console.log ("selecting val="+ e.val+" choice="+ JSON.stringify(e.choice));
// self.user_id=e.choice.user_id;//may not use anymore
// // move from on change event
// show_status(that);
// var jqxhr1=self.search_user(e.choice.user_id);
// var jqxhr2=self.get_quarter_period();
// $.when(jqxhr1, jqxhr2).done(function(jqxhr1, jqxhr2) {
// // Handle both XHR objects
// {#alert("all complete");#}
// hide_status(that);
// });
// };
// var selecting_handler2=function(e) {
// var that=this;
// self.user_id=e.choice.user_id;//may not use anymore
// self.mng_display_name=e.choice.value;
// show_status(that);
// //https://caolan.github.io/async/docs.html
// /*async.waterfall([
// function (cb) {
// self.get_quarter_period(cb);
// },
// function (cb) {
// self.getTeamMember(e.choice.user_id);
// }
// ],function (err, result) {
// // result now equals 'done'
// hide_status(this);
// }
// ); */
// //https://www.htmlgoodies.com/beyond/javascript/making-promises-with-jquery-deferred.html
// var getTeamMember=function(){
// $('.alert-no-surbodinate').hide();
// var jqxhr = self.getTeamMember(e.choice.user_id);
//
// jqxhr.done(function(res){
// {#if(res.data.length==0){#}
// if($.isEmptyObject(res.data)){
// $('.alert-no-surbodinate').show();
// }
// });
// }
// jqxhr1=self.get_quarter_period();
// jqxhr1.then(getTeamMember).then(function(){
// hide_status(that);
// });
//
//
// };
// var selecting_handler3=function(e) {
// var that=this;
// self.user_id_manager=e.choice.user_id;//may not use anymore
//
// show_status(that);
// self.selected_user_manager = true;
// jqxhr=self.getExscore(e.choice.user_id);
//
// jqxhr.done(function(){
// hide_status(that);
// });
//
//
// };
//
// $('#input_single_user').select2(conf1).on("select2-selecting", selecting_handler1);
// $('#input_team_manager').select2(conf2).on("select2-selecting", selecting_handler2);
// $('#input_exscore_manager').select2(conf3).on("select2-selecting", selecting_handler3);
// }, 100);
$("#search_employee").focusin(function() {
$(".stylish-input-group .input-group-addon").css('border', '1px solid #008b8b');
})
$("#search_employee").focusout(function() {
$(".stylish-input-group .input-group-addon").css('border', '1px solid #ccc');
})
$("#search_employee2").focusin(function() {
$(".stylish-input-group .input-group-addon").css('border', '1px solid #008b8b');
})
$("#search_employee2").focusout(function() {
$(".stylish-input-group .input-group-addon").css('border', '1px solid #ccc');
})
$("#search_employee3").focusin(function() {
$(".stylish-input-group .input-group-addon").css('border', '1px solid #008b8b');
})
$("#search_employee3").focusout(function() {
$(".stylish-input-group .input-group-addon").css('border', '1px solid #ccc');
})
});
const router = new VueRouter();
var app = new Vue({
el: '#app',
router: router,
watch: {
selected_quarter: function (val) {
if (val.length > 4) {
$(".alert-more-4-quarter").show();
setTimeout(function(){ $(".alert-more-4-quarter").hide();
}, 3000);
val.pop();
}
},
},
data: {
activeTab: 'first',
user_list_sub: [],
teamMember: [],
Exscore: [],
organization: '',
current_quarter: null,
simple: false,
groups: [],
kpis: {},
user_profile: null,
user_kpi: null,
user_id: '',
user_id_manager: '',
mng_display_name:'',
user_list: [],
quarter_period: [],
selected_quarter: [],
query: '',
position_to_display: '',
categories: ['financial', 'customer', 'internal', 'learninggrowth'],
translate: {
'financial': 'TÀI CHÍNH',
'customer': 'KHÁCH HÀNG',
'internal': 'QUY TRÌNH',
'learninggrowth': 'HỌC TẬP VÀ PHÁT TRIỂN'
},
export_search: false,
debug: false,
month: null,
cache_month_excore: '',
translate_2: {
'Full name': '{% trans "Full name" %}',
'Employee Code': '{% trans "Employee Code" %}',
'Code KPI': '{% trans "Code KPI" %}',
'Objectives': '{% trans "Objectives" %}',
'Weighting score': '{% trans "Weighting score" %}',
'Weighting ratio': '{% trans "Weighting ratio" %}',
'KPI': 'KPI',
'Reason Delay KPI': '{% trans "Reason Delay KPI" %}',
'Assign to': '{% trans "Assign to" %}',
'Sub- weighting score': '{% trans "Sub- weighting score" %}',
'Sub- weighting ratio': '{% trans "Sub- weighting ratio" %}',
'Unit': '{% trans "Unit" %}',
'Measurement method': '{% trans "Measurement method" %}',
'Operator': '{% trans "Operator" %}',
'Target': '{% trans "Target" %}',
'Result': '{% trans "Result" %}',
'Performance': '{% trans "Performance" %}',
'FULL LIST OF KPIs': '{% trans "FULL LIST OF KPIs" %}',
'FULL LIST OF BACKUP KPIs': '{% trans "FULL LIST OF BACKUP KPIs" %}',
'Score': '{% trans "Score" %}',
'Total': '{% trans "Total" %}',
'Language': '{% trans "English" %}',
},
quarter: '',
month_excore: 1,
selected_user_manager: false,
user_list_search: [],
quarter_score: null
},
delimiters: ['${', '}$'],
created: function () {
self = this;
self.getCurrentQuarter();
console.log('run this')
user_id = this.$route.query.user_id;
export_search = this.$route.query.export_search;
month = this.$route.query.month;
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
if (isNumber(month)) self.month = month;
if (export_search === undefined) {
if (user_id === undefined) {
<!--self.get_user_list();-->
} else {
self.simple = true;
// console.log('this 3++ ===')
async.waterfall([
function (cb) {
self.search_user(user_id, cb);
// console.log(' ===')
},
function (cb) {
self.getOrg(cb);
},
function (cb) {
self.get_quarter_period(cb);
},
function (cb) {
self.get_simple_kpi(true, self.month, cb);
}
])
}
}
else {
self.export_search = true;
search_terms = this.$route.query.q;
async.waterfall([
function (cb) {
self.get_quarter_period(cb);
},
function (cb) {
self.render_search_kpi(true, search_terms, cb);
}
])
}
if (!self.organization) {
self.getOrg();
self.getCurrentQuarter();
}
console.log(self.user_list);
},
methods: {
tabs_change: function(tab, event) {
self.user_list_search = [];
self.query = '';
// self.quarter = [];
self.quarter_period = [];
self.user_profile = null;
self.teamMember = [];
$(".no-data").hide();
},
search_user_limit: function() {
$(".loading_list").show();
if(self.query.length > 0){
cloudjetRequest.ajax({
method: "GET",
dataType: 'json',
url: "{% url "api_v2.searchable_peoplelist" %}" + '?all_sublevel=1&limit=10&search_term='+self.query,
success: function (data) {
self.user_list_search = data.suggestions;
self.quarter_period = [];
self.user_profile = null;
if(self.user_list_search < 1) {
$(".no-data").show();
}else{
$("#list_personal .list-group").show();
$("#list_team .list-group").show();
$("#list_minus .list-group").show();
$(".arrow-up").show();
}
$(".loading_list").hide();
}
})
}else{
$(".no-data").hide();
$(".loading_list").hide();
self.user_list_search = [];
}
},
get_current_quarter: function () {
self = this;
cloudjetRequest.ajax({
method: "GET",
url: "/api/quarter/?get_current_quarter=yes",
success: function (data) {
self.current_quarter = data;
}
})
},
getOrg: function () {
self = this;
cloudjetRequest.ajax({
method: "GET",
url: "/api/organization",
success: function (data) {
if (data) {
self.organization = data;
}
},
error: function () {
}
});
},
get_list_sub: function (id) {
self = this;
cloudjetRequest.ajax({
method: "GET",
url: "/api/v2/user/"+id+"/subodinates/",
success: function (data) {
if (data) {
self.user_list_sub = data;
}
},
error: function () {
}
});
},
get_simple_kpi_team: function () {
self = this;
var wb = new ExcelJS.Workbook();
wb.creator = 'Cloudjet';
/* fill user info*/
formatStruct = {
header: {
alignment: {
vertical: 'middle',
horizontal: 'center',
wrapText: true
},
font: {
name: 'Arial',
size: 12,
color: {
argb: 'FFFFFFFF'
},
bold: true
},
fill: {
type: 'pattern',
pattern: 'solid',
bgColor: {
argb: 'FF2a7878'
},
fgColor: {
argb: 'FF2a7878'
}
}
}
};
var headerStruct = {
row: '9',
height: 40,
columns: [
{
id: 'A',
text: '',
uniname: '',
width: '0.4'
}, {
id: 'B',
text: self.translate_2['Code KPI'],
uniname: 'kpi_id',
width: '8.5'
}, {
id: 'C',
text: self.translate_2['Objectives'],
uniname: 'kpi',
width: '45'
}, {
id: 'D',
text: self.translate_2['Weighting score'],
uniname: 'weight',
width: '8.5'
}, {
id: 'E',
text: self.translate_2['Weighting ratio'],
uniname: '',
width: '8.5'
}, {
id: 'F',
text: 'KPI',
uniname: 'name',
width: '45'
}, {
id: 'G',
text: self.translate_2['Assign to'],
uniname: 'owner_email',
width: '30'
}, {
id: 'H',
text: self.translate_2['Sub- weighting score'],
uniname: 'weight',
width: '8.5'
}, {
id: 'I',
text: self.translate_2['Sub- weighting ratio'],
uniname: '',
width: '8.5'
}, {
id: 'J',
text: self.translate_2['Sub- weighting unit'],
uniname: 'unit',
width: '8.5'
}, {
id: 'K',
text: self.translate_2['Measurement method'],
uniname: 'current_goal',
width: '30'
}, {
id: 'L',
text: self.translate_2['Operator'],
uniname: 'operator',
width: '8.5'
}],
format: 'header'
};
var structMonthData = {
1: {
1: ['M', 'N', 'O', 'P'],
2: ['Q', 'R', 'S', 'T'],
3: ['U', 'V', 'W', 'X']
},
2: {
1: ['Y', 'Z', 'AA', 'AB'],
2: ['AC', 'AD', 'AE', 'AF'],
3: ['AG', 'AH', 'AI', 'AJ']
},
3: {
1: ['AK', 'AL', 'AM', 'AN'],
2: ['AO', 'AP', 'AQ', 'AR'],
3: ['AS', 'AT', 'AU', 'AV']
},
4: {
1: ['AW', 'AX', 'AY', 'AZ'],
2: ['BA', 'BB', 'BC', 'BD'],
3: ['BE', 'BF', 'BG', 'BH']
}
};
// $('body').loading({stoppable: true, message: '{% trans "Loading..." %}'});
$('.alert-loading').show();
var quarter_kpi = {};
async.waterfall([
function (cb) {
self.get_current_quarter();
cb();
},
async.apply(function (teamMember, cb1) {
async.map(teamMember, function (member, cb2) {
var ws = wb.addWorksheet(member.display_name);
var totalVal = {};
function setNumFormat(cell, format) {
if (cell && format) {
ws.getCell(cell).numFmt = format;
}
}
function setWidthCol(col, width) {
if (col && width) ws.getColumn(col).width = width;
}
function setCellVal(cell, value, notWrap) {
if (cell && value)
ws.getCell(cell).value = value;
if (notWrap == null)
ws.getCell(cell).alignment = {wrapText: true};
else if (notWrap == true)
ws.getCell(cell).alignment = {wrapText: false};
}
function setCellFormat(cell, format) {
cell = ws.getCell(cell);
if (format) {
if (format.hasOwnProperty('alignment')) {
cell.alignment = format.alignment;
}
if (format.hasOwnProperty('font')) {
cell.font = format.font;
}
if (format.hasOwnProperty('fill')) {
cell.fill = format.fill;
}
if (format.hasOwnProperty('border')) {
cell.border = format.border;
}
}
}
function setFormatRange(fromCol, toCol, fromRow, toRow, format) {
fromCol = fromCol.charCodeAt(0);
toCol = toCol.charCodeAt(0);
for (var i = fromCol; i <= toCol; i++) {
for (var j = fromRow; j <= toRow; j++) {
setCellFormat(String.fromCharCode(i) + j, format);
}
}
}
function fillQuarterData(unique_key, kpi_id, kpi_weight, currentRow, quarter_kpi, is_child, parent_weighted_weight, child_weighted_weight) {
if (is_child) {
quarter_kpi.forEach(function (paKpi, index2) {
kpi = $.grep(paKpi.children, function (e) {
return e.unique_key == unique_key && e.name == kpi_id;
});
_i = 1;
if (kpi.length == 1) {
console.log(kpi);
for (var k = 1; k <= 3; k++) {
setCellVal(structMonthData[_i][k][0] + currentRow, kpi[0]['month_' + k + '_target']);
setCellVal(structMonthData[_i][k][1] + currentRow, kpi[0]['month_' + k]);
setCellVal(structMonthData[_i][k][2] + currentRow, kpi[0]['month_' + k + '_score'] / 100);
setCellVal(structMonthData[_i][k][3] + currentRow, (kpi[0]['month_' + k + '_score'] * child_weighted_weight) / 100);
setNumFormat(structMonthData[_i][k][3] + currentRow, '0%');
setNumFormat(structMonthData[_i][k][2] + currentRow, '0%');
if (!totalVal['total_weighted_score_' + (_i * k).toString()]) {
totalVal['total_weighted_score_' + (_i * k).toString()] = 0;
totalVal['total_weighted_score_' + (_i * k).toString()] += (kpi[0]['month_' + k + '_score'] * child_weighted_weight) / 100;
}
}
}
})
} else {
kpi = $.grep(quarter_kpi, function (e) {
return e.unique_key == unique_key && e.name == kpi_id;
});
var _i = 1;
if (kpi.length == 1) {
console.log(kpi);
for (var j = 1; j <= 3; j++) {
setCellVal(structMonthData[_i][j][0] + currentRow, kpi[0]['month_' + j + '_target']);
setCellVal(structMonthData[_i][j][1] + currentRow, kpi[0]['month_' + j]);
setCellVal(structMonthData[_i][j][2] + currentRow, kpi[0]['month_' + j + '_score'] / 100);
setCellVal(structMonthData[_i][j][3] + currentRow, (kpi[0]['month_' + j + '_score'] * parent_weighted_weight) / 100);
setNumFormat(structMonthData[_i][j][3] + currentRow, '0%');
setNumFormat(structMonthData[_i][j][2] + currentRow, '0%');
}
}
}
}
cloudjetRequest.ajax({
method: 'GET',
url: "/api/export/" + member.user + "/simple/?type=json",
success: function (data) {
if (data) {
setCellVal('C6', self.translate_2['Full name'], true);
setCellVal('D6', member.display_name, true);
setCellVal('C7', 'Email', true);
setCellVal('D7', member.email, true);
if (self.month) setCellVal('E5', self.translate_2['FULL LIST OF BACKUP KPIs'], true);
else setCellVal('E5', self.translate_2['FULL LIST OF KPIs'], true);
quarter_kpi = data;
headerStruct['columns'].forEach(function (col) {
row = headerStruct['row'];
setCellVal(col['id'] + row, col.text);
setWidthCol(col['id'], col['width']);
setCellFormat(col['id'] + row, formatStruct['header']);
});
_row_header_month = 8;
_row_header = 9;
_i = 1;
setCellVal(structMonthData[_i][1][0] + _row_header_month, self.current_quarter.month_1_name + '/' + self.current_quarter.fields.year);
setCellVal(structMonthData[_i][2][0] + _row_header_month, self.current_quarter.month_2_name + '/' + self.current_quarter.fields.year);
setCellVal(structMonthData[_i][3][0] + _row_header_month, self.current_quarter.month_3_name + '/' + self.current_quarter.fields.year);
for (var j = 1; j <= 3; j++) {
setCellVal(structMonthData[_i][j][0] + _row_header, self.translate_2['Target']);
setCellVal(structMonthData[_i][j][1] + _row_header, self.translate_2['Result']);
if(self.translate_2['Language']=='English') {
setCellVal(structMonthData[_i][j][2] + _row_header, 'Performance');
}
else{
setCellVal(structMonthData[_i][j][2] + _row_header, 'Hiệu suất');
}
setCellVal(structMonthData[_i][j][3] + _row_header, self.translate_2['Score']);
setCellFormat(structMonthData[_i][j][0] + _row_header, formatStruct['header']);
setCellFormat(structMonthData[_i][j][1] + _row_header, formatStruct['header']);
setCellFormat(structMonthData[_i][j][2] + _row_header, formatStruct['header']);
setCellFormat(structMonthData[_i][j][3] + _row_header, formatStruct['header']);
}
startRow = 10;
currentRow = startRow;
var total_weight = 0;
quarter_kpi.forEach(function (kpi, index) {
total_weight += kpi.weight;
});
quarter_kpi.forEach(function (kpi, index) {
_children = kpi['children'];
if (_children.length) {
setCellVal('B' + currentRow, kpi.kpi_id);
setCellVal('C' + currentRow, kpi.name);
setCellVal('D' + currentRow, kpi.weight);
setNumFormat('D' + currentRow, '0.00');
weighted_weight = kpi.weight / total_weight;
quarter_kpi[index]['weighted_weight'] = weighted_weight;
setCellVal('E' + currentRow, weighted_weight);
setNumFormat('E' + currentRow, '0.00%');
var child_total_weight = 0;
_children.forEach(function (child) {
child_total_weight += child.weight
});
_children.forEach(function (child) {
setCellVal('F' + currentRow, child.name);
setCellVal('G' + currentRow, child.owner_email);
setCellVal('H' + currentRow, child.weight);
//_child_weighted_weight = child.weight / total_weight; <-- this is wrong
//

// Trong so cua KPI con so voi cac KPI con: child.weight / child_total_weight

// Trong so cua KPI con so voi tong the cac KPI cha: child.weight / child_total_weight * weighted_weight;

//

_child_weighted_weight = child.weight / child_total_weight * weighted_weight;
setCellVal('I' + currentRow, _child_weighted_weight);
setNumFormat('I' + currentRow, '0.00%');
setCellVal('J' + currentRow, child.unit);
setCellVal('K' + currentRow, child.current_goal);
setCellVal('L' + currentRow, child.operator);
fillQuarterData(child.unique_key, child.name, child.weight, currentRow, quarter_kpi, true, weighted_weight, _child_weighted_weight);
currentRow++;
})
}
else {
setCellVal('B' + currentRow, kpi.kpi_id);
setCellVal('C' + currentRow, kpi.name);
setCellVal('D' + currentRow, kpi.weight);
setNumFormat('D' + currentRow, '0.00');
weighted_weight = kpi.weight / total_weight;
quarter_kpi[index]['weighted_weight'] = weighted_weight;
setCellVal('E' + currentRow, weighted_weight);
setNumFormat('E' + currentRow, '0.00%');
setCellVal('G' + currentRow, kpi.owner_email);
setCellVal('H' + currentRow, kpi.weight);
setCellVal('I' + currentRow, kpi.weighted_weight);
setNumFormat('I' + currentRow, '0.00%');
setCellVal('J' + currentRow, kpi.unit);
setCellVal('K' + currentRow, kpi.current_goal);
setCellVal('L' + currentRow, kpi.operator);
fillQuarterData(kpi.unique_key, kpi.name, kpi.weight, currentRow, quarter_kpi, false, weighted_weight);
currentRow++;
}
});
endRow = currentRow - 1;
setCellVal('B' + currentRow, self.translate_2['Total']);
setCellVal('D' + currentRow, total_weight);
setNumFormat('D' + currentRow, '0.00');
_i = 1;
for (var k = 1; k <= 3; k++) {
setCellVal(structMonthData[_i][k][3] + currentRow, {
formula: 'SUM(' + structMonthData[_i][k][3] + startRow + ':' + structMonthData[_i][k][3] + endRow + ')',
value: totalVal['total_weighted_score_' + (_i * k).toString()]
});
setNumFormat(structMonthData[_i][k][3] + currentRow, '0%');
}
// format background
"ABCDEFGHIJKLMNOPQRSTUVWX".split("").forEach(function (col) {
setCellFormat(col + currentRow, formatStruct['header']);
});
}
cb2();
},
error: function () {
var msg = 'Error when loading kpi by quarter';
console.log(msg);
}
})
}, function (err2, res2) {
cb1();
});
}, self.teamMember),
function () {
var today = new Date().toISOString().slice(0, 10);
self.downloadFile(wb, 'DANH SACH DIEM NHAN VIEN' + ' ' + today + '.xlsx');
$('.alert-loading').hide();
}
]
)
},
getTeamMember: function (userId, cb) {
console.log("userId" + userId);
$(".arrow-up").hide();
$('.alert-loading').show();
if (!userId) cb(true);
self = this;
return cloudjetRequest.ajax({
method: "GET",
url: "/api/team/?user_id=" + userId,
dataType: 'json',
beforeSend: function() {
self.teamMember = [];
},
success: function (data) {
$("#list_team .list-group").hide();
self.query = self.user_list_search[self.position_to_display].display_name;
if (data.length>0) {
self.teamMember = data;
}
else{
$('.alert-no-surbodinate').show();
setTimeout(function(){ $('.alert-no-surbodinate').hide();
}, 3000);
}
$('.alert-loading').hide();
$(".arrow-up").hide();
}
})
},
getExscore: function (userId) {
$(".arrow-up").hide();
$(".alert-loading").show();
return cloudjetRequest.ajax({
method: "GET",
url: "/api/v2/exscore/report/?manager_id=" + userId,
data:{
detail:true
},
success: function (data) {
self.Exscore = [];
$('#list_minus .list-group').hide();
console.log('getExscore:');
console.log(data);
self.query = self.user_list_search[self.position_to_display].display_name;
if (data && data.length > 0) {
console.log("data is not None")
data.forEach(function (score) {
if (score.month == self.month_excore) {
self.Exscore = data;
}
})
self.user_id_manager = userId;
if(self.Exscore.length==0){
$(".alert-no-excore").show();
setTimeout(function(){ $('.alert-no-excore').hide();
}, 3000);
}
else{
$(".alert-no-excore").hide();
}
}else{
$(".alert-no-excore").show();
setTimeout(function(){ $('.alert-no-excore').hide();
}, 3000);
}
$(".alert-loading").hide();
}
})
},
getGroup: function () {
$(".alert-loading").show();
self = this;
cloudjetRequest.ajax({
method: "GET",
url: "/api/v2/strategy-map/group/",
success: function (data) {
self.initGroup();
if (data) {
groups = data;
console.log(data);
async.map(self.categories, function (category, callback) {
if (self.debug) console.log(category);
if (groups.hasOwnProperty(category)) {
var _category = groups[category].group_kpis;
_category.forEach(function (g, i) {
self.groups[category].push(g);
if (self.debug) console.log('line 133 >>> ', g);
});
callback();
}
}, function (err, results) {
if (self.debug) console.log('line 139 >>> ', self.groups);
self.getKpi();
});
}
},
error: function () {
alert('error');
$(".alert-loading").hide();
}
})
},
getKpi: function () {
self = this;
console.log('hii');
async.map(self.categories, function (category, cb1) {
if (self.groups[category]) {
async.map(self.groups[category], function (group, cb2) {
cloudjetRequest.ajax({
method: "GET",
url: "/api/v2/strategy-map/group/" + group.id + "/kpis",
success: function (data) {
if (data) {
self.kpis[group.id] = data;
console.log(data);
}
cb2();
}
})
}, function (err, results) {
cb1();
})
}
}, function (err, results) {
if (self.debug) console.log('line 166 >>> ', self.kpis);
self.renderExcel();
$(".alert-loading").hide();
});
},
initGroup: function () {
self = this;
async.map(self.categories, function (category, cb) {
self.groups[category] = [];
cb();
});
},
exportExcelExscore: function () {
// setTimeout(function(){
// $('#modal_exscore').modal('hide');
// },500);
// $('body').loading({stoppable: true, message: '{% trans "Loading..." %}'});
$(".alert-loading").show();
self = this;
var debug = false;
setTimeout(function () {
var headerFormat = {
alignment: {
vertical: 'middle',
horizontal: 'center',
wrapText: true
},
font: {
name: 'Arial',
size: 12,
color: {
argb: 'FFFFFFFF'
},
bold: true
},
fill: {
type: 'pattern',
pattern: 'solid',
bgColor: {
argb: '007C7A'
},
fgColor: {
argb: '007C7A'
}
},
border: {
top: {style: 'thin', color: {argb: 'FF000000'}},
left: {style: 'thin', color: {argb: 'FF000000'}},
bottom: {style: 'thin', color: {argb: 'FF000000'}},
right: {style: 'thin', color: {argb: 'FF000000'}}
}
};
var backgound_diff = {
fill: {
type: 'pattern',
pattern: 'solid',
bgColor: {
argb: '250091'
},
fgColor: {
argb: '250091'
}
},
};
var default_format_left = {
alignment: {
vertical: 'middle',
horizontal: 'left',
wrapText: true
},
font: {
name: 'Arial',
size: 12,
color: {
argb: 'FF000000'
}
}
};
var content = {
left: {
alignment: {
vertical: 'middle',
horizontal: 'left',
wrapText: true
},
font: {
name: 'Arial',
size: 12,
color: {
argb: 'FF000000'
}
}
},
right: {
alignment: {
vertical: 'middle',
horizontal: 'right',
wrapText: true
},
font: {
name: 'Arial',
size: 12,
color: {
argb: 'FF000000'
}
}
},
center: {
alignment: {
vertical: 'middle',
horizontal: 'center',
wrapText: true
},
font: {
name: 'Arial',
size: 12,
color: {
argb: 'FF000000'
}
}
},
};
var default_format_right = {
alignment: {
vertical: 'middle',
horizontal: 'right',
wrapText: true
},
font: {
name: 'Arial',
size: 12,
color: {
argb: 'FF000000'
}
}
};
var title = {
alignment: {
vertical: 'middle',
horizontal: 'center',
wrapText: true
},
font: {
name: 'Arial',
size: 18,
color: {
argb: 'FF000000'
},
bold: 'center'
}
};
var formatBorder = {
border: {
top: {style: 'thin', color: {argb: 'FF000000'}},
left: {style: 'thin', color: {argb: 'FF000000'}},
bottom: {style: 'thin', color: {argb: 'FF000000'}},
right: {style: 'thin', color: {argb: 'FF000000'}}
}
};
var headerData = {
row: '5',
height: 20,
columns: [{
id: null,
text: '{% trans "#" %}',
uniname: 'id',
width: '5',
style: 'center'
}, {
id: null,
text: '{% trans "EMPLOYEE CODE" %}',
uniname: 'employee_code',
width: '20',
style: 'center'
}, {
id: null,
text: '{% trans "FULL NAME" %}',
uniname: 'display_name',
width: '30',
style: 'left'
}, {
id: null,
text: '{% trans "DEPARTMENT" %}',
uniname: 'department',
width: '20',
style: 'left'
}, {
id: null,
text: '{% trans "COMPANY" %}',
uniname: 'unit_name',
width: '30',
style: 'left'
}, {
id: null,
text: '{% trans "EMPLOYEE EMAIL" %}',
uniname: 'email',
width: '30',
style: 'left'
}, {
id: null,
text: '{% trans "POSITION" %}',
uniname: 'title',
width: '35',
style: 'left'
}, {
id: null,
text: '{% trans "MANAGER EMAIL" %}',
uniname: 'email_manager',
width: '30',
style: 'left'
}, {
id: null,
text: '{% trans "Criteria type" %}',
uniname: 'score_type',
group: 'diff',
width: '20',
style: 'center'
}, {
id: null,
text: '{% trans "Points" %}',
uniname: 'employee_points',
group: 'diff',
width: '20',
style: 'center'
}, {
id: null,
text: '{% trans "Name" %}',
uniname: 'name',
group: 'diff',
width: '50',
style: 'left'
}, {
id: null,
text: '{% trans "Measurement method" %}',
uniname: 'description',
group: 'diff',
width: '50',
style: 'left'
}]
};
var startRow = headerData.row;
// init wb
var wb = new ExcelJS.Workbook();
wb.creator = 'Cloudjet';
var ws = wb.addWorksheet('Report Exscore');
setValueCell('B2', "{% trans 'LIST OF EMPLOYEES EXTRA SCORES' %}");
mergeCell('B2', 'D2 ');
setFormatCell('B2', title);
setValueCell('B3', "{% trans 'MONTH:' %}");
setFormatCell('B3', default_format_left);
setValueCell('C3', self.month_excore == 1 ? self.quarter.month_1_name.replace(/^\D+/g, '') : self.month_excore == 2 ? self.quarter.month_2_name.replace(/^\D+/g, '') : self.quarter.month_3_name.replace(/^\D+/g, ''));
setFormatCell('C3', default_format_right);
// render header
renderHeader(headerData, headerFormat, backgound_diff);
// export excel
renderExscore(headerData);
date = new Date();
date = date.getDate() + '.' + date.getMonth() + '.' + date.getFullYear();
self.downloadFile(wb, 'ReportExscore ' + date + '.xlsx');
$(".alert-loading").hide();
// $('#modal_exscore').modal('show');
// function for render excel
function setWidthCol(col, width) {
ws.getColumn(col).width = width;
}
function mergeCell(x, y) {
ws.mergeCells(x + ':' + y);
}
function setFormatCell(cell, format) {
cell = ws.getCell(cell);
if (format) {
if (format.hasOwnProperty('alignment')) {
cell.alignment = format.alignment;
}
if (format.hasOwnProperty('font')) {
cell.font = format.font;
}
if (format.hasOwnProperty('fill')) {
cell.fill = format.fill;
}
if (format.hasOwnProperty('border')) {
cell.border = format.border;
}
}
}
function setValueCell(cell, text) {
cell = ws.getCell(cell);
cell.value = text;
}
function renderHeader(headerData, headerFormat, backgound_diff) {
row = headerData.row;
var id_start = 'A';
ws.getRow(row).height = headerData.height;
headerData.columns.forEach(function (col, index) {
setWidthCol(id_start, col.width);
cell = id_start + row;
setFormatCell(cell, headerFormat);
if (col.group) setFormatCell(cell, backgound_diff);
setValueCell(cell, col.text);
id_start = id_start.nextChar();
});
}
function renderExscore(headerData) {
var row_start = 6;
var id_start = 'A';
var result_exscore = [];
var result = [];
var user_ids = [];
var table_type = {
plus: '{% trans "EXTRA" %}',
minus: '{% trans "MINUS" %}',
zero: '{% trans "ZERO" %}'
}
var i=0;
var scores = [];
var count = 1;
while (i<self.Exscore.length){
console.log("i="+i);
console.log("a[i]"+self.Exscore[i]);
self.Exscore[i].id=count++;
var j=i+1;
userId=self.Exscore[i].user_id;
scores.push(self.Exscore[i]);
var reach=true;
while (self.Exscore[j].user_id==userId && reach == true){
scores.push(self.Exscore[j]);
if (j+1<self.Exscore.length)
j++;
else reach = false;
}
console.log(scores.length);
headerData.columns.forEach(function (column, indexs) {
if (!column.group) {
mergeCell(id_start + row_start, id_start + (row_start + scores.length - 1));
setValueCell(id_start + row_start, self.Exscore[i][column.uniname]);
setFormatCell(id_start + row_start, content[column.style]);
} else {
var temp_count = row_start;
scores.forEach(function (score) {
if (column.uniname == 'score_type') {
setValueCell(id_start + temp_count, table_type[score[column.uniname]]);
} else if (column.uniname == 'employee_points') {
setValueCell(id_start + temp_count, score['score_type'] == 'zero' ? '{% trans "All" %}' : score[column.uniname]);
} else {
setValueCell(id_start + temp_count, score[column.uniname]);
}
setFormatCell(id_start + temp_count, content[column.style]);
temp_count++;
})
}
id_start = id_start.nextChar();
});
row_start = row_start + scores.length;
id_start = 'A';
i=j+1;
scores=[];
}
}
}, 1000);
},
renderExcel: function () {
self = this;
var debug = false;
var headerFormat = {
alignment: {
vertical: 'middle',
horizontal: 'center',
wrapText: true
},
font: {
name: 'Arial',
size: 12,
color: {
argb: 'FFFFFFFF'
},
bold: true
},
fill: {
type: 'pattern',
pattern: 'solid',
bgColor: {
argb: 'FF404040'
},
fgColor: {
argb: 'FF404040'
}
},
border: {
top: {style: 'thin', color: {argb: 'FF000000'}},
left: {style: 'thin', color: {argb: 'FF000000'}},
bottom: {style: 'thin', color: {argb: 'FF000000'}},
right: {style: 'thin', color: {argb: 'FF000000'}}
}
};
var categoryFormat = {
alignment: {
vertical: 'middle',
horizontal: 'left',
wrapText: true
},
font: {
name: 'Arial',
size: 12,
color: {
argb: 'FFFFFFFF'
},
bold: true
},
fill: {
type: 'pattern',
pattern: 'solid',
bgColor: {
argb: 'FF215967'
},
fgColor: {
argb: 'FF215967'
}
},
border: {
top: {style: 'thin', color: {argb: 'FF000000'}},
left: {style: 'thin', color: {argb: 'FF000000'}},
bottom: {style: 'thin', color: {argb: 'FF000000'}},
right: {style: 'thin', color: {argb: 'FF000000'}}
}
};
var groupFormat = {
alignment: {
vertical: 'middle',
horizontal: 'left',
wrapText: false
},
font: {
name: 'Arial',
size: 12,
color: {
argb: 'FFFFFFFF'
},
bold: true
},
fill: {
type: 'pattern',
pattern: 'solid',
bgColor: {
argb: 'FF009999'
},
fgColor: {
argb: 'FF009999'
}
}
};
var parentKpiFormat = {
alignment: {
vertical: 'middle',
horizontal: 'left',
wrapText: false
},
font: {
name: 'Arial',
size: 12,
color: {
argb: 'FF666666'
},
bold: true
}
};
var childKpiFormat = {
alignment: {
vertical: 'middle',
horizontal: 'left',
wrapText: true
},
font: {
name: 'Arial',
size: 12,
color: {
argb: 'FF666666'
},
bold: false
}
};
var formatBorder = {
border: {
top: {style: 'thin', color: {argb: 'FF000000'}},
left: {style: 'thin', color: {argb: 'FF000000'}},
bottom: {style: 'thin', color: {argb: 'FF000000'}},
right: {style: 'thin', color: {argb: 'FF000000'}}
}
};
var headerData = {
row: '6',
height: 50.25,
columns: [{
id: 'A',
text: 'ID',
uniname: 'id',
width: '9.5'
}, {
id: 'B',
text: '',
uniname: '',
width: '5'
}, {
id: 'C',
text: 'MỤC TIÊU CHIẾN LƯỢC',
uniname: 'target',
width: '75'
}, {
id: 'D',
text: 'Chịu Trách Nhiệm (cấp 1)',
uniname: 'owner',
width: '29'
}, {
id: 'E',
text: 'Chịu Trách Nhiệm (cấp 2)',
uniname: 'department',
width: '29'
}, {
id: 'F',
text: 'GHI CHÚ',
uniname: 'note',
width: '16'
}]
};
var startRow = headerData.row;
// init wb
var wb = new ExcelJS.Workbook();
wb.creator = 'Cloudjet';
var ws = wb.addWorksheet('StraegyMap');
// render header
renderHeader(headerData, headerFormat);
// export excel
renderCategory();
date = new Date();
date = date.getDate() + '.' + date.getMonth() + '.' + date.getFullYear();
self.downloadFile(wb, 'StraegyMap ' + date + '.xlsx');
// function for render excel
function setWidthCol(col, width) {
ws.getColumn(col).width = width;
}
function setFormatCell(cell, format) {
cell = ws.getCell(cell);
if (format) {
if (format.hasOwnProperty('alignment')) {
cell.alignment = format.alignment;
}
if (format.hasOwnProperty('font')) {
cell.font = format.font;
}
if (format.hasOwnProperty('fill')) {
cell.fill = format.fill;
}
if (format.hasOwnProperty('border')) {
cell.border = format.border;
}
}
}
function setValueCell(cell, text) {
cell = ws.getCell(cell);
cell.value = text;
}
function renderHeader(headerData, headerFormat) {
row = headerData.row;
ws.getRow(row).height = headerData.height;
headerData.columns.forEach(function (col, index) {
setWidthCol(col.id, col.width);
cell = col.id + row;
setFormatCell(cell, headerFormat);
setValueCell(cell, col.text);
});
}
function setFormatRange(fromCol, toCol, fromRow, toRow, format) {
fromCol = fromCol.charCodeAt(0);
toCol = toCol.charCodeAt(0);
for (var i = fromCol; i <= toCol; i++) {
for (var j = fromRow; j <= toRow; j++) {
setFormatCell(String.fromCharCode(i) + j, format);
}
}
}
function renderCategory() {
currentRow = 7;
self.categories.forEach(function (category) {
if (self.debug) console.log('line 377 >>> ', currentRow);
ws.mergeCells('A' + currentRow + ':' + 'F' + currentRow);
if (self.debug) console.log(category);
setValueCell('A' + currentRow, self.translate[category]);
setFormatCell('A' + currentRow, categoryFormat);
ws.getRow(currentRow).height = 24.75;
currentRow++;
self.groups[category].forEach(function (group) {
setFormatRange('A', 'F', currentRow, currentRow, groupFormat);
ws.getRow(currentRow).height = 24.75;
currentRow++;
if (self.kpis[group.id]) {
if (self.debug) console.log('line 430 >>>', self.kpis[group.id]);
var kpis = self.kpis[group.id];
kpis.forEach(function (kpi) {
setValueCell('B' + currentRow, kpi.name);
setValueCell('D' + currentRow, kpi.owner_email);
setFormatRange('A', 'F', currentRow, currentRow, parentKpiFormat);
ws.getRow(currentRow).height = 24.75;
currentRow++;
if (kpi.children.length) {
if (self.debug) console.log("debug 446 >>>>", kpi.children);
children = kpi.children;
children.forEach(function (child) {
setValueCell('A' + currentRow, child.kpi_id);
setValueCell('C' + currentRow, child.name);
setValueCell('E' + currentRow, child.owner_email);
setFormatRange('A', 'F', currentRow, currentRow, childKpiFormat);
currentRow++;
});
}
})
}
});
setFormatRange('A', 'F', startRow, currentRow, formatBorder);
});
}
},
downloadFile: function (wb, filename) {
if (wb) wb.xlsx.writeBuffer().then(function (buffer) {
var filesaver = saveAs(new Blob([buffer], {
type: "application/octet-stream"
}), filename);
setTimeout(function () {
window.close();
}, 4000);
});
},
search_user: function (user_id, cb) {
self = this;
console.log(user_id);
$(".alert-loading").show();
return cloudjetRequest.ajax({
type: "GET",
url: '{% url "ProfileKPI" %}?user_id=' + user_id,
success: function (dt) {
self.user_profile = dt;
$(".arrow-up").hide();
self.get_quarter_period();
self.query = (typeof self.user_list_search[self.position_to_display] !== "undefined")?self.user_list_search[self.position_to_display].display_name:'';
try {
cb(null);
} catch (err) {
}
$(".alert-loading").hide();
$("#list_personal .list-group").hide();
},
error: function (jqXHR, textStatus) {
self.user_profile = null;
},
contentType: "application/json"
})
},
getOrg: function (cb) {
self = this;
return cloudjetRequest.ajax({
method: 'GET',
url: '/api/organization',
success: function (data) {
if (data) {
self.organization = data;
console.log('====Org===');
console.log(self.organization);
try {
cb(null);
} catch (err) {
}
}
}
})
},
getCurrentQuarter: function () {
self = this;
return cloudjetRequest.ajax({
method: "GET",
url: "/api/quarter/?get_current_quarter=" + true,
success: function (data) {
if (data) {
self.quarter = data;
self.cache_month_excore = self.quarter.month_1_name;
}
},
error: function () {
}
})
},
get_simple_kpi: function (simple, month, cb) {
console.log
self = this;
var wb = new ExcelJS.Workbook();
wb.creator = 'Cloudjet';
var ws = wb.addWorksheet('KPI');
// $('body').loading({stoppable: true, message: '{% trans "Loading..." %}'});
$(".alert-loading").show();
if (simple) {
var selected_quarter_id = this.$route.query.quarter_id;
function filterByQuarterID(item) {
if (parseInt(selected_quarter_id) === item.id) return true;
return false;
}
self.selected_quarter = [self.quarter_period.filter(filterByQuarterID)[0].id];
}
async.waterfall([
async.apply(function (user_profile, selected_quarter, cb1) {
/* load kpi by quarter and reduce to quarter_kpi */
var organization = self.organization;
var id_reason = null;
var quarter_kpi = {};
async.map(selected_quarter, function (quarter, cb2) {
cloudjetRequest.ajax({
method: 'GET',
url: "/api/user_kpi/" + user_profile.user + '/',
success: function(data) {
if (data) self.quarter_score = data.kpi_score;
}
})
cloudjetRequest.ajax({
method: 'GET',
url: "/api/export/" + user_profile.user + "/simple/",
data: {
type: "json",
quarter_period: quarter,
backup_month: month
},
success: function (data) {
if (data) quarter_kpi[quarter] = data;
console.log("=========")
console.log(data)
cb2(null);
},
error: function () {
var msg = 'Error when loading kpi by quarter';
console.log(msg);
cb2(msg);
}
})
}, function (err2, res2) {
if (err2) cb1(err2);
cb1(null, user_profile, quarter_kpi);
});
}, self.user_profile, self.selected_quarter),
function (user_profile, quarter_kpi) {
var wb = new ExcelJS.Workbook();
wb.creator = 'Cloudjet';
var ws = wb.addWorksheet('KPI',{pageSetup:{showGridLines:true,orientation:'landscape',paperSize: 9,fitToPage: true, fitToHeight: 0, fitToWidth: 1}});
ws.pageSetup.margins = {
left: 0.1, right: 0.1,
top: 0.2, bottom: 0.2,
header: 0.3, footer: 0.3
};
formatStruct = {
header: {
alignment: {
vertical: 'middle',
horizontal: 'center',
wrapText: true
},
font: {
name: 'Arial',
size: 12,
color: {
argb: 'FFFFFFFF'
},
bold: true
},
fill: {
type: 'pattern',
pattern: 'solid',
bgColor: {
argb: 'FF2a7878'
},
fgColor: {
argb: 'FF2a7878'
}
},
border: {
top: {style: 'thin', color: {argb: 'FFB7B7B7'}},
left: {style: 'thin', color: {argb: 'FFB7B7B7'}},
bottom: {style: 'thin', color: {argb: 'FFB7B7B7'}},
right: {style: 'thin', color: {argb: 'FFB7B7B7'}}
},
},
headerTitle: {
alignment: {
vertical: 'middle',
horizontal: 'left',
wrapText: false
},
font: {
name: 'Arial',
size: 18,
color: {
argb: '#000000'
},
bold: true
},
fill: {
type: 'pattern',
pattern: 'solid',
bgColor: {
argb: 'FFFFFFFF'
},
fgColor: {
argb: 'FFFFFFFF'
}
}
}
,
header_infoTitle: {
alignment: {
vertical: 'middle',
horizontal: 'left',
wrapText: false
},
font: {
name: 'Arial',
size: 12,
color: {
argb: '#000000'
},
bold: true
},
fill: {
type: 'pattern',
pattern: 'solid',
bgColor: {
argb: 'FFFFFFFF'
},
fgColor: {
argb: 'FFFFFFFF'
}
}
},
header_infoData: {
alignment: {
vertical: 'middle',
horizontal: 'left',
wrapText: false
},
font: {
name: 'Arial',
size: 12,
color: {
argb: '#000000'
},
},
fill: {
type: 'pattern',
pattern: 'solid',
bgColor: {
argb: 'FFFFFFFF'
},
fgColor: {
argb: 'FFFFFFFF'
}
}
},
body_infoData:{
alignment: {
vertical: 'middle',
horizontal: 'center',
wrapText: true
},
font: {
name: 'Arial',
size: 11,
color: {
argb: '#000000'
},
},
fill: {
type: 'pattern',
pattern: 'solid',
bgColor: {
argb: 'FFFFFFFF'
},
fgColor: {
argb: 'FFFFFFFF'
}
},
border: {
top: {style: 'thin', color: {argb: 'FFB7B7B7'}},
left: {style: 'thin', color: {argb: 'FFB7B7B7'}},
bottom: {style: 'thin', color: {argb: 'FFB7B7B7'}},
right: {style: 'thin', color: {argb: 'FFB7B7B7'}}
},
},
body_infoDataCustom:{
alignment: {
vertical: 'middle',
horizontal: 'center',
wrapText: true
},
font: {
name: 'Arial',
size: 11,
color: {
argb: '#000000'
},
},
fill: {
type: 'pattern',
pattern: 'solid',
bgColor: {
argb: 'b8c8e0'
},
fgColor: {
argb: 'b8c8e0'
}
},
border: {
top: {style: 'thin', color: {argb: 'FFB7B7B7'}},
left: {style: 'thin', color: {argb: 'FFB7B7B7'}},
bottom: {style: 'thin', color: {argb: 'FFB7B7B7'}},
right: {style: 'thin', color: {argb: 'FFB7B7B7'}}
},
},
};
//Edit momment
//Tencty
//setCellVal('B1', self.organization.name);
ws.mergeCells('B1:Y1')
ws.mergeCells('B2:Y5')
ws.mergeCells('B6:C6')
ws.mergeCells('B7:C7')
ws.mergeCells('B8:C8')
ws.mergeCells('D6:Y6')
ws.mergeCells('D7:Y7')
ws.mergeCells('D8:L8')
setCellVal('B1', self.organization.name);
/* fill user info*/
setCellVal('B6',self.translate_2['Full name'], true);
setCellFormat('B6', formatStruct['header_infoTitle']);
setCellVal('D6', user_profile.display_name, true);
setCellFormat('D6', formatStruct['header_infoData']);
setCellVal('B7', self.translate_2['Employee Code'], true);
setCellFormat('B7', formatStruct['header_infoTitle']);
setCellVal('D7', user_profile.employee_code, true);
setCellFormat('D7', formatStruct['header_infoData']);
setCellVal('B8', 'Email', true);
setCellFormat('B8', formatStruct['header_infoTitle']);
setCellVal('D8', user_profile.email, true);
setCellFormat('D8', formatStruct['header_infoData']);
//merge month header
ws.mergeCells('M8:P8')
setCellFormat('M8', formatStruct['header_infoData']);
ws.mergeCells('Q8:T8')
setCellFormat('Q8', formatStruct['header_infoData']);
ws.mergeCells('U8:Y8')
setCellFormat('U8', formatStruct['header_infoData']);
if (self.month) setCellVal('E5', self.translate_2['FULL LIST OF BACKUP KPIs'], true);
else setCellVal('E5', self.translate_2['FULL LIST OF KPIs'], true);
setCellFormat('B1', formatStruct['headerTitle']);
setCellFormat('B5', {
alignment: {
vertical: 'middle',
horizontal: 'center',
wrapText: false
},
font:{
size:16,
color: {
argb: '#000000'
},
bold: true}
}
);
var headerStruct = {
row: '9',
height: 36,
columns: [
{
id: 'A',
text: '',
uniname: '',
width: '0'
}, {
id: 'B',
text: self.translate_2['Code KPI'],
uniname: 'kpi_id',
width: '7.5'
}, {
id: 'C',
text: self.translate_2['Objectives'],
uniname: 'kpi',
width: '18.7'
}, {
id: 'D',
text: self.translate_2['Weighting score'],
uniname: 'weight',
width: '7.7'
}, {
id: 'E',
text: self.translate_2['Weighting ratio'],
uniname: '',
width: '8.7'
}, {
id: 'F',
text: 'KPI',
uniname: 'name',
width: '18.7'
}, {
id: 'G',
text: self.translate_2['Assign to'],
uniname: 'owner_email',
width: '8.7'
}, {
id: 'H',
text: self.translate_2['Sub- weighting score'],
uniname: 'weight',
width: '7.7'
}, {
id: 'I',
text: self.translate_2['Sub- weighting ratio'],
uniname: '',
width: '8.7'
}, {
id: 'J',
text: self.translate_2['Unit'],
uniname: 'unit',
width: '7.7'
}, {
id: 'K',
text: self.translate_2['Measurement method'],
uniname: 'current_goal',
width: '25.7'
}, {
id: 'L',
text: self.translate_2['Operator'],
uniname: 'operator',
width: '8'
}],
format: 'header'
};
var totalVal = {};
var rowScore = [];
selected_quarter = self.selected_quarter;
selected_quarter.sort();
headerStruct['columns'].forEach(function (col) {
row = headerStruct['row'];
setCellVal(col['id'] + row, col.text);
setWidthCol(col['id'], col['width']);
setCellFormat(col['id'] + row, formatStruct['header']);
});
console.log(self.quarter_period);
structMonthData = {
1: {
1: ['M', 'N', 'O', 'P'],
2: ['Q', 'R', 'S', 'T'],
3: ['U', 'V', 'W', 'X']
},
2: {
1: ['Y', 'Z', 'AA', 'AB'],
2: ['AC', 'AD', 'AE', 'AF'],
3: ['AG', 'AH', 'AI', 'AJ']
},
3: {
1: ['AK', 'AL', 'AM', 'AN'],
2: ['AO', 'AP', 'AQ', 'AR'],
3: ['AS', 'AT', 'AU', 'AV']
},
4: {
1: ['AW', 'AX', 'AY', 'AZ'],
2: ['BA', 'BB', 'BC', 'BD'],
3: ['BE', 'BF', 'BG', 'BH']
},
5: {
1: ['BI', 'BJ', 'BK', 'BL'],
2:['BM']// for reason & quarter data
}
};
var info_col_1 = "A B C D E F G H I J K L M N O P Q R S T U V W X Y Z AA AB AC";
var info_col_2 = "F G H I J K L M N O P Q R S T U V W X Y Z AA AB AC";
selected_quarter.forEach(function (quarter, index) {
_row_header_month = 8;
_row_header = 9;
_i = index + 1;
var quarter_data = $.grep(self.quarter_period, function (e) {
return e.id == quarter;
});
if (quarter_data.length === 1) {
if(self.translate_2['Language']=='English'){
setCellVal(structMonthData[_i][1][0] + _row_header_month, quarter_data[0].month_1_name.replace('Tháng','') + '/' + quarter_data[0].year);
setCellVal(structMonthData[_i][2][0] + _row_header_month, quarter_data[0].month_2_name.replace('Tháng','') + '/' + quarter_data[0].year);
setCellVal(structMonthData[_i][3][0] + _row_header_month, quarter_data[0].month_3_name.replace('Tháng','') + '/' + quarter_data[0].year);
}
else{
setCellVal(structMonthData[_i][1][0] + _row_header_month, quarter_data[0].month_1_name + '/' + quarter_data[0].year);
setCellVal(structMonthData[_i][2][0] + _row_header_month, quarter_data[0].month_2_name + '/' + quarter_data[0].year);
setCellVal(structMonthData[_i][3][0] + _row_header_month, quarter_data[0].month_3_name + '/' + quarter_data[0].year);
}
}
for (var j = 1; j <= 3; j++) {
setCellVal(structMonthData[_i][j][0] + _row_header, self.translate_2['Target']);
setCellVal(structMonthData[_i][j][1] + _row_header, self.translate_2['Result']);
if(self.translate_2['Language']=='English') {
setCellVal(structMonthData[_i][j][2] + _row_header, 'Performance');
}
else{
setCellVal(structMonthData[_i][j][2] + _row_header, 'Hiệu suất');
}
setCellVal(structMonthData[_i][j][3] + _row_header, self.translate_2['Score']);
setCellFormat(structMonthData[_i][j][0] + _row_header, formatStruct['header']);
setCellFormat(structMonthData[_i][j][1] + _row_header, formatStruct['header']);
setCellFormat(structMonthData[_i][j][2] + _row_header, formatStruct['header']);
setCellFormat(structMonthData[_i][j][3] + _row_header, formatStruct['header']);
}
id_quarter_target = structMonthData[_i+1][1][0];
id_quarter_real = structMonthData[_i+1][1][1];
id_quarter_perf = structMonthData[_i+1][1][2];
id_quarter_score = structMonthData[_i+1][1][3];
id_reason = structMonthData[_i+1][2][0];
setCellVal(id_quarter_target + _row_header, 'Mục tiêu Quý');
setCellVal(id_quarter_real + _row_header, 'Kết quả Quý');
setCellVal(id_quarter_perf + _row_header, 'Hiệu suất Quý');
setCellVal(id_quarter_score + _row_header, 'Điểm Quý');
setCellVal(id_reason + _row_header, self.translate_2['Reason Delay KPI']);
setCellFormat(id_quarter_target + _row_header, formatStruct['header']);
setCellFormat(id_quarter_real + _row_header, formatStruct['header']);
setCellFormat(id_quarter_perf + _row_header, formatStruct['header']);
setCellFormat(id_quarter_score + _row_header, formatStruct['header']);
setCellFormat(id_reason + _row_header, formatStruct['header']);
setWidthCol(id_reason, 25.7);
});
ws.getColumn('R').width=7.7;
ws.getColumn('Q').width=7.7;
ws.getColumn('U').width=7.7;
ws.getColumn('V').width=7.7;
ws.getColumn('M').width=7.7;
ws.getColumn('N').width=7.7;
ws.getColumn('P').width=10.5;
ws.getColumn('T').width=10.5;
ws.getColumn('X').width=10.5;
ws.getRow(9).height=50;
startRow = 10;
currentRow = startRow;
last_quarter = selected_quarter[selected_quarter.length - 1];
console.log(selected_quarter);
console.log(quarter_kpi[last_quarter]);
var total_weight = 0;
quarter_kpi[last_quarter].forEach(function (kpi) {
total_weight += kpi.weight;
});
quarter_kpi[last_quarter].forEach(function (kpi, index) {
var _children = kpi.children;
if (_children.length) {
// setCellVal('B' + currentRow, kpi.kpi_id);
// setCellVal('C' + currentRow, kpi.name);
// setCellVal('D' + currentRow, kpi.weight);
// weighted_weight = kpi.weight / total_weight;
// quarter_kpi[last_quarter][index]['weighted_weight'] = weighted_weight;
// setCellVal('E' + currentRow, weighted_weight);
// setNumFormat('E' + currentRow, '0.00%');
setCellVal('B' + currentRow, kpi.kpi_id);
setCellVal('C' + currentRow, kpi.name);
setCellVal('D' + currentRow, kpi.weight);
setNumFormat('D' + currentRow, '0.00');
if(total_weight==null) weighted_weight=0;
else weighted_weight = kpi.weight / total_weight;
quarter_kpi[last_quarter][index]['weighted_weight'] = weighted_weight;
setCellVal('E' + currentRow, weighted_weight);
setNumFormat('E' + currentRow, '0.00%');
setCellVal('G' + currentRow, kpi.owner_email);
setCellVal('H' + currentRow, kpi.weight);
setNumFormat('H' + currentRow, '0.00');
setCellVal('I' + currentRow, kpi.weighted_weight);
setNumFormat('I' + currentRow, '0.00%');
setCellVal('J' + currentRow, kpi.unit);
setCellVal('K' + currentRow, kpi.current_goal);
setCellVal('L' + currentRow, kpi.operator);
setCellVal(id_reason + currentRow, kpi.reason);
rowScore.push(currentRow);
//var row = ws.getRow(currentRow);
fillQuarterData(kpi.unique_key, kpi.name, kpi.weight, currentRow, selected_quarter, quarter_kpi, false, weighted_weight);
//set border
info_col_1.split(" ").forEach(function (col) {
kpi.weight ? setCellFormat(col + currentRow, formatStruct['body_infoData']):setCellFormat(col + currentRow, formatStruct['body_infoDataCustom'])
});
currentRow++;
var child_total_weight = 0;
_children.forEach(function (child) {
child_total_weight += child.weight
});
_children.forEach(function (child, index) {
setCellVal('F' + currentRow, child.name);
setCellVal('G' + currentRow, child.owner_email);
setCellVal('H' + currentRow, child.weight);
//_child_weighted_weight = child.weight / total_weight; <-- this is wrong
// Trong so cua KPI con so voi cac KPI con: child.weight / child_total_weight

// Trong so cua KPI con so voi tong the cac KPI cha: child.weight / child_total_weight * weighted_weight;

//

if(child_total_weight==null || weighted_weight==null) _child_weighted_weight=0;
else _child_weighted_weight = child.weight / child_total_weight * weighted_weight;
setCellVal('I' + currentRow, _child_weighted_weight);
setNumFormat('I' + currentRow, '0.00%');
setCellVal('J' + currentRow, child.unit);
setCellVal('K' + currentRow, child.current_goal);
setCellVal('L' + currentRow, child.operator);
setCellVal(id_quarter_target + currentRow, child.target);
setNumFormat(id_quarter_target + currentRow, '0.00');
setCellVal(id_quarter_real + currentRow, child.real);
setNumFormat(id_quarter_real + currentRow, '0.00');
setCellVal(id_quarter_perf + currentRow, child.latest_score / 100);
setNumFormat(id_quarter_perf + currentRow, '0.00%');
setCellVal(id_quarter_score + currentRow, child.latest_score * _child_weighted_weight / 100);
setNumFormat(id_quarter_score + currentRow, '0.00%');
setCellVal(id_reason + currentRow, child.reason);
fillQuarterData(child.unique_key, child.name, child.weight, currentRow, selected_quarter, quarter_kpi, true, weighted_weight, _child_weighted_weight);
//set border
if(index!=0 || !kpi.weight) {
info_col_1.split(" ").forEach(function (col) {
child.weight ? setCellFormat(col + currentRow, formatStruct['body_infoData']):setCellFormat(col + currentRow, formatStruct['body_infoDataCustom'])
});
}else{
info_col_2.split(" ").forEach(function (col) {
child.weight ? setCellFormat(col + currentRow, formatStruct['body_infoData']):setCellFormat(col + currentRow, formatStruct['body_infoDataCustom'])
});
}
currentRow++;
})
}
else {
setCellVal('B' + currentRow, kpi.kpi_id);
setCellVal('C' + currentRow, kpi.name);
setCellVal('D' + currentRow, kpi.weight);
setNumFormat('D' + currentRow, '0.00');
if(total_weight==null) weighted_weight=0;
else weighted_weight = kpi.weight / total_weight;
quarter_kpi[last_quarter][index]['weighted_weight'] = weighted_weight;
setCellVal('E' + currentRow, weighted_weight);
setNumFormat('E' + currentRow, '0.00%');
setCellVal('G' + currentRow, kpi.owner_email);
setCellVal('H' + currentRow, kpi.weight);
setNumFormat('H' + currentRow, '0.00');
setCellVal('I' + currentRow, kpi.weighted_weight);
setNumFormat('I' + currentRow, '0.00%');
setCellVal('J' + currentRow, kpi.unit);
setCellVal('K' + currentRow, kpi.current_goal);
setCellVal('L' + currentRow, kpi.operator);
setCellVal(id_quarter_target + currentRow, kpi.target);
setNumFormat(id_quarter_target + currentRow, '0.00');
setCellVal(id_quarter_real + currentRow, kpi.real);
setNumFormat(id_quarter_real + currentRow, '0.00');
setCellVal(id_quarter_perf + currentRow, kpi.latest_score / 100);
setNumFormat(id_quarter_perf + currentRow, '0.00%');
setCellVal(id_quarter_score + currentRow, kpi.latest_score * weighted_weight / 100);
setNumFormat(id_quarter_score + currentRow, '0.00%');
setCellVal(id_reason + currentRow, kpi.reason);
rowScore.push(currentRow);
fillQuarterData(kpi.unique_key, kpi.name, kpi.weight, currentRow, selected_quarter, quarter_kpi, false, weighted_weight);
info_col_1.split(" ").forEach(function (col) {
kpi.weight ? setCellFormat(col + currentRow, formatStruct['body_infoData']):setCellFormat(col + currentRow, formatStruct['body_infoDataCustom'])
});
currentRow++;
}
});
//alert(ws.rowCount);
endRow = currentRow - 1;
// Tính tổng điểm hiệu suất, làm tròn cho bằng so với điểm hiệu suất bên ngoài.
setCellVal('B' + currentRow, self.translate_2['Total']);
setCellVal('D' + currentRow, total_weight);
setNumFormat('D' + currentRow, '0.00');
setCellVal(id_quarter_score + currentRow, self.quarter_score / 100);
setNumFormat(id_quarter_score + currentRow, '0.00%');
selected_quarter.forEach(function (quarter, index) {
_i = index + 1;
var sumScore=[0,0,0];
// rowName là tên cột chứa các điểm hiệu suất
var rowName=["P","T","X"];
for (var k = 1; k <= 3; k++) {
//rowScore là mảng chứa vị trí của các KPI cha, tham khảo https://cloudjet.atlassian.net/wiki/spaces/CKD/pages/7208964/i+u+ch+nh+n+i+dung+excel+b+o+c+o+v+a+trang+A4+s+a+l+i+t+ng+i+m
rowScore.forEach(function(e,index){
if(ws.getCell(rowName[k-1]+e).value!=null){
//Tính tổng của từng KPI cha theo tháng
sumScore[k-1]+=parseFloat(ws.getCell(rowName[k-1]+e).value);
}
});
// Gán giá trị của ô tổng đối chiếu theo cột điểm của từng tháng
ws.getCell(structMonthData[_i][k][3] + currentRow).value=sumScore[k-1];
// Chuyển giá trị sang % và làm tròn hết sô thập phần
ws.getCell(structMonthData[_i][k][3] + currentRow).numFmt = '0.00%';
}
});
for(var i = 0;i < rowScore.length;i++)
{
if (rowScore[i] == endRow) {
}
else if (i == rowScore.length - 1 && ws.getCell('B' + endRow).value == null ) {
ws.mergeCells('B' + (rowScore[i] + 1).toString() + ':' + 'B' + endRow);
//alert('B'+rowScore[i]+':'+'B'+(rowScore[i+1]-1).toString());
ws.mergeCells('C' + (rowScore[i] + 1).toString() + ':' + 'C' + endRow);
ws.mergeCells('D' + (rowScore[i] + 1).toString() + ':' + 'D' + endRow);
ws.mergeCells('E' + (rowScore[i] + 1).toString() + ':' + 'E' + endRow);
}
else if (ws.getCell('B' + (rowScore[i + 1] - 1).toString()).value == null){
ws.mergeCells('B' + (rowScore[i] + 1).toString() + ':' + 'B' + (rowScore[i + 1] - 1).toString());
//alert('B'+rowScore[i]+':'+'B'+(rowScore[i+1]-1).toString());
ws.mergeCells('C' + (rowScore[i] + 1).toString() + ':' + 'C' + (rowScore[i + 1] - 1).toString());
ws.mergeCells('D' + (rowScore[i] + 1).toString() + ':' + 'D' + (rowScore[i + 1] - 1).toString());
ws.mergeCells('E' + (rowScore[i] + 1).toString() + ':' + 'E' + (rowScore[i + 1] - 1).toString());
//alert('B'+rowScore[i]+':'+'B'+(rowScore[i+1]-1).toString());
}
}
// format background
info_col_1.split(" ").forEach(function (col) {
setCellFormat(col + currentRow, formatStruct['header']);
});
var date = new Date();
var today = date.getDate() + '.' + parseInt(date.getMonth() + 1) + '.' + date.getFullYear();
window.wb = wb;
self.downloadFile(wb, user_profile.email + ' ' + today + '.xlsx');
if (simple) {
}
$(".alert-loading").hide();
try {
} catch (err) {
cb();
}
function fillQuarterData(unique_key, kpi_id, kpi_weight, currentRow, quarters, quarter_kpi, is_child, parent_weighted_weight, child_weighted_weight) {
quarters.forEach(function (quarter, index1) {
if (is_child) {
quarter_kpi[quarter].forEach(function (paKpi, index2) {
kpi = $.grep(paKpi.children, function (e) {
return e.unique_key == unique_key && e.name == kpi_id;
});
console.log(paKpi);
_i = index1 + 1;
if (kpi.length == 1) {
var m = 1, n = 3;
if (self.month) m = n = self.month;
for (var k = m; k <= n; k++) {
setCellVal(structMonthData[_i][k][0] + currentRow, kpi[0]['month_' + k + '_target']);
setNumFormat(structMonthData[_i][k][0] + currentRow, '0.00');
setCellVal(structMonthData[_i][k][1] + currentRow, kpi[0]['month_' + k]);
setNumFormat(structMonthData[_i][k][1] + currentRow, '0.00');
setCellVal(structMonthData[_i][k][2] + currentRow, kpi[0]['month_' + k + '_score'] / 100);
setNumFormat(structMonthData[_i][k][2] + currentRow, '0.00%');
setCellVal(structMonthData[_i][k][3] + currentRow, (kpi[0]['month_' + k + '_score'] * child_weighted_weight) / 100);
setNumFormat(structMonthData[_i][k][3] + currentRow, '0.00%');
if (!totalVal['total_weighted_score_' + (_i * k).toString()]) {
totalVal['total_weighted_score_' + (_i * k).toString()] = 0;
totalVal['total_weighted_score_' + (_i * k).toString()] += (kpi[0]['month_' + k + '_score'] * child_weighted_weight) / 100;
}
}
}
})
} else {
kpi = $.grep(quarter_kpi[quarter], function (e) {
return e.unique_key == unique_key && e.name == kpi_id;
});
var _i = index1 + 1;
if (kpi.length == 1) {
var x = 1, y = 3;
if (self.month) x = y = self.month;
for (var j = x; j <= y; j++) {
console.log(structMonthData[_i][j][0] + currentRow);
setCellVal(structMonthData[_i][j][0] + currentRow, kpi[0]['month_' + j + '_target']);
setNumFormat(structMonthData[_i][j][0] + currentRow, '0.00');
setCellVal(structMonthData[_i][j][1] + currentRow, kpi[0]['month_' + j]);
setNumFormat(structMonthData[_i][j][1] + currentRow, '0.00');
setCellVal(structMonthData[_i][j][2] + currentRow, kpi[0]['month_' + j + '_score'] / 100);
setNumFormat(structMonthData[_i][j][2] + currentRow, '0.00%');
setCellVal(structMonthData[_i][j][3] + currentRow, (kpi[0]['month_' + j + '_score'] * parent_weighted_weight) / 100);
setNumFormat(structMonthData[_i][j][3] + currentRow, '0.00%');
}
}
}
});
}
function setNumFormat(cell, format) {
if (cell && format) {
ws.getCell(cell).numFmt = format;
}
}
function setWidthCol(col, width) {
if (col && width) ws.getColumn(col).width = width;
}
function setCellVal(cell, value, notWrap) {
if (cell)
ws.getCell(cell).value = value;
if (notWrap == null)
ws.getCell(cell).alignment = {wrapText: true};
else if (notWrap == true)
ws.getCell(cell).alignment = {wrapText: false};
}
function setCellFormat(cell, format) {
cell = ws.getCell(cell);
if (format) {
if (format.hasOwnProperty('alignment')) {
cell.alignment = format.alignment;
}
if (format.hasOwnProperty('font')) {
cell.font = format.font;
}
if (format.hasOwnProperty('fill')) {
cell.fill = format.fill;
}
if (format.hasOwnProperty('border')) {
cell.border = format.border;
}
}
}
function setFormatRange(fromCol, toCol, fromRow, toRow, format) {
fromCol = fromCol.charCodeAt(0);
toCol = toCol.charCodeAt(0);
for (var i = fromCol; i <= toCol; i++) {
for (var j = fromRow; j <= toRow; j++) {
setCellFormat(String.fromCharCode(i) + j, format);
}
}
}
}
], function (err1, res1) {
if (err1) alert(err1);
});
},
render_search_kpi: function (export_search, search_terms, cb) {
self = this;
var wb = new ExcelJS.Workbook();
wb.creator = 'Cloudjet';
var ws = wb.addWorksheet('KPI');
$('body').loading({stoppable: true, message: '{% trans "Loading..." %}'});
if (export_search) {
var selected_quarter_id = this.$route.query.quarter_id;
function filterByQuarterID(item) {
return selected_quarter_id == item.id;
}
self.selected_quarter = [self.quarter_period.filter(filterByQuarterID)[0].id];
}
async.waterfall([
async.apply(function (user_profile, selected_quarter, cb1) {
/* load kpi by quarter and reduce to quarter_kpi */
quarter_kpi = {};
async.map(selected_quarter, function (quarter, cb2) {
cloudjetRequest.ajax({
method: 'GET',
url: "/api/user_kpi/" + user_profile.user + '/',
success: function(data) {
if (data) self.quarter_score = data.kpi_score;
}
})
cloudjetRequest.ajax({
method: 'GET',
url: "/api/v2/kpi/search/",
data: {
q: search_terms,
quarter_period_id: quarter
},
success: function (data) {
if (data) quarter_kpi[quarter] = data;
cb2(null);
},
error: function () {
var msg = 'Error when loading kpi by quarter';
console.log(msg);
cb2(msg);
}
})
}, function (err2, res2) {
if (err2) cb1(err2);
cb1(null, user_profile, quarter_kpi);
});
},
self.user_profile, self.selected_quarter),
function (user_profile, quarter_kpi) {
var wb = new ExcelJS.Workbook();
wb.creator = 'Cloudjet';
var ws = wb.addWorksheet('StrategyMap');
formatStruct = {
header: {
alignment: {
vertical: 'middle',
horizontal: 'center',
wrapText: true
},
font: {
name: 'Arial',
size: 12,
color: {
argb: 'FFFFFFFF'
},
bold: true
},
fill: {
type: 'pattern',
pattern: 'solid',
bgColor: {
argb: 'FF2a7878'
},
fgColor: {
argb: 'FF2a7878'
}
}
}
};
var headerStruct = {
row: '9',
height: 40,
columns: [
{
id: 'A',
text: '',
uniname: '',
width: '0.4'
}, {
id: 'B',
text: self.translate_2['Code KPI'],
uniname: 'kpi_id',
width: '8.5'
}, {
id: 'C',
text: self.translate_2['Objectives'],
uniname: 'kpi',
width: '45'
}, {
id: 'D',
text: self.translate_2['Weighting score'],
uniname: 'weight',
width: '8.5'
}, {
id: 'E',
text: self.translate_2['Weighting ratio'],
uniname: '',
width: '8.5'
}, {
id: 'F',
text: 'KPI',
uniname: 'name',
width: '45'
}, {
id: 'G',
text: self.translate_2['Assign to'],
uniname: 'owner_email',
width: '30'
}, {
id: 'H',
text: self.translate_2['Sub- weighting score'],
uniname: 'weight',
width: '8.5'
}, {
id: 'I',
text: self.translate_2['Sub- weighting ratio'],
uniname: '',
width: '8.5'
}, {
id: 'J',
text: self.translate_2['Sub- weighting unit'],
uniname: 'unit',
width: '8.5'
}, {
id: 'K',
text: self.translate_2['Measurement method'],
uniname: 'current_goal',
width: '30'
}, {
id: 'L',
text: self.translate_2['Operator'],
uniname: 'operator',
width: '8.5'
}],
format: 'header'
};
var totalVal = {};
selected_quarter = self.selected_quarter;
selected_quarter.sort();
headerStruct['columns'].forEach(function (col) {
row = headerStruct['row'];
setCellVal(col['id'] + row, col.text);
setWidthCol(col['id'], col['width']);
setCellFormat(col['id'] + row, formatStruct['header']);
});
console.log(self.quarter_period);
structMonthData = {
1: {
1: ['M', 'N', 'O', 'P'],
2: ['Q', 'R', 'S', 'T'],
3: ['U', 'V', 'W', 'X']
},
2: {
1: ['Y', 'Z', 'AA', 'AB'],
2: ['AC', 'AD', 'AE', 'AF'],
3: ['AG', 'AH', 'AI', 'AJ']
},
3: {
1: ['AK', 'AL', 'AM', 'AN'],
2: ['AO', 'AP', 'AQ', 'AR'],
3: ['AS', 'AT', 'AU', 'AV']
},
4: {
1: ['AW', 'AX', 'AY', 'AZ'],
2: ['BA', 'BB', 'BC', 'BD'],
3: ['BE', 'BF', 'BG', 'BH']
}
};
selected_quarter.forEach(function (quarter, index) {
_row_header_month = 8;
_row_header = 9;
_i = index + 1;
var quarter_data = $.grep(self.quarter_period, function (e) {
return e.id == quarter;
});
if (quarter_data.length == 1) {
if(self.translate_2['Language']=='English'){
setCellVal(structMonthData[_i][1][0] + _row_header_month, quarter_data[0].month_1_name.replace('Tháng','') + '/' + quarter_data[0].year);
setCellVal(structMonthData[_i][2][0] + _row_header_month, quarter_data[0].month_2_name.replace('Tháng','') + '/' + quarter_data[0].year);
setCellVal(structMonthData[_i][3][0] + _row_header_month, quarter_data[0].month_3_name.replace('Tháng','') + '/' + quarter_data[0].year);
}
else{
setCellVal(structMonthData[_i][1][0] + _row_header_month, quarter_data[0].month_1_name + '/' + quarter_data[0].year);
setCellVal(structMonthData[_i][2][0] + _row_header_month, quarter_data[0].month_2_name + '/' + quarter_data[0].year);
setCellVal(structMonthData[_i][3][0] + _row_header_month, quarter_data[0].month_3_name + '/' + quarter_data[0].year);
}
}
for (var j = 1; j <= 3; j++) {
setCellVal(structMonthData[_i][j][0] + _row_header, self.translate_2['Target']);
setCellVal(structMonthData[_i][j][1] + _row_header, self.translate_2['Result']);
if(self.translate_2['Language']=='English') {
setCellVal(structMonthData[_i][j][2] + _row_header, 'Performance');
}
else{
setCellVal(structMonthData[_i][j][2] + _row_header, 'Hiệu suất');
}
setCellVal(structMonthData[_i][j][3] + _row_header, self.translate_2['Score']);
setCellFormat(structMonthData[_i][j][0] + _row_header, formatStruct['header']);
setCellFormat(structMonthData[_i][j][1] + _row_header, formatStruct['header']);
setCellFormat(structMonthData[_i][j][2] + _row_header, formatStruct['header']);
setCellFormat(structMonthData[_i][j][3] + _row_header, formatStruct['header']);
}
});
startRow = 10;
currentRow = startRow;
last_quarter = selected_quarter[selected_quarter.length - 1];
var total_weight = 0;
quarter_kpi[last_quarter].forEach(function (kpi, index) {
total_weight += kpi.weight;
});
quarter_kpi[last_quarter].forEach(function (kpi, index) {
_children = kpi['children'];
if (_children.length) {
setCellVal('B' + currentRow, kpi.kpi_id);
setCellVal('C' + currentRow, kpi.name);
setCellVal('D' + currentRow, kpi.weight);
setNumFormat('D' + currentRow, '0.00');
weighted_weight = kpi.weight / total_weight;
quarter_kpi[last_quarter][index]['weighted_weight'] = weighted_weight;
setCellVal('E' + currentRow, weighted_weight);
setNumFormat('E' + currentRow, '0.00%');
var child_total_weight = 0;
_children.forEach(function (child) {
child_total_weight += child.weight
});
_children.forEach(function (child) {
setCellVal('F' + currentRow, child.name);
setCellVal('G' + currentRow, child.owner_email);
console.log(child.owner_email)
setCellVal('H' + currentRow, child.weight);
//_child_weighted_weight = child.weight / total_weight; <-- this is wrong
//

// Trong so cua KPI con so voi cac KPI con: child.weight / child_total_weight

// Trong so cua KPI con so voi tong the cac KPI cha: child.weight / child_total_weight * weighted_weight;

//

_child_weighted_weight = child.weight / child_total_weight * weighted_weight;
setCellVal('I' + currentRow, _child_weighted_weight);
setNumFormat('I' + currentRow, '0.00%');
setCellVal('J' + currentRow, child.unit);
setCellVal('K' + currentRow, child.current_goal);
setCellVal('L' + currentRow, child.operator);
fillQuarterData(child.unique_key, child.name, child.weight, currentRow, selected_quarter, quarter_kpi, true, weighted_weight, _child_weighted_weight);
currentRow++;
})
}
else {
setCellVal('B' + currentRow, kpi.kpi_id);
setCellVal('C' + currentRow, kpi.refer_group_name);
setCellVal('D' + currentRow, kpi.weight);
setNumFormat('D' + currentRow, '0.00');
weighted_weight = kpi.weight / total_weight;
quarter_kpi[last_quarter][index]['weighted_weight'] = weighted_weight;
setCellVal('E' + currentRow, weighted_weight);
setNumFormat('E' + currentRow, '0.00%');
setCellVal('F' + currentRow, kpi.name);
setCellVal('G' + currentRow, kpi.owner_email);
setCellVal('H' + currentRow, kpi.weight);
setCellVal('I' + currentRow, kpi.weighted_weight);
setNumFormat('I' + currentRow, '0.00%');
setCellVal('J' + currentRow, kpi.unit);
setCellVal('K' + currentRow, kpi.current_goal);
setCellVal('L' + currentRow, kpi.operator);
fillQuarterData(kpi.unique_key, kpi.name, kpi.weight, currentRow, selected_quarter, quarter_kpi, false, weighted_weight);
currentRow++;
}
});
endRow = currentRow - 1;
setCellVal('B' + currentRow, self.translate_2['Total']);
setCellVal('D' + currentRow, total_weight);
setNumFormat('D' + currentRow, '0.00');
selected_quarter.forEach(function (quarter, index) {
_i = index + 1;
for (var k = 1; k <= 3; k++) {
setCellVal(structMonthData[_i][k][3] + currentRow, {
formula: 'SUM(' + structMonthData[_i][k][3] + startRow + ':' + structMonthData[_i][k][3] + endRow + ')',
value: totalVal['total_weighted_score_' + (_i * k).toString()]
});
setNumFormat(structMonthData[_i][k][3] + currentRow, '0%');
}
});
// format background
"ABCDEFGHIJKLMNOPQRSTUVWX".split("").forEach(function (col) {
setCellFormat(col + currentRow, formatStruct['header']);
});
var today = new Date().toISOString().slice(0, 10);
self.downloadFile(wb, "Export" + ' ' + today + '.xlsx');
$('body').loading('stop');
try {
} catch (err) {
cb();
}
;
function fillQuarterData(unique_key, kpi_id, kpi_weight, currentRow, quarters, quarter_kpi, is_child, parent_weighted_weight, child_weighted_weight) {
quarters.forEach(function (quarter, index1) {
if (is_child) {
quarter_kpi[quarter].forEach(function (paKpi, index2) {
kpi = $.grep(paKpi.children, function (e) {
return e.unique_key == unique_key && e.name == kpi_id;
});
_i = index1 + 1;
if (kpi.length == 1) {
console.log(kpi);
for (var k = 1; k <= 3; k++) {
setCellVal(structMonthData[_i][k][0] + currentRow, kpi[0]['month_' + k + '_target']);
setCellVal(structMonthData[_i][k][1] + currentRow, kpi[0]['month_' + k]);
setCellVal(structMonthData[_i][k][2] + currentRow, kpi[0]['month_' + k + '_score'] / 100);
setCellVal(structMonthData[_i][k][3] + currentRow, (kpi[0]['month_' + k + '_score'] * child_weighted_weight) / 100);
setNumFormat(structMonthData[_i][k][3] + currentRow, '0.00%');
setNumFormat(structMonthData[_i][k][2] + currentRow, '0.00%');
if (!totalVal['total_weighted_score_' + (_i * k).toString()]) {
totalVal['total_weighted_score_' + (_i * k).toString()] = 0;
totalVal['total_weighted_score_' + (_i * k).toString()] += (kpi[0]['month_' + k + '_score'] * child_weighted_weight) / 100;
}
}
}
})
} else {
kpi = $.grep(quarter_kpi[quarter], function (e) {
return e.unique_key == unique_key && e.name == kpi_id;
});
var _i = index1 + 1;
if (kpi.length == 1) {
console.log(kpi);
for (var j = 1; j <= 3; j++) {
console.log(structMonthData[_i][j][0] + currentRow);
setCellVal(structMonthData[_i][j][0] + currentRow, kpi[0]['month_' + j + '_target']);
setCellVal(structMonthData[_i][j][1] + currentRow, kpi[0]['month_' + j]);
setCellVal(structMonthData[_i][j][2] + currentRow, kpi[0]['month_' + j + '_score'] / 100);
setCellVal(structMonthData[_i][j][3] + currentRow, (kpi[0]['month_' + j + '_score'] * parent_weighted_weight) / 100);
setNumFormat(structMonthData[_i][j][3] + currentRow, '0.00%');
setNumFormat(structMonthData[_i][j][2] + currentRow, '0.00%');
}
}
}
});
}
function setNumFormat(cell, format) {
if (cell && format) {
ws.getCell(cell).numFmt = format;
}
}
function setWidthCol(col, width) {
if (col && width) ws.getColumn(col).width = width;
}
function setCellVal(cell, value, notWrap) {
if (cell && value)
ws.getCell(cell).value = value;
if (notWrap == null)
ws.getCell(cell).alignment = {wrapText: true};
else if (notWrap == true)
ws.getCell(cell).alignment = {wrapText: false};
}
function setCellFormat(cell, format) {
cell = ws.getCell(cell);
if (format) {
if (format.hasOwnProperty('alignment')) {
cell.alignment = format.alignment;
}
if (format.hasOwnProperty('font')) {
cell.font = format.font;
}
if (format.hasOwnProperty('fill')) {
cell.fill = format.fill;
}
if (format.hasOwnProperty('border')) {
cell.border = format.border;
}
}
}
function setFormatRange(fromCol, toCol, fromRow, toRow, format) {
fromCol = fromCol.charCodeAt(0);
toCol = toCol.charCodeAt(0);
for (var i = fromCol; i <= toCol; i++) {
for (var j = fromRow; j <= toRow; j++) {
setCellFormat(String.fromCharCode(i) + j, format);
}
}
}
}
], function (err1, res1) {
if (err1) alert(err1);
});
},
get_user_list: function () {
var self = this;
cloudjetRequest.ajax({
method: "GET",
url: "/api/user_score/",
success: function (data) {
console.log(data);
if (data) {
//console.log("==== this ====")
self.$set(self, 'user_list', data.data.profiles);
//console.log(data)
//console.log(data.profiles);
}
}
})
},
get_quarter_period: function (cb) {
self = this;
return cloudjetRequest.ajax({
method: "GET",
url: "/api/quarter/?all_quarters=true",
success: function (data) {
if (data) {
self.quarter_period = data;
// cb(null);
try {
cb(null);
} catch (err) {
}
;
}
},
})
}
},
});
Vue.filter('formatDate', function (val) {
if (val) {
val = new Date(val);
return val.getDate() + '/' + val.getMonth() + '/' + val.getFullYear()
}
})
</script>
{% endblock %}
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment