Refactor forms to use EntityEditForm component; enhance styles and improve structure
Some checks failed
Gitea Actions Demo / build-and-push (push) Failing after 6s
Some checks failed
Gitea Actions Demo / build-and-push (push) Failing after 6s
This commit is contained in:
@@ -1,66 +1,122 @@
|
||||
<style scoped>
|
||||
.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, defineEmits, nextTick } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import ImagePicker from '@/components/utils/ImagePicker.vue'
|
||||
import '@/assets/edit-forms.css'
|
||||
import { ref, onMounted, computed, nextTick } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import EntityEditForm from '../shared/EntityEditForm.vue'
|
||||
|
||||
const route = useRoute()
|
||||
const props = defineProps<{ id?: string }>()
|
||||
const router = useRouter()
|
||||
const isEdit = computed(() => !!route.params.id)
|
||||
const emit = defineEmits<{
|
||||
(e: 'updated'): void
|
||||
}>()
|
||||
// Define props
|
||||
const props = defineProps<{
|
||||
id?: string
|
||||
}>()
|
||||
const isEdit = computed(() => !!props.id)
|
||||
|
||||
const name = ref('')
|
||||
const points = ref(0)
|
||||
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: 100 },
|
||||
{ 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 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) {
|
||||
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()
|
||||
name.value = data.name
|
||||
points.value = Number(data.points) || 0
|
||||
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
|
||||
selectedImageId.value = data.image_id
|
||||
} catch (e) {
|
||||
} catch {
|
||||
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
|
||||
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 (!name.value.trim()) {
|
||||
if (!form.name.trim()) {
|
||||
error.value = 'Task name is required.'
|
||||
return
|
||||
}
|
||||
if (points.value < 1) {
|
||||
if (form.points < 1) {
|
||||
error.value = 'Points must be at least 1.'
|
||||
return
|
||||
}
|
||||
@@ -80,8 +136,8 @@ const submit = async () => {
|
||||
if (!resp.ok) throw new Error('Image upload failed')
|
||||
const data = await resp.json()
|
||||
imageId = data.id
|
||||
} catch (err) {
|
||||
alert('Failed to upload image.')
|
||||
} catch {
|
||||
error.value = 'Failed to upload image.'
|
||||
loading.value = false
|
||||
return
|
||||
}
|
||||
@@ -90,14 +146,14 @@ const submit = async () => {
|
||||
// Now update or create the task
|
||||
try {
|
||||
let resp
|
||||
if (isEdit.value) {
|
||||
if (isEdit.value && props.id) {
|
||||
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,
|
||||
name: form.name,
|
||||
points: form.points,
|
||||
is_good: form.is_good,
|
||||
image_id: imageId,
|
||||
}),
|
||||
})
|
||||
@@ -106,18 +162,17 @@ const submit = async () => {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
name: name.value,
|
||||
points: points.value,
|
||||
is_good: isGood.value,
|
||||
name: form.name,
|
||||
points: form.points,
|
||||
is_good: form.is_good,
|
||||
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.')
|
||||
} catch {
|
||||
error.value = 'Failed to save task.'
|
||||
}
|
||||
loading.value = false
|
||||
}
|
||||
@@ -125,131 +180,37 @@ const submit = async () => {
|
||||
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
|
||||
<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="submit" :disabled="loading" class="btn btn-primary">
|
||||
{{ isEdit ? 'Save' : 'Create' }}
|
||||
<button
|
||||
type="button"
|
||||
:class="['toggle-btn', !modelValue ? 'bad-active' : '']"
|
||||
@click="update(false)"
|
||||
>
|
||||
Bad
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
</EntityEditForm>
|
||||
</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