kaui 0.16.2 → 1.0.0

data/app/views/kaui/admin_tenants/_form_plugin_config.erb

@@ -9,16 +9,32 @@
 
       <%= form_tag({:action => :upload_plugin_config}, :method => 'post', :multipart => true, :class => 'form-horizontal') do %>
           <%= hidden_field_tag(:id, @tenant.id) %>
+          <%= hidden_field_tag(:plugin_name) %>
+          <%= hidden_field_tag(:plugin_key) %>
+          <%= hidden_field_tag(:plugin_type) %>
 
-          <div class="form-group">
-            <%= label_tag :plugin_name, 'Plugin name', :class => 'col-sm-2 control-label' %>
+          <input type="hidden" id="plugin_repository" value="<%= plugin_repository.to_json %>" >
+
+          <div id="plugin" class="form-group">
+            <%= label_tag :entered_plugin_name, 'Plugin name', :class => 'col-sm-2 control-label' %>
             <div class="col-sm-4">
-              <%= text_field_tag :plugin_name, nil, :class => 'form-control', :plugin_config => @plugin_config, :tenant_plugin_config => @tenant_plugin_config %>
+              <select class="form-control" id="select_plugin_name"></select>
+              <%= text_field_tag :entered_plugin_name, nil, :class => 'form-control', :plugin_config => @plugin_config, :tenant_plugin_config => @tenant_plugin_config %>
+              <div class="text plugin-suggestion text-danger"></div>
             </div>
+            <label class="col-sm-1 toggle-container control-label">
+              <label class="switch">
+                <input id="toggle_input" type="checkbox">
+                <span class="slider round"></span>
+              </label>
+            </label>
+            <label class="col-sm-3 control-label toggle-label text-muted">or toggle plugin name input</label>
           </div>
+
           <!-- Anchor DIV that gets thrown away when switching plugins -->
-          <div id="plugin_config_properties" , plugin_name="" , class="col-sm-10">
+          <div id="plugin_config_properties" plugin_name="" class="col-sm-10">
           </div>
+
           <div class="form-group">
             <div class="col-sm-offset-2 col-sm-10">
               <%= submit_tag 'Upload', :class => 'btn btn-default' %>
@@ -28,172 +44,262 @@
     </div>
 <% end %>
 
