add method to display sets

bbzblit · Apr 2, 2024 · e5f78da · e5f78da
1 parent c15822f
commit e5f78da
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 13 deletions.
diff --git a/app/Http/Controllers/SetController.php b/app/Http/Controllers/SetController.php
@@ -15,6 +15,7 @@ public function import(Import $request)
         $data = trim($data);
         $set = Set::create([
             "title" => "Imported Set",
+            "description" => "Lorem ipsum dolor sit amet, consetetur sadipscing",
             "user_id" => auth()->id(),
         ]);
 

diff --git a/app/Models/Set.php b/app/Models/Set.php
@@ -14,6 +14,7 @@ class Set extends Model
 
     protected $fillable = [
         "title",
+        "description",
         "user_id"
     ];
 

diff --git a/database/migrations/2024_03_05_094610_create_sets_table.php b/database/migrations/2024_03_05_094610_create_sets_table.php
@@ -15,6 +15,7 @@ public function up(): void
             $table->uuid("id")->primary();
             $table->timestamps();
             $table->string("title");
+            $table->text("description");
             $table->uuid("user_id");
             $table->foreign("user_id")->references("id")->on("users")->cascadeOnDelete();
         });

diff --git a/resources/js/Components/SetPreview.vue b/resources/js/Components/SetPreview.vue
@@ -1,11 +1,31 @@
 <template>
-    <div class="w-full h-20">
-        <h1>Hello World</h1>
+    <div @click="reroute" class="w-[30rem] min-h-28 mr-4 border border-gray-500 p-4 rounded-lg m-4 hover:scale-110 cursor-pointer">
+        <h1 class="font-bold text-xl">{{ set.title }}</h1>
+        <h2>{{ set.description }}</h2>
+        <span class="text-sm italic">Last Update {{ updatedAt }}</span>
     </div>
 </template>
 <script>
 export default{
     name: "SetPreview",
+    props: {
+        set: {
+            type: Object,
+            required: true,
+            default: () => {},
+        },
+    },
+
+    methods: {
+        reroute() {
+            window.location = `/train/${this.set.id}`;
+        },
+    },
+    computed: {
+        updatedAt() {
+            return new Date(this.set.updated_at).toLocaleDateString();
+        },
+    }
 }
 </script>
 <style>

diff --git a/resources/js/Pages/Index.vue b/resources/js/Pages/Index.vue
@@ -1,27 +1,53 @@
 <template>
-    <div v-if="authentificated">
-        <h1 class="text-3xl">Welcome back, {{ userName }}</h1>
+    <div class="mx-12 my-8" v-if="authentificated">
+        <h1 class="text-3xl rainbow">Welcome back, {{ userName }}</h1>
+        <div class="mt-8">
+            <input
+                @keypress.prevent.enter="search"
+                placeholder="Search"
+                v-model="query"
+                class="bg-[#333333] px-4 py-2 rounded-3xl w-[40rem]"
+            />
+            <button @click="search">
+                <i class="fa-solid fa-magnifying-glass ml-8 text-2xl"></i>
+            </button>
+        </div>
+        <div class="mt-12 flex flex-wrap items-center justify-start">
+            <set-preview v-for="set in sets" :key="set.id" :set="set"></set-preview>
+        </div>
     </div>
     <div v-else>
         <h1 class="text-3xl">Hello Stranger</h1>
     </div>
-
-    <SetPreview title="Test"></SetPreview>
 </template>
 
 <script>
-import SetPreview from '../Components/SetPreview.vue';
+import SetPreview from "../Components/SetPreview.vue";
 
 export default {
     name: "Index",
-    components: [SetPreview],
+    components: { SetPreview },
     props: {
         userName: {
             type: String,
             default: null,
         },
+        sets: {
+            type: Array,
+            default: () => []
+        }
+    },
+    data() {
+        return {
+            query: "",
+        };
     },
 
+    methods: {
+        search() {
+            console.log("searching...", this.sets);
+        },
+    },
     computed: {
         authentificated() {
             return this.userName !== null;

diff --git a/resources/js/Pages/Set/Train.vue b/resources/js/Pages/Set/Train.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="m-12 t-18 flex flex-col items-start" v-if="currentFlashCard">
+    <div class="mr-12 t-18 flex flex-col items-start" v-if="currentFlashCard">
         <learn-progress
             :ptr="completedCards"
             :max="totalCards"

diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
@@ -20,7 +20,7 @@
 
 <body class="font-sans antialiased text-white">
     <header class="bg-transparent w-full h-16 absolute px-4 border-b z-10 border-gray-700 flex items-center justify-between">
-        <h1 class="inline-block font-bold text-3xl">BetterLet</h1>
+        <h1 class="inline-block font-bold text-3xl cursor-pointer" onclick="window.location.replace('/')">BetterLet</h1>
         <div id="actions" class="relative flex">
             @if (Auth::check())
             <a href="/logout" class="mx-3 py-3 px-2 rounded-md cursor-pointer">

diff --git a/routes/web.php b/routes/web.php
@@ -2,8 +2,10 @@
 
 use App\Http\Controllers\AuthController;
 use App\Http\Controllers\SetController;
-use Illuminate\Foundation\Application;
+use App\Models\Set;
+use Illuminate\Database\Query\Builder;
 use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Facades\Route;
 use Inertia\Inertia;
 
@@ -21,9 +23,12 @@
 Route::get('/', function () {
     if (Auth::check()){
         $user = Auth::user();
-
+
+        $sets = DB::table("sets")->where("user_id", $user->id)->limit(20)->get();
+
         return Inertia::render('Index', [
-            "userName" => "{$user->first_name} {$user->last_name}"
+            "userName" => "{$user->first_name} {$user->last_name}",
+            "sets" => $sets,
         ]);    
     }
     return Inertia::render('Index');