erp_app 4.0.0 → 4.2.0

data/app/assets/javascripts/erp_app/shared/Party/UserTypePanel.js

@@ -0,0 +1,198 @@
+Ext.define("CompassAE.ErpApp.Shared.Party.UserTypePanel", {
+    extend: 'Ext.form.Panel',
+    alias: 'widget.partyusertypepanel',
+
+    title: 'User Type',
+    autoScroll: true,
+
+    partyId: null,
+    availableRoleTypes: null,
+    selectedRoleTypes: [],
+    fieldSetHeights: 250,
+
+    dockedItems: {
+	xtype: 'toolbar',
+	docked: 'top',
+	items: [{
+	    text: 'Save',
+	    iconCls: 'icon-save',
+	    handler: function(btn) {
+		btn.up('form').save(btn);
+	    }
+	}]
+    },
+
+    initComponent: function() {
+	var me = this;
+
+	me.addEvents(
+	    /*
+	     * @event saved
+	     * Fires when the roles type are saved
+	     * @param {CompassAE.ErpApp.Shared.Party.UserTypePanel} this panel
+	     * @param {Compass.ErpApp.Shared.TypeSelectionTree} Type selection tree
+	     * @param {Array} Selected types
+	     */
+	    'saved'
+	);
+
+	me.callParent(arguments);
+
+	me.on('boxready', function() {
+	    var mask = new Ext.LoadMask({
+		msg: 'Please wait...',
+		target: me
+	    });
+	    mask.show();
+
+	    me.add({
+		xtype: 'fieldset',
+		width: 450,
+		style: {
+		    marginLeft: '10px',
+		    marginRight: '10px',
+		    padding: '5px'
+		}
+	    }, {
+		xtype: 'box',
+		itemId: 'instructions',
+		autoEl: 'div',
+		width: 450,
+		hidden: true,
+		style: {
+		    marginLeft: '10px',
+		    marginRight: '10px',
+		    padding: '5px'
+		},
+		html: '<p>User Types (also called Party Roles) control what types of relationships this party can have in the application. Are they a buyer, seller or employee? It also controls which lists in which a party will appear. </p>'
+	    });
+
+	    var params = {};
+
+	    if (me.availableRoleTypes) {
+		params['ids'] = me.availableRoleTypes;
+	    }
+
+	    var loadUserTypes = function() {
+		var dfd = Ext.create('Ext.ux.Deferred');
+
+		Compass.ErpApp.Utility.ajaxRequest({
+		    method: 'GET',
+		    url: '/api/v1/role_types.tree',
+		    params: params,
+		    errorMessage: 'Could not load User Types',
+		    success: function(response) {
+			me.down('fieldset').add({
+			    header: false,
+			    xtype: 'typeselectiontree',
+			    typesUrl: '/api/v1/role_types',
+			    typesRoot: 'role_types',
+			    allowBlank: false,
+			    height: me.fieldSetHeights,
+			    availableTypes: response.role_types
+			});
+
+			me.down('#instructions').show();
+			dfd.resolve();
+		    },
+		    failure: function() {
+			me.down('#instructions').hide();
+			dfd.reject();
+		    }
+		});
+
+		return dfd.promise();
+	    };
+
+	    var loadPartyUserTypes = function() {
+		var dfd = Ext.create('Ext.ux.Deferred');
+
+		Compass.ErpApp.Utility.ajaxRequest({
+		    method: 'GET',
+		    url: '/api/v1/parties/' + me.partyId + '/role_types',
+		    params: params,
+		    errorMessage: 'Could not load User Types',
+		    success: function(response) {
+			var roleTypeInternalIdentifiers = Ext.Array.pluck(response.role_types, 'internal_identifier');
+			var tree = me.down('typeselectiontree');
+			var rootNode = tree.getRootNode();
+
+			rootNode.cascadeBy(function(node) {
+			    if (Ext.Array.contains(roleTypeInternalIdentifiers, node.get('internalIdentifier'))) {
+				node.set('checked', true);
+
+				var parent = node.parentNode;
+				while (parent.internalId != rootNode.internalId) {
+				    parent.expand();
+				    parent = parent.parentNode;
+				}
+			    }
+			}, true);
+
+			dfd.resolve();
+		    },
+		    failure: function() {
+			dfd.reject();
+		    }
+		});
+
+		return dfd.promise();
+	    };
+
+	    window.userTypePanel = me;
+	    window.userTypePanelMask = mask;
+
+	    Ext.ux.Deferred.when(loadUserTypes)
+		.then(loadPartyUserTypes, me.loadError)
+		.then(function(results) {
+		    window.userTypePanel.down('#instructions').show();
+		    window.userTypePanelMask.hide();
+
+		    window.userTypePanel = null;
+		    window.userTypePanelMask = null;
+		}, me.loadError);
+	});
+    },
+
+    loadError: function() {
+	window.userTypePanel.down('#instructions').hide();
+	window.userTypePanelMask.hide();
+
+	window.userTypePanel = null;
+	window.userTypePanelMask = null;
+    },
+
+    save: function(btn) {
+	var me = this;
+	var tree = me.down('typeselectiontree');
+
+	if (me.isValid()) {
+	    btn.disable();
+
+	    var mask = new Ext.LoadMask({
+		msg: 'Please wait...',
+		target: me
+	    });
+	    mask.show();
+
+	    Compass.ErpApp.Utility.ajaxRequest({
+		url: '/api/v1/parties/' + me.partyId + '/update_roles',
+		method: 'PUT',
+		params: {
+		    role_type_iids: tree.getSubmitData()
+		},
+		errorMessage: 'Could not save User Type',
+		success: function(response) {
+		    me.fireEvent('saved', me, tree, tree.getSelectedTypes());
+
+		    btn.enable();
+		    mask.hide();
+		},
+		failure: function() {
+		    btn.enable();
+		    mask.hide();
+		}
+	    });
+	}
+    }
+});

