ph5 #60
@ -1,10 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { format, startOfDay, isEqual, isToday as isTodayDate } from 'date-fns'
|
||||
import { format, startOfDay, isEqual, isToday as isTodayDate, formatDistanceToNow, parseISO } from 'date-fns'
|
||||
import { choreService } from '../services/choreService'
|
||||
import { useNotificationStore } from '../stores/notifications'
|
||||
import type { Chore, ChoreCreate, ChoreUpdate, ChoreFrequency, ChoreAssignmentUpdate } from '../types/chore'
|
||||
import type { Chore, ChoreCreate, ChoreUpdate, ChoreFrequency, ChoreAssignmentUpdate, ChoreAssignment, ChoreHistory } from '../types/chore'
|
||||
import { groupService } from '../services/groupService'
|
||||
import { useStorage } from '@vueuse/core'
|
||||
|
||||
@ -16,6 +16,8 @@ interface ChoreWithCompletion extends Chore {
|
||||
is_completed: boolean;
|
||||
completed_at: string | null;
|
||||
updating: boolean;
|
||||
assigned_user_name?: string;
|
||||
completed_by_name?: string;
|
||||
}
|
||||
|
||||
interface ChoreFormData {
|
||||
@ -35,8 +37,14 @@ const chores = ref<ChoreWithCompletion[]>([])
|
||||
const groups = ref<{ id: number, name: string }[]>([])
|
||||
const showChoreModal = ref(false)
|
||||
const showDeleteDialog = ref(false)
|
||||
const showChoreDetailModal = ref(false)
|
||||
const showHistoryModal = ref(false)
|
||||
const isEditing = ref(false)
|
||||
const selectedChore = ref<ChoreWithCompletion | null>(null)
|
||||
const selectedChoreHistory = ref<ChoreHistory[]>([])
|
||||
const selectedChoreAssignments = ref<ChoreAssignment[]>([])
|
||||
const loadingHistory = ref(false)
|
||||
const loadingAssignments = ref(false)
|
||||
|
||||
const cachedChores = useStorage<ChoreWithCompletion[]>('cached-chores-v2', [])
|
||||
const cachedTimestamp = useStorage<number>('cached-chores-timestamp-v2', 0)
|
||||
@ -73,6 +81,8 @@ const loadChores = async () => {
|
||||
current_assignment_id: currentAssignment?.id ?? null,
|
||||
is_completed: currentAssignment?.is_complete ?? false,
|
||||
completed_at: currentAssignment?.completed_at ?? null,
|
||||
assigned_user_name: currentAssignment?.assigned_user?.name || currentAssignment?.assigned_user?.email || 'Unknown',
|
||||
completed_by_name: currentAssignment?.assigned_user?.name || currentAssignment?.assigned_user?.email || 'Unknown',
|
||||
updating: false,
|
||||
}
|
||||
});
|
||||
@ -113,13 +123,24 @@ const getChoreSubtext = (chore: ChoreWithCompletion): string => {
|
||||
if (chore.is_completed && chore.completed_at) {
|
||||
const completedDate = new Date(chore.completed_at);
|
||||
if (isTodayDate(completedDate)) {
|
||||
return t('choresPage.completedToday');
|
||||
return t('choresPage.completedToday') + (chore.completed_by_name ? ` by ${chore.completed_by_name}` : '');
|
||||
}
|
||||
return t('choresPage.completedOn', { date: format(completedDate, 'd MMM') });
|
||||
const timeAgo = formatDistanceToNow(completedDate, { addSuffix: true });
|
||||
return `Completed ${timeAgo}` + (chore.completed_by_name ? ` by ${chore.completed_by_name}` : '');
|
||||
}
|
||||
|
||||
const parts: string[] = [];
|
||||
|
||||
// Show who it's assigned to if there's an assignment
|
||||
if (chore.current_assignment_id && chore.assigned_user_name) {
|
||||
parts.push(`Assigned to ${chore.assigned_user_name}`);
|
||||
}
|
||||
|
||||
// Show creator info for group chores
|
||||
if (chore.type === 'group' && chore.creator) {
|
||||
parts.push(`Created by ${chore.creator.name || chore.creator.email}`);
|
||||
}
|
||||
|
||||
if (chore.frequency && chore.frequency !== 'one_time') {
|
||||
const freqOption = frequencyOptions.value.find(f => f.value === chore.frequency);
|
||||
if (freqOption) {
|
||||
@ -306,6 +327,77 @@ const toggleCompletion = async (chore: ChoreWithCompletion) => {
|
||||
chore.updating = false;
|
||||
}
|
||||
};
|
||||
|
||||
const openChoreDetailModal = async (chore: ChoreWithCompletion) => {
|
||||
selectedChore.value = chore;
|
||||
showChoreDetailModal.value = true;
|
||||
|
||||
// Load assignments for this chore
|
||||
loadingAssignments.value = true;
|
||||
try {
|
||||
selectedChoreAssignments.value = await choreService.getChoreAssignments(chore.id);
|
||||
} catch (error) {
|
||||
console.error('Failed to load chore assignments:', error);
|
||||
notificationStore.addNotification({
|
||||
message: 'Failed to load chore assignments.',
|
||||
type: 'error'
|
||||
});
|
||||
} finally {
|
||||
loadingAssignments.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const openHistoryModal = async (chore: ChoreWithCompletion) => {
|
||||
selectedChore.value = chore;
|
||||
showHistoryModal.value = true;
|
||||
|
||||
// Load history for this chore
|
||||
loadingHistory.value = true;
|
||||
try {
|
||||
selectedChoreHistory.value = await choreService.getChoreHistory(chore.id);
|
||||
} catch (error) {
|
||||
console.error('Failed to load chore history:', error);
|
||||
notificationStore.addNotification({
|
||||
message: 'Failed to load chore history.',
|
||||
type: 'error'
|
||||
});
|
||||
} finally {
|
||||
loadingHistory.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const formatHistoryEntry = (entry: ChoreHistory) => {
|
||||
const timestamp = format(parseISO(entry.timestamp), 'MMM d, h:mm a');
|
||||
const user = entry.changed_by_user?.name || entry.changed_by_user?.email || 'System';
|
||||
|
||||
switch (entry.event_type) {
|
||||
case 'created':
|
||||
return `${timestamp} - ${user} created this chore`;
|
||||
case 'updated':
|
||||
return `${timestamp} - ${user} updated this chore`;
|
||||
case 'deleted':
|
||||
return `${timestamp} - ${user} deleted this chore`;
|
||||
case 'assigned':
|
||||
return `${timestamp} - ${user} assigned this chore`;
|
||||
case 'completed':
|
||||
return `${timestamp} - ${user} completed this chore`;
|
||||
case 'reopened':
|
||||
return `${timestamp} - ${user} reopened this chore`;
|
||||
default:
|
||||
return `${timestamp} - ${user} performed action: ${entry.event_type}`;
|
||||
}
|
||||
};
|
||||
|
||||
const getDueDateStatus = (chore: ChoreWithCompletion) => {
|
||||
if (chore.is_completed) return 'completed';
|
||||
|
||||
const today = startOfDay(new Date());
|
||||
const dueDate = startOfDay(new Date(chore.next_due_date));
|
||||
|
||||
if (dueDate < today) return 'overdue';
|
||||
if (isEqual(dueDate, today)) return 'due-today';
|
||||
return 'upcoming';
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -338,19 +430,35 @@ const toggleCompletion = async (chore: ChoreWithCompletion) => {
|
||||
<h2 class="date-header">{{ formatDateHeader(group.date) }}</h2>
|
||||
<div class="neo-item-list-container">
|
||||
<ul class="neo-item-list">
|
||||
<li v-for="chore in group.chores" :key="chore.id" class="neo-list-item">
|
||||
<li v-for="chore in group.chores" :key="chore.id" class="neo-list-item"
|
||||
:class="`status-${getDueDateStatus(chore)}`">
|
||||
<div class="neo-item-content">
|
||||
<label class="neo-checkbox-label">
|
||||
<input type="checkbox" :checked="chore.is_completed" @change="toggleCompletion(chore)">
|
||||
<div class="checkbox-content">
|
||||
<span class="checkbox-text-span"
|
||||
:class="{ 'neo-completed-static': chore.is_completed && !chore.updating }">
|
||||
{{ chore.name }}
|
||||
</span>
|
||||
<div class="chore-main-info">
|
||||
<span class="checkbox-text-span"
|
||||
:class="{ 'neo-completed-static': chore.is_completed && !chore.updating }">
|
||||
{{ chore.name }}
|
||||
</span>
|
||||
<div class="chore-badges">
|
||||
<span v-if="chore.type === 'group'" class="badge badge-group">Group</span>
|
||||
<span v-if="getDueDateStatus(chore) === 'overdue'" class="badge badge-overdue">Overdue</span>
|
||||
<span v-if="getDueDateStatus(chore) === 'due-today'" class="badge badge-due-today">Due
|
||||
Today</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="chore.description" class="chore-description">{{ chore.description }}</div>
|
||||
<span v-if="chore.subtext" class="item-time">{{ chore.subtext }}</span>
|
||||
</div>
|
||||
</label>
|
||||
<div class="neo-item-actions">
|
||||
<button class="btn btn-sm btn-neutral" @click="openChoreDetailModal(chore)" title="View Details">
|
||||
📋
|
||||
</button>
|
||||
<button class="btn btn-sm btn-neutral" @click="openHistoryModal(chore)" title="View History">
|
||||
📅
|
||||
</button>
|
||||
<button class="btn btn-sm btn-neutral" @click="openEditChoreModal(chore)">
|
||||
{{ t('choresPage.edit', 'Edit') }}
|
||||
</button>
|
||||
@ -460,6 +568,113 @@ const toggleCompletion = async (chore: ChoreWithCompletion) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chore Detail Modal -->
|
||||
<div v-if="showChoreDetailModal" class="modal-backdrop open" @click.self="showChoreDetailModal = false">
|
||||
<div class="modal-container detail-modal">
|
||||
<div class="modal-header">
|
||||
<h3>{{ selectedChore?.name }}</h3>
|
||||
<button type="button" @click="showChoreDetailModal = false" class="close-button">
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body" v-if="selectedChore">
|
||||
<div class="detail-section">
|
||||
<h4>Details</h4>
|
||||
<div class="detail-grid">
|
||||
<div class="detail-item">
|
||||
<span class="label">Type:</span>
|
||||
<span class="value">{{ selectedChore.type === 'group' ? 'Group' : 'Personal' }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">Created by:</span>
|
||||
<span class="value">{{ selectedChore.creator?.name || selectedChore.creator?.email || 'Unknown'
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">Due date:</span>
|
||||
<span class="value">{{ format(new Date(selectedChore.next_due_date), 'PPP') }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">Frequency:</span>
|
||||
<span class="value">
|
||||
{{selectedChore?.frequency === 'custom' && selectedChore?.custom_interval_days
|
||||
? `Every ${selectedChore.custom_interval_days} days`
|
||||
: frequencyOptions.find(f => f.value === selectedChore?.frequency)?.label || selectedChore?.frequency
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="selectedChore.description" class="detail-item full-width">
|
||||
<span class="label">Description:</span>
|
||||
<span class="value">{{ selectedChore.description }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h4>Assignments</h4>
|
||||
<div v-if="loadingAssignments" class="loading-spinner">Loading...</div>
|
||||
<div v-else-if="selectedChoreAssignments.length === 0" class="no-data">
|
||||
No assignments found for this chore.
|
||||
</div>
|
||||
<div v-else class="assignments-list">
|
||||
<div v-for="assignment in selectedChoreAssignments" :key="assignment.id" class="assignment-item">
|
||||
<div class="assignment-main">
|
||||
<span class="assigned-user">{{ assignment.assigned_user?.name || assignment.assigned_user?.email
|
||||
}}</span>
|
||||
<span class="assignment-status" :class="{ completed: assignment.is_complete }">
|
||||
{{ assignment.is_complete ? '✅ Completed' : '⏳ Pending' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="assignment-details">
|
||||
<span>Due: {{ format(new Date(assignment.due_date), 'PPP') }}</span>
|
||||
<span v-if="assignment.completed_at">
|
||||
Completed: {{ format(new Date(assignment.completed_at), 'PPP') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-neutral" @click="showChoreDetailModal = false">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- History Modal -->
|
||||
<div v-if="showHistoryModal" class="modal-backdrop open" @click.self="showHistoryModal = false">
|
||||
<div class="modal-container history-modal">
|
||||
<div class="modal-header">
|
||||
<h3>History: {{ selectedChore?.name }}</h3>
|
||||
<button type="button" @click="showHistoryModal = false" class="close-button">
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div v-if="loadingHistory" class="loading-spinner">Loading history...</div>
|
||||
<div v-else-if="selectedChoreHistory.length === 0" class="no-data">
|
||||
No history found for this chore.
|
||||
</div>
|
||||
<div v-else class="history-list">
|
||||
<div v-for="entry in selectedChoreHistory" :key="entry.id" class="history-item">
|
||||
<div class="history-content">
|
||||
<span class="history-text">{{ formatHistoryEntry(entry) }}</span>
|
||||
<div v-if="entry.event_data && Object.keys(entry.event_data).length > 0" class="history-data">
|
||||
<details>
|
||||
<summary>Details</summary>
|
||||
<pre>{{ JSON.stringify(entry.event_data, null, 2) }}</pre>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-neutral" @click="showHistoryModal = false">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -679,4 +894,212 @@ const toggleCompletion = async (chore: ChoreWithCompletion) => {
|
||||
transform: scaleX(1);
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
/* New styles for enhanced UX */
|
||||
.chore-main-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.chore-badges {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 0.25rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
.badge-group {
|
||||
background-color: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-overdue {
|
||||
background-color: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-due-today {
|
||||
background-color: #f59e0b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.chore-description {
|
||||
font-size: 0.875rem;
|
||||
color: var(--dark);
|
||||
opacity: 0.8;
|
||||
margin-top: 0.25rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Status-based styling */
|
||||
.status-overdue {
|
||||
border-left: 4px solid #ef4444;
|
||||
}
|
||||
|
||||
.status-due-today {
|
||||
border-left: 4px solid #f59e0b;
|
||||
}
|
||||
|
||||
.status-completed {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Modal styles */
|
||||
.detail-modal .modal-container,
|
||||
.history-modal .modal-container {
|
||||
max-width: 600px;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.detail-section h4 {
|
||||
margin-bottom: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--dark);
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.detail-item.full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.detail-item .label {
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
color: var(--dark);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.detail-item .value {
|
||||
font-size: 0.875rem;
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
.assignments-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.assignment-item {
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 0.5rem;
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
.assignment-main {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.assigned-user {
|
||||
font-weight: 500;
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
.assignment-status {
|
||||
font-size: 0.875rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
background-color: #fbbf24;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.assignment-status.completed {
|
||||
background-color: #10b981;
|
||||
}
|
||||
|
||||
.assignment-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--dark);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.history-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.history-item {
|
||||
padding: 0.75rem;
|
||||
border-left: 3px solid #e5e7eb;
|
||||
background-color: #f9fafb;
|
||||
border-radius: 0 0.25rem 0.25rem 0;
|
||||
}
|
||||
|
||||
.history-text {
|
||||
font-size: 0.875rem;
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
.history-data {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.history-data details {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.history-data summary {
|
||||
cursor: pointer;
|
||||
color: var(--primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.history-data pre {
|
||||
margin-top: 0.25rem;
|
||||
padding: 0.5rem;
|
||||
background-color: #f3f4f6;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
color: var(--dark);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
color: var(--dark);
|
||||
opacity: 0.7;
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user