feat: app working mongodb queue

app/src/components/testCodaDbMongo.tsx

@@ -9,6 +9,9 @@ import {
   IonButton,
   IonSpinner,
   IonText,
+  IonGrid,
+  IonRow,
+  IonCol,
 } from '@ionic/react';
 import { useCoda } from '../hooks/useCoda';
 
@@ -24,15 +27,18 @@ const TestCoda: React.FC = () => {
   } = useCoda();
 
   // Stati per i nuovi record da aggiungere
-  const [title, setTitle] = useState('');
+  const [titolo, setTitolo] = useState('');
   const [artista, setArtista] = useState('');
   const [coverUrl, setCoverUrl] = useState('');
   const [color, setColor] = useState('');
 
   const handleAdd = () => {
-    if (!title || !artista || !coverUrl || !color) return alert('Completa tutti i campi');
-    addRecord({ title, artista, coverUrl, color, voti: 0 });
-    setTitle('');
+    if (!titolo || !artista || !coverUrl || !color) {
+      alert('Compila tutti i campi prima di aggiungere');
+      return;
+    }
+    addRecord({ titolo, artista, coverUrl, color, voti: 0 });
+    setTitolo('');
     setArtista('');
     setCoverUrl('');
     setColor('');
@@ -61,9 +67,9 @@ const TestCoda: React.FC = () => {
 
         <h2>Aggiungi Nuovo Record</h2>
         <IonInput
-          placeholder="Title"
-          value={title}
-          onIonChange={(e) => setTitle(e.detail.value!)}
+          placeholder="Titolo"
+          value={titolo}
+          onIonChange={(e) => setTitolo(e.detail.value!)}
         />
         <IonInput
           placeholder="Artista"
@@ -88,26 +94,39 @@ const TestCoda: React.FC = () => {
         <IonList>
           {records.length === 0 && !loading && <p>Nessun record disponibile</p>}
           {records.map((r) => (
-            <IonItem key={r.id} style={{ borderLeft: `5px solid ${r.color}` }}>
-              <IonLabel>
-                <h3>{r.title}</h3>
-                <p>Artista: {r.artista}</p>
-                <img
-                  src={r.coverUrl}
-                  alt={r.title}
-                  style={{ width: 50, height: 50, objectFit: 'cover', marginBottom: 5 }}
-                />
-                <p>Voti: {r.voti}</p>
-              </IonLabel>
-              <IonButton size="small" onClick={() => updateVoti(r.id, 1)} disabled={loading}>
-                +1
-              </IonButton>
-              <IonButton size="small" onClick={() => updateVoti(r.id, -1)} disabled={loading}>
-                -1
-              </IonButton>
-              <IonButton color="danger" size="small" onClick={() => deleteRecord(r.id)} disabled={loading}>
-                Elimina
-              </IonButton>
+            <IonItem
+              key={r.id}
+              style={{ borderLeft: `5px solid ${r.color}`, alignItems: 'center' }}
+            >
+              <IonGrid>
+                <IonRow>
+                  <IonCol size="3">
+                    <img
+                      src={r.coverUrl}
+                      alt={r.titolo}
+                      style={{ width: '100%', height: 60, objectFit: 'cover', borderRadius: 4 }}
+                    />
+                  </IonCol>
+                  <IonCol size="5">
+                    <IonLabel>
+                      <h3>{r.titolo}</h3>
+                      <p>Artista: {r.artista}</p>
+                      <p>Voti: {r.voti}</p>
+                    </IonLabel>
+                  </IonCol>
+                  <IonCol size="4" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                    <IonButton size="small" onClick={() => updateVoti(r.id, 1)} disabled={loading}>
+                      +1
+                    </IonButton>
+                    <IonButton size="small" onClick={() => updateVoti(r.id, -1)} disabled={loading}>
+                      -1
+                    </IonButton>
+                    <IonButton color="danger" size="small" onClick={() => deleteRecord(r.id)} disabled={loading}>
+                      Elimina
+                    </IonButton>
+                  </IonCol>
+                </IonRow>
+              </IonGrid>
             </IonItem>
           ))}
         </IonList>