From bf46469a460d5cef474e358a29b52a1942b41df3 Mon Sep 17 00:00:00 2001
From: Cristine Guadelupe <cristineguadelupe@me.com>
Date: Thu, 11 Apr 2024 17:39:21 +0800
Subject: [PATCH] Makes MultiSelect draggable

---
 lib/assets/data_transform_cell/main.css  |  8 +++++
 lib/assets/data_transform_cell/main.js   | 38 ++++++++++++++++--------
 lib/kino_explorer/data_transform_cell.ex | 18 +++++++++++
 3 files changed, 52 insertions(+), 12 deletions(-)

diff --git a/lib/assets/data_transform_cell/main.css b/lib/assets/data_transform_cell/main.css
index daa03e7..b84399c 100644
--- a/lib/assets/data_transform_cell/main.css
+++ b/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;
+}
diff --git a/lib/assets/data_transform_cell/main.js b/lib/assets/data_transform_cell/main.js
index f4576f8..bb84f12 100644
--- a/lib/assets/data_transform_cell/main.js
+++ b/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,6 +266,7 @@ 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']">
@@ -268,19 +274,19 @@ export async function init(ctx, payload) {
         {{ 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");
diff --git a/lib/kino_explorer/data_transform_cell.ex b/lib/kino_explorer/data_transform_cell.ex
index 5fdbd48..0a47e91 100644
--- a/lib/kino_explorer/data_transform_cell.ex
+++ b/lib/kino_explorer/data_transform_cell.ex
@@ -280,6 +280,24 @@ defmodule KinoExplorer.DataTransformCell do
     {:noreply, ctx}
   end
 
+  def handle_event("move_inner_value", fields, ctx) do
+    {field, idx, remove, add} =
+      {fields["field"], fields["idx"], fields["removedIndex"], fields["addedIndex"]}
+
+    {value, values} =
+      get_in(ctx.assigns.operations, [Access.at(idx), field]) |> List.pop_at(remove)
+
+    updated_value = List.insert_at(values, add, value)
+
+    updated_operations =
+      put_in(ctx.assigns.operations, [Access.at(idx), field], updated_value)
+      |> 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)