From 6647c656900a13865cacd76b05388cec777815b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dani=C3=ABl=20van=20Drunen?= <daniel@pixely.me>
Date: Wed, 25 Oct 2023 14:22:32 +0200
Subject: [PATCH] Create endpoint for fetching transactions

---
 .../Controllers/Api/TransactionController.php | 26 ++++++
 app/Http/Resources/TransactionResource.php    | 23 +++++
 app/Providers/AppServiceProvider.php          |  3 +
 resources/assets/js/prototype/app.js          |  5 ++
 .../js/prototype/components/Navigation.vue    | 14 +++
 .../assets/js/prototype/screens/Dashboard.vue |  3 +-
 .../prototype/screens/Transactions/Index.vue  | 89 +++++++++++++++++++
 routes/api.php                                |  3 +
 8 files changed, 165 insertions(+), 1 deletion(-)
 create mode 100644 app/Http/Controllers/Api/TransactionController.php
 create mode 100644 app/Http/Resources/TransactionResource.php
 create mode 100644 resources/assets/js/prototype/components/Navigation.vue
 create mode 100644 resources/assets/js/prototype/screens/Transactions/Index.vue

diff --git a/app/Http/Controllers/Api/TransactionController.php b/app/Http/Controllers/Api/TransactionController.php
new file mode 100644
index 00000000..9767316f
--- /dev/null
+++ b/app/Http/Controllers/Api/TransactionController.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use App\Http\Resources\TransactionResource;
+use App\Models\Earning;
+use App\Models\Spending;
+
+class TransactionController extends Controller
+{
+    public function index()
+    {
+        $transactions = collect();
+
+        foreach (Earning::all() as $earning) {
+            $transactions->push($earning);
+        }
+
+        foreach (Spending::all() as $spending) {
+            $transactions->push($spending);
+        }
+
+        return TransactionResource::collection($transactions);
+    }
+}
diff --git a/app/Http/Resources/TransactionResource.php b/app/Http/Resources/TransactionResource.php
new file mode 100644
index 00000000..680ecd92
--- /dev/null
+++ b/app/Http/Resources/TransactionResource.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Models\Earning;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class TransactionResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        $isEarning = get_class($this->resource) === Earning::class;
+
+        return [
+            'id' => $this->id,
+            'type' => $isEarning ? 'earning' : 'spending',
+            'happened_on' => $this->happened_on,
+            'description' => $this->description,
+            'amount' => $this->amount,
+        ];
+    }
+}
diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
index 726b41ec..69a3a4f2 100644
--- a/app/Providers/AppServiceProvider.php
+++ b/app/Providers/AppServiceProvider.php
@@ -4,6 +4,7 @@
 
 use App\Helper;
 use App\Models\Space;
+use Illuminate\Http\Resources\Json\JsonResource;
 use Illuminate\Support\ServiceProvider;
 use Auth;
 
