Merge pull request #458 from range-of-motion/create-page-in-spa-proto…

…type-that-shows-activities

Create page in SPA prototype that shows activities

app/Http/Controllers/Api/ActivitiesController.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use App\Http\Resources\ActivityResource;
+use App\Models\Activity;
+use Illuminate\Http\Request;
+
+class ActivitiesController extends Controller
+{
+    public function __invoke(Request $request)
+    {
+        /** @var ApiKey $apiKey */
+        $apiKey = $request->get('apiKey');
+
+        $activities = Activity::ofSpace($apiKey->user->spaces()->first()->id)->get();
+
+        return ActivityResource::collection($activities);
+    }
+}

app/Http/Resources/ActivityResource.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class ActivityResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'user' => $this->user
+                ? ['id' => $this->user->id, 'name' => $this->user->name]
+                : null,
+            'entity_id' => $this->entity_id,
+            'entity_type' => $this->entity_type,
+            'action' => $this->action,
+            'occurred_at' => $this->created_at,
+        ];
+    }
+}

resources/assets/js/prototype/app.js

@@ -7,6 +7,7 @@ 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';
+import Activities from './screens/Activities.vue';
 import SettingsPreferences from './screens/Settings/Preferences.vue';
 
 Vue.prototype.versionNumber = window.versionNumber;
@@ -30,6 +31,10 @@ const routes = [
         path: '/prototype/transactions/create',
         name: 'transactions.create',
         component: TransactionsCreate,
+    }, {
+        path: '/prototype/activities',
+        name: 'activities',
+        component: Activities,
     }, {
         path: '/prototype/settings/preferences',
         name: 'settings.preferences',

resources/assets/js/prototype/components/Navigation.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ArrowRightLeft, Home, LogOut, PlusCircle, Settings2 } from 'lucide-vue';
+import { ArrowRightLeft, Home, LogOut, PlusCircle, RotateCcw, Settings2 } from 'lucide-vue';
 import { getCurrentInstance } from 'vue';
 
 const router = getCurrentInstance().proxy.$router;
@@ -28,6 +28,9 @@ const logOut = () => {
                 <router-link class="flex py-1 px-3 text-gray-500 dark:text-gray-400 hover:text-black dark:hover:text-white" :to="{ name: 'transactions.create' }">
                     <PlusCircle :size="20" :strokeWidth="1.6" />
                 </router-link>
+                <router-link class="flex py-1 px-3 text-gray-500 dark:text-gray-400 hover:text-black dark:hover:text-white" :to="{ name: 'activities' }">
+                    <RotateCcw :size="16" />
+                </router-link>
                 <router-link class="flex py-1 px-3 text-gray-500 dark:text-gray-400 hover:text-black dark:hover:text-white" :to="{ name: 'settings.preferences' }">
                     <Settings2 :size="16" />
                 </router-link>

resources/assets/js/prototype/screens/Activities.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { ref } from 'vue';
+
+import Navigation from '../components/Navigation.vue';
+
+const activities = ref([]);
+
+const fetchActivities = () => {
+    fetch('/api/activities', { headers: { 'api-key': localStorage.getItem('api_key') } })
+        .then(response => response.json())
+        .then(data => {
+            activities.value = data.sort((a, b) => new Date(b.occurred_at) - new Date(a.occurred_at));
+        });
+};
+
+fetchActivities();
+</script>
+
+<template>
+    <div>
+        <Navigation />
+        <div class="my-10 mx-auto max-w-3xl">
+            <div class="p-5 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
+                <div class="relative ml-2.5 space-y-5 border-l border-gray-300">
+                    <div v-for="(activity, i) in activities" :key="i">
+                        <div class="flex items-start">
+                            <div class="absolute -left-2.5 w-5 h-5 bg-gray-100 border border-gray-300 ring-8 ring-white rounded-full"></div>
+                            <div class="pl-5">
+                                <div class="-mt-px text-sm">
+                                    <span>{{ activity.user ? activity.user.name : 'Budget' }} {{ activity.action.split('.')[1] }} {{ activity.action.split('.')[0] }} #{{ activity.entity_id }}</span>
+                                </div>
+                                <div class="mt-1 text-xs text-gray-500">{{ new Date(activity.occurred_at).toJSON().split('T')[0] }}</div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Patch (yes, it's ugly) -->
+                    <div class="absolute bottom-0 -left-2 w-4 h-4 bg-white"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

routes/api.php

@@ -1,5 +1,6 @@
 <?php
 
+use App\Http\Controllers\Api\ActivitiesController;
 use App\Http\Controllers\Api\LogInController;
 use App\Http\Controllers\Api\RecurringController;
 use App\Http\Controllers\Api\SettingsController;
@@ -20,6 +21,8 @@
         Route::resource('tags', TagController::class)
             ->only(['index']);
 
+        Route::get('/activities', ActivitiesController::class);
+
         Route::resource('settings', SettingsController::class)
             ->only(['index', 'store']);
     });