From f01ef3d07a60c9e35ec3b749fc30cd773e6fcbb5 Mon Sep 17 00:00:00 2001 From: Adrian Marin Date: Fri, 11 Oct 2024 09:58:10 +0200 Subject: [PATCH] add dnd --- README.md | 9 +++- .../fields/key_value_controller.js | 53 ++++++++++--------- package.json | 1 + yarn.lock | 5 ++ 4 files changed, 42 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index 44eb7fa35d..b74ea91125 100644 --- a/README.md +++ b/README.md @@ -110,7 +110,7 @@ Please read the [RELEASE.MD](./RELEASE.MD) -[Become a sponsor ](https://github.com/sponsors/adrianthedev) +[Become a sponsor](mailto:hi@avohq.io) ![Alt](https://repobeats.axiom.co/api/embed/1481a6a259064f02a7936470d12a50802a9c98a4.svg "Repobeats analytics image") @@ -120,3 +120,10 @@ Please read the [RELEASE.MD](./RELEASE.MD) [Get a box of waffles and some of the best app monitoring from Appsignal](https://appsignal.com/r/93dbe69bfb) 🧇 [Get $100 in credits from Digital Ocean](https://www.digitalocean.com/?refcode=efc1fe881d74&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge) 💸 + +## Other Open Source Work + + - [`active_storage-blurhash`](https://github.com/avo-hq/active_storage-blurhash) - A plug-n-play [blurhash](https://blurha.sh/) integration for images stored in ActiveStorage + - [`class_variants`](https://github.com/avo-hq/class_variants) - Easily configure styles and apply them as classes. Very useful when you're implementing Tailwind CSS components and call them with different states. + - [`prop_initializer`](https://github.com/avo-hq/prop_initializer) - A flexible tool for defining properties on Ruby classes. + - [`stimulus-confetti`](https://github.com/avo-hq/stimulus-confetti) - The easiest way to add confetti to your StimulusJS app diff --git a/app/javascript/js/controllers/fields/key_value_controller.js b/app/javascript/js/controllers/fields/key_value_controller.js index 36dc26cd3a..e5f0134f09 100644 --- a/app/javascript/js/controllers/fields/key_value_controller.js +++ b/app/javascript/js/controllers/fields/key_value_controller.js @@ -2,6 +2,7 @@ import * as DOMPurify from 'dompurify' import { Controller } from '@hotwired/stimulus' import { castBoolean } from '../../helpers/cast_boolean' +import Sortable from 'sortablejs' export default class extends Controller { static targets = ['input', 'controller', 'rows'] @@ -46,12 +47,10 @@ export default class extends Controller { this.updateKeyValueComponent() } - moveKey(event) { + moveKey(oldIndex, newIndex) { if (!this.options.editable) return - const { index, direction } = event.params - const toIndex = direction === 'up' ? index - 1 : index + 1 - this.fieldValue = this.moveElement(this.fieldValue, index, toIndex) + this.fieldValue = this.moveElement(this.fieldValue, oldIndex, newIndex) this.updateTextareaInput() this.updateKeyValueComponent() @@ -105,9 +104,22 @@ export default class extends Controller { index++ }) this.rowsTarget.innerHTML = result + this.#initDragNDrop() window.initTippy() } + #initDragNDrop() { + const vm = this + // eslint-disable-next-line no-new + new Sortable(this.rowsTarget, { + animation: 150, + handle: '[data-control="dnd-handle"]', + onUpdate(event) { + vm.moveKey(event.oldIndex, event.newIndex) + }, + }) + } + interpolatedRow(key, value, index) { let result = '
' @@ -154,28 +166,19 @@ export default class extends Controller { } upDownButtons(index) { - return ` + return `
` + href="javascript:void(0);" + data-key-value-index-param="${index}" + data-control="dnd-handle" + title="reorder" + data-tippy="tooltip" + tabindex="-1" + class="flex items-center justify-center py-0 px-2 border-none h-full ${this.options.disable_deleting_rows ? 'cursor-not-allowed' : ''}" + > + + +
` } setOptions() { diff --git a/package.json b/package.json index c7f25c7b02..beccbdb993 100644 --- a/package.json +++ b/package.json @@ -72,6 +72,7 @@ "postcss-nested-ancestors": "^3.0.0", "postcss-preset-env": "^8.5.1", "regenerator-runtime": "^0.13.11", + "sortablejs": "^1.15.3", "stimulus-rails-nested-form": "^4.1.0", "stimulus-textarea-autogrow": "^4.1.0", "stimulus-use": "^0.50.0", diff --git a/yarn.lock b/yarn.lock index 9d158d4bd0..08c0630e8a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5339,6 +5339,11 @@ side-channel@^1.0.4: get-intrinsic "^1.0.2" object-inspect "^1.9.0" +sortablejs@^1.15.3: + version "1.15.3" + resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.15.3.tgz#033668db5ebfb11167d1249ab88e748f27959e29" + integrity sha512-zdK3/kwwAK1cJgy1rwl1YtNTbRmc8qW/+vgXf75A7NHag5of4pyI6uK86ktmQETyWRH7IGaE73uZOOBcGxgqZg== + source-map-js@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"