feat(fe pl/sb editor): added support to smart blocks. First implementation to show blocks criteria

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

@@ -2,6 +2,10 @@
 import {onMounted, ref, watch} from "vue";
 import draggable from "vuedraggable";
 
+const emit = defineEmits([
+  'updateTracks'
+])
+
 const props = defineProps({
   tracks: {
     type: Array,
@@ -9,41 +13,89 @@ const props = defineProps({
   }
 })
 
-console.log(props.tracks)
-
 const trackList = ref([])
+const openElements = ref([])
 
 onMounted(() => {
+  console.log(props.tracks)
   trackList.value = props.tracks.map((track, key) => {
     const track_info = {
       type: null,
+      id: 0,
       title: '',
-      order: key
+      order: key,
+      db_element: null,
     }
     if (track.file !== null) {
-      track_info.type = 'file'
+      track_info.type = 'audioclip'
       track_info.title = track.file.track_title
+      track_info.subtitle = track.file.artist_name
+      track_info.db_element = track.file
+      track_info.id = track.file_id
     } else if (track.block !== null) {
       track_info.type = 'block'
       track_info.title = track.block.name
+      track_info.subtitle = track.block.creator.login
+      track_info.db_element = track.block
+      track_info.id = track.block_id
     }
     return track_info
   })
-
-  console.log(trackList)
+  console.log(trackList.value)
 })
 
+// watch(trackList.value, (newPos) => {
+//   console.log(newPos)
+//   trackList.value = newPos.map((el, key) => {
+//     el.position = key
+//     return el
+//   })
+// })
+
 const checkMove = (e) => {
-  //console.log(e.draggedContext.futureIndex)
+  //change position, or use key index to create position in controller
+  console.log(trackList.value, e.draggedContext)
 }
 
 watch(trackList, (newVal, oldVal) => {
   console.log(newVal)
 })
 
-const test =(event) => {
+const change = (event) => {
   console.log(event)
-  console.log(trackList)
+  //When adding an element
+  if (Object.hasOwn(event, 'added')) {
+    //Adding position
+    trackList.value[event.added.newIndex].position = event.added.newIndex
+    //Check element type
+    //File
+    if (Object.hasOwn(event.added.element, 'track_title')) {
+      trackList.value[event.added.newIndex].type = 'audioclip'
+      trackList.value[event.added.newIndex].title = event.added.element.track_title
+      trackList.value[event.added.newIndex].subtitle = event.added.element.artist_name
+    }
+    //Block
+    if (Object.hasOwn(event.added.element, 'criteria')) {
+      trackList.value[event.added.newIndex].type = 'block'
+      trackList.value[event.added.newIndex].title = event.added.element.name
+      trackList.value[event.added.newIndex].subtitle = event.added.element.creator.login
+    }
+  }
+  emit('updateTracks', trackList.value)
+}
+
+const remove = (item, index) => {
+  trackList.value.splice(index, 1)
+  emit('updateTracks', trackList.value)
+}
+
+const toggleElement = (index) => {
+  if (openElements.value.includes(index)) {
+    delete openElements.value[openElements.value.indexOf(index)]
+  } else {
+    openElements.value.push(index)
+  }
+  console.log(openElements.value)
 }
 
 defineExpose({ draggable });
@@ -56,12 +108,38 @@ defineExpose({ draggable });
       item-key="position"
       group="tracklist"
       :move="checkMove"
-      @change="test"
+      @change="change"
+      class="draggable-list"
     >
-      <template #item="{ element }">
+      <template #item="{ element, index }">
         <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>
+          <template v-slot:prepend>
+            <div class="index">
+              {{ index + 1 }}
+            </div>
+          </template>
+          <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-subtitle
+              v-if="openElements.includes(index)"
+              v-for="criteria in element.db_element.criteria"
+              v-html="JSON.stringify(criteria)"
+          >
+
+          </v-list-item-subtitle>
+          <template v-slot:append>
+            <v-icon
+              v-if="element.type === 'block' && !openElements.includes(index)"
+              @click="toggleElement(index)"
+            >mdi-unfold-more-horizontal</v-icon>
+            <v-icon
+                v-if="element.type === 'block' && openElements.includes(index)"
+                @click="toggleElement(index)"
+            >mdi-unfold-less-horizontal</v-icon>
+            <v-icon
+                @click="remove(element, index)"
+            >mdi-close</v-icon>
+          </template>
         </v-list-item>
       </template>
     </draggable>
@@ -69,5 +147,8 @@ defineExpose({ draggable });
 </template>
 
 <style scoped>
-
+  .draggable-list {
+    min-height: 200px;
+    background-color: gray;
+  }
 </style>