This commit is contained in:
255
frontend/vue-app/src/components/task/TaskEditView.vue
Normal file
255
frontend/vue-app/src/components/task/TaskEditView.vue
Normal file
@@ -0,0 +1,255 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user