ryan
e2bb9cd6b9
Chore App Build, Test, and Push Docker Images / build-and-push (push) Failing after 3m4s
- Introduced a modular tutorial layer to guide new parents through the app setup process. - Implemented a 3-step forced intro after first sign-in (PIN setup → child creation → chore creation). - Added just-in-time contextual hints for various features as users encounter them. - Persisted user progress on the backend with new fields in the User model. - Created a new tutorial controller and step registry in the frontend for managing tutorial states. - Added Help button for easy access to tutorial tips and a restart option in the user profile. - Ensured accessibility and mobile responsiveness for the tutorial overlay. - Included tests for backend and frontend functionalities related to the tutorial.
125 lines
3.5 KiB
Vue
125 lines
3.5 KiB
Vue
<template>
|
|
<div class="view">
|
|
<EntityEditForm
|
|
entityLabel="Chore"
|
|
:fields="fields"
|
|
:initialData="initialData"
|
|
:isEdit="isEdit"
|
|
:loading="loading"
|
|
:error="error"
|
|
@submit="handleSubmit"
|
|
@cancel="handleCancel"
|
|
@add-image="handleAddImage"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, computed, nextTick } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import EntityEditForm from '../shared/EntityEditForm.vue'
|
|
import { maybeShow as tutorialMaybeShow } from '@/tutorial/controller'
|
|
import '@/assets/styles.css'
|
|
|
|
const props = defineProps<{ id?: string }>()
|
|
const router = useRouter()
|
|
const isEdit = computed(() => !!props.id)
|
|
|
|
const fields = [
|
|
{ name: 'name', label: 'Chore Name', type: 'text' as const, required: true, maxlength: 64 },
|
|
{ name: 'points', label: 'Points', type: 'number' as const, required: true, min: 1, max: 1000 },
|
|
{ name: 'image_id', label: 'Image', type: 'image' as const, imageType: 2 },
|
|
]
|
|
|
|
const initialData = ref({ name: '', points: 1, image_id: null })
|
|
const localImageFile = ref<File | null>(null)
|
|
const loading = ref(false)
|
|
const error = ref<string | null>(null)
|
|
|
|
onMounted(async () => {
|
|
if (!isEdit.value) tutorialMaybeShow('edit-chore-name')
|
|
if (isEdit.value && props.id) {
|
|
loading.value = true
|
|
try {
|
|
const resp = await fetch(`/api/chore/${props.id}`)
|
|
if (!resp.ok) throw new Error('Failed to load chore')
|
|
const data = await resp.json()
|
|
initialData.value = {
|
|
name: data.name ?? '',
|
|
points: Number(data.points) || 1,
|
|
image_id: data.image_id ?? null,
|
|
}
|
|
} catch {
|
|
error.value = 'Could not load chore.'
|
|
} finally {
|
|
loading.value = false
|
|
await nextTick()
|
|
}
|
|
}
|
|
})
|
|
|
|
function handleAddImage({ id, file }: { id: string; file: File }) {
|
|
if (id === 'local-upload') localImageFile.value = file
|
|
}
|
|
|
|
async function handleSubmit(form: { name: string; points: number; image_id: string | null }) {
|
|
let imageId = form.image_id
|
|
error.value = null
|
|
if (!form.name.trim()) {
|
|
error.value = 'Chore name is required.'
|
|
return
|
|
}
|
|
if (form.points < 1) {
|
|
error.value = 'Points must be at least 1.'
|
|
return
|
|
}
|
|
loading.value = true
|
|
|
|
if (imageId === 'local-upload' && localImageFile.value) {
|
|
const formData = new FormData()
|
|
formData.append('file', localImageFile.value)
|
|
formData.append('type', '2')
|
|
formData.append('permanent', 'false')
|
|
try {
|
|
const resp = await fetch('/api/image/upload', { method: 'POST', body: formData })
|
|
if (!resp.ok) throw new Error('Image upload failed')
|
|
const data = await resp.json()
|
|
imageId = data.id
|
|
} catch {
|
|
error.value = 'Failed to upload image.'
|
|
loading.value = false
|
|
return
|
|
}
|
|
}
|
|
|
|
try {
|
|
const url = isEdit.value && props.id ? `/api/chore/${props.id}/edit` : '/api/chore/add'
|
|
const resp = await fetch(url, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ name: form.name, points: form.points, image_id: imageId }),
|
|
})
|
|
if (!resp.ok) throw new Error('Failed to save chore')
|
|
await router.push({ name: 'ChoreView' })
|
|
} catch {
|
|
error.value = 'Failed to save chore.'
|
|
}
|
|
loading.value = false
|
|
}
|
|
|
|
function handleCancel() {
|
|
router.back()
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.view {
|
|
max-width: 400px;
|
|
margin: 0 auto;
|
|
background: var(--form-bg);
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 24px var(--form-shadow);
|
|
padding: 2rem 2.2rem 1.5rem 2.2rem;
|
|
}
|
|
</style>
|