From 679169e4fb59279fc96e248ac27f1d483bf69d7d Mon Sep 17 00:00:00 2001
From: mohamad <mohamad>
Date: Sun, 1 Jun 2025 14:10:37 +0200
Subject: [PATCH] refactor: Simplify ChoresPage structure and enhance form
 functionality

- Removed redundant form elements and improved the layout for better readability.
- Streamlined the chore creation and editing process with enhanced validation and auto-save features.
- Updated keyboard shortcuts for improved accessibility and user experience.
- Enhanced modal interactions and improved loading states during data fetching.
- Cleaned up unused code and optimized the overall component structure.
---
 fe/src/pages/ChoresPage.vue | 98 ++++++++++++++++++++-----------------
 1 file changed, 53 insertions(+), 45 deletions(-)

diff --git a/fe/src/pages/ChoresPage.vue b/fe/src/pages/ChoresPage.vue
index 65a1978..7166585 100644
--- a/fe/src/pages/ChoresPage.vue
+++ b/fe/src/pages/ChoresPage.vue
@@ -300,7 +300,7 @@
 <script setup lang="ts">
 import { ref, onMounted, computed, onUnmounted, watch, onBeforeUnmount } from 'vue'
 import { format, startOfDay, addDays, addWeeks, isBefore, isEqual, startOfMonth, endOfMonth, eachDayOfInterval, isSameMonth, isToday as isTodayDate } from 'date-fns'
-import { choreService } from '../services/choreService' // Assuming choreService exists
+import { choreService } from '../services/choreService'
 import { useNotificationStore } from '../stores/notifications'
 import type { Chore as OriginalChore, ChoreCreate as OriginalChoreCreate, ChoreUpdate, ChoreFrequency } from '../types/chore' // Assuming these types exist
 import { useRoute } from 'vue-router'
@@ -317,6 +317,10 @@ interface ChoreCreate extends OriginalChoreCreate {
   completed_at: string | null;
 }
 
+interface ChoreUpdate extends OriginalChoreUpdate {
+  is_completed?: boolean;
+  completed_at?: string | null;
+}
 
 const notificationStore = useNotificationStore()
 const route = useRoute()
@@ -329,19 +333,24 @@ const showDeleteDialog = ref(false)
 const isEditing = ref(false)
 const selectedChore = ref<Chore | null>(null)
 const showShortcutsModal = ref(false)
+const activeView = ref('today')
+const viewMode = ref<'calendar' | 'list'>('calendar')
+const currentDate = ref(new Date())
+const isLoading = ref(true)
 
