fix: mismatch files

app/Filters/PlaylistFilter.php

@@ -0,0 +1,38 @@
+<?php
+
+namespace App\Filters;
+
+use App\Filters\FiltersType\AllFilter;
+use App\Filters\FiltersType\LikeFilter;
+
+class PlaylistFilter
+{
+    protected $filters = [
+        'name' => LikeFilter::class,
+        'all' => AllFilter::class,
+    ];
+
+    public function apply($query, $filters)
+    {
+        foreach ($this->receivedFilters($filters) as $name => $value) {
+            switch ($name) {
+                case 'all':
+                    $name = array_diff(array_keys($this->filters), ['all']);
+                    $filterInstance = new $this->filters['all'];
+                    break;
+                default:
+                    $filterInstance = new $this->filters[$name];
+                    break;
+            }
+            $query = $filterInstance($query, $name, $value);
+        }
+
+        return $query;
+    }
+
+
+    public function receivedFilters($filters)
+    {
+        return $filters->only(array_keys($this->filters));
+    }
+}

app/Http/Controllers/PlaylistController.php

@@ -18,8 +18,18 @@ class PlaylistController extends Controller
      * List all playlists
      * @return string
      */
-    public function index() {
-        return Playlist::all()->toJson();
+    public function index(Request $request) {
+        if (!isset($request->per_page) || is_null($request)) {
+            $pagination = 5;
+        } else {
+            $pagination = $request->per_page;
+        }
+
+        return Playlist::searchFilter($request)
+            ->with('creator')
+            ->orderBy('name')
+            ->paginate($pagination)
+            ->toJson();
     }
 
     /**

app/Lib/RabbitMQSender.php

@@ -125,7 +125,7 @@ class RabbitMQSender
         $options = new stdClass();
 
         if ($fileTrackTypeId) {
-            $fileTrackType = TrackType::whereId($fileTrackTypeId);
+            $fileTrackType = TrackType::whereId($fileTrackTypeId)->firstOrFail();
             $options->analyze_cue_points = $fileTrackType->analyze_cue_points;
         }
 

app/Models/Playlist.php

@@ -2,6 +2,7 @@
 
 namespace App\Models;
 
+use App\Filters\PlaylistFilter;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 use MusicBrainz\Value\Track;
@@ -28,4 +29,9 @@ class Playlist extends Model
     public function tracks() {
         return $this->hasMany(PlaylistContent::class, 'playlist_id');
     }
+
+    public function scopeSearchFilter($query, $request) {
+        $filters = new PlaylistFilter();
+        return $filters->apply($query, $request);
+    }
 }

resources/js/components/content/Playlist.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import {playlist_page} from "@/composables/content/playlist_page.ts";
+import ConfirmDelete from "@/components/content/partials/dialogs/ConfirmDelete.vue";
+import Table from "@/components/content/partials/Table.vue";
+import FileEdit from "@/components/content/partials/dialogs/FileEdit.vue";
+import FileUpload from "@/components/content/partials/dialogs/FileUpload.vue";
+import {reactive, ref, watch} from "vue";
+
+const { items, listData, headers, selected, loading, search, getItems, editItem, deleteItem } = playlist_page()
+
+const itemEdited = ref({})
+const bulk = ref(false)
+const dialog = reactive({
+  open: false,
+  type: '',
+  title: '',
+  text: ''
+})
+
+const openDialog = (type, title = '', text = '', bulk = false) => {
+  dialog.open = true
+  dialog.type = type
+  dialog.title = title
+  dialog.text = text
+}
+
+const edit = (item) => {
+  console.log(item)
+  itemEdited.value = item
+  openDialog('edit')
+}
+
+const saveItem = (item) => {
+  const saved = editItem(item)
+  closeDialog()
+}
+
+const cancel = (item) => {
+  bulk.value = Array.isArray(item)
+  itemEdited.value = item
+  openDialog(
+      'delete',
+      'Cancella',
+      bulk.value ? 'Vuoi cancellare i file selezionati?' : 'Vuoi cancellare il file selezionato?'
+  )
+}
+
+const confirmDelete = (confirm, bulk) => {
+  if (confirm) {
+    if (!bulk) {
+      deleteItem(itemEdited.value.id)
+    } else {
+      itemEdited.value.forEach(el => {
+        deleteItem(el.id)
+      })
+    }
+  }
+  closeDialog()
+}
+
+const closeDialog = () => dialog.open = false
+
+const updateSearch = (text) => {
+  search.value = text
+}
+
+watch(search, (newValue, oldValue) => {
+  getItems(listData)
+})
+
+</script>
+
+<template>
+  <Table
+      :headers="headers"
+      v-model:selected="selected"
+      v-model:search="search"
+      :list-data="listData"
+      :items="items"
+      :loading="loading"
+      :get-items="getItems"
+      :actions="true"
+      :item-value="'track_title'"
+      :show-select="true"
+      @update-table="getItems"
+      @update-search="updateSearch"
+      @delete-item="cancel"
+      @edit-item="edit"
+  >
+    <template v-slot:header-buttons>
+      <v-btn color="primary" @click="openDialog('upload')">
+        Crea una nuova Playlist
+      </v-btn>
+    </template>
+    <template v-slot:dialog>
+      <v-dialog v-model="dialog.open">
+        <FileUpload
+            v-if="dialog.type === 'upload'"
+            @close-dialog="closeDialog"
+        />
+        <FileEdit
+            v-else-if="dialog.type === 'edit'"
+            :item="itemEdited"
+            @edit-item="saveItem"
+        />
+        <ConfirmDelete
+            v-else-if="dialog.type === 'delete'"
+            :title="dialog.title"
+            :text="dialog.text"
+            :bulk="bulk"
+            @confirm="confirmDelete"
+        />
+      </v-dialog>
+    </template>
+  </Table>
+</template>
+
+<style scoped>
+
+</style>

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

@@ -114,7 +114,7 @@ const update = (page_info) => {
         </v-icon>
         <v-icon
             size="small"
-            @click="$emit('cancelItem', item)"
+            @click="$emit('deleteItem', item)"
         >
           mdi-delete
         </v-icon>

resources/js/components/content/partials/dialogs/FileEdit.vue

@@ -9,7 +9,7 @@ const props = defineProps({
 })
 
 const trackTypes = trackType(null)
-const fields = file()
+const fields = file(props.item)
 const item = props.item
 
 

resources/js/composables/content/archive_page.ts

@@ -1,7 +1,7 @@
 import axios from "axios";
 import {ref, reactive, computed} from "vue";
 
-export function archive() {
+export function archive_page() {
     const items     = ref([])
     const selected  = ref([])
     const loading   = ref(false)

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

@@ -1,6 +1,6 @@
 import {VSelect, VTextarea, VTextField} from "vuetify/components";
 
-export function file() {
+export function file(item) {
     const visibleFields = {
         track_title: 'Titolo traccia',
         artist_name: 'Artista',

resources/js/composables/content/playlist_page.ts

@@ -0,0 +1,69 @@
+import {reactive, ref} from "vue";
+import axios from "axios";
+
+export function playlist_page() {
+    const items     = ref([])
+    const selected  = ref([])
+    const loading   = ref(false)
+    const search    = ref('')
+    const listData  = reactive({
+        'itemsPerPage': 5,
+        'first_page': null,
+        'last_page': null,
+        'total_items': 0,
+        'page': 1,
+    })
+
+    const headers = [
+        // {title: '', key: 'artwork'},
+        {title: 'Nome playlist', value: 'name'},
+        {title: 'Creato da', value: 'creator'},
+        {title: 'Durata', value: 'length'},
+        {title: 'Ultima modifica', value: 'utime'},
+    ];
+
+    const getItems = async (page_info) => {
+        loading.value = true;
+        return await axios.get(`/playlist`, {
+            params: {
+                page: page_info.page,
+                per_page: page_info.itemsPerPage,
+                all: search.value
+            }
+        }).then((response) => {
+            console.log(response)
+            listData.itemsPerPage = response.data.per_page;
+            listData.first_page   = response.data.from;
+            listData.last_page    = response.data.last_page;
+            listData.page         = response.data.current_page;
+            listData.total_items  = response.data.total;
+
+            items.value = response.data.data
+            loading.value = false;
+
+        }).catch((error) => {
+            console.log("Error: "+error);
+        })
+    }
+
+    const editItem = (item) => {
+        item['_method'] = 'PUT'
+
+        return axios.post(`file/${item.id}`, item
+        ).then((response) => {
+            console.log(response)
+        })
+    }
+
+    const deleteItem = (id) => {
+
+        return axios.post(`file/${id}`, {
+            _method: 'DELETE'
+        }).then((response) => {
+            getItems(listData)
+            // items.value = response.status === 200 ? items.value.filter(obj => obj.id !== id) : items
+        })
+    }
+
+    return { items, listData, headers, selected, loading, search, getItems, editItem, deleteItem }
+}

resources/js/layouts/partials/Content.vue

@@ -1,14 +1,19 @@
 <script setup lang="ts">
 import {computed, defineAsyncComponent} from 'vue';
+
 const props = defineProps({
   page: Object,
 });
 
 const currentPage = computed(() => props.page.id)
 
+/**
+ * ToDo:
+ */
 const tabs = {
   dashboard: defineAsyncComponent(() => import('../../components/content/Dashboard.vue')),
   archive: defineAsyncComponent(() => import('../../components/content/Archive.vue')),
+  playlist: defineAsyncComponent(() => import('../../components/content/Playlist.vue')),
 }
 </script>
 

resources/js/layouts/partials/Sidebar.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+//import {pages} from "@/composables/layouts/sidebar.ts";
+
 const pages = [
   {
     id: 'dashboard',
@@ -9,6 +11,11 @@ const pages = [
     id: 'archive',
     name: 'Archive',
     component: '../../components/content/Dashboard.vue',
+  },
+  {
+    id: 'playlist',
+    name: 'Playlist',
+    component: '../../components/content/Playlist.vue',
   }
 ];
 </script>