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.
120 lines
4.4 KiB
120 lines
4.4 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="mb-2 block text-sm font-medium">Amount</label>
|
|
<input
|
|
type="number"
|
|
id="amount"
|
|
name="amount"
|
|
step="0.01"
|
|
class="block max-w-56 rounded-lg border border-neutral-900 p-2.5 text-sm text-neutral-900 focus:border-paynes-gray focus:ring-paynes-gray dark:text-slate-100"
|
|
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="rounded-l-lg bg-english-violet px-5 py-2.5 text-sm font-medium text-slate-100 hover:bg-dark-cyan focus:outline-none focus:ring-4 focus:ring-dark-cyan"
|
|
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="rounded-radius inline-flex items-center whitespace-nowrap rounded-r-lg border-l-2 border-slate-100 bg-english-violet px-3.5 py-3.5 text-sm font-medium tracking-wide text-slate-100 transition hover:bg-dark-cyan focus:outline-none focus:ring-4 focus:ring-dark-cyan dark:border-neutral-900"
|
|
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="rounded-radius border-outline absolute left-0 top-11 flex w-fit min-w-48 flex-col overflow-hidden border border-neutral-900 bg-slate-100 dark:border-slate-100 dark:bg-neutral-900"
|
|
role="menu"
|
|
>
|
|
<a
|
|
class="focus-visible:outline-hidden px-4 py-2 text-sm hover:bg-dark-cyan hover:font-semibold focus-visible:bg-dark-cyan focus-visible:font-semibold"
|
|
role="menuitem"
|
|
@click="reason = 'Sale'; isOpen = false"
|
|
>
|
|
Sale
|
|
</a>
|
|
<a
|
|
class="focus-visible:outline-hidden px-4 py-2 text-sm hover:bg-dark-cyan hover:font-semibold focus-visible:bg-dark-cyan focus-visible:font-semibold"
|
|
role="menuitem"
|
|
@click="reason = 'Destruction'; isOpen = false"
|
|
>
|
|
Destruction
|
|
</a>
|
|
<a
|
|
class="focus-visible:outline-hidden px-4 py-2 text-sm hover:bg-dark-cyan hover:font-semibold focus-visible:bg-dark-cyan focus-visible:font-semibold"
|
|
role="menuitem"
|
|
@click="reason = 'Expiration'; isOpen = false"
|
|
>
|
|
Expiration
|
|
</a>
|
|
<a
|
|
class="focus-visible:outline-hidden px-4 py-2 text-sm hover:bg-dark-cyan hover:font-semibold focus-visible:bg-dark-cyan focus-visible:font-semibold"
|
|
role="menuitem"
|
|
@click="reason = 'Theft'; isOpen = false"
|
|
>
|
|
Theft
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<input id="reason" name="reason" type="hidden" x-model="reason" />
|
|
</form>
|