Better transfer page

This commit is contained in:
Yohann D'ANELLO 2020-04-10 22:43:55 +02:00
parent 0608ebd9f2
commit e4a44b0b4a
4 changed files with 126 additions and 90 deletions

View File

@ -126,7 +126,7 @@ function displayNote(note, alias, user_note_field = null, profile_pic_field = nu
if (user_note_field !== null) { if (user_note_field !== null) {
$("#" + user_note_field).removeAttr('class'); $("#" + user_note_field).removeAttr('class');
$("#" + user_note_field).addClass(displayStyle(note)); $("#" + user_note_field).addClass(displayStyle(note));
$("#" + user_note_field).text(alias + (note.balance == null ? "" : (":\n" + pretty_money(note.balance)))); $("#" + user_note_field).text(alias + (note.balance == null ? "" : (" :\n" + pretty_money(note.balance))));
if (profile_pic_field != null) { if (profile_pic_field != null) {
$("#" + profile_pic_field).attr('src', img); $("#" + profile_pic_field).attr('src', img);
$("#" + profile_pic_field).click(function () { $("#" + profile_pic_field).click(function () {
@ -311,7 +311,7 @@ function autoCompleteNote(field_id, note_list_id, notes, notes_display, alias_pr
disp.name disp.name
+ "<span class=\"badge badge-dark badge-pill\">" + "<span class=\"badge badge-dark badge-pill\">"
+ disp.quantity + "</span>", + disp.quantity + "</span>",
displayStyle(disp.note.balance)); displayStyle(disp.note));
}); });
// Emitters are displayed // Emitters are displayed

View File

@ -26,14 +26,17 @@ function reset() {
} }
$(document).ready(function() { $(document).ready(function() {
autoCompleteNote("source_note", "source_note_list", sources, sources_notes_display, /**
"source_alias", "source_note", "user_note", "profile_pic"); * If we are in credit/debit mode, check that only one note is entered.
autoCompleteNote("dest_note", "dest_note_list", dests, dests_notes_display, * More over, get first name and last name to autocomplete fields.
"dest_alias", "dest_note", "user_note", "profile_pic", function() { */
function checkUniqueNote() {
if ($("#type_credit").is(":checked") || $("#type_debit").is(":checked")) { if ($("#type_credit").is(":checked") || $("#type_debit").is(":checked")) {
let last = dests_notes_display[dests_notes_display.length - 1]; let arr = $("#type_credit").is(":checked") ? dests_notes_display : sources_notes_display;
dests_notes_display.length = 0;
dests_notes_display.push(last); let last = arr[arr.length - 1];
arr.length = 0;
arr.push(last);
last.quantity = 1; last.quantity = 1;
@ -55,7 +58,12 @@ $(document).ready(function() {
} }
return true; return true;
}); }
autoCompleteNote("source_note", "source_note_list", sources, sources_notes_display,
"source_alias", "source_note", "user_note", "profile_pic", checkUniqueNote);
autoCompleteNote("dest_note", "dest_note_list", dests, dests_notes_display,
"dest_alias", "dest_note", "user_note", "profile_pic", checkUniqueNote);
// Ensure we begin in gift mode. Removing these lines may cause problems when reloading. // Ensure we begin in gift mode. Removing these lines may cause problems when reloading.
@ -182,10 +190,11 @@ $("#btn_transfer").click(function() {
}); });
} else if ($("#type_credit").is(':checked') || $("#type_debit").is(':checked')) { } else if ($("#type_credit").is(':checked') || $("#type_debit").is(':checked')) {
let special_note = $("#credit_type").val(); let special_note = $("#credit_type").val();
let user_note = dests_notes_display[0].note.id; let user_note;
let given_reason = $("#reason").val(); let given_reason = $("#reason").val();
let source, dest, reason; let source, dest, reason;
if ($("#type_credit").is(':checked')) { if ($("#type_credit").is(':checked')) {
user_note = dests_notes_display[0].note.id;
source = special_note; source = special_note;
dest = user_note; dest = user_note;
reason = "Crédit " + $("#credit_type option:selected").text().toLowerCase(); reason = "Crédit " + $("#credit_type option:selected").text().toLowerCase();
@ -193,6 +202,7 @@ $("#btn_transfer").click(function() {
reason += " (" + given_reason + ")"; reason += " (" + given_reason + ")";
} }
else { else {
user_note = sources_notes_display[0].note.id;
source = user_note; source = user_note;
dest = special_note; dest = special_note;
reason = "Retrait " + $("#credit_type option:selected").text().toLowerCase(); reason = "Retrait " + $("#credit_type option:selected").text().toLowerCase();

View File

@ -36,7 +36,7 @@
{# User search with autocompletion #} {# User search with autocompletion #}
<div class="card-body p-0"> <div class="card-body p-0">
<input class="form-control mx-auto d-block" <input class="form-control mx-auto d-block"
placeholder="{% trans "Name or alias" %}" type="text" id="note" autofocus /> placeholder="{% trans "Name or alias..." %}" type="text" id="note" autofocus />
</div> </div>
</div> </div>
</div> </div>

View File

@ -38,8 +38,7 @@ SPDX-License-Identifier: GPL-2.0-or-later
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-3" id="note_infos_div">
<div class="col-xl-4" id="note_infos_div">
<div class="card border-success shadow mb-4"> <div class="card border-success shadow mb-4">
<img src="/media/pic/default.png" <img src="/media/pic/default.png"
id="profile_pic" alt="" class="img-fluid rounded mx-auto d-block"> id="profile_pic" alt="" class="img-fluid rounded mx-auto d-block">
@ -48,7 +47,8 @@ SPDX-License-Identifier: GPL-2.0-or-later
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4" id="emitters_div" style="display: none;">
<div class="col-md-3" id="emitters_div">
<div class="card border-success shadow mb-4"> <div class="card border-success shadow mb-4">
<div class="card-header"> <div class="card-header">
<p class="card-text font-weight-bold"> <p class="card-text font-weight-bold">
@ -58,22 +58,53 @@ SPDX-License-Identifier: GPL-2.0-or-later
<ul class="list-group list-group-flush" id="source_note_list"> <ul class="list-group list-group-flush" id="source_note_list">
</ul> </ul>
<div class="card-body"> <div class="card-body">
<input class="form-control mx-auto d-block" type="text" id="source_note" /> <input class="form-control mx-auto d-block" type="text" id="source_note" placeholder="{% trans "Name or alias..." %}" />
</div> </div>
</div> </div>
</div> </div>
{% if "note.notespecial"|not_empty_model_list %} <div class="col-md-3" id="dests_div">
<div class="col-md-4" id="external_div" style="display: none;"> <div class="card border-info shadow mb-4">
<div class="card border-success shadow mb-4"> <div class="card-header">
<p class="card-text font-weight-bold" id="dest_title">
{% trans "Select receivers" %}
</p>
</div>
<ul class="list-group list-group-flush" id="dest_note_list">
</ul>
<div class="card-body">
<input class="form-control mx-auto d-block" type="text" id="dest_note" placeholder="{% trans "Name or alias..." %}" />
<ul class="list-group list-group-flush" id="dest_alias_matched">
</ul>
</div>
</div>
</div>
<div class="col-md-3" id="external_div">
<div class="card border-warning shadow mb-4">
<div class="card-header"> <div class="card-header">
<p class="card-text font-weight-bold"> <p class="card-text font-weight-bold">
{% trans "External payment" %} {% trans "Action" %}
</p> </p>
</div> </div>
<ul class="list-group list-group-flush" id="source_note_list"> <ul class="list-group list-group-flush" id="source_note_list">
</ul> </ul>
<div class="card-body"> <div class="card-body">
<div class="form-row">
<div class="col-md-12">
<label for="amount">{% trans "Amount" %} :</label>
{% include "note/amount_input.html" with widget=amount_widget %}
</div>
</div>
<div class="form-row">
<div class="col-md-12">
<label for="reason">{% trans "Reason" %} :</label>
<input class="form-control mx-auto d-block" type="text" id="reason" required />
</div>
</div>
<div class="d-none" id="special_transaction_div">
<div class="form-row"> <div class="form-row">
<div class="col-md-12"> <div class="col-md-12">
<label for="credit_type">{% trans "Transfer type" %} :</label> <label for="credit_type">{% trans "Transfer type" %} :</label>
@ -103,44 +134,16 @@ SPDX-License-Identifier: GPL-2.0-or-later
</div> </div>
</div> </div>
</div> </div>
</div> <hr>
</div>
{% endif %}
<div class="col-md-8" id="dests_div">
<div class="card border-info shadow mb-4">
<div class="card-header">
<p class="card-text font-weight-bold" id="dest_title">
{% trans "Select receivers" %}
</p>
</div>
<ul class="list-group list-group-flush" id="dest_note_list">
</ul>
<div class="card-body">
<input class="form-control mx-auto d-block" type="text" id="dest_note" />
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="amount">{% trans "Amount" %} :</label>
{% include "note/amount_input.html" with widget=amount_widget %}
</div>
<div class="form-group col-md-6">
<label for="reason">{% trans "Reason" %} :</label>
<input class="form-control mx-auto d-block" type="text" id="reason" required />
</div>
</div>
<div class="form-row"> <div class="form-row">
<div class="col-md-12"> <div class="col-md-12">
<button id="btn_transfer" class="form-control btn btn-primary">{% trans 'Transfer' %}</button> <button id="btn_transfer" class="form-control btn btn-primary">{% trans 'Transfer' %}</button>
</div> </div>
</div> </div>
</div>
</div>
</div>
</div>
<div class="card shadow mb-4" id="history"> <div class="card shadow mb-4" id="history">
<div class="card-header"> <div class="card-header">
@ -158,32 +161,55 @@ SPDX-License-Identifier: GPL-2.0-or-later
SPECIAL_TRANSFER_POLYMORPHIC_CTYPE = {{ special_polymorphic_ctype }}; SPECIAL_TRANSFER_POLYMORPHIC_CTYPE = {{ special_polymorphic_ctype }};
user_id = {{ user.note.pk }}; user_id = {{ user.note.pk }};
source = $("#source_note");
dest = $("#dest_note");
$("#type_gift").click(function() { $("#type_gift").click(function() {
$("#emitters_div").hide(); $("#special_transaction_div").addClass('d-none');
$("#external_div").hide(); source.attr('disabled', true);
$("#dests_div").attr('class', 'col-md-8'); source.val("{{ user.username }}");
$("#dest_title").text("{% trans "Select receivers" %}"); source.tooltip('hide');
$("#source_note_list").addClass('d-none');
dest.attr('disabled', false);
$("#dest_note_list").removeClass('d-none');
}); });
$("#type_transfer").click(function() { $("#type_transfer").click(function() {
$("#external_div").hide(); $("#special_transaction_div").addClass('d-none');
$("#emitters_div").show(); source.attr('disabled', false);
$("#dests_div").attr('class', 'col-md-4'); $("#source_note_list").removeClass('d-none');
$("#dest_title").text("{% trans "Select receivers" %}"); dest.attr('disabled', false);
$("#dest_note_list").removeClass('d-none');
}); });
$("#type_credit").click(function() { $("#type_credit").click(function() {
$("#emitters_div").hide(); $("#special_transaction_div").removeClass('d-none');
$("#external_div").show(); $("#source_note_list").addClass('d-none');
$("#dests_div").attr('class', 'col-md-4'); $("#dest_note_list").removeClass('d-none');
$("#dest_title").text("{% trans "Credit note" %}"); source.attr('disabled', true);
source.val($("#credit_type option:selected").text());
source.tooltip('hide');
dest.attr('disabled', false);
dest.val('');
}); });
$("#type_debit").click(function() { $("#type_debit").click(function() {
$("#emitters_div").hide(); $("#special_transaction_div").removeClass('d-none');
$("#external_div").show(); $("#source_note_list").removeClass('d-none');
$("#dests_div").attr('class', 'col-md-4'); $("#dest_note_list").addClass('d-none');
$("#dest_title").text("{% trans "Debit note" %}"); source.attr('disabled', false);
source.val('');
dest.attr('disabled', true);
dest.val($("#credit_type option:selected").text());
dest.tooltip('hide');
});
$("#credit_type").change(function() {
let type = $("#credit_type option:selected").text();
if ($("#type_credit").is(":checked"))
source.val(type);
else
dest.val(type);
}); });
</script> </script>
<script src="/static/js/transfer.js"></script> <script src="/static/js/transfer.js"></script>