ValidationEditor.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346
  1. MWF.xApplication.process.FormDesigner.widget = MWF.xApplication.process.FormDesigner.widget || {};
  2. MWF.require("MWF.widget.UUID", null, false);
  3. MWF.xApplication.process.FormDesigner.widget.ValidationEditor = new Class({
  4. Implements: [Options, Events],
  5. Extends: MWF.widget.Common,
  6. options: {
  7. "style": "default",
  8. "maxObj": document.body
  9. },
  10. initialize: function(node, designer, options){
  11. this.setOptions(options);
  12. this.node = $(node);
  13. this.designer = designer;
  14. this.path = "../x_component_process_FormDesigner/widget/$ValidationEditor/";
  15. this.cssPath = "../x_component_process_FormDesigner/widget/$ValidationEditor/"+this.options.style+"/css.wcss";
  16. this._loadCss();
  17. this.items = [];
  18. },
  19. load: function(data){
  20. this.titleNode = new Element("div", {"styles": this.css.titleNode, "text": this.designer.lp.validation.validation}).inject(this.node);
  21. this.editorNode = new Element("div", {"styles": this.css.editorNode}).inject(this.node);
  22. this.actionNode = new Element("div", {"styles": this.css.actionNode}).inject(this.node);
  23. this.listNode = new Element("div", {"styles": this.css.listNode}).inject(this.node);
  24. this.loadEditorNode();
  25. this.loadActionNode();
  26. this.loadListNode(data);
  27. },
  28. loadEditorNode: function(){
  29. //this.statusNode = new Element("div", {"styles": this.css.statusNode}).inject(this.editorNode);
  30. //this.conditionNode = new Element("div", {"styles": this.css.conditionNode}).inject(this.editorNode);
  31. //this.valueNode = new Element("div", {"styles": this.css.valueNode}).inject(this.editorNode);
  32. //this.promptNode = new Element("div", {"styles": this.css.promptNode}).inject(this.editorNode);
  33. var html = "<table width='100%' border='0' cellpadding='5' cellspacing='0' class='editTable'>" +
  34. "<tr><td></td></tr><tr><td></td></tr><tr><td></td></tr></table>";
  35. this.editorNode.set("html", html);
  36. var tds = this.editorNode.getElements("td").setStyles(this.css.editTableTdValue);
  37. this.loadStatus(tds);
  38. this.loadConditions(tds);
  39. this.loadPrompt(tds);
  40. },
  41. loadStatus: function(tds){
  42. var html = "<table width='100%' border='0' cellpadding='0' cellspacing='0'><tr>" +
  43. "<td width='140px'>"+"<input type='radio' value='all' checked />"+this.designer.lp.validation.anytime+
  44. "<input type='radio' value='decision' />"+this.designer.lp.validation.decision+"</td>" +
  45. "<td><input type='text' value='"+this.designer.lp.validation.decisionName+"'></td>" +
  46. "</tr></table>";
  47. tds[0].set("html", html);
  48. var inputs = tds[0].getElements("input");
  49. var randomId = new MWF.widget.UUID().toString();
  50. inputs[0].set("name", "condition"+randomId);
  51. inputs[1].set("name", "condition"+randomId);
  52. inputs[2].setStyles(this.css.decisionNameInput);
  53. this.decisionInputNode = inputs[2];
  54. this.statusRadioNodes = inputs;
  55. this.statusRadioNodes.pop();
  56. this.decisionInputNode.addEvents({
  57. "focus": function(){
  58. if (this.decisionInputNode.get("value")==this.designer.lp.validation.decisionName) this.decisionInputNode.set("value", "");
  59. }.bind(this),
  60. "blur": function(){
  61. if (!this.decisionInputNode.get("value")) this.decisionInputNode.set("value", this.designer.lp.validation.decisionName);
  62. }.bind(this)
  63. });
  64. },
  65. loadConditions: function(tds){
  66. var html = "<table width='100%' border='0' cellpadding='0' cellspacing='0'><tr>" +
  67. "<td width='140px'>"+"<select><option value='value'>"+this.designer.lp.validation.value+"</option>" +
  68. "<option value='length'>"+this.designer.lp.validation.length+"</option></select>"+
  69. "&nbsp;<select><option value='isnull'>"+this.designer.lp.validation.isnull+"</option>" +
  70. "<option value='notnull'>"+this.designer.lp.validation.notnull+"</option>" +
  71. "<option value='gt'>"+this.designer.lp.validation.gt+"</option>" +
  72. "<option value='lt'>"+this.designer.lp.validation.lt+"</option>" +
  73. "<option value='equal'>"+this.designer.lp.validation.equal+"</option>" +
  74. "<option value='neq'>"+this.designer.lp.validation.neq+"</option>" +
  75. "<option value='contain'>"+this.designer.lp.validation.contain+"</option>" +
  76. "<option value='notcontain'>"+this.designer.lp.validation.notcontain+"</option>" +
  77. "</select>"+"</td>" +
  78. "<td><input style='display: none' type='text' value='"+this.designer.lp.validation.valueInput+"'/></td>" +
  79. "</tr></table>";
  80. tds[1].set("html", html);
  81. var selects = tds[1].getElements("select");
  82. selects.setStyles(this.css.valueSelect);
  83. this.valueTypeSelectNode = selects[0];
  84. this.operateorSelectNode = selects[1];
  85. this.valueInputNode = tds[1].getElement("input").setStyles(this.css.valueInput);
  86. this.operateorSelectNode.addEvent("change", function(){
  87. var v = this.operateorSelectNode.options[this.operateorSelectNode.selectedIndex].value;
  88. if (v && (v!="isnull") && (v!="notnull")){
  89. this.valueInputNode.setStyle("display", "inline");
  90. }else{
  91. this.valueInputNode.setStyle("display", "none");
  92. }
  93. }.bind(this));
  94. this.valueInputNode.addEvents({
  95. "focus": function(){
  96. if (this.valueInputNode.get("value")==this.designer.lp.validation.valueInput) this.valueInputNode.set("value", "");
  97. }.bind(this),
  98. "blur": function(){
  99. if (!this.valueInputNode.get("value")) this.valueInputNode.set("value", this.designer.lp.validation.valueInput);
  100. }.bind(this)
  101. });
  102. },
  103. loadPrompt: function(tds){
  104. var html = "<table width='100%' border='0' cellpadding='0' cellspacing='0'><tr><td width='60px'>"+this.designer.lp.validation.prompt+"</td><td><input type='text' /></td></tr></table>";
  105. tds[2].set("html", html);
  106. tds[2].getElements("td")[0].setStyles(this.css.titleTd);
  107. this.promptInputNode = tds[2].getElement("input").setStyles(this.css.promptInput);
  108. },
  109. loadActionNode: function(){
  110. this.actionAreaNode = new Element("div", {"styles": this.css.actionAreaNode}).inject(this.actionNode);
  111. this.addAction = new Element("div", {"styles": this.css.addAction, "text": this.designer.lp.validation.add}).inject(this.actionAreaNode);
  112. this.modifyAction = new Element("div", {"styles": this.css.modifyAction_disabled, "text": this.designer.lp.validation.modify}).inject(this.actionAreaNode);
  113. this.addAction.addEvent("click", function(){
  114. this.addValidation();
  115. }.bind(this));
  116. this.modifyAction.addEvent("click", function(){
  117. this.modifyValidation();
  118. }.bind(this));
  119. },
  120. getData: function(){
  121. var status = this.getStatusValue();
  122. var decision = this.decisionInputNode.get("value");
  123. var valueType = this.valueTypeSelectNode.options[this.valueTypeSelectNode.selectedIndex].value;
  124. var operateor = this.operateorSelectNode.options[this.operateorSelectNode.selectedIndex].value;
  125. var value = this.valueInputNode.get("value");
  126. var prompt = this.promptInputNode.get("value");
  127. if (decision == this.designer.lp.validation.decisionName) decision = "";
  128. if (value == this.designer.lp.validation.valueInput) value = "";
  129. return {
  130. "status": status,
  131. "decision": decision,
  132. "valueType": valueType,
  133. "operateor": operateor,
  134. "value": value,
  135. "prompt": prompt
  136. };
  137. },
  138. addValidation: function(){
  139. this.hideErrorNode();
  140. var data = this.getData();
  141. if (data.status!="all"){
  142. if (!data.decision || data.decision==this.designer.lp.validation.decisionName){
  143. this.showErrorNode(this.designer.lp.validation.inputDecisionName);
  144. return false;
  145. }
  146. }
  147. if (data.operateor!="isnull" && data.operateor!="notnull"){
  148. if (!data.value || data.value==this.designer.lp.validation.valueInput){
  149. this.showErrorNode(this.designer.lp.validation.inputValue);
  150. return false;
  151. }
  152. }
  153. if (!data.prompt){
  154. this.showErrorNode(this.designer.lp.validation.inputPrompt);
  155. return false;
  156. }
  157. var item = new MWF.xApplication.process.FormDesigner.widget.ValidationEditor.Item(data, this);
  158. this.items.push(item);
  159. item.selected();
  160. this.fireEvent("change");
  161. },
  162. showErrorNode: function(text){
  163. this.errorNode = new Element("div", {"styles": this.css.errorNode}).inject(this.actionNode, "before");
  164. this.errorTextNode = new Element("div", {"styles": this.css.errorTextNode}).inject(this.errorNode);
  165. this.errorTextNode.set("text", text);
  166. this.errorNode.addEvent("click", function(){this.hideErrorNode();}.bind(this));
  167. },
  168. hideErrorNode: function(){
  169. if (this.errorNode) this.errorNode.destroy();
  170. },
  171. getStatusValue: function(){
  172. for (var i=0; i<this.statusRadioNodes.length; i++){
  173. var item = this.statusRadioNodes[i];
  174. if (item.checked) return item.value;
  175. }
  176. return "";
  177. },
  178. modifyValidation: function(){
  179. if (this.currentItem){
  180. this.hideErrorNode();
  181. var data = this.getData();
  182. if (data.status!="all"){
  183. if (!data.decision || data.decision==this.designer.lp.validation.decisionName){
  184. this.showErrorNode(this.designer.lp.validation.inputDecisionName);
  185. return false;
  186. }
  187. }
  188. if (data.operateor!="isnull" && data.operateor!="notnull"){
  189. if (!data.value || data.value==this.designer.lp.validation.valueInput){
  190. this.showErrorNode(this.designer.lp.validation.inputValue);
  191. return false;
  192. }
  193. }
  194. if (!data.prompt){
  195. this.showErrorNode(this.designer.lp.validation.inputPrompt);
  196. return false;
  197. }
  198. this.currentItem.reload(data);
  199. this.currentItem.unSelected();
  200. this.disabledModify();
  201. this.fireEvent("change");
  202. }
  203. },
  204. loadListNode: function(data){
  205. if (data){
  206. if (data.length){
  207. data.each(function(itemData){
  208. var item = new MWF.xApplication.process.FormDesigner.widget.ValidationEditor.Item(itemData, this);
  209. this.items.push(item);
  210. }.bind(this));
  211. }
  212. }
  213. },
  214. enabledModify: function(){
  215. this.modifyAction.setStyles(this.css.modifyAction);
  216. },
  217. disabledModify: function(){
  218. this.modifyAction.setStyles(this.css.modifyAction_disabled);
  219. },
  220. setData: function(data){
  221. if (data.decision) this.decisionInputNode.set("value", data.decision);
  222. if (data.status){
  223. for (var i=0; i<this.statusRadioNodes.length; i++){
  224. if (data.status == this.statusRadioNodes[i].get("value")){
  225. this.statusRadioNodes[i].set("checked", true);
  226. break;
  227. }
  228. }
  229. }else{
  230. this.statusRadioNodes[0].set("checked", true);
  231. }
  232. for (var i=0; i<this.valueTypeSelectNode.options.length; i++){
  233. if (data.valueType == this.valueTypeSelectNode.options[i].get("value")){
  234. this.valueTypeSelectNode.options[i].set("selected", true);
  235. break;
  236. }
  237. }
  238. for (var i=0; i<this.operateorSelectNode.options.length; i++){
  239. if (data.operateor == this.operateorSelectNode.options[i].get("value")){
  240. this.operateorSelectNode.options[i].set("selected", true);
  241. break;
  242. }
  243. }
  244. if (data.value) this.valueInputNode.set("value", data.value);
  245. if (data.prompt) this.promptInputNode.set("value", data.prompt);
  246. },
  247. deleteItem: function(item){
  248. if (this.currentItem == item) item.unSelected();
  249. this.items.erase(item);
  250. item.node.destroy();
  251. MWF.release(item);
  252. this.fireEvent("change");
  253. },
  254. getValidationData: function(){
  255. var data = [];
  256. this.items.each(function(item){
  257. data.push(item.data);
  258. });
  259. return data;
  260. }
  261. });
  262. MWF.xApplication.process.FormDesigner.widget.ValidationEditor.Item = new Class({
  263. initialize: function(data, editor){
  264. this.data = data;
  265. this.editor = editor;
  266. this.container = this.editor.listNode;
  267. this.css = this.editor.css;
  268. this.lp = this.editor.designer.lp;
  269. this.load();
  270. },
  271. load: function(){
  272. this.node = new Element("div", {"styles": this.css.itemNode}).inject(this.container);
  273. this.deleteNode = new Element("div", {"styles": this.css.itemDeleteNode}).inject(this.node);
  274. this.contentNode = new Element("div", {"styles": this.css.itemContentNode}).inject(this.node);
  275. this.contentNode.set("text", this.getText());
  276. this.contentNode.addEvent("click", function(){
  277. this.selected();
  278. }.bind(this));
  279. this.deleteNode.addEvent("click", function(e){
  280. this.deleteItem(e);
  281. }.bind(this));
  282. },
  283. reload: function(data){
  284. this.data = data;
  285. this.contentNode.set("text", this.getText());
  286. },
  287. getText: function(){
  288. var text = "";
  289. if (this.data.status=="all"){
  290. text = this.lp.validation.anytime+" ";
  291. }else{
  292. text = this.lp.validation.when+this.lp.validation.decision+" \""+this.data.decision+"\" "+this.lp.validation.as+" ";
  293. }
  294. text += this.lp.validation[this.data.valueType]+" ";
  295. text += this.lp.validation[this.data.operateor]+" ";
  296. text += " \""+this.data.value+"\" ";
  297. text += this.lp.validation.prompt+": \""+this.data.prompt+"\"";
  298. return text;
  299. },
  300. selected: function(){
  301. if (this.editor.currentItem) this.editor.currentItem.unSelected();
  302. this.node.setStyles(this.css.itemNode_current);
  303. this.editor.currentItem = this;
  304. this.editor.setData(this.data);
  305. this.editor.enabledModify();
  306. },
  307. unSelected: function(){
  308. this.node.setStyles(this.css.itemNode);
  309. this.editor.currentItem = null;
  310. //this.editor.modifyValidation();
  311. this.editor.disabledModify();
  312. },
  313. deleteItem: function(e){
  314. var _self = this;
  315. this.editor.designer.confirm("warn", e, this.lp.validation.delete_title, this.lp.validation.delete_text, 300, 120, function(){
  316. _self.destroy();
  317. this.close();
  318. }, function(){
  319. this.close();
  320. });
  321. },
  322. destroy: function(){
  323. this.editor.deleteItem(this);
  324. }
  325. });