Skip to content

Commit 33c2d4f

Browse files
RLASH18RLASH18
committed
feat: update inventory item creation page and fix rendering and flash messages bug
1 parent 52eef55 commit 33c2d4f

2 files changed

Lines changed: 49 additions & 48 deletions

File tree

‎resources/js/layouts/AppLayout.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,13 @@ watch(
2727
messages.scripts = [];
2828
messages.styles = [];
2929
flasher.render(messages);
30+
31+
// Manually clear messages from history state to prevent persistence
32+
if (window.history.state && window.history.state.page && window.history.state.page.props) {
33+
const state = { ...window.history.state };
34+
state.page.props.messages = null;
35+
window.history.replaceState(state, '');
36+
}
3037
}
3138
},
3239
{ immediate: true }

‎resources/js/pages/admin/Inventory/Create.vue‎

Lines changed: 42 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,13 @@ import InputError from '@/components/InputError.vue';
44
import AppLayout from '@/layouts/AppLayout.vue';
55
import inventory from '@/routes/admin/inventory';
66
import { type BreadcrumbItem } from '@/types';
7-
import { Head, useForm } from '@inertiajs/vue3';
7+
import { Form, Head, useForm } from '@inertiajs/vue3';
88
import { Input } from '@/components/ui/input';
99
import { Label } from '@/components/ui/label';
1010
import { Button } from '@/components/ui/button';
1111
import Select from '@/components/Select.vue';
12+
import Textarea from '@/components/ui/textarea/Textarea.vue';
13+
import { Spinner } from '@/components/ui/spinner';
1214
1315
const breadcrumbs: BreadcrumbItem[] = [
1416
{
@@ -21,20 +23,6 @@ const breadcrumbs: BreadcrumbItem[] = [
2123
},
2224
];
2325
24-
const form = useForm({
25-
supplier_id: '' as string | number,
26-
brand_name: '',
27-
item_name: '',
28-
description: '',
29-
category: '',
30-
unit_price: '' as string | number,
31-
quantity: '' as string | number,
32-
restock_threshold: 10,
33-
item_image_1: null as File | null,
34-
item_image_2: null as File | null,
35-
item_image_3: null as File | null,
36-
});
37-
3826
const categories = [
3927
'Hand Tools',
4028
'Power Tools',
@@ -61,99 +49,105 @@ const categories = [
6149
<LinkButton :href="inventory.index().url" mode="back" label="Back to list" />
6250
</div>
6351

64-
<form @submit.prevent="form.post(inventory.store().url)" class="grid gap-6">
52+
<Form :action="inventory.store()" v-slot="{ errors, processing }" :reset-on-success="[
53+
'item_name',
54+
'brand_name',
55+
'category',
56+
'supplier_id',
57+
'unit_price',
58+
'quantity',
59+
'restock_threshold',
60+
'description',
61+
'item_image_1',
62+
'item_image_2',
63+
'item_image_3'
64+
]" class="grid gap-6">
65+
6566
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
6667
<!-- Item Name -->
6768
<div class="space-y-2">
6869
<Label for="item_name">Item Name</Label>
69-
<Input id="item_name" v-model="form.item_name" placeholder="Enter item name" required />
70-
<InputError :message="form.errors.item_name" />
70+
<Input id="item_name" name="item_name" placeholder="Enter item name" required />
71+
<InputError :message="errors.item_name" />
7172
</div>
7273

7374
<!-- Brand Name -->
7475
<div class="space-y-2">
7576
<Label for="brand_name">Brand Name</Label>
76-
<Input id="brand_name" v-model="form.brand_name" placeholder="Enter brand name" />
77-
<InputError :message="form.errors.brand_name" />
77+
<Input id="brand_name" name="brand_name" placeholder="Enter brand name" />
78+
<InputError :message="errors.brand_name" />
7879
</div>
7980

8081
<!-- Category -->
8182
<div class="space-y-2">
8283
<Label for="category">Category</Label>
83-
<Select v-model="form.category" :options="categories" placeholder="Select a category"
84-
required />
85-
<InputError :message="form.errors.category" />
84+
<Select name="category" :options="categories" placeholder="Select a category" required />
85+
<InputError :message="errors.category" />
8686
</div>
8787

8888
<!-- Supplier ID (Placeholder) -->
8989
<div class="space-y-2">
9090
<Label for="supplier_id">Supplier ID</Label>
91-
<Input id="supplier_id" v-model="form.supplier_id" placeholder="Enter supplier ID"
92-
type="number" />
93-
<InputError :message="form.errors.supplier_id" />
91+
<Input id="supplier_id" name="supplier_id" placeholder="Enter supplier ID" type="number" />
92+
<InputError :message="errors.supplier_id" />
9493
</div>
9594

9695
<!-- Unit Price -->
9796
<div class="space-y-2">
9897
<Label for="unit_price">Unit Price</Label>
99-
<Input id="unit_price" v-model="form.unit_price" type="number" step="0.01" placeholder="0.00"
98+
<Input id="unit_price" name="unit_price" type="number" step="0.01" placeholder="0.00"
10099
required />
101-
<InputError :message="form.errors.unit_price" />
100+
<InputError :message="errors.unit_price" />
102101
</div>
103102

104103
<!-- Quantity -->
105104
<div class="space-y-2">
106105
<Label for="quantity">Quantity</Label>
107-
<Input id="quantity" v-model="form.quantity" type="number" placeholder="0" required />
108-
<InputError :message="form.errors.quantity" />
106+
<Input id="quantity" name="quantity" type="number" placeholder="0" required />
107+
<InputError :message="errors.quantity" />
109108
</div>
110109

111110
<!-- Restock Threshold -->
112111
<div class="space-y-2">
113112
<Label for="restock_threshold">Restock Threshold</Label>
114-
<Input id="restock_threshold" v-model="form.restock_threshold" type="number" placeholder="10" />
115-
<InputError :message="form.errors.restock_threshold" />
113+
<Input id="restock_threshold" name="restock_threshold" type="number" placeholder="10" />
114+
<InputError :message="errors.restock_threshold" />
116115
</div>
117116
</div>
118117

119118
<!-- Description -->
120119
<div class="space-y-2">
121120
<Label for="description">Description</Label>
122-
<textarea id="description" v-model="form.description"
123-
class="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
124-
placeholder="Enter item description"></textarea>
125-
<InputError :message="form.errors.description" />
121+
<Textarea id="description" name="description" placeholder="Enter item description"></Textarea>
122+
<InputError :message="errors.description" />
126123
</div>
127124

128125
<!-- Images -->
129126
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
130127
<div class="space-y-2">
131128
<Label for="item_image_1">Image 1</Label>
132-
<Input id="item_image_1" type="file" @input="form.item_image_1 = $event.target.files[0]"
133-
accept="image/*" />
134-
<InputError :message="form.errors.item_image_1" />
129+
<Input id="item_image_1" name="item_image_1" type="file" accept="image/*" />
130+
<InputError :message="errors.item_image_1" />
135131
</div>
136132
<div class="space-y-2">
137133
<Label for="item_image_2">Image 2</Label>
138-
<Input id="item_image_2" type="file" @input="form.item_image_2 = $event.target.files[0]"
139-
accept="image/*" />
140-
<InputError :message="form.errors.item_image_2" />
134+
<Input id="item_image_2" name="item_image_2" type="file" accept="image/*" />
135+
<InputError :message="errors.item_image_2" />
141136
</div>
142137
<div class="space-y-2">
143138
<Label for="item_image_3">Image 3</Label>
144-
<Input id="item_image_3" type="file" @input="form.item_image_3 = $event.target.files[0]"
145-
accept="image/*" />
146-
<InputError :message="form.errors.item_image_3" />
139+
<Input id="item_image_3" name="item_image_3" type="file" accept="image/*" />
140+
<InputError :message="errors.item_image_3" />
147141
</div>
148142
</div>
149143

150144
<div class="flex justify-end">
151-
<Button type="submit" :disabled="form.processing">
152-
{{ form.processing ? 'Saving...' : 'Save Item' }}
145+
<Button type="submit" :disabled="processing">
146+
<Spinner v-if="processing" />
147+
Save Item
153148
</Button>
154149
</div>
155150
</form>
156151
</div>
157152
</AppLayout>
158-
159153
</template>

0 commit comments

Comments
 (0)