feat(smartblock): added preview tracklist feat

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

@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import Sources from "@/components/content/partials/Sources.vue";
 import TrackList from "@/components/content/partials/TrackList.vue";
 import {useAuthStore} from "@/stores/auth.store.ts";
-import {reactive, ref} from "vue";
+import {onBeforeMount, reactive, ref} from "vue";
 import {smartblock} from "@models/smartblock/smartblock.ts";
+import {blocks_page} from "@/composables/content/blocks_page.ts";
 
 const auth = useAuthStore();
 
+const { getTracklist } = blocks_page()
+
 const emit = defineEmits([
   'saveItem'
 ])
@@ -26,8 +28,9 @@ const item = props.item.id > 0 ? props.item : reactive({
     type: null,
     quantity: null
   },
-  repeated_tracks: false,
-  overflow_tracks: false
+  repeat_tracks: false,
+  overflow_tracks: false,
+  sort: null
 })
 
 const smartblockFields = smartblock(item)
@@ -59,6 +62,31 @@ const updateProperty = (criteria, prop) => {
   item[prop] = criteria
   console.log(item)
 }
+
+const showPreview = async () => {
+  const files = await getTracklist(item)
+  item.tracks = []
+  files.forEach(file => {
+    item.tracks.push({file: file})
+  })
+}
+
+onBeforeMount(() => {
+  if (item.id > 0) {
+    const limit = item.criteria.find(el => el.criteria === 'limit')
+    const repeat_tracks = item.criteria.find(el => el.criteria === 'repeat_tracks')
+    const overflow_tracks = item.criteria.find(el => el.criteria === 'overflow_tracks')
+    const sort = item.criteria.find(el => el.criteria === 'sort')
+    item.limit = {
+      type: limit.modifier,
+      quantity: limit.value
+    }
+    item.repeat_tracks = !!repeat_tracks.value
+    item.overflow_tracks = !!overflow_tracks.value
+    item.sort = sort.value
+    console.log(item)
+  }
+})
 </script>
 
 <template>
@@ -69,15 +97,15 @@ const updateProperty = (criteria, prop) => {
             :is="field.component"
             :label="field.label"
             :radioButtons="field.radioButtons"
-            :value="field.value"
+            :value="field.value ? field.value : null"
             :disabled="field.disabled"
-            :density="'compact'"
             @update:modelValue="checkError(field, item[key])"
             @update-property="updateProperty"
             :error="checkError(field, item[key])"
             :limit="item.limit"
             rows="2"
             :items="field.items"
+            :criteria="item.criteria"
             v-model="item[key]"
             item-title="title"
             item-value="value"
@@ -91,10 +119,6 @@ const updateProperty = (criteria, prop) => {
           color="accent"
           @click="$emit('goBack')"
       >Torna indietro</v-btn>
-      <v-btn
-          color="secondary"
-          @click="preview"
-      >Anteprima</v-btn>
       <v-btn
           color="primary"
           @click="save"
@@ -102,6 +126,11 @@ const updateProperty = (criteria, prop) => {
       >Salva</v-btn>
     </v-col>
     <v-col>
+      <v-btn
+        color="primary"
+        :disabled="disabledSaveButton"
+        @click="showPreview"
+        >Anteprima</v-btn>
       <TrackList
           :tracks="item.tracks"
           @update-tracks="update"
@@ -109,19 +138,6 @@ const updateProperty = (criteria, prop) => {
     </v-col>
   </v-row>
   {{item}}
-<!--  <v-row class="tables" no-gutters>-->
-<!--    <v-col>-->
-<!--      <TrackList-->
-<!--          :tracks="item.tracks"-->
-<!--          @update-tracks="update"-->
-<!--      />-->
-<!--    </v-col>-->
-<!--    <v-col>-->
-<!--      <Sources />-->
-<!--    </v-col>-->
-<!--  </v-row>-->
-<!--  <v-row no-gutters>-->
-<!--  </v-row>-->
 </template>
 
 <style scoped>

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

@@ -22,8 +22,7 @@ const hiddenCriteria = [
 const trackList = ref([])
 const openElements = ref([])
 
-onMounted(() => {
-  console.log(props.tracks)
+const rehydratateTracks = () => {
   trackList.value = props.tracks.map((track, key) => {
     const track_info = {
       type: null,
@@ -32,13 +31,13 @@ onMounted(() => {
       order: key,
       db_element: null,
     }
-    if (track.file !== null) {
+    if (track.file !== null && typeof track.file !== 'undefined') {
       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) {
+    } else if (track.block !== null && typeof track.block !== 'undefined') {
       track_info.type = 'block'
       track_info.title = track.block.name
       track_info.subtitle = track.block.creator.login
@@ -47,7 +46,10 @@ onMounted(() => {
     }
     return track_info
   })
-  console.log(trackList.value)
+}
+
+onMounted(() => {
+  rehydratateTracks()
 })
 
 const checkMove = (e) => {
@@ -57,8 +59,9 @@ const checkMove = (e) => {
   }
 }
 
-watch(trackList, (newVal, oldVal) => {
+watch(props, (newVal, oldVal) => {
   console.log(newVal)
+  rehydratateTracks()
 })
 
 const change = (event) => {