list cards

Author: leonardoaugustus

app/Http/Controllers/Memory/FlashCardController.php

@@ -26,4 +26,16 @@ public function store(Request $request)
 
         return to_route('dashboard');
     }
+
+    public function index(Request $request)
+    {
+        $cards = Card::query()
+            ->where('user_id', $request->user()->id)
+            ->latest()
+            ->get();
+
+        return inertia('flashcard/Card', [
+            'cards' => $cards,
+        ]);
+    }
 }

resources/js/components/AppSidebar.vue

@@ -5,7 +5,7 @@ import NavUser from '@/components/NavUser.vue';
 import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
 import { type NavItem } from '@/types';
 import { Link } from '@inertiajs/vue3';
-import { BookOpen, Folder, LayoutGrid } from 'lucide-vue-next';
+import { BookOpen, Folder, LayoutGrid, Drama } from 'lucide-vue-next';
 import AppLogo from './AppLogo.vue';
 
 const mainNavItems: NavItem[] = [
@@ -14,6 +14,11 @@ const mainNavItems: NavItem[] = [
         href: '/dashboard',
         icon: LayoutGrid,
     },
+    {
+        title: 'FlashCards',
+        href: '/flashcards',
+        icon: Drama,
+    }
 ];
 
 const footerNavItems: NavItem[] = [

resources/js/components/flashcards/ListMemoriesCard.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { Card as CardType } from '@/types'
+defineProps<{ card: CardType }>()
+
+import {
+    Card, CardHeader, CardTitle, CardContent, CardFooter
+} from '@/components/ui/card'
+import {
+    Accordion, AccordionContent, AccordionItem, AccordionTrigger
+} from '@/components/ui/accordion'
+</script>
+
+<template>
+    <Card class="w-full mx-auto p-6 rounded-xl my-3">
+        <CardHeader>
+            <CardTitle class="text-lg font-medium tracking-tight">
+                {{ card.created_at }}
+            </CardTitle>
+
+            <div class="space-y-4 mt-4">
+                <div v-if="card.type === 'FlashCards'">
+                    <h4 class="font-medium">Pergunta</h4>
+                    <p class="text-sm text-muted-foreground">{{ card.question }}</p>
+
+                    <h4 class="font-medium mt-4">Resposta</h4>
+                    <p class="text-sm text-muted-foreground">{{ card.answer }}</p>
+                </div>
+
+                <div v-else>
+                    <h4 class="font-medium">Texto</h4>
+                    <p class="text-sm text-muted-foreground whitespace-pre-wrap">
+                        {{ card.answer }}
+                    </p>
+                </div>
+            </div>
+        </CardHeader>
+
+        <CardContent>
+            <Accordion type="single" collapsible>
+                <AccordionItem value="extra">
+                    <AccordionTrigger>Visualizar mais</AccordionTrigger>
+                    <AccordionContent>
+                        {{ card.explanation }}
+                    </AccordionContent>
+                </AccordionItem>
+            </Accordion>
+        </CardContent>
+    </Card>
+</template>

resources/js/components/flashcards/MemoryCard.vue

@@ -30,7 +30,7 @@ watch(() => form.cardType, (val) => {
 
 /* 4. Envio --------------------------------------------------------------- */
 function handleSubmit() {
-    form.post(route('memory.flashcards.store'), {
+    form.post(route('flashcards.store'), {
         onSuccess: () => form.reset('question', 'answer'),
     })
 }
@@ -39,7 +39,7 @@ function handleSubmit() {
 async function generateAIAnswer() {
     if (!form.question.trim()) return
     // supondo que exista essa rota
-    const { data } = await router.post(route('memory.ai'), { question: form.question })
+    const { data } = await router.post(route('flashcards.ai'), { question: form.question })
     form.answer = data.answer
 }
 </script>

resources/js/components/flashcards/NewFlashCard.vue

@@ -20,7 +20,7 @@ const breadcrumbs: BreadcrumbItem[] = [
 
     <AppLayout :breadcrumbs="breadcrumbs">
         <div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
-            <!-- <div class="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div class="grid auto-rows-min gap-4 md:grid-cols-3">
                 <div
                     class="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border">
                     <PlaceholderPattern />
@@ -33,11 +33,7 @@ const breadcrumbs: BreadcrumbItem[] = [
                     class="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border">
                     <PlaceholderPattern />
                 </div>
-            </div> -->
-
-            <NewFlashCard />
-
-            <ListMemoriesCard />
+            </div>
         </div>
     </AppLayout>
 </template>

resources/js/pages/Dashboard.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import AppLayout from '@/layouts/AppLayout.vue';
+import { type BreadcrumbItem } from '@/types';
+import { Head } from '@inertiajs/vue3';
+import PlaceholderPattern from '../components/PlaceholderPattern.vue';
+
+import NewFlashCard from '@/components/flashcards/NewFlashCard.vue';
+import MemoryCard from '@/components/flashcards/MemoryCard.vue';
+
+/* props vindas do back-end -------------------------------------------- */
+const props = defineProps<{ cards: Array<any> }>()
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'FlashCards',
+        href: '/flashcards',
+    },
+];
+</script>
+
+<template>
+
+    <Head title="FlashCards" />
+
+    <AppLayout :breadcrumbs="breadcrumbs">
+        <div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
+
+            <NewFlashCard />
+
+            <!-- lista recebe o array de cards -->
+            <div v-if="props.cards.length">
+                <MemoryCard v-for="card in props.cards" :key="card.id" :card="card" />
+            </div>
+        </div>
+    </AppLayout>
+</template>

resources/js/pages/flashcard/Card.vue

@@ -14,8 +14,8 @@
         return Inertia::render('Dashboard');
     })->name('dashboard');
 
-    Route::prefix('memory')->as('memory.')->group(function () {
-        Route::resource('flashcards', FlashCardController::class)->only(['store']);
+    Route::as('memory.')->group(function () {
+        Route::resource('flashcards', FlashCardController::class)->only(['store', 'index']);
     });
 });