Update RowHistoryData, the user can modify values.

modules/plugin_event/ui_core.py

@@ -209,9 +209,10 @@ class CoreUi(object):
             "widget": {
                 "xtype": "xrowhistorydata",
                 "bind": {
-                    "historyData": "{record.HistoryData}"
+                    "historyData": "{record.HistoryData}",
+                    "historyId_events": "{record.HistoryId_events}"
                 },
-                "padding": "10 0 12 50"
+                "padding": "10 100 12 50"
             }
         }
 

static/plugin_event/src/grid/RowHistoryData.js

@@ -11,70 +11,136 @@
  */
 Ext.define("Event.grid.RowHistoryData", {
 
-    extend: "Ext.grid.Panel",
+    extend: "Ext.grid.property.Grid",
     alias: "widget.xrowhistorydata",
-    uses: "Ext.data.Store",
+
+    config: {
+        /**
+         * @cfg {Object}
+         * Contains the user data block which will be displayed in a grid:
+         *
+         *     {
+         *          property1: val1,
+         *          property2: val2
+         *      }
+         *
+         * This configuration has to be bind to the grid by the RowWidget plugin:
+         *
+         *  historyData = "{record.HistoryData}"
+         *
+         */
+        historyData: null,
+
+        /**
+         * @cfg {Number}
+         * The identifier of the event
+         *
+         * This configuration has to be bind to the grid by the RowWidget plugin:
+         *
+         *  historyId_events = "{record.HistoryId_events}"
+         *
+         */
+        historyId_events: undefined,
+
+        /**
+         * @cfg {Boolean}
+         * Activate the read only mode when it is true.
+         * In that case, the user cannot modify the value anymore.
+         *
+         */
+        readOnly: false
+    },
+
+    // pivate property
+    eventStore: "eventsStore",
+
+    // jshint strict: false
+
+    // private method requests by the component model of ExtJS
+    initComponent: function () {
+
+        var me = this;
+        me.callParent(arguments);
+
+        // link to the event store
+        me.eventStore = Dbui.getStore(me.eventStore);
+
+        // to deal with readonly mode at any time
+        me.on("beforeedit", me.onBeforeEdit, me);
+
+        // activate the two way binding
+        // the history.data field is updated when the user modifies a value
+        // in the property grid. Here we mimic the behaviour of a spreadsheet.
+        if (!me.readOnly) {
+            me.on("propertychange", me.onPropertyChange, me);
+        }
+
+    },
+
+    // private method requests by the component model of ExtJS
+    beforeDestroy: function () {
+
+        var me = this;
+
+        me.un("beforeedit", me.onBeforeEdit, me);
+
+        if (!me.readOnly) {
+            me.un("propertychange", me.onPropertyChange, me);
+        }
+
+        me.callParent(arguments);
+    },
+
+    // jshint strict: true
 
     /**
-     * @cfg {Object}
-     * Contains the user data block which will be displayed in a grid:
+     * Setter for the historyData property.
+     * Method required by the binding model.
+     *
+     * @return {Object}
      *
      *     {
      *          property1: val1,
      *          property2: val2
-     *      }
-     *
-     * This configuration has to be bind to the grid by the RowWidget plugin:
-     *
-     *  historyData = "{record.HistoryData}"
+     *     }
      *
      */
-     historyData: null,
+    getHistoryData: function () {
 
-    // Predefined configuration options
-    forceFit: true,
+        "use strict";
+        var me = this,
+            value = {};
 
-    // private properties for internationalization
-    textProperty: "property",
-    textValue: "value",
+        me.getStore().each(function(record) {
+            value[record.get("name")] = record.get("value");
+        });
 
-    // jshint strict: false
+        return value;
+    },
 
-    // private method requests by the component model of ExtJS
-    initComponent: function () {
+    /**
+     * Handler to activate / desactivate the readonly mode
+     *
+     */
+    onBeforeEdit: function () {
 
+        "use strict";
         var me = this;
 
-        // the store for the grid
-        me.store = Ext.create("Ext.data.Store", {
-            fields: [
-                {name: "property", type: "string"},
-                {name: "value", type: "string"}
-            ],
-            proxy: "memory"
-        });
+        return !me.readOnly;
+    },
 
-        // the columns of the grid
-        me.columns =[{
-                dataIndex: "property",
-                flex: 0.5,
-                sortable: true,
-                text: me.textProperty
-            }, {
-                dataIndex: "value",
-                flex: 4,
-                sortable: true,
-                text: me.textValue
-        }];
-
-        // instantiate the base class
-        me.callParent(arguments);
+    /**
+     * Handler to update the database
+     *
+     */
+    onPropertyChange: function () {
 
-        // hide the dirty flag when a cell is modified
-        me.getView().markDirty = false;
-    },
+        "use strict";
+        var me = this;
 
-    // jshint strict: true
+        me.publishState("historyData", me.getHistoryData());
+    },
 
     /**
      * Setter for the historyData property.
@@ -92,30 +158,11 @@ Ext.define("Event.grid.RowHistoryData", {
     setHistoryData: function (value) {
 
         "use strict";
-
         var me = this,
-            store = me.getStore(),
-            model = store.getProxy().getModel(),
-            records = [],
-            record;
-
-        me.eventData = value;
-
-        if (value) {
-
-            Ext.Object.each(value, function (prop, val) {
-                record = model.create();
-                record.set("property", prop);
-                record.set("value", val);
-                records.push(record);
-            });
-
-            store.loadData(records, false);
-
-        } else {
-            store.removeAll(true);
-        }
+            events = me.eventStore,
+            idEvent= me.historyId_events,
+            sourceConfig = Event.getHistoryDataConfig(events, idEvent);
 
-        me.getView().refresh();
+        me.setSource(value, sourceConfig);
     }
 });