Pass dummy data to dashboard component, vue rendering logic based on the data (Unlocked, level selected)

Author: SethSharp

resources/js/Components/LessonCard.vue

@@ -12,17 +12,13 @@ defineProps(["title", "description", "image"]);
             <div class="pl-12 pt-8 w-1/2">
                 <img
                     class="border-black border-2 "
-                    src="/images/placeholder.png"
+                    :src="image"
+                    :alt="image"
                 />
             </div>
             <div class="pt-8 w-1/2">
                 <p class="">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                    Pellentesque elementum erat vitae lorem condimentum, a
-                    rutrum tellus molestie. Proin tincidunt eros sit amet
-                    posuere dapibus. Maecenas fermentum et eros imperdiet
-                    tempor. Sed vestibulum ex leo, ut ultrices tortor cursus
-                    non.
+                    {{description}}
                 </p>
             </div>
         </div>

resources/js/Components/LessonItem.vue

@@ -0,0 +1,21 @@
+<script>
+    export default {
+        props: ['selected', 'unlocked'],
+        methods: {
+        }
+    }
+</script>
+
+<template>
+    <div v-if="selected"
+        class="bg-green-400 w-32 h-32 m-10 border-2 border-black"
+        v-on:click="updateIsSelected"
+        >
+        <img src="/images/placeholder_2.png"/>
+    </div>
+    <div v-else
+        class="bg-green-400 w-32 h-32 m-10 border-2 border-green"
+        >
+        <img src="/images/placeholder_2.png"/>
+    </div>
+</template>

resources/js/Pages/Dashboard.vue

@@ -1,19 +1,30 @@
-<script setup>
-import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
-import { Head } from "@inertiajs/inertia-vue3";
-import LessonCard from "@/Components/LessonCard.vue";
-
-// NOTE:
-/*
-    Lesson data will be loaded and passed through to the grid component
-    When the component is interacted with, the component will handle its own
-    interaction event, but here another event will be made and it will
-    change current lesson data
-*/
-
-// Current lesson data
-defineProps(["curTitle", "curDesc", "curImage"]);
-
+<script>
+    import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
+    import LessonCard from '@/Components/LessonCard.vue';
+    import LessonItem from '@/Components/LessonItem.vue';
+    export default {
+        components: { AuthenticatedLayout, LessonCard, LessonItem },
+        props: ['lessonData'],
+        data() {
+            return {
+                'title': 'Default title',
+                'desc': 'Default description',
+                'img': '/images/placeholder.png',
+                'prevSelected': 0
+            }
+        },created() {
+            this.changeLessonCard(0);
+        }, methods: {
+            changeLessonCard: function(index) {
+                this.lessonData[this.prevSelected].selected=false;
+                this.prevSelected = index;
+                this.lessonData[index].selected=true;
+                this.title = this.lessonData[index].title;
+                this.desc = this.lessonData[index].desc;
+                this.img = this.lessonData[index].src;
+            }
+        }
+    }
 </script>
 
 <template>
@@ -22,30 +33,16 @@ defineProps(["curTitle", "curDesc", "curImage"]);
     <AuthenticatedLayout>
         <div class="flex justify-center mt-10">
             <LessonCard
-                :title="curTitle"
-                :description="curDesc"
-                :image="curImage"
+                :title="title"
+                :description="desc"
+                :image="img"
             />
-            <div class="flex">
+        </div>
+        <div class="flex justify-center">
+            <div v-for="(lesson, index) in lessonData"
+                class="">
+                <LessonItem :title="lesson.title" :unlocked="lesson.unlocked" :selected="lesson.selected" v-on:click="changeLessonCard(index)"/>
             </div>
         </div>
     </AuthenticatedLayout>
 </template>
-
-<!-- <template #header>
-    <h2 class="font-semibold text-xl text-gray-800 leading-tight">
-        Dashboard
-    </h2>
-</template>
-
-<h2> SOmein</h2>
-
-<div class="py-12">
-    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
-            <div class="p-6 bg-white border-b border-gray-200">
-                You're logged in!
-            </div>
-        </div>
-    </div>
-</div> -->

routes/web.php

@@ -24,12 +24,15 @@
     ]);
 });
 
-// Rotue::get('/dashboard', function () {
-//     return Inertia::render('Dash')
-// });
-
 Route::get('/dashboard', function () {
-    return Inertia::render('Dashboard');
+    $data = [
+        ['title'=>'Lesson - 1', 'desc'=>'Lesson 1 desc', 'src'=>'/images/placeholder.png', 'selected'=>false, 'unlocked'=>true],
+        ['title'=>'Lesson - 2', 'desc'=>'Lesson 2 desc', 'src'=>'/images/placeholder.png', 'selected'=>false, 'unlocked'=>false],
+        ['title'=>'Lesson - 3', 'desc'=>'Lesson 3 desc', 'src'=>'/images/placeholder.png', 'selected'=>false, 'unlocked'=>false]
+    ];
+    return Inertia('Dashboard', [
+        'lessonData' => $data
+    ]);
 })->middleware(['auth', 'verified'])->name('dashboard');
 
 require __DIR__.'/auth.php';