Refactored frontend directory

frontend/src/components/reward/RewardEditView.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="view">
+    <EntityEditForm
+      entityLabel="Reward"
+      :fields="fields"
+      :initialData="initialData"
+      :isEdit="isEdit"
+      :loading="loading"
+      :error="error"
+      @submit="handleSubmit"
+      @cancel="handleCancel"
+      @add-image="handleAddImage"
+    />
+  </div>
+</template>
+
+<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'
+  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: 10000 },
+  { 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)
+
+onMounted(async () => {
+  if (isEdit.value && props.id) {
+    loading.value = true
+    try {
+      const resp = await fetch(`/api/reward/${props.id}`)
+      if (!resp.ok) throw new Error('Failed to load reward')
+      const data = await resp.json()
+      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()
+    }
+  }
+})
+
+function handleAddImage({ id, file }: { id: string; file: File }) {
+  if (id === 'local-upload') {
+    localImageFile.value = file
+  }
+}
+
+async function handleSubmit(form: {
+  name: string
+  description: string
+  cost: number
+  image_id: string | null
+}) {
+  let imageId = form.image_id
+  error.value = null
+  if (!form.name.trim()) {
+    error.value = 'Reward name is required.'
+    return
+  }
+  if (form.cost < 1) {
+    error.value = 'Cost 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 reward
+  try {
+    let resp
+    if (isEdit.value && props.id) {
+      resp = await fetch(`/api/reward/${props.id}/edit`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: form.name,
+          description: form.description,
+          cost: form.cost,
+          image_id: imageId,
+        }),
+      })
+    } else {
+      resp = await fetch('/api/reward/add', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          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 {
+    error.value = 'Failed to save reward.'
+  }
+  loading.value = false
+}
+
+function handleCancel() {
+  router.back()
+}
+</script>
+
+<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;
+}
+</style>

frontend/src/components/reward/RewardView.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="reward-view">
+    <MessageBlock v-if="rewardCountRef === 0" message="No rewards">
+      <span> <button class="round-btn" @click="createReward">Create</button> a reward </span>
+    </MessageBlock>
+
+    <ItemList
+      v-else
+      ref="rewardListRef"
+      fetchUrl="/api/reward/list"
+      itemKey="rewards"
+      :itemFields="REWARD_FIELDS"
+      imageField="image_id"
+      deletable
+      @clicked="(reward: Reward) => $router.push({ name: 'EditReward', params: { id: reward.id } })"
+      @delete="(reward: Reward) => confirmDeleteReward(reward.id)"
+      @loading-complete="(count) => (rewardCountRef = count)"
+      :getItemClass="(item) => `reward`"
+    >
+      <template #item="{ item }">
+        <img v-if="item.image_url" :src="item.image_url" />
+        <span class="name">{{ item.name }}</span>
+        <span class="value">{{ item.cost }} pts</span>
+      </template>
+    </ItemList>
+
+    <FloatingActionButton aria-label="Create Reward" @click="createReward" />
+
+    <DeleteModal
+      :show="showConfirm"
+      message="Are you sure you want to delete this reward?"
+      @confirm="deleteReward"
+      @cancel="showConfirm = false"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+import ItemList from '../shared/ItemList.vue'
+import MessageBlock from '@/components/shared/MessageBlock.vue'
+//import '@/assets/button-shared.css'
+import FloatingActionButton from '../shared/FloatingActionButton.vue'
+import DeleteModal from '../shared/DeleteModal.vue'
+import type { Reward } from '@/common/models'
+import { REWARD_FIELDS } from '@/common/models'
+
+import { eventBus } from '@/common/eventBus'
+
+const $router = useRouter()
+
+const showConfirm = ref(false)
+const rewardToDelete = ref<string | null>(null)
+const rewardListRef = ref<InstanceType<typeof ItemList> | null>(null)
+const rewardCountRef = ref<number>(-1)
+
+function handleRewardModified(event: any) {
+  // Always refresh the reward list on any add, edit, or delete
+  if (rewardListRef.value && typeof rewardListRef.value.refresh === 'function') {
+    rewardListRef.value.refresh()
+  }
+}
+
+onMounted(() => {
+  eventBus.on('reward_modified', handleRewardModified)
+})
+
+onUnmounted(() => {
+  eventBus.off('reward_modified', handleRewardModified)
+})
+function confirmDeleteReward(rewardId: string) {
+  rewardToDelete.value = rewardId
+  showConfirm.value = true
+}
+
+const deleteReward = async () => {
+  const id = rewardToDelete.value
+  if (!id) return
+  try {
+    const resp = await fetch(`/api/reward/${id}`, {
+      method: 'DELETE',
+    })
+    if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
+    // No need to refresh here; SSE will trigger refresh
+  } catch (err) {
+    console.error('Failed to delete reward:', err)
+  } finally {
+    showConfirm.value = false
+    rewardToDelete.value = null
+  }
+}
+
+const createReward = () => {
+  $router.push({ name: 'CreateReward' })
+}
+</script>
+
+<style scoped>
+.reward-view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  min-height: 0;
+}
+
+.name {
+  flex: 1;
+  text-align: left;
+  font-weight: 600;
+}
+
+.value {
+  min-width: 60px;
+  text-align: right;
+  font-weight: 600;
+}
+
+:deep(.reward) {
+  border-color: var(--list-item-border-reward);
+  background: var(--list-item-bg-reward);
+}
+</style>