Improved user experience with part withdraw modal

Related to issue #201
This commit is contained in:
Jan Böhmer 2023-01-07 20:49:36 +01:00
parent ba4085d882
commit 436aff7533
6 changed files with 128 additions and 17 deletions

View file

@ -63,18 +63,23 @@
<td>
<div class="btn-group" role="group">
<button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#withdraw-modal"
data-action="add" data-lot-id="{{ lot.id }}" data-lot-amount="{{ lot.amount }}"
{% if lot.storageLocation and lot.storageLocation.full %}disabled{% endif %}
>
<i class="fa-solid fa-plus fa-fw"></i>
</button>
<button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#withdraw-modal"
data-action="remove" data-lot-id="{{ lot.id }}" data-lot-amount="{{ lot.amount }}"
data-action="withdraw" data-lot-id="{{ lot.id }}" data-lot-amount="{{ lot.amount }}"
title="{% trans %}part.info.withdraw_modal.title.withdraw{% endtrans %}"
{% if not withdraw_add_helper.canWithdraw(lot) %}disabled{% endif %}
>
<i class="fa-solid fa-minus fa-fw"></i>
</button>
<button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#withdraw-modal"
data-action="add" data-lot-id="{{ lot.id }}" data-lot-amount="{{ lot.amount }}"
title="{% trans %}part.info.withdraw_modal.title.add{% endtrans %}"
{% if not withdraw_add_helper.canAdd(lot) %}disabled{% endif %}
>
<i class="fa-solid fa-plus fa-fw"></i>
</button>
<button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#withdraw-modal"
data-action="move" data-lot-id="{{ lot.id }}" data-lot-amount="{{ lot.amount }}"
title="{% trans %}part.info.withdraw_modal.title.move{% endtrans %}"
{% if not withdraw_add_helper.canWithdraw(lot) or part.partLots.count == 1 %}disabled{% endif %}
>
<i class="fa-solid fa-right-left fa-fw"></i>
</button>

View file

@ -1,9 +1,13 @@
<div class="modal fade" id="withdraw-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" {{ stimulus_controller('pages/part_withdraw_modal') }}>
<div class="modal fade" id="withdraw-modal" tabindex="-1" aria-labelledby="withdraw-modal-title" aria-hidden="true" {{ stimulus_controller('pages/part_withdraw_modal') }}>
<form method="post" action="{{ path('part_add_withdraw', {"id": part.id}) }}">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
<h1 class="modal-title fs-5" id="withdraw-modal-title"
data-withdraw="{% trans %}part.info.withdraw_modal.title.withdraw{% endtrans %}"
data-add="{% trans %}part.info.withdraw_modal.title.add{% endtrans %}"
data-move="{% trans %}part.info.withdraw_modal.title.move{% endtrans %}"
>Filled by JS Controller</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
@ -15,20 +19,20 @@
<div class="row mb-2">
<label class="col-form-label col-sm-3">
Amount
{% trans %}part.info.withdraw_modal.amount{% endtrans %}
</label>
<div class="col-sm-9">
<input type="number" required class="form-control" min="0" step="{{ (part.partUnit and not part.partUnit.integer) ? 'any' : '1' }}" name="amount" value="">
</div>
</div>
<div class="row mb-2">
<label class="col-form-label col-sm-3">Move to</label>
<div class="row mb-2 d-none" id="withdraw-modal-move-to">
<label class="col-form-label col-sm-3">{% trans %}part.info.withdraw_modal.move_to{% endtrans %}</label>
<div class="col-sm-9">
{% for lots in part.partLots|filter(l => l.instockUnknown == false) %}
<div class="form-check">
<input class="form-check-input" type="radio" name="target_id" value="{{ lots.iD }}" id="modal_target_radio_{{ lots.iD }}" {% if lots.storageLocation and lots.storageLocation.full %}disabled{% endif %} required>
<input class="form-check-input" type="radio" name="target_id" value="{{ lots.iD }}" id="modal_target_radio_{{ lots.iD }}" {% if not withdraw_add_helper.canAdd(lots) %}disabled{% endif %} required {% if loop.first %}checked{% endif %}>
<label class="form-check-label" for="modal_target_radio_{{ lots.iD }}">
{{ (lots.storageLocation) ? lots.storageLocation.fullPath : ("Lot " ~ loop.index) }}{% if lots.name is not empty %} ({{ lots.name }}){% endif %}: <b>{{ lots.amount | format_amount(part.partUnit) }}</b>
</label>
@ -39,16 +43,17 @@
<div class="row mb-2">
<label class="col-form-label col-sm-3">
Comment
{% trans %}part.info.withdraw_modal.comment{% endtrans %}
</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="comment" value="">
<div id="emailHelp" class="form-text">{% trans %}part.info.withdraw_modal.comment.hint{% endtrans %}</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans %}modal.close{% endtrans %}</button>
<button type="submit" class="btn btn-primary">{% trans %}modal.submit{% endtrans %}</button>
</div>
</div>
</div>