Support creation of transactions in SPA prototype

Author: range-of-motion

app/Http/Controllers/Api/TransactionController.php

@@ -33,4 +33,46 @@ public function index(Request $request)
 
         return TransactionResource::collection($transactions);
     }
+
+    public function store(Request $request)
+    {
+        $apiKey = ApiKey::query()
+            ->where('token', $request->header('api-key'))
+            ->first();
+
+        if (!$apiKey) {
+            abort(401);
+        }
+
+        $spaceId = $apiKey->user->spaces()->first()->id;
+
+        $request->validate([
+            'type' => 'in:earning,spending',
+            // TODO
+        ]);
+
+        if ($request->input('type') === 'earning') {
+            Earning::create([
+                'space_id' => $spaceId,
+                'recurring_id' => null, // TODO
+                'happened_on' => $request->input('happened_on'),
+                'description' => $request->input('description'),
+                'amount' => $request->input('amount')
+            ]);
+        }
+
+        if ($request->input('type') === 'spending') {
+            Spending::create([
+                'space_id' => $spaceId,
+                'import_id' => null, // TODO
+                'recurring_id' => null, // TODO
+                'tag_id' => null, // TODO
+                'happened_on' => $request->input('happened_on'),
+                'description' => $request->input('description'),
+                'amount' => $request->input('amount')
+            ]);
+        }
+
+        return [];
+    }
 }

resources/assets/js/prototype/app.js

@@ -6,6 +6,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';
+import TransactionsCreate from './screens/Transactions/Create.vue';
 
 Vue.use(VueRouter);
 
@@ -22,6 +23,10 @@ const routes = [
         path: '/prototype/transactions',
         name: 'transactions.index',
         component: TransactionsIndex,
+    }, {
+        path: '/prototype/transactions/create',
+        name: 'transactions.create',
+        component: TransactionsCreate,
     },
 ];
 

resources/assets/js/prototype/screens/Transactions/Create.vue

@@ -0,0 +1,59 @@
+<script setup>
+import axios from 'axios';
+import { ref } from 'vue';
+
+import Navigation from '../../components/Navigation.vue';
+
+const type = ref('earning');
+const happened_on = ref('2023-11-02');
+const description = ref('');
+const amount = ref(10.00);
+
+const create = () => {
+    axios.post('/api/transactions', {
+        type: type.value,
+        happened_on: happened_on.value,
+        description: description.value,
+        amount: amount.value,
+    }, {
+        headers: {
+            'api-key': localStorage.getItem('api_key'),
+        },
+    })
+        .then(() => {
+            alert('wtf, dat werkte');
+        })
+        .catch(() => {
+            alert('Something went wrong');
+        });
+};
+</script>
+
+<template>
+    <div>
+        <Navigation />
+        <div class="max-w-sm mx-auto my-10 space-y-5">
+            <div class="flex space-x-3">
+                <button class="px-4 py-2 text-sm border border-gray-200 rounded-md" :class="{ 'bg-gray-100': type === 'earning' }" @click="type = 'earning'">Earning</button>
+                <button class="px-4 py-2 text-sm border border-gray-200 rounded-md" :class="{ 'bg-gray-100': type === 'spending' }" @click="type = 'spending'">Spending</button>
+            </div>
+            <div v-if="type === 'spending'">
+                <label class="mb-1 block text-sm">Tag</label>
+                <input class="w-full px-3 py-2 text-sm border rounded-md" type="text" value="Coming soon" disabled />
+            </div>
+            <div>
+                <label class="mb-1 block text-sm">Date</label>
+                <input class="w-full px-3 py-2 text-sm border rounded-md" type="text" v-model="happened_on" />
+            </div>
+            <div>
+                <label class="mb-1 block text-sm">Description</label>
+                <input class="w-full px-3 py-2 text-sm border rounded-md" type="text" :placeholder="type === 'earning' ? 'Paycheck February' : 'Birthday present for Angela'" v-model="description" />
+            </div>
+            <div>
+                <label class="mb-1 block text-sm">Amount</label>
+                <input class="w-full px-3 py-2 text-sm border rounded-md" type="text" v-model="amount" />
+            </div>
+            <button class="px-4 py-2 text-sm border border-gray-200 rounded-md" @click="create()">Create</button>
+        </div>
+    </div>
+</template>

routes/api.php

@@ -7,3 +7,4 @@
 Route::post('/log-in', LogInController::class);
 
 Route::get('/transactions', [TransactionController::class, 'index']);
+Route::post('/transactions', [TransactionController::class, 'store']);

routes/web.php

@@ -135,5 +135,5 @@
 Route::prefix('prototype')
     ->group(function () {
         Route::get('/', fn () => 'Hello world');
-        Route::get('/{any}', \App\Http\Controllers\PrototypeController::class);
+        Route::get('/{any}', \App\Http\Controllers\PrototypeController::class)->where('any', '.*');
     });