Quantities index WIP

app/views/quantities/index.html.erb

@@ -0,0 +1,110 @@
+<div class="rightside buttongrid">
+  <% if current_user.at_least(:active) %>
+    <%= image_link_to t('.new_quantity'), 'plus-outline', new_quantity_path,
+      id: dom_id(Quantity, :new, :link), onclick: 'this.blur();', data: {turbo_stream: true} %>
+  <% end %>
+  <%#= image_link_to t('.import_quantities'), 'download-outline', default_quantities_path,
+    class: 'tools' %>
+</div>
+
+<%= tag.div id: :quantity_form %>
+
+<table class="main items">
+  <thead>
+    <tr>
+      <th><%= Quantity.human_attribute_name(:name).capitalize %></th>
+      <th><%= Quantity.human_attribute_name(:description).capitalize %></th>
+      <% if current_user.at_least(:active) %>
+        <th><%= t :actions %></th>
+        <th></th>
+      <% end %>
+    </tr>
+    <%= tag.tr id: 'quantity_', hidden: true,
+               ondragover: 'dragOver(event)', ondrop: 'drop(event)',
+               ondragenter: 'dragEnter(event)', ondragleave: 'dragLeave(event)',
+               data: {drop_id: 'quantity_'} do %>
+      <th colspan="4"><%= t '.top_level_drop' %></th>
+    <% end %>
+  </thead>
+  <tbody id="quantities">
+    <%= render(@quantities) || render_no_items %>
+  </tbody>
+</table>
+
+<%= javascript_tag do %>
+  function processKey(event) {
+    if (event.key == "Escape") {
+      event.currentTarget.querySelector("a[name=cancel]").click();
+    }
+  }
+
+  var lastEnterTime;
+  function dragStart(event) {
+    lastEnterTime = event.timeStamp;
+    var row = event.currentTarget;
+    row.closest("table").querySelectorAll("thead tr").forEach((tr) => {
+      tr.toggleAttribute("hidden");
+    });
+    event.dataTransfer.setData("text/plain", row.getAttribute("data-drag-path"));
+    var rowRectangle = row.getBoundingClientRect();
+    event.dataTransfer.setDragImage(row, event.x - rowRectangle.left, event.y - rowRectangle.top);
+    event.dataTransfer.dropEffect = "move";
+  }
+
+  /*
+  * Drag tracking assumptions (based on FF 122.0 experience):
+  *   * Enter/Leave events at the same timeStamp may not be logically ordered
+  *     (e.g. E -> E -> L, not E -> L -> E),
+  *   * not every Enter event has corresponding Leave event, especially during
+  *     rapid pointer moves
+  * NOTE: sometimes Leave is not emitted when pointer goes fast over table
+  * and outside. This should probably be fixed in browser, than patched here.
+  */
+  function dragEnter(event) {
+    //console.log(event.timeStamp + " " + event.type + ": " + event.currentTarget.id);
+    dragLeave(event);
+    lastEnterTime = event.timeStamp;
+    const id = event.currentTarget.getAttribute("data-drop-id");
+    document.getElementById(id).classList.add("dropzone");
+  }
+
+  function dragOver(event) {
+    event.preventDefault();
+  }
+
+  function dragLeave(event) {
+    //console.log(event.timeStamp + " " + event.type + ": " + event.currentTarget.id);
+    // Leave has been accounted for by Enter at the same timestamp, processed earlier
+    if (event.timeStamp <= lastEnterTime) return;
+    event.currentTarget.closest("table").querySelectorAll(".dropzone").forEach((tr) => {
+      tr.classList.remove("dropzone");
+    })
+  }
+
+  function dragEnd(event) {
+    dragLeave(event);
+    event.currentTarget.closest("table").querySelectorAll("thead tr").forEach((tr) => {
+      tr.toggleAttribute("hidden");
+    });
+  }
+
+  function drop(event) {
+    event.preventDefault();
+
+    var params = new URLSearchParams();
+    var parent_id = event.currentTarget.getAttribute("data-drop-id").split("_").pop();
+    params.append("quantity[parent_id]", parent_id);
+
+    fetch(event.dataTransfer.getData("text/plain"), {
+      body: params,
+      headers: {
+        "Accept": "text/vnd.turbo-stream.html",
+        "X-CSRF-Token": document.head.querySelector("meta[name=csrf-token]").content,
+        "X-Requested-With": "XMLHttpRequest"
+      },
+      method: "POST"
+    })
+    .then(response => response.text())
+    .then(html => Turbo.renderStreamMessage(html))
+  }
+<% end %>