ryan/chore
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 5 Releases Wiki Activity

feat: add chore, kindness, and penalty management components
All checks were successful
Chore App Build, Test, and Push Docker Images / build-and-push (push) Successful in 2m34s
Details

Browse Source 
- Implemented ChoreAssignView for assigning chores to children.
- Created ChoreConfirmDialog for confirming chore completion.
- Developed KindnessAssignView for assigning kindness acts.
- Added PenaltyAssignView for assigning penalties.
- Introduced ChoreEditView and ChoreView for editing and viewing chores.
- Created KindnessEditView and KindnessView for managing kindness acts.
- Developed PenaltyEditView and PenaltyView for managing penalties.
- Added TaskSubNav for navigation between chores, kindness acts, and penalties.
This commit is contained in:
Ryan Kegel
2026-02-28 11:25:56 -05:00
parent 65e987ceb6
commit d7316bb00a
61 changed files with 7364 additions and 647 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
frontend/vue-app/src/components/child/ChildView.vue
View File

@@ -5,6 +5,7 @@ import ChildDetailCard from './ChildDetailCard.vue'
import ScrollingList from '../shared/ScrollingList.vue'
import StatusMessage from '../shared/StatusMessage.vue'
import RewardConfirmDialog from './RewardConfirmDialog.vue'
import ChoreConfirmDialog from './ChoreConfirmDialog.vue'
import ModalDialog from '../shared/ModalDialog.vue'
import { eventBus } from '@/common/eventBus'
//import '@/assets/view-shared.css'
@@ -25,7 +26,9 @@ import type {
ChildModifiedEventPayload,
ChoreScheduleModifiedPayload,
ChoreTimeExtendedPayload,
ChildChoreConfirmationPayload,
} from '@/common/models'
import { confirmChore, cancelConfirmChore } from '@/common/api'
import {
isScheduledToday,
isPastTime,
@@ -48,6 +51,9 @@ const childRewardListRef = ref()
const showRewardDialog = ref(false)
const showCancelDialog = ref(false)
const dialogReward = ref<RewardStatus | null>(null)
const showChoreConfirmDialog = ref(false)
const showChoreCancelDialog = ref(false)
const dialogChore = ref<ChildTask | null>(null)
function handleTaskTriggered(event: Event) {
const payload = event.payload as ChildTaskTriggeredEventPayload
@@ -177,7 +183,7 @@ function handleRewardModified(event: Event) {
}
}
const triggerTask = async (task: Task) => {
const triggerTask = async (task: ChildTask) => {
// Cancel any pending speech to avoid conflicts
if ('speechSynthesis' in window) {
window.speechSynthesis.cancel()
@@ -191,7 +197,74 @@ const triggerTask = async (task: Task) => {
}
}
// Child mode is speech-only; point changes are handled in parent mode.
// For chores, handle confirmation flow
if (task.type === 'chore') {
if (isChoreExpired(task)) return // Expired — no action
if (isChoreCompletedToday(task)) return // Already completed — no action
if (task.pending_status === 'pending') {
// Show cancel dialog
dialogChore.value = task
setTimeout(() => {
showChoreCancelDialog.value = true
}, 150)
return
}
// Available — show confirm dialog
dialogChore.value = task
setTimeout(() => {
showChoreConfirmDialog.value = true
}, 150)
return
}
// Kindness / Penalty: speech-only in child mode; point changes are handled in parent mode.
}
function isChoreCompletedToday(item: ChildTask): boolean {
if (item.pending_status !== 'approved' || !item.approved_at) return false
const approvedDate = item.approved_at.substring(0, 10)
const today = toLocalISODate(new Date())
return approvedDate === today
}
async function doConfirmChore() {
if (!child.value?.id || !dialogChore.value) return
try {
const resp = await confirmChore(child.value.id, dialogChore.value.id)
if (!resp.ok) {
console.error('Failed to confirm chore')
}
} catch (err) {
console.error('Failed to confirm chore:', err)
} finally {
showChoreConfirmDialog.value = false
dialogChore.value = null
}
}
function cancelChoreConfirmDialog() {
showChoreConfirmDialog.value = false
dialogChore.value = null
}
async function doCancelConfirmChore() {
if (!child.value?.id || !dialogChore.value) return
try {
const resp = await cancelConfirmChore(child.value.id, dialogChore.value.id)
if (!resp.ok) {
console.error('Failed to cancel chore confirmation')
}
} catch (err) {
console.error('Failed to cancel chore confirmation:', err)
} finally {
showChoreCancelDialog.value = false
dialogChore.value = null
}
}
function closeChoreCancelDialog() {
showChoreCancelDialog.value = false
dialogChore.value = null
}
const triggerReward = (reward: RewardStatus) => {
@@ -331,6 +404,13 @@ function handleChoreTimeExtended(event: Event) {
}
}
function handleChoreConfirmation(event: Event) {
const payload = event.payload as ChildChoreConfirmationPayload
if (child.value && payload.child_id === child.value.id) {
childChoreListRef.value?.refresh()
}
}
function isChoreScheduledToday(item: ChildTask): boolean {
if (!item.schedule) return true
const today = new Date()
@@ -406,6 +486,7 @@ onMounted(async () => {
eventBus.on('child_reward_request', handleRewardRequest)
eventBus.on('chore_schedule_modified', handleChoreScheduleModified)
eventBus.on('chore_time_extended', handleChoreTimeExtended)
eventBus.on('child_chore_confirmation', handleChoreConfirmation)
document.addEventListener('visibilitychange', onVisibilityChange)
if (route.params.id) {
const idParam = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
@@ -440,6 +521,7 @@ onUnmounted(() => {
eventBus.off('child_reward_request', handleRewardRequest)
eventBus.off('chore_schedule_modified', handleChoreScheduleModified)
eventBus.off('chore_time_extended', handleChoreTimeExtended)
eventBus.off('child_chore_confirmation', handleChoreConfirmation)
document.removeEventListener('visibilitychange', onVisibilityChange)
clearExpiryTimers()
removeInactivityListeners()
@@ -466,21 +548,25 @@ onUnmounted(() => {
@trigger-item="triggerTask"
:getItemClass="
(item: ChildTask) => ({
bad: !item.is_good,
good: item.is_good,
'chore-inactive': isChoreExpired(item),
bad: item.type === 'penalty',
good: item.type !== 'penalty',
'chore-inactive':
item.type === 'chore' && (isChoreExpired(item) || isChoreCompletedToday(item)),
})
"
:filter-fn="(item: ChildTask) => item.is_good && isChoreScheduledToday(item)"
:filter-fn="(item: ChildTask) => item.type === 'chore' && isChoreScheduledToday(item)"
>
<template #item="{ item }: { item: ChildTask }">
<span v-if="isChoreExpired(item)" class="chore-stamp">TOO LATE</span>
<span v-else-if="isChoreCompletedToday(item)" class="chore-stamp completed-stamp"
>COMPLETED</span
>
<span v-else-if="item.pending_status === 'pending'" class="chore-stamp pending-stamp"
>PENDING</span
>
<div class="item-name">{{ item.name }}</div>
<img v-if="item.image_url" :src="item.image_url" alt="Task Image" class="item-image" />
<div
class="item-points"
:class="{ 'good-points': item.is_good, 'bad-points': !item.is_good }"
>
<div class="item-points good-points">
{{
item.custom_value !== undefined && item.custom_value !== null
? item.custom_value
@@ -491,6 +577,33 @@ onUnmounted(() => {
<div v-if="choreDueLabel(item)" class="due-label">{{ choreDueLabel(item) }}</div>
</template>
</ScrollingList>
<ScrollingList
title="Kindness Acts"
ref="childKindnessListRef"
:fetchBaseUrl="`/api/child/${child?.id}/list-tasks`"
:ids="tasks"
itemKey="tasks"
imageField="image_id"
:isParentAuthenticated="false"
:readyItemId="readyItemId"
@item-ready="handleItemReady"
@trigger-item="triggerTask"
:getItemClass="() => ({ good: true })"
:filter-fn="(item: ChildTask) => item.type === 'kindness'"
>
<template #item="{ item }">
<div class="item-name">{{ item.name }}</div>
<img v-if="item.image_url" :src="item.image_url" alt="Task Image" class="item-image" />
<div class="item-points good-points">
{{
item.custom_value !== undefined && item.custom_value !== null
? item.custom_value
: item.points
}}
Points
</div>
</template>
</ScrollingList>
<ScrollingList
title="Penalties"
ref="childPenaltyListRef"
@@ -502,20 +615,13 @@ onUnmounted(() => {
:readyItemId="readyItemId"
@item-ready="handleItemReady"
@trigger-item="triggerTask"
:getItemClass="(item) => ({ bad: !item.is_good, good: item.is_good })"
:filter-fn="
(item) => {
return !item.is_good
}
"
:getItemClass="() => ({ bad: true })"
:filter-fn="(item: ChildTask) => item.type === 'penalty'"
>
<template #item="{ item }">
<div class="item-name">{{ item.name }}</div>
<img v-if="item.image_url" :src="item.image_url" alt="Task Image" class="item-image" />
<div
class="item-points"
:class="{ 'good-points': item.is_good, 'bad-points': !item.is_good }"
>
<div class="item-points bad-points">
{{
item.custom_value !== undefined && item.custom_value !== null
? -item.custom_value
@@ -583,6 +689,31 @@ onUnmounted(() => {
<button @click="closeCancelDialog" class="btn btn-secondary">No</button>
</div>
</ModalDialog>
<!-- Chore confirm dialog -->
<ChoreConfirmDialog
:show="showChoreConfirmDialog"
:choreName="dialogChore?.name ?? ''"
:imageUrl="dialogChore?.image_url"
@confirm="doConfirmChore"
@cancel="cancelChoreConfirmDialog"
/>
<!-- Cancel chore confirmation dialog -->
<ModalDialog
v-if="showChoreCancelDialog && dialogChore"
:title="dialogChore.name"
subtitle="Chore Pending"
@backdrop-click="closeChoreCancelDialog"
>
<div class="modal-message">
This chore is pending confirmation.<br />Would you like to cancel?
</div>
<div class="modal-actions">
<button @click="doCancelConfirmChore" class="btn btn-primary">Yes</button>
<button @click="closeChoreCancelDialog" class="btn btn-secondary">No</button>
</div>
</ModalDialog>
</template>
<style scoped>
@@ -708,6 +839,14 @@ onUnmounted(() => {
pointer-events: none;
}
.pending-stamp {
color: #fbbf24;
}
.completed-stamp {
color: #22c55e;
}
.due-label {
font-size: 0.85rem;
font-weight: 600;

78
frontend/vue-app/src/components/child/ChoreApproveDialog.vue Normal file
View File

@@ -0,0 +1,78 @@
<template>
<ModalDialog v-if="show" @backdrop-click="$emit('cancel')">
<template #default>
<div class="approve-dialog">
<img v-if="imageUrl" :src="imageUrl" alt="Chore" class="chore-image" />
<p class="child-label">{{ childName }}</p>
<p class="message">completed <strong>{{ choreName }}</strong></p>
<p class="message">Will be awarded <strong>{{ points }} points</strong></p>
<div class="actions">
<button class="btn btn-primary" @click="$emit('approve')">Approve</button>
<button class="btn btn-secondary" @click="$emit('reject')">Reject</button>
</div>
</div>
</template>
</ModalDialog>
</template>
<script setup lang="ts">
import ModalDialog from '../shared/ModalDialog.vue'
defineProps<{
show: boolean
childName: string
choreName: string
points: number
imageUrl?: string | null
}>()
defineEmits<{
approve: []
reject: []
cancel: []
}>()
</script>
<style scoped>
.approve-dialog {
text-align: center;
padding: 0.5rem;
}
.chore-image {
width: 72px;
height: 72px;
object-fit: cover;
border-radius: 8px;
background: var(--info-image-bg);
margin-bottom: 0.75rem;
}
.child-label {
font-size: 1.2rem;
font-weight: 700;
color: var(--dialog-child-name);
margin-bottom: 0.15rem;
}
.message {
font-size: 1rem;
color: var(--dialog-message);
margin-bottom: 0.15rem;
}
.message:last-of-type {
margin-bottom: 1.5rem;
}
.actions {
display: flex;
gap: 1.5rem;
justify-content: center;
}
.actions button {
padding: 0.7rem 1.8rem;
border-radius: 10px;
border: 0;
cursor: pointer;
font-weight: 700;
font-size: 1.05rem;
transition: background 0.18s;
min-width: 100px;
}
</style>

60
frontend/vue-app/src/components/child/TaskAssignView.vue → frontend/vue-app/src/components/child/ChoreAssignView.vue
View File

@@ -1,20 +1,20 @@
<template>
<div class="task-assign-view">
<div class="assign-view">
<h2>Assign Chores</h2>
<div class="task-view">
<MessageBlock v-if="taskCountRef === 0" message="No chores">
<span> <button class="round-btn" @click="goToCreateTask">Create</button> a chore </span>
<div class="list-container">
<MessageBlock v-if="countRef === 0" message="No chores">
<span> <button class="round-btn" @click="goToCreate">Create</button> a chore </span>
</MessageBlock>
<ItemList
v-else
ref="taskListRef"
:fetchUrl="`/api/child/${childId}/list-all-tasks?type=${typeFilter}`"
ref="listRef"
:fetchUrl="`/api/child/${childId}/list-all-tasks?type=chore`"
itemKey="tasks"
:itemFields="TASK_FIELDS"
imageField="image_id"
selectable
@loading-complete="(count) => (taskCountRef = count)"
:getItemClass="(item) => ({ bad: !item.is_good, good: item.is_good })"
@loading-complete="(count) => (countRef = count)"
:getItemClass="() => ({ good: true })"
>
<template #item="{ item }">
<img v-if="item.image_url" :src="item.image_url" />
@@ -23,7 +23,7 @@
</template>
</ItemList>
</div>
<div class="actions" v-if="taskCountRef > 0">
<div class="actions" v-if="countRef > 0">
<button class="btn btn-secondary" @click="onCancel">Cancel</button>
<button class="btn btn-primary" @click="onSubmit">Submit</button>
</div>
@@ -31,7 +31,7 @@
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import ItemList from '../shared/ItemList.vue'
import MessageBlock from '../shared/MessageBlock.vue'
@@ -41,32 +41,25 @@ import { TASK_FIELDS } from '@/common/models'
const route = useRoute()
const router = useRouter()
const childId = route.params.id
const listRef = ref()
const countRef = ref(-1)
const taskListRef = ref()
const taskCountRef = ref(-1)
const typeFilter = computed(() => {
if (route.params.type === 'good') return 'good'
if (route.params.type === 'bad') return 'bad'
return 'all'
})
function goToCreateTask() {
router.push({ name: 'CreateTask' })
function goToCreate() {
router.push({ name: 'CreateChore' })
}
async function onSubmit() {
const selectedIds = taskListRef.value?.selectedItems ?? []
const selectedIds = listRef.value?.selectedItems ?? []
try {
const resp = await fetch(`/api/child/${childId}/set-tasks`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ type: typeFilter.value, task_ids: selectedIds }),
body: JSON.stringify({ type: 'chore', task_ids: selectedIds }),
})
if (!resp.ok) throw new Error('Failed to update tasks')
if (!resp.ok) throw new Error('Failed to update chores')
router.back()
} catch (err) {
alert('Failed to update tasks.')
} catch {
alert('Failed to update chores.')
}
}
@@ -76,7 +69,7 @@ function onCancel() {
</script>
<style scoped>
.task-assign-view {
.assign-view {
display: flex;
flex-direction: column;
align-items: center;
@@ -86,15 +79,14 @@ function onCancel() {
padding: 0;
min-height: 0;
}
.task-assign-view h2 {
.assign-view h2 {
font-size: 1.15rem;
color: var(--assign-heading-color);
font-weight: 700;
text-align: center;
margin: 0.2rem;
}
.task-view {
.list-container {
display: flex;
flex-direction: column;
align-items: center;
@@ -104,28 +96,20 @@ function onCancel() {
padding: 0;
min-height: 0;
}
:deep(.good) {
border-color: var(--list-item-border-good);
background: var(--list-item-bg-good);
}
:deep(.bad) {
border-color: var(--list-item-border-bad);
background: var(--list-item-bg-bad);
}
.name {
flex: 1;
text-align: left;
font-weight: 600;
}
.value {
min-width: 60px;
text-align: right;
font-weight: 600;
}
.actions {
display: flex;
gap: 3rem;

71
frontend/vue-app/src/components/child/ChoreConfirmDialog.vue Normal file
View File

@@ -0,0 +1,71 @@
<template>
<ModalDialog v-if="show" @backdrop-click="$emit('cancel')">
<template #default>
<div class="confirm-dialog">
<img v-if="imageUrl" :src="imageUrl" alt="Chore" class="chore-image" />
<p class="message">Did you finish</p>
<p class="chore-name">{{ choreName }}?</p>
<div class="actions">
<button class="btn btn-primary" @click="$emit('confirm')">Yes!</button>
<button class="btn btn-secondary" @click="$emit('cancel')">No</button>
</div>
</div>
</template>
</ModalDialog>
</template>
<script setup lang="ts">
import ModalDialog from '../shared/ModalDialog.vue'
defineProps<{
show: boolean
choreName: string
imageUrl?: string | null
}>()
defineEmits<{
confirm: []
cancel: []
}>()
</script>
<style scoped>
.confirm-dialog {
text-align: center;
padding: 0.5rem;
}
.chore-image {
width: 72px;
height: 72px;
object-fit: cover;
border-radius: 8px;
background: var(--info-image-bg);
margin-bottom: 0.75rem;
}
.message {
font-size: 1.1rem;
color: var(--dialog-message);
margin-bottom: 0.25rem;
}
.chore-name {
font-size: 1.3rem;
font-weight: 700;
color: var(--dialog-child-name);
margin-bottom: 1.5rem;
}
.actions {
display: flex;
gap: 1.5rem;
justify-content: center;
}
.actions button {
padding: 0.7rem 1.8rem;
border-radius: 10px;
border: 0;
cursor: pointer;
font-weight: 700;
font-size: 1.05rem;
transition: background 0.18s;
min-width: 100px;
}
</style>

129
frontend/vue-app/src/components/child/KindnessAssignView.vue Normal file
View File

@@ -0,0 +1,129 @@
<template>
<div class="assign-view">
<h2>Assign Kindness Acts</h2>
<div class="list-container">
<MessageBlock v-if="countRef === 0" message="No kindness acts">
<span> <button class="round-btn" @click="goToCreate">Create</button> a kindness act </span>
</MessageBlock>
<ItemList
v-else
ref="listRef"
:fetchUrl="`/api/child/${childId}/list-all-tasks?type=kindness`"
itemKey="tasks"
:itemFields="TASK_FIELDS"
imageField="image_id"
selectable
@loading-complete="(count) => (countRef = count)"
:getItemClass="() => ({ good: true })"
>
<template #item="{ item }">
<img v-if="item.image_url" :src="item.image_url" />
<span class="name">{{ item.name }}</span>
<span class="value">{{ item.points }} pts</span>
</template>
</ItemList>
</div>
<div class="actions" v-if="countRef > 0">
<button class="btn btn-secondary" @click="onCancel">Cancel</button>
<button class="btn btn-primary" @click="onSubmit">Submit</button>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import ItemList from '../shared/ItemList.vue'
import MessageBlock from '../shared/MessageBlock.vue'
import '@/assets/styles.css'
import { TASK_FIELDS } from '@/common/models'
const route = useRoute()
const router = useRouter()
const childId = route.params.id
const listRef = ref()
const countRef = ref(-1)
function goToCreate() {
router.push({ name: 'CreateKindness' })
}
async function onSubmit() {
const selectedIds = listRef.value?.selectedItems ?? []
try {
const resp = await fetch(`/api/child/${childId}/set-tasks`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ type: 'kindness', task_ids: selectedIds }),
})
if (!resp.ok) throw new Error('Failed to update kindness acts')
router.back()
} catch {
alert('Failed to update kindness acts.')
}
}
function onCancel() {
router.back()
}
</script>
<style scoped>
.assign-view {
display: flex;
flex-direction: column;
align-items: center;
flex: 1 1 auto;
width: 100%;
height: 100%;
padding: 0;
min-height: 0;
}
.assign-view h2 {
font-size: 1.15rem;
color: var(--assign-heading-color);
font-weight: 700;
text-align: center;
margin: 0.2rem;
}
.list-container {
display: flex;
flex-direction: column;
align-items: center;
flex: 1 1 auto;
width: 100%;
height: 100%;
padding: 0;
min-height: 0;
}
:deep(.good) {
border-color: var(--list-item-border-good);
background: var(--list-item-bg-good);
}
.name {
flex: 1;
text-align: left;
font-weight: 600;
}
.value {
min-width: 60px;
text-align: right;
font-weight: 600;
}
.actions {
display: flex;
gap: 3rem;
justify-content: center;
margin-top: 0.5rem;
}
.actions button {
padding: 1rem 2.2rem;
border-radius: 12px;
border: 0;
cursor: pointer;
font-weight: 700;
font-size: 1.25rem;
transition: background 0.18s;
min-width: 120px;
}
</style>

209
frontend/vue-app/src/components/child/ParentView.vue
View File

@@ -5,11 +5,19 @@ import ScheduleModal from '../shared/ScheduleModal.vue'
import PendingRewardDialog from './PendingRewardDialog.vue'
import TaskConfirmDialog from './TaskConfirmDialog.vue'
import RewardConfirmDialog from './RewardConfirmDialog.vue'
import ChoreApproveDialog from './ChoreApproveDialog.vue'
import { useRoute, useRouter } from 'vue-router'
import ChildDetailCard from './ChildDetailCard.vue'
import ScrollingList from '../shared/ScrollingList.vue'
import StatusMessage from '../shared/StatusMessage.vue'
import { setChildOverride, parseErrorResponse, extendChoreTime } from '@/common/api'
import {
setChildOverride,
parseErrorResponse,
extendChoreTime,
approveChore,
rejectChore,
resetChore,
} from '@/common/api'
import { eventBus } from '@/common/eventBus'
import '@/assets/styles.css'
import type {
@@ -31,6 +39,7 @@ import type {
ChildOverrideDeletedPayload,
ChoreScheduleModifiedPayload,
ChoreTimeExtendedPayload,
ChildChoreConfirmationPayload,
} from '@/common/models'
import {
isScheduledToday,
@@ -57,8 +66,13 @@ const selectedReward = ref<Reward | null>(null)
const childChoreListRef = ref()
const childPenaltyListRef = ref()
const childRewardListRef = ref()
const childKindnessListRef = ref()
const showPendingRewardDialog = ref(false)
// Chore approve/reject
const showChoreApproveDialog = ref(false)
const approveDialogChore = ref<ChildTask | null>(null)
// Override editing
const showOverrideModal = ref(false)
const overrideEditTarget = ref<{ entity: Task | Reward; type: 'task' | 'reward' } | null>(null)
@@ -268,6 +282,78 @@ function handleChoreTimeExtended(event: Event) {
}
}
function handleChoreConfirmation(event: Event) {
const payload = event.payload as ChildChoreConfirmationPayload
if (child.value && payload.child_id === child.value.id) {
childChoreListRef.value?.refresh()
}
}
function isChoreCompletedToday(item: ChildTask): boolean {
if (item.pending_status !== 'approved' || !item.approved_at) return false
const today = new Date().toISOString().slice(0, 10)
return item.approved_at.slice(0, 10) === today
}
function isChorePending(item: ChildTask): boolean {
return item.pending_status === 'pending'
}
async function doApproveChore() {
if (!child.value || !approveDialogChore.value) return
try {
const resp = await approveChore(child.value.id, approveDialogChore.value.id)
if (resp.ok) {
const data = await resp.json()
if (child.value) child.value.points = data.points
} else {
const { msg } = await parseErrorResponse(resp)
alert(`Error: ${msg}`)
}
} catch (err) {
console.error('Failed to approve chore:', err)
} finally {
showChoreApproveDialog.value = false
approveDialogChore.value = null
}
}
async function doRejectChore() {
if (!child.value || !approveDialogChore.value) return
try {
const resp = await rejectChore(child.value.id, approveDialogChore.value.id)
if (!resp.ok) {
const { msg } = await parseErrorResponse(resp)
alert(`Error: ${msg}`)
}
} catch (err) {
console.error('Failed to reject chore:', err)
} finally {
showChoreApproveDialog.value = false
approveDialogChore.value = null
}
}
function cancelChoreApproveDialog() {
showChoreApproveDialog.value = false
approveDialogChore.value = null
}
async function doResetChore(item: ChildTask, e: MouseEvent) {
e.stopPropagation()
closeChoreMenu()
if (!child.value) return
try {
const resp = await resetChore(child.value.id, item.id)
if (!resp.ok) {
const { msg } = await parseErrorResponse(resp)
alert(`Error: ${msg}`)
}
} catch (err) {
console.error('Failed to reset chore:', err)
}
}
// ── Kebab menu ───────────────────────────────────────────────────────────────
const onDocClick = (e: MouseEvent) => {
@@ -383,7 +469,7 @@ function resetExpiryTimers() {
const items: ChildTask[] = childChoreListRef.value?.items ?? []
const now = new Date()
for (const item of items) {
if (!item.schedule || !item.is_good) continue
if (!item.schedule || item.type !== 'chore') continue
if (!isScheduledToday(item.schedule, now)) continue
const due = getDueTimeToday(item.schedule, now)
if (!due) continue
@@ -505,6 +591,7 @@ onMounted(async () => {
eventBus.on('child_override_deleted', handleOverrideDeleted)
eventBus.on('chore_schedule_modified', handleChoreScheduleModified)
eventBus.on('chore_time_extended', handleChoreTimeExtended)
eventBus.on('child_chore_confirmation', handleChoreConfirmation)
document.addEventListener('click', onDocClick, true)
document.addEventListener('visibilitychange', onVisibilityChange)
@@ -541,6 +628,7 @@ onUnmounted(() => {
eventBus.off('child_override_deleted', handleOverrideDeleted)
eventBus.off('chore_schedule_modified', handleChoreScheduleModified)
eventBus.off('chore_time_extended', handleChoreTimeExtended)
eventBus.off('child_chore_confirmation', handleChoreConfirmation)
document.removeEventListener('click', onDocClick, true)
document.removeEventListener('visibilitychange', onVisibilityChange)
@@ -552,11 +640,29 @@ function getPendingRewardIds(): string[] {
return items.filter((item: RewardStatus) => item.redeeming).map((item: RewardStatus) => item.id)
}
const triggerTask = (task: Task) => {
const triggerTask = (task: ChildTask) => {
if (shouldIgnoreNextCardClick.value) {
shouldIgnoreNextCardClick.value = false
return
}
// For chores, handle pending/completed states
if (task.type === 'chore') {
// Completed chore — no tap action (use kebab menu "Reset" instead)
if (isChoreCompletedToday(task)) return
// Expired chore — no tap action
if (isChoreExpired(task)) return
// Pending chore — open approve/reject dialog
if (isChorePending(task)) {
approveDialogChore.value = task
setTimeout(() => {
showChoreApproveDialog.value = true
}, 150)
return
}
}
// Available chore / kindness / penalty — existing trigger flow
selectedTask.value = task
const pendingRewardIds = getPendingRewardIds()
if (pendingRewardIds.length > 0) {
@@ -657,13 +763,19 @@ const confirmTriggerReward = async () => {
function goToAssignTasks() {
if (child.value?.id) {
router.push({ name: 'TaskAssignView', params: { id: child.value.id, type: 'good' } })
router.push({ name: 'ChoreAssignView', params: { id: child.value.id } })
}
}
function goToAssignBadHabits() {
if (child.value?.id) {
router.push({ name: 'TaskAssignView', params: { id: child.value.id, type: 'bad' } })
router.push({ name: 'PenaltyAssignView', params: { id: child.value.id } })
}
}
function goToAssignKindness() {
if (child.value?.id) {
router.push({ name: 'KindnessAssignView', params: { id: child.value.id } })
}
}
@@ -696,12 +808,12 @@ function goToAssignRewards() {
@item-ready="handleChoreItemReady"
:getItemClass="
(item) => ({
bad: !item.is_good,
good: item.is_good,
'chore-inactive': isChoreInactive(item),
bad: item.type === 'penalty',
good: item.type !== 'penalty',
'chore-inactive': isChoreInactive(item) || isChoreCompletedToday(item),
})
"
:filter-fn="(item) => item.is_good"
:filter-fn="(item) => item.type === 'chore'"
>
<template #item="{ item }: { item: ChildTask }">
<!-- Kebab menu -->
@@ -748,12 +860,26 @@ function goToAssignRewards() {
>
Extend Time
</button>
<button
v-if="isChoreCompletedToday(item)"
class="menu-item"
@mousedown.stop.prevent
@click="doResetChore(item, $event)"
>
Reset
</button>
</div>
</Teleport>
</div>
<!-- TOO LATE badge -->
<span v-if="isChoreExpired(item)" class="chore-stamp">TOO LATE</span>
<!-- PENDING badge -->
<span v-else-if="isChorePending(item)" class="chore-stamp pending-stamp">PENDING</span>
<!-- COMPLETED badge -->
<span v-else-if="isChoreCompletedToday(item)" class="chore-stamp completed-stamp"
>COMPLETED</span
>
<div class="item-name">{{ item.name }}</div>
<img v-if="item.image_url" :src="item.image_url" alt="Task Image" class="item-image" />
@@ -768,6 +894,36 @@ function goToAssignRewards() {
<div v-if="choreDueLabel(item)" class="due-label">{{ choreDueLabel(item) }}</div>
</template>
</ScrollingList>
<ScrollingList
title="Kindness Acts"
ref="childKindnessListRef"
:fetchBaseUrl="`/api/child/${child?.id}/list-tasks`"
:ids="tasks"
itemKey="tasks"
imageField="image_id"
:enableEdit="true"
:childId="child?.id"
:readyItemId="readyItemId"
:isParentAuthenticated="true"
@trigger-item="triggerTask"
@edit-item="(item) => handleEditItem(item, 'task')"
@item-ready="handleItemReady"
:getItemClass="() => ({ good: true })"
:filter-fn="(item) => item.type === 'kindness'"
>
<template #item="{ item }">
<div class="item-name">{{ item.name }}</div>
<img v-if="item.image_url" :src="item.image_url" alt="Task Image" class="item-image" />
<div class="item-points good-points">
{{
item.custom_value !== undefined && item.custom_value !== null
? item.custom_value
: item.points
}}
Points
</div>
</template>
</ScrollingList>
<ScrollingList
title="Penalties"
ref="childPenaltyListRef"
@@ -782,10 +938,12 @@ function goToAssignRewards() {
@trigger-item="triggerTask"
@edit-item="(item) => handleEditItem(item, 'task')"
@item-ready="handleItemReady"
:getItemClass="(item) => ({ bad: !item.is_good, good: item.is_good })"
:getItemClass="
(item) => ({ bad: item.type === 'penalty', good: item.type !== 'penalty' })
"
:filter-fn="
(item) => {
return !item.is_good
return item.type === 'penalty'
}
"
>
@@ -794,7 +952,10 @@ function goToAssignRewards() {
<img v-if="item.image_url" :src="item.image_url" alt="Task Image" class="item-image" />
<div
class="item-points"
:class="{ 'good-points': item.is_good, 'bad-points': !item.is_good }"
:class="{
'good-points': item.type !== 'penalty',
'bad-points': item.type === 'penalty',
}"
>
{{
item.custom_value !== undefined && item.custom_value !== null
@@ -840,6 +1001,9 @@ function goToAssignRewards() {
</div>
<div class="assign-buttons">
<button v-if="child" class="btn btn-primary" @click="goToAssignTasks">Assign Chores</button>
<button v-if="child" class="btn btn-primary" @click="goToAssignKindness">
Assign Kindness Acts
</button>
<button v-if="child" class="btn btn-danger" @click="goToAssignBadHabits">
Assign Penalties
</button>
@@ -929,6 +1093,19 @@ function goToAssignRewards() {
}
"
/>
<!-- Chore Approve/Reject Dialog -->
<ChoreApproveDialog
v-if="showChoreApproveDialog && approveDialogChore"
:show="showChoreApproveDialog"
:childName="child?.name ?? ''"
:choreName="approveDialogChore.name"
:points="approveDialogChore.custom_value ?? approveDialogChore.points"
:imageUrl="approveDialogChore.image_url"
@approve="doApproveChore"
@reject="doRejectChore"
@cancel="cancelChoreApproveDialog"
/>
</div>
</template>
@@ -1106,6 +1283,14 @@ function goToAssignRewards() {
pointer-events: none;
}
.pending-stamp {
color: #fbbf24;
}
.completed-stamp {
color: #22c55e;
}
/* Due time sub-text */
.due-label {
font-size: 0.85rem;

129
frontend/vue-app/src/components/child/PenaltyAssignView.vue Normal file
View File

@@ -0,0 +1,129 @@
<template>
<div class="assign-view">
<h2>Assign Penalties</h2>
<div class="list-container">
<MessageBlock v-if="countRef === 0" message="No penalties">
<span> <button class="round-btn" @click="goToCreate">Create</button> a penalty </span>
</MessageBlock>
<ItemList
v-else
ref="listRef"
:fetchUrl="`/api/child/${childId}/list-all-tasks?type=penalty`"
itemKey="tasks"
:itemFields="TASK_FIELDS"
imageField="image_id"
selectable
@loading-complete="(count) => (countRef = count)"
:getItemClass="() => ({ bad: true })"
>
<template #item="{ item }">
<img v-if="item.image_url" :src="item.image_url" />
<span class="name">{{ item.name }}</span>
<span class="value">{{ item.points }} pts</span>
</template>
</ItemList>
</div>
<div class="actions" v-if="countRef > 0">
<button class="btn btn-secondary" @click="onCancel">Cancel</button>
<button class="btn btn-primary" @click="onSubmit">Submit</button>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import ItemList from '../shared/ItemList.vue'
import MessageBlock from '../shared/MessageBlock.vue'
import '@/assets/styles.css'
import { TASK_FIELDS } from '@/common/models'
const route = useRoute()
const router = useRouter()
const childId = route.params.id
const listRef = ref()
const countRef = ref(-1)
function goToCreate() {
router.push({ name: 'CreatePenalty' })
}
async function onSubmit() {
const selectedIds = listRef.value?.selectedItems ?? []
try {
const resp = await fetch(`/api/child/${childId}/set-tasks`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ type: 'penalty', task_ids: selectedIds }),
})
if (!resp.ok) throw new Error('Failed to update penalties')
router.back()
} catch {
alert('Failed to update penalties.')
}
}
function onCancel() {
router.back()
}
</script>
<style scoped>
.assign-view {
display: flex;
flex-direction: column;
align-items: center;
flex: 1 1 auto;
width: 100%;
height: 100%;
padding: 0;
min-height: 0;
}
.assign-view h2 {
font-size: 1.15rem;
color: var(--assign-heading-color);
font-weight: 700;
text-align: center;
margin: 0.2rem;
}
.list-container {
display: flex;
flex-direction: column;
align-items: center;
flex: 1 1 auto;
width: 100%;
height: 100%;
padding: 0;
min-height: 0;
}
:deep(.bad) {
border-color: var(--list-item-border-bad);
background: var(--list-item-bg-bad);
}
.name {
flex: 1;
text-align: left;
font-weight: 600;
}
.value {
min-width: 60px;
text-align: right;
font-weight: 600;
}
.actions {
display: flex;
gap: 3rem;
justify-content: center;
margin-top: 0.5rem;
}
.actions button {
padding: 1rem 2.2rem;
border-radius: 12px;
border: 0;
cursor: pointer;
font-weight: 700;
font-size: 1.25rem;
transition: background 0.18s;
min-width: 120px;
}
</style>

4
frontend/vue-app/src/components/child/TaskConfirmDialog.vue
View File

@@ -7,8 +7,8 @@
@backdrop-click="$emit('cancel')"
>
<div class="modal-message">
{{ task.is_good ? 'Add' : 'Subtract' }} these points
{{ task.is_good ? 'to' : 'from' }}
{{ task.type === 'penalty' ? 'Subtract' : 'Add' }} these points
{{ task.type === 'penalty' ? 'from' : 'to' }}
<span class="child-name">{{ childName }}</span>
</div>
<div class="modal-actions">

40
frontend/vue-app/src/components/child/__tests__/ChildView.spec.ts
View File

@@ -33,7 +33,7 @@ describe('ChildView', () => {
id: 'task-1',
name: 'Clean Room',
points: 10,
is_good: true,
type: 'chore' as const,
image_url: '/images/task.png',
custom_value: null,
}
@@ -42,7 +42,7 @@ describe('ChildView', () => {
id: 'task-1',
name: 'Clean Room',
points: 10,
is_good: true,
type: 'chore' as const,
image_url: '/images/task.png',
custom_value: 15,
}
@@ -51,7 +51,7 @@ describe('ChildView', () => {
id: 'task-2',
name: 'Hit Sibling',
points: 5,
is_good: false,
type: 'penalty' as const,
image_url: '/images/penalty.png',
custom_value: null,
}
@@ -60,7 +60,7 @@ describe('ChildView', () => {
id: 'task-2',
name: 'Hit Sibling',
points: 5,
is_good: false,
type: 'penalty' as const,
image_url: '/images/penalty.png',
custom_value: 8,
}
@@ -248,7 +248,8 @@ describe('ChildView', () => {
expect(requestCalls.length).toBe(0)
})
it('opens redeem dialog when reward is ready and not pending', () => {
it('opens redeem dialog when reward is ready and not pending', async () => {
vi.useFakeTimers()
wrapper.vm.triggerReward({
id: 'reward-1',
name: 'Ice Cream',
@@ -256,10 +257,13 @@ describe('ChildView', () => {
points_needed: 0,
redeeming: false,
})
vi.advanceTimersByTime(200)
await nextTick()
expect(wrapper.vm.showRewardDialog).toBe(true)
expect(wrapper.vm.showCancelDialog).toBe(false)
expect(wrapper.vm.dialogReward?.id).toBe('reward-1')
vi.useRealTimers()
})
it('does not open redeem dialog when reward is not yet ready', () => {
@@ -275,7 +279,8 @@ describe('ChildView', () => {
expect(wrapper.vm.showCancelDialog).toBe(false)
})
it('opens cancel dialog when reward is already pending', () => {
it('opens cancel dialog when reward is already pending', async () => {
vi.useFakeTimers()
wrapper.vm.triggerReward({
id: 'reward-1',
name: 'Ice Cream',
@@ -283,10 +288,13 @@ describe('ChildView', () => {
points_needed: 0,
redeeming: true,
})
vi.advanceTimersByTime(200)
await nextTick()
expect(wrapper.vm.showCancelDialog).toBe(true)
expect(wrapper.vm.showRewardDialog).toBe(false)
expect(wrapper.vm.dialogReward?.id).toBe('reward-1')
vi.useRealTimers()
})
})
@@ -300,11 +308,15 @@ describe('ChildView', () => {
}
beforeEach(async () => {
vi.useFakeTimers()
wrapper = mount(ChildView)
await nextTick()
await new Promise((resolve) => setTimeout(resolve, 50))
wrapper.vm.triggerReward(readyReward)
vi.advanceTimersByTime(100)
await nextTick()
wrapper.vm.triggerReward(readyReward)
vi.advanceTimersByTime(200)
await nextTick()
vi.useRealTimers()
})
it('closes redeem dialog on cancelRedeemReward', async () => {
@@ -349,11 +361,15 @@ describe('ChildView', () => {
}
beforeEach(async () => {
vi.useFakeTimers()
wrapper = mount(ChildView)
await nextTick()
await new Promise((resolve) => setTimeout(resolve, 50))
wrapper.vm.triggerReward(pendingReward)
vi.advanceTimersByTime(100)
await nextTick()
wrapper.vm.triggerReward(pendingReward)
vi.advanceTimersByTime(200)
await nextTick()
vi.useRealTimers()
})
it('closes cancel dialog on closeCancelDialog', async () => {
@@ -605,7 +621,7 @@ describe('ChildView', () => {
id: 'task-1',
name: 'Test',
points: 5,
is_good: true,
type: 'chore' as const,
schedule: null,
})
expect(result).toBe(null)
@@ -620,7 +636,7 @@ describe('ChildView', () => {
id: 'task-1',
name: 'Test',
points: 5,
is_good: true,
type: 'chore' as const,
schedule: {
mode: 'days' as const,
day_configs: [{ day: 2, hour: 14, minute: 30 }], // Tuesday 2:30pm — future

6
frontend/vue-app/src/components/child/__tests__/ParentView.spec.ts
View File

@@ -41,7 +41,7 @@ describe('ParentView', () => {
id: 'task-1',
name: 'Clean Room',
points: 10,
is_good: true,
type: 'chore' as const,
image_url: '/images/task.png',
custom_value: null,
}
@@ -50,7 +50,7 @@ describe('ParentView', () => {
id: 'task-2',
name: 'Hit Sibling',
points: 5,
is_good: false,
type: 'penalty' as const,
image_url: '/images/penalty.png',
custom_value: null,
}
@@ -344,7 +344,7 @@ describe('ParentView', () => {
// The template should show -custom_value or -points for penalties
// This is tested through the template logic, which we've verified manually
// The key is that penalties (is_good: false) show negative values
// The key is that penalties (type: 'penalty') show negative values
expect(true).toBe(true) // Placeholder - template logic verified
})
})