terceira aula

app/assets/javascripts/app.js

@@ -2,5 +2,5 @@ Ext.application({
   name: "Workout",
   appFolder: "/assets",
   autoCreateViewport: true,
-  controllers: ['Exercicios']
+  controllers: ['Exercicios', 'Rotinas']
 });

app/assets/javascripts/application.js

@@ -13,4 +13,5 @@
 //= require jquery
 //= require jquery_ujs
 //= require ext-all-dev
+//= require base
 //= require app

app/assets/javascripts/base.js

@@ -0,0 +1,111 @@
+Ext.onReady(function(){
+  Ext.Ajax.extraParams = {
+    authenticity_token: Ext.select("meta[name='csrf-token']")
+                           .first().getAttribute('content')
+  }
+
+  Ext.Ajax.on('requestexception', 
+  function (conn, response, options) {
+    if (response.status === 401 || response.status === 401) {
+      resp = JSON.parse(response.responseText)
+      Ext.Msg.alert('Erro', resp.message);
+    }
+  });
+
+	Ext.override(Ext.form.field.Picker, {
+
+	    initEvents: function() {
+	        var me = this;
+	        me.callParent();
+
+	        me.keyNav = Ext.create('Ext.util.KeyNav', me.inputEl, {
+  				pageDown: function() {
+  	                if (!me.isExpanded) { me.onTriggerClick(); }
+  	            },
+  	            esc: me.collapse,
+  	            scope: me,
+  	            forceKeyDown: true
+  	        });
+
+	    }
+
+	});
+
+  Ext.override(Ext.form.Panel, {
+		findActivedInput : function() {
+
+			return this.getForm().getFields().filterBy(function(object, key){
+				return object.isVisible() ;
+			});
+
+		},
+		previousFocus : function(component) {
+			var collection = this.findActivedInput();
+			var current = component;
+
+			if (!current) {
+				collection.each(function(input) {
+					if (input.hasFocus) current = input;
+				});
+			}
+
+			var previous = collection.getAt(collection.indexOf(current) - 1);
+
+			if (current.beforeBlur) {
+				current.beforeBlur();
+			}
+			if(previous) {
+				if(previous.xtype === "radiogroup" || previous.xtype === "checkboxgroup") {
+					previous.items.get(0).focus(false);
+				} else {
+					previous.focus(true);
+				}
+			}
+		},
+		nextFocus : function(component, event) {
+			var collection = this.findActivedInput();
+			var current = component;
+
+			if (!current) {
+				collection.each(function(input) {
+					if (input.hasFocus) current = input;
+				});
+			}
+			var next = collection.getAt(collection.indexOf(current) + 1);
+
+			if (current.beforeBlur) {
+				current.beforeBlur();
+			}
+			if(next) {
+				if(next.xtype === "radiogroup" || next.xtype === "checkboxgroup") {
+					next.items.get(0).focus(true);
+				} else {
+					next.focus(false);
+				}
+			}
+		}
+  });
+
+  Ext.override(Ext.form.field.Base, {
+    initComponent: function() {
+      this.callOverridden(arguments);
+      this.addListener("afterrender", function(field) {
+
+				var nav = new Ext.KeyNav(this.el, {
+					'enter' : function(e) {
+					  field.up("form").nextFocus(field);
+					},
+					'down' : function(e) {
+					  field.up("form").nextFocus(field);
+					},
+					'up' : function(e) {
+					  field.up("form").previousFocus(field);
+					}
+				});
+
+
+      })
+    }
+  });
+
+});

app/assets/javascripts/controller/Exercicios.js