data/app/assets/javascripts/erp_app/shared/TimePickerField.js

@@ -0,0 +1,189 @@
+/**
+ * @author wangzilong
+ * update Ext - 4.1 2012/04/27
+ * update Ext - 4.2 2013/03/18 change alias name, change default value
+ * update Ext - 4.2.1 2014/08/25 fix the width in different Theme
+ */
+Ext.define('Ext.ux.form.TimePickerField', {
+    extend: 'Ext.form.field.Base',
+    alias: 'widget.uxtimepicker',
+    alternateClassName: 'Ext.form.field.TimePickerField',
+    requires: ['Ext.form.field.Number'],
+
+    // hidden basefield's input
+    inputType: 'hidden',
+
+    style: 'padding:4px 0 0 0;margin-bottom:0px',
+
+    msgTarget: 'none',
+
+    /**
+     * @cfg {String} value
+     * initValue, format: 'H:i:s'
+     */
+    value: null,
+
+    /**
+     * @cfg {Object} spinnerCfg
+     * number input config
+     */
+
+    /** Override. */
+    initComponent: function () {
+        var me = this;
+
+        me.spinnerCfg = me.spinnerCfg || {
+                columnWidth: .333
+            };
+
+        me.value = me.value || '00:00:00';
+
+        me.callParent();// called setValue
+
+        me.spinners = [];
+        var cfg = Ext.apply({}, me.spinnerCfg, {
+            readOnly: me.readOnly,
+            disabled: me.disabled,
+            style: 'float: left',
+            listeners: {
+                change: {
+                    fn: me.onSpinnerChange,
+                    scope: me
+                }
+            }
+        });
+
+        me.hoursSpinner = Ext.create('Ext.form.field.Number', Ext.apply({}, cfg, {
+            minValue: 0,
+            maxValue: 23
+        }));
+        me.minutesSpinner = Ext.create('Ext.form.field.Number', Ext.apply({}, cfg, {
+            minValue: 0,
+            maxValue: 59
+        }));
+        // TODO 使用timeformat 判断是否创建秒输入框, maybe second field is not always need.
+        me.secondsSpinner = Ext.create('Ext.form.field.Number', Ext.apply({}, cfg, {
+            minValue: 0,
+            maxValue: 59
+        }));
+
+        me.spinners.push(me.hoursSpinner, me.minutesSpinner, me.secondsSpinner);
+
+        me.on('render', me.addSpinners, me);
+    },
+    addSpinners: function () {
+        var me = this, spinnerWrapDom, spinnerWrap;
+        // me.callParent(arguments);
+
+        // render to original BaseField input td
+        // spinnerWrap = Ext.get(Ext.DomQuery.selectNode('div', this.el.dom)); // 4.0.2
+        spinnerWrapDom = Ext.dom.Query.select('td', this.getEl().dom)[1]; // 4.0 ->4.1 div->td
+        spinnerWrap = Ext.get(spinnerWrapDom);
+        // me.callSpinnersFunction('render', spinnerWrap); // use wrap
+        Ext.create('Ext.container.Container', {
+            layout: 'column',
+            border: false,
+            frame: false,
+            items: me.spinners,
+            renderTo: spinnerWrap
+        });
+
+        Ext.core.DomHelper.append(spinnerWrap, {
+            tag: 'div',
+            cls: 'x-form-clear-left'
+        });
+
+        this.setRawValue(this.value);
+    },
+
+    _valueSplit: function (v) {
+        if (Ext.isDate(v)) {
+            v = Ext.Date.format(v, 'H:i:s');
+        }
+        var split = v.split(':');
+        return {
+            h: split.length > 0 ? split[0] : 0,
+            m: split.length > 1 ? split[1] : 0,
+            s: split.length > 2 ? split[2] : 0
+        };
+    },
+    onSpinnerChange: function () {
+        if (!this.rendered) {
+            return;
+        }
+        this.fireEvent('change', this, this.getValue(), this.getRawValue());
+    },
+    // 依次调用各输入框函数, call each spinner's function
+    callSpinnersFunction: function (funName, args) {
+        for (var i = 0; i < this.spinners.length; i++) {
+            this.spinners[i][funName](args);
+        }
+    },
+    // @private get time as object,
+    getRawValue: function () {
+        if (!this.rendered) {
+            var date = this.value || new Date();
+            return this._valueSplit(date);
+        } else {
+            return {
+                h: this.hoursSpinner.getValue(),
+                m: this.minutesSpinner.getValue(),
+                s: this.secondsSpinner.getValue()
+            };
+        }
+    },
+
+    // private
+    setRawValue: function (value) {
+        value = this._valueSplit(value);
+        if (this.hoursSpinner) {
+            this.hoursSpinner.setValue(value.h);
+            this.minutesSpinner.setValue(value.m);
+            this.secondsSpinner.setValue(value.s);
+        }
+    },
+    // overwrite
+    getValue: function () {
+        var v = this.getRawValue();
+        return Ext.String.leftPad(v.h, 2, '0') + ':' + Ext.String.leftPad(v.m, 2, '0') + ':'
+            + Ext.String.leftPad(v.s, 2, '0');
+    },
+    // overwrite
+    setValue: function (value) {
+        this.value = Ext.isDate(value) ? Ext.Date.format(value, 'H:i:s') : value;
+        if (!this.rendered) {
+            return;
+        }
+        this.setRawValue(this.value);
+        this.validate();
+    },
+    // overwrite
+    disable: function () {
+        this.callParent(arguments);
+        this.callSpinnersFunction('disable', arguments);
+    },
+    // overwrite
+    enable: function () {
+        this.callParent(arguments);
+        this.callSpinnersFunction('enable', arguments);
+    },
+    // overwrite
+    setReadOnly: function () {
+        this.callParent(arguments);
+        this.callSpinnersFunction('setReadOnly', arguments);
+    },
+    // overwrite
+    clearInvalid: function () {
+        this.callParent(arguments);
+        this.callSpinnersFunction('clearInvalid', arguments);
+    },
+    // overwrite
+    isValid: function (preventMark) {
+        return this.hoursSpinner.isValid(preventMark) && this.minutesSpinner.isValid(preventMark)
+            && this.secondsSpinner.isValid(preventMark);
+    },
+    // overwrite
+    validate: function () {
+        return this.hoursSpinner.validate() && this.minutesSpinner.validate() && this.secondsSpinner.validate();
+    }
+});

