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/
70 lines
1.9 KiB
Vue
70 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
import TableComponent from '~/pages/widgets/TableComponent.vue'
|
|
import FilterDropdown from '~/pages/widgets/FilterDropdown.vue'
|
|
import type Component from '#models/component'
|
|
import type ComponentType from '#models/component_type'
|
|
import { usePage } from '@inertiajs/vue3'
|
|
|
|
const { props } = usePage<{ components: Component[] }>()
|
|
const { components } = props
|
|
|
|
const componentTypes = computed(() => {
|
|
const types = new Map<number, ComponentType>()
|
|
components.forEach((component) => {
|
|
if (!types.has(component.type.id)) {
|
|
types.set(component.type.id, component.type)
|
|
}
|
|
})
|
|
return Array.from(types.values())
|
|
})
|
|
|
|
const typeOptions = computed(() =>
|
|
componentTypes.value.map((type) => ({ id: type.id, label: type.name }))
|
|
)
|
|
|
|
const usageFilters = ref<Record<string, boolean>>({
|
|
unused: true,
|
|
used: false,
|
|
})
|
|
|
|
const typeFilters = ref<Record<number, boolean>>(
|
|
componentTypes.value.reduce(
|
|
(acc, type) => {
|
|
acc[type.id] = true
|
|
return acc
|
|
},
|
|
{} as Record<number, boolean>
|
|
)
|
|
)
|
|
|
|
const filteredComponents = computed(() => {
|
|
return components.filter((component) => {
|
|
const isUsed = usageFilters.value.used && component.computerId !== null
|
|
const isUnused = usageFilters.value.unused && component.computerId === null
|
|
const isTypeSelected = typeFilters.value[component.type.id]
|
|
return (isUsed || isUnused) && isTypeSelected
|
|
})
|
|
})
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<div class="relative">
|
|
<h4 class="text-xl underline">Filters</h4>
|
|
<div class="flex gap-2">
|
|
<FilterDropdown
|
|
v-model="usageFilters"
|
|
label="Usage"
|
|
:options="[
|
|
{ id: 'unused', label: 'Unused' },
|
|
{ id: 'used', label: 'Used' },
|
|
]"
|
|
/>
|
|
<FilterDropdown v-model="typeFilters" label="Types" :options="typeOptions" />
|
|
</div>
|
|
</div>
|
|
|
|
<TableComponent :components="filteredComponents" />
|
|
</div>
|
|
</template>
|