chore/frontend/vue-app/src/components/task/TaskEditView.vue

<script setup lang="ts">
import { ref, onMounted, computed, defineEmits, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import ImagePicker from '@/components/utils/ImagePicker.vue'
import '@/assets/edit-forms.css'

const route = useRoute()
const router = useRouter()
const isEdit = computed(() => !!route.params.id)
const emit = defineEmits<{
  (e: 'updated'): void
}>()
// Define props
const props = defineProps<{
  id?: string
}>()

const name = ref('')
const points = ref(0)
const isGood = ref(true)
const selectedImageId = ref<string | null>(null)
const localImageFile = ref<File | null>(null)

const nameInput = ref<HTMLInputElement | null>(null)

const loading = ref(false)
const error = ref<string | null>(null)

// Load task if editing
onMounted(async () => {
  if (isEdit.value) {
    loading.value = true
    try {
      const resp = await fetch(`/api/task/${props.id}`)
      if (!resp.ok) throw new Error('Failed to load task')
      const data = await resp.json()
      name.value = data.name
      points.value = Number(data.points) || 0
      isGood.value = data.is_good
      selectedImageId.value = data.image_id
    } catch (e) {
      error.value = 'Could not load task.'
    } finally {
      loading.value = false
      // Delay focus until after DOM updates and event propagation
      await nextTick()
      nameInput.value?.focus()
    }
  } else {
    // For create, also use nextTick
    await nextTick()
    nameInput.value?.focus()
  }
})

const submit = async () => {
  let imageId = selectedImageId.value
  error.value = null
  if (!name.value.trim()) {
    error.value = 'Task name is required.'
    return
  }
  if (points.value < 1) {
    error.value = 'Points must be at least 1.'
    return
  }
  loading.value = true

  // 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', '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 (err) {
      alert('Failed to upload image.')
      loading.value = false
      return
    }
  }

  // Now update or create the task
  try {
    let resp
    if (isEdit.value) {
      resp = await fetch(`/api/task/${props.id}/edit`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: name.value,
          points: points.value,
          is_good: isGood.value,
          image_id: imageId,
        }),
      })
    } else {
      resp = await fetch('/api/task/add', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: name.value,
          points: points.value,
          is_good: isGood.value,
          image_id: imageId,
        }),
      })
    }
    if (!resp.ok) throw new Error('Failed to save task')
    emit('updated')
    await router.push({ name: 'TaskView' })
  } catch (err) {
    alert('Failed to save task.')
  }
  loading.value = false
}

function handleCancel() {
  router.back()
}

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

<template>
  <div class="task-edit-view">
    <h2>{{ isEdit ? 'Edit Task' : 'Create Task' }}</h2>
    <div v-if="loading" class="loading-message">Loading task...</div>
    <form v-else @submit.prevent="submit" class="task-form">
      <div class="group">
        <label for="task-name">
          Task Name
          <input
            id="task-name"
            ref="nameInput"
            v-model="name"
            type="text"
            required
            maxlength="64"
          />
        </label>
      </div>
      <div class="group">
        <label for="task-points">
          Task Points
          <input
            id="task-points"
            v-model.number="points"
            type="number"
            min="1"
            max="100"
            required
          />
        </label>
      </div>
      <div class="group">
        <label for="task-type">
          Task Type
          <div class="good-bad-toggle" id="task-type">
            <button
              type="button"
              :class="['toggle-btn', isGood ? 'good-active' : '']"
              @click="isGood = true"
            >
              Good
            </button>
            <button
              type="button"
              :class="['toggle-btn', !isGood ? 'bad-active' : '']"
              @click="isGood = false"
            >
              Bad
            </button>
          </div>
        </label>
      </div>
      <div class="group">
        <label for="task-image">Image</label>
        <ImagePicker
          id="task-image"
          v-model="selectedImageId"
          :image-type="2"
          @add-image="onAddImage"
        />
      </div>
      <div v-if="error" class="error">{{ error }}</div>
      <div class="actions">
        <button type="button" @click="handleCancel" :disabled="loading" class="btn btn-secondary">
          Cancel
        </button>
        <button type="submit" :disabled="loading" class="btn btn-primary">
          {{ isEdit ? 'Save' : 'Create' }}
        </button>
      </div>
    </form>
  </div>
</template>

<style scoped>
.good-bad-toggle {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
  justify-content: flex-start;
}

button.toggle-btn {
  flex: 1 1 0;
  padding: 0.5rem 1.2rem;
  border-width: 2px;
  border-radius: 7px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition:
    background 0.18s,
    color 0.18s,
    border-style 0.18s;
  outline: none;
  border-style: outset; /* Default style */
  background: var(--toggle-btn-bg);
  color: var(--toggle-btn-color);
  border-color: var(--toggle-btn-border);
}

button.toggle-btn.good-active {
  background: var(--toggle-btn-good-bg);
  color: var(--toggle-btn-good-color);
  box-shadow: 0 2px 8px var(--toggle-btn-good-shadow);
  transform: translateY(2px) scale(0.97);
  border-style: ridge;
  border-color: var(--toggle-btn-good-border);
}

button.toggle-btn.bad-active {
  background: var(--toggle-btn-bad-bg);
  color: var(--toggle-btn-bad-color);
  box-shadow: 0 2px 8px var(--toggle-btn-bad-shadow);
  transform: translateY(2px) scale(0.97);
  border-style: ridge;
  border-color: var(--toggle-btn-bad-border);
}
</style>