Kevin L'Hereec
3579c9dfec
- 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/
61 lines
1.7 KiB
Vue
61 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { noImagePlaceholder } from '~/assets/images'
|
|
import { usePage } from '@inertiajs/vue3'
|
|
import Computer from '#models/computer'
|
|
import ComputerCard from '~/pages/widgets/ComputerCard.vue'
|
|
import FilterDropdown from '~/pages/widgets/FilterDropdown.vue'
|
|
import { computed, ref } from 'vue'
|
|
|
|
const { computers } = usePage<{ computers: Computer[] }>().props
|
|
|
|
const filters = ref<Record<string, boolean>>({
|
|
onGoing: true,
|
|
finished: true,
|
|
sold: false,
|
|
})
|
|
|
|
const stateToFilterKey: Record<string, string> = {
|
|
ON_GOING: 'onGoing',
|
|
FINISHED: 'finished',
|
|
SOLD: 'sold',
|
|
}
|
|
|
|
const filteredComputers = computed(() => {
|
|
return computers.filter((computer) => {
|
|
const key = stateToFilterKey[computer.state.name]
|
|
return key ? filters.value[key] : false
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="relative">
|
|
<h4 class="text-xl underline">Filters</h4>
|
|
<div class="flex gap-2">
|
|
<FilterDropdown
|
|
v-model="filters"
|
|
label="Usage"
|
|
:options="[
|
|
{ id: 'onGoing', label: 'On Going' },
|
|
{ id: 'finished', label: 'Finished' },
|
|
{ id: 'sold', label: 'Sold' },
|
|
]"
|
|
/>
|
|
</div>
|
|
<div class="mt-4 mb-3 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4">
|
|
<ComputerCard
|
|
v-for="computer in filteredComputers"
|
|
:key="computer.id"
|
|
:computerId="computer.id"
|
|
:image-src="computer.pictures.find((p) => p.order === 1)?.link || noImagePlaceholder"
|
|
image-alt="Computer Image"
|
|
:title="computer.title"
|
|
:cost="computer.cost"
|
|
:price="computer.sellPrice"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|