Skip to content
24 changes: 24 additions & 0 deletions css/sepa.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
.sepa_dashboard tr.submit_missed td {
background-color: var(--crm-danger-light-color, #EE0000AA);
}

.sepa_dashboard tr.submit_urgently td {
background-color: var(--crm-warning-light-color, #AC6700AA);
}

.sepa_dashboard tr.submit_soon td {
background-color: var(--crm-info-light-color, #0165FFAA);
}

.sepa_dashboard tr.submit_later td {
background-color: var(--crm-success-light-color, #008300AA);
}

.sepa_dashboard tr.submit_closed td {
background-color: var(--crm-layer2-bg-color, #00830033);
}

.sepa_dashboard .sepa_dashboard__button_group {
display: flex;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why does the table cell have to be display: flex;? - this actually causes the buttons to grow in height and shouldn't be necessary.

The buttons are inline-block so text-align: right; should be enough.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This adresses the table cell containing the buttons. Setting the display property to flex aligns the buttons horizontally instead of vertical. The overall screen space the buttons take up is reduced.
Nonetheless the selector could be more descriptive.

justify-content: end;
}
11 changes: 11 additions & 0 deletions sepa.php
Original file line number Diff line number Diff line change
Expand Up @@ -561,3 +561,14 @@ function sepa_civicrm_xmlMenu(array &$files): void {
$files[] = $file;
}
}

/**
* @param array $list
* @param string $region
* @return void
*/
function sepa_civicrm_coreResourceList(array &$list, string $region): void {
if ($region === 'html-header') {
Civi::resources()->addStyleFile('org.project60.sepa', 'css/sepa.css');
}
}
329 changes: 159 additions & 170 deletions templates/CRM/Sepa/Page/DashBoard.tpl
Original file line number Diff line number Diff line change
Expand Up @@ -14,188 +14,177 @@
+-------------------------------------------------------*}

{crmScope extensionKey='org.project60.sepa'}

<div class="crm-actions-ribbon">
<ul id="actions">
{if $status eq 'closed'}
<li>
<a title="{ts escape='htmlattribute'}show active groups{/ts}" class="search button" href="{$show_open_url}">
<span>
<div class="icon inform-icon"></div>
{ts}show active groups{/ts}
</span>
</a>
</li>
{else}
<li>
<a title="{ts escape='htmlattribute'}show closed groups{/ts}" class="search button" href="{$show_closed_url}">
<span>
<div class="icon inform-icon"></div>
{ts}show closed groups{/ts}
</span>
</a>
<li>
{if $can_batch}
<li>
<a title="{ts escape='htmlattribute'}update one-off{/ts}" class="refresh button" href="{$batch_ooff}">
<span>
<div class="icon refresh-icon ui-icon-refresh"></div>
{ts}update one-off{/ts}
</span>
</a>
</li>
<li>
<a title="{ts escape='htmlattribute'}update recurring{/ts}" class="refresh button" href="{$batch_recur}">
<span>
<div class="icon refresh-icon ui-icon-refresh"></div>
{ts}update recurring{/ts}
</span>
</a>
</li>
<div class="crm-actions-ribbon">
<ul id="actions">
{if $status eq 'closed'}
<li>
<a title="{ts escape='htmlattribute'}retry collection{/ts}" class="refresh button" href="{$batch_retry}">
<span>
<div class="icon refresh-icon ui-icon-circle-plus"></div>
{ts}retry collection{/ts}
</span>
<a title="{ts escape='htmlattribute'}show active groups{/ts}" class="search button" href="{$show_open_url}">
<span>
<div class="icon inform-icon"></div>
{ts}show active groups{/ts}
</span>
</a>
</li>
{else}
<li>
<a title="{ts escape='htmlattribute'}show closed groups{/ts}" class="search button" href="{$show_closed_url}">
<span>
<div class="icon inform-icon"></div>
{ts}show closed groups{/ts}
</span>
</a>
<li>
{if $can_batch}
<li>
<a title="{ts escape='htmlattribute'}update one-off{/ts}" class="refresh button" href="{$batch_ooff}">
<span>
<div class="icon refresh-icon ui-icon-refresh"></div>
{ts}update one-off{/ts}
</span>
</a>
</li>
<li>
<a title="{ts escape='htmlattribute'}update recurring{/ts}" class="refresh button" href="{$batch_recur}">
<span>
<div class="icon refresh-icon ui-icon-refresh"></div>
{ts}update recurring{/ts}
</span>
</a>
</li>
<li>
<a title="{ts escape='htmlattribute'}retry collection{/ts}" class="refresh button" href="{$batch_retry}">
<span>
<div class="icon refresh-icon ui-icon-circle-plus"></div>
{ts}retry collection{/ts}
</span>
</a>
</li>
{/if}
{/if}
{/if}
</ul>
<div class="clear"></div>
</div>

{if $financialacls}
<div class="help">
{ts}Note that only groups with contributions of authorized financial types are being displayed.{/ts}
</ul>
<div class="clear"></div>
</div>
{/if}

<table>
<tr>
<th>{ts}Group Name{/ts}</th>
<th>{ts}Status{/ts}</th>
<th>{ts}Type{/ts}</th>
<th>{ts}Submission{/ts}</th>
<th>{ts}Collection{/ts}</th>
<th>{ts}Transactions{/ts}</th>
<th>{ts}Total{/ts}</th>
<th></th>
</tr>
{foreach from=$groups item=group}
{assign var='file_id' value=$group.file_id}
{assign var='group_id' value=$group.id}
<tr bgcolor="#FF0000" class="status_{$group.status_id} submit_{$group.submit}" data-id="{$group.id}" data-type="{$group.type}">
<td title="id {$group.id}" class="nb_contrib">
{$group.reference}
{if $group.transaction_message}<span class="crm-i fa-envelope-o" title="{ts escape='htmlattribute'}Custom Transaction Message:{/ts} {$group.transaction_message}"></span>{/if}
{if $group.transaction_note}<span class="crm-i fa-sticky-note" title="{ts escape='htmlattribute'}Note:{/ts} {$group.transaction_note}"></span>{/if}
</td>
<td>
{$group.status_label}
<img id="busy_{$group_id}" height="16" src="{$config->resourceBase}i/loading.gif" style="float: right; padding: 0px 4px;" hidden="1" />
</td>
<td>{$group.type}</td>
{if $status eq 'closed'}
<td>{$group.file_created_date}</td>
{else}
<td>{$group.latest_submission_date}</td>
{if $financialacls}
<div class="help">
{ts}Note that only groups with contributions of authorized financial types are being displayed.{/ts}
</div>
{/if}
<td>{$group.collection_date}</td>
<td class="nb_contrib" title="list all the contributions">
{$group.nb_contrib}
</td>
<td style="white-space:nowrap;">{$group.total|crmMoney:$group.currency}</td>
<td>
<a href="{crmURL p="civicrm/sepa/listgroup" q="group_id=$group_id"}" class="button button_view">{ts}Contributions{/ts}</a>
{if $group.status == 'open'}
{if $can_batch}
{if $group.submit == 'missed'}
<a href="{crmURL p="civicrm/sepa/closegroup" q="group_id=$group_id&status=missed"}" class="button button_close">
{else}
<a href="{crmURL p="civicrm/sepa/closegroup" q="group_id=$group_id"}" class="button button_close">

<table class="sepa_dashboard" id="options">
<thead>
<tr role="row">
<th class="sorting" aria-controls="sepa-option">{ts}Group Name{/ts}</th>
<th class="sorting" aria-controls="sepa-option">{ts}Status{/ts}</th>
<th class="sorting" aria-controls="sepa-option">{ts}Type{/ts}</th>
<th class="sorting" aria-controls="sepa-option">{ts}Submission{/ts}</th>
<th class="sorting" aria-controls="sepa-option">{ts}Collection{/ts}</th>
<th class="sorting" aria-controls="sepa-option">{ts}Transactions{/ts}</th>
<th class="sorting" aria-controls="sepa-option">{ts}Total{/ts}</th>
<th></th>
</tr>
</thead>
{foreach from=$groups item=group}
{assign var='file_id' value=$group.file_id}
{assign var='group_id' value=$group.id}
<tr bgcolor="#FF0000" class="status_{$group.status_id} submit_{$group.submit}" data-id="{$group.id}" data-type="{$group.type}">
<td title="id {$group.id}" class="nb_contrib">
{$group.reference}
{if $group.transaction_message}<span class="crm-i fa-envelope-o" title="{ts escape='htmlattribute'}Custom Transaction Message:{/ts} {$group.transaction_message}"></span>{/if}
{if $group.transaction_note}<span class="crm-i fa-sticky-note" title="{ts escape='htmlattribute'}Note:{/ts} {$group.transaction_note}"></span>{/if}
</td>
<td>
{$group.status_label}
<img id="busy_{$group_id}" height="16" src="{$config->resourceBase}i/loading.gif" style="float: right; padding: 0px 4px;" hidden="1" />
</td>
<td>{$group.type}</td>
{if $status eq 'closed'}
<td>{$group.file_created_date}</td>
{else}
<td>{$group.latest_submission_date}</td>
{/if}
<td>{$group.collection_date}</td>
<td class="nb_contrib" title="list all the contributions">
{$group.nb_contrib}
</td>
<td style="white-space:nowrap;">{$group.total|crmMoney:$group.currency}</td>
<td class="sepa_dashboard__button_group">
{crmButton p="civicrm/sepa/listgroup" q="group_id=$group_id" class="button_view" title="{ts escape='htmlattribute'}Contributions{/ts}" icon="fa-info"}{ts}Contributions{/ts}{/crmButton}
{if $group.status == 'open'}
{if $can_batch}
{if $group.submit == 'missed'}
{crmButton p="civicrm/sepa/closegroup" q="group_id=$group_id&status=missed" class="button_close" title="{ts escape='htmlattribute'}Close and Submit{/ts}" icon="fa-paper-plane"}{ts}Close and Submit{/ts}{/crmButton}
{else}
{crmButton p="civicrm/sepa/closegroup" q="group_id=$group_id" class="button_close" title="{ts escape='htmlattribute'}Close and Submit{/ts}" icon="fa-paper-plane"}{ts}Close and Submit{/ts}{/crmButton}
{/if}
{/if}
{ts}Close and Submit{/ts}</a>
{/if}
{else}
<a href="{crmURL p="civicrm/sepa/xml" q="id=$file_id"}" download="{$group.file}" class="button button_export">{ts}Download Again{/ts}</a>
{if $closed_status_id eq $group.status_id}
{if not $group.collection_date_in_future}
<a href="{crmURL p="civicrm/sepa/mark_received" q="group_id=$group_id"}" class="button button_received">{ts}Mark Received{/ts}</a>
{else}
{crmButton p="civicrm/sepa/xml" q="id=$file_id" class="button_export" title="{ts escape='htmlattribute'}Download Again{/ts}" icon=""}{ts}Download Again{/ts}{/crmButton}
{if $closed_status_id eq $group.status_id}
{if not $group.collection_date_in_future}
{crmButton p="civicrm/sepa/mark_received" q="group_id=$group_id" class="button_received" title="{ts escape='htmlattribute'}Mark Received{/ts}" icon=""}{ts}Mark Received{/ts}{/crmButton}
{/if}
{/if}
{/if}
{/if}
{if $can_delete}
<a href="{crmURL p="civicrm/sepa/deletegroup" q="group_id=$group_id"}" class="button button_view">{ts}Delete{/ts}</a>
{/if}
</td>
</tr>
{/foreach}
</table>

{* legend by @scardinius *}
<br/>
<table>
<caption>{ts}Legend{/ts}</caption>
<tr>
<th>{ts}Status{/ts}</th>
<th>{ts}Description{/ts}</th>
</tr>
<tr class="submit_missed">
<td>{ts}Missed{/ts}</td>
<td>{ts}Submission date has passed!{/ts}</td>
</tr>
<tr class="submit_urgently">
<td>{ts}Urgent{/ts}</td>
<td>{ts}Submission date is immanent, you have to close group and upload file to creditor today!{/ts}</td>
</tr>
<tr class="submit_soon">
<td>{ts}Soon{/ts}</td>
<td>{ts}Submission within 6 days or OOFF (submission not enforced){/ts}</td>
</tr>
<tr class="submit_later">
<td>{ts}Upcoming{/ts}</td>
<td>{ts}Submission date more than 6 days from now{/ts}</td>
</tr>
<tr class="submit_closed">
<td>{ts}Closed{/ts}</td>
<td>{ts}The group is closed and uploaded to creditor, submission date is in the past.{/ts}</td>
</tr>
</table>
{if $can_delete}
{crmButton p="civicrm/sepa/deletegroup" q="group_id=$group_id" class="button_view" title="{ts escape='htmlattribute'}Delete{/ts}" icon="fa-trash-can"}{ts}Delete{/ts}{/crmButton}
{/if}
</td>
</tr>
{/foreach}
</table>

{literal}
<style>
tr.submit_missed {background-color: #EE0000AA;}
tr.submit_urgently {background-color: #AC6700AA;}
tr.submit_soon {background-color: #0165FFAA;}
tr.submit_later {background-color: #008300AA;}
tr.submit_closed {background-color: #00830033;}
</style>
{/literal}
{* legend by @scardinius *}
<br/>
<table class="sepa_dashboard">
<caption>{ts}Legend{/ts}</caption>
<tr>
<th>{ts}Status{/ts}</th>
<th>{ts}Description{/ts}</th>
</tr>
<tr class="submit_missed">
<td>{ts}Missed{/ts}</td>
<td>{ts}Submission date has passed!{/ts}</td>
</tr>
<tr class="submit_urgently">
<td>{ts}Urgent{/ts}</td>
<td>{ts}Submission date is immanent, you have to close group and upload file to creditor today!{/ts}</td>
</tr>
<tr class="submit_soon">
<td>{ts}Soon{/ts}</td>
<td>{ts}Submission within 6 days or OOFF (submission not enforced){/ts}</td>
</tr>
<tr class="submit_later">
<td>{ts}Upcoming{/ts}</td>
<td>{ts}Submission date more than 6 days from now{/ts}</td>
</tr>
<tr class="submit_closed">
<td>{ts}Closed{/ts}</td>
<td>{ts}The group is closed and uploaded to creditor, submission date is in the past.{/ts}</td>
</tr>
</table>

<script type="text/javascript">
let received_confirmation_message = `{ts}Do you really want to mark this groups as 'payment received'?{/ts}`;
<script type="text/javascript">
let received_confirmation_message = `{ts}Do you really want to mark this groups as 'payment received'?{/ts}`;

{literal}
function mark_received(group_id) {
if (confirm(received_confirmation_message)) {
cj("#mark_received_" + group_id).hide();
cj("#busy_" + group_id).show();
CRM.api3('SepaAlternativeBatching', 'received', {'q': 'civicrm/ajax/rest', 'txgroup_id': group_id},
{success: function(data) {
// reload page
location.reload();
},
error: function(data) {
// show error message
cj("#busy_" + group_id).hide();
alert(data.error_message.error_message);
}}
);
{literal}
function mark_received(group_id) {
if (confirm(received_confirmation_message)) {
cj("#mark_received_" + group_id).hide();
cj("#busy_" + group_id).show();
CRM.api3('SepaAlternativeBatching', 'received', {'q': 'civicrm/ajax/rest', 'txgroup_id': group_id},
{success: function(data) {
// reload page
location.reload();
},
error: function(data) {
// show error message
cj("#busy_" + group_id).hide();
alert(data.error_message.error_message);
}}
);
}
}
}
</script>
{/literal}

</script>
{/literal}
{/crmScope}