@@ -5,7 +5,6 @@ Ext.define('Workout.controller.Exercicios', {
   stores: ['Exercicios'],
   views: ['exercicios.Grid', 'exercicios.Form', 'exercicios.Window'],
   addTabPanel: function(button) {
-    console.log("Clicou em exercicio", this);
     var tabpanel = Ext.ComponentQuery
             .query("tabpanel[itemId='tabs']")[0];
 

app/assets/javascripts/controller/Rotinas.js

@@ -0,0 +1,40 @@
+Ext.define('Workout.controller.Rotinas', {
+  extend: 'Ext.app.Controller',
+  requires: ['Workout.store.Rotinas'],
+  views: ['rotinas.List', 'rotinas.Form'],
+  models: ['Rotina', 'RotinaTree','Item', 'Exercicio'],
+  stores: ['Rotinas'],
+  init: function() {
+    this.control({
+
+      //"button[itemId='rotinas']": {
+      "#rotinas" : {
+        click: {
+          scope: this,
+          fn: this.onTabAdd
+        }
+      },
+
+      "rotinalist[itemId='tab-Rotinas']": {
+        afterrender: function(view) {
+          view.store.load();
+        }
+      }
+    });
+  },
+
+  onTabAdd: function(button) {
+    this.getTabPanel().addTab({
+      title: button.text,
+      itemId: "tab-" + button.text,
+      closable: true,
+      xtype: "rotinaslist"
+    });
+  }
+
+  , getTabPanel: function() {
+    return Ext.ComponentQuery.query("tabpanel[itemId='tabs']")[0];
+  }
+
+
+});

app/assets/javascripts/model/RotinaTree.js

@@ -0,0 +1,10 @@
+Ext.define('Workout.model.RotinaTree', {
+  extend: 'Ext.data.Model',
+  proxy: {
+    type: 'rest', format: 'json', url: '/rotinas'
+  },
+  fields: ['id', 'titulo', 'exercicio', 'repeticao', 'tempo'],
+  hasMany: [
+    {model: 'Workout.model.Item', name: 'itens', associationKey: 'itens'}
+  ]
+});

app/assets/javascripts/store/Rotinas.js

@@ -1,5 +1,34 @@
 Ext.define('Workout.store.Rotinas', {
   alias: 'store.rotinas',
-  extend: 'Ext.data.Store',
-  model: "Workout.model.Rotina"
+  extend: 'Ext.data.TreeStore',
+  model: "Workout.model.RotinaTree",
+  root: "Workout.model.Rotina",
+  constructor: function() {
+    this.callParent(arguments);
+
+    this.on({
+      beforeappend: this.transformarFolha,
+      append: this.adicionarItensExpandindo,
+      scope: this
+    });
+
+  },
+  transformarFolha: function(root, node) {
+    if( node.itens().count() == 0 && node.get("id") ) node.set("leaf", true);
+  },
+  adicionarItensExpandindo: function(root, node) {
+    if( node.itens().count() > 0 ){
+      node.itens().each(this.adicionarItem, node);
+      node.expand();
+    }
+  },
+  adicionarItem: function(item) {
+    this.appendChild({
+      leaf: true,
+      item: item,
+      exercicio: item.exercicio().get("titulo"),
+      repeticao: item.get("repeticao"),
+      tempo: item.get("tempo")
+    })
+  }
 });

app/assets/javascripts/view/exercicios/Crud.js

@@ -5,6 +5,7 @@ Ext.define("Workout.view.exercicios.Crud", {
     if(button.text != "Cadastrar") {
       model = this.getSelectionModel().selected.first();
       if(!model) {
+        Ext.Msg.alert("Erro", "Selecione um Exercício para editar");
         Ext.Error.notify = true;
         Ext.Error.raise({ msg: 'Selecione um Exercício para editar' });
       }
@@ -23,6 +24,23 @@ Ext.define("Workout.view.exercicios.Crud", {
     }).show();
   },
   adicionar: function(model) {
-    this.store.loadData([model], true);
+    var local = this.store.findRecord("id", model.getId());
+    if ( local ) {
+      local.set(model.data);
+    } else {
+      this.store.add(model);
+    }
+  },
+  excluir: function() {
+    Ext.Msg.show({
+      title: "Excluir Exercício",
+      msg: "Deseja realmente excluir esse Exercício?",
+      buttons: Ext.Msg.YESNO,
+      scope: this,
+      fn: function(btn){
+        if(btn == "yes") 
+          this.getSelectionModel().selected.first().destroy();
+      }
+    });
   }
 });

app/assets/javascripts/view/exercicios/Form.js

@@ -17,7 +17,7 @@ Ext.define("Workout.view.exercicios.Form", {
     { 
       text: "Salvar", 
       handler: function() {
-        var panel = this.up("exercicioform");
+         var panel = this.up("exercicioform");
          var form = panel.getForm();
          var json = form.getValues();
          var model = Ext.create("Workout.model.Exercicio", json);

app/assets/javascripts/view/exercicios/Grid.js

@@ -14,7 +14,8 @@ Ext.define("Workout.view.exercicios.Grid", {
   initComponent: function() {
     this.tbar = [
       { text: "Cadastrar", handler: this.abrirJanela, scope: this},
-      { text: "Editar", handler: this.abrirJanela, scope: this}
+      { text: "Editar", handler: this.abrirJanela, scope: this},
+      { text: "Excluir", handler: this.excluir, scope: this}
     ];
     this.callParent();
   },

app/assets/javascripts/view/rotinas/Form.js

@@ -0,0 +1,23 @@
+Ext.define('Workout.view.rotinas.Form', {
+  extend: 'Ext.form.Panel',
+  alias: 'widget.rotinasform',
+  formBind: true, 
+  salvarCallback: Ext.emptyFn,
+  scopeSalvarCallback: null,
+  model: null,
+  constructor: function(config) {
+    this.callParent(arguments);
+    if(config.model) this.getForm().loadRecord(config.model);
+  },
+  items: [
+    {xtype: "hiddenfield", name: "id"},
+    {name: "titulo", xtype: "textfield", fieldLabel: "Titulo", allowBlank: false, margin: 5 }
+  ],
+  buttons: [{ text: "Salvar", formBind:true, handler: function(){
+      var panel = this.up("form");
+      var form = panel.getForm();
+      if( form.isValid() ) {
+        panel.salvarCallback.call( panel.scopeSalvarCallback, form.getValues() );
+      }
+  }}]
+});

app/assets/javascripts/view/rotinas/List.js

@@ -0,0 +1,56 @@
+Ext.define('Workout.view.rotinas.List', {
+  extend: 'Ext.tree.Panel',
+  alias: 'widget.rotinaslist',
+  mixins: {
+    rotina: "Workout.view.rotinas.Rotina"
+  },
+  store: Ext.createByAlias("store.rotinas"),
+  selModel: { allowDeselect: true },
+  singleExpand: true,
+	rootVisible: false,
+  columns: [
+     { text: "", dataIndex: "id", xtype: "treecolumn" },
+     { text: 'Rotina', sortable: false, flex: 2, dataIndex: 'titulo'},
+     { text: 'Exercicio', sortable: false, flex: 2, dataIndex: 'exercicio' },
+     { text: 'Repetições', sortable: false, flex: 2, dataIndex: 'repeticao' },
+     { text: 'Tempo', sortable: false, flex: 2, dataIndex: 'tempo' }
+  ],
+  constructor: function() {
+  	  var buttonConfig = { xtype: 'button', pressed: true, scope: this };
+  	  this.tbar = [
+        Ext.apply({ text: 'Cadastrar', handler: this.abrirJanela}, buttonConfig) ,
+        Ext.apply({ text: 'Editar', handler: this.abrirJanela, itemId: 'editar', disabled: true }, buttonConfig),
+        Ext.apply({ text: 'Excluir', handler: this.excluir, itemId: 'excluir', disabled: true }, buttonConfig),
+        "-"
+      ];
+      this.callParent(arguments);
+      this.on({
+         select: this.habilitarAoSelecionar,
+         deselect: this.desabilitarAoSelecionar,
+         scope: this
+       });
+    },
+
+    desabilitarAoSelecionar: function(rowModel, model, index, eOpts) {
+      this.down("#editar").disable();
+      this.down("#excluir").disable();
+
+      var vincular = this.down("#vincular"),
+          editarexercicio = this.down("#editarexercicio"),
+          desvincular = this.down("#desvincular");
+      if(vincular) vincular.destroy();
+      if(editarexercicio) editarexercicio.destroy();
+      if(desvincular) desvincular.destroy();
+    },
+    habilitarAoSelecionar: function(rowModel, model, index, eOpts) {
+      var docked = this.getDockedItems()[0];
+      if(!model.raw.item) {
+        this.down("#editar").enable();
+        this.down("#excluir").enable();
+        docked.add({ text: "Vincular Exercicio", scope: this, handler: this.vincular, pressed: true, itemId: "vincular" })
+      } else {
+        docked.add({ text: "Editar Exercicio", handler: function(){}, pressed: true, itemId: "editarexercicio" })
+        docked.add({ text: "Desvincular Exercicio", handler: function(){}, pressed: true, itemId: "desvincular" })
+      }
+    }
+})