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.9 KiB
120 lines
4.9 KiB
<form
|
|
id="item-create"
|
|
hx-post="/item/create"
|
|
hx-target="this"
|
|
hx-swap="outerHTML"
|
|
x-on:htmx:response-error="$dispatch('notice', {type: 'error', text: 'Unknown error'})"
|
|
x-on:form-submit-success="$dispatch('notice', {type: 'info', text: 'New item created'})"
|
|
>
|
|
<div class="mb-5 grid grid-cols-6 gap-4 p-2">
|
|
<div class="col-span-6">
|
|
<label for="name" class="mb-2 block text-sm font-medium">Name</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
class="block w-11/12 p-2 rounded-lg border border-neutral-900 text-sm text-neutral-900 focus:border-paynes-gray focus:ring-paynes-gray dark:text-slate-100"
|
|
aria-label="name"
|
|
value="{{ name.value }}"
|
|
required
|
|
{% if name.is_error() -%}
|
|
aria-invalid="true"
|
|
aria-describedby="invalid-name"
|
|
{% endif -%}
|
|
/>
|
|
{% if name.is_error() -%}
|
|
<small id="invalid-name" class="block mt-2 text-sm text-cerise">
|
|
{{ name.error_string() }}
|
|
</small>
|
|
{% endif -%}
|
|
</div>
|
|
|
|
<div class="col-span-2">
|
|
<label for="reorder_point" class="mb-2 block text-sm font-medium">Reorder Point</label>
|
|
<input
|
|
type="number"
|
|
id="reorder_point"
|
|
name="reorder_point"
|
|
step="0.01"
|
|
class="block w-3/4 p-2 rounded-lg border border-neutral-900 text-sm text-neutral-900 focus:border-paynes-gray focus:ring-paynes-gray dark:text-slate-100"
|
|
aria-label="reorder point"
|
|
value="{{ reorder_point.value }}"
|
|
{% if reorder_point.is_error() -%}
|
|
aria-invalid="true"
|
|
aria-describedby="invalid-reorder-point"
|
|
{% endif -%}
|
|
/>
|
|
{% if reorder_point.is_error() -%}
|
|
<small id="invalid-reorder-point" class="block mt-2 text-sm text-cerise">
|
|
{{ reorder_point.error_string() }}
|
|
</small>
|
|
{% endif -%}
|
|
</div>
|
|
|
|
<div class="col-span-2">
|
|
<label for="display_unit" class="mb-2 block text-sm font-medium">Unit</label>
|
|
<select
|
|
id="display_unit"
|
|
name="display_unit"
|
|
class="block rounded-lg border border-neutral-900 p-2 text-sm text-neutral-900 focus:border-paynes-gray focus:ring-paynes-gray dark:text-slate-100"
|
|
aria-label="name"
|
|
required
|
|
{% if display_unit_value.is_error() -%}
|
|
aria-invalid="true"
|
|
aria-describedby="invalid-display-unit"
|
|
{% endif -%}
|
|
>
|
|
{% for unit in display_units -%}
|
|
<option value="{{ unit.abbreviation }}" {% if unit.abbreviation == display_unit_value.value %} selected {% endif %}>{{ unit.unit }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% if display_unit_value.is_error() -%}
|
|
<small id="invalid-display-unit" class="block mt-2 text-sm text-cerise">
|
|
{{ display_unit_value.error_string() }}
|
|
</small>
|
|
{% endif -%}
|
|
</div>
|
|
|
|
<div class="col-span-2">
|
|
<label for="allow_fractional_units" class="block mb-2 text-sm font-medium">Fractional</label>
|
|
<input
|
|
type="checkbox"
|
|
id="allow_fractional_units"
|
|
name="allow_fractional_units"
|
|
class="block w-4 h-4 text-dark-cyan border-slate-100 rounded-sm focus:ring-space-cadet focus:ring-2"
|
|
{% if allow_fractional_units.value -%} checked {% endif -%}
|
|
/>
|
|
</div>
|
|
|
|
|
|
<div class="col-span-3">
|
|
<label for="pims_id" class="mb-2 block text-sm font-medium">PIMS Id</label>
|
|
<input
|
|
type="text"
|
|
id="pims_id"
|
|
name="pims_id"
|
|
class="block p-2 rounded-lg border border-neutral-900 text-sm text-neutral-900 focus:border-paynes-gray focus:ring-paynes-gray dark:text-slate-100"
|
|
value="{{ pims_id.value }}"
|
|
aria-label="pims id"
|
|
{% if pims_id.is_error() -%}
|
|
aria-invalid="true"
|
|
aria-describedby="invalid-pims-id"
|
|
{% endif -%}
|
|
/>
|
|
{% if pims_id.is_error() -%}
|
|
<small id="invalid-pims-id" class="block mt-2 text-sm text-cerise">
|
|
{{ pims_id.error_string() }}
|
|
</small>
|
|
{% endif -%}
|
|
</div>
|
|
|
|
<div class="col-span-4">
|
|
<button
|
|
class="mb-2 me-2 rounded-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"
|
|
>
|
|
Submit
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|