+<script id="plugin_config_properties_template" type="text/template">
+  {{#plugin_props_with_values}}
+  <div class="form-group">
+    <label class="col-sm-2 control-label" for="{{property}}">{{property_label}}</label>
+    <div class="col-sm-4">
+      {{#is_raw_config}}
+        <textarea name="plugin_properties[raw_config]" id="raw_config" rows="10" class="form-control">{{value}}</textarea>
+      {{/is_raw_config}}
+      {{^is_raw_config}}
+        <input type="text" name="plugin_properties[{{property}}]" id="{{property}}" class="form-control" value="{{value}}" />
+      {{/is_raw_config}}
+    </div>
+  </div>
+  {{/plugin_props_with_values}}
+</script>
+
+<script id="plugin_name_options_template" type="text/template">
+  <option></option>
+  {{#plugin_repository}}
+    {{#start_installed}}<optgroup label="Installed">{{/start_installed}}
+    {{#end_installed}}</optgroup>>{{/end_installed}}
+    <option value="{{plugin_name}}" data-plugin-type="{{plugin_type}}" >
+      {{plugin_key}}
+    </option>
+  {{/plugin_repository}}
+</script>
+
 <%= javascript_tag do %>
+    $(document).ready(function() {
+
+        $('#entered_plugin_name').toggle();
+        $('#toggle_input').on('change', function() {
+            $('#select_plugin_name').toggle();
+            $('#entered_plugin_name').toggle();
+            $('.toggle-label').toggleClass('text-muted');
+            $("#plugin_name").val('');
+            $("#plugin_key").val('');
+            $("#plugin_type").val('');
+            $('#entered_plugin_name').val('');
+            $('#select_plugin_name').val('');
+            $('#plugin_config_properties').attr('plugin_name', '');
+            $('#plugin_config_properties').empty();
 
-function get_existing_tenant_plugin_properties(plugin_name) {
-
-    var tenant_plugin_properties = $('#plugin_name').attr('tenant_plugin_config');
-    var res = {}
-    if (tenant_plugin_properties != undefined) {
-        $.each(tenant_plugin_properties.split(';'), function(idx, el) {
-            var el_parts = el.split('::');
-            var el_plugin_name = el_parts[0];
-            var el_props = el_parts[1];
-            if (el_plugin_name == plugin_name) {
-                if (el_props.split('=')[0] == 'raw_config') {
-                    res['raw_config'] = el_props.substr(11);
-                } else {
-                    $.map(el_props.split(','), function(el) {
-                        var parts = el.split('=');
-                        res[parts[0]] = parts[1];
-                    });
-                }
-                return false;
+        });
+
+        $('#select_plugin_name').on('click', function(e) {
+            if (e.target.localName == 'option') {
+                var plugin_name = e.target.value;
+                var plugin_key = e.target.text;
+                $("#plugin_name").val(plugin_name);
+                $("#plugin_key").val(plugin_key);
+                $("#plugin_type").val(e.target.dataset['pluginType']);
+                $('#plugin_config_properties').attr('plugin_name', '');
+
+                add_properties_for_plugin(plugin_key, plugin_name);
             }
         });
-    }
-    return res;
-}
-
-function get_selected_plugin_info() {
-    var plugin_name = $('#plugin_name').val();
-    var plugin_config_str = $('#plugin_name').attr('plugin_config');
-
-    var res = {}
-    /* Deserialize plugin/properties (see AdminTenant model)*/
-    $.each(plugin_config_str.split(';'), function(idx, el) {
-        var el_parts = el.split(':');
-        var el_parts_key = el_parts[0].split('#');
-        var el_plugin_name = el_parts_key[0];
-        var el_plugin_type = el_parts_key[1];
-        var el_plugin_props = el_parts[1];
-        if (el_plugin_name == plugin_name) {
-            res['type'] = el_plugin_type;
-            res['props'] = el_plugin_props == "" ? [] : (el_plugin_type == "" ? ['raw_config'] : el_plugin_props.split(','));
-            return false;
+
+        populate_plugin_name_options();
+        function populate_plugin_name_options(){
+            var plugin_repository = JSON.parse($("#plugin_repository").val());
+            for(var idx = 0, size = plugin_repository.length; idx < size; idx++) {
+                if (idx == 0 && plugin_repository[idx].installed) {
+                    plugin_repository[idx]['start_installed'] = true;
+                }
+
+                if (idx > 0 && !plugin_repository[idx].installed && plugin_repository[idx - 1].installed) {
+                    plugin_repository[idx]['end_installed'] = true;
+                    break;
+                }
+            }
+
+            var template = $("#plugin_name_options_template").html();
+            var options_html = Mustache.render( template , { plugin_repository: plugin_repository});
+            $("#select_plugin_name").html(options_html);
+        }
+
+        function get_existing_tenant_plugin_properties(entered_plugin_name) {
+            var tenant_plugin_properties = $('#entered_plugin_name').attr('tenant_plugin_config');
+            var res = {}
+            if (tenant_plugin_properties != undefined) {
+                $.each(tenant_plugin_properties.split(';'), function(idx, el) {
+                    var el_parts = el.split('::');
+                    var el_plugin_name = el_parts[0];
+                    var el_props = el_parts[1];
+                    if (el_plugin_name === entered_plugin_name) {
+                        if (el_props.split('=')[0] == 'raw_config') {
+                            res['raw_config'] = el_props.substr(11);
+                        } else {
+                            $.map(el_props.split('|'), function(el) {
+                                var parts = el.split('=');
+                                res[parts[0]] = parts[1];
+                            });
+                        }
+                        return false;
+                    }
+                });
+            }
+            return res;
+        }
+
+        function get_selected_plugin_info(plugin_index) {
+            var plugin_config_str = $('#entered_plugin_name').attr('plugin_config');
+            var res = {}
+            /* Deserialize plugin/properties (see AdminTenant model)*/
+            $.each(plugin_config_str.split(';'), function(idx, el) {
+                var el_parts = el.split(':');
+                var el_parts_key = el_parts[0].split('#');
+                var el_plugin_name = el_parts_key[0];
+                var el_plugin_type = el_parts_key[1];
+                var el_plugin_props = el_parts[1];
+                if (el_plugin_name == plugin_index) {
+                    res['type'] = el_plugin_type;
+                    res['props'] = el_plugin_props == "" ? [] : (el_plugin_type == "" ? ['raw_config'] : el_plugin_props.split(','));
+                    return false;
+                }
+            });
+
+            if (res['props'] == undefined) {
+                res['type'] = '';
+                res['props'] = ['raw_config'];
+            }
+
+            return res;
         }
-    });
 
-    if (res['props'] == undefined) {
-        res['type'] = '';
-        res['props'] = ['raw_config'];
-    }
+        function add_properties_for_plugin(plugin_key, plugin_name) {
+            console.log(plugin_key, plugin_name);
+            var plugin_info = get_selected_plugin_info(plugin_key);
+
+            if (isBlank(plugin_name)) {
+                $('#plugin_config_properties').empty();
+                $('#plugin_config_properties').attr('plugin_name', '');
+                return;
+            }
+
+            if ($('#plugin_config_properties').attr('plugin_name') == plugin_name) {
+                /* Already set...*/
+                return;
+            }
 
-    return res;
-}
+            /* Retrieve existing plugin properties for this tenant */
+            var existing_props = get_existing_tenant_plugin_properties(plugin_key);
+
+            var type = plugin_info['type'];
+            var props = plugin_info['props']
+
+            $('#plugin_type').val(type);
+            /* Prune the tree to restart from scratch */
+            $('#plugin_config_properties').empty();
+            $('#plugin_config_properties').append('<label class="col-sm-2 control-label" for="plugin_name">Plugin Properties</label>');
+            $('#plugin_config_properties').append('<div id="plugin_config_properties_anchor" class="col-sm-offset-2 col-sm-10">');
+
+            var merged_props_with_values = existing_props;
+            if (props != undefined) {
+                $.each(props, function(idx, p) {
+                    if (merged_props_with_values[p] == undefined) {
+                       merged_props_with_values[p] = '';
+                    }
+                });
+            }
 
-function init_plugin_config_source() {
-    var plugin_config_str = $('#plugin_name').attr('plugin_config');
-    var res = []
-    $.map(plugin_config_str.split(";"), function(el) { res.push(el.split(':')[0].split('#')[0]) });
-    return res;
-}
+            add_property_form_entry(merged_props_with_values);
 
-function add_properties_for_plugin(plugin_name, plugin_info) {
+            $('#plugin_config_properties').attr('plugin_name', plugin_name);
+        }
 
-    if (plugin_name == "") {
-        $('#plugin_config_properties').empty();
-        return;
-    }
+        function format_label(input) {
+            /* Keep latest piece of a system property to keep it short */
+            var label_name = input.split('.').pop();
+            /* Replace underscore with comma */
+            label_name = label_name.replace(/_/g, ',');
+            /* Replace uppercase with comma + uppercase */
+            label_name = label_name.replace(/([A-Z]+)/g, ",$1");
+            /* Split name make sure each word starts with Uppercase */
+            var tmp1 = label_name.split(',');
+            var label_name_array = [];
+            $.map(tmp1, function(el) { label_name_array.push(el.charAt(0).toUpperCase() + el.slice(1)) });
+            label_name = label_name_array.join(' ');
+            return label_name;
+        }
 
-    if ($('#plugin_config_properties').attr('plugin_name') == plugin_name) {
-        /* Already set...*/
-        return;
-    }
+        function add_property_form_entry(merged_props_with_values) {
+            var plugin_props_with_values = [];
 
-    var type = plugin_info['type'];
-    var props = plugin_info['props']
+            $.each(merged_props_with_values, function(p, v) {
+                plugin_props_with_values.push({ property_label: format_label(p), property: p, value: v, is_raw_config: p == 'raw_config'});
+            });
 
-    /* Prune the tree to restart from scratch */
-    $('#plugin_config_properties').empty();
+            var template = $("#plugin_config_properties_template").html();
+            var plugin_props_with_values_html = Mustache.render( template , { plugin_props_with_values: plugin_props_with_values});
+            $("#plugin_config_properties_anchor").html(plugin_props_with_values_html);
+        }
 
-    $('#plugin_config_properties').append('<input type="hidden" name="plugin_type" id="plugin_type" value="' + type + '" />');
-    $('#plugin_config_properties').append('<label class="col-sm-2 control-label" for="plugin_name">Plugin Properties</label>');
-    $('#plugin_config_properties').append('<div id="plugin_config_properties_anchor" class="col-sm-offset-2 col-sm-10">');
+        // Free text related functions and handlers
+        init_plugin_name_handlers();
+        function init_plugin_name_handlers() {
+            /* Intercept ENTER and potentially display property form if plugin is know */
+            $('#entered_plugin_name').keyup(function (e) {
+                e.preventDefault();
+                if (e.keyCode === 13) {
+                    suggest_plugin_name();
+                }
+            });
 
-    /* Retrieve existing plugin properties for this tenant */
-    var existing_props = get_existing_tenant_plugin_properties(plugin_name);
+            /* Intercept mouseleave and potentially display property form if plugin is know */
+            $('#entered_plugin_name').on('mouseleave', function() {
+                suggest_plugin_name();
+            });
+        }
 
-    var merged_props_with_values = existing_props;
-    if (props != undefined) {
-        $.each(props, function(idx, p) {
-            if (merged_props_with_values[p] == undefined) {
-               merged_props_with_values[p] = '';
+        function suggested_response(response) {
+            if (!isBlank(response.suggestion)) {
+                $(".plugin-suggestion").html(response.suggestion);
+
+                $("#suggested").click(function(e) {
+                    var plugin_name = e.currentTarget.dataset['pluginName'];
+                    var plugin_key = e.currentTarget.dataset['pluginKey'];
+
+                    $("#entered_plugin_name").val(plugin_name);
+                    $("#plugin_key").val(plugin_key);
+                    $("#plugin_type").val(e.currentTarget.dataset['pluginType']);
+
+                    $(".plugin-suggestion").html('');
+                    add_properties_for_plugin(isBlank(plugin_key) ? plugin_name : plugin_key, plugin_name);
+                });
+
+            } else {
+                $(".plugin-suggestion").html('');
             }
-        });
-    }
-
-    $.each(merged_props_with_values, function(p, v) {
-        add_property_form_entry(format_label(p), p, v);
-    });
-
-    $('#plugin_config_properties').attr('plugin_name', plugin_name);
-}
-
-function format_label(input) {
-    /* Keep latest piece of a system property to keep it short */
-    var label_name = input.split('.').pop();
-    /* Replace underscore with comma */
-    label_name = label_name.replace(/_/g, ',');
-    /* Replace uppercase with comma + uppercase */
-    label_name = label_name.replace(/([A-Z]+)/g, ",$1");
-    /* Split name make sure each word starts with Uppercase */
-    var tmp1 = label_name.split(',');
-    var label_name_array = [];
-    $.map(tmp1, function(el) { label_name_array.push(el.charAt(0).toUpperCase() + el.slice(1)) });
-    label_name = label_name_array.join(' ');
-    return label_name;
-}
-
-function add_property_form_entry(property_label, property, current_value) {
-
-    var clone = $('#PluginConfig form div').first().clone();
-    clone.children("label").attr('for', property).text(property_label);
-    clone.children("div").first().attr("name", property).attr("id", property);
-    var input = clone.children("div").children("input").first();
-    input.removeAttr('autocomplete').removeAttr('plugin_config');
-    if (property == 'raw_config') {
-       var text_area = $('<textarea name="plugin_properties[raw_config]" id="raw_config" rows="10" class="form-control">');
-       input.replaceWith(text_area);
-       text_area.attr("name", "plugin_properties[" + property + "]")
-         .attr("id", property)
-         .attr('class', 'form-control')
-         .val(current_value);
-
-       input.replaceWith('<textarea name="plugin_properties[raw_config]" id="raw_config" rows="10" class="form-control">').text(current_value);
-    } else {
-        input.attr("name", "plugin_properties[" + property + "]")
-         .attr("id", property)
-         .attr('class', 'form-control')
-         .val(current_value);
-   }
-
-    /* Attach clone object  */
-    $('#plugin_config_properties_anchor').append(clone);
-
-}
-
-
-function init_plugin_name_handlers() {
-    /* Intercept ENTER and potentially display property form if plugin is know */
-    $('#plugin_name').keyup(function (e) {
-        if (e.keyCode === 13) {
-        add_properties_for_plugin($('#plugin_name').val(), get_selected_plugin_info());
+
+            var plugin_name = $('#entered_plugin_name').val();
+            var plugin_key = $("#plugin_key").val();
+            $("#plugin_name").val(plugin_name);
+
+            add_properties_for_plugin(isBlank(plugin_key) ? plugin_name : plugin_key, plugin_name);
         }
-    });
 
-    /* Intercept mouseleave and potentially display property form if plugin is know */
-    $('#plugin_name').on('mouseleave', function() {
-        add_properties_for_plugin($('#plugin_name').val(), get_selected_plugin_info());
-    });
+        function suggest_plugin_name() {
+            var plugin_name = $("#entered_plugin_name").val();
+            $("#plugin_key").val(plugin_name);
 
-    /* Attach auto-completion source */
-    $('#plugin_name').autocomplete({
-    source: init_plugin_config_source()
-    });
-}
+            if (isBlank(plugin_name)) {
+                return;
+            }
+
+            $.ajax({
+                url: '<%= suggest_plugin_name_path() %>',
+                type: "GET",
+                dataType: "json",
+                data: {
+                    "plugin_name": plugin_name,
+                },
+                success: suggested_response
+            });
+        }
 
-$(document).ready(function() {
-    init_plugin_name_handlers();
 });
-<% end %>
+<% end %>

data/app/views/kaui/admin_tenants/_show_catalog_simple.erb

@@ -19,7 +19,7 @@
         <b>Catalog Versions:</b>
     </span>
     <select id="select_catalog" class="selectpicker show-menu-arrow">
-      <% @catalogs.each_with_index do |catalog, i| %>
+      <% @catalog_versions.reverse_each do |catalog, i| %>
           <option idx="<%= catalog[:version] %>"><%= catalog[:version_date] %></option>
       <% end %>
     </select>
@@ -30,70 +30,155 @@
       <th>Product</th>
       <th>Category</th>
       <th>Billing Period</th>
-      <% @catalogs.each do |catalog| %>
-          <th class="catalog_version_<%= catalog[:version] %>">
-            <select id="select_currencies_<%= catalog[:version] %>" class="selectpicker show-menu-arrow">
-              <% catalog[:currencies].each_with_index do |currency, i| %>
-                  <option><%= currency %></option>
-              <% end %>
-            </select>
-          </th>
-      <% end %>
+      <th id="currency_select"></th>
       <th>Trial</th>
       <th></th>
     </tr>
     </thead>
-    <tbody>
-    <% @catalogs.each do |catalog| %>
-        <% catalog[:plans].each do |p| %>
-            <tr class="catalog_version_<%= catalog[:version] %>">
-              <td><%= p.plan_id %></td>
-              <td><%= humanized_product_name(p.product_name) %></td>
-              <td><%= humanized_product_category(p.product_category) %></td>
-              <td><%= humanized_billing_period(p.billing_period) %></td>
-              <td>
-                <% catalog[:currencies].each do |c| %>
-                    <span class="plan_currency_<%= c %>"><%= p.prices[c] %></span>
-                <% end %>
-              </td>
-              <td><%= p.trial_length != 0 ? "#{p.trial_length} #{humanized_time_unit(p.trial_time_unit)}" : "N/A" %></td>
-              <td><%= link_to '<i class="fa fa-plus-square"></i>'.html_safe + " currency", kaui_engine.admin_tenant_new_plan_currency_path(:id => @tenant.id, :plan_id => p.plan_id),
-                      :class => 'btn btn-xs' %></td>
-            </tr>
-        <% end %>
-    <% end %>
+    <tbody id="catalog_detail">
+
     </tbody>
   </table>
 </div>
 
+<script id="currencies_template" type="text/template">
+  {{#catalog}}
+    <select id="select_currencies" class="selectpicker show-menu-arrow">
+      {{#currencies}}
+          <option>{{.}}</option>
+      {{/currencies}}
+    </select>
+  {{/catalog}}
+</script>
+
+<script id="selected_catalog_template" type="text/template" >
+    {{#catalog}}
+      {{#plans}}
+        <tr class="selected_catalog">
+          <td>{{plan_id}}</td>
+          <td>{{#humanized_product_name}}{{product_name}}{{/humanized_product_name}}</td>
+          <td>{{#humanized_product_category}}{{product_category}}{{/humanized_product_category}}</td>
+          <td>{{#humanized_billing_period}}{{billing_period}}{{/humanized_billing_period}}</td>
+          <td>
+            {{#currenciesWithPrices}}
+                <span class="plan_currency_{{currency}}">{{price}}</span>
+            {{/currenciesWithPrices}}
+          </td>
+          <td>
+            {{#trial_length}} {{trial_length}} {{#humanized_time_unit}}{{trial_time_unit}}{{/humanized_time_unit}} {{/trial_length}}
+            {{^trial_length}} N/A {{/trial_length}}
+          </td>
+          <td><a class="btn btn-xs"
+                 href="{{new_plan_currency_path}}"><i class="fa fa-plus-square"></i> currency</a></td>
+        </tr>
+      {{/plans}}
+    {{/catalog}}
+</script>
 
 <%= javascript_tag do %>
+    window.onload = function() {
+        fetchCatalog('<%= @latest_version %>');
+    };
 
-function initBasicConfig() {
-    displayCatalogVersion();
-    displayAmountsForCurrency();
-}
+    function renderCurrencySelect(data) {
+        var template = $("#currencies_template").html();
+        var currencies_html = Mustache.render(template,data);
+        $("#currency_select").html(currencies_html);
+    }
 
-function displayCatalogVersion() {
-    $('[class^="catalog_version_"]').hide();
-    $("[class^=catalog_version_" + $("#select_catalog option:selected" ).attr("idx") + "]").show();
-}
+    function renderCatalog(data){
+        for (var i = 0; i < data.catalog.length; i++) {
+            var current = data.catalog[i];
+            for (var j = 0; j < current.plans.length; j++) {
+                var plan = current.plans[j];
+                plan['currenciesWithPrices'] = [];
+                for (var currency in plan['prices']) {
+                    plan['currenciesWithPrices'].push({currency: currency, price: plan['prices'][currency]});
+                }
+                plan['new_plan_currency_path'] = Routes.kaui_engine_admin_tenant_new_plan_currency_path(<%= @tenant.id %>, {plan_id: plan['plan_id']});
+                plan['humanized_product_name'] = function(){
+                    return function (input, render) {
+                        var product_name = render(input);
+                        return product_name.toLowerCase().replace(/\b\w/g, function(l){ return l.toUpperCase() });
+                    }
+                }
 
-function displayAmountsForCurrency() {
-    var catalogVersion = $("#select_catalog option:selected" ).attr("idx");
-    $('[class^="plan_currency_"]').hide();
-    $("[class^=plan_currency_" + $("#select_currencies_" + catalogVersion + " option:selected" ).text() + "]").show();
-}
+                plan['humanized_product_category'] = function(){
+                    return function (input, render) {
+                        var product_category = render(input);
+                        if (product_category == 'BASE') {
+                            return 'Base'
+                        } else if (product_category == 'ADD_ON') {
+                            return 'Add-on'
+                        } else {
+                            return product_category.toLowerCase().replace(/\b\w/g, function(l){ return l.toUpperCase() });
+                        }
+                    }
+                }
 
-$(document).ready(function() {
+                plan['humanized_billing_period'] = function(){
+                    return function (input, render) {
+                        var billing_period = render(input);
+                        if (billing_period == 'NO_BILLING_PERIOD') {
+                            return 'No billing period'
+                        } else {
+                            return billing_period.toLowerCase().replace(/\b\w/g, function(l){ return l.toUpperCase() });
+                        }
+                    }
+                }
 
-    $("#select_catalog").change(function() {
-        displayCatalogVersion();
-    });
+                plan['humanized_time_unit'] = function(){
+                    return function (input, render) {
+                        var time_unit = render(input);
+                        return time_unit.toLowerCase().replace(/\b\w/g, function(l){ return l.toUpperCase() });
+                    }
+                }
+            }
+        }
+        var template = $("#selected_catalog_template").html();
+        var catalog_html = Mustache.render(template,data);
+        $("#catalog_detail").html(catalog_html);
+        displayAmountsForCurrency();
+    }
 
-    $('[id^="select_currencies"]').change(function() {
+    function initBasicConfig() {
         displayAmountsForCurrency();
+    }
+
+    function displayAmountsForCurrency() {
+        $('[class^="plan_currency_"]').hide();
+        $("[class^=plan_currency_" + $("#select_currencies option:selected" ).text() + "]").show();
+    }
+
+    function fetchCatalog(effectiveDate) {
+        if (effectiveDate == '')
+            return;
+        
+        $.ajax(
+        {
+            url: Routes.kaui_engine_catalog_by_effective_date_path(),
+            type: "GET",
+            dataType: "json",
+            data: {
+                id: <%= @tenant.id %>,
+                effective_date: effectiveDate
+            },
+            success: function(data) {
+                renderCurrencySelect(data);
+                renderCatalog(data);
+            }
+        });
+    }
+
+    $(document).ready(function() {
+
+        $("#select_catalog").change(function() {
+            fetchCatalog(this.value);
+        });
+
+        $('[id^="select_currencies"]').change(function() {
+            displayAmountsForCurrency();
+        });
     });
-});
 <% end %>