refactor: use html for now

fe/src/pages/ChoresPage.vue

@@ -300,12 +300,12 @@
 <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'
+import { choreService } from '../services/choreService' // Assuming choreService exists
 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'
+import { groupService } from '../services/groupService' // Assuming groupService exists
 import { useStorage } from '@vueuse/core'
-import { groupService } from '@/services/groupService'
 
 // Extend Chore type to include completion status
 interface Chore extends OriginalChore {
@@ -317,10 +317,6 @@ 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()
@@ -333,24 +329,19 @@ 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', [])
+const cachedChores = useStorage<Chore[]>('cached-chores-v2', []) // Changed key to avoid conflicts with old cache
 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 => ({
+    chores.value = cachedChores.value.map(c => ({ // Ensure cached items have new properties
       ...c,
       is_completed: c.is_completed || false,
       completed_at: c.completed_at || null
     }));
-    isLoading.value = false;
   }
 };
 
@@ -379,25 +370,33 @@ 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();
-    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();
+    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()
   } catch (error) {
-    console.error('Failed to load chores:', error);
-    notificationStore.addNotification({ message: 'Failed to load chores', type: '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 = []
   } 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(() => {
@@ -444,7 +443,7 @@ const nextMonth = () => {
 }
 
 const openCreateChoreModal = (groupId: number | null, date?: Date) => {
-  console.log('Opening create modal', { groupId, date })
+  console.log('Opening create modal', { groupId, date }) // Debug log
   isEditing.value = false
   choreForm.value = {
     name: '',
@@ -461,7 +460,7 @@ const openCreateChoreModal = (groupId: number | null, date?: Date) => {
 }
 
 const openEditChoreModal = (chore: Chore) => {
-  console.log('Opening edit modal', chore)
+  console.log('Opening edit modal', chore) // Debug log
   isEditing.value = true
   selectedChore.value = chore
   choreForm.value = {
@@ -479,40 +478,33 @@ const openEditChoreModal = (chore: Chore) => {
 }
 
 const onSubmit = async () => {
-  if (!validateForm()) return;
+  if (!validateForm()) return
 
   try {
-    if (isEditing.value && selectedChore.value) {
-      // 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 {
-      // 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' });
+    const choreData: ChoreCreate | ChoreUpdate = { ...choreForm.value }
+
+    if (choreData.frequency !== 'custom') {
+      choreData.custom_interval_days = undefined
     }
-    showChoreModal.value = false;
-    hasUnsavedChanges.value = false;
+
+    let notificationMessage = ''
+
+    if (isEditing.value && selectedChore.value) {
+      await choreService.updateChore(selectedChore.value.id, choreData as ChoreUpdate)
+      notificationMessage = `Chore updated successfully`
+    } else {
+      await choreService.createChore(choreData as ChoreCreate)
+      notificationMessage = `Chore created successfully`
+    }
+
+    notificationStore.addNotification({ message: notificationMessage, type: 'success' })
+    showChoreModal.value = false
+    loadChores()
   } catch (error) {
-    console.error('Failed to save chore:', error);
-    notificationStore.addNotification({ message: 'Failed to save chore', type: 'error' });
+    console.error('Failed to save chore:', error)
+    notificationStore.addNotification({ message: `Failed to ${isEditing.value ? 'update' : 'create'} chore`, type: 'error' })
   }
-};
+}
 
 const confirmDeleteChore = (chore: Chore) => {
   selectedChore.value = chore
@@ -1101,8 +1093,6 @@ watch(showShortcutsModal, (newVal) => {
   box-shadow: 6px 6px 0 #111;
 }
 
-/* Muted grey */
-
 .header-left {
   flex: 1;
   min-width: 0;
@@ -1240,11 +1230,6 @@ watch(showShortcutsModal, (newVal) => {
   font-size: 1.2rem;
 }
 
-.chore-due-date .material-icons,
-.chore-completed-date .material-icons {
-  font-size: 1.1rem;
-}
-
 /* Loading state styles */
 .neo-loading-state {
   text-align: center;