195 lines
7.8 KiB
JavaScript
195 lines
7.8 KiB
JavaScript
"use strict";
|
|
/**
|
|
* Created by andey on 22-07-2016.
|
|
*
|
|
* @ngdoc directive
|
|
* @name decisionTreeView
|
|
*
|
|
* @description
|
|
* decisionTreeView is a UI Component that can be used to view a decision tree and also traverse through it.
|
|
* and manages communication between them.
|
|
*
|
|
* Example:
|
|
* <decision-tree-view rx-configuration="treeConfig"></decision-tree-view>
|
|
*
|
|
* In the example above, treeConfig is a variable on the scope that contains the tree configuration options.
|
|
*
|
|
* The following configuration options are supported:
|
|
*
|
|
* - decisionTree (required): This is the actual tree object that needs to be passed.
|
|
* The JSON object of the tree should be in following format :
|
|
* {
|
|
"KMS_dectree": {
|
|
"dt": {
|
|
"choice": {
|
|
"description": "Q1 Desc",
|
|
"id": 0,
|
|
"title": "Q1",
|
|
"choice": [{
|
|
"description": "Q11 Desc",
|
|
"id": 1,
|
|
"title": "Q11"
|
|
}, {
|
|
"description": "Q12 Desc",
|
|
"id": 2,
|
|
"title": "Q12"
|
|
}]
|
|
}
|
|
},
|
|
"id": "dectree"
|
|
}
|
|
* }
|
|
*/
|
|
(function () {
|
|
'use strict';
|
|
angular.module('knowledgeArticleModule')
|
|
.directive('decisionTreeView', function () {
|
|
return {
|
|
restrict: 'E',
|
|
templateUrl: 'views/knowledge-article/decision-tree-view.html',
|
|
scope: {
|
|
rxConfiguration: '='
|
|
},
|
|
link: function (scope) {
|
|
scope.decisionTree = scope.rxConfiguration.decisionTree;
|
|
//setting all views
|
|
scope.isRootView = false;
|
|
scope.isChoiceView = false;
|
|
scope.isChoiceListView = true;
|
|
scope.isHistoryView = false;
|
|
scope.isBackButton = true;
|
|
scope.isForwardButton = true;
|
|
scope.historyList = [];
|
|
var counterBack = 0, backActive = false, actionList = [];
|
|
var getObjectFromTree = function (data, idLabel, idValue, results) {
|
|
if (!idLabel) {
|
|
idLabel = "id";
|
|
}
|
|
if (!idValue) {
|
|
idValue = "0";
|
|
}
|
|
if (!results) {
|
|
results = [];
|
|
}
|
|
var keys = Object.keys(data);
|
|
keys.forEach(function search(key) {
|
|
if (typeof data[key] == "object") {
|
|
results = getObjectFromTree(data[key], idLabel, idValue, results);
|
|
}
|
|
else {
|
|
if (data[key] == idValue && key == idLabel) {
|
|
results.push(data);
|
|
}
|
|
}
|
|
});
|
|
return results;
|
|
};
|
|
var getChoiceFromActionList = function (counterBack) {
|
|
scope.isRootView = false;
|
|
scope.isChoiceView = true;
|
|
var choiceBack = actionList[counterBack];
|
|
scope.choiceQuestion = choiceBack;
|
|
if (choiceBack.choice) {
|
|
scope.isChoiceListView = true;
|
|
scope.choices = getObjectFromTree(scope.decisionTree, "id", choiceBack.id)[0].choice;
|
|
}
|
|
else {
|
|
scope.isChoiceListView = false;
|
|
}
|
|
};
|
|
scope.showResetData = function () {
|
|
scope.historyList = [];
|
|
actionList = [];
|
|
scope.getRootData();
|
|
backActive = false;
|
|
counterBack = 0;
|
|
scope.isBackButton = true;
|
|
scope.isForwardButton = true;
|
|
};
|
|
scope.getRootData = function () {
|
|
//set root details for first time
|
|
scope.isRootView = true;
|
|
scope.isChoiceView = false;
|
|
scope.isChoiceListView = true;
|
|
scope.rootQuestion = getObjectFromTree(scope.decisionTree, "id", 0)[0];
|
|
scope.choices = getObjectFromTree(scope.decisionTree, "id", 0)[0].choice;
|
|
};
|
|
scope.showHistoryForwardData = function () {
|
|
counterBack++;
|
|
scope.isBackButton = false;
|
|
if (counterBack < actionList.length - 1) {
|
|
getChoiceFromActionList(counterBack);
|
|
}
|
|
else {
|
|
getChoiceFromActionList(counterBack);
|
|
scope.isForwardButton = true;
|
|
}
|
|
};
|
|
scope.showHistoryBackData = function () {
|
|
counterBack--;
|
|
backActive = true;
|
|
scope.isForwardButton = false;
|
|
if (counterBack >= 0) {
|
|
getChoiceFromActionList(counterBack);
|
|
}
|
|
else {
|
|
scope.isBackButton = true;
|
|
backActive = true;
|
|
scope.getRootData();
|
|
counterBack = -1;
|
|
}
|
|
};
|
|
// get root data for init time only.
|
|
scope.getRootData();
|
|
scope.getChoices = function (choice) {
|
|
scope.isRootView = false;
|
|
scope.isChoiceView = true;
|
|
scope.isBackButton = false;
|
|
if (scope.historyList.length) {
|
|
scope.historyList = _.take(scope.historyList, counterBack + 1);
|
|
}
|
|
scope.historyList.push(choice);
|
|
var checkDuplicate = _.find(actionList, choice);
|
|
if (!checkDuplicate) {
|
|
if (actionList.length) {
|
|
actionList = _.take(actionList, counterBack + 1);
|
|
}
|
|
actionList.push(choice);
|
|
}
|
|
if (backActive) {
|
|
if (counterBack === -1) {
|
|
actionList = [];
|
|
counterBack = 0;
|
|
actionList[0] = choice;
|
|
}
|
|
else {
|
|
actionList.splice(counterBack + 2);
|
|
}
|
|
backActive = false;
|
|
scope.isForwardButton = true;
|
|
}
|
|
counterBack = actionList.length - 1;
|
|
scope.choiceQuestion = choice;
|
|
if (choice.gotoNode) {
|
|
scope.choiceGoto = choice;
|
|
scope.choices = getObjectFromTree(scope.decisionTree, "id", choice.gotoNode)[0].choice;
|
|
scope.choiceQuestion = getObjectFromTree(scope.decisionTree, "id", choice.gotoNode)[0];
|
|
scope.historyList[counterBack] = actionList[counterBack] = scope.choiceQuestion;
|
|
}
|
|
else {
|
|
if (choice.choice) {
|
|
scope.choices = getObjectFromTree(scope.decisionTree, "id", choice.id)[0].choice;
|
|
}
|
|
else {
|
|
scope.isChoiceListView = false;
|
|
}
|
|
}
|
|
};
|
|
scope.toggleHistory = function () {
|
|
scope.isHistoryView = scope.isHistoryView ? false : true;
|
|
};
|
|
}
|
|
};
|
|
});
|
|
})();
|