You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
83 lines
4.7 KiB
83 lines
4.7 KiB
<form hx-post="/item/{{item_id}}/adjustment/negative"
|
|
hx-target="this" hx-swap="outerHTML"
|
|
x-ref="formNegativeAdjustment"
|
|
x-data="{ reason: 'Sale', reason_dropdown_show: false }">
|
|
<div class="mb-5">
|
|
<label for="amount" class="block mb-2 text-sm font-medium">Amount</label>
|
|
<input type="number"
|
|
id="amount"
|
|
name="amount"
|
|
step="0.01"
|
|
class="border border-neutral-900 text-neutral-900 dark:text-slate-100 text-sm rounded-lg focus:ring-paynes-gray focus:border-paynes-gray block max-w-56 p-2.5"
|
|
placeholder="Amount"
|
|
aria-label="amount"
|
|
required
|
|
{% if !amount_error.is_empty() -%}
|
|
aria-invalid="true"
|
|
aria-describedby="invalid-amount"
|
|
{% endif -%}
|
|
/>
|
|
{% if !amount_error.is_empty() -%}
|
|
<small id="invalid-amount" class="mt-2 text-sm text-cerise">
|
|
{{ amount_error }}
|
|
</small>
|
|
{% endif -%}
|
|
</div>
|
|
<div class="mb-5 flex justify-start">
|
|
<button
|
|
class="text-slate-100 bg-english-violet hover:bg-dark-cyan focus:ring-4 focus:ring-dark-cyan font-medium rounded-l-lg text-sm px-5 py-2.5 focus:outline-none"
|
|
x-text="reason">
|
|
Sale
|
|
</button>
|
|
<div x-data="{ isOpen: false, openedWithKeyboard: false }"
|
|
class="relative w-fit"
|
|
x-on:keydown.esc.window="isOpen = false; openedWithKeyboard = false">
|
|
<button type="button" x-on:click="isOpen = ! isOpen"
|
|
class="text-slate-100 bg-english-violet hover:bg-dark-cyan focus:ring-4 focus:ring-dark-cyan font-medium rounded-r-lg text-sm px-3.5 py-3.5 focus:outline-none inline-flex items-center whitespace-nowrap rounded-radius border-l-2 border-slate-100 dark:border-neutral-900 tracking-wide transition"
|
|
aria-haspopup="true" x-on:keydown.space.prevent="openedWithKeyboard = true"
|
|
x-on:keydown.enter.prevent="openedWithKeyboard = true"
|
|
x-on:keydown.down.prevent="openedWithKeyboard = true"
|
|
x-bind:class="isOpen || openedWithKeyboard ? 'text-on-surface-strong dark:text-on-surface-dark-strong' : 'text-on-surface dark:text-on-surface-dark'"
|
|
x-bind:aria-expanded="isOpen || openedWithKeyboard">
|
|
<span class="sr-only">Reason Options</span>
|
|
<svg aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
|
|
stroke-width="2" stroke="currentColor" class="size-4 rotate-0">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
|
|
</svg>
|
|
</button>
|
|
<!-- Dropdown Menu -->
|
|
<div x-cloak
|
|
x-show="isOpen || openedWithKeyboard"
|
|
x-transition
|
|
x-trap="openedWithKeyboard"
|
|
x-on:click.outside="isOpen = false, openedWithKeyboard = false"
|
|
x-on:keydown.down.prevent="$focus.wrap().next()"
|
|
x-on:keydown.up.prevent="$focus.wrap().previous()"
|
|
class="bg-slate-100 dark:bg-neutral-900 absolute top-11 left-0 flex w-fit min-w-48 flex-col overflow-hidden rounded-radius border border-outline border-neutral-900 dark:border-slate-100"
|
|
role="menu">
|
|
<a class="px-4 py-2 text-sm hover:bg-dark-cyan hover:font-semibold focus-visible:bg-dark-cyan focus-visible:font-semibold focus-visible:outline-hidden"
|
|
role="menuitem"
|
|
@click="reason = 'Sale'; isOpen = false">
|
|
Sale
|
|
</a>
|
|
<a class="px-4 py-2 text-sm hover:bg-dark-cyan hover:font-semibold focus-visible:bg-dark-cyan focus-visible:font-semibold focus-visible:outline-hidden"
|
|
role="menuitem"
|
|
@click="reason = 'Destruction'; isOpen = false">
|
|
Destruction
|
|
</a>
|
|
<a class="px-4 py-2 text-sm hover:bg-dark-cyan hover:font-semibold focus-visible:bg-dark-cyan focus-visible:font-semibold focus-visible:outline-hidden"
|
|
role="menuitem"
|
|
@click="reason = 'Expiration'; isOpen = false">
|
|
Expiration
|
|
</a>
|
|
<a class="px-4 py-2 text-sm hover:bg-dark-cyan hover:font-semibold focus-visible:bg-dark-cyan focus-visible:font-semibold focus-visible:outline-hidden"
|
|
role="menuitem"
|
|
@click="reason = 'Theft'; isOpen = false">
|
|
Theft
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<input id="reason" name="reason" type="hidden" x-model="reason"/>
|
|
</form>
|