From 1ea3c0b0879f31c77aee4ecb4c8ab265f320a072 Mon Sep 17 00:00:00 2001
From: toni-santos <a.oliveirasantos122@gmail.com>
Date: Tue, 26 Sep 2023 16:25:21 +0100
Subject: [PATCH 1/5] started working on shop frontend

---
 resources/js/Components/Shop/ShopItem.vue | 25 +++++++++++++
 resources/js/Pages/Shop.vue               | 44 +++++++++++++++++++++++
 routes/web.php                            |  4 +++
 3 files changed, 73 insertions(+)
 create mode 100644 resources/js/Components/Shop/ShopItem.vue
 create mode 100644 resources/js/Pages/Shop.vue

diff --git a/resources/js/Components/Shop/ShopItem.vue b/resources/js/Components/Shop/ShopItem.vue
new file mode 100644
index 00000000..c4a4cf61
--- /dev/null
+++ b/resources/js/Components/Shop/ShopItem.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { defineProps } from 'vue';
+
+interface Props {
+    name: string;
+    price: number;
+    description: string;
+    image: string;
+}
+
+const item = defineProps<Props>();
+</script>
+
+<template>
+    <div class="flex flex-col border-2 border-black">
+        <img class="border-b-2 border-black" :src="item.image">
+        <div class="flex flex-col bg-2023-orange text-white px-4 py-2">
+            <h2 class="text-xl font-bold">{{ item.name }}</h2>
+            <div class="self-end flex flex-row gap-2 text-xl">
+                <p>{{ item.price }}</p>
+                <img class="w-5" src="/images/cy-sinf-small.svg">
+            </div>
+        </div> 
+    </div>
+</template>
\ No newline at end of file
diff --git a/resources/js/Pages/Shop.vue b/resources/js/Pages/Shop.vue
new file mode 100644
index 00000000..8c81220b
--- /dev/null
+++ b/resources/js/Pages/Shop.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import AppLayout from '@/Layouts/AppLayout.vue';
+import ShopItem from '@/Components/Shop/ShopItem.vue';
+
+const mockItems = [{
+    name: 'Item 1',
+    price: 100,
+    description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
+    image: 'https://picsum.photos/200/200'
+},{
+    name: 'Item 2',
+    price: 100,
+    description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
+    image: 'https://picsum.photos/200/200'
+},{
+    name: 'Item 1',
+    price: 100,
+    description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
+    image: 'https://picsum.photos/200/200'
+},{
+    name: 'Item 1',
+    price: 100,
+    description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
+    image: 'https://picsum.photos/200/200'
+},{
+    name: 'Item 1',
+    price: 100,
+    description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
+    image: 'https://picsum.photos/200/200'
+},]
+
+</script>
+
+<template>
+    <AppLayout title="Loja">
+        <div class="flex self-center justify-center content-center items-center py-10">
+            <h1 class="w-fit border border-black shadow-2023-teal shadow-md bg-2023-red text-white text-2xl font-bold p-2 px-5">Loja</h1>
+        </div>
+        <section class="flex flex-wrap gap-10 align-center justify-center" style="grid-template-columns: repeat(auto-fill, 250px);">
+            <ShopItem v-for="item in mockItems" :key="item.name" v-bind="item">
+            </ShopItem>
+        </section>
+    </AppLayout>
+</template>
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index f8a4fe73..c5dc6480 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -45,6 +45,10 @@
 
 Route::get('/program', [ProgramController::class, 'show'])->name('program');
 
+Route::get('/shop', function() {
+    return Inertia::render('Shop');
+})->name('shop');
+
 Route::prefix('/competition')->name('competition')->group(function () {
     Route::get('/{competition:slug}', [CompetitionController::class, 'show'])->name('.show');
 });

From 99dfaea9e1fb683b42b1977a7eae122738617ac6 Mon Sep 17 00:00:00 2001
From: toni-santos <a.oliveirasantos122@gmail.com>
Date: Wed, 27 Sep 2023 00:38:05 +0100
Subject: [PATCH 2/5] fetch products from backend and fix layout

