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

<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;
}
.good-bad-toggle {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.2rem;
  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;
  background: var(--toggle-btn-bg, #f5f5f5);
  color: var(--toggle-btn-color, #333);
  border-color: var(--toggle-btn-border, #ccc);
}

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

button.toggle-btn.bad-active {
  background: var(--toggle-btn-bad-bg, #ffe6e6);
  color: var(--toggle-btn-bad-color, #b91c1c);
  box-shadow: 0 2px 8px var(--toggle-btn-bad-shadow, #f2b6b6);
  transform: translateY(2px) scale(0.97);
  border-style: ridge;
  border-color: var(--toggle-btn-bad-border, #b91c1c);
}
</style>
<script setup lang="ts">
import { ref, onMounted, computed, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import EntityEditForm from '../shared/EntityEditForm.vue'
import '@/assets/styles.css'

const props = defineProps<{ id?: string }>()
const router = useRouter()
const isEdit = computed(() => !!props.id)

const fields: {
  name: string
  label: string
  type: 'text' | 'number' | 'image' | 'custom'
  required?: boolean
  maxlength?: number
  min?: number
  max?: number
  imageType?: number
}[] = [
  { name: 'name', label: 'Task Name', type: 'text', required: true, maxlength: 64 },
  { name: 'points', label: 'Task Points', type: 'number', required: true, min: 1, max: 1000 },
  { name: 'is_good', label: 'Task Type', type: 'custom' },
  { name: 'image_id', label: 'Image', type: 'image', imageType: 2 },
]

const initialData = ref({ name: '', points: 1, image_id: null, is_good: true })
const isGood = ref(true)
const localImageFile = ref<File | null>(null)
const loading = ref(false)
const error = ref<string | null>(null)

onMounted(async () => {
  if (isEdit.value && props.id) {
    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()
      initialData.value = {
        name: data.name ?? '',
        points: Number(data.points) || 1,
        image_id: data.image_id ?? null,
        is_good: data.is_good,
      }
      isGood.value = data.is_good
    } catch {
      error.value = 'Could not load task.'
    } 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
  is_good: boolean
}) {
  let imageId = form.image_id
  error.value = null
  if (!form.name.trim()) {
    error.value = 'Task name is required.'
    return
  }
  if (form.points < 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 {
      error.value = 'Failed to upload image.'
      loading.value = false
      return
    }
  }

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

function handleCancel() {
  router.back()
}
</script>

<template>
  <div class="view">
    <EntityEditForm
      entityLabel="Task"
      :fields="fields"
      :initialData="initialData"
      :isEdit="isEdit"
      :loading="loading"
      :error="error"
      @submit="handleSubmit"
      @cancel="handleCancel"
      @add-image="handleAddImage"
    >
      <template #custom-field-is_good="{ modelValue, update }">
        <div class="good-bad-toggle">
          <button
            type="button"
            :class="['toggle-btn', modelValue ? 'good-active' : '']"
            @click="update(true)"
          >
            Good
          </button>
          <button
            type="button"
            :class="['toggle-btn', !modelValue ? 'bad-active' : '']"
            @click="update(false)"
          >
            Bad
          </button>
        </div>
      </template>
    </EntityEditForm>
  </div>
</template>