Commit afdeff5b by Damien Moulard

create interface to update an envelop + refactoring

parent ad71aad1
Pipeline #1753 passed with stage
in 1 minute 38 seconds
...@@ -16,6 +16,70 @@ ...@@ -16,6 +16,70 @@
margin-top: 30px; margin-top: 30px;
} }
.update_envelop_button, .delete_envelop_button {
margin: 0 0 10px 15px;
}
.envelop_content_list {
margin: 20px 0 15px 0;
}
/* Update envelop modal */
.envelop_lines {
margin: 20px 0;
display: flex;
flex-direction: column;
align-items: center;
}
.update_envelop_line {
margin: 5px 0;
width: 60%;
display: flex;
position: relative;
}
.deleted_line_through {
border-bottom: 1px solid #d9534f;
position: absolute;
content: "";
width: 95%;
height: 50%;
display: none;
}
.update_envelop_line div {
flex: 50% 1 0;
}
.line_partner_name_container {
display: flex;
justify-content: flex-start;
align-items: center;
}
.line_partner_name {
text-align: left;
padding: 0 5px;
}
.line_partner_input_container {
display: flex;
align-items: center;
}
.delete_envelop_line_icon {
margin-left: 10px;
color: #d9534f;
cursor: pointer;
}
.envelop_comments {
width: 60%;
margin-bottom: 20px;
}
/* Accordion style */ /* Accordion style */
/* Style the buttons that are used to open and close the accordion panel */ /* Style the buttons that are used to open and close the accordion panel */
.accordion { .accordion {
...@@ -23,7 +87,6 @@ ...@@ -23,7 +87,6 @@
color: #212529; color: #212529;
cursor: pointer; cursor: pointer;
padding: 18px; padding: 18px;
/* width: 80%; */
text-align: left; text-align: left;
border: none; border: none;
outline: none; outline: none;
...@@ -32,7 +95,6 @@ ...@@ -32,7 +95,6 @@
.archive_button { .archive_button {
padding: 18px; padding: 18px;
/* width: 20%; */
} }
hr { hr {
......
var cash_envelops = []; var cash_envelops = [];
var ch_envelops = []; var ch_envelops = [];
var envelop_to_update = null;
function reset() { function reset() {
$('#cash_envelops').empty(); $('#cash_envelops').empty();
...@@ -12,7 +13,8 @@ function toggle_error_alert() { ...@@ -12,7 +13,8 @@ function toggle_error_alert() {
$('#envelop_cashing_error').toggle(250); $('#envelop_cashing_error').toggle(250);
} }
function toggle_success_alert() { function toggle_success_alert(message) {
$('#envelop_cashing_success').find(".success_alert_content").text(message);
$('#envelop_cashing_success').toggle(250); $('#envelop_cashing_success').toggle(250);
} }
...@@ -20,6 +22,41 @@ function toggle_deleted_alert() { ...@@ -20,6 +22,41 @@ function toggle_deleted_alert() {
$('#envelop_deletion_success').toggle(250); $('#envelop_deletion_success').toggle(250);
} }
/**
* Get an envelop from the cash or cheque lists dependings on the params
* @param {String} type
* @param {String} index
* @returns
*/
function get_envelop_from_type_index(type, index) {
if (type === "cash") {
return cash_envelops[index];
} else {
return ch_envelops[index];
}
}
/**
* Define a name for an envelop depending on its type, with or with its type
* @param {Object} envelop
* @param {String} name_type short | long
* @returns
*/
function get_envelop_name(envelop, name_type = 'short') {
let envelop_name = "";
if (envelop.type === "cash") {
let split_id = envelop._id.split('_');
let envelop_date = split_id[3].padStart(2, '0') + "/" + split_id[2].padStart(2, '0') + "/" + split_id[1];
envelop_name = `Enveloppe${(name_type === "short") ? "" : " de liquide"} du ${envelop_date}`;
} else if (envelop.type == "ch") {
envelop_name = `Enveloppe${(name_type === "short") ? "" : " de chèques"} #${envelop.display_id}`;
}
return envelop_name;
}
// Set an envelop content on the document // Set an envelop content on the document
function set_envelop_dom(envelop, envelop_name, envelop_content_id, envelop_index) { function set_envelop_dom(envelop, envelop_name, envelop_content_id, envelop_index) {
var envelops_section = $('#' + envelop.type + '_envelops'); var envelops_section = $('#' + envelop.type + '_envelops');
...@@ -37,14 +74,14 @@ function set_envelop_dom(envelop, envelop_name, envelop_content_id, envelop_inde ...@@ -37,14 +74,14 @@ function set_envelop_dom(envelop, envelop_name, envelop_content_id, envelop_inde
// Allow checking for all cash and first check envelops // Allow checking for all cash and first check envelops
if (envelop.type == 'cash' || envelop.type == 'ch' && envelop_index == 0) { if (envelop.type == 'cash' || envelop.type == 'ch' && envelop_index == 0) {
new_html += '<button class="accordion w80">' + envelop_name + ' - <i>' + total_amount + '€</i></button>' new_html += '<button class="accordion w80">' + envelop_name + ' - <i>' + total_amount + '€</i></button>'
+ '<button class="btn--success archive_button item-fluid" onClick="openModal(\'<h3>Êtes-vous sûr ?</h3>\', function() {archive_envelop(\'' + envelop.type + '\', ' + envelop_index + ');}, \'Encaisser\')">Encaisser</button>'; + '<button class="btn--success archive_button item-fluid" onClick="openModal(\'<h3>Êtes-vous sûr ?</h3>\', function() {archive_envelop(\'' + envelop.type + '\', ' + envelop_index + ');}, \'Encaisser\', false)">Encaisser</button>';
} else { } else {
new_html += '<button class="accordion w100">' + envelop_name + ' - <i>' + total_amount + '€</i></button>'; new_html += '<button class="accordion w100">' + envelop_name + ' - <i>' + total_amount + '€</i></button>';
} }
new_html += '</div>' new_html += '</div>'
+ '<div class="panel panel_' + envelop_content_id + '"><ol id="' + envelop_content_id + '"></ol></div>' + '<div class="panel panel_' + envelop_content_id + '"><ol class="envelop_content_list" id="' + envelop_content_id + '"></ol></div>'
+ '</div>'; + '</div>';
$(new_html).appendTo(envelops_section); $(new_html).appendTo(envelops_section);
...@@ -64,7 +101,38 @@ function set_envelop_dom(envelop, envelop_name, envelop_content_id, envelop_inde ...@@ -64,7 +101,38 @@ function set_envelop_dom(envelop, envelop_name, envelop_content_id, envelop_inde
} }
let envelop_panel = $(`.panel_${envelop_content_id}`); let envelop_panel = $(`.panel_${envelop_content_id}`);
envelop_panel.append('<button class="btn--danger delete_envelop_button item-fluid" onClick="openModal(\'<h3>Supprimer enveloppe ?</h3>\', function() {delete_envelop(\'' + envelop.type + '\', ' + envelop_index + ');}, \'Supprimer\')">Supprimer l\'enveloppe</button>'); envelop_panel.append(`<button class="btn--danger delete_envelop_button item-fluid" id="update_envelop_${envelop.type}_${envelop_index}">Supprimer l'enveloppe</button>`);
envelop_panel.append(`<button class="btn--primary update_envelop_button item-fluid" id="update_envelop_${envelop.type}_${envelop_index}">Modifier</button>`);
$(".update_envelop_button").off("click");
$(".update_envelop_button").on("click", function() {
let el_id = $(this).attr("id").split("_");
envelop_to_update = {
type: el_id[2],
index: el_id[3],
lines_to_delete: []
}
set_update_envelop_modal();
});
$(".delete_envelop_button").off("click");
$(".delete_envelop_button").on("click", function() {
let el_id = $(this).attr("id").split("_");
let type = el_id[2];
let index = el_id[3];
let envelop = get_envelop_from_type_index(type, index);
openModal(
"<h3>Supprimer l'enveloppe ?</h3>",
function() {
delete_envelop(envelop);
},
'Supprimer'
);
});
} }
// Set the envelops data according to their type // Set the envelops data according to their type
...@@ -79,9 +147,7 @@ function set_envelops(envelops) { ...@@ -79,9 +147,7 @@ function set_envelops(envelops) {
if (envelop.type == "cash") { if (envelop.type == "cash") {
cash_envelops.push(envelop); cash_envelops.push(envelop);
let split_id = envelop._id.split('_'); let envelop_name = get_envelop_name(envelop);
let envelop_date = split_id[3] + "/" + split_id[2] + "/" + split_id[1];
let envelop_name = 'Enveloppe du ' + envelop_date;
let envelop_content_id = 'content_cash_list_' + cash_index; let envelop_content_id = 'content_cash_list_' + cash_index;
set_envelop_dom(envelop, envelop_name, envelop_content_id, cash_index); set_envelop_dom(envelop, envelop_name, envelop_content_id, cash_index);
...@@ -90,7 +156,7 @@ function set_envelops(envelops) { ...@@ -90,7 +156,7 @@ function set_envelops(envelops) {
} else if (envelop.type == "ch") { } else if (envelop.type == "ch") {
ch_envelops.push(envelop); ch_envelops.push(envelop);
let envelop_name = 'Enveloppe #' + envelop.display_id; let envelop_name = get_envelop_name(envelop);
let envelop_content_id = 'content_ch_list_' + ch_index; let envelop_content_id = 'content_ch_list_' + ch_index;
set_envelop_dom(envelop, envelop_name, envelop_content_id, ch_index); set_envelop_dom(envelop, envelop_name, envelop_content_id, ch_index);
...@@ -125,18 +191,112 @@ function set_envelops(envelops) { ...@@ -125,18 +191,112 @@ function set_envelops(envelops) {
} }
} }
function delete_envelop(type, index) { /**
if (is_time_to('delete_envelop', 1000)) { * Generate content & set listeners for the modal to update an envelop
openModal(); */
function set_update_envelop_modal() {
let envelop = get_envelop_from_type_index(envelop_to_update.type, envelop_to_update.index);
let envelop_name = get_envelop_name(envelop, 'long');
let modal_update_envelop = $('#templates #modal_update_envelop');
modal_update_envelop.find(".envelop_name").text(envelop_name);
modal_update_envelop.find(".envelop_lines").empty();
let update_line_template = $('#templates #update_envelop_line_template');
let cpt = 1;
for (let partner_id in envelop.envelop_content) {
let line = envelop.envelop_content[partner_id];
update_line_template.find(".update_envelop_line").attr('id', `update_line_${partner_id}`);
update_line_template.find(".line_number").html(`${cpt}.&nbsp;`);
update_line_template.find(".line_partner_name").text(line.partner_name);
modal_update_envelop.find(".envelop_lines").append(update_line_template.html());
cpt += 1;
}
openModal(
modal_update_envelop.html(),
() => {
update_envelop();
},
'Mettre à jour',
true,
true,
() => {
envelop_to_update = null;
}
);
// Elements needs to be on the document so value & listeners can be set
for (let partner_id in envelop.envelop_content) {
let line = envelop.envelop_content[partner_id];
var envelop = null; $(`#update_line_${partner_id}`).find('.line_partner_amount').val(line.amount);
if (type == "cash") { }
envelop = cash_envelops[index];
} else { modal.find('.envelop_comments').val((envelop.comments !== undefined) ? envelop.comments : '');
envelop = ch_envelops[index];
$(".delete_envelop_line_icon").off("click");
$(".delete_envelop_line_icon").on("click", function() {
let line_id = $(this).closest(".update_envelop_line").attr("id").split("_");
let partner_id = line_id[line_id.length-1];
envelop_to_update.lines_to_delete.push(partner_id);
$(this).hide();
$(this).closest(".update_envelop_line").find(".deleted_line_through").show();
})
}
/**
* Update an envelop in couchdb
*/
function update_envelop() {
if (is_time_to('update_envelop', 1000)) {
let envelop = get_envelop_from_type_index(envelop_to_update.type, envelop_to_update.index);
// Update lines amounts
let amount_inputs = modal.find('.line_partner_amount');
amount_inputs.each(function (i,e) {
let line_id = $(e).closest(".update_envelop_line").attr("id").split("_");
let partner_id = line_id[line_id.length-1];
envelop.envelop_content[partner_id].amount = parseInt($(e).val());
});
// Delete lines
for (let partner_id of envelop_to_update.lines_to_delete) {
delete(envelop.envelop_content[partner_id])
} }
// Envelop comments
envelop.comments = modal.find('.envelop_comments').val();
dbc.put(envelop, function callback(err, result) {
envelop_to_update = null;
if (!err && result !== undefined) {
get_envelops();
toggle_success_alert("Enveloppe modifiée !");
} else {
alert("Erreur lors de la mise à jour de l'enveloppe. Si l'erreur persiste contactez un administrateur svp.");
console.log(err);
}
});
}
}
/**
* Delete an envelop from couchdb.
* @param {Object} envelop
*/
function delete_envelop(envelop) {
if (is_time_to('delete_envelop', 1000)) {
envelop._deleted = true; envelop._deleted = true;
dbc.put(envelop, function callback(err, result) { dbc.put(envelop, function callback(err, result) {
if (!err && result !== undefined) { if (!err && result !== undefined) {
toggle_deleted_alert(); toggle_deleted_alert();
...@@ -150,6 +310,11 @@ function delete_envelop(type, index) { ...@@ -150,6 +310,11 @@ function delete_envelop(type, index) {
} }
} }
/**
* Send the request to save an envelop payments in Odoo. The envelop will be deleted from couchdb.
* @param {String} type
* @param {String} index
*/
function archive_envelop(type, index) { function archive_envelop(type, index) {
if (is_time_to('archive_envelop', 1000)) { if (is_time_to('archive_envelop', 1000)) {
$('#envelop_cashing_error').hide(); $('#envelop_cashing_error').hide();
...@@ -157,11 +322,7 @@ function archive_envelop(type, index) { ...@@ -157,11 +322,7 @@ function archive_envelop(type, index) {
// Loading on // Loading on
openModal(); openModal();
if (type == "cash") { let envelop = get_envelop_from_type_index(type, index);
envelop = cash_envelops[index];
} else {
envelop = ch_envelops[index];
}
// Proceed to envelop cashing // Proceed to envelop cashing
$.ajax({ $.ajax({
...@@ -204,7 +365,7 @@ function archive_envelop(type, index) { ...@@ -204,7 +365,7 @@ function archive_envelop(type, index) {
} }
if (display_success_alert) { if (display_success_alert) {
toggle_success_alert(); toggle_success_alert("Enveloppe encaissée !");
} }
}, },
error: function() { error: function() {
...@@ -223,10 +384,10 @@ function get_envelops() { ...@@ -223,10 +384,10 @@ function get_envelops() {
}).then(function (result) { }).then(function (result) {
set_envelops(result.rows); set_envelops(result.rows);
}) })
.catch(function (err) { .catch(function (err) {
alert('Erreur lors de la récupération des enveloppes.'); alert('Erreur lors de la récupération des enveloppes.');
console.log(err); console.log(err);
}); });
} }
// Hande change in couc db // Hande change in couc db
......
...@@ -2492,6 +2492,21 @@ $(document).ready(function() { ...@@ -2492,6 +2492,21 @@ $(document).ready(function() {
alert('Erreur lors de la récupération des articles, rechargez la page plus tard'); alert('Erreur lors de la récupération des articles, rechargez la page plus tard');
} }
}); });
$(document).on('click', '.accordion', function(){
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active");
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
} else { } else {
$('#not_connected_content').show(); $('#not_connected_content').show();
} }
......
...@@ -460,22 +460,6 @@ for (i = 0; i < acc.length; i++) { ...@@ -460,22 +460,6 @@ for (i = 0; i < acc.length; i++) {
}); });
} }
$(document).on('click', '.accordion', function(){
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active");
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
console.log(panel)
});
function report_JS_error(e, m) { function report_JS_error(e, m) {
try { try {
$.post('/log_js_error', {module: m, error: JSON.stringify(e)}); $.post('/log_js_error', {module: m, error: JSON.stringify(e)});
......
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<div style="width: 10%" class="fr txtright"><i class="fas fa-times"></i></div> <div style="width: 10%" class="fr txtright"><i class="fas fa-times"></i></div>
</div> </div>
<div id="envelop_cashing_success" class="alert--success clearfix custom_alert" onClick="toggle_success_alert()"> <div id="envelop_cashing_success" class="alert--success clearfix custom_alert" onClick="toggle_success_alert()">
<div style="width: 90%" class="fl txtleft">Enveloppe encaissée !</div> <div style="width: 90%" class="fl txtleft success_alert_content">Enveloppe encaissée !</div>
<div style="width: 10%" class="fr txtright"><i class="fas fa-times"></i></div> <div style="width: 10%" class="fr txtright"><i class="fas fa-times"></i></div>
</div> </div>
<div id="envelop_deletion_success" class="alert--success clearfix custom_alert" onClick="toggle_deleted_alert()"> <div id="envelop_deletion_success" class="alert--success clearfix custom_alert" onClick="toggle_deleted_alert()">
...@@ -41,6 +41,33 @@ ...@@ -41,6 +41,33 @@
</section> </section>
</section> </section>
<div id="templates" style="display:none;">
<div id="modal_update_envelop">
<div class="modal_update_envelop_content">
<h3 class="envelop_name"></h3>
<div class="envelop_lines"></div>
<div class="envelop_comments_area">
<p>Commentaires</p>
<textarea class="envelop_comments"></textarea>
</div>
</div>
</div>
<div id="update_envelop_line_template">
<div class="update_envelop_line">
<div class="line_partner_name_container">
<span class="line_number"></span>
<span class="line_partner_name"></span>
</div>
<div class="line_partner_input_container">
<input type="text" class="line_partner_amount" placeholder="Montant">
<i class="fas fa-trash-alt fa-lg delete_envelop_line_icon"></i>
</div>
<div class="deleted_line_through"></div>
</div>
</div>
</div>
<script src="{% static "js/pouchdb.min.js" %}"></script> <script src="{% static "js/pouchdb.min.js" %}"></script>
<script type="text/javascript"> <script type="text/javascript">
{%if must_identify %} {%if must_identify %}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment