zuora_connect_ui 0.2.0 → 0.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: b15db5e5bc714c83a7a878100b3eafb1892e01b7
-  data.tar.gz: f51f07b1a557b601d6c74202efb7c79cf2baa762
+  metadata.gz: 7072ec4a018f4ee41485af010f04f3de1b2736fc
+  data.tar.gz: 9ef0c90e574c2691fd639b90d0e454cfc0b970c6
 SHA512:
-  metadata.gz: 9384312078e4d703880880a154f3253201dac76f9f2534784b92d4fd7fbf412e0e2741496f8ff062bd74646a82c9e6d96150d370eaca1ccf2068976e6e3d8a4c
-  data.tar.gz: 44264c4751c22a8f8af89684b2177757ebd0df46a23082902c252afc931a4b0a46780b7ba5dbd896c052e1d6d3605e17ea6663b85562b29006ca650ae820eca9
+  metadata.gz: efb0d89fc811ca6d8fff8c4a4ae61d1c706da049b4d1eac1029fa399a49a16b8a95d5c679fca9443b9b12c322f06657e41bcc68522782694464fe2c156b8396c
+  data.tar.gz: bc881df4198be5042ef5444e7064fc7ba16239952759c60d0166fd4fb30d013012cbcdcec4d75abf1af3ad95bd5e6c331d88568f4c67507ed5513692395fc4bd

data/README.md

@@ -193,6 +193,8 @@ Single Select
 
 Multiple Select
 
