Preferences editor: use optimistic updates

Author: devvir

app/Http/Controllers/LotteryController.php

@@ -77,7 +77,7 @@ public function preferences(UpdateLotteryPreferencesRequest $request)
             return back()->with('error', $e->getUserMessage());
         }
 
-        return back()->with('success', __('lottery.lottery_preferences_updated'));
+        return back();
     }
 
     /**

resources/js/components/lottery/composables/useLotteryAudits.ts

@@ -1,5 +1,5 @@
 // Copilot - Pending review
-import type { ComputedRef, Ref } from 'vue';
+import { ComputedRef } from 'vue';
 
 export interface LotteryAuditsComposable {
   hasAudits: ComputedRef<boolean>;
@@ -13,9 +13,9 @@ export interface LotteryAuditsComposable {
   initAuditTimestamp: ComputedRef<number | null>;
 }
 
-export function useLotteryAudits(
+export const useLotteryAudits = (
   lottery: ComputedRef<Lottery> | Ref<Lottery>,
-): LotteryAuditsComposable {
+): LotteryAuditsComposable => {
   const lotteryValue = isRef(lottery) ? lottery : computed(() => lottery.value);
 
   // Check if there are any audits
@@ -25,17 +25,17 @@ export function useLotteryAudits(
 
   // Check if there's a failure audit
   const hasFailure = computed(() => {
-    return !!lotteryValue.value?.audits?.some((audit) => audit.type === 'failure');
+    return !!lotteryValue.value?.audits?.some((audit: LotteryAudit) => audit.type === 'failure');
   });
 
   // Get the failure audit (most recent one if multiple)
   const failureAudit = computed(() => {
-    return lotteryValue.value?.audits?.find((audit) => audit.type === 'failure');
+    return lotteryValue.value?.audits?.find((audit: LotteryAudit) => audit.type === 'failure');
   });
 
   // Get init audit for timestamp
   const initAudit = computed(() => {
-    return lotteryValue.value?.audits?.find((audit) => audit.type === 'init');
+    return lotteryValue.value?.audits?.find((audit: LotteryAudit) => audit.type === 'init');
   });
 
   // Get timestamp from init audit (in milliseconds)
@@ -79,7 +79,7 @@ export function useLotteryAudits(
     if (!lotteryValue.value?.audits) return 0;
 
     const groupExecutions = lotteryValue.value.audits.filter(
-      (audit) => audit.type === 'group_execution',
+      (audit: LotteryAudit) => audit.type === 'group_execution',
     );
 
     return groupExecutions.length;

resources/js/components/lottery/composables/usePreferences.ts

@@ -0,0 +1,56 @@
+// Copilot - Pending review
+import { router } from '@inertiajs/vue3';
+
+export const usePreferences = (preferences: Ref<ApiResource<Unit>[]>) => {
+  // Reactive copy for optimistic updates
+  const localPreferences = ref<ApiResource<Unit>[]>([...preferences.value]);
+  const form = useForm({ preferences: localPreferences.value });
+  const disabled = ref(false);
+
+  // Track latest request to handle out-of-order responses
+  let requestCounter = 0;
+
+  // Watch for external prop changes (e.g., after reload)
+  watch(
+    preferences,
+    (newPreferences: ApiResource<Unit>[]) => {
+      localPreferences.value = [...newPreferences];
+    },
+    { deep: true },
+  );
+
+  const submit = (updatedPreferences: ApiResource<Unit>[]) => {
+    // Optimistically update local state immediately
+    localPreferences.value = [...updatedPreferences];
+
+    // Increment request counter to track this request
+    const currentRequest = ++requestCounter;
+
+    form.preferences = updatedPreferences;
+    form.post(route('lottery.preferences'), {
+      preserveScroll: true,
+      onError: () => {
+        // Only process if this is still the latest request
+        if (currentRequest === requestCounter) {
+          // Disable editing on failure
+          disabled.value = true;
+
+          // Do a partial reload to get current persisted state
+          router.reload({
+            only: ['preferences'],
+            onSuccess: () => {
+              // Re-enable after reload completes
+              disabled.value = false;
+            },
+          });
+        }
+      },
+    });
+  };
+
+  return {
+    localPreferences,
+    disabled,
+    submit,
+  };
+}

resources/js/components/lottery/member/PreferencesManager.vue

@@ -1,7 +1,9 @@
+// Copilot - Pending review
 <script setup lang="ts">
 import { Card, CardContent, CardHeader } from '@/components/card';
 import { _ } from '@/composables/useTranslations';
 import { HeartIcon } from 'lucide-vue-next';
+import { usePreferences } from '../composables/usePreferences';
 import PreferencesEmptyState from './PreferencesEmptyState.vue';
 import PreferencesGridDesktop from './PreferencesGridDesktop.vue';
 import PreferencesGridMobile from './PreferencesGridMobile.vue';
@@ -11,13 +13,7 @@ const props = defineProps<{
   preferences: ApiResource<Unit>[];
 }>();
 
-const preferences = reactive(props.preferences);
-const form = useForm({ preferences });
-
-const submit = (updatedPreferences: Unit[]) => {
-  form.preferences = updatedPreferences;
-  form.post(route('lottery.preferences'), { preserveScroll: true });
-};
+const { localPreferences, disabled, submit } = usePreferences(toRef(props, 'preferences'));
 </script>
 
 <template>
@@ -32,17 +28,17 @@ const submit = (updatedPreferences: Unit[]) => {
     </CardHeader>
 
     <CardContent class="w-full flex-1 overflow-y-auto">
-      <PreferencesEmptyState v-if="preferences.length === 0" />
+      <PreferencesEmptyState v-if="localPreferences.length === 0" />
 
       <!-- Mobile/Tablet: Vertical List -->
-      <PreferencesGridMobile :preferences :disabled="form.processing" @change="submit">
+      <PreferencesGridMobile :preferences="localPreferences" :disabled @change="submit">
         <template #unit-details="{ unit, index }">
           <PreferencesGridMobileSlot :unit :index />
         </template>
       </PreferencesGridMobile>
 
       <!-- Desktop: Grid Layout with Fixed Numbered Slots -->
-      <PreferencesGridDesktop :preferences :disabled="form.processing" @change="submit">
+      <PreferencesGridDesktop :preferences="localPreferences" :disabled @change="submit">
         <template #priority-badge="{ index }">
           <div
             v-if="index < 3"