data/app/assets/javascripts/erp_app/shared/TypeSelectionTree.js

@@ -0,0 +1,510 @@
+Ext.define('Compass.ErpApp.Shared.TypeSelectionModel', {
+	extend: 'Ext.data.Model',
+	fields: [
+		// ExtJs node fields
+		{
+			name: 'text',
+			type: 'string'
+		}, {
+			name: 'leaf',
+			type: 'boolean'
+		}, {
+			name: 'checked',
+			type: 'boolean'
+		}, {
+			name: 'children'
+		},
+		// Custom fields
+		{
+			name: 'internalIdentifier',
+			type: 'string',
+			mapping: 'internal_identifier'
+		}
+	]
+});
+
+Ext.define("Compass.ErpApp.Shared.TypeSelectionTree", {
+	extend: "Ext.tree.Panel",
+	alias: 'widget.typeselectiontree',
+
+	title: 'Select Types',
+	width: '100%',
+	minHeight: 200,
+	height: 200,
+	rootVisible: false,
+	cascadeSelectionUp: false,
+	cascadeSelectionDown: false,
+	canCreate: false,
+	mixins: {
+		field: 'Ext.form.field.Field'
+	},
+
+	createNewText: 'Create New',
+
+	/**
+	 * @cfg {Array} availableTypes
+	 * Array of types that can be selected
+	 */
+	availableTypes: null,
+
+	/**
+	 * @cfg {Array} selectedTypes
+	 * Array of currently selected types
+	 */
+	selectedTypes: [],
+
+	/**
+	 * @cfg {String} typesUrl
+	 * Url to load types from.
+	 */
+	typesUrl: null,
+
+	/**
+	 * @cfg {String} typesRoot
+	 * Root attribute for types returned from the server.
+	 */
+	typesRoot: null,
+
+	/**
+	 * @cfg {Boolean} defaultParentType
+	 * default parent type if no parent is selected
+	 */
+	defaultParentType: null,
+
+	/**
+	 * @cfg {String} disabledNodeMessage
+	 * Message to display when a disabled type is clicked
+	 */
+	disabledNodeMessage: 'This item can not be unselected',
+
+	/**
+	 * @cfg {Array} unSelectableTypes
+	 * Array of types that can not be selected
+	 */
+	unSelectableTypes: null,
+
+	initComponent: function() {
+		var me = this;
+
+		if (me.availableTypes && me.availableTypes.length > 0 && me.availableTypes.first()['text']) {
+			me.store = Ext.create('Ext.data.TreeStore', {
+				model: 'Compass.ErpApp.Shared.TypeSelectionModel',
+				folderSort: true,
+				sorters: [{
+					property: 'text',
+					direction: 'ASC'
+				}]
+			});
+
+			me.store.setRootNode({
+				text: '',
+				children: me.availableTypes
+			});
+
+			if (me.selectedTypes) {
+				me.setSelectedTypes(me.selectedTypes);
+			}
+		} else {
+			var params = {};
+
+			if (!Ext.isEmpty(me.parentType)) {
+				params['parent'] = me.parentType;
+			} else if (!Ext.isEmpty(me.parentType)) {
+				params['parent'] = me.defaultParentType;
+			}
+
+			me.store = Ext.create('Ext.data.TreeStore', {
+				model: 'Compass.ErpApp.Shared.TypeSelectionModel',
+				tree: me,
+				folderSort: true,
+				proxy: {
+					type: 'ajax',
+					url: me.typesUrl + '.tree',
+					reader: {
+						type: 'treereader',
+						root: me.typesRoot
+					}
+				},
+				sorters: [{
+					property: 'text',
+					direction: 'ASC'
+				}]
+			});
+
+			if (me.availableTypes) {
+				me.store.load({
+					params: {
+						ids: me.availableTypes.join(',')
+					},
+					callback: function() {
+						if (me.selectedTypes) {
+							me.setSelectedTypes(me.selectedTypes);
+						}
+					}
+				});
+			} else {
+				me.store.load({
+					params: params,
+					callback: function() {
+						if (me.selectedTypes) {
+							me.setSelectedTypes(me.selectedTypes);
+						}
+					}
+				});
+			}
+		}
+
+		toolbarItems = [{
+			xtype: 'button',
+			text: 'Select All',
+			iconCls: 'icon-info',
+			handler: function(btn) {
+				btn.up('typeselectiontree').toggleChecked(btn, true);
+			}
+		}];
+
+		if (me.canCreate) {
+			toolbarItems.push({
+				xtype: 'button',
+				text: me.createNewText,
+				iconCls: 'icon-add',
+				handler: function() {
+					me.showCreateType();
+				}
+			});
+		}
+
+		me.dockedItems = [{
+			xtype: 'toolbar',
+			items: toolbarItems
+		}];
+
+		me.callParent(arguments);
+
+		me.addListener('beforecellclick', function(grid) {
+			grid.ownerCt.suspendLayouts();
+		});
+
+		me.addListener('checkchange', function(node, checked) {
+			var me = this;
+
+			if (me.unSelectableTypes && Ext.Array.contains(me.unSelectableTypes.split(','), node.get('internalIdentifier'))) {
+				Ext.Msg.warning('Warning', me.disabledNodeMessage);
+
+				node.set('checked', !checked);
+
+				return false;
+			}
+
+			if (me.cascadeSelectionUp) {
+				var rootNode = me.getRootNode();
+				var parentNode = node;
+				var childChecked = false;
+
+				while (parentNode != rootNode) {
+					childChecked = false;
+
+					parentNode.eachChild(function(child) {
+						if (child.get('checked')) {
+							childChecked = true;
+						}
+					});
+
+					if (!checked && !childChecked) {
+						parentNode.set('checked', checked);
+					}
+
+					if (!checked && childChecked) {
+						parentNode.set('checked', !checked);
+					}
+
+					if (checked && childChecked) {
+						parentNode.set('checked', checked);
+					}
+
+					parentNode = parentNode.parentNode;
+				}
+			}
+
+			if (me.cascadeSelectionDown) {
+				if (node.get('checked')) {
+					node.cascadeBy(function(childNode) {
+						childNode.set('checked', true);
+					});
+				}
+			}
+
+			node.getOwnerTree().resumeLayouts();
+			node.getOwnerTree().fireEvent('typesselected', node.getOwnerTree());
+		});
+
+		me.collapseAll();
+	},
+
+	showCreateType: function() {
+		var me = this;
+
+		var window = Ext.widget('window', {
+			title: me.createNewText,
+			modal: true,
+			layout: 'fit',
+			plain: true,
+			buttonAlign: 'center',
+			items: [{
+				xtype: 'form',
+				url: me.typesUrl,
+				defaults: {
+					width: 375,
+					xtype: 'textfield'
+				},
+				bodyStyle: 'padding:5px 5px 0',
+				items: [{
+					xtype: 'combo',
+					name: 'parent',
+					itemId: 'parentType',
+					emptyText: 'No Parent',
+					width: 320,
+					loadingText: 'Retrieving Types...',
+					store: Ext.create("Ext.data.Store", {
+						proxy: {
+							type: 'ajax',
+							url: me.typesUrl + '.json',
+							reader: {
+								type: 'json',
+								root: me.typesRoot
+							},
+							extraParams: {
+								parent: me.defaultParentType
+							}
+						},
+						fields: [{
+							name: 'internal_identifier'
+						}, {
+							name: 'description'
+
+						}]
+					}),
+					forceSelection: true,
+					allowBlank: true,
+					editable: false,
+					fieldLabel: 'Parent',
+					mode: 'remote',
+					displayField: 'description',
+					valueField: 'internal_identifier',
+					triggerAction: 'all',
+					listConfig: {
+						tpl: '<div class="my-boundlist-item-menu">No Parent</div><tpl for="."><div class="x-boundlist-item">{description}</div></tpl>',
+						listeners: {
+							el: {
+								delegate: '.my-boundlist-item-menu',
+								click: function() {
+									window.down('#parentType').clearValue();
+								}
+							}
+						}
+					}
+				}, {
+					fieldLabel: 'Name',
+					allowBlank: false,
+					name: 'description'
+				}]
+			}],
+			buttons: [{
+				text: 'Submit',
+				listeners: {
+					'click': function(button) {
+						var window = button.findParentByType('window');
+						var formPanel = window.down('form');
+
+						if (formPanel.isValid()) {
+							formPanel.getForm().submit({
+								timeout: 30000,
+								waitMsg: 'Creating type...',
+								params: {
+									default_parent: me.defaultParentType
+								},
+								success: function(form, action) {
+									var responseObj = Ext.decode(action.response.responseText);
+
+									if (responseObj.success) {
+										var values = formPanel.getValues();
+										var parentNode = me.getRootNode();
+
+										if (!Ext.isEmpty(values.parent)) {
+											parentNode = parentNode.findChildBy(function(node) {
+												if (node.data.internalIdentifier == values.parent) {
+													return true;
+												}
+											}, this, true);
+										}
+
+										parentNode.set('leaf', false);
+										parentNode.appendChild({
+											text: responseObj[me.typesRoot.singularize()].description,
+											internalIdentifier: responseObj[me.typesRoot.singularize()].internal_identifier,
+											checked: true,
+											leaf: true,
+											children: []
+										});
+
+										window.close();
+									} else {
+										Ext.Msg.alert("Error", responseObj.message);
+									}
+								},
+								failure: function(form, action) {
+									Compass.ErpApp.Utility.handleFormFailure(action);
+								}
+							});
+						}
+					}
+				}
+			}, {
+				text: 'Close',
+				handler: function(btn) {
+					btn.up('window').close();
+				}
+			}]
+		});
+		window.show();
+	},
+
+	getSelectedRecords: function() {
+		var me = this;
+		var records = [];
+
+		me.getRootNode().cascadeBy(function(node) {
+			if (me.cascadeSelectionUp) {
+				var childChecked = false;
+				node.eachChild(function(child) {
+					if (child.get('checked')) {
+						childChecked = true;
+					}
+				});
+				if (node.get('checked') && !childChecked) {
+					records.push(node);
+				}
+			} else {
+				if (node.get('checked')) {
+					records.push(node);
+				}
+			}
+		});
+		return Ext.Array.clean(records);
+	},
+
+	getSelectedTypes: function() {
+		var me = this;
+		var types = [];
+
+		Ext.Array.forEach(me.getSelectedRecords(), function(record) {
+			types.push(record.get('internalIdentifier'));
+		});
+
+		return Ext.Array.clean(types);
+	},
+
+	setAvailableTypes: function(types) {
+		var me = this;
+
+		me.store.setRootNode({
+			text: '',
+			children: types
+		});
+	},
+
+	setSelectedTypes: function(types) {
+		var me = this;
+
+		types = Ext.Array.clean(types.split(','));
+
+		me.getRootNode().cascadeBy(function(node) {
+			if (Ext.Array.contains(types, node.get('internalIdentifier'))) {
+				node.set('checked', true);
+				var parentNode = node.parentNode;
+
+				if (me.cascadeSelectionUp) {
+					while (parentNode != me.getRootNode()) {
+						parentNode.set('checked', true);
+						parentNode.expand();
+						parentNode = parentNode.parentNode;
+					}
+				}
+
+				// expand nodes
+				while (parentNode != me.getRootNode()) {
+					parentNode.expand();
+					parentNode = parentNode.parentNode;
+				}
+			}
+		});
+	},
+
+	setUnSelectableTypes: function(types) {
+		var me = this;
+
+		me.unSelectableTypes = types;
+	},
+
+	toggleChecked: function(btn, checked) {
+		var me = this;
+
+		me.getRootNode().cascadeBy(function(node) {
+			if (!me.unSelectableTypes || !Ext.Array.contains(me.unSelectableTypes.split(','), node.get('internalIdentifier'))) {
+				node.set('checked', checked);
+			}
+		});
+
+		if (checked) {
+			btn.setText('Unselect All');
+		} else {
+			btn.setText('Select All');
+		}
+
+		btn.setHandler(function() {
+			me.toggleChecked(btn, !checked);
+		});
+	},
+
+	/*
+	 * Field methods
+	 */
+
+	getValue: function() {
+		var me = this;
+
+		return me.getSelectedTypes().join(',');
+	},
+
+	setValue: function(value) {
+		var me = this;
+
+		if (value) {
+			me.setSelectedTypes(value);
+		}
+	},
+
+	getSubmitData: function() {
+		var me = this,
+			data = null;
+		if (!me.disabled && me.submitValue) {
+			data = {};
+			data[me.getName()] = me.getValue();
+		}
+		return data;
+	},
+
+	validate: function() {
+		if (this.initialConfig.allowBlank !== true && Ext.isEmpty(this.getSelectedTypes())) {
+			if (this.getEl())
+				this.getEl().setStyle('border', 'solid 1px red');
+
+			return false;
+		} else {
+			if (this.getEl())
+				this.getEl().setStyle('border', '');
+
+			return true;
+		}
+	}
+});