Start implementing settings in SPA prototype

Author: range-of-motion

app/Http/Controllers/Api/SettingsController.php

@@ -0,0 +1,43 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class SettingsController extends Controller
+{
+    public function index(Request $request): JsonResponse
+    {
+        /** @var ApiKey $apiKey */
+        $apiKey = $request->get('apiKey');
+
+        return response()
+            ->json([
+                'language' => $apiKey->user->language,
+                'theme' => $apiKey->user->theme,
+            ]);
+    }
+
+    public function store(Request $request): JsonResponse
+    {
+        $request->validate([
+            'language' => 'nullable|string|in:en,nl,dk,de,fr,pt,ru',
+            'theme' => 'nullable|string|in:light,dark',
+        ]);
+
+        /** @var ApiKey $apiKey */
+        $apiKey = $request->get('apiKey');
+
+        if ($request->has('language')) {
+            $apiKey->user()->update(['language' => $request->get('language')]);
+        }
+
+        if ($request->has('theme')) {
+            $apiKey->user()->update(['theme' => $request->get('theme')]);
+        }
+
+        return response()->json([]);
+    }
+}

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 SettingsPreferences from './screens/Settings/Preferences.vue';
 
 Vue.use(VueRouter);
 
@@ -27,6 +28,10 @@ const routes = [
         path: '/prototype/transactions/create',
         name: 'transactions.create',
         component: TransactionsCreate,
+    }, {
+        path: '/prototype/settings/preferences',
+        name: 'settings.preferences',
+        component: SettingsPreferences,
     },
 ];
 

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

@@ -1,5 +1,5 @@
 <script setup>
-import { ArrowRightLeft, Home, LogOut, PlusCircle } from 'lucide-vue';
+import { ArrowRightLeft, Home, LogOut, PlusCircle, 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 hover:text-black" :to="{ name: 'transactions.create' }">
                     <PlusCircle :size="20" :strokeWidth="1.6" />
                 </router-link>
+                <router-link class="flex py-1 px-3 text-gray-500 hover:text-black" :to="{ name: 'settings.preferences' }">
+                    <Settings2 :size="16" />
+                </router-link>
                 <button class="flex py-1 px-3 text-gray-500 hover:text-black" @click="logOut()">
                     <LogOut :size="16" />
                 </button>

resources/assets/js/prototype/screens/Settings/Preferences.vue

@@ -0,0 +1,62 @@
+<script setup>
+import axios from 'axios';
+import { onMounted, ref } from 'vue';
+
+import Navigation from '../../components/Navigation.vue';
+
+const language = ref('en');
+const theme = ref('light');
+
+const retrieve = () => {
+    axios
+        .get('/api/settings', { headers: { 'api-key': localStorage.getItem('api_key') } })
+        .then(response => {
+            language.value = response.data.language;
+            theme.value = response.data.theme;
+        });
+};
+
+const update = () => {
+    axios
+        .post('/api/settings', { language: language.value, theme: theme.value }, { headers: { 'api-key': localStorage.getItem('api_key') } })
+        .then(() => {
+            // Done
+        })
+        .catch(() => {
+            alert('Unable to save');
+        });
+};
+
+onMounted(() => retrieve());
+</script>
+
+<template>
+    <div>
+        <Navigation />
+        <div class="my-10 mx-auto max-w-3xl">
+            <div class="p-5 bg-white border border-gray-200 rounded-lg">
+                <div class="space-y-5 max-w-xs">
+                    <div>
+                        <div class="mb-2 text-sm">Language</div>
+                        <select class="px-3.5 py-2.5 w-full text-sm border border-gray-200 rounded-lg appearance-none" v-model="language" @change="update">
+                            <option value="en">English</option>
+                            <option value="nl">Dutch</option>
+                            <option value="dk">Danish</option>
+                            <option value="de">German</option>
+                            <option value="fr">French</option>
+                            <option value="pt">Portuguese</option>
+                            <option value="ru">Russian</option>
+                        </select>
+                    </div>
+                    <div>
+                        <div class="mb-2 text-sm">Theme</div>
+                        <select class="px-3.5 py-2.5 w-full text-sm border border-gray-200 rounded-lg appearance-none" v-model="theme" @change="update">
+                            <option value="light">Light</option>
+                            <option value="dark">Dark</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

routes/api.php

@@ -1,6 +1,7 @@
 <?php
 
 use App\Http\Controllers\Api\LogInController;
+use App\Http\Controllers\Api\SettingsController;
 use App\Http\Controllers\Api\TransactionController;
 use Illuminate\Support\Facades\Route;
 
@@ -10,4 +11,7 @@
     ->group(function () {
         Route::resource('transactions', TransactionController::class)
             ->only(['index', 'store']);
+
+        Route::resource('settings', SettingsController::class)
+            ->only(['index', 'store']);
     });