mirror of
https://gitlab.com/flectra-community/devops/odoo-2-flectra-converter.git
synced 2025-08-14 22:55:40 +00:00
[ADD] stock_mrp_kit_product_short_availability
This commit is contained in:
Renzo Meister
@@ -0,0 +1,411 @@
|
||||
|
||||
.ks_o_graph_svg_container{
|
||||
height:calc(100% - 25px);
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.ksChartTitle{
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
display: block;
|
||||
height:calc(100% - 87%);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ks_o_graph_svg_container > svg.ks_svg_chart{
|
||||
height: calc(100% - 13%);
|
||||
width:100%;
|
||||
}
|
||||
|
||||
|
||||
/* Mobile view item no scroll fix */
|
||||
.grid-stack>.grid-stack-item>.ui-draggable-handle{
|
||||
touch-action: unset;
|
||||
}
|
||||
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="36"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="35"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="34"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="33"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="32"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="31"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="30"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="29"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="28"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="27"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="26"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="25"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="24"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="23"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="22"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="21"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="20"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="19"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="18"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="17"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="16"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="15"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="14"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="13"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="12"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="11"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="10"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="9"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="8"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="7"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="6"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="5"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="4"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="3"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="2"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
@media(max-width: 767px){
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item[data-gs-width="1"]{
|
||||
width:auto !important;
|
||||
position: relative!important;
|
||||
left: 0!important;
|
||||
top: auto!important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,70 @@
|
||||
.ks_dashboard_theme_input::before {
|
||||
content: '';
|
||||
position: relative;
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.ks_color_blue::before{
|
||||
background: #337ab7;
|
||||
}
|
||||
.ks_color_red::before{
|
||||
background: #d9534f;
|
||||
}
|
||||
.ks_color_yellow::before{
|
||||
background: #f0ad4e;
|
||||
}
|
||||
.ks_color_green::before{
|
||||
background: #5cb85c;
|
||||
}
|
||||
.ks_dashboard_theme_view_render{
|
||||
display: flex;
|
||||
}
|
||||
.ks_dashboard_theme_input:checked:before{
|
||||
content: '✔';
|
||||
}
|
||||
|
||||
.ks_dashboard_theme_input_container{
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ks_dashboard_top_settings .fa-cog{
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ks_dashboard_setting_container{
|
||||
padding: 5px 10px 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ks_dashboard_setting_container:hover{
|
||||
color: #333333;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
|
||||
.ks_dashboard_ninja_toggle_menu::after {
|
||||
display:none !important;
|
||||
}
|
||||
|
||||
/*
|
||||
Define here the CSS styles applied only to Safari browsers
|
||||
(any version and any device)
|
||||
*/
|
||||
.ks_dashboard_theme_input{
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.ks_color_white::before {
|
||||
background: #ffffff;
|
||||
color:black;
|
||||
}
|
||||
|
||||
.ks_color_white {
|
||||
border: 1px solid #bdbdbd
|
||||
}
|
||||
866
flectra/ks_dashboard_ninja/static/src/css/ks_dashboard_ninja.css
Normal file
866
flectra/ks_dashboard_ninja/static/src/css/ks_dashboard_ninja.css
Normal file
@@ -0,0 +1,866 @@
|
||||
/* TO make whole page in white ks_dashboard_linkbackground(below grey screen start) : Hiding it for now */
|
||||
.ks_dashboard_form{
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.ks_dashboard_ninja{
|
||||
margin-bottom: 20px;
|
||||
display : flex;
|
||||
flex-direction : column;
|
||||
}
|
||||
|
||||
.ks_dashboard_ninja_header{
|
||||
text-align : right;
|
||||
display: flex ;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
padding: 15px 8px;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.font-weight-bold{
|
||||
font-weight : bold;
|
||||
}
|
||||
|
||||
.ks_dashboard_header_name {
|
||||
margin: 0;
|
||||
max-width: 35%;
|
||||
}
|
||||
|
||||
.ks_header_container_div{
|
||||
float:none;
|
||||
background: #f2f2f2;
|
||||
margin-top: -20px;
|
||||
box-shadow: 2px 3px 6px #bbb5b5;
|
||||
}
|
||||
|
||||
|
||||
.ks_white_background{
|
||||
background-color : white;
|
||||
}
|
||||
|
||||
|
||||
.ks_dashboard_header_name {
|
||||
margin: 0;
|
||||
width: 80vmin;
|
||||
overflow-wrap: break-word;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ks_layout_color{
|
||||
background-color : #F9F9F9;
|
||||
margin-left : 35px;
|
||||
margin-top : 20px;
|
||||
}
|
||||
|
||||
|
||||
.ks_dashboard_item{
|
||||
padding: 8px 15px 20px 15px;
|
||||
/*border : 1px solid #CDD1D9;*/
|
||||
color : black;
|
||||
margin-top: 15px;
|
||||
border-radius : 6px;
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
overflow:visible !important;
|
||||
}
|
||||
|
||||
.ks_dashboard_item:hover{
|
||||
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
|
||||
}
|
||||
|
||||
.ks_dashboard_item_header{
|
||||
text-align : right;
|
||||
min-height: 21px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_main_body{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_info{
|
||||
margin-left : 10px;
|
||||
width : calc(100% - 100px);
|
||||
}
|
||||
|
||||
.ks_dashboard_item_name{
|
||||
font-weight : bold;
|
||||
font-size: 23px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: none;
|
||||
min-height : 34px;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_domain_count{
|
||||
font-size: 28px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ks_dashboard_icon{
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.ks_dashboard_icon>img {
|
||||
width : 50px;
|
||||
height : 50px;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_header>button{
|
||||
visibility:hidden;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
.ks_dashboard_item_hover:hover .ks_dashboard_item_header_hover > button {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_menu_show > button{
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_header_hover>button:hover, .ks_dashboard_item_header_hover > .ks_chart_inner_buttons>button:hover{
|
||||
transition: 0.2s linear;
|
||||
transform: scale(1.1);
|
||||
cursor: pointer;
|
||||
color : initial;
|
||||
}
|
||||
|
||||
|
||||
.ks_item_not_click {
|
||||
cursor : move;
|
||||
}
|
||||
|
||||
|
||||
/* For Layout 2 Css */
|
||||
|
||||
.ks_dashboard_item_l2{
|
||||
display : flex;
|
||||
border-radius: 6px;
|
||||
margin-top : 15px;
|
||||
height: 132px;
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
}
|
||||
|
||||
.ks_dashboard_item_l2:hover{
|
||||
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
|
||||
}
|
||||
|
||||
|
||||
.ks_dashboard_icon_l2{
|
||||
padding : 20px;
|
||||
border-top-left-radius: 6px;
|
||||
border-bottom-left-radius: 6px;
|
||||
width: 100px;
|
||||
/* width: 36%; */
|
||||
padding-top: 35px;
|
||||
position:relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* font awesome resposive CSS for layou 2*/
|
||||
.ks_dashboard_icon_l2>span{
|
||||
font-size:5em;
|
||||
}
|
||||
|
||||
|
||||
.ks_dashboard_icon_l2>img {
|
||||
width: 60px;
|
||||
height : 60px;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_main_body_l2{
|
||||
position : relative;
|
||||
width: calc(100% - 100px);
|
||||
border-top-right-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_header_l2{
|
||||
position : absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_header_l2>button{
|
||||
visibility:hidden;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_domain_count_l2{
|
||||
font-size: 35px;
|
||||
margin-left: 20px;
|
||||
margin-top: 25px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_name_l2{
|
||||
font-weight: bold;
|
||||
font-size: medium;
|
||||
width: 80%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-left: 20px;
|
||||
margin-bottom: 10px;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* layout 3 */
|
||||
|
||||
.ks_dashboard_item_info_l3{
|
||||
padding-left: 10px;
|
||||
width: calc(100% - 60px);
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.ks_dashboard_icon_l3 {
|
||||
display: block;
|
||||
max-width: 70px;
|
||||
}
|
||||
|
||||
.ks_dashboard_icon_l3 > img{
|
||||
width: 50px;
|
||||
height : 50px;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_name_l3{
|
||||
text-transform: none;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: right;
|
||||
font-size: medium;
|
||||
min-height : 24px;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_domain_count_l3{
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
font-size: 35px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* Item Layout 4 */
|
||||
|
||||
.ks_dashboard_item_l4{
|
||||
display: flex;
|
||||
border-radius: 6px;
|
||||
margin-top: 15px;
|
||||
height: 132px;
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
}
|
||||
|
||||
.ks_dashboard_item_l4:hover{
|
||||
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
|
||||
}
|
||||
|
||||
|
||||
.ks_dashboard_icon_l4{
|
||||
padding : 20px;
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
width : 100px;
|
||||
padding-top: 35px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ks_dashboard_icon_l4>img {
|
||||
width: 60px;
|
||||
height : 60px;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_main_body_l5{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_l5{
|
||||
position : relative;
|
||||
margin-top: 15px;
|
||||
height: 132px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
}
|
||||
|
||||
.ks_dashboard_item_l5:hover{
|
||||
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
|
||||
}
|
||||
|
||||
.ks_dashboard_icon_l5{
|
||||
position : absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ks_dashboard_icon_l5 > img{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_main_body_l5{
|
||||
text-align: center;
|
||||
padding: 0 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_domain_count_l5{
|
||||
font-size: 50px;
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_name_l5{
|
||||
font-weight: bold;
|
||||
font-size: medium;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_header_l5{
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
}
|
||||
.ks_dashboard_icon_l5 span
|
||||
{
|
||||
font-size: 20px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_header_l6{
|
||||
position : absolute;
|
||||
right: 10px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_header_l6>button{
|
||||
visibility:hidden;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ks_item_click{
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
|
||||
/* Dashboard filter related CSS */
|
||||
|
||||
.ks_action_btns{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@media (max-width: 1075px){
|
||||
.ks_dashboard_header_name {
|
||||
max-width: 100%;
|
||||
}
|
||||
.ks_dashboard_top_menu{
|
||||
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ks_dashboard_header_sticky{
|
||||
position: -webkit-sticky; /* Safari */
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.ks_dashboard_datepicker_z-index{
|
||||
z-index: 10 !important;
|
||||
}
|
||||
|
||||
|
||||
/* Date Filter Selection CSS*/
|
||||
#ks_date_filter_selection{
|
||||
font-family: inherit;
|
||||
font-weight: bold;
|
||||
padding: 0px 8px 0px 8px;
|
||||
}
|
||||
|
||||
.ks_date_filter_selection_input{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.ks_date_selection_box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ks_date_input_fields{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ks_date_filter_selected > span{
|
||||
font-weight: bold;
|
||||
}
|
||||
.ks_date_filter_selected > span::before{
|
||||
font-family: FontAwesome;
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
content: "\f00c";
|
||||
}
|
||||
|
||||
.df_selection_text{
|
||||
display: block;
|
||||
padding: 3px 25px;
|
||||
font-weight: normal;
|
||||
line-height: 1.42857143;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
.df_selection_text:hover{
|
||||
color: #333333;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.ks_date_filter_dropdown{
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-color: #dee2e6 !important;
|
||||
border-radius: 3px !important;
|
||||
border-style: solid !important;
|
||||
border-width: 1.4px !important;
|
||||
}
|
||||
|
||||
.ks_btn_first_child_radius{
|
||||
border-bottom-right-radius: 0 !important;
|
||||
border-top-right-radius: 0 !important;
|
||||
border-bottom-left-radius: 3px !important;
|
||||
border-top-left-radius: 3px !important;
|
||||
height : 30px;
|
||||
}
|
||||
|
||||
.ks_btn_middle_child{
|
||||
border-radius: 0 !important;
|
||||
height: 100%;
|
||||
margin-right: 10px;
|
||||
|
||||
}
|
||||
|
||||
.ks_btn_last_child{
|
||||
border-bottom-left-radius: 0 !important;
|
||||
border-top-left-radius: 0 !important;
|
||||
height:100%;
|
||||
margin-right:5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.ks_dashboard_item_action{
|
||||
background-color : inherit;
|
||||
}
|
||||
|
||||
|
||||
/* Dev Code here */
|
||||
.ks_dashboard_header{
|
||||
border-bottom: 1px solid #cccccc;
|
||||
display : flex;
|
||||
padding: 1rem !important;
|
||||
width: 100% !important;
|
||||
background-color: #FFFFFF !important;
|
||||
color: #212529;
|
||||
justify-content: space-between !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
|
||||
.ks_select_none{
|
||||
-webkit-user-select: none; /* Chrome all / Safari all */
|
||||
-moz-user-select: none; /* Firefox all */
|
||||
-ms-user-select: none; /* IE 10+ */
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#ks_dashboard_title_input{
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
#ks_dashboard_title{
|
||||
padding-left: 1rem !important;
|
||||
}
|
||||
|
||||
|
||||
.ks_dashboard_ninja_toggle_menu{
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.ks_dashboard_ninja_toggle_menu:before {
|
||||
font-family: FontAwesome;
|
||||
top:0;
|
||||
left:-5px;
|
||||
padding-right:10px;
|
||||
content: "\f013";
|
||||
font-size: 2em;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.ks_bg_white{
|
||||
background : white;
|
||||
}
|
||||
/*
|
||||
|
||||
.dropdown-submenu {
|
||||
position: relative;
|
||||
}
|
||||
*/
|
||||
|
||||
#ks_dashboard_title_label{
|
||||
color: #777777;
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 992px){
|
||||
.ks_dashboard_ninja_toggle_menu:before {
|
||||
content: "\f142";
|
||||
}
|
||||
|
||||
|
||||
#ks_dashboard_title_label{
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
#ks_dashboard_title{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
/*Ordering is important*/
|
||||
.d-none {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.m-2 {
|
||||
margin: 0.8rem !important;
|
||||
}
|
||||
|
||||
.ks_dashboard_items_list{
|
||||
margin-top : 15px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px){
|
||||
.d-md-block {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px){
|
||||
.ks_dashboard_header{
|
||||
flex-direction: row !important;
|
||||
}
|
||||
|
||||
.d-lg-block {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.d-lg-none {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*@media (min-width: 992px){
|
||||
#ks_dashboard_title > .ks_dashboard_top_settings{
|
||||
display: none !important;
|
||||
}
|
||||
}*/
|
||||
|
||||
|
||||
.ks_oe_view_nocontent{
|
||||
margin-top: 40px;
|
||||
padding : 65px;
|
||||
max-width: none;
|
||||
background-color : white;
|
||||
font-size : 125%;
|
||||
}
|
||||
|
||||
.ks_empty_custom_dashboard{
|
||||
background: transparent url(/web/static/src/img/graph_background.png) no-repeat 0 0;
|
||||
margin-top: -15px;
|
||||
padding: 100px 0 0 137px;
|
||||
min-height: 327px;
|
||||
margin-left: -15px;
|
||||
}
|
||||
|
||||
.ks_hide{
|
||||
display:none !important;
|
||||
}
|
||||
|
||||
.ks_dashboard_kpi > .open > .ks_dashboard_menu_container {
|
||||
top: 0;
|
||||
right: -15px;
|
||||
}
|
||||
|
||||
.open > .ks_dashboard_menu_container{
|
||||
position: absolute;
|
||||
/*transform: translate3d(16px, 29px, 0px);
|
||||
top: 0px;*/
|
||||
color : black;
|
||||
will-change: transform;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_action > .caret{
|
||||
margin-left : 4px;
|
||||
}
|
||||
|
||||
.ks_dashboarditem_chart_container{
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
word-wrap: break-word;
|
||||
background-color: #fff;
|
||||
background-clip: border-box;
|
||||
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.ks_graph_container_header{
|
||||
/*padding: 0 1rem 0 1rem !important;*/
|
||||
/* padding-top: 1rem !important;
|
||||
padding-bottom: 1rem !important;*/
|
||||
align-items: center !important;
|
||||
justify-content: space-between !important;
|
||||
flex-direction: row !important;
|
||||
display: -webkit-box !important;
|
||||
display: -webkit-flex !important;
|
||||
display: flex !important;
|
||||
margin-bottom: 10px;
|
||||
|
||||
}
|
||||
|
||||
.ks_graph_container_header > .ks_dashboard_item_button_container{
|
||||
display : flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_button_container{
|
||||
color: black;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.open > .ks_dashboard_color_menu_container{
|
||||
position: absolute;
|
||||
transform: translate3d(-67px, 29px, 0px);
|
||||
top: 0px;
|
||||
/*color : black;*/
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.ks_dashboard_color_menu_container{
|
||||
min-width : 110px !important;
|
||||
}
|
||||
|
||||
|
||||
.ks_icon_container_modal_content > .modal-body{
|
||||
overflow : hidden;
|
||||
}
|
||||
.ks_icon_container_modal_content > .modal-footer{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.ks_add_item_type_button{
|
||||
margin-left : 5px;
|
||||
}
|
||||
|
||||
@media screen and (min-width:767px) {
|
||||
.ks_quick_button {
|
||||
display:block!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:767px) {
|
||||
.ks_customise_button {
|
||||
display:block!important;
|
||||
}
|
||||
}
|
||||
|
||||
.ks_display {
|
||||
display:block !important;
|
||||
}
|
||||
|
||||
|
||||
.ks_qe_dropdown_menu {
|
||||
max-width: 280px;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
left: calc(100% - 0px);
|
||||
}
|
||||
|
||||
.ks_qe_form_view {
|
||||
max-height: 250px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.ks_quick_edit_footer {
|
||||
padding-top: 1rem !important;
|
||||
padding-bottom: 0.7rem !important;
|
||||
border-top: 1px solid #dcdada;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ks_qe_footer_span {
|
||||
display: block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
-webkit-transform: rotate(-135deg) translateZ(0);
|
||||
transform: rotate(-135deg) translateZ(0);
|
||||
outline: 1px solid transparent;
|
||||
background-color: white;
|
||||
border-top: 1px solid #c7c7c7;
|
||||
border-right: 1px solid #c7c7c7;
|
||||
position: absolute;
|
||||
left: -9px;
|
||||
top: 22px;
|
||||
}
|
||||
|
||||
.ks_qe_form_view::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
}
|
||||
|
||||
.ks_qe_form_view::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
}
|
||||
|
||||
.mx-2 {
|
||||
margin: 0 0.75rem;
|
||||
}
|
||||
|
||||
.ks_quick_edit_button {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.ks_quick_edit {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ks_list_view_container{
|
||||
background : white;
|
||||
}
|
||||
|
||||
.ks_list_view_container > .table-responsive {
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.ks_list_view_layout_3 .ks_tr:nth-child(even),
|
||||
.ks_list_view_layout_1 .ks_tr:nth-child(even) {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.ks_list_view_layout_3 .ks_tr:hover,
|
||||
.ks_list_view_layout_1 .ks_tr:hover {
|
||||
color: #666666 !important;
|
||||
background-color: rgba(0, 0, 0, 0.26) !important;
|
||||
|
||||
}
|
||||
|
||||
.ks_drill_heading {
|
||||
width:40%;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
*
|
||||
.card {
|
||||
position: relative;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
word-wrap: break-word;
|
||||
background-color: #fff;
|
||||
background-clip: border-box;
|
||||
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||
border-radius: 0.25rem;
|
||||
padding:0;
|
||||
}
|
||||
.shadow {
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
|
||||
.ks_drop_dwon_menu {
|
||||
min-width: 160px !important;
|
||||
}
|
||||
|
||||
@media (max-width: 768px){
|
||||
.ks_chart_body_responsive {
|
||||
min-width: 200px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px){
|
||||
.ks_dashbord_header_responsive {
|
||||
min-width: 200px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px){
|
||||
.ks_chart_buttons_responsive {
|
||||
margin: -3px !important;
|
||||
}
|
||||
}
|
||||
|
||||
body .ks-show-dropdown {
|
||||
overflow-x: visible !important;
|
||||
overflow-y: visible !important;
|
||||
}
|
||||
|
||||
.ks-move-duplicate-dropdown {
|
||||
top: 100% !important;
|
||||
min-width: 120px !important;
|
||||
max-width: 175px;
|
||||
position: absolute !important;
|
||||
}
|
||||
@@ -0,0 +1,220 @@
|
||||
.ks_item_icon {
|
||||
width : 110px !important;
|
||||
}
|
||||
|
||||
.ks_item_icon>img {
|
||||
width : 50px;
|
||||
}
|
||||
|
||||
.ks_field_required{
|
||||
color : red;
|
||||
}
|
||||
|
||||
.ks_db_item_preview{
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.ks_not_click{
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ks_color_picker{
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.ks_color_opacity{
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
/* Icon Container in image widget render view*/
|
||||
.ks_image_widget_icon_container{
|
||||
background : transparent;
|
||||
border: none;
|
||||
margin: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ks_clear_file_button{
|
||||
width : 50%;
|
||||
background : transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ks_domain_content{
|
||||
overflow : auto;
|
||||
}
|
||||
|
||||
|
||||
/* Preview Footer Note */
|
||||
.ks_db_item_preview_footer_note{
|
||||
margin-top : 10px;
|
||||
}
|
||||
|
||||
/* Container css */
|
||||
|
||||
.ks_md_heading{
|
||||
justify-content: center;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
|
||||
/* Dashboard Menu CSS*/
|
||||
.ks_dashboard_menu_container{
|
||||
padding: 10px;
|
||||
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
|
||||
border-radius: 5px;
|
||||
min-width: 160px;
|
||||
right: -20px
|
||||
}
|
||||
|
||||
|
||||
.ks_dashboard_menu_container > li{
|
||||
margin: 2px;
|
||||
/* display:flex; */
|
||||
}
|
||||
|
||||
|
||||
.ks_dashboard_menu_container > li > button{
|
||||
margin-top : 5px;
|
||||
margin-left: 2px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.ks_dashboard_select{
|
||||
margin-top : 1rem !important;
|
||||
margin-bottom : 1rem !important;
|
||||
|
||||
}
|
||||
|
||||
.ks_move_duplicate_button{
|
||||
margin-top : 1rem !important;
|
||||
}
|
||||
|
||||
/* KPI css*/
|
||||
|
||||
.ks_dashboard_kpi_name_preview {
|
||||
font-size: 21px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-top: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ks_kpi_main_body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ks_dashboard_kpi_count_preview {
|
||||
font-weight: bold;
|
||||
width:auto;
|
||||
font-size: x-large;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ks_dashboard_kpi_arrow_preview {
|
||||
font-size: medium;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.ks_db_kpi_preview {
|
||||
width: 249px;
|
||||
}
|
||||
|
||||
.ks_dashboard_kpi {
|
||||
position : relative;
|
||||
margin-top: 15px;
|
||||
height: auto;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
}
|
||||
|
||||
.ks_target_previous {
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
padding: 0 15px 0px 15px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.ks_progress progress {
|
||||
background-color: #000;
|
||||
border: 0;
|
||||
width: 80%;
|
||||
height: 5px;
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
/*
|
||||
.ks_progress progress::-webkit-progress-bar {
|
||||
background-color: #000;
|
||||
border-radius: 9px;
|
||||
}
|
||||
.ks_progress progress::progress-value {
|
||||
background: #fff;
|
||||
border-radius: 9px;
|
||||
}
|
||||
.ks_progress progress::progress-bar {
|
||||
background: #fff;
|
||||
border-radius: 9px;
|
||||
}
|
||||
*/
|
||||
.ks_kpi_d_flex {
|
||||
display: flex!important;
|
||||
}
|
||||
|
||||
.ks_text_center {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.ks_margin_top {
|
||||
margin-top: 0.25rem !important;
|
||||
}
|
||||
|
||||
.ml-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 0 10px;
|
||||
justify-content : space-between;
|
||||
}
|
||||
|
||||
.row > .col {
|
||||
width: -webkit-fill-available;
|
||||
}
|
||||
|
||||
.ks_button_padding {
|
||||
padding:5px;
|
||||
}
|
||||
|
||||
.ks_pagiantion {
|
||||
min-width: 310px;
|
||||
}
|
||||
|
||||
.ks_pagiantion .ks_drill_heading {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.ks_pagiantion .ks_drill_heading h6{
|
||||
margin: 0 5px 0 0;
|
||||
}
|
||||
|
||||
.ks_pagiantion .ks_pager {
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
.ks_pagiantion .ks_pager button {
|
||||
padding-left: 0;
|
||||
padding-right: 5px;
|
||||
}
|
||||
@@ -0,0 +1,299 @@
|
||||
.ks_dashboard_item{
|
||||
|
||||
height: 132px;
|
||||
}
|
||||
|
||||
/* Dashboard Empty Data Pro Css */
|
||||
/*
|
||||
.ks_pie_chart_nocontent{
|
||||
background : transparent url(/ks_dashboard_ninja_pro/static/src/img/ks_empty_dashboard_item.png) no-repeat 0 0;
|
||||
color: #777777;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
*/
|
||||
|
||||
/* Form pie chart no data */
|
||||
.ks_dn_graph_preview > .nv-noData > .ks_pie_chart_nocontent{
|
||||
padding: 100px 0 0 137px;
|
||||
min-height: 327px;
|
||||
font-size: 125%;
|
||||
}
|
||||
|
||||
/* Chart No Content Css */
|
||||
.ks_chart_nocontent_form{
|
||||
display: inherit !important;
|
||||
}
|
||||
|
||||
.ks_pie_chart_nocontent > .nv-noData {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-moz-transform: translateX(-50%) translateY(-50%);
|
||||
-webkit-transform: translateX(-50%) translateY(-50%);
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
font-size: 125%;
|
||||
}
|
||||
|
||||
.ks_pie_chart_nocontent > .ksChartTitle {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
-moz-transform: translateX(-50%) translateY(-50%);
|
||||
-webkit-transform: translateX(-50%) translateY(-50%);
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
/*.ks_line_bar_chart_nocontent{
|
||||
background: transparent url(/ks_dashboard_ninja_pro/static/src/img/ks_empty_dashboard_item.png) no-repeat 0 0;
|
||||
color: #777777;
|
||||
font-size: 125%;
|
||||
background-size: 100% 100%;
|
||||
}*/
|
||||
|
||||
|
||||
|
||||
.ks_dashboarditem_id, .ks_dashboarditem_chart_container{
|
||||
overflow-x : visible !important;
|
||||
overflow-y : visible !important;
|
||||
}
|
||||
|
||||
|
||||
/* Layout 6 exception case CSS */
|
||||
.ks_dashboard_item_header_l6{
|
||||
top: 5px !important;
|
||||
}
|
||||
|
||||
|
||||
.ks_chart_card_body{
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
bottom: 8px;
|
||||
}
|
||||
|
||||
@media(max-width:575px){
|
||||
.ks_chart_card_body > canvas {
|
||||
max-width: 100% !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
@media(max-width:575px){
|
||||
.ks_pagiantion {
|
||||
min-width: 210px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*---------------------------------------------------*/
|
||||
table#ksListViewTable {
|
||||
margin: 0 auto;
|
||||
border-collapse: collapse;
|
||||
font-family: Agenda-Light, sans-serif;
|
||||
/*font-weight: 100;*/
|
||||
/*background: #333;*/ /*color: #fff;*/
|
||||
text-rendering: optimizeLegibility;
|
||||
border-radius: 5px;
|
||||
width: -webkit-fill-available;
|
||||
}
|
||||
/*table#ksListViewTable caption {
|
||||
font-size: 2rem; color: #444;
|
||||
margin: 1rem;
|
||||
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ksListViewTable.png), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ksListViewTable2.png);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left, center right;
|
||||
}*/
|
||||
/*
|
||||
table#ksListViewTable thead th { font-weight: 600; }
|
||||
table#ksListViewTable thead th, table#ksListViewTable tbody td {
|
||||
padding: .8rem; font-size: 1.4rem;
|
||||
}
|
||||
table#ksListViewTable tbody td {
|
||||
padding: .8rem; font-size: 1.4rem;
|
||||
*/
|
||||
/*color: #444; background: #eee;*//*
|
||||
|
||||
}
|
||||
table#ksListViewTable tbody tr:not(:last-child) {
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
table#ksListViewTable caption { background-image: none; }
|
||||
table#ksListViewTable thead { display: none; }
|
||||
table#ksListViewTable tbody td {
|
||||
display: block; padding: .6rem;
|
||||
}
|
||||
table#ksListViewTable tbody tr td:first-child {
|
||||
*/
|
||||
/*background: #666; color: #fff;*//*
|
||||
|
||||
}
|
||||
table#ksListViewTable tbody td:before {
|
||||
content: attr(data-th);
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
width: 6rem;
|
||||
}
|
||||
}*/
|
||||
|
||||
|
||||
#ks_item_info{
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.ks_chart_heading{
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_hover:hover .ks_dashboard_item_header_hover > .ks_chart_inner_buttons{
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.ks_chart_inner_buttons{
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ks_chart_color_options, .ks_item_size_options{
|
||||
display: block;
|
||||
padding: 3px 10px;
|
||||
font-weight: normal;
|
||||
line-height: 1.42857143;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
margin-left: 24px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.ks_chart_color_options:hover, .ks_item_size_options:hover{
|
||||
color: #333333;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.ks_pro_print_hide{
|
||||
display:none !important;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_menu_show > .ks_chart_inner_buttons{
|
||||
visibility: visible !important;
|
||||
/*position : relative;*/
|
||||
}
|
||||
|
||||
.ksMaxTableContent{
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
.ks_chart_export_menu{
|
||||
padding: 6px 0 6px 0;
|
||||
}
|
||||
|
||||
.ks_chart_export_menu_header{
|
||||
font-weight: 600;
|
||||
padding: 0 14px 10px 14px;
|
||||
}
|
||||
|
||||
.ks_chart_export_menu_item{
|
||||
padding: 5px 14px 5px 14px;
|
||||
cursor : pointer;
|
||||
}
|
||||
|
||||
.ks_chart_image_export{
|
||||
line-height: 29.5px;
|
||||
padding-top: 7.5px;
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
.ks_chart_export_menu_item{
|
||||
color: #4c4c4c;;
|
||||
}
|
||||
|
||||
|
||||
.ks_chart_export_menu_item:hover{
|
||||
color: #4d4c4c;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ks_chart_export_menu_item > i{
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.ks_dashboard_kpi {
|
||||
overflow-y : auto !important;
|
||||
}
|
||||
|
||||
.ks_overflow {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.ks_pager{
|
||||
min-width:100px;
|
||||
}
|
||||
|
||||
.ks_next_previous_bg_color{
|
||||
background-color: transparent ! important;
|
||||
}
|
||||
|
||||
|
||||
@media(max-width: 767px){
|
||||
.dropdown-max-height {
|
||||
max-height: 240px;
|
||||
overflow:auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 767px){
|
||||
.ks_date_input_fields{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 767px){
|
||||
.ks_flex_column{
|
||||
flex-direction: column !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 767px){
|
||||
.ks_date_filter_selection_input{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.ks_heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.ks_date_filters_menu_drop_down {
|
||||
max-height: 500px !important;
|
||||
overflow: auto !important;
|
||||
}
|
||||
|
||||
select {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background-image: url('/ks_dashboard_ninja/static/description/arrow_drop_down.svg');
|
||||
background-repeat: no-repeat !important;
|
||||
background-position: 110% center;
|
||||
padding-right: 10px !important;
|
||||
background-size: 17px;
|
||||
|
||||
}
|
||||
|
||||
@@ -0,0 +1,95 @@
|
||||
.ks-options-btn{
|
||||
border-radius: 25px;
|
||||
margin-top: 2%;
|
||||
visibility:collapse;
|
||||
}
|
||||
|
||||
.ks_dashboard_link{
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.ks_date_apply_clear_print,.ks_dashboard_top_menu{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
i.ks-options-plus {
|
||||
color: white;
|
||||
display: inline-block;
|
||||
border-radius: 60px;
|
||||
background: #7c7bad;
|
||||
box-shadow: 0px 0px 2px #888;
|
||||
padding: 0.5em 0.6em;
|
||||
}
|
||||
|
||||
.apply-dashboard-date-filter{
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.clear-dashboard-date-filter{
|
||||
margin-left:5px;
|
||||
}
|
||||
|
||||
#ks_start_date_picker{
|
||||
height: 30px;
|
||||
width: 100px;
|
||||
border: 1px solid #ccc;
|
||||
padding: 2px 4px;
|
||||
color: #1f1f1f;
|
||||
}
|
||||
|
||||
#ks_end_date_picker{
|
||||
height: 30px;
|
||||
width: 100px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
padding: 2px 4px;
|
||||
color: #1f1f1f;
|
||||
}
|
||||
|
||||
|
||||
.ui-datepicker .ui-datepicker-title {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.o_view_manager_content{
|
||||
font-family: arial;
|
||||
}
|
||||
.html2canvas-container {
|
||||
height: 4000px !important;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_name_l2{
|
||||
font-weight: bold;
|
||||
font-size: medium;
|
||||
width: 80%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-left: 20px;
|
||||
margin-bottom: 10px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.ks_dashboard_header_name {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.ks-dashboard-date-labels{
|
||||
font-weight: bold;
|
||||
margin-top: inherit;
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.ks_event_offer_list {
|
||||
pointer-events: none;
|
||||
color: #8080805e !important;
|
||||
}
|
||||
|
||||
.ks_event_offer_list:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,89 @@
|
||||
|
||||
.ks_icon_container_grid_view{
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.ks_icon_container_list{
|
||||
border: 1px solid transparent;
|
||||
position: relative;
|
||||
padding:2%;
|
||||
float:left;
|
||||
display:block;
|
||||
transition: 0.3s ease-in-out;
|
||||
width: 16.66%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.ks_icon_container_list:hover {
|
||||
transform: scale(1.2);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ks_icon_selected{
|
||||
background: #f2f2f2;
|
||||
border-radius: 5px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
.ks_icon_selected img{
|
||||
transform: scale(0.7) !important;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.ks_icon_container_open_button{
|
||||
display:none;
|
||||
}
|
||||
|
||||
.ks_modal_icon_input_div{
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.ks_modal_icon_input{
|
||||
padding: 6px;
|
||||
margin-top: 8px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.ks_fa_icon_search{
|
||||
float: right;
|
||||
padding: 6px 10px;
|
||||
margin-top: 8px;
|
||||
margin-right: 16px;
|
||||
background: #ddd;
|
||||
font-size: 17px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ks_search_modal_container{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.x-tree-icon-leaf, .x-tree-icon-text::before {
|
||||
font: normal normal normal 14px/1 "FontAwesome";
|
||||
display: inline-block;
|
||||
color: #5fa2dd;
|
||||
}
|
||||
@media (max-width: 475px){
|
||||
.ks_icon_container_list{
|
||||
width: 33.33%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Responsive CSS */
|
||||
@media (max-width: 1024px){
|
||||
.ks_dashboard_item_header_hover > button, .ks_dashboard_item_header_hover > .ks_chart_inner_buttons{
|
||||
visibility: visible !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ks_font {
|
||||
font-weight: bold;
|
||||
min-width: 129px
|
||||
}
|
||||
|
||||
36
flectra/ks_dashboard_ninja/static/src/css/ks_toggle_icon.css
Normal file
36
flectra/ks_dashboard_ninja/static/src/css/ks_toggle_icon.css
Normal file
@@ -0,0 +1,36 @@
|
||||
.ks_toggle_icon_input{
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ks_select_dashboard_item_toggle{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ks_select_icon_div{
|
||||
margin-right : 45px;
|
||||
}
|
||||
|
||||
.ks_item_field_info::-webkit-scrollbar,
|
||||
.ks_dashboard_custom_srollbar::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
.ks_item_field_info::-webkit-scrollbar-track,
|
||||
.ks_dashboard_custom_srollbar::-webkit-scrollbar-track,
|
||||
{
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
.ks_item_field_info::-webkit-scrollbar-thumb,
|
||||
.ks_dashboard_custom_srollbar::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
.ks_item_field_info::-webkit-scrollbar-thumb:hover,
|
||||
.ks_dashboard_custom_srollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
114
flectra/ks_dashboard_ninja/static/src/js/ks_color_picker.js
Normal file
114
flectra/ks_dashboard_ninja/static/src/js/ks_color_picker.js
Normal file
@@ -0,0 +1,114 @@
|
||||
flectra.define('ks_dashboard_ninja_list.ks_color_picker', function (require) {
|
||||
"use strict";
|
||||
|
||||
require('web.dom_ready');
|
||||
|
||||
var registry = require('web.field_registry');
|
||||
var AbstractField = require('web.AbstractField');
|
||||
var core = require('web.core');
|
||||
|
||||
var QWeb = core.qweb;
|
||||
|
||||
//Widget for color picker being used in dashboard item create view.
|
||||
//TODO : This color picker functionality can be improved a lot.
|
||||
var KsColorPicker = AbstractField.extend({
|
||||
|
||||
supportedFieldTypes: ['char'],
|
||||
|
||||
events: _.extend({}, AbstractField.prototype.events, {
|
||||
// 'move.spectrum .ks_color_picker': '_ksOnColorMove',
|
||||
'change.spectrum .ks_color_picker': '_ksOnColorChange',
|
||||
'change .ks_color_opacity': '_ksOnOpacityChange',
|
||||
'input .ks_color_opacity': '_ksOnOpacityInput'
|
||||
}),
|
||||
|
||||
init: function (parent, state, params) {
|
||||
this._super.apply(this, arguments);
|
||||
|
||||
this.jsLibs.push('/ks_dashboard_ninja/static/lib/js/spectrum.js', );
|
||||
|
||||
this.cssLibs.push('/ks_dashboard_ninja/static/lib/css/spectrum.css', );
|
||||
|
||||
},
|
||||
|
||||
|
||||
_render: function () {
|
||||
this.$el.empty();
|
||||
var ks_color_value = '#376CAE';
|
||||
var ks_color_opacity = '0.99';
|
||||
if (this.value) {
|
||||
ks_color_value = this.value.split(',')[0];
|
||||
ks_color_opacity = this.value.split(',')[1];
|
||||
};
|
||||
var $view = $(QWeb.render('ks_color_picker_opacity_view', {
|
||||
ks_color_value: ks_color_value,
|
||||
ks_color_opacity: ks_color_opacity
|
||||
}));
|
||||
|
||||
this.$el.append($view)
|
||||
|
||||
this.$el.find(".ks_color_picker").spectrum({
|
||||
color: ks_color_value,
|
||||
showInput: true,
|
||||
hideAfterPaletteSelect: true,
|
||||
|
||||
clickoutFiresChange: true,
|
||||
showInitial: true,
|
||||
preferredFormat: "rgb",
|
||||
});
|
||||
|
||||
if (this.mode === 'readonly') {
|
||||
this.$el.find('.ks_color_picker').addClass('ks_not_click');
|
||||
this.$el.find('.ks_color_opacity').addClass('ks_not_click');
|
||||
this.$el.find('.ks_color_picker').spectrum("disable");
|
||||
} else {
|
||||
this.$el.find('.ks_color_picker').spectrum("enable");
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
_ksOnColorChange: function (e, tinycolor) {
|
||||
this._setValue(tinycolor.toHexString().concat("," + this.value.split(',')[1]));
|
||||
},
|
||||
|
||||
_ksOnOpacityChange: function (event) {
|
||||
this._setValue(this.value.split(',')[0].concat("," + event.currentTarget.value));
|
||||
},
|
||||
|
||||
_ksOnOpacityInput: function (event) {
|
||||
var self = this;
|
||||
var color;
|
||||
if (self.name == "ks_background_color") {
|
||||
color = $('.ks_db_item_preview_color_picker').css("background-color")
|
||||
$('.ks_db_item_preview_color_picker').css("background-color", self.get_color_opacity_value(color, event.currentTarget.value))
|
||||
|
||||
color = $('.ks_db_item_preview_l2').css("background-color")
|
||||
$('.ks_db_item_preview_l2').css("background-color", self.get_color_opacity_value(color, event.currentTarget.value))
|
||||
|
||||
} else if (self.name == "ks_default_icon_color") {
|
||||
color = $('.ks_dashboard_icon_color_picker > span').css('color')
|
||||
$('.ks_dashboard_icon_color_picker > span').css('color', self.get_color_opacity_value(color, event.currentTarget.value))
|
||||
} else if (self.name == "ks_font_color") {
|
||||
color = $('.ks_db_item_preview').css("color")
|
||||
color = $('.ks_db_item_preview').css("color", self.get_color_opacity_value(color, event.currentTarget.value))
|
||||
}
|
||||
},
|
||||
|
||||
get_color_opacity_value: function (color, val) {
|
||||
if (color) {
|
||||
return color.replace(color.split(',')[3], val + ")");
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
});
|
||||
registry.add('ks_color_dashboard_picker', KsColorPicker);
|
||||
|
||||
return {
|
||||
KsColorPicker: KsColorPicker
|
||||
};
|
||||
|
||||
});
|
||||
@@ -0,0 +1,54 @@
|
||||
flectra.define('ks_dashboard_ninja_list.ks_dashboard_item_theme', function (require) {
|
||||
"use strict";
|
||||
|
||||
var registry = require('web.field_registry');
|
||||
var AbstractField = require('web.AbstractField');
|
||||
var core = require('web.core');
|
||||
|
||||
var QWeb = core.qweb;
|
||||
|
||||
//Widget for dashboard item theme using while creating dashboard item.
|
||||
var KsDashboardTheme = AbstractField.extend({
|
||||
|
||||
supportedFieldTypes: ['char'],
|
||||
|
||||
events: _.extend({}, AbstractField.prototype.events, {
|
||||
'click .ks_dashboard_theme_input_container': 'ks_dashboard_theme_input_container_click',
|
||||
}),
|
||||
|
||||
_render: function () {
|
||||
var self = this;
|
||||
self.$el.empty();
|
||||
var $view = $(QWeb.render('ks_dashboard_theme_view'));
|
||||
if (self.value) {
|
||||
$view.find("input[value='" + self.value + "']").prop("checked", true);
|
||||
}
|
||||
self.$el.append($view)
|
||||
|
||||
if (this.mode === 'readonly') {
|
||||
this.$el.find('.ks_dashboard_theme_view_render').addClass('ks_not_click');
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
ks_dashboard_theme_input_container_click: function (e) {
|
||||
var self = this;
|
||||
var $box = $(e.currentTarget).find(':input');
|
||||
if ($box.is(":checked")) {
|
||||
self.$el.find('.ks_dashboard_theme_input').prop('checked', false)
|
||||
$box.prop("checked", true);
|
||||
} else {
|
||||
$box.prop("checked", false);
|
||||
}
|
||||
self._setValue($box[0].value);
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
registry.add('ks_dashboard_item_theme', KsDashboardTheme);
|
||||
|
||||
return {
|
||||
KsDashboardTheme: KsDashboardTheme
|
||||
};
|
||||
|
||||
});
|
||||
2627
flectra/ks_dashboard_ninja/static/src/js/ks_dashboard_ninja.js
Normal file
2627
flectra/ks_dashboard_ninja/static/src/js/ks_dashboard_ninja.js
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,550 @@
|
||||
flectra.define('ks_dashboard_ninja_list.ks_dashboard_graph_preview', function (require) {
|
||||
"use strict";
|
||||
|
||||
var registry = require('web.field_registry');
|
||||
var AbstractField = require('web.AbstractField');
|
||||
var core = require('web.core');
|
||||
var rpc = require('web.rpc');
|
||||
var field_utils = require('web.field_utils');
|
||||
var session = require('web.session');
|
||||
var utils = require('web.utils');
|
||||
var config = require('web.config');
|
||||
var field_utils = require('web.field_utils');
|
||||
var KsGlobalFunction = require('ks_dashboard_ninja.KsGlobalFunction');
|
||||
|
||||
var QWeb = core.qweb;
|
||||
|
||||
var MAX_LEGEND_LENGTH = 25 * (Math.max(1, config.device.size_class));
|
||||
|
||||
var KsGraphPreview = AbstractField.extend({
|
||||
supportedFieldTypes: ['char'],
|
||||
|
||||
resetOnAnyFieldChange: true,
|
||||
|
||||
init: function (parent, state, params) {
|
||||
this._super.apply(this, arguments);
|
||||
|
||||
this.jsLibs.push('/ks_dashboard_ninja/static/lib/js/Chart.bundle.min.js',
|
||||
'/ks_dashboard_ninja/static/lib/js/chartjs-plugin-datalabels.js',
|
||||
);
|
||||
this.cssLibs.push(
|
||||
'/ks_dashboard_ninja/static/lib/css/Chart.min.css',
|
||||
);
|
||||
},
|
||||
|
||||
start: function () {
|
||||
var self = this;
|
||||
self.ks_set_default_chart_view();
|
||||
core.bus.on("DOM_updated", this, function () {
|
||||
if(self.shouldRenderChart && $.find('#ksMyChart').length>0) self.renderChart();
|
||||
});
|
||||
Chart.plugins.unregister(ChartDataLabels);
|
||||
return this._super();
|
||||
},
|
||||
|
||||
ks_set_default_chart_view: function () {
|
||||
Chart.plugins.register({
|
||||
afterDraw: function (chart) {
|
||||
if (chart.data.labels.length === 0) {
|
||||
// No data is present
|
||||
var ctx = chart.chart.ctx;
|
||||
var width = chart.chart.width;
|
||||
var height = chart.chart.height
|
||||
chart.clear();
|
||||
|
||||
ctx.save();
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.font = "3rem 'Lucida Grande'";
|
||||
ctx.fillText('No data available', width / 2, height / 2);
|
||||
ctx.restore();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Chart.Legend.prototype.afterFit = function() {
|
||||
var chart_type = this.chart.config.type;
|
||||
if(chart_type === "pie" || chart_type ==="doughnut" ) {
|
||||
this.height = this.height;
|
||||
}else{
|
||||
this.height = this.height + 20;
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
_render: function () {
|
||||
this.$el.empty()
|
||||
if (this.recordData.ks_dashboard_item_type !== 'ks_tile' && this.recordData.ks_dashboard_item_type !== 'ks_kpi' && this.recordData.ks_dashboard_item_type !== 'ks_list_view') {
|
||||
if(this.recordData.ks_model_id){
|
||||
if (this.recordData.ks_chart_groupby_type == 'date_type' && !this.recordData.ks_chart_date_groupby) {
|
||||
return this.$el.append($('<div>').text("Select Group by date to create chart based on date groupby"));
|
||||
}else if(this.recordData.ks_chart_data_count_type==="count" && !this.recordData.ks_chart_relation_groupby){
|
||||
this.$el.append($('<div>').text("Select Group By to create chart view"));
|
||||
}else if(this.recordData.ks_chart_data_count_type!=="count" && (this.recordData.ks_chart_measure_field.count === 0 || !this.recordData.ks_chart_relation_groupby)){
|
||||
this.$el.append($('<div>').text("Select Measure and Group By to create chart view"));
|
||||
}else if(!this.recordData.ks_chart_data_count_type){
|
||||
this.$el.append($('<div>').text("Select Chart Data Type"));
|
||||
}else{
|
||||
this._getChartData();
|
||||
}
|
||||
}else{
|
||||
this.$el.append($('<div>').text("Select a Model first."));
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_getChartData: function () {
|
||||
|
||||
var self = this;
|
||||
var field = this.recordData;
|
||||
var ks_chart_name;
|
||||
|
||||
self.shouldRenderChart = true;
|
||||
|
||||
if (field.name) ks_chart_name = field.name;
|
||||
else if (field.ks_model_name) ks_chart_name = field.ks_model_id.data.display_name;
|
||||
else ks_chart_name = "Name";
|
||||
|
||||
this.chart_type = this.recordData.ks_dashboard_item_type.split('_')[1];
|
||||
this.chart_data = JSON.parse(this.recordData.ks_chart_data);
|
||||
|
||||
var $chartContainer = $(QWeb.render('ks_chart_form_view_container', {
|
||||
ks_chart_name: ks_chart_name
|
||||
}));
|
||||
this.$el.append($chartContainer);
|
||||
|
||||
switch (this.chart_type) {
|
||||
case "pie":
|
||||
case "doughnut":
|
||||
case "polarArea":
|
||||
this.chart_family = "circle";
|
||||
break;
|
||||
case "bar":
|
||||
case "horizontalBar":
|
||||
case "line":
|
||||
case "area":
|
||||
this.chart_family = "square"
|
||||
break;
|
||||
default:
|
||||
this.chart_family = "none";
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
if(this.chart_family === "circle"){
|
||||
if (this.chart_data && this.chart_data['labels'].length > 30){
|
||||
this.$el.find(".card-body").empty().append($("<div style='font-size:20px;'>Too many records for selected Chart Type. Consider using <strong>Domain</strong> to filter records or <strong>Record Limit</strong> to limit the no of records under <strong>30.</strong>"));
|
||||
return ;
|
||||
}
|
||||
}
|
||||
|
||||
if($.find('#ksMyChart').length > 0){
|
||||
this.renderChart();
|
||||
}
|
||||
},
|
||||
|
||||
renderChart: function(){
|
||||
var self = this;
|
||||
|
||||
if(this.recordData.ks_chart_measure_field_2.count && this.recordData.ks_dashboard_item_type === 'ks_bar_chart'){
|
||||
var self = this;
|
||||
var scales = {}
|
||||
scales.yAxes = [
|
||||
{
|
||||
type: "linear",
|
||||
display: true,
|
||||
position: "left",
|
||||
id: "y-axis-0",
|
||||
gridLines:{
|
||||
display: true,
|
||||
},
|
||||
labels: {
|
||||
show:true,
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "linear",
|
||||
display: true,
|
||||
position: "right",
|
||||
id: "y-axis-1",
|
||||
labels: {
|
||||
show:true,
|
||||
},
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
callback : function(value, index, values){
|
||||
var ks_selection = self.chart_data.ks_selection;
|
||||
if (ks_selection === 'monetary'){
|
||||
var ks_currency_id = self.chart_data.ks_currency;
|
||||
var ks_data = KsGlobalFunction.ksNumFormatter(value,1);
|
||||
ks_data = KsGlobalFunction.ks_monetary(ks_data, ks_currency_id);
|
||||
return ks_data;
|
||||
}
|
||||
else if (ks_selection === 'custom'){
|
||||
var ks_field = self.chart_data.ks_field;
|
||||
return KsGlobalFunction.ksNumFormatter(value,1) +' '+ ks_field;
|
||||
}
|
||||
else{
|
||||
return KsGlobalFunction.ksNumFormatter(value,1);
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
var chart_plugin = [];
|
||||
if (this.recordData.ks_show_data_value) {
|
||||
chart_plugin.push(ChartDataLabels);
|
||||
}
|
||||
this.ksMyChart = new Chart($.find('#ksMyChart')[0], {
|
||||
type: this.chart_type === "area" ? "line" : this.chart_type,
|
||||
plugins: chart_plugin,
|
||||
data: {
|
||||
labels: this.chart_data['labels'],
|
||||
datasets: this.chart_data.datasets,
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
animation: {
|
||||
easing: 'easeInQuad',
|
||||
},
|
||||
legend: {
|
||||
display: this.recordData.ks_hide_legend
|
||||
},
|
||||
layout: {
|
||||
padding: {
|
||||
bottom: 0,
|
||||
}
|
||||
},
|
||||
scales:scales,
|
||||
plugins: {
|
||||
datalabels: {
|
||||
backgroundColor: function(context) {
|
||||
return context.dataset.backgroundColor;
|
||||
},
|
||||
borderRadius: 4,
|
||||
color: 'white',
|
||||
font: {
|
||||
weight: 'bold'
|
||||
},
|
||||
anchor: 'center',
|
||||
display: 'auto',
|
||||
clamp: true,
|
||||
formatter : function(value, ctx) {
|
||||
let sum = 0;
|
||||
let dataArr = ctx.dataset.data;
|
||||
dataArr.map(data => {
|
||||
sum += data;
|
||||
});
|
||||
let percentage = sum === 0? 0 + "%" : (value*100 / sum).toFixed(2) + "%";
|
||||
return percentage;
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
});
|
||||
if(this.chart_data && this.chart_data["datasets"].length>0){
|
||||
self.ksChartColors(this.recordData.ks_chart_item_color, this.ksMyChart, this.chart_type, this.chart_family,this.recordData.ks_show_data_value);
|
||||
}
|
||||
},
|
||||
|
||||
ksHideFunction: function(options,recordData,ksChartFamily,chartType){
|
||||
return options;
|
||||
},
|
||||
|
||||
ksChartColors: function (palette, ksMyChart, ksChartType, ksChartFamily,ks_show_data_value) {
|
||||
var self = this;
|
||||
var currentPalette = "cool";
|
||||
if (!palette) palette = currentPalette;
|
||||
currentPalette = palette;
|
||||
|
||||
/*Gradients
|
||||
The keys are percentage and the values are the color in a rgba format.
|
||||
You can have as many "color stops" (%) as you like.
|
||||
0% and 100% is not optional.*/
|
||||
var gradient;
|
||||
switch (palette) {
|
||||
case 'cool':
|
||||
gradient = {
|
||||
0: [255, 255, 255, 1],
|
||||
20: [220, 237, 200, 1],
|
||||
45: [66, 179, 213, 1],
|
||||
65: [26, 39, 62, 1],
|
||||
100: [0, 0, 0, 1]
|
||||
};
|
||||
break;
|
||||
case 'warm':
|
||||
gradient = {
|
||||
0: [255, 255, 255, 1],
|
||||
20: [254, 235, 101, 1],
|
||||
45: [228, 82, 27, 1],
|
||||
65: [77, 52, 47, 1],
|
||||
100: [0, 0, 0, 1]
|
||||
};
|
||||
break;
|
||||
case 'neon':
|
||||
gradient = {
|
||||
0: [255, 255, 255, 1],
|
||||
20: [255, 236, 179, 1],
|
||||
45: [232, 82, 133, 1],
|
||||
65: [106, 27, 154, 1],
|
||||
100: [0, 0, 0, 1]
|
||||
};
|
||||
break;
|
||||
|
||||
case 'default':
|
||||
var color_set = ['#F04F65', '#f69032', '#fdc233', '#53cfce', '#36a2ec', '#8a79fd', '#b1b5be', '#1c425c', '#8c2620', '#71ecef', '#0b4295', '#f2e6ce', '#1379e7']
|
||||
}
|
||||
|
||||
|
||||
|
||||
//Find datasets and length
|
||||
var chartType = ksMyChart.config.type;
|
||||
|
||||
switch (chartType) {
|
||||
case "pie":
|
||||
case "doughnut":
|
||||
case "polarArea":
|
||||
var datasets = ksMyChart.config.data.datasets[0];
|
||||
var setsCount = datasets.data.length;
|
||||
break;
|
||||
case "bar":
|
||||
case "horizontalBar":
|
||||
case "line":
|
||||
var datasets = ksMyChart.config.data.datasets;
|
||||
var setsCount = datasets.length;
|
||||
break;
|
||||
}
|
||||
|
||||
//Calculate colors
|
||||
var chartColors = [];
|
||||
|
||||
if (palette !== "default") {
|
||||
//Get a sorted array of the gradient keys
|
||||
var gradientKeys = Object.keys(gradient);
|
||||
gradientKeys.sort(function (a, b) {
|
||||
return +a - +b;
|
||||
});
|
||||
for (var i = 0; i < setsCount; i++) {
|
||||
var gradientIndex = (i + 1) * (100 / (setsCount + 1)); //Find where to get a color from the gradient
|
||||
for (var j = 0; j < gradientKeys.length; j++) {
|
||||
var gradientKey = gradientKeys[j];
|
||||
if (gradientIndex === +gradientKey) { //Exact match with a gradient key - just get that color
|
||||
chartColors[i] = 'rgba(' + gradient[gradientKey].toString() + ')';
|
||||
break;
|
||||
} else if (gradientIndex < +gradientKey) { //It's somewhere between this gradient key and the previous
|
||||
var prevKey = gradientKeys[j - 1];
|
||||
var gradientPartIndex = (gradientIndex - prevKey) / (gradientKey - prevKey); //Calculate where
|
||||
var color = [];
|
||||
for (var k = 0; k < 4; k++) { //Loop through Red, Green, Blue and Alpha and calculate the correct color and opacity
|
||||
color[k] = gradient[prevKey][k] - ((gradient[prevKey][k] - gradient[gradientKey][k]) * gradientPartIndex);
|
||||
if (k < 3) color[k] = Math.round(color[k]);
|
||||
}
|
||||
chartColors[i] = 'rgba(' + color.toString() + ')';
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
for (var i = 0, counter = 0; i < setsCount; i++, counter++) {
|
||||
if (counter >= color_set.length) counter = 0; // reset back to the beginning
|
||||
|
||||
chartColors.push(color_set[counter]);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
var datasets = ksMyChart.config.data.datasets;
|
||||
var options = ksMyChart.config.options;
|
||||
|
||||
options.legend.labels.usePointStyle = true;
|
||||
if (ksChartFamily == "circle") {
|
||||
if(ks_show_data_value){
|
||||
options.legend.position = 'top';
|
||||
options.layout.padding.top = 10;
|
||||
options.layout.padding.bottom = 20;
|
||||
}else{
|
||||
options.legend.position = 'bottom';
|
||||
}
|
||||
|
||||
options = this.ksHideFunction(options,this.recordData,ksChartFamily,chartType);
|
||||
|
||||
options.plugins.datalabels.align = 'center';
|
||||
options.plugins.datalabels.anchor = 'end';
|
||||
options.plugins.datalabels.borderColor = 'white';
|
||||
options.plugins.datalabels.borderRadius = 25;
|
||||
options.plugins.datalabels.borderWidth = 2;
|
||||
options.plugins.datalabels.clamp = true;
|
||||
options.plugins.datalabels.clip = false;
|
||||
|
||||
options.tooltips.callbacks = {
|
||||
title: function(tooltipItem, data) {
|
||||
var ks_self = self;
|
||||
var k_amount = data.datasets[tooltipItem[0].datasetIndex]['data'][tooltipItem[0].index];
|
||||
var ks_selection = ks_self.chart_data.ks_selection;
|
||||
if (ks_selection === 'monetary'){
|
||||
var ks_currency_id = ks_self.chart_data.ks_currency;
|
||||
k_amount = KsGlobalFunction.ks_monetary(k_amount, ks_currency_id);
|
||||
return data.datasets[tooltipItem[0].datasetIndex]['label']+" : " + k_amount
|
||||
}
|
||||
else if (ks_selection === 'custom'){
|
||||
var ks_field = ks_self.chart_data.ks_field;
|
||||
// ks_type = field_utils.format.char(ks_field);
|
||||
k_amount = field_utils.format.float(k_amount,Float64Array);
|
||||
return data.datasets[tooltipItem[0].datasetIndex]['label']+" : " + k_amount+" "+ ks_field;
|
||||
}
|
||||
else {
|
||||
k_amount = field_utils.format.float(k_amount,Float64Array);
|
||||
return data.datasets[tooltipItem[0].datasetIndex]['label']+" : " + k_amount
|
||||
} },
|
||||
label : function(tooltipItem, data) {
|
||||
return data.labels[tooltipItem.index];
|
||||
},
|
||||
|
||||
}
|
||||
for (var i = 0; i < datasets.length; i++) {
|
||||
datasets[i].backgroundColor = chartColors;
|
||||
datasets[i].borderColor = "rgba(255,255,255,1)";
|
||||
}
|
||||
if(this.recordData.ks_semi_circle_chart && (chartType === "pie" || chartType ==="doughnut" ) ){
|
||||
options.rotation = 1*Math.PI;
|
||||
options.circumference = 1*Math.PI;
|
||||
}
|
||||
} else if (ksChartFamily == "square") {
|
||||
options = this.ksHideFunction(options,this.recordData,ksChartFamily,chartType);
|
||||
|
||||
options.scales.xAxes[0].gridLines.display = false;
|
||||
options.scales.yAxes[0].ticks.beginAtZero = true;
|
||||
options.plugins.datalabels.align = 'end';
|
||||
|
||||
options.plugins.datalabels.formatter = function(value, ctx) {
|
||||
var ks_self = self;
|
||||
var ks_selection = ks_self.chart_data.ks_selection;
|
||||
if (ks_selection === 'monetary'){
|
||||
var ks_currency_id = ks_self.chart_data.ks_currency;
|
||||
var ks_data = KsGlobalFunction.ksNumFormatter(value,1);
|
||||
ks_data = KsGlobalFunction.ks_monetary(ks_data, ks_currency_id);
|
||||
return ks_data;
|
||||
}
|
||||
else if (ks_selection === 'custom'){
|
||||
var ks_field = ks_self.chart_data.ks_field;
|
||||
return KsGlobalFunction.ksNumFormatter(value,1) +' '+ ks_field;
|
||||
}
|
||||
else {
|
||||
return KsGlobalFunction.ksNumFormatter(value,1);
|
||||
}
|
||||
};
|
||||
|
||||
if(chartType==="line"){
|
||||
options.plugins.datalabels.backgroundColor= function(context) {
|
||||
return context.dataset.borderColor;
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
if(chartType === "horizontalBar"){
|
||||
options.scales.xAxes[0].ticks.callback = function(value,index,values){
|
||||
var ks_self = self;
|
||||
var ks_selection = ks_self.chart_data.ks_selection;
|
||||
if (ks_selection === 'monetary'){
|
||||
var ks_currency_id = ks_self.chart_data.ks_currency;
|
||||
var ks_data = KsGlobalFunction.ksNumFormatter(value,1);
|
||||
ks_data = KsGlobalFunction.ks_monetary(ks_data, ks_currency_id);
|
||||
return ks_data;
|
||||
}
|
||||
else if (ks_selection === 'custom'){
|
||||
var ks_field = ks_self.chart_data.ks_field;
|
||||
return KsGlobalFunction.ksNumFormatter(value,1) +' '+ ks_field;
|
||||
}
|
||||
else{
|
||||
return KsGlobalFunction.ksNumFormatter(value,1);
|
||||
}
|
||||
}
|
||||
options.scales.xAxes[0].ticks.beginAtZero = true;
|
||||
}
|
||||
else{
|
||||
options.scales.yAxes[0].ticks.callback = function(value,index,values){
|
||||
var ks_self = self;
|
||||
var ks_selection = ks_self.chart_data.ks_selection;
|
||||
if (ks_selection === 'monetary'){
|
||||
var ks_currency_id = ks_self.chart_data.ks_currency;
|
||||
var ks_data = KsGlobalFunction.ksNumFormatter(value,1);
|
||||
ks_data = KsGlobalFunction.ks_monetary(ks_data, ks_currency_id);
|
||||
return ks_data;
|
||||
}
|
||||
else if (ks_selection === 'custom'){
|
||||
var ks_field = ks_self.chart_data.ks_field;
|
||||
return KsGlobalFunction.ksNumFormatter(value,1) +' '+ ks_field;
|
||||
}
|
||||
else{
|
||||
return KsGlobalFunction.ksNumFormatter(value,1);
|
||||
}
|
||||
}
|
||||
}
|
||||
options.tooltips.callbacks = {
|
||||
label: function(tooltipItem, data) {
|
||||
var ks_self = self;
|
||||
var k_amount = data.datasets[tooltipItem.datasetIndex]['data'][tooltipItem.index];
|
||||
var ks_selection = ks_self.chart_data.ks_selection;
|
||||
if (ks_selection === 'monetary'){
|
||||
var ks_currency_id = ks_self.chart_data.ks_currency;
|
||||
k_amount = KsGlobalFunction.ks_monetary(k_amount, ks_currency_id);
|
||||
return data.datasets[tooltipItem.datasetIndex]['label']+" : " + k_amount
|
||||
}
|
||||
else if (ks_selection === 'custom'){
|
||||
var ks_field = ks_self.chart_data.ks_field;
|
||||
// ks_type = field_utils.format.char(ks_field);
|
||||
k_amount = field_utils.format.float(k_amount,Float64Array);
|
||||
return data.datasets[tooltipItem.datasetIndex]['label']+" : " + k_amount+" "+ ks_field;
|
||||
}
|
||||
else {
|
||||
k_amount = field_utils.format.float(k_amount,Float64Array);
|
||||
return data.datasets[tooltipItem.datasetIndex]['label']+" : " + k_amount
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (var i = 0; i < datasets.length; i++) {
|
||||
switch (ksChartType) {
|
||||
case "bar":
|
||||
case "horizontalBar":
|
||||
if (datasets[i].type && datasets[i].type=="line"){
|
||||
datasets[i].borderColor = chartColors[i];
|
||||
datasets[i].backgroundColor = "rgba(255,255,255,0)";
|
||||
datasets[i]['datalabels'] = {
|
||||
backgroundColor: chartColors[i],
|
||||
}
|
||||
|
||||
}
|
||||
else{
|
||||
datasets[i].backgroundColor = chartColors[i];
|
||||
datasets[i].borderColor = "rgba(255,255,255,0)";
|
||||
options.scales.xAxes[0].stacked = this.recordData.ks_bar_chart_stacked;
|
||||
options.scales.yAxes[0].stacked = this.recordData.ks_bar_chart_stacked;
|
||||
}
|
||||
break;
|
||||
case "line":
|
||||
datasets[i].borderColor = chartColors[i];
|
||||
datasets[i].backgroundColor = "rgba(255,255,255,0)";
|
||||
break;
|
||||
case "area":
|
||||
datasets[i].borderColor = chartColors[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
ksMyChart.update();
|
||||
if (this.$el.find('#ksMyChart').height()<250) this.$el.find('#ksMyChart').height(250);
|
||||
},
|
||||
|
||||
|
||||
});
|
||||
registry.add('ks_dashboard_graph_preview', KsGraphPreview);
|
||||
|
||||
return {
|
||||
KsGraphPreview: KsGraphPreview,
|
||||
};
|
||||
|
||||
});
|
||||
@@ -0,0 +1,235 @@
|
||||
flectra.define('ks_dashboard_ninja_list.ks_dashboard_item_preview', function (require) {
|
||||
"use strict";
|
||||
|
||||
var registry = require('web.field_registry');
|
||||
var AbstractField = require('web.AbstractField');
|
||||
var core = require('web.core');
|
||||
var field_utils = require('web.field_utils');
|
||||
var session = require('web.session');
|
||||
var utils = require('web.utils');
|
||||
|
||||
var QWeb = core.qweb;
|
||||
|
||||
var KsItemPreview = AbstractField.extend({
|
||||
|
||||
supportedFieldTypes: ['integer'],
|
||||
|
||||
file_type_magic_word: {
|
||||
'/': 'jpg',
|
||||
'R': 'gif',
|
||||
'i': 'png',
|
||||
'P': 'svg+xml',
|
||||
},
|
||||
|
||||
// Number Formatter into shorthand function
|
||||
ksNumFormatter: function (num, digits) {
|
||||
var negative;
|
||||
var si = [{
|
||||
value: 1,
|
||||
symbol: ""
|
||||
},
|
||||
{
|
||||
value: 1E3,
|
||||
symbol: "k"
|
||||
},
|
||||
{
|
||||
value: 1E6,
|
||||
symbol: "M"
|
||||
},
|
||||
{
|
||||
value: 1E9,
|
||||
symbol: "G"
|
||||
},
|
||||
{
|
||||
value: 1E12,
|
||||
symbol: "T"
|
||||
},
|
||||
{
|
||||
value: 1E15,
|
||||
symbol: "P"
|
||||
},
|
||||
{
|
||||
value: 1E18,
|
||||
symbol: "E"
|
||||
}
|
||||
];
|
||||
if(num<0){
|
||||
num = Math.abs(num)
|
||||
negative = true
|
||||
}
|
||||
var rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
|
||||
var i;
|
||||
for (i = si.length - 1; i > 0; i--) {
|
||||
if (num >= si[i].value) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
if(negative){
|
||||
return "-" +(num / si[i].value).toFixed(digits).replace(rx, "$1") + si[i].symbol;
|
||||
}else{
|
||||
return (num / si[i].value).toFixed(digits).replace(rx, "$1") + si[i].symbol;
|
||||
}
|
||||
},
|
||||
|
||||
ks_get_dark_color: function (color, opacity, percent) { // deprecated. See below.
|
||||
var num = parseInt(color.slice(1), 16),
|
||||
amt = Math.round(2.55 * percent),
|
||||
R = (num >> 16) + amt,
|
||||
G = (num >> 8 & 0x00FF) + amt,
|
||||
B = (num & 0x0000FF) + amt;
|
||||
return "#" + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 + (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1) + "," + opacity;
|
||||
},
|
||||
|
||||
_render: function () {
|
||||
var self = this;
|
||||
var field = self.recordData;
|
||||
var $val;
|
||||
var item_info;
|
||||
var ks_rgba_background_color, ks_rgba_font_color, ks_rgba_icon_color;
|
||||
self.$el.empty();
|
||||
ks_rgba_background_color = self._get_rgba_format(field.ks_background_color)
|
||||
ks_rgba_font_color = self._get_rgba_format(field.ks_font_color)
|
||||
ks_rgba_icon_color = self._get_rgba_format(field.ks_default_icon_color)
|
||||
item_info = {
|
||||
name: field.name,
|
||||
// count: self.record.specialData.ks_domain.nbRecords.toLocaleString('en', {useGrouping:true}),
|
||||
count: self.ksNumFormatter(field.ks_record_count, 1),
|
||||
icon_select: field.ks_icon_select,
|
||||
default_icon: field.ks_default_icon,
|
||||
icon_color: ks_rgba_icon_color,
|
||||
}
|
||||
if (field.ks_icon) {
|
||||
|
||||
if (!utils.is_bin_size(field.ks_icon)) {
|
||||
// Use magic-word technique for detecting image type
|
||||
item_info['img_src'] = 'data:image/' + (self.file_type_magic_word[field.ks_icon[0]] || 'png') + ';base64,' + field.ks_icon;
|
||||
} else {
|
||||
item_info['img_src'] = session.url('/web/image', {
|
||||
model: self.model,
|
||||
id: JSON.stringify(self.res_id),
|
||||
field: "ks_icon",
|
||||
// unique forces a reload of the image when the record has been updated
|
||||
unique: field_utils.format.datetime(self.recordData.__last_update).replace(/[^0-9]/g, ''),
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
if (!field.name) {
|
||||
if (field.ks_model_name) {
|
||||
item_info['name'] = field.ks_model_id.data.display_name;
|
||||
} else {
|
||||
item_info['name'] = "Name";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
switch (field.ks_layout) {
|
||||
case 'layout1':
|
||||
$val = $(QWeb.render('ks_db_list_preview_layout1', item_info));
|
||||
$val.css({
|
||||
"background-color": ks_rgba_background_color,
|
||||
"color": ks_rgba_font_color
|
||||
});
|
||||
break;
|
||||
|
||||
case 'layout2':
|
||||
$val = $(QWeb.render('ks_db_list_preview_layout2', item_info));
|
||||
var ks_rgba_dark_background_color_l2 = self._get_rgba_format(self.ks_get_dark_color(field.ks_background_color.split(',')[0], field.ks_background_color.split(',')[1], -10));
|
||||
$val.find('.ks_dashboard_icon_l2').css({
|
||||
"background-color": ks_rgba_dark_background_color_l2,
|
||||
});
|
||||
$val.css({
|
||||
"background-color": ks_rgba_background_color,
|
||||
"color": ks_rgba_font_color
|
||||
});
|
||||
break;
|
||||
|
||||
case 'layout3':
|
||||
$val = $(QWeb.render('ks_db_list_preview_layout3', item_info));
|
||||
$val.css({
|
||||
"background-color": ks_rgba_background_color,
|
||||
"color": ks_rgba_font_color
|
||||
});
|
||||
break;
|
||||
|
||||
case 'layout4':
|
||||
$val = $(QWeb.render('ks_db_list_preview_layout4', item_info));
|
||||
$val.find('.ks_dashboard_icon_l4').css({
|
||||
"background-color": ks_rgba_background_color,
|
||||
});
|
||||
$val.find('.ks_dashboard_item_preview_customize').css({
|
||||
"color": ks_rgba_background_color,
|
||||
});
|
||||
$val.find('.ks_dashboard_item_preview_delete').css({
|
||||
"color": ks_rgba_background_color,
|
||||
});
|
||||
$val.css({
|
||||
"border-color": ks_rgba_background_color,
|
||||
"color": ks_rgba_font_color
|
||||
});
|
||||
break;
|
||||
|
||||
case 'layout5':
|
||||
$val = $(QWeb.render('ks_db_list_preview_layout5', item_info));
|
||||
$val.css({
|
||||
"background-color": ks_rgba_background_color,
|
||||
"color": ks_rgba_font_color
|
||||
});
|
||||
break;
|
||||
|
||||
case 'layout6':
|
||||
// item_info['icon_color'] = self._get_rgba_format(self.ks_get_dark_color(field.ks_background_color.split(',')[0],field.ks_background_color.split(',')[1],-10));
|
||||
$val = $(QWeb.render('ks_db_list_preview_layout6', item_info));
|
||||
$val.css({
|
||||
"background-color": ks_rgba_background_color,
|
||||
"color": ks_rgba_font_color
|
||||
});
|
||||
|
||||
break;
|
||||
|
||||
default:
|
||||
$val = $(QWeb.render('ks_db_list_preview'));
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
self.$el.append($val);
|
||||
self.$el.append(QWeb.render('ks_db_item_preview_footer_note'));
|
||||
},
|
||||
|
||||
|
||||
_renderReadonly: function ($val) {
|
||||
|
||||
var self = this;
|
||||
var ks_icon_url;
|
||||
this._rpc({
|
||||
model: 'ks_dashboard_ninja.item',
|
||||
method: 'ks_set_preview_image',
|
||||
args: [self.res_id],
|
||||
}).then(function (data) {
|
||||
ks_icon_url = 'data:image/' + (self.file_type_magic_word[data[0]] || 'png') + ';base64,' + data;
|
||||
$val.find('.ks_db_list_image').attr('src', ks_icon_url)
|
||||
self.$el.append($val)
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
|
||||
_get_rgba_format: function (val) {
|
||||
var rgba = val.split(',')[0].match(/[A-Za-z0-9]{2}/g);
|
||||
rgba = rgba.map(function (v) {
|
||||
return parseInt(v, 16)
|
||||
}).join(",");
|
||||
return "rgba(" + rgba + "," + val.split(',')[1] + ")";
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
registry.add('ks_dashboard_item_preview', KsItemPreview);
|
||||
|
||||
return {
|
||||
KsItemPreview: KsItemPreview
|
||||
};
|
||||
|
||||
});
|
||||
@@ -0,0 +1,322 @@
|
||||
flectra.define('ks_dashboard_ninja_list.ks_dashboard_kpi_preview', function (require) {
|
||||
"use strict";
|
||||
|
||||
var registry = require('web.field_registry');
|
||||
var AbstractField = require('web.AbstractField');
|
||||
var core = require('web.core');
|
||||
var field_utils = require('web.field_utils');
|
||||
var session = require('web.session');
|
||||
var utils = require('web.utils');
|
||||
|
||||
var Qweb = core.qweb;
|
||||
|
||||
var KsKpiPreview = AbstractField.extend({
|
||||
|
||||
supportedFieldTypes: ['char'],
|
||||
|
||||
resetOnAnyFieldChange: true,
|
||||
|
||||
file_type_magic_word: {
|
||||
'/': 'jpg',
|
||||
'R': 'gif',
|
||||
'i': 'png',
|
||||
'P': 'svg+xml',
|
||||
},
|
||||
|
||||
// Number Formatter into shorthand function
|
||||
ksNumFormatter: function (num, digits) {
|
||||
var negative;
|
||||
var si = [{
|
||||
value: 1,
|
||||
symbol: ""
|
||||
},
|
||||
{
|
||||
value: 1E3,
|
||||
symbol: "k"
|
||||
},
|
||||
{
|
||||
value: 1E6,
|
||||
symbol: "M"
|
||||
},
|
||||
{
|
||||
value: 1E9,
|
||||
symbol: "G"
|
||||
},
|
||||
{
|
||||
value: 1E12,
|
||||
symbol: "T"
|
||||
},
|
||||
{
|
||||
value: 1E15,
|
||||
symbol: "P"
|
||||
},
|
||||
{
|
||||
value: 1E18,
|
||||
symbol: "E"
|
||||
}
|
||||
];
|
||||
if(num<0){
|
||||
num = Math.abs(num)
|
||||
negative = true
|
||||
}
|
||||
var rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
|
||||
var i;
|
||||
for (i = si.length - 1; i > 0; i--) {
|
||||
if (num >= si[i].value) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
if(negative){
|
||||
return "-" +(num / si[i].value).toFixed(digits).replace(rx, "$1") + si[i].symbol;
|
||||
}else{
|
||||
return (num / si[i].value).toFixed(digits).replace(rx, "$1") + si[i].symbol;
|
||||
}
|
||||
},
|
||||
|
||||
_render: function () {
|
||||
this.$el.empty();
|
||||
if(this.recordData.ks_model_id && this.recordData.ks_dashboard_item_type === "ks_kpi"){
|
||||
if(!this.recordData.ks_model_id_2 ){
|
||||
if(!(this.recordData.ks_record_count_type === 'count')){
|
||||
if(this.recordData.ks_record_field){
|
||||
this.renderKpi();
|
||||
}else{
|
||||
this.$el.append("Select a Record field ")
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.renderKpi();
|
||||
}
|
||||
}
|
||||
else{
|
||||
if(!(this.recordData.ks_record_count_type_2 === 'count') && !(this.recordData.ks_record_count_type === 'count')){
|
||||
if(this.recordData.ks_record_field_2 && this.recordData.ks_record_field){
|
||||
this.renderKpi();
|
||||
}else{
|
||||
this.$el.append("Select a Record fields ")
|
||||
}
|
||||
}
|
||||
else if(!(this.recordData.ks_record_count_type_2 === 'count') && (this.recordData.ks_record_count_type === 'count')){
|
||||
if(this.recordData.ks_record_field_2){
|
||||
this.renderKpi();
|
||||
}else{
|
||||
this.$el.append("Select a Record field")
|
||||
}
|
||||
}
|
||||
else if((this.recordData.ks_record_count_type_2 === 'count') && !(this.recordData.ks_record_count_type === 'count')){
|
||||
if(this.recordData.ks_record_field){
|
||||
this.renderKpi();
|
||||
}else{
|
||||
this.$el.append("Select a Record field")
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.renderKpi();
|
||||
}
|
||||
}
|
||||
}else {
|
||||
this.$el.append("Select a Model first")
|
||||
}
|
||||
},
|
||||
|
||||
renderKpi: function(){
|
||||
var self = this;
|
||||
var field = this.recordData;
|
||||
var kpi_data = JSON.parse(field.ks_kpi_data);
|
||||
var count_1 = kpi_data[0].record_data;
|
||||
var count_2 = kpi_data[1]?kpi_data[1].record_data: undefined;
|
||||
var target_1 = kpi_data[0].target;
|
||||
var ks_valid_date_selection = ['l_day','t_week','t_month','t_quarter','t_year'];
|
||||
var target_view = field.ks_target_view,
|
||||
pre_view = field.ks_prev_view;
|
||||
var ks_rgba_background_color = self._get_rgba_format(field.ks_background_color);
|
||||
var ks_rgba_font_color = self._get_rgba_format(field.ks_font_color)
|
||||
if(field.ks_goal_enable){
|
||||
var diffrence = 0.0
|
||||
diffrence = count_1 - target_1
|
||||
var acheive = diffrence>=0 ? true : false;
|
||||
diffrence = Math.abs(diffrence);
|
||||
var deviation = Math.round((diffrence/target_1)*100)
|
||||
if (deviation!==Infinity) deviation = deviation? field_utils.format.integer(deviation) + '%' : 0 + '%';
|
||||
}
|
||||
if(field.ks_previous_period && ks_valid_date_selection.indexOf(field.ks_date_filter_selection)>=0){
|
||||
var previous_period_data = kpi_data[0].previous_period;
|
||||
var pre_diffrence = (count_1 - previous_period_data);
|
||||
var pre_acheive = pre_diffrence>0 ? true : false;
|
||||
pre_diffrence = Math.abs(pre_diffrence);
|
||||
var pre_deviation = previous_period_data ? field_utils.format.integer(parseInt((pre_diffrence/previous_period_data)*100)) + '%' : "100%"
|
||||
}
|
||||
|
||||
var ks_rgba_icon_color = self._get_rgba_format(field.ks_default_icon_color)
|
||||
|
||||
var item_info = {
|
||||
count_1 : self.ksNumFormatter(kpi_data[0]['record_data'], 1),
|
||||
count_1_tooltip: kpi_data[0]['record_data'],
|
||||
count_2 : kpi_data[1] ? String(kpi_data[1]['record_data']):false ,
|
||||
name : field.name ? field.name : field.ks_model_id.data.display_name,
|
||||
target_progress_deviation : String(Math.round((count_1/target_1)*100)),
|
||||
icon_select : field.ks_icon_select,
|
||||
default_icon: field.ks_default_icon,
|
||||
icon_color: ks_rgba_icon_color,
|
||||
target_deviation: deviation,
|
||||
target_arrow: acheive ? 'up':'down',
|
||||
ks_enable_goal: field.ks_goal_enable,
|
||||
ks_previous_period: ks_valid_date_selection.indexOf(field.ks_date_filter_selection)>=0 ? field.ks_previous_period:false,
|
||||
target: self.ksNumFormatter(target_1, 1),
|
||||
target_tooltip: target_1,
|
||||
previous_period_data: previous_period_data,
|
||||
pre_deviation: pre_deviation,
|
||||
pre_arrow : pre_acheive ? 'up':'down',
|
||||
target_view : field.ks_target_view,
|
||||
}
|
||||
|
||||
if (item_info.target_deviation===Infinity) item_info.target_arrow = false;
|
||||
item_info.target_progress_deviation = parseInt(item_info.target_progress_deviation)? field_utils.format.integer(parseInt(item_info.target_progress_deviation)):"0"
|
||||
if (field.ks_icon) {
|
||||
if (!utils.is_bin_size(field.ks_icon)) {
|
||||
// Use magic-word technique for detecting image type
|
||||
item_info['img_src'] = 'data:image/' + (self.file_type_magic_word[field.ks_icon[0]] || 'png') + ';base64,' + field.ks_icon;
|
||||
} else {
|
||||
item_info['img_src'] = session.url('/web/image', {
|
||||
model: self.model,
|
||||
id: JSON.stringify(self.res_id),
|
||||
field: "ks_icon",
|
||||
// unique forces a reload of the image when the record has been updated
|
||||
unique: field_utils.format.datetime(self.recordData.__last_update).replace(/[^0-9]/g, ''),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var $kpi_preview;
|
||||
if(!kpi_data[1]){
|
||||
if(target_view ==="Number" || !field.ks_goal_enable) {
|
||||
$kpi_preview = $(Qweb.render("ks_kpi_preview_template",item_info));
|
||||
}
|
||||
else if (target_view === "Progress Bar" && field.ks_goal_enable){
|
||||
$kpi_preview = $(Qweb.render("ks_kpi_preview_template_3",item_info));
|
||||
$kpi_preview.find('#ks_progressbar').val(parseInt(item_info.target_progress_deviation));
|
||||
}
|
||||
|
||||
if(field.ks_goal_enable){
|
||||
if(acheive){
|
||||
$kpi_preview.find(".target_deviation").css({
|
||||
"color" : "green",
|
||||
});
|
||||
}else{
|
||||
$kpi_preview.find(".target_deviation").css({
|
||||
"color" : "red",
|
||||
});
|
||||
}
|
||||
}
|
||||
if(field.ks_previous_period && String(previous_period_data) && ks_valid_date_selection.indexOf(field.ks_date_filter_selection)>=0){
|
||||
if(pre_acheive){
|
||||
$kpi_preview.find(".pre_deviation").css({
|
||||
"color" : "green",
|
||||
});
|
||||
}else{
|
||||
$kpi_preview.find(".pre_deviation").css({
|
||||
"color" : "red",
|
||||
});
|
||||
}
|
||||
}
|
||||
if($kpi_preview.find('.row').children().length !== 2){
|
||||
$kpi_preview.find('.row').children().addClass('ks_text_center');
|
||||
}
|
||||
}
|
||||
else{
|
||||
switch(field.ks_data_comparison){
|
||||
case "None":
|
||||
var count_tooltip = String(count_1)+"/"+String(count_2);
|
||||
var count = String(self.ksNumFormatter(count_1,1))+"/"+String(self.ksNumFormatter(count_2,1));
|
||||
item_info['count'] = count;
|
||||
item_info['count_tooltip'] = count_tooltip;
|
||||
item_info['target_enable'] = false;
|
||||
$kpi_preview = $(Qweb.render("ks_kpi_preview_template_2",item_info));
|
||||
break;
|
||||
case "Sum":
|
||||
var count = count_1 + count_2
|
||||
item_info['count'] = self.ksNumFormatter(count, 1);
|
||||
item_info['count_tooltip'] = count;
|
||||
item_info['target_enable'] = field.ks_goal_enable;
|
||||
var ks_color = (target_1-count)>0? "red" : "green";
|
||||
item_info.pre_arrow = (target_1-count)>0? "down" : "up";
|
||||
item_info['ks_comparison'] = true;
|
||||
var target_deviation = (target_1-count)>0? Math.round(((target_1-count)/target_1)*100) : Math.round((Math.abs((target_1-count))/target_1)*100);
|
||||
if (target_deviation!==Infinity) item_info.target_deviation = field_utils.format.integer(target_deviation) + "%";
|
||||
else {
|
||||
item_info.pre_arrow = false;
|
||||
item_info.target_deviation = target_deviation;
|
||||
}
|
||||
var target_progress_deviation = target_1 ? Math.round((count/target_1)*100) : 0;
|
||||
item_info.target_progress_deviation = field_utils.format.integer(target_progress_deviation) + "%";
|
||||
$kpi_preview = $(Qweb.render("ks_kpi_preview_template_2",item_info));
|
||||
$kpi_preview.find('.target_deviation').css({
|
||||
"color":ks_color
|
||||
});
|
||||
if(this.recordData.ks_target_view === "Progress Bar"){
|
||||
$kpi_preview.find('#ks_progressbar').val(target_progress_deviation)
|
||||
}
|
||||
break;
|
||||
case "Percentage":
|
||||
var count = parseInt((count_1/count_2)*100);
|
||||
if(!count) count = 0;
|
||||
|
||||
item_info['count'] = count ? field_utils.format.integer(count, 1)+"%" : "0%";
|
||||
item_info['count_tooltip'] = count ? count+"%" : "0%";
|
||||
item_info.target_progress_deviation = item_info['count']
|
||||
target_1 = target_1 > 100 ? 100 : target_1;
|
||||
item_info.target = target_1 + "%";
|
||||
item_info.target_tooltip = target_1 + "%";
|
||||
item_info.pre_arrow = (target_1-count)>0? "down" : "up";
|
||||
var ks_color = (target_1-count)>0? "red" : "green";
|
||||
item_info['target_enable'] = field.ks_goal_enable;
|
||||
item_info['ks_comparison'] = false;
|
||||
item_info.target_deviation = item_info.target > 100 ? 100 : item_info.target;
|
||||
$kpi_preview = $(Qweb.render("ks_kpi_preview_template_2",item_info));
|
||||
$kpi_preview.find('.target_deviation').css({
|
||||
"color":ks_color
|
||||
});
|
||||
if(this.recordData.ks_target_view === "Progress Bar"){
|
||||
$kpi_preview.find('#ks_progressbar').val(count)
|
||||
}
|
||||
break;
|
||||
case "Ratio":
|
||||
var gcd = self.ks_get_gcd(Math.round(count_1),Math.round(count_2));
|
||||
if(count_1 && count_2){
|
||||
item_info['count_tooltip'] = count_1/gcd + ":" + count_2/gcd;
|
||||
item_info['count'] = self.ksNumFormatter(count_1/gcd, 1) + ":" + self.ksNumFormatter(count_2/gcd, 1);
|
||||
}else{
|
||||
item_info['count_tooltip'] = count_1 + ":" +count_2;
|
||||
item_info['count'] = self.ksNumFormatter(count_1, 1) + ":" + self.ksNumFormatter(count_2, 1);
|
||||
}
|
||||
item_info['target_enable'] = false;
|
||||
$kpi_preview = $(Qweb.render("ks_kpi_preview_template_2",item_info));
|
||||
break;
|
||||
}
|
||||
}
|
||||
$kpi_preview.css({
|
||||
"background-color" : ks_rgba_background_color,
|
||||
"color":ks_rgba_font_color,
|
||||
});
|
||||
this.$el.append($kpi_preview);
|
||||
},
|
||||
|
||||
ks_get_gcd : function(a, b) {
|
||||
return (b == 0) ? a : this.ks_get_gcd(b, a%b);
|
||||
},
|
||||
|
||||
_get_rgba_format: function (val) {
|
||||
var rgba = val.split(',')[0].match(/[A-Za-z0-9]{2}/g);
|
||||
rgba = rgba.map(function (v) {
|
||||
return parseInt(v, 16)
|
||||
}).join(",");
|
||||
return "rgba(" + rgba + "," + val.split(',')[1] + ")";
|
||||
}
|
||||
|
||||
});
|
||||
registry.add('ks_dashboard_kpi_preview', KsKpiPreview);
|
||||
return {
|
||||
KsKpiPreview: KsKpiPreview
|
||||
};
|
||||
|
||||
});
|
||||
@@ -0,0 +1,115 @@
|
||||
flectra.define('ks_dashboard_ninja_list.ks_dashboard_ninja_list_view_preview', function (require) {
|
||||
"use strict";
|
||||
|
||||
var registry = require('web.field_registry');
|
||||
var AbstractField = require('web.AbstractField');
|
||||
var core = require('web.core');
|
||||
var field_utils = require('web.field_utils');
|
||||
|
||||
var QWeb = core.qweb;
|
||||
|
||||
var KsListViewPreview = AbstractField.extend({
|
||||
supportedFieldTypes: ['char'],
|
||||
|
||||
resetOnAnyFieldChange: true,
|
||||
|
||||
init: function (parent, state, params) {
|
||||
this._super.apply(this, arguments);
|
||||
this.state = {};
|
||||
},
|
||||
|
||||
_render: function () {
|
||||
this.$el.empty()
|
||||
var rec = this.recordData;
|
||||
if (rec.ks_dashboard_item_type === 'ks_list_view') {
|
||||
if (rec.ks_list_view_type == "ungrouped") {
|
||||
if (rec.ks_list_view_fields.count !== 0) {
|
||||
this.ksRenderListView();
|
||||
} else {
|
||||
this.$el.append($('<div>').text("Select Fields to show in list view."));
|
||||
}
|
||||
} else if (rec.ks_list_view_type == "grouped") {
|
||||
if (rec.ks_list_view_group_fields.count !== 0 && rec.ks_chart_relation_groupby) {
|
||||
if (rec.ks_chart_groupby_type === 'relational_type' || rec.ks_chart_groupby_type === 'selection' || rec.ks_chart_groupby_type === 'other' || rec.ks_chart_groupby_type === 'date_type' && rec.ks_chart_date_groupby) {
|
||||
this.ksRenderListView();
|
||||
} else {
|
||||
this.$el.append($('<div>').text("Select Group by Date to show list data."));
|
||||
}
|
||||
|
||||
} else {
|
||||
this.$el.append($('<div>').text("Select Fields and Group By to show in list view."));
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
ksRenderListView: function () {
|
||||
var field = this.recordData;
|
||||
var ks_list_view_name;
|
||||
var list_view_data = JSON.parse(field.ks_list_view_data);
|
||||
var count = field.ks_record_count;
|
||||
if (field.name) ks_list_view_name = field.name;
|
||||
else if (field.ks_model_name) ks_list_view_name = field.ks_model_id.data.display_name;
|
||||
else ks_list_view_name = "Name";
|
||||
if (field.ks_list_view_type === "ungrouped" && list_view_data) {
|
||||
var index_data = list_view_data.date_index;
|
||||
if (index_data){
|
||||
for (var i = 0; i < index_data.length; i++) {
|
||||
for (var j = 0; j < list_view_data.data_rows.length; j++) {
|
||||
var index = index_data[i]
|
||||
var date = list_view_data.data_rows[j]["data"][index]
|
||||
if (date){
|
||||
if( list_view_data.fields_type[index] === 'date'){
|
||||
list_view_data.data_rows[j]["data"][index] = field_utils.format.date(moment(moment(date).utc(true)._d), {}, {
|
||||
timezone: false
|
||||
});}else{
|
||||
list_view_data.data_rows[j]["data"][index] = field_utils.format.datetime(moment(moment(date).utc(true)._d), {}, {
|
||||
timezone: false
|
||||
});
|
||||
}
|
||||
|
||||
}else {list_view_data.data_rows[j]["data"][index] = "";}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (field.ks_list_view_data) {
|
||||
var data_rows = list_view_data.data_rows;
|
||||
if (data_rows){
|
||||
for (var i = 0; i < list_view_data.data_rows.length; i++) {
|
||||
for (var j = 0; j < list_view_data.data_rows[0]["data"].length; j++) {
|
||||
if (typeof(list_view_data.data_rows[i].data[j]) === "number" || list_view_data.data_rows[i].data[j]) {
|
||||
if (typeof(list_view_data.data_rows[i].data[j]) === "number") {
|
||||
list_view_data.data_rows[i].data[j] = field_utils.format.float(list_view_data.data_rows[i].data[j], Float64Array)
|
||||
}
|
||||
} else {
|
||||
list_view_data.data_rows[i].data[j] = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} else list_view_data = false;
|
||||
count = list_view_data && field.ks_list_view_type === "ungrouped" ? count - list_view_data.data_rows.length : false;
|
||||
count = count ? count <=0 ? false : count : false;
|
||||
var $listViewContainer = $(QWeb.render('ks_list_view_container', {
|
||||
ks_list_view_name: ks_list_view_name,
|
||||
list_view_data: list_view_data,
|
||||
count: count,
|
||||
}));
|
||||
if (!this.recordData.ks_show_records === true) {
|
||||
$listViewContainer.find('#ks_item_info').hide();
|
||||
}
|
||||
this.$el.append($listViewContainer);
|
||||
},
|
||||
|
||||
|
||||
});
|
||||
registry.add('ks_dashboard_list_view_preview', KsListViewPreview);
|
||||
|
||||
return {
|
||||
KsListViewPreview: KsListViewPreview,
|
||||
};
|
||||
|
||||
});
|
||||
66
flectra/ks_dashboard_ninja/static/src/js/ks_domain_fix.js
Normal file
66
flectra/ks_dashboard_ninja/static/src/js/ks_domain_fix.js
Normal file
@@ -0,0 +1,66 @@
|
||||
flectra.define('ks_dashboard_ninja.domain_fix', function (require) {
|
||||
|
||||
"use strict";
|
||||
|
||||
var BasicModel = require('web.BasicModel');
|
||||
var BasicFields = require('web.basic_fields');
|
||||
var view_dialogs = require('web.view_dialogs');
|
||||
var core = require("web.core");
|
||||
|
||||
var _t = core._t;
|
||||
|
||||
// Whole Point of this file is to enable users to use %UID to calculate domain dynamically.
|
||||
BasicModel.include({
|
||||
|
||||
_fetchSpecialDomain: function(record, fieldName, fieldInfo) {
|
||||
var self = this;
|
||||
var fieldName_temp = fieldName;
|
||||
if (record._changes && record._changes[fieldName]) {
|
||||
if (record._changes[fieldName].includes("%UID") || record._changes[fieldName].includes("%MYCOMPANY")) {
|
||||
fieldName_temp = fieldName + '_temp';
|
||||
record._changes[fieldName_temp] = record._changes[fieldName]
|
||||
if (record._changes[fieldName_temp].includes("%UID")){
|
||||
record._changes[fieldName_temp] = record._changes[fieldName_temp].replace('"%UID"', record.getContext().uid);
|
||||
}
|
||||
if (record._changes[fieldName_temp].includes("%MYCOMPANY")){
|
||||
record._changes[fieldName_temp] = record._changes[fieldName_temp].replace('"%MYCOMPANY"', this.getSession().company_id)
|
||||
}
|
||||
}
|
||||
|
||||
} else if (record.data[fieldName] && (record.data[fieldName].includes("%UID") || record.data[fieldName].includes("%MYCOMPANY"))) {
|
||||
fieldName_temp = fieldName + '_temp';
|
||||
record.data[fieldName_temp] = record.data[fieldName];
|
||||
if (record.data[fieldName_temp].includes("%UID")){
|
||||
record.data[fieldName_temp] = record.data[fieldName_temp].replace('"%UID"', record.getContext().uid);
|
||||
}
|
||||
if (record.data[fieldName_temp].includes("%MYCOMPANY")){
|
||||
record.data[fieldName_temp] = record.data[fieldName_temp].replace('"%MYCOMPANY"', this.getSession().company_id)
|
||||
}
|
||||
}
|
||||
return this._super(record,fieldName_temp,fieldInfo);
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
BasicFields.FieldDomain.include({
|
||||
|
||||
_onShowSelectionButtonClick: function(e) {
|
||||
if (this.value && (this.value.includes("%MYCOMPANY") || this.value && this.value.includes("%UID")) ){
|
||||
var temp_value = this.value.includes("%MYCOMPANY") ? this.value.replace('"%MYCOMPANY"', this.getSession().company_id): this.value;
|
||||
temp_value = temp_value.includes("%UID") ? temp_value.replace('"%UID"', this.record.getContext().uid): temp_value;
|
||||
e.preventDefault();
|
||||
new view_dialogs.SelectCreateDialog(this, {
|
||||
title: _t("Selected records"),
|
||||
res_model: this._domainModel,
|
||||
domain: temp_value,
|
||||
no_create: true,
|
||||
readonly: true,
|
||||
disable_multiple_selection: true,
|
||||
}).open();
|
||||
}else{
|
||||
this._super.apply(this, arguments)
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
});
|
||||
@@ -0,0 +1,68 @@
|
||||
flectra.define('ks_dashboard_ninja.KsGlobalFunction', function (require) {
|
||||
"use strict";
|
||||
var session = require('web.session')
|
||||
|
||||
return {
|
||||
|
||||
ksNumFormatter: function (num, digits) {
|
||||
var negative;
|
||||
var si = [{
|
||||
value: 1,
|
||||
symbol: ""
|
||||
},
|
||||
{
|
||||
value: 1E3,
|
||||
symbol: "k"
|
||||
},
|
||||
{
|
||||
value: 1E6,
|
||||
symbol: "M"
|
||||
},
|
||||
{
|
||||
value: 1E9,
|
||||
symbol: "G"
|
||||
},
|
||||
{
|
||||
value: 1E12,
|
||||
symbol: "T"
|
||||
},
|
||||
{
|
||||
value: 1E15,
|
||||
symbol: "P"
|
||||
},
|
||||
{
|
||||
value: 1E18,
|
||||
symbol: "E"
|
||||
}
|
||||
];
|
||||
if(num<0){
|
||||
num = Math.abs(num)
|
||||
negative = true
|
||||
}
|
||||
var rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
|
||||
var i;
|
||||
for (i = si.length - 1; i > 0; i--) {
|
||||
if (num >= si[i].value) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
if(negative){
|
||||
return "-" +(num / si[i].value).toFixed(digits).replace(rx, "$1") + si[i].symbol;
|
||||
}else{
|
||||
return (num / si[i].value).toFixed(digits).replace(rx, "$1") + si[i].symbol;
|
||||
}
|
||||
},
|
||||
ks_monetary: function(value,currency_id){
|
||||
var currency = session.get_currency(currency_id);
|
||||
if (!currency) {
|
||||
return value;
|
||||
}
|
||||
if (currency.position === "after") {
|
||||
return value += ' ' + currency.symbol;
|
||||
} else {
|
||||
return currency.symbol + ' ' + value;
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,109 @@
|
||||
flectra.define('ks_dashboard_ninja_list.ks_image_basic_widget', function (require) {
|
||||
"use strict";
|
||||
|
||||
var core = require('web.core');
|
||||
var basic_fields = require('web.basic_fields');
|
||||
var core = require('web.core');
|
||||
var registry = require('web.field_registry');
|
||||
|
||||
var QWeb = core.qweb;
|
||||
|
||||
var KsImageWidget = basic_fields.FieldBinaryImage.extend({
|
||||
|
||||
init: function (parent, state, params) {
|
||||
this._super.apply(this, arguments);
|
||||
this.ksSelectedIcon = false;
|
||||
this.ks_icon_set = ['home', 'puzzle-piece', 'clock-o', 'comments-o', 'car', 'calendar', 'calendar-times-o', 'bar-chart', 'commenting-o', 'star-half-o', 'address-book-o', 'tachometer', 'search', 'money', 'line-chart', 'area-chart', 'pie-chart', 'check-square-o', 'users', 'shopping-cart', 'truck', 'user-circle-o', 'user-plus', 'sun-o', 'paper-plane', 'rss', 'gears', 'check', 'book'];
|
||||
},
|
||||
|
||||
template: 'KsFieldBinaryImage',
|
||||
|
||||
events: _.extend({}, basic_fields.FieldBinaryImage.prototype.events, {
|
||||
'click .ks_icon_container_list': 'ks_icon_container_list',
|
||||
'click .ks_image_widget_icon_container': 'ks_image_widget_icon_container',
|
||||
'click .ks_icon_container_open_button': 'ks_icon_container_open_button',
|
||||
'click .ks_fa_icon_search': 'ks_fa_icon_search',
|
||||
'keyup .ks_modal_icon_input': 'ks_modal_icon_input_enter',
|
||||
}),
|
||||
|
||||
_render: function () {
|
||||
var ks_self = this;
|
||||
var url = this.placeholder;
|
||||
if (ks_self.value) {
|
||||
ks_self.$('> img').remove();
|
||||
ks_self.$('> span').remove();
|
||||
$('<span>').addClass('fa fa-' + ks_self.recordData.ks_default_icon + ' fa-5x').appendTo(ks_self.$el).css('color', 'black');
|
||||
} else {
|
||||
var $img = $(QWeb.render("FieldBinaryImage-img", {
|
||||
widget: this,
|
||||
url: url
|
||||
}));
|
||||
ks_self.$('> img').remove();
|
||||
ks_self.$('> span').remove();
|
||||
ks_self.$el.prepend($img);
|
||||
}
|
||||
|
||||
var $ks_icon_container_modal = $(QWeb.render('ks_icon_container_modal_template', {
|
||||
ks_fa_icons_set: ks_self.ks_icon_set
|
||||
}));
|
||||
|
||||
$ks_icon_container_modal.prependTo(ks_self.$el);
|
||||
},
|
||||
|
||||
//This will show modal box on clicking on open icon button.
|
||||
ks_image_widget_icon_container: function (e) {
|
||||
$('#ks_icon_container_modal_id').modal({
|
||||
show: true,
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
|
||||
ks_icon_container_list: function (e) {
|
||||
var self = this;
|
||||
self.ksSelectedIcon = $(e.currentTarget).find('span').attr('id').split('.')[1]
|
||||
_.each($('.ks_icon_container_list'), function (selected_icon) {
|
||||
$(selected_icon).removeClass('ks_icon_selected');
|
||||
});
|
||||
|
||||
$(e.currentTarget).addClass('ks_icon_selected')
|
||||
$('.ks_icon_container_open_button').show()
|
||||
},
|
||||
|
||||
//Imp : Hardcoded for svg file only. If different file, change this code to dynamic.
|
||||
ks_icon_container_open_button: function (e) {
|
||||
var ks_self = this;
|
||||
ks_self._setValue(ks_self.ksSelectedIcon);
|
||||
},
|
||||
|
||||
ks_fa_icon_search: function (e) {
|
||||
var self = this
|
||||
self.$el.find('.ks_fa_search_icon').remove()
|
||||
var ks_fa_icon_name = self.$el.find('.ks_modal_icon_input')[0].value
|
||||
if (ks_fa_icon_name.slice(0, 3) === "fa-") {
|
||||
ks_fa_icon_name = ks_fa_icon_name.slice(3)
|
||||
}
|
||||
var ks_fa_icon_render = $('<div>').addClass('ks_icon_container_list ks_fa_search_icon')
|
||||
$('<span>').attr('id', 'ks.' + ks_fa_icon_name.toLocaleLowerCase()).addClass("fa fa-" + ks_fa_icon_name.toLocaleLowerCase() + " fa-4x").appendTo($(ks_fa_icon_render))
|
||||
$(ks_fa_icon_render).appendTo(self.$el.find('.ks_icon_container_grid_view'))
|
||||
},
|
||||
|
||||
ks_modal_icon_input_enter: function (e) {
|
||||
var ks_self = this
|
||||
if (e.keyCode == 13) {
|
||||
ks_self.$el.find('.ks_fa_icon_search').click()
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
registry.add('ks_image_widget', KsImageWidget);
|
||||
|
||||
|
||||
return {
|
||||
KsImageWidget: KsImageWidget,
|
||||
};
|
||||
|
||||
});
|
||||
139
flectra/ks_dashboard_ninja/static/src/js/ks_import_dashboard.js
Normal file
139
flectra/ks_dashboard_ninja/static/src/js/ks_import_dashboard.js
Normal file
@@ -0,0 +1,139 @@
|
||||
flectra.define('ks_dashboard_ninja.import_button', function (require) {
|
||||
|
||||
"use strict";
|
||||
|
||||
var core = require('web.core');
|
||||
var _t = core._t;
|
||||
var Sidebar = require('web.Sidebar');
|
||||
var ListController = require('web.ListController');
|
||||
var crash_manager = require('web.crash_manager');
|
||||
var framework = require('web.framework');
|
||||
|
||||
|
||||
ListController.include({
|
||||
|
||||
renderButtons: function($node) {
|
||||
this.ksIsAdmin = flectra.session_info.is_system;
|
||||
this._super.apply(this, arguments);
|
||||
//On Click on our custom import button, call custom import function
|
||||
if (this.$buttons) {
|
||||
var import_button = this.$buttons.find('.ks_import_button');
|
||||
var import_input_button = this.$buttons.find('.ks_input_import_button');
|
||||
import_button.click(this.proxy('ks_import_button')) ;
|
||||
import_input_button.change(this.proxy('ksImportFileChange')) ;
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
// TO hide flectra default import button (it is inserted in dom by other module)
|
||||
on_attach_callback : function(){
|
||||
var self = this;
|
||||
this._super.apply(this, arguments);
|
||||
if(this.modelName == "ks_dashboard_ninja.board"){
|
||||
$('button.o_button_import').hide();
|
||||
}
|
||||
},
|
||||
|
||||
// TO add custom dashboard export option under action button
|
||||
renderSidebar: function ($node){
|
||||
this._super.apply(this, arguments);
|
||||
|
||||
//Only for our custom model
|
||||
if(this.modelName == "ks_dashboard_ninja.board"){
|
||||
if (this.hasSidebar) {
|
||||
var other = [];
|
||||
if(flectra.session_info.is_system) {
|
||||
other.push({label: _t("Export Dashboard"),
|
||||
callback: this.ks_dashboard_export.bind(this)
|
||||
})
|
||||
}
|
||||
|
||||
if (this.is_action_enabled('delete')) {
|
||||
other.push({
|
||||
label: _t('Delete'),
|
||||
callback: this._onDeleteSelectedRecords.bind(this)
|
||||
});
|
||||
}
|
||||
var import_button = this.$el.find('.o_button_import');
|
||||
this.sidebar = new Sidebar(this, {
|
||||
editable: this.is_action_enabled('edit'),
|
||||
env: {
|
||||
context: this.model.get(this.handle, {raw: true}).getContext(),
|
||||
activeIds: this.getSelectedIds(),
|
||||
model: this.modelName,
|
||||
},
|
||||
actions: _.extend(this.toolbarActions, {other: other}),
|
||||
});
|
||||
this.sidebar.appendTo($node);
|
||||
|
||||
this._toggleSidebar();
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
ks_dashboard_export: function(){
|
||||
this.ks_on_dashboard_export(this.getSelectedIds());
|
||||
},
|
||||
|
||||
|
||||
|
||||
ks_on_dashboard_export: function (ids){
|
||||
var self = this;
|
||||
this._rpc({
|
||||
model: 'ks_dashboard_ninja.board',
|
||||
method: 'ks_dashboard_export',
|
||||
args: [JSON.stringify(ids)],
|
||||
}).then(function(result){
|
||||
var name = "dashboard_ninja";
|
||||
var data = {
|
||||
"header":name,
|
||||
"dashboard_data":result,
|
||||
}
|
||||
framework.blockUI();
|
||||
self.getSession().get_file({
|
||||
url: '/ks_dashboard_ninja/export/dashboard_json',
|
||||
data: {data:JSON.stringify(data)},
|
||||
complete: framework.unblockUI,
|
||||
error: crash_manager.rpc_error.bind(crash_manager),
|
||||
});
|
||||
})
|
||||
},
|
||||
|
||||
ks_import_button: function (e) {
|
||||
var self = this;
|
||||
$('.ks_input_import_button').click();
|
||||
},
|
||||
|
||||
ksImportFileChange : function(e){
|
||||
var self = this;
|
||||
var fileReader = new FileReader();
|
||||
fileReader.onload = function () {
|
||||
$('.ks_input_import_button').val('');
|
||||
self._rpc({
|
||||
model: 'ks_dashboard_ninja.board',
|
||||
method: 'ks_import_dashboard',
|
||||
args: [fileReader.result],
|
||||
}).then(function (result) {
|
||||
if (result==="Success") {
|
||||
framework.blockUI();
|
||||
location.reload();
|
||||
}
|
||||
});
|
||||
};
|
||||
fileReader.readAsText($('.ks_input_import_button').prop('files')[0]);
|
||||
},
|
||||
|
||||
_updateButtons : function(mode){
|
||||
if(this.$buttons){
|
||||
if(mode==="edit") this.$buttons.find('.ks_import_button').hide();
|
||||
else if(mode==="readonly") this.$buttons.find('.ks_import_button').show();
|
||||
this._super.apply(this, arguments);
|
||||
}
|
||||
},
|
||||
|
||||
});
|
||||
core.action_registry.add('ks_dashboard_ninja.import_button', ListController);
|
||||
return ListController;
|
||||
|
||||
});
|
||||
173
flectra/ks_dashboard_ninja/static/src/js/ks_quick_edit_view.js
Normal file
173
flectra/ks_dashboard_ninja/static/src/js/ks_quick_edit_view.js
Normal file
@@ -0,0 +1,173 @@
|
||||
flectra.define('ks_dashboard_ninja.quick_edit_view', function (require) {
|
||||
"use strict";
|
||||
|
||||
var core = require('web.core');
|
||||
var Widget = require("web.Widget");
|
||||
var _t = core._t;
|
||||
var QWeb = core.qweb;
|
||||
|
||||
var data = require('web.data');
|
||||
var QuickCreateFormView = require('web.FormView');
|
||||
var Context = require('web.Context')
|
||||
|
||||
|
||||
|
||||
var QuickEditView = Widget.extend({
|
||||
|
||||
template: 'ksQuickEditViewOption',
|
||||
|
||||
events: {
|
||||
'click .ks_quick_edit_action': 'ksOnQuickEditViewAction',
|
||||
},
|
||||
|
||||
init: function(parent, options) {
|
||||
this._super.apply(this, arguments);
|
||||
this.ksDashboardController = parent;
|
||||
|
||||
this.ksOriginalItemData = $.extend({}, options.item);
|
||||
this.item = options.item;
|
||||
this.item_name = options.item.name;
|
||||
|
||||
},
|
||||
|
||||
|
||||
willStart: function(){
|
||||
var self = this;
|
||||
return $.when(this._super()).then(function () {
|
||||
return self._ksCreateController();
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
_ksCreateController: function(){
|
||||
var self = this;
|
||||
|
||||
self.context = $.extend({}, flectra.session_info.user_context);
|
||||
self.context['form_view_ref']='ks_dashboard_ninja.item_quick_edit_form_view';
|
||||
self.context['res_id']=this.item.id;
|
||||
self.res_model = "ks_dashboard_ninja.item";
|
||||
self.dataset = new data.DataSet(this, this.res_model, self.context);
|
||||
self.context = self.dataset.get_context()
|
||||
var def = self.loadViews(this.dataset.model, self.context, [[false, 'list'], [false, 'form']], {});
|
||||
return $.when(def).then(function (fieldsViews) {
|
||||
self.formView = new QuickCreateFormView(fieldsViews.form, {
|
||||
context: self.context,
|
||||
modelName: self.res_model,
|
||||
userContext: self.getSession().user_context,
|
||||
currentId: self.item.id,
|
||||
index: 0,
|
||||
mode: 'edit',
|
||||
footerToButtons: true,
|
||||
default_buttons: false,
|
||||
withControlPanel: false,
|
||||
ids: [self.item.id],
|
||||
});
|
||||
var def2 = self.formView.getController(self);
|
||||
return $.when(def2).then(function (controller) {
|
||||
self.controller = controller;
|
||||
self.controller._confirmChange = self._confirmChange.bind(self);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
//This Function is replacing Controllers to intercept in between to fetch changed data and update our item view.
|
||||
_confirmChange: function(id, fields, e){
|
||||
if (e.name === 'discard_changes' && e.target.reset) {
|
||||
// the target of the discard event is a field widget. In that
|
||||
// case, we simply want to reset the specific field widget,
|
||||
// not the full view
|
||||
return e.target.reset(this.controller.model.get(e.target.dataPointID), e, true);
|
||||
}
|
||||
|
||||
var state = this.controller.model.get(this.controller.handle);
|
||||
this.controller.renderer.confirmChange(state, id, fields, e);
|
||||
return this.ks_Update_item();
|
||||
},
|
||||
|
||||
ks_Update_item : function(){
|
||||
var self = this;
|
||||
var ksChanges = this.controller.renderer.state.data;
|
||||
|
||||
if(ksChanges['name']) this.item['name']=ksChanges['name'];
|
||||
|
||||
self.item['ks_font_color'] = ksChanges['ks_font_color'];
|
||||
self.item['ks_icon_select'] = ksChanges['ks_icon_select'];
|
||||
self.item['ks_icon'] = ksChanges['ks_icon'];
|
||||
self.item['ks_model_id'] = ksChanges['ks_model_id'];
|
||||
self.item['ks_background_color'] = ksChanges['ks_background_color'];
|
||||
self.item['ks_default_icon_color'] = ksChanges['ks_default_icon_color'];
|
||||
if(ksChanges['ks_layout']) self.item['ks_layout'] = ksChanges['ks_layout'];
|
||||
self.item['ks_record_count'] = ksChanges['ks_record_count'];
|
||||
|
||||
if(ksChanges['ks_list_view_data']) self.item['ks_list_view_data'] = ksChanges['ks_list_view_data'];
|
||||
|
||||
if(ksChanges['ks_chart_data']) self.item['ks_chart_data'] = ksChanges['ks_chart_data'];
|
||||
|
||||
if(ksChanges['ks_kpi_data']) self.item['ks_kpi_data'] = ksChanges['ks_kpi_data'];
|
||||
|
||||
if(ksChanges['ks_list_view_type']) self.item['ks_list_view_type'] = ksChanges['ks_list_view_type'];
|
||||
|
||||
self.item['ks_chart_item_color'] = ksChanges['ks_chart_item_color'];
|
||||
|
||||
// self.item['ks_kpi_data'] = ksChanges['ks_kpi_data'];
|
||||
self.ksUpdateItemView();
|
||||
|
||||
},
|
||||
|
||||
|
||||
start: function () {
|
||||
var self = this;
|
||||
this._super.apply(this, arguments);
|
||||
|
||||
},
|
||||
|
||||
renderElement : function(){
|
||||
var self = this;
|
||||
self._super.apply(this, arguments);
|
||||
self.controller.appendTo(self.$el.find(".ks_item_field_info"));
|
||||
|
||||
self.trigger('canBeRendered', {});
|
||||
},
|
||||
|
||||
ksUpdateItemView : function(){
|
||||
var self = this;
|
||||
self.ksDashboardController.ksUpdateDashboardItem([self.item.id]);
|
||||
self.item_el = $.find(`#${self.item.id}.ks_dashboarditem_id`);
|
||||
|
||||
},
|
||||
|
||||
ksDiscardChanges: function(){
|
||||
var self = this;
|
||||
self.ksDashboardController.ksFetchUpdateItem(self.item.id);
|
||||
self.destroy();
|
||||
},
|
||||
|
||||
|
||||
ksOnQuickEditViewAction : function(e){
|
||||
var self = this;
|
||||
self.need_reset = false;
|
||||
var options = {'need_item_reload' : false}
|
||||
if(e.currentTarget.dataset['ksItemAction'] === 'saveItemInfo'){
|
||||
this.controller.saveRecord().then(function(){
|
||||
self.ksDiscardChanges();
|
||||
})
|
||||
}else if(e.currentTarget.dataset['ksItemAction'] === 'fullItemInfo'){
|
||||
this.trigger('openFullItemForm', {});
|
||||
}else{
|
||||
self.ksDiscardChanges();
|
||||
}
|
||||
},
|
||||
|
||||
destroy: function (options) {
|
||||
this.trigger('canBeDestroyed', {});
|
||||
this.controller.destroy();
|
||||
this.controller = undefined;
|
||||
this._super();
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
return {
|
||||
QuickEditView: QuickEditView,
|
||||
};
|
||||
});
|
||||
109
flectra/ks_dashboard_ninja/static/src/js/ks_widget_toggle.js
Normal file
109
flectra/ks_dashboard_ninja/static/src/js/ks_widget_toggle.js
Normal file
@@ -0,0 +1,109 @@
|
||||
flectra.define('ks_dashboard_ninja_list.ks_widget_toggle', function (require) {
|
||||
"use strict";
|
||||
|
||||
var registry = require('web.field_registry');
|
||||
var AbstractField = require('web.AbstractField');
|
||||
var core = require('web.core');
|
||||
|
||||
|
||||
var QWeb = core.qweb;
|
||||
|
||||
|
||||
var KsWidgetToggle = AbstractField.extend({
|
||||
|
||||
supportedFieldTypes: ['char'],
|
||||
|
||||
events: _.extend({}, AbstractField.prototype.events, {
|
||||
'change .ks_toggle_icon_input': 'ks_toggle_icon_input_click',
|
||||
}),
|
||||
|
||||
_render: function () {
|
||||
var self = this;
|
||||
self.$el.empty();
|
||||
|
||||
|
||||
var $view = $(QWeb.render('ks_widget_toggle'));
|
||||
if (self.value) {
|
||||
$view.find("input[value='" + self.value + "']").prop("checked", true);
|
||||
}
|
||||
this.$el.append($view)
|
||||
|
||||
if (this.mode === 'readonly') {
|
||||
this.$el.find('.ks_select_dashboard_item_toggle').addClass('ks_not_click');
|
||||
}
|
||||
},
|
||||
|
||||
ks_toggle_icon_input_click: function (e) {
|
||||
var self = this;
|
||||
self._setValue(e.currentTarget.value);
|
||||
}
|
||||
});
|
||||
|
||||
var KsWidgetToggleKPI = AbstractField.extend({
|
||||
|
||||
supportedFieldTypes: ['char'],
|
||||
|
||||
events: _.extend({}, AbstractField.prototype.events, {
|
||||
'change .ks_toggle_icon_input': 'ks_toggle_icon_input_click',
|
||||
}),
|
||||
|
||||
_render: function () {
|
||||
var self = this;
|
||||
self.$el.empty();
|
||||
|
||||
|
||||
var $view = $(QWeb.render('ks_widget_toggle_kpi'));
|
||||
if (self.value) {
|
||||
$view.find("input[value='" + self.value + "']").prop("checked", true);
|
||||
}
|
||||
this.$el.append($view)
|
||||
|
||||
if (this.mode === 'readonly') {
|
||||
this.$el.find('.ks_select_dashboard_item_toggle').addClass('ks_not_click');
|
||||
}
|
||||
},
|
||||
ks_toggle_icon_input_click: function (e) {
|
||||
var self = this;
|
||||
self._setValue(e.currentTarget.value);
|
||||
}
|
||||
});
|
||||
|
||||
var KsWidgetToggleKpiTarget = AbstractField.extend({
|
||||
|
||||
supportedFieldTypes: ['char'],
|
||||
|
||||
events: _.extend({}, AbstractField.prototype.events, {
|
||||
'change .ks_toggle_icon_input': 'ks_toggle_icon_input_click',
|
||||
}),
|
||||
|
||||
_render: function () {
|
||||
var self = this;
|
||||
self.$el.empty();
|
||||
|
||||
|
||||
var $view = $(QWeb.render('ks_widget_toggle_kpi_target_view'));
|
||||
if (self.value) {
|
||||
$view.find("input[value='" + self.value + "']").prop("checked", true);
|
||||
}
|
||||
this.$el.append($view)
|
||||
|
||||
if (this.mode === 'readonly') {
|
||||
this.$el.find('.ks_select_dashboard_item_toggle').addClass('ks_not_click');
|
||||
}
|
||||
},
|
||||
|
||||
ks_toggle_icon_input_click: function (e) {
|
||||
var self = this;
|
||||
self._setValue(e.currentTarget.value);
|
||||
}
|
||||
});
|
||||
|
||||
registry.add('ks_widget_toggle', KsWidgetToggle);
|
||||
registry.add('ks_widget_toggle_kpi', KsWidgetToggleKPI);
|
||||
registry.add('ks_widget_toggle_kpi_target', KsWidgetToggleKpiTarget);
|
||||
return {
|
||||
KsWidgetToggle: KsWidgetToggle,
|
||||
KsWidgetToggleKPI: KsWidgetToggleKPI,
|
||||
KsWidgetToggleKpiTarget :KsWidgetToggleKpiTarget
|
||||
};
|
||||
});
|
||||
@@ -0,0 +1,17 @@
|
||||
.ks_dashboard_main_content > .grid-stack > .grid-stack-item {
|
||||
@gridstack-columns: 36;
|
||||
min-width: (100% / @gridstack-columns);
|
||||
|
||||
.generate-columns(36);
|
||||
.generate-columns(@n, @i: 1) when (@i =< @n) {
|
||||
|
||||
&[data-gs-width="@{i}"] {
|
||||
width: (@i * 100% / @n) !important;
|
||||
}
|
||||
&[data-gs-x='@{i}'] { left: (100% / @gridstack-columns) * @i !important; }
|
||||
&[data-gs-min-width='@{i}'] { min-width: (100% / @gridstack-columns) * @i !important; }
|
||||
&[data-gs-max-width='@{i}'] { max-width: (100% / @gridstack-columns) * @i !important; }
|
||||
|
||||
.generate-columns(@n, (@i + 1));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,489 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
|
||||
<templates>
|
||||
|
||||
<!--Basic Field Image replace view for icon set-->
|
||||
<t t-name="KsFieldBinaryImage">
|
||||
<div class="o_field_image" aria-atomic="true">
|
||||
<t t-if="widget.mode !== 'readonly'">
|
||||
<div class="o_form_image_controls" style="display: flex;">
|
||||
<button type="button" class=" fa fa-image fa-lg ks_image_widget_icon_container float-left"
|
||||
title="Select Icons">
|
||||
</button>
|
||||
<button class="fa fa-trash-o fa-lg float-right o_clear_file_button ks_clear_file_button" title="Clear"
|
||||
aria-label="Clear"/>
|
||||
<span class="o_form_binary_progress">Uploading...</span>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<!--Icon Container Modal Template : Modal TO show When clicked on Open Icons Container-->
|
||||
<t t-name="ks_icon_container_modal_template">
|
||||
<div class="modal fade" id="ks_icon_container_modal_id" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
|
||||
<!-- Modal content-->
|
||||
<div class="modal-content ks_icon_container_modal_content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Select Icon</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="ks_modal_icon_input_div">
|
||||
<div class="ks_search_modal_container">
|
||||
<input type="search" id="site-search" placeholder="Search fa-icon.."
|
||||
name="fa Icon Input" aria-label="Search through site content"
|
||||
class="ks_modal_icon_input"/>
|
||||
|
||||
<button class="ks_fa_icon_search">
|
||||
<i class="fa fa-search"/>
|
||||
</button>
|
||||
</div>
|
||||
<section
|
||||
style="margin-top: 12px;font-size: 14px;text-align: justify;color: black;background:transparent;">
|
||||
<strong>
|
||||
Note:
|
||||
</strong>
|
||||
Please use Font Awesome 4.7.0 icons only. E.g. 'fa-bell' or 'bell'.
|
||||
For more information visit
|
||||
<a href="https://fontawesome.com/v4.7.0/icons/" target="_blank">Font Awesome 4.7.0</a>
|
||||
</section>
|
||||
</div>
|
||||
<div class="ks_icon_container_grid_view">
|
||||
<t t-foreach="ks_fa_icons_set" t-as="fa_icon">
|
||||
<div class="ks_icon_container_list" id="icon1">
|
||||
<span t-att-id="'ks.'+fa_icon" t-att-class="'fa fa-' + fa_icon + ' fa-4x'"/>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary ks_icon_container_open_button"
|
||||
data-dismiss="modal">Select
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<!--Color Picker with opacity Layout-->
|
||||
<t t-name="ks_color_picker_opacity_view">
|
||||
<input class='ks_color_picker'/>
|
||||
<!-- <input class="ks_color_picker" type="color" t-att-value="ks_color_value"/>-->
|
||||
Transparency :
|
||||
<input type="range" t-att-value="ks_color_opacity" class="ks_color_opacity" name="ks_db_item_opacity" min="0"
|
||||
max="0.99" step="0.01"/>
|
||||
</t>
|
||||
|
||||
|
||||
<!--Template Layouts-->
|
||||
|
||||
<t t-name="ks_db_list_field_required">
|
||||
<div class="ks_field_required">
|
||||
<p>Fields Required : Name, Model, Icon (Default or Custom Upload), Layout</p>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<t t-name="ks_db_list_preview">
|
||||
<div class="ks_field_preview">
|
||||
<p>Coming Soon in Future :)</p>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
|
||||
<!--layouts for items-->
|
||||
<t t-name="ks_db_list_preview_layout1">
|
||||
<div id="enterID" class="ks_dashboard_item ks_db_item_preview ks_db_item_preview_color_picker ">
|
||||
<div class="ks_dashboard_item_header ks_dashboard_item_header_hover">
|
||||
<button type="button" title="Customize Item" class="ks_dashboard_item_preview_customize">
|
||||
<i class="fa fa-cog"/>
|
||||
</button>
|
||||
<button type="button" title="Remove Item" class="ks_dashboard_item_preview_delete">
|
||||
<i class="fa fa-times"/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="ks_dashboard_item_main_body">
|
||||
<div class="ks_dashboard_icon ks_dashboard_icon_color_picker">
|
||||
<t t-if="icon_select=='Custom'">
|
||||
<t t-if="img_src">
|
||||
<img t-att-src="img_src" class="ks_db_list_image"/>
|
||||
</t>
|
||||
</t>
|
||||
<t t-elif="icon_select=='Default'">
|
||||
<span t-att-style="'color:'+ icon_color + ';'"
|
||||
t-att-class="'fa fa-' + default_icon + ' fa-5x'"/>
|
||||
</t>
|
||||
</div>
|
||||
<div class="ks_dashboard_item_info">
|
||||
<div class="ks_dashboard_item_name" t-att-title="name">
|
||||
<t t-esc="name"/>
|
||||
</div>
|
||||
<div class="ks_dashboard_item_domain_count">
|
||||
<t t-esc="count"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
|
||||
<t t-name="ks_db_list_preview_layout2">
|
||||
<div class="ks_dashboard_item_l2 ks_db_item_preview ks_db_item_preview_color_picker">
|
||||
<div class="ks_dashboard_icon_l2 ks_dashboard_icon_color_picker ks_db_item_preview_l2">
|
||||
<t t-if="icon_select=='Custom'">
|
||||
<t t-if="img_src">
|
||||
<img t-att-src="img_src" class="ks_db_list_image"/>
|
||||
</t>
|
||||
</t>
|
||||
<t t-elif="icon_select=='Default'">
|
||||
<span t-att-style="'color:'+ icon_color + ';'" t-att-class="'fa fa-' + default_icon + ' fa-5x'"/>
|
||||
</t>
|
||||
</div>
|
||||
|
||||
<div class="ks_dashboard_item_main_body_l2">
|
||||
<div class="ks_dashboard_item_domain_count_l2">
|
||||
<t t-esc="count"/>
|
||||
</div>
|
||||
<div class="ks_dashboard_item_name_l2" t-att-title="name">
|
||||
<t t-esc="name"/>
|
||||
</div>
|
||||
|
||||
<div class="ks_dashboard_item_header_l2 ks_dashboard_item_header_hover">
|
||||
<button type="button" title="Customize Item" class="ks_dashboard_item_preview_customize">
|
||||
<i class="fa fa-cog"/>
|
||||
</button>
|
||||
<button type="button" title="Remove Item" class="ks_dashboard_item_preview_delete">
|
||||
<i class="fa fa-times"/>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</t>
|
||||
|
||||
|
||||
<t t-name="ks_db_list_preview_layout3">
|
||||
<div id="enterID" class="ks_dashboard_item ks_db_item_preview ks_db_item_preview_color_picker">
|
||||
<div class="ks_dashboard_item_header ks_dashboard_item_header_hover">
|
||||
<button type="button" title="Customize Item" class="ks_dashboard_item_preview_customize">
|
||||
<i class="fa fa-cog"/>
|
||||
</button>
|
||||
<button type="button" title="Remove Item" class="ks_dashboard_item_preview_delete">
|
||||
<i class="fa fa-times"/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="ks_dashboard_item_main_body">
|
||||
<div class="ks_dashboard_icon_l3 ks_dashboard_icon_color_picker">
|
||||
<t t-if="icon_select=='Custom'">
|
||||
<t t-if="img_src">
|
||||
<img t-att-src="img_src" class="ks_db_list_image"/>
|
||||
</t>
|
||||
</t>
|
||||
<t t-elif="icon_select=='Default'">
|
||||
<span t-att-style="'color:'+ icon_color + ';'"
|
||||
t-att-class="'fa fa-' + default_icon + ' fa-5x'"/>
|
||||
</t>
|
||||
</div>
|
||||
<div class="ks_dashboard_item_info ks_dashboard_item_info_l3">
|
||||
<div class="ks_dashboard_item_domain_count_l3">
|
||||
<t t-esc="count"/>
|
||||
</div>
|
||||
<div class="ks_dashboard_item_name_l3" t-att-title="name">
|
||||
<t t-esc="name"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<t t-name="ks_db_list_preview_layout4">
|
||||
<div class="ks_dashboard_item_l4 ks_db_item_preview ">
|
||||
<div class="ks_dashboard_icon_l4 ks_db_item_preview_color_picker ks_dashboard_icon_color_picker">
|
||||
<t t-if="icon_select=='Custom'">
|
||||
<t t-if="img_src">
|
||||
<img t-att-src="img_src" class="ks_db_list_image"/>
|
||||
</t>
|
||||
</t>
|
||||
<t t-elif="icon_select=='Default'">
|
||||
<span t-att-style="'color:'+ icon_color + ';'" t-att-class="'fa fa-' + default_icon + ' fa-5x'"/>
|
||||
</t>
|
||||
</div>
|
||||
|
||||
<div class="ks_dashboard_item_main_body_l2">
|
||||
<div class="ks_dashboard_item_domain_count_l2">
|
||||
<t t-esc="count"/>
|
||||
</div>
|
||||
<div class="ks_dashboard_item_name_l2" t-att-title="name">
|
||||
<t t-esc="name"/>
|
||||
</div>
|
||||
|
||||
<div class="ks_dashboard_item_header_l2 ks_dashboard_item_header_hover">
|
||||
<button type="button" title="Customize Item" class="ks_dashboard_item_preview_customize">
|
||||
<i class="fa fa-cog"/>
|
||||
</button>
|
||||
<button type="button" title="Remove Item" class="ks_dashboard_item_preview_delete">
|
||||
<i class="fa fa-times"/>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</t>
|
||||
|
||||
|
||||
<t t-name="ks_db_list_preview_layout5">
|
||||
<div class="ks_dashboard_item_l5 ks_db_item_preview ks_db_item_preview_color_picker">
|
||||
<div class="ks_dashboard_icon_l5 ks_dashboard_icon_color_picker">
|
||||
<t t-if="icon_select=='Custom'">
|
||||
<t t-if="img_src">
|
||||
<img t-att-src="img_src" class="ks_db_list_image"/>
|
||||
</t>
|
||||
</t>
|
||||
<t t-elif="icon_select=='Default'">
|
||||
<span t-att-style="'color:'+ icon_color + ';'" t-att-class="'fa fa-' + default_icon + ' fa-5x'"/>
|
||||
</t>
|
||||
</div>
|
||||
<div class="ks_dashboard_item_main_body_l5">
|
||||
<div class="ks_dashboard_item_domain_count_l5">
|
||||
<t t-esc="count"/>
|
||||
</div>
|
||||
<div class="ks_dashboard_item_name_l5" t-att-title="name">
|
||||
<t t-esc="name"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ks_dashboard_item_header_l2 ks_dashboard_item_header_hover">
|
||||
<button type="button" title="Customize Item" class="ks_dashboard_item_preview_customize">
|
||||
<i class="fa fa-cog"/>
|
||||
</button>
|
||||
<button type="button" title="Remove Item" class="ks_dashboard_item_preview_delete">
|
||||
<i class="fa fa-times"/>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
|
||||
<t t-name="ks_db_list_preview_layout6">
|
||||
<div class="ks_dashboard_item_l2 ks_db_item_preview ks_db_item_preview_color_picker">
|
||||
|
||||
|
||||
<div class="ks_dashboard_item_main_body_l2">
|
||||
<div class="ks_dashboard_item_domain_count_l2">
|
||||
<t t-esc="count"/>
|
||||
</div>
|
||||
<div class="ks_dashboard_item_name_l2" t-att-title="name">
|
||||
<t t-esc="name"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ks_dashboard_icon_l2 ks_dashboard_icon_color_picker">
|
||||
<t t-if="icon_select=='Custom'">
|
||||
<t t-if="img_src">
|
||||
<img t-att-src="img_src" class="ks_db_list_image"/>
|
||||
</t>
|
||||
</t>
|
||||
<t t-elif="icon_select=='Default'">
|
||||
<span t-att-style="'color:'+ icon_color + ';'" t-att-class="'fa fa-' + default_icon + ' fa-5x'"/>
|
||||
</t>
|
||||
|
||||
<div class="ks_dashboard_item_header_l2 ks_dashboard_item_header_hover">
|
||||
<button type="button" title="Customize Item" class="ks_dashboard_item_preview_customize">
|
||||
<i class="fa fa-cog"/>
|
||||
</button>
|
||||
<button type="button" title="Remove Item" class="ks_dashboard_item_preview_delete">
|
||||
<i class="fa fa-times"/>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<t t-name="ks_db_item_preview_footer_note">
|
||||
<div class="ks_db_item_preview_footer_note">
|
||||
<strong>Note :</strong>
|
||||
Changing Layout midway will set the default icon colour and font colour for selected layout.
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<t t-name="ks_kpi_preview_template">
|
||||
<div class="ks_dashboard_kpi ks_dashboard_custom_srollbar ks_db_kpi_preview ks_db_item_preview_color_picker">
|
||||
<div class="ks_dashboard_icon_l5 ks_dashboard_icon_color_picker">
|
||||
<t t-if="icon_select=='Custom'">
|
||||
<t t-if="img_src">
|
||||
<img t-att-src="img_src" class="ks_db_list_image"/>
|
||||
</t>
|
||||
</t>
|
||||
<t t-elif="icon_select=='Default'">
|
||||
<span t-att-style="'color:'+ icon_color + ';'" t-att-class="'fa fa-' + default_icon + ' fa-5x'"/>
|
||||
</t>
|
||||
</div>
|
||||
<div class="ks_dashboard_item_main_body_l5">
|
||||
<div class="ks_dashboard_kpi_name_preview" t-att-title="name">
|
||||
<t t-esc="name"/>
|
||||
</div>
|
||||
<div class="ks_dashboard_kpi_count_preview" t-att-title="count_1_tooltip">
|
||||
<t t-esc="count_1"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row ks_kpi_d_flex ml-auto mr-auto">
|
||||
<t t-if="ks_enable_goal">
|
||||
<div class="col">
|
||||
<div style="color: rgba(0, 0, 0, 0.61);">
|
||||
<span>vs Target</span>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
<span class="target_deviation" style="font-size : medium;">
|
||||
<t t-esc="target_deviation"/>
|
||||
<t t-if="target_arrow">
|
||||
<i t-att-class="'fa fa-arrow-'+ target_arrow"/>
|
||||
</t>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
<t t-if="ks_previous_period">
|
||||
<div class="col" style="text-align:right;">
|
||||
<div style="color: rgba(0, 0, 0, 0.61);">
|
||||
<span>vs Prev</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="pre_deviation" style="font-size : medium;">
|
||||
<t t-esc="pre_deviation"/>
|
||||
<i t-att-class="'fa fa-arrow-'+ pre_arrow"/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<t t-name="ks_kpi_preview_template_3">
|
||||
<div class="ks_dashboard_kpi ks_dashboard_custom_srollbar ks_db_kpi_preview ks_db_item_preview_color_picker">
|
||||
<div class="ks_dashboard_icon_l5 ks_dashboard_icon_color_picker">
|
||||
<t t-if="icon_select=='Custom'">
|
||||
<t t-if="img_src">
|
||||
<img t-att-src="img_src" class="ks_db_list_image"/>
|
||||
</t>
|
||||
</t>
|
||||
<t t-elif="icon_select=='Default'">
|
||||
<span t-att-style="'color:'+ icon_color + ';'" t-att-class="'fa fa-' + default_icon + ' fa-5x'"/>
|
||||
</t>
|
||||
</div>
|
||||
<div class="ks_dashboard_item_main_body_l5">
|
||||
<div class="ks_dashboard_kpi_name_preview" t-att-title="name">
|
||||
<t t-esc="name"/>
|
||||
</div>
|
||||
<div class="ks_dashboard_kpi_count_preview" t-att-title="count_1_tooltip +' / '+target_tooltip">
|
||||
<span class="ks_count">
|
||||
<t t-esc="count_1"/>
|
||||
</span>
|
||||
/
|
||||
<span>
|
||||
<t t-esc="target"/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ks_text_center ks_progress">
|
||||
<div>
|
||||
<progress id="ks_progressbar" value="0" max="100"/>
|
||||
</div>
|
||||
<div class="ks_text_center">
|
||||
<t t-esc="target_progress_deviation"/>%
|
||||
</div>
|
||||
</div>
|
||||
<t t-if="ks_previous_period and previous_period_data">
|
||||
<div class="ks_text_center ks_margin_top">
|
||||
<div>
|
||||
<span>vs Prev</span>
|
||||
</div>
|
||||
<div>
|
||||
<t t-esc="previous_period_data"/>
|
||||
<span class="pre_deviation">
|
||||
<t t-esc="pre_deviation"/>
|
||||
<i t-att-class="'fa fa-arrow-'+ pre_arrow"/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<t t-name="ks_kpi_preview_template_2">
|
||||
<div class="ks_dashboard_kpi ks_dashboard_custom_srollbar ks_db_kpi_preview ks_db_item_preview_color_picker">
|
||||
<div class="ks_dashboard_icon_l5 ks_dashboard_icon_color_picker">
|
||||
<t t-if="icon_select=='Custom'">
|
||||
<t t-if="img_src">
|
||||
<img t-att-src="img_src" class="ks_db_list_image"/>
|
||||
</t>
|
||||
</t>
|
||||
<t t-elif="icon_select=='Default'">
|
||||
<span t-att-style="'color:'+ icon_color + ';'" t-att-class="'fa fa-' + default_icon + ' fa-5x'"/>
|
||||
</t>
|
||||
</div>
|
||||
<div class="ks_dashboard_item_main_body_l5">
|
||||
<div class="ks_dashboard_kpi_name_preview" t-att-title="name">
|
||||
<t t-esc="name"/>
|
||||
</div>
|
||||
|
||||
<t t-if="target_view =='Progress Bar' and target_enable">
|
||||
<div class="ks_dashboard_kpi_count_preview" t-att-title="count_tooltip +' / '+ target_tooltip">
|
||||
<span>
|
||||
<t t-esc="count"/>
|
||||
/
|
||||
<t t-esc="target"/>
|
||||
</span>
|
||||
</div>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<div class="ks_dashboard_kpi_count_preview" t-att-title="count_tooltip">
|
||||
<span>
|
||||
<t t-esc="count"/>
|
||||
</span>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
</div>
|
||||
<t t-if="ks_enable_goal and target_enable">
|
||||
<t t-if="target_deviation and target_view =='Number'">
|
||||
<div class="ks_text_center">
|
||||
<div>
|
||||
<span class="ks_kpi_target_grey">vs Target</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="target_deviation">
|
||||
<t t-esc="target_deviation"/>
|
||||
<t t-if="pre_arrow">
|
||||
<i t-att-class="'fa fa-arrow-'+ pre_arrow"/>
|
||||
</t>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
<t t-if="target_progress_deviation and target_view =='Progress Bar'">
|
||||
<div class="ks_text_center ks_progress">
|
||||
<div>
|
||||
<progress id="ks_progressbar" value="0" max="100"/>
|
||||
</div>
|
||||
<div class="ks_text_center">
|
||||
<t t-esc="target_progress_deviation"/>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
|
||||
</templates>
|
||||
@@ -0,0 +1,29 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
|
||||
<templates>
|
||||
<t t-name="ks_dashboard_theme_view">
|
||||
<div class="ks_dashboard_theme_view_render">
|
||||
<div class="ks_dashboard_theme_input_container">
|
||||
<input class="ks_dashboard_theme_input ks_color_white" type="checkbox" name="White Theme"
|
||||
value="white"/>
|
||||
<span class="ks_checkmark"/>
|
||||
</div>
|
||||
<div class="ks_dashboard_theme_input_container">
|
||||
<input class="ks_dashboard_theme_input ks_color_blue" type="checkbox" name="Blue Theme" value="blue"/>
|
||||
<span class="ks_checkmark"/>
|
||||
</div>
|
||||
<div class="ks_dashboard_theme_input_container">
|
||||
<input class="ks_dashboard_theme_input ks_color_red" type="checkbox" name="Red Theme" value="red"/>
|
||||
<span class="ks_checkmark"/>
|
||||
</div>
|
||||
<div class="ks_dashboard_theme_input_container">
|
||||
<input class="ks_dashboard_theme_input ks_color_yellow" type="checkbox" name="Yellow Theme" value="yellow"/>
|
||||
<span class="ks_checkmark"/>
|
||||
</div>
|
||||
<div class="ks_dashboard_theme_input_container">
|
||||
<input class="ks_dashboard_theme_input ks_color_green" type="checkbox" name="Green Theme" value="green"/>
|
||||
<span class="ks_checkmark"/>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</templates>
|
||||
File diff suppressed because it is too large
Load Diff
401
flectra/ks_dashboard_ninja/static/src/xml/ks_dashboard_pro.xml
Normal file
401
flectra/ks_dashboard_ninja/static/src/xml/ks_dashboard_pro.xml
Normal file
@@ -0,0 +1,401 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
|
||||
<templates>
|
||||
|
||||
<!-- GridStack Chart Item Container-->
|
||||
<t t-name="ks_gridstack_container">
|
||||
<div class="grid-stack-item ks_chart_container ks_dn_z_index" t-att-id="chart_id">
|
||||
<div class="grid-stack-item-content ks_dashboarditem_chart_container ks_dashboard_item_hover card shadow ks_chart_body_responsive">
|
||||
|
||||
<div class="p-3 py-3 d-flex flex-row align-items-center justify-content-between ks_heading ks_flex_column">
|
||||
<div class="ks_drill_heading">
|
||||
<h6 class="m-0 font-weight-bold h3 ks_chart_heading mr-3" t-att-title="ks_chart_title">
|
||||
<t t-esc="ks_chart_title"/>
|
||||
</h6>
|
||||
<!-- <div >-->
|
||||
|
||||
<button class="ks_dashboard_item_drill_up d-none btn btn-primary ks_chart_buttons_responsive" title="Drill Up" type="button"
|
||||
t-att-data-item-id="chart_id">Drill Up
|
||||
<i class="fa fa-arrow-circle-up"/>
|
||||
</button>
|
||||
</div>
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- Dashboard Item Move/Copy Feature -->
|
||||
<div class="ks_dashboard_item_button_container ks_dropdown_container ks_dashboard_item_header ks_dashboard_item_header_hover chart_button_container d-flex"
|
||||
t-att-data-item_id="chart_id">
|
||||
<t t-if="ksIsDashboardManager">
|
||||
<button class="ks_dashboard_item_chart_info ks_chart_buttons_responsive" title="More Info" type="button"
|
||||
t-att-data-item-id="chart_id">
|
||||
<i class="fa fa-info-circle"/>
|
||||
</button>
|
||||
<div class="ks_chart_inner_buttons ks_button_padding">
|
||||
<button title="Color Palette" data-toggle="dropdown"
|
||||
class="ks_dashboard_item_action ks_chart_buttons_responsive ks_dashboard_color_option btn dropdown-toggle btn-xs o-no-caret btn"
|
||||
type="button"
|
||||
aria-expanded="true">
|
||||
<i class="fa fa-paint-brush"/>
|
||||
</button>
|
||||
<ul role="menu"
|
||||
class="dropdown-menu dropdown-menu-right ks_dashboard_color_menu_container ks_color_pallate"
|
||||
t-att-data-item-id="chart_id"
|
||||
t-att-data-chart-type="chart_type" t-att-data-chart-family="chart_family">
|
||||
<t t-foreach="ksChartColorOptions" t-as="color_option">
|
||||
<li t-att-class="'ks_li_'+color_option">
|
||||
<span t-att-class="color_option + ' ks_chart_color_options'"
|
||||
t-att-data-chart-color="color_option">
|
||||
<t t-esc="color_option"/>
|
||||
</span>
|
||||
</li>
|
||||
</t>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="ks_chart_inner_buttons ks_button_padding">
|
||||
<button title="Move/Duplicate" data-toggle="dropdown" t-att-data-item-id="item_id"
|
||||
class="ks_dashboard_item_action btn dropdown-toggle btn-xs ks_chart_buttons_responsive" type="button"
|
||||
aria-expanded="true">
|
||||
<i class="fa fa-files-o"/>
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul role="menu" class="ks_dashboard_menu_container dropdown-menu dropdown-menu-right ks-move-duplicate-dropdown">
|
||||
<li class="ks_md_heading">
|
||||
<span>Select Dashboard</span>
|
||||
</li>
|
||||
<li class="ks_dashboard_select">
|
||||
<select class="o_input o_group_selector o_add_group ks_dashboard_select">
|
||||
<t t-foreach="ks_dashboard_list" t-as="ks_dashboard">
|
||||
<option t-att-value="ks_dashboard['id']">
|
||||
<t t-esc="ks_dashboard['name']"/>
|
||||
</option>
|
||||
</t>
|
||||
</select>
|
||||
</li>
|
||||
<li class="ks_move_duplicate_button">
|
||||
<button class="btn btn-primary o_apply_group o_add_group ks_duplicate_item"
|
||||
tabindex="-1" type="button">Duplicate
|
||||
</button>
|
||||
<button class="btn btn-primary o_apply_group o_add_group ks_move_item"
|
||||
tabindex="-1"
|
||||
type="button">Move
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button title="Quick Customize"
|
||||
class="ks_dashboard_quick_edit_action_popup btn d-none ks_quick_button ks_chart_buttons_responsive"
|
||||
type="button" t-att-data-item-id="chart_id">
|
||||
<i class="fa fa-pencil"/>
|
||||
</button>
|
||||
<button class="ks_dashboard_item_customize d-none ks_customise_button ks_chart_buttons_responsive"
|
||||
title="Customize Item" type="button">
|
||||
<i class="fa fa-pencil"/>
|
||||
</button>
|
||||
|
||||
<button class="ks_dashboard_item_delete ks_chart_buttons_responsive" title="Remove Item" type="button">
|
||||
<i class="fa fa-times"/>
|
||||
</button>
|
||||
|
||||
<div class="ks_chart_inner_buttons ks_dashboard_more_action ks_button_padding" t-att-data-item-id="chart_id">
|
||||
<button title="Export Chart" data-toggle="dropdown"
|
||||
class="ks_dashboard_item_action btn dropdown-toggle btn-xs o-no-caret btn ks_chart_buttons_responsive"
|
||||
type="button"
|
||||
aria-expanded="true">
|
||||
<i class="fa fa-ellipsis-v"/>
|
||||
</button>
|
||||
<div role="menu" class="dropdown-menu dropdown-menu-right ks_drop_dwon_menu">
|
||||
<!--Dynamic Rendering-->
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="card-body ks_chart_card_body"/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<t t-name="ksMoreChartOptions">
|
||||
|
||||
<div class="ks_chart_export_menu">
|
||||
<div class="ks_chart_export_menu_header">
|
||||
<span>Export</span>
|
||||
</div>
|
||||
<div class="chart_xls_export ks_chart_export_menu_item" t-att-data-chart-id="chart_id"
|
||||
data-format="chart_xls">
|
||||
<i class="fa fa-file-excel-o"/>
|
||||
<span>Export to Excel</span>
|
||||
</div>
|
||||
<div class="chart_xls_export ks_chart_export_menu_item" t-att-data-chart-id="chart_id"
|
||||
data-format="chart_csv">
|
||||
<i class="fa fa-file-code-o"/>
|
||||
<span>Export to CSV</span>
|
||||
</div>
|
||||
|
||||
<div t-att-data-chart-id="chart_id" class="chart_pdf_export ks_chart_export_menu_item">
|
||||
<i class="fa fa-file-pdf-o"/>
|
||||
<span>Save as PDF</span>
|
||||
</div>
|
||||
<a class="ks_chart_export_menu_item ks_chart_image_export" t-att-href="href"
|
||||
t-att-download="download_fileName+'.png'">
|
||||
<i class="fa fa-file-image-o"/>
|
||||
<span>Save as Image</span>
|
||||
</a>
|
||||
<div class="ks_chart_json_export ks_chart_export_menu_item" t-att-data-item-id="item_id"
|
||||
data-format="chart_xls">
|
||||
<i class="fa fa-file-code-o"/>
|
||||
<span>Export Item</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</t>
|
||||
<!-- GridStack List View Item Container-->
|
||||
<t t-name="ks_gridstack_list_view_container">
|
||||
<div class="grid-stack-item ks_dn_z_index" t-att-id="item_id">
|
||||
<div class="grid-stack-item-content ks_list_view_container ks_dashboard_item_hover card shadow ks_dashboarditem_chart_container ks_pagiantion">
|
||||
|
||||
<!-- <div class="p-3 py-3 d-flex flex-row align-items-center justify-content-between ks_heading">-->
|
||||
<div class="p-3 py-3 d-flex flex-row align-items-center justify-content-between ks_heading ks_flex_column">
|
||||
<div class="ks_drill_heading">
|
||||
<h6 class="m-0 font-weight-bold h3 mr-3 ks_chart_heading" t-att-title="ks_chart_title">
|
||||
<t t-esc="ks_chart_title"/>
|
||||
</h6>
|
||||
<button class="ks_dashboard_item_drill_up d-none btn btn-primary" title="Drill Up" type="button"
|
||||
t-att-data-item-id="item_id">Drill Up
|
||||
<i class="fa fa-arrow-circle-up"/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="ks_pager_name">
|
||||
<t t-if="ks_pager" t-call="ks_pager_template"/>
|
||||
</div>
|
||||
|
||||
<t t-if="ksIsDashboardManager">
|
||||
<!-- Dashboard Item Move/Copy Feature -->
|
||||
<div class="ks_dashboard_item_button_container ks_dropdown_container ks_dashboard_item_header ks_dashboard_item_header_hover chart_button_container"
|
||||
t-att-data-item_id="item_id">
|
||||
|
||||
<button title="Move/Duplicate" data-toggle="dropdown" t-att-data-item-id="item_id"
|
||||
class="ks_dashboard_item_action btn dropdown-toggle btn-xs" type="button"
|
||||
aria-expanded="true">
|
||||
<i class="fa fa-files-o"/>
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul role="menu" class="ks_dashboard_menu_container dropdown-menu dropdown-menu-right ks-move-duplicate-dropdown">
|
||||
<li class="ks_md_heading">
|
||||
<span>Select Dashboard</span>
|
||||
</li>
|
||||
<li class="my-3">
|
||||
<select class="o_input o_group_selector o_add_group ks_dashboard_select">
|
||||
<t t-foreach="ks_dashboard_list" t-as="ks_dashboard">
|
||||
<option t-att-value="ks_dashboard['id']">
|
||||
<t t-esc="ks_dashboard['name']"/>
|
||||
</option>
|
||||
</t>
|
||||
</select>
|
||||
</li>
|
||||
<li class="mt-3">
|
||||
<button class="btn btn-primary o_apply_group o_add_group ks_duplicate_item"
|
||||
tabindex="-1" type="button">Duplicate
|
||||
</button>
|
||||
<button class="btn btn-primary o_apply_group o_add_group ks_move_item" tabindex="-1"
|
||||
type="button">Move
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<button title="Quick Customize"
|
||||
class="ks_dashboard_quick_edit_action_popup btn d-none ks_quick_button"
|
||||
type="button" t-att-data-item-id="item_id">
|
||||
<i class="fa fa-pencil"/>
|
||||
</button>
|
||||
<button class="ks_dashboard_item_customize d-none ks_customise_button"
|
||||
title="Customize Item" type="button">
|
||||
<i class="fa fa-pencil"/>
|
||||
</button>
|
||||
<button class="ks_dashboard_item_delete" title="Remove Item" type="button">
|
||||
<i class="fa fa-times"/>
|
||||
</button>
|
||||
<div class="ks_chart_inner_buttons ks_button_padding ">
|
||||
<button title="Export Item" data-toggle="dropdown"
|
||||
class="ks_dashboard_item_action_export btn dropdown-toggle btn-xs o-no-caret btn ks_next_previous_bg_color"
|
||||
type="button"
|
||||
aria-expanded="true">
|
||||
<i class="fa fa-ellipsis-v"/>
|
||||
</button>
|
||||
<div role="menu" class="dropdown-menu dropdown-menu-right ks_drop_dwon_menu">
|
||||
<!--Dynamic Rendering-->
|
||||
<div class="ks_chart_export_menu">
|
||||
<div class="ks_chart_export_menu_header">
|
||||
<span>Export</span>
|
||||
</div>
|
||||
<div class="chart_xls_export ks_chart_xls_csv_export ks_chart_export_menu_item" t-att-data-chart-id="item_id"
|
||||
data-format="list_xls">
|
||||
<i class="fa fa-file-excel-o"/>
|
||||
<span>Export to Excel</span>
|
||||
</div>
|
||||
<div class="chart_xls_export ks_chart_xls_csv_export ks_chart_export_menu_item" t-att-data-chart-id="item_id"
|
||||
data-format="list_csv">
|
||||
<i class="fa fa-file-code-o"/>
|
||||
<span>Export to CSV</span>
|
||||
</div>
|
||||
<div class="ks_chart_json_export ks_chart_export_menu_item"
|
||||
t-att-data-item-id="item_id"
|
||||
data-format="chart_xls">
|
||||
<i class="fa fa-file-code-o"/>
|
||||
<span>Export Item</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
<div class="card-body table-responsive"/>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
|
||||
<!-- Chart preview (item creation page form view) -->
|
||||
<t t-name="ks_chart_form_view_container">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="ks_dashboarditem_chart_container card shadow col-md-9 p-0 m-0">
|
||||
<div class="ks_graph_container_header">
|
||||
<h6 class="m-0 font-weight-bold h3 ks_chart_heading">
|
||||
<t t-esc="ks_chart_name"/>
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<canvas id="ksMyChart" height="250px"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
|
||||
<!-- List View (item creation page form view) -->
|
||||
<t t-name="ks_list_view_container">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="card shadow col-md-9 p-0 m-0">
|
||||
<div class="ks_graph_container_header">
|
||||
<h6 class="m-0 font-weight-bold h3 ks_chart_heading">
|
||||
<t t-esc="ks_list_view_name"/>
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body table-responsive ksMaxTableContent">
|
||||
<t t-if="list_view_data">
|
||||
<table id="ksListViewTable" class="table table-hover"
|
||||
t-att-data-model="list_view_data['model']">
|
||||
<thead>
|
||||
<tr>
|
||||
<t t-foreach="list_view_data['label']" t-as="table_header">
|
||||
<th>
|
||||
<t t-esc="table_header"/>
|
||||
</th>
|
||||
</t>
|
||||
<th/>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<t t-foreach="list_view_data['data_rows']" t-as="table_row">
|
||||
<tr class="ks_tr" t-att-data-record-id="table_row['id']">
|
||||
<t t-foreach="table_row['data']" t-as="row_data">
|
||||
<td>
|
||||
<t t-esc="row_data"/>
|
||||
</td>
|
||||
</t>
|
||||
<td>
|
||||
<i id="ks_item_info" t-att-data-model="list_view_data['model']"
|
||||
t-att-data-record-id="table_row['id']" class="fa fa-pencil"/>
|
||||
</td>
|
||||
</tr>
|
||||
</t>
|
||||
<tr t-if="count">
|
||||
<td class="ks_font">
|
||||
<span>(<t t-esc="count"/> records more)</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</t>
|
||||
<t t-else="">
|
||||
No Data Present
|
||||
</t>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
|
||||
<t t-name="ks_list_view_table">
|
||||
<t t-if="list_view_data">
|
||||
<table id="ksListViewTable" class="table table-hover ks_list_view_layout_1" t-att-data-model="list_view_data['model']">
|
||||
<thead>
|
||||
<tr>
|
||||
<t t-foreach="list_view_data['label']" t-as="table_header">
|
||||
<th>
|
||||
<t t-esc="table_header"/>
|
||||
</th>
|
||||
</t>
|
||||
<th/>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<t t-call="ks_list_view_tmpl"></t>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</t>
|
||||
<t t-else="">
|
||||
No Data Present
|
||||
</t>
|
||||
</t>
|
||||
|
||||
<t t-name="ks_list_view_tmpl">
|
||||
<t t-foreach="list_view_data['data_rows']" t-as="table_row">
|
||||
<tr class="ks_tr" t-att-data-record-id="table_row['id']" t-att-data-domain="table_row['domain']"
|
||||
t-att-data-item-Id="item_id"
|
||||
t-att-data-sequence="table_row['sequence']" t-att-data-last_seq="table_row['last_seq']">
|
||||
<t t-foreach="table_row['data']" t-as="row_data">
|
||||
<td class="ks_list_canvas_click">
|
||||
<t t-esc="row_data"/>
|
||||
</td>
|
||||
</t>
|
||||
<td>
|
||||
<i id="ks_item_info" t-att-data-model="list_view_data['model']"
|
||||
t-att-data-list-type="list_view_data['list_view_type']"
|
||||
t-att-data-groupby="list_view_data['groupby']"
|
||||
t-att-data-record-id="table_row['id']" t-att-data-item-id="item_id"
|
||||
t-att-data-list-view-type="list_type"
|
||||
class="fa fa-pencil"/>
|
||||
</td>
|
||||
</tr>
|
||||
</t>
|
||||
</t>
|
||||
|
||||
<div t-name="ks_pager_template" class="ks_pager">
|
||||
<span class="ks_counter">
|
||||
<span class="ks_value">
|
||||
<t t-esc="count"/>
|
||||
</span>
|
||||
<span class="btn-group" aria-atomic="true" t-att-data-next_offset="intial_count"
|
||||
t-att-data-prev-offset="offset">
|
||||
<button type="button"
|
||||
class="fa fa-chevron-left btn ks_load_previous ks_event_offer_list ks_next_previous_bg_color"
|
||||
t-att-data-item-id="item_id" title="Previous"/>
|
||||
<button type="button" class="fa fa-chevron-right btn ks_load_next ks_next_previous_bg_color"
|
||||
t-att-data-item-id="item_id" title="Next"/>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</templates>
|
||||
@@ -0,0 +1,17 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<template xml:spacer="preserve">
|
||||
<t t-extend="ListView.buttons">
|
||||
<t t-jquery="button.o_list_button_add" t-operation="after">
|
||||
<t t-if="widget.ksIsAdmin">
|
||||
<t t-if="widget.modelName == 'ks_dashboard_ninja.board'">
|
||||
<button type="button"
|
||||
class="btn btn-secondary ks_import_button" accesskey="f">
|
||||
Import Dashboard
|
||||
</button>
|
||||
<input accept=".json " t-attf-id="file_#{_id}"
|
||||
name="file" class="ks_input_import_button" type="file" style="display:none;"/>
|
||||
</t>
|
||||
</t>
|
||||
</t>
|
||||
</t>
|
||||
</template>
|
||||
@@ -0,0 +1,24 @@
|
||||
<templates>
|
||||
|
||||
<t t-name="ksQuickEditViewOption">
|
||||
<div>
|
||||
<div class="ks_item_field_info">
|
||||
</div>
|
||||
<div class="ks_quick_edit_footer">
|
||||
<button class="btn btn-primary ks_quick_edit_action"
|
||||
data-ks-item-action="saveItemInfo" type="button">Save
|
||||
</button>
|
||||
<button class="btn btn-secondary ks_quick_edit_action mx-2 ks_discard"
|
||||
data-ks-item-action="discardItemInfo"
|
||||
type="button">Discard
|
||||
</button>
|
||||
<button class="btn btn-primary ks_quick_edit_action"
|
||||
data-ks-item-action="fullItemInfo" type="button">Full Settings
|
||||
</button>
|
||||
|
||||
</div>
|
||||
<span class="ks_qe_footer_span"/>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
</templates>
|
||||
@@ -0,0 +1,54 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
|
||||
<templates>
|
||||
<t t-name="ks_widget_toggle">
|
||||
<div class="ks_select_dashboard_item_toggle">
|
||||
<div class="ks_select_icon_div">
|
||||
<input id="ks_default_icon" type="radio" name="default_custom_icon_toggle"
|
||||
class="ks_toggle_icon_input" value="Default"/> Default Icons
|
||||
</div>
|
||||
<div class="ks_select_icon_div">
|
||||
<input id="ks_custom_icon" type="radio" name="default_custom_icon_toggle" class="ks_toggle_icon_input"
|
||||
value="Custom"/> Upload Icon
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
<t t-name="ks_widget_toggle_kpi_target_view">
|
||||
<div class="ks_select_dashboard_item_toggle">
|
||||
<div class="ks_select_icon_div">
|
||||
<input id="ks_default_icon" type="radio" name="default_custom_icon_toggle"
|
||||
class="ks_toggle_icon_input" value="Number"/>
|
||||
Number
|
||||
</div>
|
||||
<div class="ks_select_icon_div">
|
||||
<input id="ks_custom_icon" type="radio" name="default_custom_icon_toggle" class="ks_toggle_icon_input"
|
||||
value="Progress Bar"/>
|
||||
Progress Bar
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
<t t-name="ks_widget_toggle_kpi">
|
||||
<div class="ks_select_dashboard_item_toggle">
|
||||
<div class="ks_select_icon_div">
|
||||
<input id="ks_sum_kpi" type="radio" name="kpi_data_comparison_none"
|
||||
class="ks_toggle_icon_input" value="None"/>
|
||||
None
|
||||
</div>
|
||||
<div class="ks_select_icon_div">
|
||||
<input id="ks_sum_kpi" type="radio" name="kpi_data_comparison_sum"
|
||||
class="ks_toggle_icon_input" value="Sum"/>
|
||||
Sum
|
||||
</div>
|
||||
<div class="ks_select_icon_div">
|
||||
<input id="ks_ratio_kpi" type="radio" name="kpi_data_comparison_ratio"
|
||||
class="ks_toggle_icon_input" value="Ratio"/>
|
||||
Ratio
|
||||
</div>
|
||||
<div class="ks_select_icon_div">
|
||||
<input id="ks_percentage_kpi" type="radio" name="kpi_data_comparison_percentage"
|
||||
class="ks_toggle_icon_input" value="Percentage"/>
|
||||
Percentage
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</templates>
|
||||
Reference in New Issue
Block a user