feat(fe playlist): adding editor functionalities

resources/js/components/content/partials/TrackList.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import {onMounted, ref, watch} from "vue";
+import draggable from "vuedraggable";
+
+const props = defineProps({
+  tracks: {
+    type: Array,
+    required: true
+  }
+})
+
+console.log(props.tracks)
+
+const trackList = ref([])
+
+onMounted(() => {
+  trackList.value = props.tracks.map((track, key) => {
+    const track_info = {
+      type: null,
+      title: '',
+      order: key
+    }
+    if (track.file !== null) {
+      track_info.type = 'file'
+      track_info.title = track.file.track_title
+    } else if (track.block !== null) {
+      track_info.type = 'block'
+      track_info.title = track.block.name
+    }
+    return track_info
+  })
+
+  console.log(trackList)
+})
+
+const checkMove = (e) => {
+  //console.log(e.draggedContext.futureIndex)
+}
+
+watch(trackList, (newVal, oldVal) => {
+  console.log(newVal)
+})
+
+const test =(event) => {
+  console.log(event)
+  console.log(trackList)
+}
+
+defineExpose({ draggable });
+</script>
+
+<template>
+  <v-list>
+    <draggable
+      :list="trackList"
+      item-key="position"
+      group="tracklist"
+      :move="checkMove"
+      @change="test"
+    >
+      <template #item="{ element }">
+        <v-list-item>
+            <v-list-item-title v-html="element.title"></v-list-item-title>
+            <v-list-item-subtitle v-html="element.subtitle"></v-list-item-subtitle>
+        </v-list-item>
+      </template>
+    </draggable>
+  </v-list>
+</template>
+
+<style scoped>
+
+</style>