Allow edits of the Collection widget entries

By removing the readonly state when pressing the edit button, the value
can now be modified.

See: https://www.pivotaltracker.com/story/show/185431458

assets/js/components/collection_widget.test.ts

@@ -40,7 +40,7 @@ describe('validate collection widget', function() {
     $('.add_collection_entry').click();
 
     let expected = `
-        <ul class=\"collection-list\"><li class=\"collection-entry\"><input type=\"text\" id=\"dashboard_bundle_entity_type_metadata_redirectUris_0\" name=\"dashboard_bundle_entity_type[metadata][redirectUris][0]\" readonly=\"\"><button type=\"button\" class=\"button-small remove_collection_entry\"><i class=\"fa fa-trash\"></i></button></li></ul>
+        <ul class=\"collection-list\"><li class=\"collection-entry\"><input type=\"text\" id=\"dashboard_bundle_entity_type_metadata_redirectUris_0\" name=\"dashboard_bundle_entity_type[metadata][redirectUris][0]\" readonly=\"\"><button type=\"button\" class=\"button-small remove_collection_entry\"><i class=\"fa fa-trash\"></i></button><button type=\"button\" class=\"button-small edit_collection_entry\"><i class=\"fa fa-pencil\"></i></button></li></ul>
         <div class="collection-entry"><input type="text"><button type="button" class="button-small blue add_collection_entry"><i class="fa fa-plus"></i></button></div>`;
 
     let actual = $('.collection-widget').html();
@@ -83,7 +83,7 @@ describe('validate collection widget', function() {
     // Should yield an error
     $('.add_collection_entry').click();
 
-    let expected= `<li class="collection-entry"><input type="text" id="dashboard_bundle_entity_type_metadata_redirectUris_0" name="dashboard_bundle_entity_type[metadata][redirectUris][0]" readonly=""><button type="button" class="button-small remove_collection_entry"><i class="fa fa-trash"></i></button></li><li class="collection-entry"><input type="text" id="dashboard_bundle_entity_type_metadata_redirectUris_1" name="dashboard_bundle_entity_type[metadata][redirectUris][1]" readonly=""><button type="button" class="button-small remove_collection_entry"><i class="fa fa-trash"></i></button></li>`;
+    let expected= `<li class=\"collection-entry\"><input type=\"text\" id=\"dashboard_bundle_entity_type_metadata_redirectUris_0\" name=\"dashboard_bundle_entity_type[metadata][redirectUris][0]\" readonly=\"\"><button type=\"button\" class=\"button-small remove_collection_entry\"><i class=\"fa fa-trash\"></i></button><button type=\"button\" class=\"button-small edit_collection_entry\"><i class=\"fa fa-pencil\"></i></button></li><li class=\"collection-entry\"><input type=\"text\" id=\"dashboard_bundle_entity_type_metadata_redirectUris_1\" name=\"dashboard_bundle_entity_type[metadata][redirectUris][1]\" readonly=\"\"><button type=\"button\" class=\"button-small remove_collection_entry\"><i class=\"fa fa-trash\"></i></button><button type=\"button\" class=\"button-small edit_collection_entry\"><i class=\"fa fa-pencil\"></i></button></li>`;
     let actual = $('.collection-list').html();
     expect(actual).toBe(expected);
   });

assets/js/components/collection_widget.ts

@@ -50,6 +50,9 @@ class CollectionWidget {
     this.$collectionList.find('.remove_collection_entry').each((_index: number, el: any) => {
       this.registerRemoveClickHandler($(el));
     });
+    this.$collectionList.find('.edit_collection_entry').each((_index: number, el: any) => {
+      this.registerEditClickHandler($(el));
+    });
 
     this.registerAddClickHandler($addEntryButton);
     this.registerBeforeSubmitHandler($addEntryButton);
@@ -72,11 +75,14 @@ class CollectionWidget {
 
     const collectionEntry = $('<li class="collection-entry"></li>');
     const $removeEntryButton = $('<button type="button" class="button-small remove_collection_entry"><i class="fa fa-trash"></i></button>');
+    const $editEntryButton = $('<button type="button" class="button-small edit_collection_entry"><i class="fa fa-pencil"></i></button>');
 
     this.registerRemoveClickHandler($removeEntryButton);
+    this.registerEditClickHandler($editEntryButton);
 
     collectionEntry.append(newElement);
     collectionEntry.append($removeEntryButton);
+    collectionEntry.append($editEntryButton);
     this.$collectionList.append(collectionEntry);
 
     this.index += 1;
@@ -91,6 +97,21 @@ class CollectionWidget {
 
     element.closest('.collection-entry').remove();
   }
+  /**
+   * Remove the collection entry from the list
+   * @param el
+   */
+  private editCollectionEntry(el: JQuery.TriggeredEvent) {
+    // First make all entries readonly once again
+    this.$collectionList.find('.edit_collection_entry').each((_index: number, el: any) => {
+      $(el).closest('.collection-entry').children('input').prop('readonly', true);
+    });
+    const element = $(el.target);
+    const target = element.closest('.collection-entry').children('input');
+    // Then make targeted element editable
+    target.removeAttr('readonly');
+
+  }
 
   /**
    * Create new collection entry with unique name
@@ -115,6 +136,13 @@ class CollectionWidget {
     $removeEntryButton.on('click', handleRemoveClick);
   }
 
+  private registerEditClickHandler($editEntryButton: JQuery<HTMLElement>) {
+    const handleRemoveClick = (el: JQuery.TriggeredEvent) => {
+      this.editCollectionEntry(el);
+    };
+      $editEntryButton.on('click', handleRemoveClick);
+  }
+
   /**
    * Add click handler to add entry
    * @param $addEntryButton

assets/scss/components/collection_widget.scss

@@ -2,7 +2,7 @@
   .collection-entry {
     box-sizing: border-box;
     width: 100%;
-    padding-right: 40px;
+    padding-right: 80px;
 
     position: relative;
 
@@ -21,10 +21,8 @@
     position: absolute;
     right: 0;
     top: 0;
-
-
     display: inline-block;
-    padding: 3px 10px;
+    padding: 3px 8px;
     text-transform: uppercase;
     background-color: white;
     color: $blue;
@@ -37,4 +35,7 @@
 
     @include no-text-decoration;
   }
+  .edit_collection_entry{
+    right: 38px;
+  }
 }

templates/form/fields.html.twig

@@ -144,6 +144,7 @@
             {%- for child in form %}
                 <li class="collection-entry">
                     {{- form_widget(child,  {'attr': {'readonly': 'readonly'}}) -}}
+                    <button type="button" class="button-small edit_collection_entry"><i class="fa fa-pencil"></i></button>
                     <button type="button" class="button-small remove_collection_entry"><i class="fa fa-trash"></i></button>
                     {{- form_errors(child) -}}
                 </li>