Kevin L'Hereec
4174d92711
- New nullable purchase_url column on components - Store/update validators accept an optional purchaseUrl (must be a valid absolute URL with a protocol when provided) - components/create.vue: NewPartSearch import now also fills purchaseUrl from the scraped part's source URL (pc-builder.io product page); the field remains manually editable for second-hand parts entered by hand - components/edit.vue: purchaseUrl is editable after creation - components/show.vue: displays the purchase site as a clickable link when present - 4 new functional tests: create with/without a purchase URL, invalid URL rejected (asserts the Inertia inputErrorsBag flash, not a raw 422 - content negotiation only returns JSON for XHR/API-style requests), and updating an existing component's purchase URL
62 lines
2.0 KiB
Vue
62 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { Link } from '@adonisjs/inertia/vue'
|
|
import type { Component } from '~/pages/types/UITypes'
|
|
|
|
const props = defineProps<{ component: Component }>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="max-w-2xl mx-auto p-8 bg-white shadow-lg rounded-lg">
|
|
<h1 class="text-2xl font-semibold mb-8 text-gray-800">Component Details</h1>
|
|
|
|
<template v-if="props.component">
|
|
<div class="mb-6">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2">Name</label>
|
|
<div class="px-3 py-2 border rounded text-gray-700">
|
|
{{ props.component.name }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2">Price</label>
|
|
<div class="px-3 py-2 border rounded text-gray-700">${{ props.component.price }}</div>
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2">Type</label>
|
|
<div class="px-3 py-2 border rounded text-gray-700">
|
|
{{ props.component.type?.name ?? 'N/A' }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2">Purchase Date</label>
|
|
<div class="px-3 py-2 border rounded text-gray-700">
|
|
{{ props.component.purchaseDate }}
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="props.component.purchaseUrl" class="mb-6">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2">Purchase Site</label>
|
|
<a
|
|
:href="props.component.purchaseUrl"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="block px-3 py-2 border rounded text-indigo-600 hover:text-indigo-800 hover:underline truncate"
|
|
>
|
|
{{ props.component.purchaseUrl }}
|
|
</a>
|
|
</div>
|
|
|
|
<Link
|
|
:href="`/components/${props.component.id}/edit`"
|
|
type="button"
|
|
as="button"
|
|
class="w-full md:w-auto px-4 py-2 bg-indigo-600 text-white rounded hover:bg-blue-700 transition text-center"
|
|
>
|
|
Edit
|
|
</Link>
|
|
</template>
|
|
</div>
|
|
</template>
|