---
 app/Http/Controllers/ShopController.php   | 26 +++++++++++++++++++
 resources/js/Components/Shop/ShopItem.vue | 14 +++++-----
 resources/js/Pages/Shop.vue               | 31 ++---------------------
 routes/web.php                            |  5 ++--
 4 files changed, 36 insertions(+), 40 deletions(-)
 create mode 100644 app/Http/Controllers/ShopController.php

diff --git a/app/Http/Controllers/ShopController.php b/app/Http/Controllers/ShopController.php
new file mode 100644
index 00000000..ddb4bd72
--- /dev/null
+++ b/app/Http/Controllers/ShopController.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Event;
+use App\Models\Product;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+
+class ShopController extends Controller
+{
+    public function show(Request $request)
+    {
+        $edition = $request->input('edition');
+
+        if ($edition === null) {
+            return response('No edition found', 500);
+        }
+
+        $products = Product::where('edition_id', $edition->id)->get();
+
+        return Inertia::render('Shop', [
+            'products' => $products,
+        ]);
+    }
+}
diff --git a/resources/js/Components/Shop/ShopItem.vue b/resources/js/Components/Shop/ShopItem.vue
index c4a4cf61..6ac32107 100644
--- a/resources/js/Components/Shop/ShopItem.vue
+++ b/resources/js/Components/Shop/ShopItem.vue
@@ -1,23 +1,21 @@
 <script setup lang="ts">
+import type Product from '@/Types/Product';
 import { defineProps } from 'vue';
 
 interface Props {
-    name: string;
-    price: number;
-    description: string;
-    image: string;
+    product: Product;
 }
 
 const item = defineProps<Props>();
 </script>
 
 <template>
-    <div class="flex flex-col border-2 border-black">
-        <img class="border-b-2 border-black" :src="item.image">
+    <div class="flex flex-col border-2 border-black max-w-[20em]">
+        <img class="border-b-2 border-black max-w-[20em] h-[20em] object-cover" src="https://picsum.photos/200/300">
         <div class="flex flex-col bg-2023-orange text-white px-4 py-2">
-            <h2 class="text-xl font-bold">{{ item.name }}</h2>
+            <h2 class="text-xl font-bold">{{ product.name }}</h2>
             <div class="self-end flex flex-row gap-2 text-xl">
-                <p>{{ item.price }}</p>
+                <p>{{ product.price }}</p>
                 <img class="w-5" src="/images/cy-sinf-small.svg">
             </div>
         </div> 
diff --git a/resources/js/Pages/Shop.vue b/resources/js/Pages/Shop.vue
index 8c81220b..c7480043 100644
--- a/resources/js/Pages/Shop.vue
+++ b/resources/js/Pages/Shop.vue
@@ -2,33 +2,6 @@
 import AppLayout from '@/Layouts/AppLayout.vue';
 import ShopItem from '@/Components/Shop/ShopItem.vue';
 
-const mockItems = [{
-    name: 'Item 1',
-    price: 100,
-    description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
-    image: 'https://picsum.photos/200/200'
-},{
-    name: 'Item 2',
-    price: 100,
-    description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
-    image: 'https://picsum.photos/200/200'
-},{
-    name: 'Item 1',
-    price: 100,
-    description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
-    image: 'https://picsum.photos/200/200'
-},{
-    name: 'Item 1',
-    price: 100,
-    description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
-    image: 'https://picsum.photos/200/200'
-},{
-    name: 'Item 1',
-    price: 100,
-    description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
-    image: 'https://picsum.photos/200/200'
-},]
-
 </script>
 
 <template>
