mirror of
https://gitlab.com/sonalarora/tra_backend.git
synced 2025-12-23 13:15:31 +02:00
add dashboar module
This commit is contained in:
sonal
34
ks_dashboard_ninja/static/src/css/ks_dashboard_gridstack.css
Normal file
34
ks_dashboard_ninja/static/src/css/ks_dashboard_gridstack.css
Normal file
@@ -0,0 +1,34 @@
|
||||
/*rtl:begin:ignore*/
|
||||
/* Gridstack container custom css */
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
.grid-stack > .grid-stack-item > .grid-stack-item-content {
|
||||
|
||||
}
|
||||
/*rtl:end:ignore*/
|
||||
@@ -0,0 +1,75 @@
|
||||
.ks_dashboard_theme_input::before {
|
||||
content: '';
|
||||
position: relative;
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.ks_color_white::before {
|
||||
background: #ffffff;
|
||||
color:black;
|
||||
}
|
||||
|
||||
.ks_color_white {
|
||||
border: 1px solid #bdbdbd
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/*Kpi CSS here*/
|
||||
.ks_kpi_target_grey {
|
||||
color: #777777;
|
||||
}
|
||||
555
ks_dashboard_ninja/static/src/css/ks_dashboard_ninja.scss
Normal file
555
ks_dashboard_ninja/static/src/css/ks_dashboard_ninja.scss
Normal file
@@ -0,0 +1,555 @@
|
||||
/* 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;
|
||||
}
|
||||
|
||||
.ks_dashboard_main_content {
|
||||
overflow: auto;
|
||||
height:100%;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.ks_overflow {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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{
|
||||
transition: 0.2s linear;
|
||||
transform: scale(1.1);
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
|
||||
.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 !important;
|
||||
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: 25px;
|
||||
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: 10;
|
||||
}
|
||||
|
||||
.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;
|
||||
border-radius: 3px !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;
|
||||
}
|
||||
|
||||
.ks_btn_middle_child{
|
||||
border-radius: 0 !important;
|
||||
height: 100%;
|
||||
margin-right:10px;
|
||||
|
||||
}
|
||||
|
||||
.ks_btn_middle_child input, .ks_btn_last_child input {
|
||||
padding: inherit !important;
|
||||
}
|
||||
|
||||
.ks_btn_last_child{
|
||||
border-bottom-left-radius: 0 !important;
|
||||
border-top-left-radius: 0 !important;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ks_hide{
|
||||
display:none !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ks_dashboard_item_action{
|
||||
background-color : inherit;
|
||||
}
|
||||
|
||||
|
||||
/* Dev Code here */
|
||||
.ks_dashboard_header{
|
||||
border-bottom: 1px solid #cccccc;
|
||||
}
|
||||
|
||||
.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: 1.8rem;
|
||||
}
|
||||
|
||||
@media (max-width: 992px){
|
||||
.ks_dashboard_ninja_toggle_menu:before {
|
||||
content: "\f142";
|
||||
}
|
||||
|
||||
|
||||
#ks_dashboard_title_label{
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
#ks_dashboard_title{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
188
ks_dashboard_ninja/static/src/css/ks_dashboard_ninja_item.css
Normal file
188
ks_dashboard_ninja/static/src/css/ks_dashboard_ninja_item.css
Normal file
@@ -0,0 +1,188 @@
|
||||
.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_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: 16px;
|
||||
}
|
||||
|
||||
|
||||
/* 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;
|
||||
max-width: 174px;
|
||||
}
|
||||
|
||||
|
||||
.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_add_item_selection,#ks_date_selector_container{
|
||||
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
|
||||
}
|
||||
|
||||
#ks_dashboard_layout_edit{
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
/*background-color: #357bb7;*/
|
||||
/*border: 1px solid #357bb7;*/
|
||||
}
|
||||
|
||||
.ks_add_item_type_button{
|
||||
color:#fff;
|
||||
/*background-color: #357bb7;
|
||||
border: 1px solid #357bb7;*/
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* 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%;
|
||||
/*
|
||||
height: 67%;
|
||||
*/
|
||||
}
|
||||
|
||||
.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_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;
|
||||
|
||||
}
|
||||
202
ks_dashboard_ninja/static/src/css/ks_dashboard_ninja_pro.css
Normal file
202
ks_dashboard_ninja/static/src/css/ks_dashboard_ninja_pro.css
Normal file
@@ -0,0 +1,202 @@
|
||||
.ks_dashboard_item {
|
||||
height: 132px;
|
||||
}
|
||||
|
||||
/* 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%;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_action {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.ks_group_width {
|
||||
width : 40% !important;
|
||||
}
|
||||
.ks_dashboard_quick_edit_action_popup {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_button_container > .ks_chart_inner_buttons > button {
|
||||
color:black;
|
||||
}
|
||||
/* 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_dashboarditem_id, .ks_dashboarditem_chart_container{
|
||||
overflow-x : visible !important;
|
||||
overflow-y : visible !important;
|
||||
}
|
||||
|
||||
.ks_dashboard_kpi{
|
||||
overflow-y : auto !important;
|
||||
}
|
||||
|
||||
.ks_dashboarditem_chart_container{
|
||||
background : white;
|
||||
}
|
||||
|
||||
/* Layout 6 exception case CSS */
|
||||
.ks_dashboard_item_header_l6{
|
||||
top: 5px !important;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.ks_chart_json_export {
|
||||
padding-right: 10px !important;
|
||||
}
|
||||
|
||||
|
||||
.ks_chart_card_body{
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
bottom: 8px;
|
||||
}
|
||||
|
||||
|
||||
/*---------------------------------------------------*/
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
#ks_item_info {
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.ks_chart_heading{
|
||||
/*width: 50%; */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_drill_up {
|
||||
min-width:89px;
|
||||
}
|
||||
|
||||
.ks_list_view_heading{
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ks_pager {
|
||||
min-width:98px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.ksMaxTableContent{
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
|
||||
.ks_list_view_container{
|
||||
background : white;
|
||||
}
|
||||
|
||||
.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_date_filters_menu_drop_down {
|
||||
max-height: 500px !important;
|
||||
overflow: auto !important;
|
||||
}
|
||||
82
ks_dashboard_ninja/static/src/css/ks_dashboard_options.css
Normal file
82
ks_dashboard_ninja/static/src/css/ks_dashboard_options.css
Normal file
@@ -0,0 +1,82 @@
|
||||
.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_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,95 @@
|
||||
|
||||
.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_font {
|
||||
font-weight: bold;
|
||||
min-width: 129px
|
||||
}
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.dropdown-max-height {
|
||||
max-height: 40vh;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
106
ks_dashboard_ninja/static/src/css/ks_toggle_icon.css
Normal file
106
ks_dashboard_ninja/static/src/css/ks_toggle_icon.css
Normal file
@@ -0,0 +1,106 @@
|
||||
.ks_toggle_icon_input{
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ks_select_dashboard_item_toggle{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ks_select_icon_div{
|
||||
margin-right : 45px;
|
||||
}
|
||||
|
||||
|
||||
/*New Quick Edit View*/
|
||||
.ks_dashboard_item_button_container{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.ks_dashboard_quick_edit_action > button{
|
||||
position: absolute;
|
||||
right: -30px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ks_dashboard_quick_edit_action{
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
|
||||
/*UI CHANGES*/
|
||||
|
||||
.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_dropdown_menu{
|
||||
max-width: 280px;
|
||||
box-shadow: 3px 7px 12px 1px rgba(0, 0, 0, 0.32);
|
||||
}
|
||||
|
||||
.ks_item_field_info{
|
||||
/*width: 230px;*/
|
||||
max-height: 225px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.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_form_view{
|
||||
padding-bottom: 0px !important;
|
||||
padding-top: 0px !important;
|
||||
}
|
||||
|
||||
.ks_qe_form_view > .ks_qe_form_view_group{
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* width */
|
||||
.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;
|
||||
}
|
||||
|
||||
.ks_quick_edit_footer > .ks_discard {
|
||||
border-color: #dee2e6;
|
||||
}
|
||||
110
ks_dashboard_ninja/static/src/js/ks_color_picker.js
Normal file
110
ks_dashboard_ninja/static/src/js/ks_color_picker.js
Normal file
@@ -0,0 +1,110 @@
|
||||
odoo.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, {
|
||||
'change.spectrum .ks_color_picker': '_ksOnColorChange',
|
||||
'change .ks_color_opacity': '_ksOnOpacityChange',
|
||||
'input .ks_color_opacity': '_ksOnOpacityInput'
|
||||
}),
|
||||
|
||||
jsLibs: [
|
||||
'/ks_dashboard_ninja/static/lib/js/spectrum.js'
|
||||
],
|
||||
cssLibs: [
|
||||
'/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
|
||||
};
|
||||
|
||||
});
|
||||
52
ks_dashboard_ninja/static/src/js/ks_dashboard_item_theme.js
Normal file
52
ks_dashboard_ninja/static/src/js/ks_dashboard_item_theme.js
Normal file
@@ -0,0 +1,52 @@
|
||||
odoo.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
|
||||
};
|
||||
|
||||
});
|
||||
2635
ks_dashboard_ninja/static/src/js/ks_dashboard_ninja.js
Normal file
2635
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,535 @@
|
||||
odoo.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,
|
||||
|
||||
jsLibs: [
|
||||
'/ks_dashboard_ninja/static/lib/js/Chart.bundle.min.js',
|
||||
'/ks_dashboard_ninja/static/lib/js/chartjs-plugin-datalabels.js'
|
||||
],
|
||||
cssLibs: [
|
||||
'/ks_dashboard_ninja/static/lib/css/Chart.min.css'
|
||||
],
|
||||
|
||||
init: function(parent, state, params) {
|
||||
this._super.apply(this, arguments);
|
||||
},
|
||||
|
||||
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 Count Type"));
|
||||
} else {
|
||||
this._getChartData();
|
||||
}
|
||||
} else {
|
||||
this.$el.append($('<div>').text("Select a Model first."));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
_getChartData: function() {
|
||||
var self = this;
|
||||
self.shouldRenderChart = true;
|
||||
var field = this.recordData;
|
||||
var ks_chart_name;
|
||||
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',
|
||||
textAlign: '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('canvas').height() < 250) {
|
||||
this.$el.find('canvas').height(250);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
});
|
||||
registry.add('ks_dashboard_graph_preview', KsGraphPreview);
|
||||
|
||||
return {
|
||||
KsGraphPreview: KsGraphPreview,
|
||||
};
|
||||
|
||||
});
|
||||
@@ -0,0 +1,234 @@
|
||||
odoo.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,
|
||||
count_tooltip: field.ks_record_count,
|
||||
}
|
||||
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,321 @@
|
||||
odoo.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")
|
||||
}
|
||||
},
|
||||
ksSum: function(count_1, count_2, item_info, field, target_1, $kpi_preview, kpi_data) {
|
||||
var self = this;
|
||||
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 == 0 ? 0 : Math.round((count / target_1) * 100);
|
||||
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)
|
||||
}
|
||||
return $kpi_preview
|
||||
},
|
||||
ksPercentage: function(count_1, count_2, field, item_info, target_1, $kpi_preview) {
|
||||
var count = parseInt((count_1 / count_2) * 100);
|
||||
if (!count) count = 0;
|
||||
|
||||
item_info['count'] = count ? field_utils.format.integer(count) + "%" : "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.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)
|
||||
}
|
||||
return $kpi_preview;
|
||||
},
|
||||
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),
|
||||
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('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":
|
||||
$kpi_preview = self.ksSum(count_1, count_2, item_info, field, target_1, $kpi_preview, kpi_data);
|
||||
break;
|
||||
case "Percentage":
|
||||
$kpi_preview = self.ksPercentage(count_1, count_2, field, item_info, target_1, $kpi_preview);
|
||||
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,113 @@
|
||||
odoo.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 QWeb = core.qweb;
|
||||
var field_utils = require('web.field_utils');
|
||||
|
||||
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 self = this;
|
||||
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;
|
||||
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[i] === '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;
|
||||
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,
|
||||
layout: self.recordData.ks_list_view_layout,
|
||||
}));
|
||||
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,
|
||||
};
|
||||
|
||||
});
|
||||
16
ks_dashboard_ninja/static/src/js/ks_date_picker.js
Normal file
16
ks_dashboard_ninja/static/src/js/ks_date_picker.js
Normal file
@@ -0,0 +1,16 @@
|
||||
odoo.define("ks_dashboard_ninja.ks_date_picker", function(require) {
|
||||
"use strict";
|
||||
var datepicker = require("web.datepicker");
|
||||
|
||||
datepicker.DateWidget.include({
|
||||
|
||||
_onDateTimePickerShow: function() {
|
||||
this._super.apply(this, arguments);
|
||||
|
||||
if (this.name === "ks_dashboard") {
|
||||
window.removeEventListener('scroll', this._onScroll, true);
|
||||
}
|
||||
},
|
||||
});
|
||||
return datepicker;
|
||||
})
|
||||
67
ks_dashboard_ninja/static/src/js/ks_domain_fix.js
Normal file
67
ks_dashboard_ninja/static/src/js/ks_domain_fix.js
Normal file
@@ -0,0 +1,67 @@
|
||||
odoo.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 Domain = require('web.Domain');
|
||||
|
||||
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);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
});
|
||||
69
ks_dashboard_ninja/static/src/js/ks_global_functions.js
Normal file
69
ks_dashboard_ninja/static/src/js/ks_global_functions.js
Normal file
@@ -0,0 +1,69 @@
|
||||
odoo.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;
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
});
|
||||
104
ks_dashboard_ninja/static/src/js/ks_image_basic_widget.js
Normal file
104
ks_dashboard_ninja/static/src/js/ks_image_basic_widget.js
Normal file
@@ -0,0 +1,104 @@
|
||||
odoo.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,
|
||||
};
|
||||
});
|
||||
150
ks_dashboard_ninja/static/src/js/ks_import_dashboard.js
Normal file
150
ks_dashboard_ninja/static/src/js/ks_import_dashboard.js
Normal file
@@ -0,0 +1,150 @@
|
||||
odoo.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 framework = require('web.framework');
|
||||
var Dialog = require('web.Dialog');
|
||||
|
||||
|
||||
ListController.include({
|
||||
|
||||
renderButtons: function($node) {
|
||||
this.ksIsAdmin = odoo.session_info.is_admin;
|
||||
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 add custom dashboard export option under action button
|
||||
renderSidebar: function($node) {
|
||||
var self = this;
|
||||
//Only for our custom model
|
||||
if (this.modelName == "ks_dashboard_ninja.board") {
|
||||
if (this.hasSidebar) {
|
||||
var other = [{
|
||||
label: _t("Export Dashboard"),
|
||||
callback: this.ks_dashboard_export.bind(this)
|
||||
}];
|
||||
if (this.archiveEnabled) {
|
||||
other.push({
|
||||
label: _t("Archive"),
|
||||
callback: function() {
|
||||
Dialog.confirm(self, _t("Are you sure that you want to archive all the selected records?"), {
|
||||
confirm_callback: self._toggleArchiveState.bind(self, true),
|
||||
});
|
||||
}
|
||||
});
|
||||
other.push({
|
||||
label: _t("Unarchive"),
|
||||
callback: this._toggleArchiveState.bind(this, false)
|
||||
});
|
||||
}
|
||||
if (this.is_action_enabled('delete')) {
|
||||
other.push({
|
||||
label: _t('Delete'),
|
||||
callback: this._onDeleteSelectedRecords.bind(this)
|
||||
});
|
||||
}
|
||||
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
|
||||
}),
|
||||
});
|
||||
return this.sidebar.appendTo($node).then(function() {
|
||||
self._toggleSidebar();
|
||||
});
|
||||
}
|
||||
return Promise.resolve();
|
||||
} else {
|
||||
this._super.apply(this, arguments);
|
||||
}
|
||||
},
|
||||
|
||||
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: (error) => this.call('crash_manager', 'rpc_error', error),
|
||||
});
|
||||
})
|
||||
},
|
||||
|
||||
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();
|
||||
} else if (result.ks_skiped_items){
|
||||
Dialog.alert(self, _t("Some Items can not be imported Need Dashboard Ninja pro "), {
|
||||
confirm_callback: function() {
|
||||
location.reload();
|
||||
},
|
||||
title: _t('All items can not be Imported'),
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
};
|
||||
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;
|
||||
});
|
||||
169
ks_dashboard_ninja/static/src/js/ks_quick_edit_view.js
Normal file
169
ks_dashboard_ninja/static/src/js/ks_quick_edit_view.js
Normal file
@@ -0,0 +1,169 @@
|
||||
odoo.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.QuickCreateFormView');
|
||||
var AbstractAction = require('web.AbstractAction');
|
||||
|
||||
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({}, odoo.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);
|
||||
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_background_color'] = ksChanges['ks_background_color'];
|
||||
self.item['ks_default_icon_color'] = ksChanges['ks_default_icon_color'];
|
||||
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'];
|
||||
|
||||
if (ksChanges['ks_chart_item_color']) self.item['ks_chart_item_color'] = ksChanges['ks_chart_item_color'];
|
||||
|
||||
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._super();
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
return {
|
||||
QuickEditView: QuickEditView,
|
||||
};
|
||||
});
|
||||
106
ks_dashboard_ninja/static/src/js/ks_widget_toggle.js
Normal file
106
ks_dashboard_ninja/static/src/js/ks_widget_toggle.js
Normal file
@@ -0,0 +1,106 @@
|
||||
odoo.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
|
||||
};
|
||||
|
||||
|
||||
});
|
||||
15
ks_dashboard_ninja/static/src/scss/ks_dn_gridstack.scss
Normal file
15
ks_dashboard_ninja/static/src/scss/ks_dn_gridstack.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
/*rtl:begin:ignore*/
|
||||
.grid-stack > .grid-stack-item {
|
||||
|
||||
$gridstack-columns: 36;
|
||||
|
||||
min-width: (100% / $gridstack-columns);
|
||||
|
||||
@for $i from 1 through $gridstack-columns {
|
||||
&[data-gs-width='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
|
||||
&[data-gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
|
||||
&[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
|
||||
&[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
|
||||
}
|
||||
}
|
||||
/*rtl:end:ignore*/
|
||||
@@ -0,0 +1,469 @@
|
||||
<?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">
|
||||
<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" 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">
|
||||
<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-att-title="count_tooltip">
|
||||
<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-att-title="count_tooltip">
|
||||
<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-att-title="count_tooltip">
|
||||
<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-att-title="count_tooltip">
|
||||
<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-att-title="count_tooltip">
|
||||
<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-att-title="count_tooltip">
|
||||
<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_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 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 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 t-esc="name"/>
|
||||
</div>
|
||||
<div class="ks_dashboard_kpi_count_preview" t-att-title="count_1_tooltip">
|
||||
<span class="ks_count">
|
||||
<t t-esc="count_1"/>
|
||||
</span>
|
||||
/
|
||||
<span>
|
||||
<t t-esc="target"/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center ks_progress">
|
||||
<div>
|
||||
<progress id="ks_progressbar" value="0" max="100"/>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<t t-esc="target_progress_deviation"/>%
|
||||
</div>
|
||||
</div>
|
||||
<t t-if="ks_previous_period and previous_period_data">
|
||||
<div class="text-center mt-1">
|
||||
<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 t-esc="name"/>
|
||||
</div>
|
||||
<div class="ks_dashboard_kpi_count_preview" t-att-title="count_tooltip">
|
||||
<span>
|
||||
<t t-esc="count"/>
|
||||
<t t-if="target_view =='Progress Bar' and target_enable">/
|
||||
<t t-esc="target"/>
|
||||
</t>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<t t-if="ks_enable_goal and target_enable">
|
||||
<t t-if="target_deviation and target_view =='Number'">
|
||||
<div class="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="text-center ks_progress">
|
||||
<div>
|
||||
<progress id="ks_progressbar" value="0" max="100"/>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<t t-esc="target_progress_deviation"/>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</t>
|
||||
</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>
|
||||
|
||||
</templates>
|
||||
@@ -0,0 +1,31 @@
|
||||
<?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>
|
||||
1227
ks_dashboard_ninja/static/src/xml/ks_dashboard_ninja_templates.xml
Normal file
1227
ks_dashboard_ninja/static/src/xml/ks_dashboard_ninja_templates.xml
Normal file
File diff suppressed because it is too large
Load Diff
410
ks_dashboard_ninja/static/src/xml/ks_dashboard_pro.xml
Normal file
410
ks_dashboard_ninja/static/src/xml/ks_dashboard_pro.xml
Normal file
@@ -0,0 +1,410 @@
|
||||
<?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" t-att-id="chart_id">
|
||||
<div class="grid-stack-item-content ks_dashboarditem_chart_container ks_dashboard_item_hover card shadow">
|
||||
|
||||
<div class="p-3 py-3 d-flex flex-row align-items-center justify-content-between ">
|
||||
<div class="d-flex align-items-center w-50">
|
||||
<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" 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" 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">
|
||||
<button title="Color Palette" data-toggle="dropdown"
|
||||
class="ks_dashboard_item_action 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_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">
|
||||
<button title="Move/Duplicate" data-toggle="dropdown"
|
||||
class="ks_dashboard_item_action btn dropdown-toggle btn-xs" type="button"
|
||||
aria-expanded="true">
|
||||
<i class="fa fa-files-o"/>
|
||||
</button>
|
||||
<ul role="menu" class="ks_dashboard_menu_container dropdown-menu dropdown-menu-right">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<button title="Quick Customize"
|
||||
class="ks_dashboard_quick_edit_action_popup btn d-sm-block d-none"
|
||||
type="button" t-att-data-item-id="chart_id">
|
||||
<i class="fa fa-pencil"/>
|
||||
</button>
|
||||
|
||||
<button class="ks_dashboard_item_customize d-block d-sm-none" 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_dashboard_more_action" 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"
|
||||
type="button"
|
||||
aria-expanded="true">
|
||||
<i class="fa fa-ellipsis-v"/>
|
||||
</button>
|
||||
<div role="menu" class="dropdown-menu dropdown-menu-right">
|
||||
<!--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="ks_chart_xls_csv_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="ks_chart_xls_csv_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="ks_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>
|
||||
|
||||
<div t-name="ks_pager_template" class="ks_pager">
|
||||
<span class="ks_counter">
|
||||
<span class="ks_value">
|
||||
<t t-esc="count"/>
|
||||
</span>
|
||||
</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"
|
||||
t-att-data-item-id="item_id" title="Previous"/>
|
||||
<button type="button" class="fa fa-chevron-right btn ks_load_next"
|
||||
t-att-data-item-id="item_id" title="Next"/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- GridStack List View Item Container-->
|
||||
<t t-name="ks_gridstack_list_view_container">
|
||||
<div class="grid-stack-item" t-att-id="item_id">
|
||||
<div class="grid-stack-item-content ks_list_view_container ks_dashboard_item_hover card shadow">
|
||||
|
||||
<div class="p-3 py-3 d-flex flex-row align-items-center justify-content-between ">
|
||||
<div class="d-flex align-items-center w-50">
|
||||
<h6 class="m-0 font-weight-bold h3 mr-3 ks_list_view_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"/>
|
||||
</button>
|
||||
<ul role="menu" class="ks_dashboard_menu_container dropdown-menu dropdown-menu-right">
|
||||
<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-sm-block d-none"
|
||||
type="button" t-att-data-item-id="item_id">
|
||||
<i class="fa fa-pencil"/>
|
||||
</button>
|
||||
|
||||
<button class="ks_dashboard_item_customize d-block d-sm-none" 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">
|
||||
<button title="Export List" data-toggle="dropdown"
|
||||
class="ks_dashboard_item_action_export btn dropdown-toggle btn-xs o-no-caret btn"
|
||||
type="button"
|
||||
aria-expanded="true">
|
||||
<i class="fa fa-ellipsis-v"/>
|
||||
</button>
|
||||
<div role="menu" class="dropdown-menu dropdown-menu-right">
|
||||
<!--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="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="card shadow p-0 m-0 w-100">
|
||||
<div class="p-3 py-3 d-flex flex-row align-items-center justify-content-between ">
|
||||
<h6 class="m-0 font-weight-bold h3 ks_chart_heading" t-att-title="ks_chart_name">
|
||||
<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="p-3 py-3 d-flex flex-row align-items-center justify-content-between ">
|
||||
<h6 class="m-0 font-weight-bold h3 ks_chart_heading" t-att-title="ks_list_view_name">
|
||||
<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>
|
||||
<t t-call="ks_list_view_header"></t>
|
||||
</thead>
|
||||
<tbody class="ks_table_body">
|
||||
<!-- <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_header">
|
||||
<tr>
|
||||
<t t-foreach="list_view_data['label']" t-as="table_header">
|
||||
<th>
|
||||
<t t-esc="table_header"/>
|
||||
</th>
|
||||
</t>
|
||||
<th/>
|
||||
</tr>
|
||||
</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">
|
||||
<t t-if ="list_view_data['type']=='grouped'">
|
||||
<td class="ks_list_canvas_click">
|
||||
<t t-esc="row_data"/>
|
||||
</td>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<td>
|
||||
<t t-esc="row_data"/>
|
||||
</td>
|
||||
</t>
|
||||
</t>
|
||||
<td class="ks_info">
|
||||
<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"
|
||||
t-att-data-domain="table_row['domain']"
|
||||
class="fa fa-pencil"/>
|
||||
</td>
|
||||
</tr>
|
||||
</t>
|
||||
</t>
|
||||
|
||||
</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>
|
||||
24
ks_dashboard_ninja/static/src/xml/ks_quick_edit_view.xml
Normal file
24
ks_dashboard_ninja/static/src/xml/ks_quick_edit_view.xml
Normal file
@@ -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>
|
||||
56
ks_dashboard_ninja/static/src/xml/ks_widget_toggle.xml
Normal file
56
ks_dashboard_ninja/static/src/xml/ks_widget_toggle.xml
Normal file
@@ -0,0 +1,56 @@
|
||||
<?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