-const cachedChores = useStorage<Chore[]>('cached-chores-v2', []) // Changed key to avoid conflicts with old cache
+const cachedChores = useStorage<Chore[]>('cached-chores-v2', [])
 const cachedTimestamp = useStorage<number>('cached-chores-timestamp-v2', 0)
 const CACHE_DURATION = 5 * 60 * 1000;
 
 const loadCachedData = () => {
   const now = Date.now();
   if (cachedChores.value.length > 0 && (now - cachedTimestamp.value) < CACHE_DURATION) {
-    chores.value = cachedChores.value.map(c => ({ // Ensure cached items have new properties
+    chores.value = cachedChores.value.map(c => ({
       ...c,
       is_completed: c.is_completed || false,
       completed_at: c.completed_at || null
     }));
+    isLoading.value = false;
   }
 };
 
@@ -370,33 +379,25 @@ const frequencyOptions = [
   { label: 'Custom', value: 'custom' as ChoreFrequency }
 ]
 
-// Add loading state
-const isLoading = ref(true)
-
 const loadChores = async () => {
-  isLoading.value = true
   try {
-    const fetchedChores = await choreService.getAllChores() as OriginalChore[]
-    chores.value = fetchedChores.map(c => ({
-      ...c,
-      is_completed: (c as Chore).is_completed || false,
-      completed_at: (c as Chore).completed_at || null,
-    }))
-    cachedChores.value = chores.value
-    cachedTimestamp.value = Date.now()
+    const fetchedChores = await choreService.getAllChores();
+    chores.value = fetchedChores.map(chore => ({
+      ...chore,
+      is_completed: (chore as Chore).is_completed || false,
+      completed_at: (chore as Chore).completed_at || null
+    } as Chore));
+    cachedChores.value = [...chores.value];
+    cachedTimestamp.value = Date.now();
   } catch (error) {
-    console.error('Failed to load all chores:', error)
-    notificationStore.addNotification({ message: 'Failed to load chores', type: 'error' })
-    if (cachedChores.value.length === 0) chores.value = []
+    console.error('Failed to load chores:', error);
+    notificationStore.addNotification({ message: 'Failed to load chores', type: 'error' });
   } finally {
-    isLoading.value = false
+    isLoading.value = false;
   }
-}
+};
 
 // Calendar state
-const viewMode = ref<'calendar' | 'list'>('calendar')
-const currentDate = ref(new Date())
-
 const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
 
 const currentMonthYear = computed(() => {
@@ -443,7 +444,7 @@ const nextMonth = () => {
 }
 
 const openCreateChoreModal = (groupId: number | null, date?: Date) => {
-  console.log('Opening create modal', { groupId, date }) // Debug log
+  console.log('Opening create modal', { groupId, date })
   isEditing.value = false
   choreForm.value = {
     name: '',
@@ -460,7 +461,7 @@ const openCreateChoreModal = (groupId: number | null, date?: Date) => {
 }
 
 const openEditChoreModal = (chore: Chore) => {
-  console.log('Opening edit modal', chore) // Debug log
+  console.log('Opening edit modal', chore)
   isEditing.value = true
   selectedChore.value = chore
   choreForm.value = {
@@ -478,33 +479,40 @@ const openEditChoreModal = (chore: Chore) => {
 }
 
 const onSubmit = async () => {
-  if (!validateForm()) return
+  if (!validateForm()) return;
 
   try {
-    const choreData: ChoreCreate | ChoreUpdate = { ...choreForm.value }
-
-    if (choreData.frequency !== 'custom') {
-      choreData.custom_interval_days = undefined
-    }
-
-    let notificationMessage = ''
-
     if (isEditing.value && selectedChore.value) {
-      await choreService.updateChore(selectedChore.value.id, choreData as ChoreUpdate)
-      notificationMessage = `Chore updated successfully`
+      // Update existing chore
+      const updateData: ChoreUpdate = {
+        ...choreForm.value,
+        is_completed: selectedChore.value.is_completed,
+        completed_at: selectedChore.value.completed_at
+      };
+      const updatedChore = await choreService.updateChore(selectedChore.value.id, updateData);
+      const index = chores.value.findIndex(c => c.id === selectedChore.value?.id);
+      if (index !== -1) {
+        chores.value[index] = { ...updatedChore, is_completed: selectedChore.value.is_completed, completed_at: selectedChore.value.completed_at } as Chore;
+      }
+      notificationStore.addNotification({ message: 'Chore updated successfully', type: 'success' });
     } else {
-      await choreService.createChore(choreData as ChoreCreate)
-      notificationMessage = `Chore created successfully`
+      // Create new chore
+      const createData: ChoreCreate = {
+        ...choreForm.value,
+        is_completed: false,
+        completed_at: null
+      };
+      const newChore = await choreService.createChore(createData);
+      chores.value.push(newChore as Chore);
+      notificationStore.addNotification({ message: 'Chore created successfully', type: 'success' });
     }
-
-    notificationStore.addNotification({ message: notificationMessage, type: 'success' })
-    showChoreModal.value = false
-    loadChores()
+    showChoreModal.value = false;
+    hasUnsavedChanges.value = false;
   } catch (error) {
-    console.error('Failed to save chore:', error)
-    notificationStore.addNotification({ message: `Failed to ${isEditing.value ? 'update' : 'create'} chore`, type: 'error' })
+    console.error('Failed to save chore:', error);
+    notificationStore.addNotification({ message: 'Failed to save chore', type: 'error' });
   }
-}
+};
 
 const confirmDeleteChore = (chore: Chore) => {
   selectedChore.value = chore