@@ -36,8 +9,8 @@ const mockItems = [{
         <div class="flex self-center justify-center content-center items-center py-10">
             <h1 class="w-fit border border-black shadow-2023-teal shadow-md bg-2023-red text-white text-2xl font-bold p-2 px-5">Loja</h1>
         </div>
-        <section class="flex flex-wrap gap-10 align-center justify-center" style="grid-template-columns: repeat(auto-fill, 250px);">
-            <ShopItem v-for="item in mockItems" :key="item.name" v-bind="item">
+        <section class="grid gap-10 align-center justify-center px-32" style="grid-template-columns: repeat(auto-fill, minmax(18em, 20em));">
+            <ShopItem v-for="product in $page.props.products" :key="product" :product="product">
             </ShopItem>
         </section>
     </AppLayout>
diff --git a/routes/web.php b/routes/web.php
index c5dc6480..5fe76281 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -19,6 +19,7 @@
 use App\Http\Controllers\ProductCRUDController;
 use App\Http\Controllers\ProgramController;
 use App\Http\Controllers\QuestCRUDController;
+use App\Http\Controllers\ShopController;
 use App\Http\Controllers\SlotCRUDController;
 use App\Http\Controllers\SponsorCRUDController;
 use App\Http\Controllers\StaffCRUDController;
@@ -45,9 +46,7 @@
 
 Route::get('/program', [ProgramController::class, 'show'])->name('program');
 
-Route::get('/shop', function() {
-    return Inertia::render('Shop');
-})->name('shop');
+Route::get('/shop', [ShopController::class, 'show'])->name('shop');
 
 Route::prefix('/competition')->name('competition')->group(function () {
     Route::get('/{competition:slug}', [CompetitionController::class, 'show'])->name('.show');

From c55a92c11e2147adcaa270b6930fa257608613d7 Mon Sep 17 00:00:00 2001
From: toni-santos <a.oliveirasantos122@gmail.com>
Date: Wed, 27 Sep 2023 20:06:36 +0100
Subject: [PATCH 3/5] product images implemented with CRUD

---
 .../Controllers/ProductCRUDController.php     | 32 +++++++++
 app/Http/Controllers/ShopController.php       |  1 -
 app/Models/Product.php                        |  7 ++
 app/Traits/HasCV.php                          |  2 +-
 app/Traits/HasImageProduct.php                | 70 +++++++++++++++++++
 config/jetstream.php                          |  1 +
 .../2023_09_27_131517_add_product_image.php   | 28 ++++++++
 resources/js/Components/Shop/ShopItem.vue     | 22 +++---
 resources/js/Pages/CRUD/Product/Create.vue    | 10 +++
 resources/js/Pages/CRUD/Product/Edit.vue      | 14 +++-
 resources/js/Pages/Shop.vue                   | 28 +++++---
 resources/js/Types/Product.ts                 |  1 +
 12 files changed, 195 insertions(+), 21 deletions(-)
 create mode 100644 app/Traits/HasImageProduct.php
 create mode 100644 database/migrations/2023_09_27_131517_add_product_image.php

diff --git a/app/Http/Controllers/ProductCRUDController.php b/app/Http/Controllers/ProductCRUDController.php
index 10aa74e4..23264ca2 100644
--- a/app/Http/Controllers/ProductCRUDController.php
+++ b/app/Http/Controllers/ProductCRUDController.php
@@ -16,6 +16,7 @@ class ProductCRUDController extends CRUDController
         'price' => 'required|integer',
         'stock' => 'required|integer',
         'edition_id' => 'required|exists:editions,id',
+        'image' => 'nullable|mimes:jpg,jpeg,png|max:1024',
     ];
 
     protected array $search = ['name', 'price', 'stock'];
@@ -26,4 +27,35 @@ protected function with(): array
             'editions' => Edition::all(),
         ];
     }
+
+    protected function created(array $new): ?array
+    {
+        $product = Product::create([
+            'name' => $new['name'],
+            'price' => $new['price'],
+            'stock' => $new['stock'],
+            'edition_id' => $new['edition_id'],
+        ]);
+
+        if (isset($new['image'])) {
+            $product->updateImageProduct($new['image']);
+        }
+
+        return null;
+    }
+
+    protected function updated($old, array $new): ?array
+    {
+
+        if (isset($new['image'])) {
+            $old->updateImageProduct($new['image']);
+        }
+
+        return [
+            'name' => $new['name'],
+            'price' => $new['price'],
+            'stock' => $new['stock'],
+            'edition_id' => $new['edition_id'],
+        ];
+    }
 }
diff --git a/app/Http/Controllers/ShopController.php b/app/Http/Controllers/ShopController.php
index ddb4bd72..daddb634 100644
--- a/app/Http/Controllers/ShopController.php
+++ b/app/Http/Controllers/ShopController.php
@@ -2,7 +2,6 @@
 
 namespace App\Http\Controllers;
 
