Makes MultiSelect draggable (#161)

Co-authored-by: Jonatan Kłosko <[email protected]>

lib/assets/data_transform_cell/main.css

@@ -991,3 +991,11 @@ select option {
 select.input.tag-input:disabled {
   display: none;
 }
+
+.dndrop-container.horizontal > .dndrop-draggable-wrapper {
+  height: auto;
+}
+
+.dndrop-container.horizontal {
+  display: flex;
+}

lib/assets/data_transform_cell/main.js

@@ -222,6 +222,11 @@ export async function init(ctx, payload) {
   const BaseMultiTagSelect = {
     name: "BaseMultiTagSelect",
 
+    components: {
+      Container: VueDndrop.Container,
+      Draggable: VueDndrop.Draggable,
+    },
+
     props: {
       label: {
         type: String,
@@ -261,26 +266,27 @@ export async function init(ctx, payload) {
       availableOptions(tags, options) {
         return options.filter((option) => !tags.includes(option));
       },
+      onDrop(event) {this.$emit('handleInnerValueDrop', event)}
     },
     template: `
     <div v-bind:class="[inline ? 'inline-field' : 'field', 'multiselect']">
       <label v-bind:class="inline ? 'inline-input-label' : 'input-label'">
         {{ label }}
       </label>
       <div class="tags input">
-        <div class="tags-wrapper">
+        <Container class="tags-wrapper" orientation="horizontal" @drop="onDrop">
           <span class="tag-message" v-if="disabled">{{ message }}</span>
-          <span class="tag-pill" v-for="tag in modelValue">
-            {{ tag }}
-            <button
-              class="button button--sm icon-only tag-button"
-              @click="$emit('removeInnerValue', tag)"
-              type="button"
-            >
-              <i class="tag-svg ri-close-line ri-xs"></i>
-            </button>
-          </span>
-        </div>
+            <Draggable class="tag-pill" v-for="tag in modelValue">
+              {{ tag }}
+              <button
+                class="button button--sm icon-only tag-button"
+                @click="$emit('removeInnerValue', tag)"
+                type="button"
+              >
+                <i class="tag-svg ri-close-line ri-xs"></i>
+              </button>
+            </Draggable>
+        </Container>
         <select
           :value="modelValue"
           v-bind="$attrs"
@@ -594,6 +600,7 @@ export async function init(ctx, payload) {
                             field="columns"
                             :disabled="noDataFrame"
                             @remove-inner-value="removeInnerValue(index, 'columns', $event)"
+                            @handle-inner-value-drop="handleInnerValueDrop(index, 'columns', $event)"
                           />
                         </div>
                         <div class="row" v-if="operation.operation_type === 'summarise'">
@@ -616,6 +623,7 @@ export async function init(ctx, payload) {
                             field="columns"
                             :disabled="!operation.query"
                             @remove-inner-value="removeInnerValue(index, 'columns', $event)"
+                            @handle-inner-value-drop="handleInnerValueDrop(index, 'columns', $event)"
                             message="Select 'Summarise using' first"
                           />
                         </div>
@@ -639,6 +647,7 @@ export async function init(ctx, payload) {
                             field="values_from"
                             :disabled="noDataFrame"
                             @remove-inner-value="removeInnerValue(index, 'values_from', $event)"
+                            @handle-inner-value-drop="handleInnerValueDrop(index, 'values_from', $event)"
                           />
                         </div>
                         <div class="row" v-if="operation.operation_type === 'discard'">
@@ -652,6 +661,7 @@ export async function init(ctx, payload) {
                             field="columns"
                             :disabled="noDataFrame"
                             @remove-inner-value="removeInnerValue(index, 'columns', $event)"
+                            @handle-inner-value-drop="handleInnerValueDrop(index, 'columns', $event)"
                           />
                         </div>
                         <div class="row" v-if="operation.operation_type === 'select'">
@@ -665,6 +675,7 @@ export async function init(ctx, payload) {
                             field="columns"
                             :disabled="noDataFrame"
                             @remove-inner-value="removeInnerValue(index, 'columns', $event)"
+                            @handle-inner-value-drop="handleInnerValueDrop(index, 'columns', $event)"
                           />
                         </div>
                       </template>
@@ -825,6 +836,9 @@ export async function init(ctx, payload) {
         if (removedIndex === addedIndex) return;
         ctx.pushEvent("move_operation", { removedIndex, addedIndex });
       },
+      handleInnerValueDrop(idx, field, { removedIndex, addedIndex }) {
+        ctx.pushEvent("move_inner_value", { idx, field, removedIndex, addedIndex });
+      },
       addInnerValue(event) {
         const value = event.target.value;
         const field = event.target.getAttribute("field");

lib/kino_explorer/data_transform_cell.ex

@@ -280,6 +280,22 @@ defmodule KinoExplorer.DataTransformCell do
     {:noreply, ctx}
   end
 
+  def handle_event("move_inner_value", fields, ctx) do
+    %{"field" => field, "idx" => idx, "removedIndex" => remove, "addedIndex" => add} = fields
+
+    updated_operations =
+      ctx.assigns.operations
+      |> update_in([Access.at(idx), field], fn values ->
+        {value, values} = List.pop_at(values, remove)
+        List.insert_at(values, add, value)
+      end)
+      |> update_data_options(ctx)
+
+    ctx = assign(ctx, operations: updated_operations)
+    broadcast_event(ctx, "set_operations", %{"operations" => updated_operations})
+    {:noreply, ctx}
+  end
+
   def handle_event("remove_inner_value", fields, ctx) do
     {field, value, idx} = {fields["field"], fields["value"], fields["idx"]}
     parsed_value = parse_value(field, value)