Rails & Vue.js Trello Clone - Part 4 Discussion

I am loving this series! This is such a cool project. The combination of acts_as_list and Vue makes it seem effortless.

I had one minor suggestion for the code in the cardMoved function. Rather than finding the list index, would it be better to just set a constant to the new list itself, and then use that object to set the list_id in the ajax request? Here's what I did:

const card_list = this.lists.find((list) => {
return list.cards.find((card) => {
return card.id === element.id
})
});

Then when setting up data, I did this, which seems a bit cleaner:

data.append("card[list_id]", card_list.id);

Thanks for the great material!

They updated the draggable package and sadly this no longer works. The end method is completely different response now. I spent a few hours trying to get the JS IDs for the card and list but very frustrating :(

Both the added and moved element now have the list_id, so that makes it easier.

Hey Chris or anybody,

I am stuck here, the @change does not fire any event and the @end or others hooks does not provide the element in the event.

Without the element, it's pretty impossible to go further.

Thanks for you answer.

The @end event:

CustomEvent {isTrusted: false, to: div.dragArea, from: div.dragArea, item: div.card.card-body.card-padding, clone: div.card.card-body.card-padding, …}
isTrusted: false
detail: null
type: "end"
target: div.dragArea
currentTarget: null
eventPhase: 0
bubbles: true
cancelable: true
defaultPrevented: false
composed: false
timeStamp: 3530.1349999936065
srcElement: div.dragArea
returnValue: true
cancelBubble: false
path: (7) [div.dragArea, div.col-3, div#app.row.dragArea, body.lang-en, html, document, Window]
to: div.dragArea
from: div.dragArea
item: div.card.card-body.card-padding
clone: div.card.card-body.card-padding
oldIndex: 1
newIndex: 0
oldDraggableIndex: 1
newDraggableIndex: 0
originalEvent: DragEvent {isTrusted: true, dataTransfer: DataTransfer, screenX: 814, screenY: 471, clientX: 789, …}
pullMode: undefined
__proto__: CustomEvent

<template>
  <draggable v-model="lists" :options="{group: 'lists'}" class="row dragArea" id="app" @end="listMoved">
    <div class='col-3' v-for="(list, index) in lists">
      <h6>{{ list.name }}</h6>
      <hr>
      <draggable v-model="lists.card" :options="{group: 'cards'}" class="dragArea" @end="cardMoved">
        <div class="card card-body card-padding" v-for="(card, index) in list.cards" :key="card.name">
          {{ card.name }}
        </div>
      </draggable>

      <div class="card card-body">
        <textarea v-model="messages[list.id]" name="new_card" class="form-control"></textarea>
        <button @click="submitMesages(list.id)" class="btn btn-secondary">Add new card</button>
      </div>
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  props: ["original_lists"],
  data: function() {
    return {
      messages: {},
      lists: this.original_lists
    }
  },
  methods: {
    log: function(event) {
      console.log(event)
    },
    listMoved: function(event) {
      let data = new FormData
      data.append("list[position]", event.newIndex + 1)

      Rails.ajax({
        url: `/lists/${this.lists[event.newIndex].id}/move`,
        type: "PATCH",
        data: data,
        dataType: 'json'
      })
    },
    cardMoved: function(id, event) {
      console.log(id, event)
      //
      // const list_index = this.lists.findIndex((list) => {
      //   return list.cards.find((card) => {
      //     console.log(event)
      //     // return card.id === event.element.id
      //   })
      // })
    },
    submitMesages: function(list_id) {
      let data = new FormData
      data.append("card[list_id]", list_id)
      data.append("card[name]", this.messages[list_id])

      Rails.ajax({
        url: "/cards",
        type: "POST",
        data: data,
        dataType: 'json',
        success: (data) => {
          const index = this.lists.findIndex(item => item.id == list_id)
          this.lists[index].cards.push(data)
          this.messages[list_id] = undefined
        }
      })
    }
  }
}
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}

.dragArea {
  padding: 5px;
  min-height: 20px;
}

.card-padding {
  margin-bottom: 10px
}

.ghost {
  opacity: 0.8;
  background: #f4f4f4;
}
</style>

Config:
'rails', '5.2.4.1'
"vuedraggable": "^2.23.2"
webpacker (4.2.2)