-use App\Models\Event;
 use App\Models\Product;
 use Illuminate\Http\Request;
 use Inertia\Inertia;
diff --git a/app/Models/Product.php b/app/Models/Product.php
index 1ac43bb9..be1d1224 100644
--- a/app/Models/Product.php
+++ b/app/Models/Product.php
@@ -2,6 +2,7 @@
 
 namespace App\Models;
 
+use App\Traits\HasImageProduct;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
@@ -10,6 +11,7 @@
 class Product extends Model
 {
     use HasFactory;
+    use HasImageProduct;
 
     /**
      * The attributes that are mass assignable.
@@ -21,6 +23,11 @@ class Product extends Model
         'price',
         'stock',
         'edition_id',
+        'image_path',
+    ];
+
+    protected $appends = [
+        'image_product_url',
     ];
 
     public function edition(): BelongsTo
diff --git a/app/Traits/HasCV.php b/app/Traits/HasCV.php
index 8ec7fb1b..7aab4bbc 100644
--- a/app/Traits/HasCV.php
+++ b/app/Traits/HasCV.php
@@ -38,7 +38,7 @@ public function updateCV(UploadedFile $cv, $storagePath = 'cvs')
      */
     public function deleteCV()
     {
-        //missing check to verify if user can manage CVs
+        //#TODO: missing check to verify if user can manage CVs
 
         if (is_null($this->cv_path)) {
             return;
diff --git a/app/Traits/HasImageProduct.php b/app/Traits/HasImageProduct.php
new file mode 100644
index 00000000..991d4335
--- /dev/null
+++ b/app/Traits/HasImageProduct.php
@@ -0,0 +1,70 @@
+<?php
+
+namespace App\Traits;
+
+use Illuminate\Database\Eloquent\Casts\Attribute;
+use Illuminate\Http\UploadedFile;
+use Illuminate\Support\Facades\Storage;
+
+trait HasImageProduct
+{
+    /**
+     * Update the user's CV.
+     *
+     * @param  string  $storagePath
+     * @return void
+     */
+    public function updateImageProduct(UploadedFile $image, $storagePath = 'product-images')
+    {
+
+        tap($this->image_path, function ($previous) use ($image, $storagePath) {
+            if ($previous) {
+                Storage::disk($this->ImageProductDisk())->delete($previous);
+            }
+
+            $this->forceFill([
+                'image_path' => $image->storePublicly(
+                    $storagePath, ['disk' => $this->ImageProductDisk()]
+                ),
+            ])->save();
+        });
+    }
+
+    /**
+     * Delete the user's CV.
+     *
+     * @return void
+     */
+    public function deleteImageProduct()
+    {
+        if (is_null($this->image_path)) {
+            return;
+        }
+
+        Storage::disk($this->ImageProductDisk())->delete($this->image_path);
+
+        $this->forceFill([
+            'image_path' => null,
+        ])->save();
+    }
+
+    /**
+     * Get the URL to the user's CV.
+     */
+    public function ImageProductUrl(): Attribute
+    {
+        return Attribute::get(function () {
+            return Storage::disk($this->ImageProductDisk())->url($this->image_path);
+        });
+    }
+
+    /**
+     * Get the disk that CVs should be stored on.
+     *
+     * @return string
+     */
+    protected function ImageProductDisk()
+    {
+        return config('jetstream.product_image_disk', 'public');
+    }
+}
diff --git a/config/jetstream.php b/config/jetstream.php
index ac6099f6..3a1d273d 100644
--- a/config/jetstream.php
+++ b/config/jetstream.php
@@ -78,5 +78,6 @@
 
     'profile_photo_disk' => 'public',
     'cv_disk' => 'public',
+    'product_image_disk' => 'public',
 
 ];
diff --git a/database/migrations/2023_09_27_131517_add_product_image.php b/database/migrations/2023_09_27_131517_add_product_image.php
new file mode 100644
index 00000000..8f788c50
--- /dev/null
+++ b/database/migrations/2023_09_27_131517_add_product_image.php
@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('products', function (Blueprint $table) {
+            $table->string('image_path', 2048)->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('products', function (Blueprint $table) {
+            $table->dropColumn('image_path');
+        });
+    }
+};
diff --git a/resources/js/Components/Shop/ShopItem.vue b/resources/js/Components/Shop/ShopItem.vue
index 6ac32107..9752c252 100644
--- a/resources/js/Components/Shop/ShopItem.vue
+++ b/resources/js/Components/Shop/ShopItem.vue
@@ -1,23 +1,25 @@
 <script setup lang="ts">
-import type Product from '@/Types/Product';
-import { defineProps } from 'vue';
+import type Product from "@/Types/Product";
 
 interface Props {
     product: Product;
 }
 
-const item = defineProps<Props>();
+defineProps<Props>();
 </script>
 
 <template>
-    <div class="flex flex-col border-2 border-black max-w-[20em]">
-        <img class="border-b-2 border-black max-w-[20em] h-[20em] object-cover" src="https://picsum.photos/200/300">
-        <div class="flex flex-col bg-2023-orange text-white px-4 py-2">
+    <div class="flex max-w-[20em] flex-col border-2 border-black">
+        <img
+            class="h-[20em] max-w-[20em] border-b-2 border-black object-cover"
+            :src="product.image_product_url"
+        />
+        <div class="flex flex-col bg-2023-orange px-4 py-2 text-white">
             <h2 class="text-xl font-bold">{{ product.name }}</h2>
-            <div class="self-end flex flex-row gap-2 text-xl">
+            <div class="flex flex-row gap-2 self-end text-xl">
                 <p>{{ product.price }}</p>
-                <img class="w-5" src="/images/cy-sinf-small.svg">
+                <img class="w-5" src="/images/cy-sinf-small.svg" />
             </div>
-        </div> 
+        </div>
     </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/resources/js/Pages/CRUD/Product/Create.vue b/resources/js/Pages/CRUD/Product/Create.vue
index 018bfb6f..448552af 100644
--- a/resources/js/Pages/CRUD/Product/Create.vue
+++ b/resources/js/Pages/CRUD/Product/Create.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import ImageInput from "@/Components/ImageInput.vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import TextInput from "@/Components/TextInput.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
@@ -19,6 +20,7 @@ const form = useForm({
     price: "",
     stock: "",
     edition_id: "",
+    image: null as File | null,
 });
 
 const submit = () => {
@@ -29,6 +31,14 @@ const submit = () => {
 <template>
     <CardLayout title="Criar produto">
         <form class="contents" @submit.prevent="submit">
+            <ImageInput
+                id="image"
+                v-model="form.image"
+                label="Imagem do produto"
+                class="self-stretch"
+                :error-message="form.errors.image"
+            />
+
             <TextInput
                 id="name"
                 v-model="form.name"
diff --git a/resources/js/Pages/CRUD/Product/Edit.vue b/resources/js/Pages/CRUD/Product/Edit.vue
index c3114f4c..f6fb411f 100644
--- a/resources/js/Pages/CRUD/Product/Edit.vue
+++ b/resources/js/Pages/CRUD/Product/Edit.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import ImageInput from "@/Components/ImageInput.vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import TextInput from "@/Components/TextInput.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
@@ -17,20 +18,31 @@ interface Props {
 const { item: product } = defineProps<Props>();
 
 const form = useForm({
+    _method: "PUT",
     name: product.name,
     price: product.price.toString(),
     stock: product.stock.toString(),
     edition_id: product.edition_id.toString(),
+    image: null as File | null,
 });
 
 const submit = () => {
-    form.put(route("admin.products.update", product));
+    form.post(route("admin.products.update", product));
 };
 </script>
 
 <template>
     <CardLayout title="Editar produto">
         <form class="contents" @submit.prevent="submit">
+            <ImageInput
+                id="image"
+                v-model="form.image"
+                :initial-preview="item.image_product_url"
+                label="Imagem do produto"
+                class="self-stretch"
+                :error-message="form.errors.image"
+            />
+
             <TextInput
                 id="name"
                 v-model="form.name"
diff --git a/resources/js/Pages/Shop.vue b/resources/js/Pages/Shop.vue
index c7480043..bd89fc3a 100644
--- a/resources/js/Pages/Shop.vue
+++ b/resources/js/Pages/Shop.vue
@@ -1,17 +1,29 @@
 <script setup lang="ts">
-import AppLayout from '@/Layouts/AppLayout.vue';
-import ShopItem from '@/Components/Shop/ShopItem.vue';
-
+import AppLayout from "@/Layouts/AppLayout.vue";
+import ShopItem from "@/Components/Shop/ShopItem.vue";
 </script>
 
 <template>
     <AppLayout title="Loja">
-        <div class="flex self-center justify-center content-center items-center py-10">
-            <h1 class="w-fit border border-black shadow-2023-teal shadow-md bg-2023-red text-white text-2xl font-bold p-2 px-5">Loja</h1>
+        <div
+            class="flex content-center items-center justify-center self-center py-10"
+        >
+            <h1
+                class="w-fit border border-black bg-2023-red p-2 px-5 text-2xl font-bold text-white shadow-md shadow-2023-teal"
+            >
+                Loja
+            </h1>
         </div>
-        <section class="grid gap-10 align-center justify-center px-32" style="grid-template-columns: repeat(auto-fill, minmax(18em, 20em));">
-            <ShopItem v-for="product in $page.props.products" :key="product" :product="product">
+        <section
+            class="align-center grid justify-center gap-10 px-32"
+            style="grid-template-columns: repeat(auto-fill, minmax(18em, 20em))"
+        >
+            <ShopItem
+                v-for="product in $page.props.products"
+                :key="product"
+                :product="product"
+            >
             </ShopItem>
         </section>
     </AppLayout>
-</template>
\ No newline at end of file
+</template>
diff --git a/resources/js/Types/Product.ts b/resources/js/Types/Product.ts
index 80008885..d12b3b7d 100644
--- a/resources/js/Types/Product.ts
+++ b/resources/js/Types/Product.ts
@@ -5,4 +5,5 @@ export default interface Product extends Model {
     price: number;
     stock: number;
     edition_id: number;
+    image_product_url: string;
 }

From bf0b2964e9f010ee4e14a2f16b6f141ecf206a27 Mon Sep 17 00:00:00 2001
From: toni-santos <a.oliveirasantos122@gmail.com>
Date: Thu, 28 Sep 2023 20:39:32 +0100
Subject: [PATCH 4/5] added confirmation modal and code cleanup

---
 app/Http/Controllers/ShopController.php   |  5 +---
 resources/js/Components/Shop/ShopItem.vue | 28 ++++++++++++++++++++++-
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/app/Http/Controllers/ShopController.php b/app/Http/Controllers/ShopController.php
index daddb634..7487ab8c 100644
--- a/app/Http/Controllers/ShopController.php
+++ b/app/Http/Controllers/ShopController.php
@@ -2,7 +2,6 @@
 
 namespace App\Http\Controllers;
 
-use App\Models\Product;
 use Illuminate\Http\Request;
 use Inertia\Inertia;
 
@@ -16,10 +15,8 @@ public function show(Request $request)
             return response('No edition found', 500);
         }
 
-        $products = Product::where('edition_id', $edition->id)->get();
-
         return Inertia::render('Shop', [
-            'products' => $products,
+            'products' => $edition->products,
         ]);
     }
 }
diff --git a/resources/js/Components/Shop/ShopItem.vue b/resources/js/Components/Shop/ShopItem.vue
index 9752c252..799d1b3b 100644
--- a/resources/js/Components/Shop/ShopItem.vue
+++ b/resources/js/Components/Shop/ShopItem.vue
@@ -1,5 +1,13 @@
 <script setup lang="ts">
 import type Product from "@/Types/Product";
+import PrimaryButton from "@/Components/PrimaryButton.vue";
+import { ref } from "vue";
+import { VueFinalModal } from "vue-final-modal";
+import "vue-final-modal/style.css";
+
+const options = ref({
+    modelValue: false,
+});
 
 interface Props {
     product: Product;
@@ -14,7 +22,10 @@ defineProps<Props>();
             class="h-[20em] max-w-[20em] border-b-2 border-black object-cover"
             :src="product.image_product_url"
         />
-        <div class="flex flex-col bg-2023-orange px-4 py-2 text-white">
+        <div
+            class="flex cursor-pointer flex-col bg-2023-orange px-4 py-2 text-white"
+            @click="options.modelValue = true"
+        >
             <h2 class="text-xl font-bold">{{ product.name }}</h2>
             <div class="flex flex-row gap-2 self-end text-xl">
                 <p>{{ product.price }}</p>
@@ -22,4 +33,19 @@ defineProps<Props>();
             </div>
         </div>
     </div>
+    <VueFinalModal
+        v-model="options.modelValue"
+        class="flex items-center justify-center"
+        content-class="max-w-xl mx-4 p-4 bg-2023-bg border border-black border-solid flex relative justify-center items-center flex-col gap-8"
+    >
+        <img
+            :src="product.image_product_url"
+            class="w-auto justify-center border border-solid border-black shadow-xl shadow-2023-teal-dark"
+        />
+        <p>
+            Confirmar compra de <b>{{ product.name }}</b> por
+            {{ product.price }}?
+        </p>
+        <PrimaryButton> Comprar </PrimaryButton>
+    </VueFinalModal>
 </template>

From 4ed2a84393640954348171a0cf3f20d202ebd409 Mon Sep 17 00:00:00 2001
From: toni-santos <a.oliveirasantos122@gmail.com>
Date: Sat, 30 Sep 2023 19:02:34 +0100
Subject: [PATCH 5/5] add shop to navbar and fix mobile navbar

---
 resources/js/Components/HamburgerMenu.vue | 18 +++++++-----------
 resources/js/Components/Navbar.vue        |  3 ++-
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/resources/js/Components/HamburgerMenu.vue b/resources/js/Components/HamburgerMenu.vue
index ceabd10a..17477ed6 100644
--- a/resources/js/Components/HamburgerMenu.vue
+++ b/resources/js/Components/HamburgerMenu.vue
@@ -5,6 +5,7 @@ import route, {
     type QueryParams,
     type RouteParamsWithQueryOverload,
 } from "ziggy-js";
+import type Competition from "@/Types/Competition";
 
 interface Route {
     label: string;
@@ -17,7 +18,7 @@ const open = ref(false);
 const props = defineProps<{
     options: {
         pages: Routes;
-        activities: Routes;
+        competitions: Competition[];
         editions: number[];
     };
 }>();
@@ -78,21 +79,16 @@ watch(open, () => {
         </div>
         <section class="flex flex-col items-center pt-6">
             <h2 class="pb-3 text-center font-bold text-2023-orange">
-                Atividades
+                Competições
             </h2>
             <template
-                v-for="({ label, _query }, page) in props.options.activities"
-                :key="page"
+                v-for="competition in props.options.competitions"
+                :key="competition.id"
             >
                 <ResponsiveNavLink
-                    :href="
-                        route(route().has(page) ? page : 'home', {
-                            _query,
-                        } as RouteParamsWithQueryOverload)
-                    "
-                    :active="page === route().current()"
+                    :href="route('competition.show', { competition })"
                 >
-                    {{ label }}
+                    {{ competition.name }}
                 </ResponsiveNavLink>
             </template>
         </section>
diff --git a/resources/js/Components/Navbar.vue b/resources/js/Components/Navbar.vue
index c09ae544..a8e897d3 100644
--- a/resources/js/Components/Navbar.vue
+++ b/resources/js/Components/Navbar.vue
@@ -36,6 +36,7 @@ const pageRoutes: Routes = {
             day: 1,
         },
     },
+    shop: { label: "Loja" },
     team: { label: "Equipa" },
     // sponsors: { label: "Patrocínios" },
     // contacts: { label: "Contactos" },
@@ -53,7 +54,7 @@ const editionRoutes = [2022, 2021, 2020, 2019, 2018];
 
 const options = {
     pages: pageRoutes,
-    activities: activityRoutes,
+    competitions: usePage().props.competitions,
     editions: editionRoutes,
 };