feat: Refactor ScheduleModal to support interval scheduling with date input and deadline toggle
Some checks failed
Chore App Build, Test, and Push Docker Images / build-and-push (push) Failing after 2m30s

- Updated ChoreSchedule model to include anchor_date and interval_has_deadline.
- Refactored interval scheduling logic in scheduleUtils to use anchor_date.
- Introduced DateInputField component for selecting anchor dates in ScheduleModal.
- Enhanced ScheduleModal to include a stepper for interval days and a toggle for deadline.
- Updated tests for ScheduleModal and scheduleUtils to reflect new interval scheduling logic.
- Added DateInputField tests to ensure proper functionality and prop handling.
This commit is contained in:
2026-02-26 15:16:46 -05:00
parent 2403daa3f7
commit a197f8e206
12 changed files with 797 additions and 172 deletions

View File

@@ -0,0 +1,39 @@
<template>
<input class="date-input-field" type="date" :value="modelValue" :min="min" @change="onChanged" />
</template>
<script setup lang="ts">
const props = defineProps<{
modelValue: string
min?: string
}>()
const emit = defineEmits<{
(e: 'update:modelValue', value: string): void
}>()
function onChanged(event: Event) {
emit('update:modelValue', (event.target as HTMLInputElement).value)
}
</script>
<style scoped>
.date-input-field {
padding: 0.4rem 0.6rem;
border: 1.5px solid var(--kebab-menu-border, #bcc1c9);
border-radius: 6px;
background: var(--modal-bg, #fff);
color: var(--secondary, #7257b3);
font-size: 0.95rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
outline: none;
transition: border-color 0.15s;
}
.date-input-field:hover,
.date-input-field:focus {
border-color: var(--btn-primary, #667eea);
}
</style>