+**Multiple Select will not work with `include_blank: true`**
+
 ```erb
 <%= f.collection_select(:page_ids, Page.all, :id, :name, { prompt: false }, { multiple: true }) %>
 <%= f.label :page_ids, class: zuo_floating_label_class(@chapter.page_ids)%>

data/app/assets/javascripts/zuora_connect_ui.js

@@ -28,8 +28,14 @@
 //= require dataTables/extras/dataTables.colReorder
 //= require dataTables/extras/dataTables.select
 //
+// contextMenu
+//= require js/jquery.contextMenu.min.js
+//
+// IndexedDB Promise Wrapper
+//= require js/idb-keyval-iife
 //
 //= require zuora_connect_ui/app
 //= require zuora_connect_ui/datatable
 //= require zuora_connect_ui/input
+//= require zuora_connect_ui/iframe
 //

data/app/assets/javascripts/zuora_connect_ui/datatable.js

@@ -1,4 +1,329 @@
 // Datatables in tabs that aren't initially shown need columns resized on show
-$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
-    $(this.getAttribute("href")).find('table.dataTable').each(function() { $(this).dataTable().fnAdjustColumnSizing() });
+$('a[data-toggle="tab"]').on("shown.bs.tab", function(e) {
+  $(this.getAttribute("href"))
+    .find("table.dataTable")
+    .each(function() {
+      $(this)
+        .dataTable()
+        .fnAdjustColumnSizing();
+    });
 });
+
+const zStorage = (function() {
+  const stores = {};
+
+  return {
+    set(key, value, table) {
+      if (!stores.hasOwnProperty(table)) {
+        stores[table] = new idbKeyval.Store(APP_NAME, table + "_table");
+      }
+      return idbKeyval.set(key, value, stores[table]);
+    },
+
+    get(key, table) {
+      if (!stores.hasOwnProperty(table)) {
+        stores[table] = new idbKeyval.Store(APP_NAME, table + "_table");
+      }
+      return idbKeyval.get(key, stores[table]);
+    }
+  };
+})();
+
+const DEBUG = true;
+
+function getTableParams(tableName, settings, callback) {
+  const [cacheFilters, paramFilters] = settings.filters.reduce(
+    ([c, p], cur) => (cur.cache ? [[cur, ...c], p] : [c, [cur, ...p]]),
+    [[], []]
+  );
+
+  Promise.all(
+    [
+      zStorage.get("view", tableName),
+      zStorage.get("size", tableName),
+      zStorage.get("sort", tableName),
+      zStorage.get("fields", tableName)
+    ].concat(cacheFilters.map(f => zStorage.get(f.name + "_filter", tableName)))
+  ).then(v => {
+    const [view, size, sort, fields, ...savedFilters] = v;
+
+    cacheFilters.forEach((f, i) => setupFilter(tableName, f, savedFilters[i]));
+    paramFilters.forEach(f => setupFilter(tableName, f, undefined));
+
+    const visibleColumns = (fields || []).reduce(
+      (acc, cur) => (cur.vis ? acc.concat(cur.col) : acc),
+      []
+    );
+
+    const columns =
+      fields === undefined
+        ? settings.columns
+        : settings.columns
+            .map(c => {
+              const index = fields.findIndex(f => f.col === c.data);
+              return {
+                ...c,
+                visible: visibleColumns.includes(c.data),
+                sortIndex: index === -1 ? 9999 : index
+              };
+            })
+            .sort((a, b) => a.sortIndex - b.sortIndex);
+
+    callback(
+      columns,
+      view || settings.view,
+      size || settings.size,
+      (sort || settings.sort).map(([col, dir]) => {
+        const newCol = settings.columns.findIndex(c => c.data === col);
+        return [newCol > -1 ? newCol : 1, dir];
+      })
+    );
+  });
+}
+
+function setupFilter(tableName, filter, cached) {
+  switch (filter.type) {
+    case "checkbox":
+      return (cached === undefined ? filter.defaults : cached).forEach(v =>
+        $(`#${tableName}_content input[value="${v}"]`).prop("checked", true)
+      );
+    case "select":
+    case "group-select":
+      return $(`#${tableName}_content select[name="${filter.name}"]`)
+        .val(cached === undefined ? filter.defaults : cached)
+        .trigger("change");
+    // Is boolean used by any apps?
+    case "boolean":
+      return $(`#${tableName}_content input[name="${filter.name}"]`).prop(
+        "checked",
+        cached === undefined ? filter.defaults : cached
+      );
+  }
+}
+
+function initTable(api, tableName, settings, columns, tableFilters) {
+  initViewMode(api, tableName, settings.view);
+  initTableSize(api, tableName, settings.size);
+  initSortEvent(api, tableName);
+  initSearch(api, tableName);
+  initTableSelection(api, tableName);
+  initColumnEvents(api, tableName, columns);
+  initTableFilters(api, tableName, tableFilters);
+
+  $(`#${tableName}_content .table_refresh`).on("click", function(e) {
+    if (
+      $(`#${tableName}_content`).is(":visible") &&
+      !$(this).hasClass("zc-spin")
+    ) {
+      api.draw(false);
+    }
+  });
+}
+
+function initViewMode(api, tableName, mode) {
+  $(`#${tableName}_view_${mode}`).addClass("active");
+
+  const viewModeSelectors = `#${tableName}_view_table, #${tableName}_view_grid`;
+  $(viewModeSelectors).on("click", function(e) {
+    if ($(this).hasClass("active")) return;
+
+    $(viewModeSelectors).toggleClass("active");
+    zStorage.set("view", e.currentTarget.id.split("_")[2], tableName);
+    api
+      .draw(false)
+      .rows()
+      .deselect();
+  });
+}
+
+function getTableViewMode(tableName, fallback) {
+  if ($(`#${tableName}_view_table`).hasClass("active")) return "table";
+  else if ($(`#${tableName}_view_grid`).hasClass("active")) return "grid";
+  else return fallback;
+}
+
+function initTableSize(api, tableName, size) {
+  $("<select>", { id: "table_size", name: "table_size" }) // TODO: Not sure if this needs to be named
+    .appendTo(`#${tableName}_select_container`)
+    .append([10, 25, 50, 100].map(v => `<option value="${v}">${v}</option>`))
+    .val(size)
+    .select2({
+      minimumResultsForSearch: Infinity,
+      dropdownAutoWidth: true,
+      width: "100%"
+    })
+    .on("change", function(e) {
+      api.page.len(+$(this).val()).draw(false);
+      zStorage.set("size", +$(this).val(), tableName);
+    });
+}
+
+function initSortEvent(api, tableName) {
+  api.on("order.dt", function(e) {
+    zStorage.set(
+      "sort",
+      api.order().map(([col, dir]) => [api.column(col).dataSrc(), dir]),
+      tableName
+    );
+  });
+}
+
+function initSearch(api, tableName) {
+  $(`#${tableName}_search_btn`).on("click", () => {
+    $(`#${tableName}_search_wrapper`).toggleClass("active");
+    $(`#${tableName}_search`).focus();
+  });
+
+  let timer;
+  $(`#${tableName}_content input[name="table[search]"]`).keydown(function() {
+    clearTimeout(timer);
+    if ($(this).val()) {
+      timer = setTimeout(function() {
+        api.draw();
+      }, 700);
+    }
+  });
+}
+
+function initTableSelection(api, tableName) {
+  $(`#${tableName}_select_all`).on("click", function(e) {
+    $(this)
+      .find("span")
+      .hasClass("z-icon-addition")
+      ? api.rows().select()
+      : api.rows().deselect();
+  });
+
+  api.on("select.dt deselect.dt", function(e, dt, type, indexes) {
+    const count = dt.rows({ selected: true }).count();
+    $(`#${tableName}_group_actions`).toggleClass("hidden", count == 0);
+    $(`#${tableName}_select_all span`)
+      .toggleClass("z-icon-addition", count !== dt.rows().count())
+      .toggleClass("z-icon-subtraction", count === dt.rows().count());
+    if (DEBUG) {
+      console.log(e.type === "select" ? "Selected" : "Deselected");
+      console.log(dt.rows(indexes).data());
+    }
+  });
+}
+
+function initColumnEvents(api, tableName, columns) {
+  let dropdownReorder = false;
+
+  $(`#${tableName}_visibility_menu`)
+    .html(
+      columns.map((c, i) =>
+        $("<li>", { "data-key": c.data, class: "checkbox-row" }).append(
+          $("<div>", { class: "checkbox checkbox-primary" }).append(
+            $("<input>", {
+              type: "checkbox",
+              name: `${tableName}[table_column_vis][]`,
+              checked: !c.hasOwnProperty("visible") || c.visible,
+              value: i
+            }).on("change", function(e) {
+              index = api.colReorder.transpose(+$(this).val(), "toCurrent");
+              api.column(index).visible($(this).is(":checked"));
+              resize_iframe();
+              saveColumns();
+            }),
+            $("<label>").html(
+              (c.class || "").includes("actions") ? "Actions" : c.title
+            )
+          ),
+          $('<span class="icon z-icon-hamburger"></span>')
+        )
+      )
+    )
+    .sortable({ axis: "y" })
+    .on("sortstop", function(event, ui) {
+      if (DEBUG) console.log(`Sort Stop Trigger ${tableName}`);
+      dropdownReorder = true;
+
+      api.colReorder.order(
+        $(`#${tableName}_visibility_menu li input`)
+          .get()
+          .map(v => api.colReorder.transpose(+$(v).val(), "toCurrent"))
+      );
+    });
+
+  api.on("column-reorder", function(e, settings, details) {
+    if (DEBUG) console.log(`Ordering Trigger ${tableName}`, details);
+    saveColumns();
+
+    if (dropdownReorder) return (dropdownReorder = false);
+    if (DEBUG) console.log(`Ordering Trigger Rebuild DropDown ${tableName}`);
+
+    const orderedItems = api
+      .columns()
+      .dataSrc()
+      .toArray()
+      .map(v => $(`#${tableName}_visibility_menu li[data-key="${v}"]`));
+    $(`#${tableName}_visibility_menu`).html(orderedItems);
+  });
+
+  function saveColumns() {
+    if (DEBUG) console.log(`Save Fields ${tableName}`);
+
+    const fields = api
+      .columns()
+      .indexes()
+      .toArray()
+      .map(i => ({
+        col: api.column(i).dataSrc(),
+        vis: api.column(i).visible()
+      }));
+
+    zStorage.set("fields", fields, tableName);
+  }
+}
+
+function initTableFilters(api, tableName, tableFilters) {
+  tableFilters.forEach(filter => {
+    const cache = filter.hasOwnProperty("cache") && filter.cache;
+
+    switch (filter.type) {
+      case "checkbox":
+        return checkboxFilter(api, cache, filter);
+      case "select":
+      case "group-select":
+        return selectFilter(api, cache, filter);
+      case "boolean":
+        return booleanFilter(api, cache, filter);
+    }
+  });
+
+  function checkboxFilter(api, cache, filter) {
+    const checkboxDebounceDraw = debounce(() => {
+      const f = $(
+        `#${tableName}_content input[name="${filter.name}[]"]:checked`
+      )
+        .map((_, el) => $(el).val())
+        .get();
+      if (cache) zStorage.set(filter.name + "_filter", f, tableName);
+      api.draw();
+    }, 750);
+
+    $(`#${tableName}_content input[name="${filter.name}[]"]`).on(
+      "click",
+      checkboxDebounceDraw
+    );
+  }
+
+  function selectFilter(api, cache, filter) {
+    $(`#${tableName}_content select[name="${filter.name}"]`).change(function() {
+      const f = $(this).val();
+      if (cache) zStorage.set(filter.name + "_filter", f, tableName);
+      api.draw();
+    });
+  }
+
+  function booleanFilter(api, cache, filter) {
+    $(`#${tableName}_content input[name="${filter.name}"]`).change(function() {
+      const f = $(
+        `#${tableName}_content input[name="${filter.name}"]:checked`
+      ).val();
+      if (cache) zStorage.set(filter.name + "_filter", f, tableName);
+      api.draw();
+    });
+  }
+}

