refactor: uniform validation, fix create form UX, dedupe filter dropdowns
- Remove dead registerValidator (Auth/register.ts), unused since signupValidator is the one actually wired to NewAccountController - computers/create.vue: switch to useForm() + @submit.prevent so the form submits on Enter and shows a processing state, matching components/create.vue - components/edit.vue: drop the 'origin' field, which was never provided by the backend (edit() never shared it) and therefore always undefined - Extract FilterDropdown.vue and reuse it in ComponentsViewer/ComputersViewer, removing ~80 lines of duplicated dropdown markup/logic and fixing duplicate HTML ids (id="used" appeared twice in ComputersViewer) - Move MIGRATION_*.md artifacts into docs/migration-history/
This commit is contained in:
1 parent
3cc189c534
commit
3579c9dfec
10 files changed
+163
-262
No files matched your search
@@ -1,11 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
import { Link } from '@adonisjs/inertia/vue'
|
||||
import { usePage } from '@inertiajs/vue3'
|
||||
import { useForm, usePage } from '@inertiajs/vue3'
|
||||
import type { Component, ComputerState } from '~/pages/types/UITypes'
|
||||
|
||||
const { props } = usePage<{
|
||||
components: any[]
|
||||
states: any[]
|
||||
components: Component[]
|
||||
states: ComputerState[]
|
||||
errors: Record<string, string>
|
||||
}>()
|
||||
const { components, states } = props
|
||||
@@ -26,7 +27,7 @@ const componentTypeOrder = [
|
||||
]
|
||||
|
||||
const componentsByType = computed(() => {
|
||||
const groups = new Map<string, any[]>()
|
||||
const groups = new Map<string, Component[]>()
|
||||
components.forEach((component) => {
|
||||
if (!groups.has(component.type.name)) {
|
||||
groups.set(component.type.name, [])
|
||||
@@ -38,21 +39,35 @@ const componentsByType = computed(() => {
|
||||
.sort((a, b) => componentTypeOrder.indexOf(a.type) - componentTypeOrder.indexOf(b.type))
|
||||
})
|
||||
|
||||
const form = reactive({
|
||||
const form = useForm<{
|
||||
title: string
|
||||
sellPrice: number
|
||||
gpuScore: number
|
||||
cpuScore: number
|
||||
stateId: number
|
||||
globalScore: number
|
||||
componentsId: number[]
|
||||
pictures: Record<string, never>[]
|
||||
}>({
|
||||
title: '',
|
||||
sellPrice: 0,
|
||||
gpuScore: 0,
|
||||
cpuScore: 0,
|
||||
stateId: 1,
|
||||
globalScore: 0,
|
||||
componentsId: [] as number[],
|
||||
componentsId: [],
|
||||
pictures: [],
|
||||
})
|
||||
|
||||
function submitForm() {
|
||||
form.post('/computers')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="max-w-4xl mx-auto p-8 bg-white shadow-lg rounded-lg">
|
||||
<h1 class="text-2xl font-semibold mb-8 text-gray-800">Create New Computer</h1>
|
||||
<form class="space-y-6">
|
||||
<form class="space-y-6" @submit.prevent="submitForm">
|
||||
<div class="mt-2">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2" for="title">Title</label>
|
||||
<input
|
||||
@@ -149,16 +164,21 @@ const form = reactive({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href="/computers"
|
||||
type="button"
|
||||
as="button"
|
||||
method="post"
|
||||
:data="form"
|
||||
class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-blue-700 transition"
|
||||
>
|
||||
Create
|
||||
</Link>
|
||||
<div class="flex gap-4">
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="form.processing"
|
||||
class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700 transition disabled:opacity-50"
|
||||
>
|
||||
{{ form.processing ? 'Creating…' : 'Create' }}
|
||||
</button>
|
||||
<Link
|
||||
href="/computers"
|
||||
class="px-4 py-2 bg-gray-300 text-gray-800 rounded hover:bg-gray-400 transition"
|
||||
>
|
||||
Cancel
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in new issue
Block a user