@@ -11,6 +12,8 @@ class AppServiceProvider extends ServiceProvider
 {
     public function boot()
     {
+        JsonResource::withoutWrapping();
+
         view()->composer('*', function ($view) {
             $selectedSpace = session('space_id') ? Space::find(session('space_id')) : null;
 
diff --git a/resources/assets/js/prototype/app.js b/resources/assets/js/prototype/app.js
index f2e982e8..29af9bc3 100644
--- a/resources/assets/js/prototype/app.js
+++ b/resources/assets/js/prototype/app.js
@@ -5,6 +5,7 @@ import App from './components/App.vue';
 
 import Login from './screens/Login.vue';
 import Dashboard from './screens/Dashboard.vue';
+import TransactionsIndex from './screens/Transactions/Index.vue';
 
 Vue.use(VueRouter);
 
@@ -17,6 +18,10 @@ const routes = [
         path: '/prototype/dashboard',
         name: 'dashboard',
         component: Dashboard,
+    }, {
+        path: '/prototype/transactions',
+        name: 'transactions.index',
+        component: TransactionsIndex,
     },
 ];
 
diff --git a/resources/assets/js/prototype/components/Navigation.vue b/resources/assets/js/prototype/components/Navigation.vue
new file mode 100644
index 00000000..a9033b51
--- /dev/null
+++ b/resources/assets/js/prototype/components/Navigation.vue
@@ -0,0 +1,14 @@
+<script setup>
+//
+</script>
+
+<template>
+    <div class="py-4 border-b border-gray-100">
+        <div class="max-w-5xl mx-auto">
+            <div class="flex space-x-4">
+                <router-link class="py-2 px-3 block text-gray-700 rounded-md hover:bg-gray-100 hover:text-black" :to="{ name: 'dashboard' }">Dashboard</router-link>
+                <router-link class="py-2 px-3 block text-gray-700 rounded-md hover:bg-gray-100 hover:text-black" :to="{ name: 'transactions.index' }">Transactions</router-link>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/resources/assets/js/prototype/screens/Dashboard.vue b/resources/assets/js/prototype/screens/Dashboard.vue
index 4c14c6f3..c45169bc 100644
--- a/resources/assets/js/prototype/screens/Dashboard.vue
+++ b/resources/assets/js/prototype/screens/Dashboard.vue
@@ -1,9 +1,10 @@
 <script setup>
-//
+import Navigation from '../components/Navigation.vue';
 </script>
 
 <template>
     <div>
+        <Navigation />
         <div class="max-w-5xl mx-auto my-10">
             Hello world
         </div>
diff --git a/resources/assets/js/prototype/screens/Transactions/Index.vue b/resources/assets/js/prototype/screens/Transactions/Index.vue
new file mode 100644
index 00000000..5c92fabc
--- /dev/null
+++ b/resources/assets/js/prototype/screens/Transactions/Index.vue
@@ -0,0 +1,89 @@
+<script setup>
+import { computed, onMounted, ref } from 'vue';
+
+import Navigation from '../../components/Navigation.vue';
+
+const transactions = ref([]);
+
+const spans = computed(() => {
+    return transactions
+        .value
+        .map(transaction => {
+            const happenedOn = new Date(transaction.happened_on);
+
+            return {
+                month: happenedOn.getMonth() + 1,
+                year: happenedOn.getFullYear(),
+            };
+        })
+        .filter((span, i, spans) => {
+            return i === spans.findIndex(other => other.year === span.year && other.month === span.month);
+        })
+        .sort((a, b) => {
+            if (a.year === b.year) {
+                return b.month - a.month;
+            }
+
+            return b.year - a.year;
+        });
+});
+
+const getMonthName = (month) => {
+    const months = [
+        'January',
+        'February',
+        'March',
+        'April',
+        'May',
+        'June',
+        'July',
+        'August',
+        'September',
+        'October',
+        'November',
+        'December',
+    ];
+
+    return months[month - 1];
+};
+
+const getTransactionsBySpan = (span) => {
+    return transactions.value.filter(transaction => {
+        const happenedOn = new Date(transaction.happened_on);
+
+        return happenedOn.getMonth() + 1 === span.month && happenedOn.getFullYear() === span.year;
+    });
+};
+
+const fetchTransactions = () => {
+    fetch('/api/transactions')
+        .then(response => response.json())
+        .then(data => {
+            transactions.value = data;
+        });
+};
+
+onMounted(() => {
+    fetchTransactions();
+});
+</script>
+
+<template>
+    <div>
+        <Navigation />
+        <div class="max-w-3xl mx-auto my-10 space-y-10">
+            <div v-for="span in spans" class="flex">
+                <div class="w-48">
+                    <div class="font-medium">{{ getMonthName(span.month) }}</div>
+                    <div class="mt-1 text-sm text-gray-500">{{ span.year }}</div>
+                </div>
+                <div class="flex-1 space-y-1">
+                    <div class="flex items-center justify-between" v-for="transaction in getTransactionsBySpan(span)">
+                        <div class="text-sm text-gray-500">{{ transaction.description }}</div>
+                        <div class="text-sm" :class="'text-' + (transaction.type === 'earning' ? 'green' : 'red') + '-600'">+{{ (transaction.amount / 100).toFixed(2) }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/routes/api.php b/routes/api.php
index 3b963692..1ab5db4f 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -1,6 +1,9 @@
 <?php
 
 use App\Http\Controllers\Api\LogInController;
+use App\Http\Controllers\Api\TransactionController;
 use Illuminate\Support\Facades\Route;
 
 Route::post('/log-in', LogInController::class);
+
+Route::get('/transactions', [TransactionController::class, 'index']);