fix(playlist): refactor with js model

resources/js/components/content/Playlist.vue

@@ -4,12 +4,17 @@ import Table from "@/components/content/partials/Table.vue";
 import PlaylistEditor from "@/components/content/partials/PlaylistEditor.vue";
 import ConfirmDelete from "@/components/content/partials/dialogs/ConfirmDelete.vue";
 import {reactive, ref, watch} from "vue";
+import {usePlaylistStore} from "@/stores/playlist.store.ts";
+import {baseSmartBlock} from "@models/smartblock/smartblock.ts";
+import {basePlaylist} from "@models/playlist/playlist.ts";
 
-const { items, listData, headers, selected, loading, search, getItems, editItem, createItem, deleteItem } = playlist_page()
+const playlistStore = usePlaylistStore();
+
+const { items, listData, headers, selected, loading, search, getItems, editItem, deleteItem } = playlist_page();
 
 const itemEdited = ref({
   id: null
-})
+});
 
 const bulk = ref(false)
 const dialog = reactive({
@@ -28,12 +33,11 @@ const openDialog = (type, title = '', text = '', bulk = false) => {
 
 const edit = (item) => {
   console.log(item)
-  //Check if edit or create
-  if (typeof item === 'object') {
-    itemEdited.value = item
-  } else {
-    itemEdited.value.id = item
+  if (item === 0) {
+    item = basePlaylist();
   }
+  playlistStore.loadPlaylist(item);
+  itemEdited.value = item;
 }
 
 const save = (item) => {
@@ -41,15 +45,9 @@ const save = (item) => {
     //Check required fields
     console.log('error!')
   }
-
-  if (item.id > 0) {
-    const saved = editItem(item)
-    console.log(saved)
-  } else {
-    delete item.id
-    const saved = createItem(item)
-    console.log(saved)
-  }
+  const saved = editItem(item)
+  console.log(saved)
+  playlistStore.updateField({key: 'id', value: saved.id});
 }
 
 const cancel = (item) => {

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

@@ -3,7 +3,8 @@ import {playlist} from "@/composables/content/models/playlist.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 {ref} from "vue";
+import {usePlaylistStore} from "@/stores/playlist.store.ts";
 
 const auth = useAuthStore();
 
@@ -11,18 +12,10 @@ const emit = defineEmits([
   'saveItem'
 ])
 
-const props = defineProps({
-  item: Object,
-})
 
-const item = props.item.id > 0 ? props.item : reactive({
-  id: 0,
-  name: '',
-  creator_id: auth.userData.user.id,
-  description: '',
-  creator: {},
-  tracks: []
-})
+const playlistStore = usePlaylistStore();
+const item = playlistStore.currentPlaylist;
+console.log(playlistStore.currentPlaylist)
 
 const playlistFields = playlist(item)
 

resources/js/composables/content/models/playlist/playlist.ts

@@ -0,0 +1,105 @@
+import type {PlaylistContent} from "@models/playlist/playlistContent.ts";
+import type {SmartBlock} from "@models/smartblock/smartblock.ts";
+import {cleanOptions} from "@/helpers/AxiosHelper.ts";
+import axios, {type AxiosResponse} from "axios";
+import {VTextarea, VTextField} from "vuetify/components";
+
+export interface Playlist {
+    id?: number;               // Aggiunto per l'identificazione
+    name: string;
+    creatorId: number;        // corrisponde a creator_id
+    description?: string;     // Opzionale
+    length: number;           // Durata della playlist
+    contents: PlaylistContent[];
+}
+
+export const basePlaylist = (): Playlist => {
+    return {
+        id: 0,
+        name: '',
+        creator_id: 0,
+        description: '',
+        length: 0,
+        contents: [],
+    }
+}
+
+export const PlaylistTableHeader = [
+    {title: 'Nome playlist', value: 'name'},
+    {title: 'Creato da', value: 'creator.login'},
+    {title: 'Durata', value: 'length'},
+    {title: 'Ultima modifica', value: 'utime'},
+    {title: 'Azioni', value: 'actions'}
+]
+
+export const getPlaylist = async (options: {
+    id?: number | null;
+    scheduled?: number | null;
+    withDjs?: boolean | null;
+    isScheduled?: boolean | null;
+    page?: Number | null;
+    per_page?: Number | null;
+    all?: string | null;
+}): Promise<any> => {
+    const filteredParams = cleanOptions(options);
+    return await axios.get(`/playlist`, {params: filteredParams})
+        .then((response: AxiosResponse) => {
+            return response.data.data
+        }).catch((error: Error) => {
+            console.log("Error: " + error);
+        })
+}
+
+export const getPlaylistContent = async (playlistId: Number): Promise<any> => {
+    return await axios.get(`/playlist/${playlistId}`)
+        .then((response: AxiosResponse) => {
+            return response.data
+        }).catch((error: Error) => {
+            console.log("Error: " + error);
+        })
+}
+
+export const deletePlaylist = async (playlistIds: Number[]) => {
+    return axios.delete(`playlist`, {
+        data: {
+            _method: 'DELETE',
+            'playlistIds': playlistIds
+        }
+    })
+}
+
+export function playlist(item) {
+    const visibleFields = {
+        name: {
+            title: 'Nome',
+            required: true,
+        },
+        description: {
+            title: 'Descrizione',
+            required: false
+        },
+    }
+
+    return () => {
+        const fields = {}
+        Object.keys(visibleFields).forEach((key) => {
+            fields[key] = {
+                label: visibleFields[key].title,
+                value: item !== null ? item[key] : '',
+                required: visibleFields[key].required,
+                component: VTextField
+            }
+            // console.log(fields)
+            switch (key) {
+                case 'name':
+                    fields[key].component = VTextField
+                    break
+                case 'description':
+                    fields[key].component = VTextarea
+                    break;
+            }
+        })
+        // console.log(fields)
+        return fields
+    }
+}

resources/js/composables/content/models/playlist/playlistContent.ts

@@ -0,0 +1,15 @@
+export interface PlaylistContent {
+    id?: number;              // Aggiunto per l'identificazione
+    playlistId: number;      // corrisponde a playlist_id
+    fileId?: number;         // corrisponde a file_id (opzionale)
+    blockId?: number;        // corrisponde a block_id (opzionale)
+    streamId?: number;       // corrisponde a stream_id (opzionale)
+    type: 0 | 1 | 2;         // 0 = file, 1 = stream, 2 = block
+    position: number;
+    trackOffset: number;     // corrisponde a trackoffset
+    clipLength: number;      // corrisponde a cliplength
+    cueIn: number;           // corrisponde a cuein
+    cueOut: number;          // corrisponde a cueout
+    fadeIn: number;          // corrisponde a fadein
+    fadeOut: number;         // corrisponde a fadeout
+}

resources/js/composables/content/playlist_page.ts

@@ -52,17 +52,17 @@ export function playlist_page() {
         })
     }
 
-    const createItem = async (item) => {
-        return await axios.post(`playlist`, item
-        ).then((response) => {
-            console.log(response)
-        })
-    }
-
     const editItem = async (item) => {
-        item['_method'] = 'PUT'
+        loading.value = true;
+        let url = '/playlist'
+        if (item.id > 0) {
+            item['_method'] = 'PUT'
+            url += `/${item.id}/`
+        }
 
-        return await axios.post(`playlist/${item.id}`, item
+        return await axios.post(
+            url,
+            item
         ).then((response) => {
             console.log(response)
         })
@@ -78,5 +78,5 @@ export function playlist_page() {
         })
     }
 
-    return { items, listData, headers, selected, loading, search, getItems, createItem, editItem, deleteItem }
+    return { items, listData, headers, selected, loading, search, getItems, editItem, deleteItem }
 }

resources/js/stores/playlist.store.ts

@@ -0,0 +1,25 @@
+import {defineStore} from "pinia";
+import type {Playlist} from "@models/playlist/playlist.ts";
+import type {PlaylistContent} from "@models/playlist/playlistContent.ts";
+
+export const usePlaylistStore = defineStore('playlist', {
+    state: () => ({
+        currentPlaylist: {} as Playlist,
+        currentPlaylistContents: {} as PlaylistContent,
+    }),
+    actions: {
+        async loadPlaylist(playlistData: Playlist) {
+            this.currentPlaylist = { ...playlistData }
+            this.currentPlaylistContents = playlistData.contents
+        },
+        savePlaylist() {
+            // Implement API call to save this.currentSmartBlock
+        },
+        updateField(payload: { key: string; value: any }) {
+            this.currentPlaylist[payload.key] = payload.value
+        },
+        updatePlaylistContentsField(payload: { key: string; value: any }) {
+            this.currentPlaylist.currentPlaylistContents[payload.key] = payload.value;
+        },
+    }
+})