From df533b33c112d0eb9fc9371914f7ba2ccae048d8 Mon Sep 17 00:00:00 2001
From: Timur Sufiev <tsufiev@mirantis.com>
Date: Mon, 15 Jun 2015 13:27:03 -0700
Subject: [PATCH] Fix changing the key in dictionary widget

Co-Authored-By: Vlad Okhrimenko <vokhrimenko@mirantis.com>
Closes-Bug: #1449450
Change-Id: I74db5ec953ba5d1b657c90ce9f7a4d8fc286b63f
---
 .../static/merlin/js/merlin.field.models.js   | 38 +++++++++++--------
 .../merlin/templates/fields/dictionary.html   | 10 ++---
 2 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/merlin/static/merlin/js/merlin.field.models.js b/merlin/static/merlin/js/merlin.field.models.js
index c492d75..289f515 100644
--- a/merlin/static/merlin/js/merlin.field.models.js
+++ b/merlin/static/merlin/js/merlin.field.models.js
@@ -185,19 +185,31 @@
       var dictionaryModel = Barricade.MutableObject.extend({
         create: function(json, parameters) {
           var self = Barricade.MutableObject.create.call(this, json, parameters),
-            _items = {},
+            _items = [],
             _elClass = self._elementClass,
             baseKey = utils.getMeta(_elClass, 'baseKey') || 'key',
             baseName = utils.getMeta(_elClass, 'baseName') || utils.makeTitle(baseKey);
 
           modelMixin.call(self, 'dictionary');
 
+          function makeCacheWrapper(container, key) {
+            var value = container.getByID(key);
+            value.keyValue = function () {
+              if ( arguments.length ) {
+                value.setID(arguments[0]);
+              } else {
+                return value.getID();
+              }
+            };
+            return value;
+          }
+
           self.add = function(newID) {
             var regexp = new RegExp('(' + baseKey + ')([0-9]+)'),
               newValue;
             newID = newID || baseKey + utils.getNextIDSuffix(self, regexp);
-            if ( _elClass.instanceof(Barricade.ImmutableObject) ) {
-              if ( 'name' in _elClass._schema ) {
+            if (_elClass.instanceof(Barricade.ImmutableObject)) {
+              if ('name' in _elClass._schema) {
                 var nameNum = utils.getNextIDSuffix(self, regexp);
                 newValue = {name: baseName + nameNum};
               } else {
@@ -207,19 +219,12 @@
               newValue = '';
             }
             self.push(newValue, utils.extend(self._parameters, {id: newID}));
-            _items[newID] = self.getByID(newID);
+            _items.push(makeCacheWrapper(self, newID));
           };
           self.getValues = function() {
-            if ( !Object.keys(_items).length ) {
-              self.getIDs().forEach(function(id) {
-                _items[id] = self.getByID(id);
-                _items[id].keyValue = function() {
-                  if ( !arguments.length ) {
-                    return this.getID();
-                  } else {
-                    this.setID(arguments[0]);
-                  }
-                };
+            if ( !_items.length ) {
+              _items = self.toArray().map(function(value) {
+                return makeCacheWrapper(self, value.getID());
               });
             }
             return _items;
@@ -228,8 +233,9 @@
             return self.toArray();
           };
           self.remove = function(key) {
-            delete _items[key];
-            Barricade.MutableObject.remove.call(self, self.getPosByID(key));
+            var pos = self.getPosByID(key);
+            Barricade.MutableObject.remove.call(self, pos);
+            _items.splice(pos, 1);
           };
           meldGroup.call(self);
           return self;
diff --git a/merlin/static/merlin/templates/fields/dictionary.html b/merlin/static/merlin/templates/fields/dictionary.html
index e915c60..529f5d5 100644
--- a/merlin/static/merlin/templates/fields/dictionary.html
+++ b/merlin/static/merlin/templates/fields/dictionary.html
@@ -1,16 +1,16 @@
 <collapsible-group content="value" on-add="value.add()">
-  <div class="three-columns" ng-repeat="(key, subvalue) in value.getValues() track by key">
+  <div class="three-columns" ng-repeat="subvalue in value.getValues() track by subvalue.keyValue()">
     <div class="left-column">
       <div class="form-group">
-        <label for="elem-{$ $id $}.{$ key $}">
+        <label for="elem-{$ $id $}.{$ subvalue.uid() $}">
           <editable ng-model="subvalue.keyValue" ng-model-options="{getterSetter: true}"></editable>
         </label>
         <div class="input-group">
-          <input id="elem-{$ $id $}.{$ key $}" type="text" class="form-control" ng-model="subvalue.value"
-              ng-model-options="{ getterSetter: true }">
+          <input id="elem-{$ $id $}.{$ subvalue.uid() $}" type="text" class="form-control"
+                 ng-model="subvalue.value" ng-model-options="{ getterSetter: true }">
           <span class="input-group-btn">
             <button class="btn btn-default fa fa-minus-circle" type="button"
-                ng-click="value.remove(key)"></button>
+                ng-click="value.remove(subvalue.keyValue())"></button>
           </span>
         </div>
       </div>