Fix: Setting root socket error, Change: collection books table ordering and icons #151

client/components/tables/CollectionBooksTable.vue

@@ -8,22 +8,39 @@
       <div class="flex-grow" />
       <p v-if="totalDuration">{{ totalDurationPretty }}</p>
     </div>
-    <template v-for="book in books">
-      <tables-collection-book-table-row :key="book.id" :book="book" />
-    </template>
+    <draggable v-model="books" v-bind="dragOptions" class="list-group" handle=".drag-handle" draggable=".item" tag="div" @start="drag = true" @end="drag = false" @update="draggableUpdate">
+      <transition-group type="transition" :name="!drag ? 'list-complete' : null">
+        <template v-for="book in books">
+          <tables-collection-book-table-row :key="book.id" :book="book" :collection-id="collectionId" class="item list-complete-item" @edit="editBook" />
+        </template>
+      </transition-group>
+    </draggable>
   </div>
 </template>
 
 <script>
+import draggable from 'vuedraggable'
+
 export default {
+  components: {
+    draggable
+  },
   props: {
+    collectionId: String,
     books: {
       type: Array,
       default: () => []
     }
   },
   data() {
-    return {}
+    return {
+      drag: false,
+      dragOptions: {
+        animation: 200,
+        group: 'description',
+        ghostClass: 'ghost'
+      }
+    }
   },
   computed: {
     totalDuration() {
@@ -37,7 +54,30 @@ export default {
       return this.$elapsedPretty(this.totalDuration)
     }
   },
-  methods: {},
+  methods: {
+    draggableUpdate() {},
+    editBook(book) {
+      var bookIds = this.books.map((b) => b.id)
+      this.$store.commit('setBookshelfBookIds', bookIds)
+      this.$store.commit('showEditModal', book)
+    }
+  },
   mounted() {}
 }
-</script>
+</script>
+
+<style>
+.list-complete-item {
+  transition: all 0.8s ease;
+}
+
+.list-complete-enter-from,
+.list-complete-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.list-complete-leave-active {
+  position: absolute;
+}
+</style>