At present we have a <textarea> for capturing items in the MVP App:

If we input too much text into the <textarea> it starts to scroll which is a poor experience on mobile.

On desktop it kinda works to have a smaller box ...

But it would also be nice to tidy up the UX around the input area.

Todo

• Research how to make the <textarea> resize automatically depending on the content.
• Should not expand more than the height of the screen minus the keyboard.

Starting point: https://benborgers.com/posts/alpine-textarea-auto-resize + https://youtu.be/z7130uJ3H7w

A select box with auto-completion / search is a UI component we are going to need very soon.

Code starting point

Building a custom select input with Alpine.js and Tailwind CSS: https://youtu.be/L_f9gNaSCRE
https://github.com/danharrin/alpine-tailwind-components/blob/main/select/index.html

incorrect path

I was wondering if there was a way to udpate the x-data values on an Alpine.js component from "outside".
An example would be the browser receiving an event from a LiveView server which then apply an action on the Alpine.js component.
This can be useful to have actions from one client displayed to other connected clients in real time.

For example the open value define how to display the I can see you div:

<div x-data="{open: false}" id="dropdown">
    <button @click="open = !open">Toggle</button>
 
    <div x-show="open">I can see you</div>
</div>

In javascript we can then do:

d = document.querySelector('#dropdown');
Alpine.$data(d).open = true; // to show the div
Alpine.$data(d).open = false; // to hide it

see: https://alpinejs.dev/magics/data

Combined with Phoenix LiveView Hooks we could trigger this change on the client from the server.

https://news.ycombinator.com/item?id=34365515

I have the following Alpine.js attribute define on the table displaying the list of items:

<.table class="mt-3">
  <thead>
    <.tr>
      <.th>Text</.th>
      <.th>Index</.th>
    </.tr>
  </thead>
  <tbody id="items" x-data="">
    <%= for item <- @items do %>
      <.tr
        id={"item-#{item.id}"}
        draggable="true"
        class="draggable"
        x-data="{dragging: false}"
        x-on:dragstart.self="dragging = true; console.log('start dragging')"
        x-on:dragend.self="dragging = false; console.log('stop dragging')"
        x-bind:class="dragging && 'bg-blue-100' : 'bg-yellow-100'"
      >
        <.td class=""><%= item.text %></.td>
        <.td><%= item.index %></.td>
      </.tr>
    <% end %>
  </tbody>
</.table

For each item I'm adding a dragging value which is set to true when the element is dragged (ie dragstart event is triggered).
Depending on this value I'm adding a background color with x-bind:class="dragging && 'bg-blue-100' : 'bg-yellow-100'"

However this does work sometimes but not always! I'm not sure what is the issue yet. Could it be Tailwind not adding the class name as it is computed by Alpine.js? Could it be my Firefox having issue? Or the css/js file not compiling properly?

I'm trying to use Alpine.js events in a LiveView template. However something is not set correctly as the events are not working properly.

Reading http://blog.pthompson.org/alpine-js-and-liveview and I need to rethink how the page is structured to see if I need to use Phoenix Hooks

As noted in: #5 (review) the test coverage in this repo is quite low.

Todo

• Write some tests for the drag-and-drop feature 🧑‍💻
  • If we need to consider a front-end testing framework, please comment below!
    e.g: dwyl/learn-phoenix-framework#149
• Explain how the tests work. 👨‍🏫
• Add Codecov badge ➕
• Restore order to the Universe! 🦸‍♀️

As outlined in dwyl/app#283 (comment) the next feature on our roadmap is prioritisation of items.
We will achieve this visually by dragging and dropping the item to order them in terms of the priority.

From quick searching, it looks like we can pull off basic drag-and-drop using Alpine.js: 🤞
https://codeblog.trovster.com/2020/05/alpinejs-drag-and-drop/ 📝
https://www.youtube.com/watch?v=zJ4NQaiYxKs 📺
https://codepen.io/trovster/pen/oNjGGMq 👨‍💻

Our objective is to SPIKE this ONE feature in a standalone way, see: dwyl/technology-stack#96
Essentially we just want to test that it's _possible to:

a. Have a bunch of items on a page with the following fields:

• text
• id
• index

b. Drag an item to a different position should refresh the ordering i.e. index of the adjacent items
c. If the item from the bottom is moved to the top it will now have index=1

Note: we're not starting our index from 0 as this is not intuitive to non-technical people.

d. All the other items will have their index updated. So we need to get the item.id for each item on the page and update it's new index.
e. Sync this update to another connected client e.g. using LiveView.

Todo

• Create a new Phoenix App in this repo. call it "app" so that it's easy to copy-paste working code to the MVP later.
• In that Phoenix App, add the usual setup: Tailwind + Alpine see: mvp/BUILDIT.md#1-create-a-new-phoenix-app
• Create an items schema but without people or any other unnecessary data/fields. just:
  • id
  • text
  • index
• Create a LiveView page where we can build this experiement!
• Update templates to use Tailwind classes (see #4 (comment))
• Try to implement the most basic drag-and-drop re-ordering and persistence+sync implementation possible.

One More Thing ...

• Must work flawlessly on Mobile. 📱

Technical Implementation is 100% Flexible at this point!

If you find a more efficient way of implementing this please share!
Right now we are 100% in the research & development phase.

Good luck! 🍀

While searching a solution for #9 I found this post: https://elixirforum.com/t/petl-stack-is-alpinejs-still-relevant/43306

I haven't read all of the comments but I'm keen to see if I can use Hooks and JS command with LiveView to create the drag and drop feature and to compare it with the Tailwind version.

Todo

• Re-create our basic Stopwatch using Alpine.js + Tailwind

  Ref: https://github.com/dwyl/stopwatch

Related to: dwyl/phoenix-liveview-stopwatch#1

See: https://dwyl.github.io/learn-alpine.js/stopwatch.html

Now that we have a Phoenix application with the drag and drop feature, it would be nice to test it.

• Deploy the application on Fly.io (not sure if the flyctl deploy command will work as a Phoenix application and node app coexists 💭 )

watch here: https://www.youtube.com/watch?v=r5iWCtfltso&ab_channel=TraversyMedia