Skip to content

Commit

Permalink
Ref LUCILE-DECROZANT-TRIQUENAUX-EIRL#290: open membership row to show…
Browse files Browse the repository at this point in the history
… more data
  • Loading branch information
LucileDT committed Jan 31, 2022
1 parent 0ea25e0 commit ca00b73
Show file tree
Hide file tree
Showing 6 changed files with 211 additions and 82 deletions.
3 changes: 3 additions & 0 deletions .jshintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"esversion": 6
}
166 changes: 95 additions & 71 deletions public/javascript/People/partials/people_memberships_list.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,72 @@
$(document).ready(function() {
function formatChildRowData(data) {
let structure = $('#childrow-structure').clone();
structure
.attr('id', 'membership-data-' + data.id)
.removeClass('d-none');

if (data.members.length > 1) {
// show member card
structure.find('#members-container').removeClass('d-none');

// add all members data in the card
data.members.forEach(function (member) {
let memberContainer = structure.find('#member-information-container')
.clone()
.removeAttr('id')
;
memberContainer.find('.denomination').html(member.denomination);
memberContainer.find('.firstname').html(member.firstname);
memberContainer.find('.lastname').html(member.lastname);
structure.find('#members-list').append(memberContainer);
});
}

let paymentContainer = structure.find('#payment-container');
paymentContainer.find('.date-received').html(data.payment.date_received);
paymentContainer.find('.date-cashed').html(data.payment.date_cashed);
paymentContainer.find('.made-by').html(data.payment.payer.denomination + ' ' + data.payment.payer.firstname + ' ' + data.payment.payer.lastname);

let fiscalReceiptContainer = structure.find('#fiscal-receipt-container');
fiscalReceiptContainer.find('.fiscal-year').html(data.payment.fiscal_receipt.fiscal_year);
fiscalReceiptContainer.find('.order-code').html(data.payment.fiscal_receipt.order_code);

structure.find('#comment-container').html(data.comment === null ? '-' : data.comment);

return structure.prop('outerHTML');
}

let membershipsTable = $('#memberships-list');
membershipsTable.DataTable({
let membershipsDataTable = membershipsTable.DataTable({
'autoWidth': false,
'dom': '<t>',
'ajax': {
'url': membershipsTable.data('ajax-url'),
'method': "GET",
'dataSrc': "data",
},
language: {
url: '/json/datatable/fr_FR.json',
},
createdRow: function (row, data, dataIndex) {
$(row).attr('title', 'Cliquer pour afficher plus de détails');
$(row).attr('data-title-opened', 'Cliquer pour cacher les détails');
$(row).attr('data-title-closed', 'Cliquer pour afficher plus de détails');
$(row).attr('data-toggle', 'tooltip');
$(row).tooltip();

$('td:last-of-type', row).html('<i class="icon ion-ios-arrow-down"></i>');
},
columns: [
{
data: 'type_label',
orderable: false,
render: function (data, type, row) {
let currentLabel = row.is_current ? ' (en cours)' : '';
let membershipType = $('<div>')
.data('toggle', 'tooltip')
.attr('title', row.type_description)
.html(data)
.html(data + currentLabel)
.prop('outerHTML');
return membershipType;
},
Expand All @@ -41,92 +91,66 @@ $(document).ready(function() {
orderable: false,
className: 'text-center',
render: function (data, type, row) {
return data + '&nbsp;€';
return row.payment.amount + '&nbsp;€';
},
},
{
data: 'payment_mean',
orderable: false,
render: function (data, type, row) {
return row.payment.mean;
},
},
{
data: 'paymentDates',
data: 'comment',
orderable: false,
className: 'text-center',
render: function (data, type, row) {
let paymentDatesContainer = $('<div>');
let paymentReceived = $('<small>');
let warningIcon = $('<i>')
.addClass('icon')
.addClass('ion-md-warning')
;
if (row.payment_date_received === null) {
paymentReceived.html(warningIcon.prop('outerHTML') + '&nbsp;Paiement pas encore reçu');
} else {
paymentReceived.html('Reçu le ' + row.payment_date_received);
}
let paymentCashed = $('<small>');
if (row.payment_date_cashed === null) {
paymentCashed.html(warningIcon.prop('outerHTML') + '&nbsp;Paiement pas encore encaissé');
} else {
paymentCashed.html('Encaissé le ' + row.payment_date_cashed);
}
paymentDatesContainer.html(paymentReceived.prop('outerHTML') + '<br>' + paymentCashed.prop('outerHTML'));
return paymentDatesContainer.prop('outerHTML');
return data === null ? '-' : data;
},
},
{
data: 'comment',
data: 'details_control',
orderable: false,
className: 'text-center',
render: function (data, type, row) {
return data === null ? '-' : data;
return '';
},
},
// {
// name: 'nom',
// data: 'nom',
// orderable: true,
// render: function (data, type, row) {
// let site = jQuery('<a>')
// .attr('href', row.url_show)
// .html(`<strong>${row.nom}</strong>`)
// .prop('outerHTML');
// return site;
// },
// },
// {
// data: 'etage',
// orderable: true,
// },
// {
// data: 'capacite',
// orderable: true,
// },
// {
// data: null,
// orderable: false,
// className: 'action',
// render: function (data, type, row) {
// let editButton = jQuery('<a>')
// .attr('href', row.url_edit)
// .attr('class', 'btn btn-success btn-sm')
// .html('<i class="fas fa-edit"></i>&nbsp;Modifier')
// .prop('outerHTML');
// return editButton;
// }
// },
// {
// data: null,
// orderable: false,
// className: 'action',
// render: function (data, type, row) {
// let deleteButton = jQuery('<a>')
// .attr('href', row.url_delete)
// .attr('class', 'btn btn-danger btn-sm')
// .html('<i class="fas fa-trash"></i>&nbsp;Supprimer')
// .prop('outerHTML');
// return deleteButton;
// }
// },
],
});

membershipsDataTable.on('click', 'tr:not(.child-row)', function () {
let tr = $(this);
let row = membershipsDataTable.row(tr);

if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
tr.removeClass('bg-secondary');
$(tr).find('.ion-ios-arrow-up').addClass('ion-ios-arrow-down');
$(tr).find('.ion-ios-arrow-up').removeClass('ion-ios-arrow-up');
$(tr).attr('title', $(tr).data('title-closed'));
$(tr).tooltip('dispose');
$(tr).tooltip();
} else {
// Close other rows opened
if (membershipsDataTable.row('.shown').length) {
$(membershipsDataTable.row('.shown').node()).click();
}
// Open this row
row.child(formatChildRowData(row.data()), 'child-row').show();
tr.addClass('shown');
tr.addClass('bg-secondary');
$(tr).find('.ion-ios-arrow-down').addClass('ion-ios-arrow-up');
$(tr).find('.ion-ios-arrow-down').removeClass('ion-ios-arrow-down');
$(tr).attr('title', $(tr).data('title-opened'));
$(tr).tooltip('dispose');
$(tr).tooltip();
// Toggle tooltips on generated child row items
$(row.child()).find('[data-toggle="tooltip"]').tooltip('dispose');
$(row.child()).find('[data-toggle="tooltip"]').tooltip();
}
});
});
37 changes: 33 additions & 4 deletions src/Controller/Ajax/PeopleAjaxController.php
Original file line number Diff line number Diff line change
Expand Up @@ -136,19 +136,48 @@ public function getMembershipsListAction(People $people)
{
$membershipsData = [];
foreach ($people->getMemberships() as $membership) {
$formattedMembers = null;
foreach ($membership->getMembers() as $member) {
$formattedMember = [
'id' => $member->getId(),
'denomination' => $member->getDenomination()->getLabel(),
'firstname' => $member->getFirstName(),
'lastname' => $member->getLastName(),
];

$formattedMembers[] = $formattedMember;
}

$payment = $membership->getPayment();
$formattedMembership = [
'id' => $membership->getId(),
'type_label' => $membership->getType()->getLabel(),
'type_description' => $membership->getType()->getDescription(),
'price' => $membership->getType()->getDefaultAmount(),
'date_start' => $membership->getDateStart()->format('d/m/Y'),
'date_end' => $membership->getDateEnd()->format('d/m/Y'),
'payment_amount' => $membership->getPayment()->getAmount(),
'payment_mean' => $membership->getPayment()->getType()->getLabel(),
'payment_date_received' => $membership->getPayment()->getDateReceived()->format('d/m/Y'),
'payment_date_cashed' => $membership->getPayment()->getDateCashed()->format('d/m/Y'),
'payment' => [
'amount' => $payment->getAmount(),
'mean' => $payment->getType()->getLabel(),
'date_received' => $payment->getDateReceived()->format('d/m/Y'),
'date_cashed' => $payment->getDateCashed()->format('d/m/Y'),
'payer' => [
'id' => $payment->getPayer()->getId(),
'denomination' => $payment->getPayer()->getDenomination()->getLabel(),
'firstname' => $payment->getPayer()->getFirstName(),
'lastname' => $payment->getPayer()->getLastName(),
],
'fiscal_receipt' => [
'fiscal_year' => $payment->getReceipt()->getYear(),
'order_code' => $payment->getReceipt()->getOrderCode(),
],
'comment' => $payment->getComment(),
],
'comment' => $membership->getComment(),
'members' => $formattedMembers,
'is_current' => $membership->getId() === $people->getActiveMembership()->getId(),
];

$membershipsData[] = $formattedMembership;
}

Expand Down
3 changes: 3 additions & 0 deletions src/Entity/Membership.php
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,9 @@ public function setPayment(?Payment $payment): self
return $this;
}

/**
* @return ArrayCollection|People[]
*/
public function getMembers()
{
return $this->members;
Expand Down
4 changes: 2 additions & 2 deletions src/Entity/People.php
Original file line number Diff line number Diff line change
Expand Up @@ -241,7 +241,7 @@ public function getId()
/**
* Get the value of denomination
*/
public function getDenomination()
public function getDenomination(): ?Denomination
{
return $this->denomination;
}
Expand Down Expand Up @@ -720,7 +720,7 @@ public function hasNoAddressDefined()
return true;
}

public function getActiveMembership()
public function getActiveMembership(): ?Membership
{
foreach ($this->memberships as $membership)
{
Expand Down
80 changes: 75 additions & 5 deletions templates/People/partials/people_memberships_list.html.twig
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
data-ajax-url="/ajax/people/{{ people.id }}/list/memberships">
<thead class="border-bottom-0">
<tr>
<th scope="col" style="width: 10%">
<th scope="col" style="width: 15%">
Type
</th>
<th class="text-center" scope="col" style="width: 10%">
Expand All @@ -29,15 +29,85 @@
<th scope="col" style="width: 15%">
Réglé via
</th>
<th scope="col" style="width: 15%">
Dates du paiement
</th>
<th class="text-center" scope="col" style="width: 20%">
<th class="text-center" scope="col" style="width: 25%">
Commentaire
</th>
<th class="text-center" scope="col" style="width: 5%"></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<div
id="childrow-structure"
class="d-none">
<div class="container-fluid bg-white">
<div class="row">
<div class="col px-1">
<div class="text-center p-2">
<div class="row">
<div id="members-container" class="col align-self-stretch d-none">
<div class="bg-light py-2 h-100">
<div class="mb-2">
<strong>Membres adhérant</strong>
</div>
<div id="members-list">
<div id="member-information-container" class="member-information">
<span class="denomination"></span>
<span class="firstname"></span>
<span class="lastname text-uppercase"></span>
</div>
</div>
</div>
</div>
<div id="payment-container" class="col align-self-stretch">
<div class="bg-light py-2 h-100">
<div class="mb-2">
<strong>Paiement</strong>
</div>
<div id="paiement-information-container">
Effectué par <span class="made-by"></span><br>
Reçu le <span class="date-received"></span><br>
Encaissé le <span class="date-cashed"></span>
</div>
</div>
</div>
<div id="fiscal-receipt-container" class="col align-self-stretch">
<div class="bg-light py-2 h-100">
<div class="mb-2">
<strong>Reçu fiscal</strong>
</div>
<div id="fiscal-receipt-container">
Année fiscale&nbsp;: <span class="fiscal-year"></span><br>
Numéro d'ordre&nbsp;: <span class="order-code"></span><br>
</div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col align-self-stretch">
<div class="bg-light py-2 h-100">
<div class="mb-2">
<strong>Commentaire</strong>
</div>
<div id="comment-container" class="font-italic"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

0 comments on commit ca00b73

Please sign in to comment.