Support toggling of weekly report in settings of SPA prototype

Author: range-of-motion

app/Http/Controllers/Api/SettingsController.php

@@ -17,6 +17,7 @@ public function index(Request $request): JsonResponse
             ->json([
                 'language' => $apiKey->user->language,
                 'theme' => $apiKey->user->theme,
+                'weekly_report' => $apiKey->user->weekly_report,
             ]);
     }
 
@@ -25,6 +26,7 @@ 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',
+            'weekly_report' => 'nullable|boolean',
         ]);
 
         /** @var ApiKey $apiKey */
@@ -38,10 +40,15 @@ public function store(Request $request): JsonResponse
             $apiKey->user()->update(['theme' => $request->get('theme')]);
         }
 
+        if ($request->has('weekly_report')) {
+            $apiKey->user()->update(['weekly_report' => $request->get('weekly_report')]);
+        }
+
         return response()
             ->json([
                 'language' => $apiKey->user->language,
                 'theme' => $apiKey->user->theme,
+                'weekly_report' => $apiKey->user->weekly_report,
             ]);
     }
 }

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

@@ -6,19 +6,27 @@ import Navigation from '../../components/Navigation.vue';
 
 const language = ref('en');
 const theme = ref('light');
+const weeklyReport = ref(false);
 
 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;
+            weeklyReport.value = response.data.weekly_report;
         });
 };
 
+const toggleWeeklyReport = () => {
+    weeklyReport.value = !weeklyReport.value;
+
+    update();
+};
+
 const update = () => {
     axios
-        .post('/api/settings', { language: language.value, theme: theme.value }, { headers: { 'api-key': localStorage.getItem('api_key') } })
+        .post('/api/settings', { language: language.value, theme: theme.value, weekly_report: weeklyReport.value }, { headers: { 'api-key': localStorage.getItem('api_key') } })
         .then(response => {
             // Done
 
@@ -60,6 +68,12 @@ onMounted(() => retrieve());
                             <option value="dark">Dark</option>
                         </select>
                     </div>
+                    <div>
+                        <div class="mb-2 text-sm dark:text-white">Weekly report</div>
+                        <button class="relative flex w-9 h-6 bg-gray-200 rounded-full" :class="{ 'bg-gray-900': weeklyReport }" @click="toggleWeeklyReport()">
+                            <span class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full" :class="{ 'left-auto right-0.5': weeklyReport }"></span>
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>