From c244224382dc30d718dcef43210e73ece0dda31a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dani=C3=ABl=20van=20Drunen?= <daniel@pixely.me>
Date: Sun, 3 Dec 2023 21:08:50 +0100
Subject: [PATCH] Show tags whilst creating spending in SPA prototype

---
 app/Http/Controllers/Api/TagController.php    | 18 ++++++++++++++++++
 .../Controllers/Api/TransactionController.php |  4 ++--
 .../prototype/screens/Transactions/Create.vue | 19 ++++++++++++++++++-
 routes/api.php                                |  4 ++++
 4 files changed, 42 insertions(+), 3 deletions(-)
 create mode 100644 app/Http/Controllers/Api/TagController.php

diff --git a/app/Http/Controllers/Api/TagController.php b/app/Http/Controllers/Api/TagController.php
new file mode 100644
index 00000000..3ad7bf7a
--- /dev/null
+++ b/app/Http/Controllers/Api/TagController.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use App\Http\Resources\TagResource;
+use Illuminate\Http\Request;
+
+class TagController extends Controller
+{
+    public function index(Request $request)
+    {
+        /** @var ApiKey $apiKey */
+        $apiKey = $request->get('apiKey');
+
+        return TagResource::collection($apiKey->user->spaces()->first()->tags);
+    }
+}
diff --git a/app/Http/Controllers/Api/TransactionController.php b/app/Http/Controllers/Api/TransactionController.php
index 9da16e54..61a76b9d 100644
--- a/app/Http/Controllers/Api/TransactionController.php
+++ b/app/Http/Controllers/Api/TransactionController.php
@@ -37,7 +37,7 @@ public function store(Request $request)
 
         $request->validate([
             'type' => ['required', 'in:earning,spending'],
-            // 'tag_id' => ['nullable', 'exists:tags,id'], // TODO CHECK IF TAG BELONGS TO USER
+            'tag_id' => ['nullable', 'exists:tags,id'], // TODO: CHECK IF TAG BELONGS TO USER
             'happened_on' => ['required', 'date', 'date_format:Y-m-d'],
             'description' => ['required', 'max:255'],
             'amount' => ['required', 'regex:/^\d*(\.\d{1,2})?$/'],
@@ -58,7 +58,7 @@ public function store(Request $request)
                 'space_id' => $spaceId,
                 'import_id' => null, // TODO
                 'recurring_id' => null, // TODO
-                'tag_id' => null, // TODO
+                'tag_id' => $request->input('tag_id'),
                 'happened_on' => $request->input('happened_on'),
                 'description' => $request->input('description'),
                 'amount' => (int) ($request->input('amount') * 100),
diff --git a/resources/assets/js/prototype/screens/Transactions/Create.vue b/resources/assets/js/prototype/screens/Transactions/Create.vue
index d3ee78a3..f9dfd8d6 100644
--- a/resources/assets/js/prototype/screens/Transactions/Create.vue
+++ b/resources/assets/js/prototype/screens/Transactions/Create.vue
@@ -6,14 +6,26 @@ import Navigation from '../../components/Navigation.vue';
 
 const router = getCurrentInstance().proxy.$router;
 
+const tags = ref([]);
+
 const type = ref('earning');
+const tagId = ref(null);
 const happened_on = ref(new Date().toJSON().slice(0, 10));
 const description = ref('');
 const amount = ref(10.00);
 
+const fetchTags = () => {
+    fetch('/api/tags', { headers: { 'api-key': localStorage.getItem('api_key') } })
+        .then(response => response.json())
+        .then(data => {
+            tags.value = data;
+        });
+};
+
 const create = () => {
     axios.post('/api/transactions', {
         type: type.value,
+        tag_id: tagId.value,
         happened_on: happened_on.value,
         description: description.value,
         amount: amount.value,
@@ -29,6 +41,8 @@ const create = () => {
             alert('Something went wrong');
         });
 };
+
+fetchTags();
 </script>
 
 <template>
@@ -42,7 +56,10 @@ const create = () => {
                 </div>
                 <div v-if="type === 'spending'">
                     <label class="mb-2 block text-sm dark:text-white">Tag</label>
-                    <input class="w-full px-3.5 py-2.5 text-sm dark:text-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg" type="text" value="Coming soon" disabled />
+                    <select class="w-full px-3.5 py-2.5 text-sm dark:text-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg appearance-none" v-model="tagId">
+                        <option :value="null">-</option>
+                        <option v-for="tag in tags" :key="tag.id" :value="tag.id">{{ tag.name }}</option>
+                    </select>
                 </div>
                 <div>
                     <label class="mb-2 block text-sm dark:text-white">Date</label>
diff --git a/routes/api.php b/routes/api.php
index d836dab7..45b215b1 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -2,6 +2,7 @@
 
 use App\Http\Controllers\Api\LogInController;
 use App\Http\Controllers\Api\SettingsController;
+use App\Http\Controllers\Api\TagController;
 use App\Http\Controllers\Api\TransactionController;
 use Illuminate\Support\Facades\Route;
 
@@ -12,6 +13,9 @@
         Route::resource('transactions', TransactionController::class)
             ->only(['index', 'store']);
 
+        Route::resource('tags', TagController::class)
+            ->only(['index']);
+
         Route::resource('settings', SettingsController::class)
             ->only(['index', 'store']);
     });