Skip to content

D
doc
Commit 1d82a4b8 authored by Olessya Khussainova's avatar Olessya Khussainova
Browse files
Options

user modules

parent f6a3e68b
Show whitespace changes
Inline Side-by-side
Showing with 678 additions and 3 deletions
crm/methodologist-manual/src/crm_consist/user_modules.md
View file @ 1d82a4b8
### Пользовательские компоненты {#userModules} ### Пользовательские компоненты {#userModules}
* [crm_component_canban](#uMCanban) * [crm_component_canban_deal](#uMCanbanDeal)
* [crm_component_deals_dashboard](#uMDealsDashboard)
* [crm_component_deals_productivity](#uMDealsProductivity)
* [crm_component_deal_button](#uMDealButton) * [crm_component_deal_button](#uMDealButton)
* [crm_component_funnel](#uMFunnel) * [crm_component_funnel](#uMFunnel)
* [crm_component_funnel_deal](#uMFunnelDeal)
* [crm_component_group_button](#uMGroupButton) * [crm_component_group_button](#uMGroupButton)
* [crm_component_group_button_deal](#uMGroupButtonDeal)
* [crm_component_leads_dashboard](#uMLeadsDashboard)
* [crm_component_notifications](#uMNotifications) * [crm_component_notifications](#uMNotifications)
* [crm_component_registry_chooser](#uMRegistryChooser) * [crm_component_registry_chooser](#uMRegistryChooser)
* [crm_component_social_links_accounts](#uMSocialLinksAccounts)
* [crm_component_social_links_contacts](#uMSocialLinksContacts)
#### crm_component_canban {#uMCanban} #### crm_component_canban {#uMCanban}
...@@ -165,6 +168,198 @@ view.initDnd = redipsInit; ...@@ -165,6 +168,198 @@ view.initDnd = redipsInit;
``` ```
#### crm_component_canban_deal {#uMCanbanDeal}
+--------------------------------------------------------+----------------------------------------------------------+
| Свойство | Значение |
+========================================================+==========================================================+
| Код | crm_component_canban_deal |
+--------------------------------------------------------+----------------------------------------------------------+
| Использовать в формах | включен |
+--------------------------------------------------------+----------------------------------------------------------+
HTML код:
``` xml
<div id="redips-drag">
</div>
```
JAVASCRIPT код:
``` xml
/*jslint white: true, browser: true, undef: true, nomen: true, eqeqeq: true, plusplus: false, bitwise: true, regexp: true, strict: true, newcap: true, immed: true, maxerr: 14 */
/*global window: false, REDIPS: true */
/* enable strict mode */
"use strict";
// define redips_init variable
var redipsInit;
// redips initialization
redipsInit = function () {
// reference to the REDIPS.drag library and message line
var rd = REDIPS.drag;
// how to display disabled elements
rd.style.borderDisabled = 'solid'; // border style for disabled element will not be changed (default is dotted)
rd.style.opacityDisabled = 60; // disabled elements will have opacity effect
REDIPS.drag.dropMode = 'multiple';
// initialization
rd.init();
// only "smile" can be placed to the marked cell
rd.mark.exception.d8 = 'smile';
// prepare handlers
rd.event.clicked = function () {
};
rd.event.dblClicked = function () {
};
rd.event.moved = function () {
};
rd.event.notMoved = function () {
};
rd.event.dropped = function () {
var pos = rd.getPosition();
console.log($(rd.obj).attr('status'));
var status = model.currentData[pos[2]];
if ($(rd.obj).attr('status') === status.status) {
return;
}
AS.SERVICES.showWaitWindow();
var pFact = jQuery.ajax({
url: window.location.origin + "/crm/rest/api/funnel/changeDealStatus?statusID="+(status.status) + "&statusName="+(status.name)+"&leadID=" + rd.obj.id,
type: "POST",
beforeSend: AS.FORMS.ApiUtils.addAuthHeader,
dataType: "text",
error: function(jqXHR, textStatus, errorThrown){
model.playerModel.redraw();
AS.SERVICES.hideWaitWindow();
try {
AS.SERVICES.showErrorMessage(jqXHR.responseText);
} catch (e) {
console.log(e);
}
}
});
jQuery.when(pFact).then(function (data) {
model.playerModel.firstShow = false;
console.log(data);
model.playerModel.redraw();
var object = JSON.parse(data);
if (object.dealObject) {
var documentID = object.id;
var hash = '#' + jQuery.param({
submodule: 'common',
action: 'open_document',
document_identifier: documentID});
window.top.location.hash = hash;
}
AS.SERVICES.hideWaitWindow();
});
};
rd.event.switched = function () {
};
rd.event.clonedEnd1 = function () {
};
rd.event.clonedEnd2 = function () {
};
rd.event.notCloned = function () {
};
rd.event.deleted = function (cloned) {
// if cloned element is directly moved to the trash
if (cloned) {
// set id of original element (read from redips property)
// var id_original = rd.obj.redips.id_original;
}
else {
}
};
rd.event.undeleted = function () {
};
rd.event.cloned = function () {
};
rd.event.changed = function () {
// get target and source position (method returns positions as array)
var pos = rd.getPosition();
};
};
// toggles trash_ask parameter defined at the top
function toggleConfirm(chk) {
if (chk.checked === true) {
REDIPS.drag.trash.question = 'Are you sure you want to delete DIV element?';
}
else {
REDIPS.drag.trash.question = null;
}
}
// toggles delete_cloned parameter defined at the top
function toggleDeleteCloned(chk) {
REDIPS.drag.clone.drop = !chk.checked;
}
// enables / disables dragging
function toggleDragging(chk) {
REDIPS.drag.enableDrag(chk.checked);
}
// function sets drop_option parameter defined at the top
function setMode(radioButton) {
REDIPS.drag.dropMode = radioButton.value;
}
view.initDnd = redipsInit;
```
#### crm_component_deals_dashboard {#uMDealsDashboard}
+--------------------------------------------------------+----------------------------------------------------------+
| Свойство | Значение |
+========================================================+==========================================================+
| Код | crm_component_deals_dashboard |
+--------------------------------------------------------+----------------------------------------------------------+
| Использовать в формах | включен |
+--------------------------------------------------------+----------------------------------------------------------+
HTML код:
``` xml
<iframe src="http://192.168.1.114:5601/app/kibana#/dashboard/%D0%A3%D0%BF%D1%80%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BF%D1%80%D0%BE%D0%B4%D0%B0%D0%B6%D0%B0%D0%BC%D0%B8?embed=true&_g=(refreshInterval%3A('%24%24hashKey'%3A'object%3A36258'%2Cdisplay%3A'30%20seconds'%2Cpause%3A!f%2Csection%3A1%2Cvalue%3A30000)%2Ctime%3A(from%3Anow-15m%2Cmode%3Aquick%2Cto%3Anow))" height="100%" width="100%"></iframe>
```
#### crm_component_deals_productivity {#uMDealsProductivity}
+--------------------------------------------------------+----------------------------------------------------------+
| Свойство | Значение |
+========================================================+==========================================================+
| Код | crm_component_deals_productivity |
+--------------------------------------------------------+----------------------------------------------------------+
| Использовать в формах | включен |
+--------------------------------------------------------+----------------------------------------------------------+
HTML код:
``` xml
<iframe src="http://192.168.1.114:5601/app/kibana#/dashboard/%D0%9F%D1%80%D0%BE%D0%B4%D1%83%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D0%BE%D1%81%D1%82%D1%8C?embed=true&_g=(refreshInterval%3A('%24%24hashKey'%3A'object%3A700'%2Cdisplay%3A'30%20seconds'%2Cpause%3A!f%2Csection%3A1%2Cvalue%3A30000)%2Ctime%3A(from%3Anow-15m%2Cmode%3Aquick%2Cto%3Anow))" height="100%" width="100%"></iframe>
```
#### crm_component_deal_button {#uMDealButton} #### crm_component_deal_button {#uMDealButton}
+--------------------------------------------------------+----------------------------------------------------------+ +--------------------------------------------------------+----------------------------------------------------------+
...@@ -277,18 +472,449 @@ const options = { ...@@ -277,18 +472,449 @@ const options = {
} }
} }
const chart = new D3Funnel('#funnel'); const chart = new D3Funnel('#funnel');
const picker = document.getElementById('picker'); const picker = document.getElementById('picker');
chart.draw(data.normal, options); chart.draw(data.normal, options);
```
#### crm_component_funnel_deal {#uMFunnelDeal}
+--------------------------------------------------------+----------------------------------------------------------+
| Свойство | Значение |
+========================================================+==========================================================+
| Код | crm_component_funnel_deal |
+--------------------------------------------------------+----------------------------------------------------------+
| Использовать в формах | включен |
+--------------------------------------------------------+----------------------------------------------------------+
HTML код:
``` xml
<style>
.chart {
margin: 0 auto;
margin-top: 20px;
margin-bottom: 20px;
height: 500px;
width: 450px;
}
</style
<!-- Funnel container -->
<div class="chart" id="funnel"></div>
```
JAVASCRIPT код:
``` xml
/* global D3Funnel */
const data = {
normal: [
['Первичная регистрация', [0, ''], '#e73a00'],
['Квалификация', [0, ''], '#fa6c00'],
['Взращивание', [0, ''], '#ffa900'],
['Подтверждение интереса', [0, ''], '#ffc500'],
['В сделку', [0, ''], '#a6cf00'],
]
};
const options = {
chart: {
width: 450,
height: 500,
bottomWidth: 1 / 2,
curve: {
enabled: false,
},
},
block: {
dynamicHeight: false,
highlight: true,
minHeight: 40,
},
label: {
format: '{l}: {v}\n{f}',
},
events: {
click: {
block: (d) => {
alert('<' + d.label.raw + '> selected.');
},
},
}
}
const chart = new D3Funnel('#funnel');
const picker = document.getElementById('picker');
chart.draw(data.normal, options);
```
#### crm_component_group_button {#uMGroupButton}
+--------------------------------------------------------+----------------------------------------------------------+
| Свойство | Значение |
+========================================================+==========================================================+
| Код | crm_component_group_button |
+--------------------------------------------------------+----------------------------------------------------------+
| Использовать в формах | включен |
+--------------------------------------------------------+----------------------------------------------------------+
HTML код:
``` xml
<style>
.btn_boot-group-lg > .btn_boot, .btn_boot-lg {
padding: 10px 16px;
font-size: 18px;
border-radius: 6px
}
.btn_boot-group-sm > .btn_boot, .btn_boot-sm {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px
}
.btn_boot-group-xs > .btn_boot, .btn_boot-xs {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px
}
.btn_boot-group, .btn_boot-group-vertical {
position: relative;
vertical-align: middle;
padding-top: 3px;
}
.btn_boot-group-vertical > .btn_boot, .btn_boot-group > .btn_boot {
position: relative;
float: left
}
.btn_boot-group-vertical > .btn_boot.active, .btn_boot-group-vertical > .btn_boot:active, .btn_boot-group-vertical > .btn_boot:focus, .btn_boot-group-vertical > .btn_boot:hover, .btn_boot-group > .btn_boot.active, .btn_boot-group > .btn_boot:active, .btn_boot-group > .btn_boot:focus, .btn_boot-group > .btn_boot:hover {
z-index: 2
}
.btn_boot-group .btn_boot + .btn_boot, .btn_boot-group .btn_boot + .btn_boot-group, .btn_boot-group .btn_boot-group + .btn_boot, .btn_boot-group .btn_boot-group + .btn_boot-group {
margin-left: -1px
}
.btn_boot-toolbar {
margin-left: -5px
}
.btn_boot-toolbar .btn_boot, .btn_boot-toolbar .btn_boot-group, .btn_boot-toolbar .input-group {
float: left
}
.btn_boot-toolbar > .btn_boot, .btn_boot-toolbar > .btn_boot-group, .btn_boot-toolbar > .input-group {
margin-left: 5px
}
.btn_boot-group > .btn_boot:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0
}
.btn_boot-group > .btn_boot:first-child {
margin-left: 0
}
.btn_boot-group > .btn_boot:first-child:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
.btn_boot-group > .btn_boot:last-child:not(:first-child), .btn_boot-group > .dropdown-toggle:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0
}
.btn_boot-group > .btn_boot-group {
float: left
}
.btn_boot-group > .btn_boot-group:not(:first-child):not(:last-child) > .btn_boot {
border-radius: 0
}
.btn_boot-group > .btn_boot-group:first-child:not(:last-child) > .btn_boot:last-child, .btn_boot-group > .btn_boot-group:first-child:not(:last-child) > .dropdown-toggle {
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
.btn_boot-group > .btn_boot-group:last-child:not(:first-child) > .btn_boot:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0
}
.btn_boot-group .dropdown-toggle:active, .btn_boot-group.open .dropdown-toggle {
outline: 0
}
.btn_boot-group > .btn_boot + .dropdown-toggle {
padding-right: 8px;
padding-left: 8px
}
.btn_boot-group > .btn_boot-lg + .dropdown-toggle {
padding-right: 12px;
padding-left: 12px
}
.btn_boot-group.open .dropdown-toggle {
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)
}
.btn_boot-group.open .dropdown-toggle.btn_boot-link {
-webkit-box-shadow: none;
box-shadow: none
}
.btn_boot .caret {
margin-left: 0
}
.btn_boot-lg .caret {
border-width: 5px 5px 0;
border-bottom-width: 0
}
.dropup .btn_boot-lg .caret {
border-width: 0 5px 5px
}
.btn_boot-group-vertical > .btn_boot, .btn_boot-group-vertical > .btn_boot-group, .btn_boot-group-vertical > .btn_boot-group > .btn_boot {
display: block;
float: none;
width: 100%;
max-width: 100%
}
.btn_boot-group-vertical > .btn_boot-group > .btn_boot {
float: none
}
.btn_boot-group-vertical > .btn_boot + .btn_boot, .btn_boot-group-vertical > .btn_boot + .btn_boot-group, .btn_boot-group-vertical > .btn_boot-group + .btn_boot, .btn_boot-group-vertical > .btn_boot-group + .btn_boot-group {
margin-top: -1px;
margin-left: 0
}
.btn_boot-group-vertical > .btn_boot:not(:first-child):not(:last-child) {
border-radius: 0
}
.btn_boot-group-vertical > .btn_boot:first-child:not(:last-child) {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0
}
.btn_boot-group-vertical > .btn_boot:last-child:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px
}
.btn_boot-group-vertical > .btn_boot-group:not(:first-child):not(:last-child) > .btn_boot {
border-radius: 0
}
.btn_boot-group-vertical > .btn_boot-group:first-child:not(:last-child) > .btn_boot:last-child, .btn_boot-group-vertical > .btn_boot-group:first-child:not(:last-child) > .dropdown-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0
}
.btn_boot-group-vertical > .btn_boot-group:last-child:not(:first-child) > .btn_boot:first-child {
border-top-left-radius: 0;
border-top-right-radius: 0
}
.btn_boot-group-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate
}
.btn_boot-group-justified > .btn_boot, .btn_boot-group-justified > .btn_boot-group {
display: table-cell;
float: none;
width: 1%
}
.btn_boot-group-justified > .btn_boot-group .btn_boot {
width: 100%
}
.btn_boot-group-justified > .btn_boot-group .dropdown-menu {
left: auto
}
.btn_boot {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: bolder;
line-height: 0.9;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn_boot.active.focus, .btn_boot.active:focus, .btn_boot.focus, .btn_boot:active.focus, .btn_boot:active:focus, .btn_boot:focus {
}
.btn_boot.focus, .btn_boot:focus, .btn_boot:hover {
color: #333;
text-decoration: none
}
.btn_boot.active, .btn_boot:active {
background-image: none;
outline: 0;
}
.btn_boot.disabled, .btn_boot[disabled], fieldset[disabled] .btn_boot {
cursor: not-allowed;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65
}
a.btn_boot.disabled, fieldset[disabled] a.btn_boot {
pointer-events: none
}
.btn_boot-default {
color: #333;
background-color: #eeeeee;
border-color: #D5D5D5
}
.btn_boot-default.focus, .btn_boot-default:focus {
color: #333;
background-color: #eeeeee;
border-color: #D5D5D5
}
.btn_boot-default:hover {
color: #333;
background-color: #eeeeee;
border-color: #D5D5D5
}
.btn_boot-default.active, .btn_boot-default:active, .open > .dropdown-toggle.btn_boot-default {
color: #333;
background-color: #DDDDDD;
border-color: #D5D5D5
}
.btn_boot-default.active.focus, .btn_boot-default.active:focus, .btn_boot-default.active:hover, .btn_boot-default:active.focus, .btn_boot-default:active:focus, .btn_boot-default:active:hover, .open > .dropdown-toggle.btn_boot-default.focus, .open > .dropdown-toggle.btn_boot-default:focus, .open > .dropdown-toggle.btn_boot-default:hover {
color: #333;
background-color: #DDDDDD;
border-color: #D5D5D5
}
.btn_boot-default.active, .btn_boot-default:active, .open > .dropdown-toggle.btn_boot-default {
background-image: none
}
.btn_boot-default.disabled.focus, .btn_boot-default.disabled:focus, .btn_boot-default.disabled:hover, .btn_boot-default[disabled].focus, .btn_boot-default[disabled]:focus, .btn_boot-default[disabled]:hover, fieldset[disabled] .btn_boot-default.focus, fieldset[disabled] .btn_boot-default:focus, fieldset[disabled] .btn_boot-default:hover {
background-color: #fff;
border-color: #D5D5D5
}
.btn_boot-default .badge {
color: #fff;
background-color: #8c8c8c
}
</style>
<div class="btn_boot-group" style="
width: 190px;
margin: 0 auto;
height: 26px;
align-self: center;
text-align: center;
" innerId="group">
<button type="button" class="btn_boot btn_boot-default" innerId="funnel">Воронка</button>
<button type="button" class="btn_boot btn_boot-default active" innerId="canban">Канбан</button>
</div>
```
JAVASCRIPT код:
``` xml
$(".btn_boot-group > .btn_boot").click(function(){
$(this).addClass("active").siblings().removeClass("active");
});
var funnel = jQuery(view.container[0]).children("[innerId='group']").children("[innerId='funnel']");
funnel.text(i18n.tr('Воронка'));
var canban = jQuery(view.container[0]).children("[innerId='group']").children("[innerId='canban']");
canban.text(i18n.tr('Канбан'));
var funnel_cmp = view.playerView.getViewWithId('crm_form_funnel_funnel');
var canban_cmp = view.playerView.getViewWithId('crm_form_funnel_canban');
var bottom_cmp = view.playerView.getViewWithId('crm_form_funnel_bottom_sum');
model.playerModel.funnelDrawn = false;
model.playerModel.canbanDrawn = false;
funnel.click(function(){
$('body').css('overflow', 'auto');
funnel_cmp.setVisible(true);
canban_cmp.setVisible(false);
bottom_cmp.setVisible(true);
model.playerModel.isFunnel = true;
if (!model.playerModel.funnelDrawn) {
model.playerModel.redraw();
}
});
canban.click(function(){
$('body').css('overflow', 'auto');
funnel_cmp.setVisible(false);
canban_cmp.setVisible(true);
bottom_cmp.setVisible(false);
model.playerModel.isFunnel = false;
if (!model.playerModel.canbanDrawn) {
model.playerModel.redraw();
}
});
``` ```
#### crm_component_group_button {#uMGroupButton} #### crm_component_group_button_deal {#uMGroupButtonDeal}
+--------------------------------------------------------+----------------------------------------------------------+ +--------------------------------------------------------+----------------------------------------------------------+
| Свойство | Значение | | Свойство | Значение |
+========================================================+==========================================================+ +========================================================+==========================================================+
| Код | crm_component_group_button | | Код | crm_component_group_button_deal |
+--------------------------------------------------------+----------------------------------------------------------+ +--------------------------------------------------------+----------------------------------------------------------+
| Использовать в формах | включен | | Использовать в формах | включен |
+--------------------------------------------------------+----------------------------------------------------------+ +--------------------------------------------------------+----------------------------------------------------------+
...@@ -297,6 +923,7 @@ HTML код: ...@@ -297,6 +923,7 @@ HTML код:
``` xml ``` xml
<style> <style>
.btn_boot-group-lg > .btn_boot, .btn_boot-lg { .btn_boot-group-lg > .btn_boot, .btn_boot-lg {
...@@ -305,194 +932,194 @@ HTML код: ...@@ -305,194 +932,194 @@ HTML код:
border-radius: 6px border-radius: 6px
} }
.btn_boot-group-sm > .btn_boot, .btn_boot-sm { .btn_boot-group-sm > .btn_boot, .btn_boot-sm {
padding: 5px 10px; padding: 5px 10px;
font-size: 12px; font-size: 12px;
line-height: 1.5; line-height: 1.5;
border-radius: 3px border-radius: 3px
} }
.btn_boot-group-xs > .btn_boot, .btn_boot-xs { .btn_boot-group-xs > .btn_boot, .btn_boot-xs {
padding: 1px 5px; padding: 1px 5px;
font-size: 12px; font-size: 12px;
line-height: 1.5; line-height: 1.5;
border-radius: 3px border-radius: 3px
} }
.btn_boot-group, .btn_boot-group-vertical { .btn_boot-group, .btn_boot-group-vertical {
position: relative; position: relative;
vertical-align: middle; vertical-align: middle;
padding-top: 3px; padding-top: 3px;
} }
.btn_boot-group-vertical > .btn_boot, .btn_boot-group > .btn_boot { .btn_boot-group-vertical > .btn_boot, .btn_boot-group > .btn_boot {
position: relative; position: relative;
float: left float: left
} }
.btn_boot-group-vertical > .btn_boot.active, .btn_boot-group-vertical > .btn_boot:active, .btn_boot-group-vertical > .btn_boot:focus, .btn_boot-group-vertical > .btn_boot:hover, .btn_boot-group > .btn_boot.active, .btn_boot-group > .btn_boot:active, .btn_boot-group > .btn_boot:focus, .btn_boot-group > .btn_boot:hover { .btn_boot-group-vertical > .btn_boot.active, .btn_boot-group-vertical > .btn_boot:active, .btn_boot-group-vertical > .btn_boot:focus, .btn_boot-group-vertical > .btn_boot:hover, .btn_boot-group > .btn_boot.active, .btn_boot-group > .btn_boot:active, .btn_boot-group > .btn_boot:focus, .btn_boot-group > .btn_boot:hover {
z-index: 2 z-index: 2
} }
.btn_boot-group .btn_boot + .btn_boot, .btn_boot-group .btn_boot + .btn_boot-group, .btn_boot-group .btn_boot-group + .btn_boot, .btn_boot-group .btn_boot-group + .btn_boot-group { .btn_boot-group .btn_boot + .btn_boot, .btn_boot-group .btn_boot + .btn_boot-group, .btn_boot-group .btn_boot-group + .btn_boot, .btn_boot-group .btn_boot-group + .btn_boot-group {
margin-left: -1px margin-left: -1px
} }
.btn_boot-toolbar { .btn_boot-toolbar {
margin-left: -5px margin-left: -5px
} }
.btn_boot-toolbar .btn_boot, .btn_boot-toolbar .btn_boot-group, .btn_boot-toolbar .input-group { .btn_boot-toolbar .btn_boot, .btn_boot-toolbar .btn_boot-group, .btn_boot-toolbar .input-group {
float: left float: left
} }
.btn_boot-toolbar > .btn_boot, .btn_boot-toolbar > .btn_boot-group, .btn_boot-toolbar > .input-group { .btn_boot-toolbar > .btn_boot, .btn_boot-toolbar > .btn_boot-group, .btn_boot-toolbar > .input-group {
margin-left: 5px margin-left: 5px
} }
.btn_boot-group > .btn_boot:not(:first-child):not(:last-child):not(.dropdown-toggle) { .btn_boot-group > .btn_boot:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0 border-radius: 0
} }
.btn_boot-group > .btn_boot:first-child { .btn_boot-group > .btn_boot:first-child {
margin-left: 0 margin-left: 0
} }
.btn_boot-group > .btn_boot:first-child:not(:last-child):not(.dropdown-toggle) { .btn_boot-group > .btn_boot:first-child:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0 border-bottom-right-radius: 0
} }
.btn_boot-group > .btn_boot:last-child:not(:first-child), .btn_boot-group > .dropdown-toggle:not(:first-child) { .btn_boot-group > .btn_boot:last-child:not(:first-child), .btn_boot-group > .dropdown-toggle:not(:first-child) {
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0 border-bottom-left-radius: 0
} }
.btn_boot-group > .btn_boot-group { .btn_boot-group > .btn_boot-group {
float: left float: left
} }
.btn_boot-group > .btn_boot-group:not(:first-child):not(:last-child) > .btn_boot { .btn_boot-group > .btn_boot-group:not(:first-child):not(:last-child) > .btn_boot {
border-radius: 0 border-radius: 0
} }
.btn_boot-group > .btn_boot-group:first-child:not(:last-child) > .btn_boot:last-child, .btn_boot-group > .btn_boot-group:first-child:not(:last-child) > .dropdown-toggle { .btn_boot-group > .btn_boot-group:first-child:not(:last-child) > .btn_boot:last-child, .btn_boot-group > .btn_boot-group:first-child:not(:last-child) > .dropdown-toggle {
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0 border-bottom-right-radius: 0
} }
.btn_boot-group > .btn_boot-group:last-child:not(:first-child) > .btn_boot:first-child { .btn_boot-group > .btn_boot-group:last-child:not(:first-child) > .btn_boot:first-child {
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0 border-bottom-left-radius: 0
} }
.btn_boot-group .dropdown-toggle:active, .btn_boot-group.open .dropdown-toggle { .btn_boot-group .dropdown-toggle:active, .btn_boot-group.open .dropdown-toggle {
outline: 0 outline: 0
} }
.btn_boot-group > .btn_boot + .dropdown-toggle { .btn_boot-group > .btn_boot + .dropdown-toggle {
padding-right: 8px; padding-right: 8px;
padding-left: 8px padding-left: 8px
} }
.btn_boot-group > .btn_boot-lg + .dropdown-toggle { .btn_boot-group > .btn_boot-lg + .dropdown-toggle {
padding-right: 12px; padding-right: 12px;
padding-left: 12px padding-left: 12px
} }
.btn_boot-group.open .dropdown-toggle { .btn_boot-group.open .dropdown-toggle {
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)
} }
.btn_boot-group.open .dropdown-toggle.btn_boot-link { .btn_boot-group.open .dropdown-toggle.btn_boot-link {
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none box-shadow: none
} }
.btn_boot .caret { .btn_boot .caret {
margin-left: 0 margin-left: 0
} }
.btn_boot-lg .caret { .btn_boot-lg .caret {
border-width: 5px 5px 0; border-width: 5px 5px 0;
border-bottom-width: 0 border-bottom-width: 0
} }
.dropup .btn_boot-lg .caret { .dropup .btn_boot-lg .caret {
border-width: 0 5px 5px border-width: 0 5px 5px
} }
.btn_boot-group-vertical > .btn_boot, .btn_boot-group-vertical > .btn_boot-group, .btn_boot-group-vertical > .btn_boot-group > .btn_boot { .btn_boot-group-vertical > .btn_boot, .btn_boot-group-vertical > .btn_boot-group, .btn_boot-group-vertical > .btn_boot-group > .btn_boot {
display: block; display: block;
float: none; float: none;
width: 100%; width: 100%;
max-width: 100% max-width: 100%
} }
.btn_boot-group-vertical > .btn_boot-group > .btn_boot { .btn_boot-group-vertical > .btn_boot-group > .btn_boot {
float: none float: none
} }
.btn_boot-group-vertical > .btn_boot + .btn_boot, .btn_boot-group-vertical > .btn_boot + .btn_boot-group, .btn_boot-group-vertical > .btn_boot-group + .btn_boot, .btn_boot-group-vertical > .btn_boot-group + .btn_boot-group { .btn_boot-group-vertical > .btn_boot + .btn_boot, .btn_boot-group-vertical > .btn_boot + .btn_boot-group, .btn_boot-group-vertical > .btn_boot-group + .btn_boot, .btn_boot-group-vertical > .btn_boot-group + .btn_boot-group {
margin-top: -1px; margin-top: -1px;
margin-left: 0 margin-left: 0
} }
.btn_boot-group-vertical > .btn_boot:not(:first-child):not(:last-child) { .btn_boot-group-vertical > .btn_boot:not(:first-child):not(:last-child) {
border-radius: 0 border-radius: 0
} }
.btn_boot-group-vertical > .btn_boot:first-child:not(:last-child) { .btn_boot-group-vertical > .btn_boot:first-child:not(:last-child) {
border-top-left-radius: 4px; border-top-left-radius: 4px;
border-top-right-radius: 4px; border-top-right-radius: 4px;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-bottom-left-radius: 0 border-bottom-left-radius: 0
} }
.btn_boot-group-vertical > .btn_boot:last-child:not(:first-child) { .btn_boot-group-vertical > .btn_boot:last-child:not(:first-child) {
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px border-bottom-left-radius: 4px
} }
.btn_boot-group-vertical > .btn_boot-group:not(:first-child):not(:last-child) > .btn_boot { .btn_boot-group-vertical > .btn_boot-group:not(:first-child):not(:last-child) > .btn_boot {
border-radius: 0 border-radius: 0
} }
.btn_boot-group-vertical > .btn_boot-group:first-child:not(:last-child) > .btn_boot:last-child, .btn_boot-group-vertical > .btn_boot-group:first-child:not(:last-child) > .dropdown-toggle { .btn_boot-group-vertical > .btn_boot-group:first-child:not(:last-child) > .btn_boot:last-child, .btn_boot-group-vertical > .btn_boot-group:first-child:not(:last-child) > .dropdown-toggle {
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-bottom-left-radius: 0 border-bottom-left-radius: 0
} }
.btn_boot-group-vertical > .btn_boot-group:last-child:not(:first-child) > .btn_boot:first-child { .btn_boot-group-vertical > .btn_boot-group:last-child:not(:first-child) > .btn_boot:first-child {
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0 border-top-right-radius: 0
} }
.btn_boot-group-justified { .btn_boot-group-justified {
display: table; display: table;
width: 100%; width: 100%;
table-layout: fixed; table-layout: fixed;
border-collapse: separate border-collapse: separate
} }
.btn_boot-group-justified > .btn_boot, .btn_boot-group-justified > .btn_boot-group { .btn_boot-group-justified > .btn_boot, .btn_boot-group-justified > .btn_boot-group {
display: table-cell; display: table-cell;
float: none; float: none;
width: 1% width: 1%
} }
.btn_boot-group-justified > .btn_boot-group .btn_boot { .btn_boot-group-justified > .btn_boot-group .btn_boot {
width: 100% width: 100%
} }
.btn_boot-group-justified > .btn_boot-group .dropdown-menu { .btn_boot-group-justified > .btn_boot-group .dropdown-menu {
left: auto left: auto
} }
.btn_boot { .btn_boot {
display: inline-block; display: inline-block;
padding: 6px 12px; padding: 6px 12px;
margin-bottom: 0; margin-bottom: 0;
...@@ -512,87 +1139,83 @@ HTML код: ...@@ -512,87 +1139,83 @@ HTML код:
background-image: none; background-image: none;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 4px; border-radius: 4px;
} }
.btn_boot.active.focus, .btn_boot.active:focus, .btn_boot.focus, .btn_boot:active.focus, .btn_boot:active:focus, .btn_boot:focus { .btn_boot.active.focus, .btn_boot.active:focus, .btn_boot.focus, .btn_boot:active.focus, .btn_boot:active:focus, .btn_boot:focus {
} }
.btn_boot.focus, .btn_boot:focus, .btn_boot:hover { .btn_boot.focus, .btn_boot:focus, .btn_boot:hover {
color: #333; color: #333;
text-decoration: none text-decoration: none
} }
.btn_boot.active, .btn_boot:active { .btn_boot.active, .btn_boot:active {
background-image: none; background-image: none;
outline: 0; outline: 0;
} }
.btn_boot.disabled, .btn_boot[disabled], fieldset[disabled] .btn_boot { .btn_boot.disabled, .btn_boot[disabled], fieldset[disabled] .btn_boot {
cursor: not-allowed; cursor: not-allowed;
filter: alpha(opacity=65); filter: alpha(opacity=65);
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
opacity: .65 opacity: .65
} }
a.btn_boot.disabled, fieldset[disabled] a.btn_boot { a.btn_boot.disabled, fieldset[disabled] a.btn_boot {
pointer-events: none pointer-events: none
} }
.btn_boot-default { .btn_boot-default {
color: #333; color: #333;
background-color: #eeeeee; background-color: #eeeeee;
border-color: #D5D5D5 border-color: #D5D5D5
} }
.btn_boot-default.focus, .btn_boot-default:focus { .btn_boot-default.focus, .btn_boot-default:focus {
color: #333; color: #333;
background-color: #eeeeee; background-color: #eeeeee;
border-color: #D5D5D5 border-color: #D5D5D5
} }
.btn_boot-default:hover { .btn_boot-default:hover {
color: #333; color: #333;
background-color: #eeeeee; background-color: #eeeeee;
border-color: #D5D5D5 border-color: #D5D5D5
} }
.btn_boot-default.active, .btn_boot-default:active, .open > .dropdown-toggle.btn_boot-default { .btn_boot-default.active, .btn_boot-default:active, .open > .dropdown-toggle.btn_boot-default {
color: #333; color: #333;
background-color: #DDDDDD; background-color: #DDDDDD;
border-color: #D5D5D5 border-color: #D5D5D5
} }
.btn_boot-default.active.focus, .btn_boot-default.active:focus, .btn_boot-default.active:hover, .btn_boot-default:active.focus, .btn_boot-default:active:focus, .btn_boot-default:active:hover, .open > .dropdown-toggle.btn_boot-default.focus, .open > .dropdown-toggle.btn_boot-default:focus, .open > .dropdown-toggle.btn_boot-default:hover { .btn_boot-default.active.focus, .btn_boot-default.active:focus, .btn_boot-default.active:hover, .btn_boot-default:active.focus, .btn_boot-default:active:focus, .btn_boot-default:active:hover, .open > .dropdown-toggle.btn_boot-default.focus, .open > .dropdown-toggle.btn_boot-default:focus, .open > .dropdown-toggle.btn_boot-default:hover {
color: #333; color: #333;
background-color: #DDDDDD; background-color: #DDDDDD;
border-color: #D5D5D5 border-color: #D5D5D5
} }
.btn_boot-default.active, .btn_boot-default:active, .open > .dropdown-toggle.btn_boot-default { .btn_boot-default.active, .btn_boot-default:active, .open > .dropdown-toggle.btn_boot-default {
background-image: none background-image: none
} }
.btn_boot-default.disabled.focus, .btn_boot-default.disabled:focus, .btn_boot-default.disabled:hover, .btn_boot-default[disabled].focus, .btn_boot-default[disabled]:focus, .btn_boot-default[disabled]:hover, fieldset[disabled] .btn_boot-default.focus, fieldset[disabled] .btn_boot-default:focus, fieldset[disabled] .btn_boot-default:hover { .btn_boot-default.disabled.focus, .btn_boot-default.disabled:focus, .btn_boot-default.disabled:hover, .btn_boot-default[disabled].focus, .btn_boot-default[disabled]:focus, .btn_boot-default[disabled]:hover, fieldset[disabled] .btn_boot-default.focus, fieldset[disabled] .btn_boot-default:focus, fieldset[disabled] .btn_boot-default:hover {
background-color: #fff; background-color: #fff;
border-color: #D5D5D5 border-color: #D5D5D5
} }
.btn_boot-default .badge { .btn_boot-default .badge {
color: #fff; color: #fff;
background-color: #8c8c8c background-color: #8c8c8c
} }
</style> </style>
<div class="btn_boot-group" style=" <div class="btn_boot-group" style=" width:400px; margin: 0 auto; height: 26px; align-self: center; text-align: center;" innerId="group">
width: 190px; <button type="button" class="btn_boot btn_boot-default" innerId="funnel">Воронка</button>
margin: 0 auto; <button type="button" class="btn_boot btn_boot-default active" innerId="canban">Поток</button>
height: 26px; <button type="button" class="btn_boot btn_boot-default " innerId="dashboard">Аналитика</button>
align-self: center; <button type="button" class="btn_boot btn_boot-default " innerId="productivity">Продуктивность</button>
text-align: center;
" innerId="group">
<button type="button" class="btn_boot btn_boot-default" innerId="funnel">Воронка</button>
<button type="button" class="btn_boot btn_boot-default active" innerId="canban">Канбан</button>
</div> </div>
``` ```
...@@ -608,18 +1231,28 @@ $(".btn_boot-group > .btn_boot").click(function(){ ...@@ -608,18 +1231,28 @@ $(".btn_boot-group > .btn_boot").click(function(){
var funnel = jQuery(view.container[0]).children("[innerId='group']").children("[innerId='funnel']"); var funnel = jQuery(view.container[0]).children("[innerId='group']").children("[innerId='funnel']");
funnel.text(i18n.tr('Воронка')); funnel.text(i18n.tr('Воронка'));
var canban = jQuery(view.container[0]).children("[innerId='group']").children("[innerId='canban']"); var canban = jQuery(view.container[0]).children("[innerId='group']").children("[innerId='canban']");
canban.text(i18n.tr('Канбан')); canban.text(i18n.tr('Поток'));
var dashboard = jQuery(view.container[0]).children("[innerId='group']").children("[innerId='dashboard']");
dashboard.text(i18n.tr('Аналитика'));
var productivity = jQuery(view.container[0]).children("[innerId='group']").children("[innerId='productivity']");
productivity.text(i18n.tr('Продуктивность'));
var funnel_cmp = view.playerView.getViewWithId('crm_form_funnel_funnel'); var funnel_cmp = view.playerView.getViewWithId('crm_form_funnel_funnel');
var canban_cmp = view.playerView.getViewWithId('crm_form_funnel_canban'); var canban_cmp = view.playerView.getViewWithId('crm_form_funnel_canban');
var bottom_cmp = view.playerView.getViewWithId('crm_form_funnel_bottom_sum'); var bottom_cmp = view.playerView.getViewWithId('crm_form_funnel_bottom_sum');
var dashboard_cmp = view.playerView.getViewWithId('crm_form_funnel_dashboard');
var productivity_cmp = view.playerView.getViewWithId('crm_form_funnel_productivity');
var filterTable = view.playerView.getViewWithId('crm_form_funnel_filter_panel');
model.playerModel.funnelDrawn = false; model.playerModel.funnelDrawn = false;
model.playerModel.canbanDrawn = false; model.playerModel.canbanDrawn = false;
funnel.click(function(){ funnel.click(function(){
$('body').css('overflow', 'auto'); $('body').css('overflow', 'auto');
funnel_cmp.setVisible(true); funnel_cmp.setVisible(true);
canban_cmp.setVisible(false);
bottom_cmp.setVisible(true); bottom_cmp.setVisible(true);
canban_cmp.setVisible(false);
productivity_cmp.setVisible(false);
dashboard_cmp.setVisible(false);
model.playerModel.isFunnel = true; model.playerModel.isFunnel = true;
filterTable.setVisible(true);
if (!model.playerModel.funnelDrawn) { if (!model.playerModel.funnelDrawn) {
model.playerModel.redraw(); model.playerModel.redraw();
} }
...@@ -629,11 +1262,53 @@ canban.click(function(){ ...@@ -629,11 +1262,53 @@ canban.click(function(){
funnel_cmp.setVisible(false); funnel_cmp.setVisible(false);
canban_cmp.setVisible(true); canban_cmp.setVisible(true);
bottom_cmp.setVisible(false); bottom_cmp.setVisible(false);
productivity_cmp.setVisible(false);
dashboard_cmp.setVisible(false);
model.playerModel.isFunnel = false; model.playerModel.isFunnel = false;
filterTable.setVisible(true);
if (!model.playerModel.canbanDrawn) { if (!model.playerModel.canbanDrawn) {
model.playerModel.redraw(); model.playerModel.redraw();
} }
}); });
dashboard.click(function(){
$('body').css('overflow', 'auto');
funnel_cmp.setVisible(false);
bottom_cmp.setVisible(false);
canban_cmp.setVisible(false);
productivity_cmp.setVisible(false);
dashboard_cmp.setVisible(true);
dashboard_cmp.calcDim();
filterTable.setVisible(false);
});
productivity.click(function(){
$('body').css('overflow', 'auto');
funnel_cmp.setVisible(false);
bottom_cmp.setVisible(false);
canban_cmp.setVisible(false);
dashboard_cmp.setVisible(false);
productivity_cmp.setVisible(true);
productivity_cmp.calcDim();
filterTable.setVisible(false);
});
```
#### crm_component_leads_dashboard {#uMLeadsDashboard}
+--------------------------------------------------------+----------------------------------------------------------+
| Свойство | Значение |
+========================================================+==========================================================+
| Код | crm_component_leads_dashboard |
+--------------------------------------------------------+----------------------------------------------------------+
| Использовать в формах | включен |
+--------------------------------------------------------+----------------------------------------------------------+
HTML код:
``` xml
<iframe src="http://192.168.1.114:5601/app/kibana#/dashboard/%D0%A3%D0%BF%D1%80%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BC%D0%B0%D1%80%D0%BA%D0%B5%D1%82%D0%B8%D0%BD%D0%B3%D0%BE%D0%BC?embed=true&_g=(refreshInterval%3A('%24%24hashKey'%3A'object%3A36258'%2Cdisplay%3A'30%20seconds'%2Cpause%3A!f%2Csection%3A1%2Cvalue%3A30000)%2Ctime%3A(from%3Anow-15m%2Cmode%3Aquick%2Cto%3Anow))" height="100%" width="100%"></iframe>
``` ```
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment