Update quantity field to show sum of all inventory types

- Remove "količina" from Refill, Vakuum, and Otvoreno labels
- Move Količina field to end of form as "Ukupna količina" (Total quantity)
- Make Količina field read-only and calculate sum of all inventory types
- Update form submission to calculate total quantity automatically
- Update tests to reflect new label changes

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: DaX <noreply@anthropic.com>
This commit is contained in:
DaX
2025-06-27 01:42:11 +02:00
parent fa59df4c3d
commit 06025623ff
2 changed files with 37 additions and 21 deletions

View File

@@ -29,9 +29,10 @@ describe('UI Features Tests', () => {
expect(adminContent).toMatch(/type="number"[\s\S]*?name="refill"/); expect(adminContent).toMatch(/type="number"[\s\S]*?name="refill"/);
expect(adminContent).toMatch(/type="number"[\s\S]*?name="vakum"/); expect(adminContent).toMatch(/type="number"[\s\S]*?name="vakum"/);
expect(adminContent).toMatch(/type="number"[\s\S]*?name="otvoreno"/); expect(adminContent).toMatch(/type="number"[\s\S]*?name="otvoreno"/);
expect(adminContent).toContain('Refill količina'); expect(adminContent).toContain('Refill');
expect(adminContent).toContain('Vakuum količina'); expect(adminContent).toContain('Vakuum');
expect(adminContent).toContain('Otvoreno količina'); expect(adminContent).toContain('Otvoreno');
expect(adminContent).toContain('Ukupna količina');
}); });
it('should have number input for quantity', () => { it('should have number input for quantity', () => {

View File

@@ -421,9 +421,19 @@ function FilamentForm({
const handleSubmit = (e: React.FormEvent) => { const handleSubmit = (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
// Calculate total quantity
const refillCount = parseInt(formData.refill) || (formData.refill?.toLowerCase() === 'da' ? 1 : 0);
const vakuumMatch = formData.vakum?.match(/^(\d+)\s*vakuum/);
const vakuumCount = vakuumMatch ? parseInt(vakuumMatch[1]) : (formData.vakum?.toLowerCase().includes('vakuum') ? 1 : 0);
const otvorenMatch = formData.otvoreno?.match(/^(\d+)\s*otvorena/);
const otvorenCount = otvorenMatch ? parseInt(otvorenMatch[1]) : (formData.otvoreno?.toLowerCase().includes('otvorena') ? 1 : 0);
const totalQuantity = refillCount + vakuumCount + otvorenCount;
onSave({ onSave({
...filament, ...filament,
...formData ...formData,
kolicina: totalQuantity.toString()
}); });
}; };
@@ -564,20 +574,6 @@ function FilamentForm({
</div> </div>
</div> </div>
<div>
<label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Količina</label>
<input
type="number"
name="kolicina"
value={formData.kolicina}
onChange={handleChange}
min="0"
step="1"
placeholder="0"
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
<div> <div>
<label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Cena</label> <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Cena</label>
<input <input
@@ -592,7 +588,7 @@ function FilamentForm({
{/* Quantity inputs for refill, vakuum, and otvoreno */} {/* Quantity inputs for refill, vakuum, and otvoreno */}
<div> <div>
<label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Refill količina</label> <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Refill</label>
<input <input
type="number" type="number"
name="refill" name="refill"
@@ -618,7 +614,7 @@ function FilamentForm({
</div> </div>
<div> <div>
<label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Vakuum količina</label> <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Vakuum</label>
<input <input
type="number" type="number"
name="vakum" name="vakum"
@@ -645,7 +641,7 @@ function FilamentForm({
</div> </div>
<div> <div>
<label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Otvoreno količina</label> <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Otvoreno</label>
<input <input
type="number" type="number"
name="otvoreno" name="otvoreno"
@@ -671,6 +667,25 @@ function FilamentForm({
/> />
</div> </div>
{/* Total quantity display */}
<div>
<label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Ukupna količina</label>
<input
type="number"
name="kolicina"
value={(() => {
const refillCount = parseInt(formData.refill) || (formData.refill?.toLowerCase() === 'da' ? 1 : 0);
const vakuumMatch = formData.vakum?.match(/^(\d+)\s*vakuum/);
const vakuumCount = vakuumMatch ? parseInt(vakuumMatch[1]) : (formData.vakum?.toLowerCase().includes('vakuum') ? 1 : 0);
const otvorenMatch = formData.otvoreno?.match(/^(\d+)\s*otvorena/);
const otvorenCount = otvorenMatch ? parseInt(otvorenMatch[1]) : (formData.otvoreno?.toLowerCase().includes('otvorena') ? 1 : 0);
return refillCount + vakuumCount + otvorenCount;
})()}
readOnly
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-100 dark:bg-gray-600 text-gray-900 dark:text-gray-100 cursor-not-allowed"
/>
</div>
<div className="md:col-span-2 flex justify-end gap-4 mt-4"> <div className="md:col-span-2 flex justify-end gap-4 mt-4">
<button <button
type="button" type="button"