data/app/assets/javascripts/zuora_connect_ui/iframe.js

@@ -0,0 +1,41 @@
+$(document).on("hidden.bs.modal shown.bs.modal shown.bs.tab", resize_iframe);
+
+let height_prev;
+function resize_iframe() {
+  var height = 0;
+  if ($(".modal-dialog").height() + 100 > $("body").height()) {
+    height = $(".modal-dialog").height() + 100;
+  } else if (
+    $(".dropdown-menu.table_visiblity.ui-sortable:visible").height() + 150 >
+    $("body").height()
+  ) {
+    height =
+      $(".dropdown-menu.table_visiblity.ui-sortable:visible").height() + 150;
+  } else if ($("#canvas").is(":visible")) {
+    var canvas_height =
+      window.innerHeight -
+      ($("#breadcrumbs").height() + $(".green-header").height() + 20);
+    $("#canvas").css("height", "500px");
+    height = $("body").height();
+  } else if ($("#canvas-swimlane").is(":visible")) {
+    $("#canvas-swimlane").css("height", "300px");
+    height = $("body").height() + $("#task_data").height() - 160;
+  } else {
+    height = $("body").height() + 25;
+  }
+  if (height_prev != height) {
+    window.parent.postMessage({ func: "resizeIframe", height: height }, "*");
+  }
+  height_prev = height;
+}
+
+// Function to be called from iframe
+function receiveMessage(event) {
+  if (event.origin !== window.location.origin) return;
+  var data = event.data;
+  if (typeof window[data.func] == "function") {
+    window[data.func].call(null, data.type, data.url);
+  } else {
+    console.log("Function not found: " + data.func);
+  }
+}

