added old entries and confirm

app/views/admin/curations/_form.html.erb

@@ -804,28 +804,66 @@
             return m;
         } // we do not want to escape markup since we are displaying html in results			
       }
+      $(document).on('focus', '.section_type_ut select', function () {
+        $(this).data('previous', $(this).val());
+      });
       $(document).on('change', '.section_type_ut select', function(){
+        var $select = $(this);
         var parent = $(this).parents(".curation_section");
+        var previousValue = $select.data('previous');
+        if(!confirm("Are you sure? All the entries will be deleted.")){
+          $select.val(previousValue).trigger('change.select2');
+        }else{
+          $select.data('previous', $select.val());
           if($(this).val()){
             selectedUTable = $(this).val();
             parent.find(".section_type_ut_entries").show();
+            parent.find(".section_type_ut_entries").find("ul li").remove();
+            parent.find(".section_type_ut_entries").find("input.select2").val("");
             select2Options.ajax.url = "/admin/universal_tables/get_entries?uid=" + selectedUTable;
             parent.find('.section_type_ut_entries input.select2').select2(select2Options);
           }else{
             parent.find(".section_type_ut_entries").hide();
             parent.find('.section_type_ut_entries input.select2').select2('destroy');
           }
+        }
       })
       $('.select2').each(function () {
-        const data = $(this).data('value');
+        let tableid = $(this).parents(".curation_section").find(".universal_table").val()
-        if (data) {
         $(this).select2({
-            data: data,
           multiple: true,
-            width: '100%'
+            ajax: {
-          }).val(data.map(i => i.id)).trigger('change');
+            type: 'get',
+            url: "/admin/universal_tables/get_entries?uid=" + tableid,
+            allowClear: true,
+            dataType: 'json',
+            delay: 250,
+            data: function (term) {
+              var query = {
+                q: term
               }
+              return query;
+            },
+            results: function(data, page) {
+              return {
+                results: data
+              };
+            },
+            cache: true
+          },
+        })
       });
+      $(document).on("click", ".cleanup", function (){
+        let ids = [];
+        let ul = $(this).parents("ul");
+        let input = $(this).parents(".section_type_ut_entries").find("input.select2");
+        $(this).parent().remove();
+        ul.find("li").each(function(){
+          ids.push($(this).data("entry-id"));
+        })
+        input.val(ids.join(","));
+        return false;
+      }) 
       // mind map
       $(document).on('change', '.section_type_mm select.mind_map_select_ut', function(){
         var tableid = $(this).val();

app/views/admin/curations/_form_section_post.html.erb

@@ -63,12 +63,14 @@
               class: 'form-control universal_table' %>
     </span>
     <% if !form_section_post.new_record? && form_section_post.section_type == "universal_table" %>
-      <%
-        tbData = form_section_post.get_table_entries.map{|tb| {id: tb.id.to_s, text: tb.column_entries.first.text}}
-      %>
       <span class="tab-content section_type_ut_entries">
+        <ul>
+          <% form_section_post.get_table_entries.each do |entry| %>
+            <li data-entry-id="<%= entry.id.to_s %>"><%= entry.column_entries.first.text %><a class="icon-remove cleanup" ></a></li>
+          <% end %>
+        </ul>
         <span class="add-on"><%= t("curation.table_entries") %></span>
-        <%= f.text_field :table_entries, :class => "select2", data: { value: tbData } %>
+        <%= f.text_field :table_entries, :class => "select2" %>
         <%#= f.select :universal_table, [], {}, class: 'form-control select2', multiple: true, data: { value: tbData } %>
       </span>
     <% else %>