53 lines
1.8 KiB
Vue
53 lines
1.8 KiB
Vue
<script setup>
|
|
defineProps({
|
|
productName: { type: String, required: true },
|
|
categoryId: { type: String, required: true },
|
|
categories: { type: Array, required: true },
|
|
isSaving: { type: Boolean, default: false },
|
|
});
|
|
|
|
defineEmits(['update:productName', 'update:categoryId', 'submit']);
|
|
</script>
|
|
|
|
<template>
|
|
<form id="workflow-product" class="showcase-panel product-identity-step" @submit.prevent="$emit('submit')">
|
|
<div>
|
|
<p class="catalog-kicker">Step 1</p>
|
|
<h2>Identify the Product</h2>
|
|
<p class="product-identity-step__intro">Create the shared product record before adding a physical copy.</p>
|
|
</div>
|
|
<label class="fixture-label" for="product-name">Name</label>
|
|
<input
|
|
id="product-name"
|
|
:value="productName"
|
|
class="fixture-input"
|
|
required
|
|
aria-describedby="product-name-help"
|
|
@input="$emit('update:productName', $event.target.value)"
|
|
/>
|
|
<p id="product-name-help">Use the recognizable product name collectors will search for.</p>
|
|
<label class="fixture-label" for="product-category">Category</label>
|
|
<select
|
|
id="product-category"
|
|
:value="categoryId"
|
|
class="fixture-input"
|
|
required
|
|
aria-describedby="product-category-help"
|
|
@change="$emit('update:categoryId', $event.target.value)"
|
|
>
|
|
<option value="" disabled>Select a category</option>
|
|
<option v-for="category in categories" :key="category.id" :value="category.id">
|
|
{{ category.name }}
|
|
</option>
|
|
</select>
|
|
<p id="product-category-help">Choose the catalog category that defines valid conditions for this product.</p>
|
|
<button class="button button--primary" type="submit" :disabled="isSaving">
|
|
Create product
|
|
</button>
|
|
</form>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
@use './ProductIdentityStep.scss';
|
|
</style>
|