feat: title y artist edit

app/Http/Controllers/SongController.php

@@ -43,14 +43,29 @@ class SongController extends Controller
             'data' => $ret ? "Guardado " . $song->title : 'sin archivo'
         ]);
      }
-    /**
+     /**
-     * @return void
+      * @param int $id
-     * @param mixed $id
+      */
-     */
+     public function update(Request $request, $id)
-    public function update(Request $request, $id):void
+     {
-    {
+         // Actualizar cancion
-        // Update specified song
+         $song = Song::find($id);
-    }
+         $this->authorize("update", $song);
+
+         $validated = $request->validate([
+             'title' => 'required|string',
+             'artist' => 'required|string',
+         ]);
+
+         $song->title = $validated['title'];
+         $song->artist = $validated['artist'];
+         $song->save();
+
+         return response()->json([
+             'data' => 'Updated successfully'
+         ]);
+     }
+
     /**
      * @param int $id
      */

resources/js/Components/ModalEditarCancion.tsx

@@ -0,0 +1,56 @@
+import { Cancion } from '@/types/types';
+import { Input } from '@headlessui/react';
+import { FormEvent } from 'react';
+import InputLabel from './InputLabel';
+import Modal from './Modal';
+import PrimaryButton from './PrimaryButton';
+
+export default function ModalEditarCancion({
+  showEditModal,
+  UpdateCallback,
+  setShowEditModal,
+  song,
+}: {
+  song: Cancion;
+  showEditModal: boolean;
+  UpdateCallback: (event: FormEvent<HTMLFormElement>) => void;
+  setShowEditModal: (arg0: boolean) => void;
+}) {
+  return (
+    <Modal
+      show={showEditModal}
+      onClose={() => setShowEditModal(false)}
+      closeable={true}
+      maxWidth="md"
+    >
+      <form onSubmit={UpdateCallback} className="p-6">
+        <h2 className="mb-2 text-lg font-medium text-gray-900 dark:text-gray-100">
+          Editando Datos Cancion
+        </h2>
+        <hr />
+        <div className="mt-2">
+          <InputLabel>Titulo</InputLabel>
+          <Input
+            type="text"
+            name="title"
+            defaultValue={song.title}
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm hover:bg-gray-700 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300"
+          />
+          <InputLabel>Artista</InputLabel>
+          <Input
+            type="text"
+            name="artist"
+            defaultValue={song.artist}
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm hover:bg-gray-700 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300"
+          />
+          <hr className="mt-2" />
+          <div className="flex place-content-center">
+            <PrimaryButton className="mt-2" type="submit">
+              Subir Cambios
+            </PrimaryButton>
+          </div>
+        </div>
+      </form>
+    </Modal>
+  );
+}

resources/js/Pages/Songs/Index.tsx

@@ -1,15 +1,17 @@
 import BotonAdd from '@/Components/BotonAdd';
 import ModalAñadirCancion from '@/Components/ModalAñadirCancion';
+import ModalEditarCancion from '@/Components/ModalEditarCancion';
 import ModalRemoveCancion from '@/Components/ModalRemoveCancion';
 import Authenticated from '@/Layouts/AuthenticatedLayout';
 import { Cancion } from '@/types/types';
-import { Head } from '@inertiajs/react';
+import { Head, router } from '@inertiajs/react';
 import axios from 'axios';
 import { FormEvent, useEffect, useState } from 'react';
 
 export default function Index({ songs }: { songs: Cancion[] }) {
   const [showaddmodal, setshowmodal] = useState(false);
   const [showRemove, setRemove] = useState(false);
+  const [showEdit, setEdit] = useState(false);
   const [selcan, setcan] = useState<Cancion>({} as Cancion);
 
   useEffect(() => {
@@ -62,6 +64,27 @@ export default function Index({ songs }: { songs: Cancion[] }) {
       });
   }
 
+  function handleUpdate(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const formData = new FormData(event.currentTarget);
+    const title = formData.get('title');
+    const artist = formData.get('artist');
+
+    axios
+      .put(`/canciones/${selcan.id}`, {
+        title: title,
+        artist: artist,
+      })
+      .then(() => {
+        setEdit(false);
+        router.reload();
+      })
+      .catch((error) => {
+        console.error('Error actualizando datos de la cancion', error);
+        setEdit(false);
+      });
+  }
+
   return (
     <Authenticated
       header={
@@ -106,7 +129,13 @@ export default function Index({ songs }: { songs: Cancion[] }) {
                       {song.path}
                     </td>
                     <td className="whitespace-nowrap px-6 py-4 text-sm">
-                      <button className="mr-2 rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">
+                      <button
+                        className="mr-2 rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700"
+                        onClick={() => {
+                          setcan(song);
+                          setEdit(true);
+                        }}
+                      >
                         Editar
                       </button>
                       <button
@@ -137,6 +166,12 @@ export default function Index({ songs }: { songs: Cancion[] }) {
           cancion={selcan}
           remove={handleRemove}
         />
+        <ModalEditarCancion
+          song={selcan}
+          showEditModal={showEdit}
+          setShowEditModal={setEdit}
+          UpdateCallback={handleUpdate}
+        />
       </div>
     </Authenticated>
   );

resources/js/types/types.d.ts

@@ -1,7 +1,7 @@
 export type Cancion = {
   id: number;
   title: string;
-  artist: string | null;
+  artist: string;
   path: string;
   cover: string | null;
 };