data/app/assets/javascripts/zuora_connect_ui/input.js

@@ -1,9 +1,10 @@
 // 'Polyfill' for :placeholder-shown, since it's not standard yet
 
 $(document).on('focus focusout', '.zuo-textbox', function(e) {
-    $("label[for='" + $(this).attr('id') + "']").toggleClass('floating', $(this).val() !== "");
+  $("label[for='" + $(this).attr('id') + "']").toggleClass('floating', $(this).val() !== "");
 });
 
 $(document).on('change.select2', 'select', function(e) {
-    $("label[for='" + $(this).attr('id') + "']").toggleClass('floating', $(this).val() !== "");
+  console.log($(this).val());
+  $("label[for='" + $(this).attr('id') + "']").toggleClass('floating', !['', null].includes($(this).val()));
 });

data/app/assets/stylesheets/_zuora_connect_ui.scss

@@ -113,6 +113,9 @@ $check-icon: "\E936";
 // Bootstrap Datepicker
 @import "bootstrap-datepicker";
 
+// contextMenu
+@import "css/jquery.contextMenu.min.scss";
+
 // Glyphicon and FA
 @import "css/icons.scss";
 

data/app/assets/stylesheets/zuora_connect_ui/base.scss

@@ -95,7 +95,7 @@ select {
 
 .dropdown-menu {
   min-width: 164px;
-  padding: 6px 0;
+  padding: .5rem 0;
   box-shadow: 0 1px 8px -1px $neutral-shadow;
   border-radius: 0;
   font-size: 0.875rem;
@@ -115,6 +115,10 @@ select {
   // }
 
   > li {
+    &.checkbox-row {
+      padding: 0px 15px;
+      margin: 10px 0px;
+    }
     &.divider {
       margin: 0.5rem;
     }