Refactor forms to use EntityEditForm component; enhance styles and improve structure

frontend/vue-app/src/components/reward/RewardEditView.vue

@@ -1,67 +1,46 @@
 <template>
-  <div class="reward-edit-view">
-    <h2>{{ isEdit ? 'Edit Reward' : 'Create Reward' }}</h2>
-    <div v-if="loading" class="loading-message">Loading reward...</div>
-    <form v-else @submit.prevent="submit" class="reward-form">
-      <div class="group">
-        <label>
-          Reward Name
-          <input ref="nameInput" v-model="name" type="text" required maxlength="64" />
-        </label>
-      </div>
-      <div class="group">
-        <label>
-          Description
-          <input v-model="description" type="text" maxlength="128" />
-        </label>
-      </div>
-      <div class="group">
-        <label>
-          Cost
-          <input v-model.number="cost" type="number" min="1" max="1000" required />
-        </label>
-      </div>
-      <div class="group">
-        <label for="reward-image">Image</label>
-        <ImagePicker
-          id="reward-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>
+  <EntityEditForm
+    entityLabel="Reward"
+    :fields="fields"
+    :initialData="initialData"
+    :isEdit="isEdit"
+    :loading="loading"
+    :error="error"
+    @submit="handleSubmit"
+    @cancel="handleCancel"
+    @add-image="handleAddImage"
+  />
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, computed, nextTick } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import ImagePicker from '@/components/utils/ImagePicker.vue'
-import '@/assets/edit-forms.css'
+import { useRouter } from 'vue-router'
+import EntityEditForm from '../shared/EntityEditForm.vue'
 
 const props = defineProps<{ id?: string }>()
-const route = useRoute()
 const router = useRouter()
 const isEdit = computed(() => !!props.id)
 
-const name = ref('')
-const description = ref('')
-const cost = ref(1)
-const selectedImageId = ref<string | null>(null)
+const fields: {
+  name: string
+  label: string
+  type: 'text' | 'number' | 'image'
+  required?: boolean
+  maxlength?: number
+  min?: number
+  max?: number
+  imageType?: number
+}[] = [
+  { name: 'name', label: 'Reward Name', type: 'text', required: true, maxlength: 64 },
+  { name: 'description', label: 'Description', type: 'text', maxlength: 128 },
+  { name: 'cost', label: 'Cost', type: 'number', required: true, min: 1, max: 1000 },
+  { name: 'image_id', label: 'Image', type: 'image', imageType: 2 },
+]
+// removed duplicate defineProps
+const initialData = ref({ name: '', description: '', cost: 1, image_id: null })
 const localImageFile = ref<File | null>(null)
 const loading = ref(false)
 const error = ref<string | null>(null)
-const nameInput = ref<HTMLInputElement | null>(null)
 
 onMounted(async () => {
   if (isEdit.value && props.id) {
@@ -70,41 +49,40 @@ onMounted(async () => {
       const resp = await fetch(`/api/reward/${props.id}`)
       if (!resp.ok) throw new Error('Failed to load reward')
       const data = await resp.json()
-      name.value = data.name
-      description.value = data.description ?? ''
-      cost.value = Number(data.cost) || 1
-      selectedImageId.value = data.image_id ?? null
-    } catch (e) {
+      initialData.value = {
+        name: data.name ?? '',
+        description: data.description ?? '',
+        cost: Number(data.cost) || 1,
+        image_id: data.image_id ?? null,
+      }
+    } catch {
       error.value = 'Could not load reward.'
     } finally {
       loading.value = false
       await nextTick()
-      nameInput.value?.focus()
     }
-  } else {
-    await nextTick()
-    nameInput.value?.focus()
   }
 })
 
-function onAddImage({ id, file }: { id: string; file: File }) {
+function handleAddImage({ id, file }: { id: string; file: File }) {
   if (id === 'local-upload') {
     localImageFile.value = file
   }
 }
 
-function handleCancel() {
-  router.back()
-}
-
-const submit = async () => {
-  let imageId = selectedImageId.value
+async function handleSubmit(form: {
+  name: string
+  description: string
+  cost: number
+  image_id: string | null
+}) {
+  let imageId = form.image_id
   error.value = null
-  if (!name.value.trim()) {
+  if (!form.name.trim()) {
     error.value = 'Reward name is required.'
     return
   }
-  if (cost.value < 1) {
+  if (form.cost < 1) {
     error.value = 'Cost must be at least 1.'
     return
   }
@@ -124,8 +102,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
     }
@@ -139,9 +117,9 @@ const submit = async () => {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
-          name: name.value,
-          description: description.value,
-          cost: cost.value,
+          name: form.name,
+          description: form.description,
+          cost: form.cost,
           image_id: imageId,
         }),
       })
@@ -150,20 +128,24 @@ const submit = async () => {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
-          name: name.value,
-          description: description.value,
-          cost: cost.value,
+          name: form.name,
+          description: form.description,
+          cost: form.cost,
           image_id: imageId,
         }),
       })
     }
     if (!resp.ok) throw new Error('Failed to save reward')
     await router.push({ name: 'RewardView' })
-  } catch (err) {
-    alert('Failed to save reward.')
+  } catch {
+    error.value = 'Failed to save reward.'
   }
   loading.value = false
 }
+
+function handleCancel() {
+  router.back()
+}
 </script>
 
 <style scoped></style>