chore/web/vue-app/src/components/child/ChildForm.vue

<script setup lang="ts">
import { defineProps, defineEmits, ref, watch } from 'vue'
import ImagePicker from '../ImagePicker.vue'

const props = defineProps<{
  child: { id: string | number; name: string; age: number; image_id?: string | null } | null
}>()
const emit = defineEmits(['close', 'updated'])

const name = ref(props.child?.name ?? '')
const age = ref(props.child?.age ?? '')
const selectedImageId = ref<string | null>(props.child?.image_id ?? null)
const localImageFile = ref<File | null>(null)

watch(
  () => props.child,
  (c) => {
    name.value = c?.name ?? ''
    age.value = c?.age ?? ''
    selectedImageId.value = c?.image_id ?? null
    localImageFile.value = null
  },
  { immediate: true },
)

// Handle new image from ImagePicker
function onAddImage({ id, file }: { id: string; file: File }) {
  if (id === 'local-upload') {
    localImageFile.value = file
  }
}

const submit = async () => {
  let imageId = selectedImageId.value

  // If the selected image is a local upload, upload it first
  if (imageId === 'local-upload' && localImageFile.value) {
    const formData = new FormData()
    formData.append('file', localImageFile.value)
    formData.append('type', '1')
    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 (err) {
      alert('Failed to upload image.')
      return
    }
  }

  // Now update the child
  try {
    const resp = await fetch(`/api/child/${props.child?.id}/edit`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        name: name.value,
        age: age.value,
        image_id: imageId,
      }),
    })
    if (!resp.ok) throw new Error('Failed to update child')
    emit('updated')
  } catch (err) {
    alert('Failed to update child.')
  }
}
</script>

<template>
  <div class="modal-backdrop">
    <div class="modal">
      <h3>Edit Child</h3>
      <form @submit.prevent="submit" class="form">
        <div class="form-group">
          <label for="child-name">Name</label>
          <input id="child-name" v-model="name" required />
        </div>
        <div class="form-group">
          <label for="child-age">Age</label>
          <input id="child-age" v-model="age" type="number" min="0" required />
        </div>
        <div class="form-group image-picker-group">
          <label for="child-image">Image</label>
          <ImagePicker
            id="child-image"
            v-model="selectedImageId"
            :image-type="1"
            @add-image="onAddImage"
          />
        </div>
        <div class="actions">
          <button type="button" class="btn cancel" @click="emit('close')">Cancel</button>
          <button type="submit" class="btn save">Save</button>
        </div>
      </form>
    </div>
  </div>
</template>

<style scoped>
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 1200;
  overflow-y: auto;
  padding-top: max(3vh, env(safe-area-inset-top, 24px));
  padding-bottom: max(3vh, env(safe-area-inset-bottom, 24px));
}

.modal {
  background: #fff;
  color: #222;
  padding: 1.2rem 2rem 1.2rem 2rem;
  border-radius: 12px;
  width: 360px;
  max-width: 100vw;
  max-height: 100vh;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  text-align: center;
  overflow-y: auto;
  box-sizing: border-box;
}

@media (max-width: 600px), (max-height: 480px) {
  .modal {
    width: 90vw;
    max-width: 98vw;
    max-height: 94vh;
    padding: 0.7rem 0.7rem 0.7rem 0.7rem;
    font-size: 0.97rem;
  }
}

@media (orientation: landscape) and (min-width: 601px) {
  .modal {
    width: 75vw;
    max-width: 600px;
    max-height: 94vh;
  }
}

h3 {
  margin-bottom: 1.2rem;
  font-size: 1.15rem;
  color: #667eea;
  font-weight: 700;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.form-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  box-sizing: border-box;
}

label {
  font-weight: 600;
  color: #333;
  font-size: 1rem;
}

input[type='text'],
input[type='number'] {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  border: 1px solid #e6e6e6;
  font-size: 1rem;
  background: #fafbff;
  color: #222;
  transition: border 0.2s;
}
input:focus {
  outline: none;
  border: 1.5px solid #667eea;
}

.actions {
  display: flex;
  gap: 0.7rem;
  justify-content: center;
  margin-top: 0.5rem;
}
.btn {
  padding: 0.5rem 1.1rem;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
  transition: background 0.18s;
}
.btn.cancel {
  background: #f3f3f3;
  color: #666;
}
.btn.save {
  background: #667eea;
  color: white;
}
.btn.save:hover {
  background: #5a67d8;
}

.form-group.image-picker-group {
  display: block;
  text-align: left;
}
</style>