task-manager 0.1.2 → 0.1.3

data/app/assets/javascripts/task-manager/extjs/app/model/Assignee.js

@@ -15,5 +15,21 @@ Ext.define('TM.model.Assignee', {
       root: 'assignees',
       totalProperty: 'total'
     }
+  },
+
+  getId: function(detailed) {
+    if(detailed) {
+      return this.get('class_name') + '-' + this.get('id');
+    } else {
+      return this.get('id');
+    }
+  },
+
+  getParentId: function(detailed) {
+    if(this.get('parent_id') && detailed) {
+      return this.get('class_name') + '-' + this.get('parent_id');
+    } else {
+      return this.get('parent_id');
+    }
   }
 });

data/app/assets/javascripts/task-manager/extjs/app/model/Plan.js

@@ -2,39 +2,11 @@ Ext.define('TM.model.Plan', {
   extend: 'Ext.data.Model',
 
   fields: [
-    { name: 'id', type: 'int' },
+    { name: 'id', type: 'int', persist: false },
 
     { name: 'name' },
     { name: 'plan_type' },
     { name: 'data', type: 'auto' },
-    { name: 'dataX', convert: function(v, record) {
-      return record.get('data').x;
-    }},
-    { name: 'dataY', convert: function(v, record) {
-      return record.get('data').y;
-    }},
-    { name: 'quarterly_month', convert: function(v, record) {
-      if (record.get('plan_type') == 'quarterly') return record.get('data').deadline_month;
-      return null;
-    }},
-    { name: 'month', convert: function(v, record) {
-      if (record.get('plan_type') == 'yearly') return record.get('data').deadline_month;
-      return null;
-    }},
-    { name: 'weekly_day', convert: function(v, record) {
-      if (record.get('plan_type') == 'weekly') return record.get('data').deadline_day;
-      return null;
-    }},
-    { name: 'day', convert: function(v, record) {
-      if (record.get('plan_type') != 'weekly') return record.get('data').deadline_day;
-      return null;
-    }},
-    { name: 'hour', convert: function(v, record) {
-      return record.get('data').deadline_hour;
-    }},
-    { name: 'minute', convert: function(v, record) {
-      return record.get('data').deadline_minute;
-    }},
     { name: 'autocompletable', type: 'boolean' },
 
     { name: 'begin_to_remind', type: 'int' },
@@ -43,10 +15,12 @@ Ext.define('TM.model.Plan', {
     { name: 'last_task_created_at', type: 'date' },
 
 
-    { name: 'created_at', type: 'date' },
-    { name: 'updated_at', type: 'date' },
+    { name: 'created_at', type: 'date', persist: false },
+    { name: 'updated_at', type: 'date', persist: false },
 
-    { name: 'assignees', type: 'auto' }
+    { name: 'assignees', type: 'auto', persist: false, defaultValue: [] },
+    { name: 'assignables_attributes', type: 'auto', defaultValue: [] },
+    { name: 'callables_attributes', type: 'auto', defaultValue: [] }
   ],
 
   proxy: {
@@ -58,132 +32,20 @@ Ext.define('TM.model.Plan', {
     }
   },
 
-  set: function() {
-    if (typeof arguments[0] === 'object') {
-      this.callParent(arguments);
-
-      obj = arguments[0];
-      if (obj.data) {
-        this.set('dataX', obj.data.x);
-        this.set('dataY', obj.data.y);
-        this.set('quarterly_month', obj.data.deadline_month);
-        this.set('month', obj.data.deadline_month);
-        this.set('weekly_day', obj.data.deadline_day);
-        this.set('day', obj.data.deadline_day);
-        this.set('hour', obj.data.deadline_hour);
-        this.set('minute', obj.data.deadline_minute);
+  save: function(opts) {
+    var self = this;
+    opts = opts || {};
+    var success = opts.success;
+    opts.success = function(record, operation) {
+      self.set(Ext.JSON.decode(operation.response.responseText).plan);
+      self.commit();
+      if (operation.action === 'create') {
+        Ext.getStore('TM.store.Plans').insert(0, self);
       }
-    } else {
-      this.callParent(arguments);
-    }
-  },
-
-  update: function(attrs, opts) {
-      var self = this;
-      var plan = Ext.create('TM.model.Plan', attrs);
-
-      opts = opts || {};
-      var success = opts.success;
-
-      var assignables_attributes = new Array();
-      Ext.Array.forEach(attrs.assignees, function(node, index, assignees) {
-        var record = Ext.getStore('TM.store.Assignees').getById(node.get('id'));
-        assignables_attributes.push({
-          assignee_id: record.get('id'),
-          assignee_type: record.get('class_name')
-        });
-      });
-
-      var callables_attributes = new Array();
-
-      Ext.apply(opts, {
-        url: '/task-manager/api/plans/'+this.get('id'),
-        method: 'PUT',
-        jsonData: {
-          plan: {
-            data: {
-              x: attrs.dataX,
-              y: attrs.dataY,
-              deadline_month: attrs.plan_type == 'quarterly' ? attrs.quarterly_month : (attrs.plan_type == 'yearly' ? attrs.month : null),
-              deadline_day: attrs.plan_type == 'weekly' ? attrs.weekly_day : (attrs.plan_type == 'daily' ? null : attrs.day),
-              deadline_hour: attrs.hour,
-              deadline_minute: attrs.minute
-            },
-            name: attrs.name,
-            plan_type: attrs.plan_type,
-            enabled_at: attrs.enabled_at,
-            begin_to_remind: attrs.begin_to_remind,
-            autocompletable: attrs.autocompletable,
-            assignables_attributes: assignables_attributes,
-            callables_attributes: callables_attributes
-          }
-        },
-        success: function(response) {
-          var obj = Ext.JSON.decode(response.responseText);
-          self.set(obj.plan);
-          self.commit();
-
-          if(success) success.call(opts.scope || this);
-        }
-      });
-      Ext.Ajax.request(opts);
+      if(success) success.call(self);
+    };
 
-      return plan;
-  },
-
-  statics: {
-    create: function(attrs, opts) {
-      var plan = Ext.create('TM.model.Plan', attrs);
-
-      opts = opts || {};
-      var success = opts.success;
-
-      var assignables_attributes = new Array();
-      Ext.Array.forEach(attrs.assignees, function(node, index, assignees) {
-        var record = Ext.getStore('TM.store.Assignees').getById(node.get('id'));
-        assignables_attributes.push({
-          assignee_id: record.get('id'),
-          assignee_type: record.get('class_name')
-        })
-      });
-
-      var callables_attributes = new Array();
-
-      Ext.apply(opts, {
-        url: '/task-manager/api/plans',
-        method: 'POST',
-        jsonData: {
-          plan: {
-            data: {
-              x: attrs.dataX,
-              y: attrs.dataY,
-              deadline_month: attrs.plan_type == 'quarterly' ? attrs.quarterly_month : (attrs.plan_type == 'yearly' ? attrs.month : null),
-              deadline_day: attrs.plan_type == 'weekly' ? attrs.weekly_day : (attrs.plan_type == 'daily' ? null : attrs.day),
-              deadline_hour: attrs.hour,
-              deadline_minute: attrs.minute
-            },
-            name: attrs.name,
-            plan_type: attrs.plan_type,
-            enabled_at: attrs.enabled_at,
-            begin_to_remind: attrs.begin_to_remind,
-            autocompletable: attrs.autocompletable,
-            assignables_attributes: assignables_attributes,
-            callables_attributes: callables_attributes
-          }
-        },
-        success: function(response) {
-          var obj = Ext.JSON.decode(response.responseText);
-          plan.set(obj.plan);
-          //plan.set('dataX', obj.plan.data.x);
-          plan.commit();
-
-          if(success) success.call(opts.scope || this);
-        }
-      });
-      Ext.Ajax.request(opts);
-
-      return plan;
-    }
+    this.callParent([opts]);
   },
 
   destroy: function() {

data/app/assets/javascripts/task-manager/extjs/app/store/Assignees.js

@@ -4,50 +4,57 @@ Ext.define('TM.store.Assignees', {
   autoLoad: true,
   model: 'TM.model.Assignee',
 
-  toTreeStore: function() {
+  listeners: {
+    load: {
+      fn: function(store) {
+        store.refreshRootNode();
+      }
+    }
+  },
 
-    var self = this;
-    var store = {
+  toTreeStore: function() {
+    this._treeStore = this._treeStore || Ext.create('Ext.data.TreeStore', {
       root: {
         expanded: true,
+        checked: false,
+        text: '全部',
+        id: 'root',
         children: []
       }
-    };
-
-    self.each(function(assignee) {
-      self.addChild(self.getPositionById(store.root,
-                                 assignee.get('parent_id')), assignee);
     });
 
-    return store;
+    return this._treeStore;
   },
 
   // @private
-  getPositionById: function(root, id) {
-    if (id == null || id == 0) return root;
-    if (root.id == id) return root;
-
-    var childrenLength = root.children ? root.children.length : 0;
-    for (var i = 0; i < childrenLength; i++) {
-      var result = this.getPositionById(root.children[i], id);
-      if (result != null) return result;
-    }
-
-    return null;
+  getRootNode: function() {
+    return this.toTreeStore().getRootNode();
   },
 
-  addChild: function(root, record) {
-    if (root.children == null) root.children = [];
+  // @private
+  refreshRootNode: function() {
+    this.each(function(assignee) {
+      var parent = this.getNodeById(assignee.getParentId(true)) || this.getRootNode();
+      var node = parent.findChild('id', assignee.getId(true));
+
+      if(!node) this.appendChildNode(parent, assignee);
+    }, this);
+  },
 
-    root.children.push({
-      id: record.get('id'),
-      text: record.get('name'),
+  // @private
+  appendChildNode: function(parent, assignee) {
+    parent.set('leaf', false);
+    parent.appendChild(parent.createNode({
+      id: assignee.getId(true),
+      text: assignee.get('name'),
       checked: false,
-      leaf: true
-    });
+      leaf: true,
+      record: assignee
+    }));
+  },
 
-    if (root.leaf != null) {
-      root.leaf == true ? root.leaf = false : null;
-    }
+  // @private
+  getNodeById: function(id) {
+    return this.toTreeStore().getNodeById(id);
   }
 });

data/app/assets/javascripts/task-manager/extjs/app/view/assignee/TreeCombo.js

@@ -0,0 +1,48 @@
+Ext.define('TM.view.assignee.TreeCombo', {
+  xtype: 'assignee_treecombo',
+  extend: 'Ext.ux.TreeCombo',
+
+  setValue: function(valueInit) {
+    if(typeof valueInit === 'object') {
+      var value = [];
+      valueInit.forEach(function(i) {
+        value.push(i.assignee_type + '-' + i.assignee_id);
+      });
+      valueInit = value.join(',');
+    }
+
+    this.callParent([valueInit]);
+  },
+
+  getSubmitValue: function() {
+    var value = [];
+    if(!this.value) return value;
+
+    var objs = this.value.split(',');
+    objs.forEach(function(i) {
+      var node = this.tree.getStore().getNodeById(i);
+      if(node) {
+        var assignee = node.raw.record;
+        var attrs = {
+          assignee_id: assignee.get('id'),
+          assignee_type: assignee.get('class_name')
+        };
+        value.push(attrs);
+      }
+    }, this);
+
+    return value;
+  },
+
+  // @protected
+  initComponent: function() {
+    this.callParent(arguments);
+
+    this.on('show', this.unCheckNodes);
+  },
+
+  // @private
+  unCheckNodes: function() {
+    this.setValue('');
+  }
+});

data/app/assets/javascripts/task-manager/extjs/app/view/plan/Form.js

@@ -0,0 +1,290 @@
+Ext.define('TM.view.plan.Form', {
+  requires: ['Ext.ux.TreeCombo'],
+  extend: 'Ext.form.Panel',
+  xtype: 'plan_form',
+
+  defaultPlanType: 'yearly',
+  defaultBeginToRemind: 0,
+
+  defaults: {
+    xtype: 'fieldset',
+    margin: '5 10'
+  },
+
+  items: [{
+    itemId: 'base-info',
+    title: '基本信息',
+    layout: {
+      type: 'table',
+      columns: 1
+    },
+    defaults: {
+      xtype: 'textfield',
+      labelAlign: 'right',
+      margin: '10 0',
+      width: 510
+    },
+
+    items: [{
+      fieldLabel: '计划名称',
+      name: 'name',
+      allowBlank: false
+    }, {
+      xtype: 'assignee_treecombo',
+      fieldLabel: '计划执行人',
+      name: 'assignables_attributes',
+      store: Ext.getStore('TM.store.Assignees').toTreeStore()
+    }, {
+      fieldLabel: '计划类型',
+      name: 'plan_type',
+      store: 'TM.store.Types',
+      editable: false,
+      valueField: 'value',
+      xtype: 'combo',
+      blankText: '请选择计划类型!',
+      allowBlank: false
+    }, {
+      fieldLabel: '横向指标',
+      name: 'data.x'
+    }, {
+      fieldLabel: '纵向指标',
+      name: 'data.y'
+    }, {
+      fieldLabel: '生效时间',
+      xtype: 'datefield',
+      editable: false,
+      anchor: '100%',
+      format: 'Y/m/d',
+      name: 'enabled_at'
+    }, {
+      fieldLabel: '完成前几天提醒',
+      emptyText: '计划完成前多少天开始提醒，此处为倒计时。',
+      name: 'begin_to_remind'
+    }, {
+      fieldLabel: '是否自动完成',
+      xtype: 'checkbox',
+      name: 'autocompletable'
+    }]
+  }, {
+    xtype: 'fieldset',
+    itemId: 'deadline',
+    title: '计划完成截至时限',
+    layout: {
+      type: 'table',
+      columns: 2
+    },
+    defaults: {
+      labelAlign: 'right',
+    },
+    items: [{
+      fieldLabel: '月',
+      name: 'data.deadline_month',
+      xtype: 'combo',
+      store: 'TM.store.Months',
+      valueField: 'value',
+      editable: false
+    }, {
+      fieldLabel: '日',
+      name: 'data.deadline_day',
+      store: 'TM.store.Days',
+      valueField: 'value',
+      xtype: 'combo',
+      editable: false
+    }, {
+      fieldLabel: '时',
+      name: 'data.deadline_hour',
+      store: 'TM.store.Hours',
+      valueField: 'value',
+      xtype: 'combo',
+      editable: false
+    }, {
+      fieldLabel: '分',
+      name: 'data.deadline_minute',
+      store: 'TM.store.Minutes',
+      valueField: 'value',
+      xtype: 'combo',
+      editable: false
+    }]
+  }],
+
+  buttons: [{
+    text: '保存',
+    formBind: true,
+    action: 'save'
+  }, {
+    text: '取消',
+    action: 'cancel'
+  }],
+
+  getValues: function() {
+    var values = this.callParent();
+
+    values.data = {};
+    ['month', 'day', 'hour', 'minute'].forEach(function(name) {
+      values.data['deadline_' + name] = this.getDeadlineCombo('data.deadline_' + name).getValue();
+      delete values['data.deadline_' + name];
+    }, this);
+
+    ['x', 'y'].forEach(function(name) {
+      values.data[name] = this.query('textfield[name="data.' + name + '"]')[0].getValue();
+      delete values['data.' + name];
+    }, this);
+
+    return values;
+  },
+
+  loadRecord: function(record) {
+    this.callParent(arguments);
+
+    this.refreshDeadline(record.get('plan_type'));
+
+    ['month', 'day', 'hour', 'minute'].forEach(function(name) {
+      this.getDeadlineCombo('data.deadline_' + name).setValue(record.get('data')['deadline_' + name]);
+    }, this);
+
+    ['x', 'y'].forEach(function(name) {
+      this.query('textfield[name="data.' + name + '"]')[0].setValue(record.get('data')[name]);
+    }, this);
+
+    this.checkSelectedAssignees(record.get('assignees'));
+  },
+
+  // @protected
+  initComponent: function() {
+    this.callParent(arguments);
+
+    var planTypeCombo = this.query('fieldset combo[name="plan_type"]')[0];
+    planTypeCombo.setValue(this.defaultPlanType);
+    planTypeCombo.on('change', this.onPlanTypeChange, this);
+
+    var beginToRemindField = this.query('fieldset textfield[name="begin_to_remind"]')[0];
+    beginToRemindField.setValue(this.defaultBeginToRemind);
+
+    this.refreshDeadline(this.defaultPlanType);
+  },
+
+  // @private
+  checkSelectedAssignees: function(assignees) {
+    if(typeof assignees === 'undefined') return;
+
+    var values = [];
+    assignees.forEach(function(a) {
+      var node = this.getAssigneesTreeCombo().tree.getRootNode().findChildBy(function(node) {
+        with(node.raw) {
+          return record.get('id') == a.id &&
+            record.get('name') == a.name
+        }
+      }, this, true);
+
+      if(node) {
+        values.push({
+          assignee_id: node.raw.record.get('id'),
+          assignee_type: node.raw.record.get('class_name')
+        });
+      }
+    }, this);
+
+    console.log(values);
+    this.getAssigneesTreeCombo().setValue(values);
+  },
+
+  //@private
+  onPlanTypeChange: function(combo, newValue) {
+    this.refreshDeadline(newValue);
+  },
+
+  // @private
+  refreshDeadline: function(planType) {
+    switch(planType) {
+      case 'yearly':
+        this.showYearlyDeadlineCombos();
+        break;
+      case 'quarterly':
+        this.showQuarterlyDeadlineCombos();
+        break;
+      case 'monthly':
+        this.showMonthlyDeadlineCombos();
+        break;
+      case 'weekly':
+        this.showWeeklyDeadlineCombos();
+        break;
+      case 'daily':
+        this.showDailyDeadlineCombos();
+        break;
+      default:
+        throw 'Invalid plan_type ' + planType;
+    }
+
+    ['month', 'day', 'hour', 'minute'].forEach(function(name) {
+      this.getDeadlineCombo('data.deadline_' + name).setValue(null);
+    }, this);
+  },
+
+  // @private
+  showYearlyDeadlineCombos: function() {
+    this.getDeadlineCombo('data.deadline_month').
+      bindStore(Ext.getStore('TM.store.Months'));
+    this.getDeadlineCombo('data.deadline_day').
+      bindStore(Ext.getStore('TM.store.Days'));
+
+    this.showDeadlineCombos(["month", "day", "hour", "minute"]);
+  },
+
+  // @private
+  showQuarterlyDeadlineCombos: function() {
+    this.getDeadlineCombo('data.deadline_month').
+      bindStore(Ext.getStore('TM.store.QuarterlyMonths'));
+    this.getDeadlineCombo('data.deadline_day').
+      bindStore(Ext.getStore('TM.store.Days'));
+
+    this.showDeadlineCombos(["month", "day", "hour", "minute"]);
+  },
+
+  // @private
+  showMonthlyDeadlineCombos: function() {
+    this.getDeadlineCombo('data.deadline_day').
+      bindStore(Ext.getStore('TM.store.Days'));
+
+    this.showDeadlineCombos(["day", "hour", "minute"]);
+    this.hideDeadlineCombos(["month"]);
+  },
+
+  // @private
+  showWeeklyDeadlineCombos: function() {
+    this.getDeadlineCombo('data.deadline_day').
+      bindStore(Ext.getStore('TM.store.WeekDays'));
+
+    this.showDeadlineCombos(["day", "hour", "minute"]);
+    this.hideDeadlineCombos(["month"]);
+  },
+
+  // @private
+  showDailyDeadlineCombos: function() {
+    this.showDeadlineCombos(["hour", "minute"]);
+    this.hideDeadlineCombos(["month", "day"]);
+  },
+
+  // @private
+  getDeadlineCombo: function(name) {
+    return this.query('#deadline combo[name="' + name + '"]')[0];
+  },
+
+  // @private
+  showDeadlineCombos: function(combos) {
+    combos.forEach(function(c) {
+      this.getDeadlineCombo('data.deadline_' + c).show();
+    }, this);
+  },
+
+  // @private
+  hideDeadlineCombos: function(combos) {
+    combos.forEach(function(c) {
+      this.getDeadlineCombo('data.deadline_' + c).hide();
+    }, this);
+  },
+
+  // @private
+  getAssigneesTreeCombo: function() {
+    return this.query('assignee_treecombo')[0];
+  }
+});