lfk/frontend
2
0
Fork 0
Code Issues 3 Pull Requests Actions Projects Releases Wiki Activity

Added basic donation overview

Browse Source 
ref #79
This commit is contained in:
Nicolai Ort 2021-02-24 19:44:57 +01:00
parent ccacdf274b
commit 8d89d158d1
1 changed files with 77 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
src/components/donations/DonationsOverview.svelte
View File

@ -1,18 +1,17 @@
<script> <script>
import { getLocaleFromNavigator, _ } from "svelte-i18n"; import { getLocaleFromNavigator, _ } from "svelte-i18n";
import { DonorService } from "@odit/lfk-client-js"; import { DonationService, DonorService } from "@odit/lfk-client-js";
import store from "../../store"; import store from "../../store";
import DonorsEmptyState from "./DonorsEmptyState.svelte";
import ConfirmDonorDeletion from "./ConfirmDonorDeletion.svelte";
import Toastify from "toastify-js"; import Toastify from "toastify-js";
import DonationsEmptyState from "./DonationsEmptyState.svelte";
$: searchvalue = ""; $: searchvalue = "";
$: active_deletes = []; $: active_deletes = [];
let modal_open = false; export let current_donations = [];
let delete_donor = {}; const donations_promise = DonationService.donationControllerGetAll().then(
export let current_donors = []; (val) => {
const donors_promise = DonorService.donorControllerGetAll().then((val) => { current_donations = val;
current_donors = val; }
}); );
function should_display_based_on_id(id) { function should_display_based_on_id(id) {
if (searchvalue.toString().slice(-1) === "*") { if (searchvalue.toString().slice(-1) === "*") {
return id.toString().startsWith(searchvalue.replace("*", "")); return id.toString().startsWith(searchvalue.replace("*", ""));
@ -21,24 +20,17 @@
} }
</script> </script>
<ConfirmDonorDeletion {#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:GET')}
on:cancelDelete={(event) => { {#await donations_promise}
modal_open = false;
active_deletes[event.detail.id] = false;
}}
bind:modal_open
bind:delete_donor />
{#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:GET')}
{#await donors_promise}
<div <div
class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2" class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
role="alert"> role="alert">
<p class="font-bold">{$_('donors-are-being-loaded')}</p> <p class="font-bold">donations are being loaded</p>
<p class="text-sm">{$_('this-might-take-a-moment')}</p> <p class="text-sm">{$_('this-might-take-a-moment')}</p>
</div> </div>
{:then} {:then}
{#if current_donors.length === 0} {#if current_donations.length === 0}
<DonorsEmptyState /> <DonationsEmptyState />
{:else} {:else}
<input <input
type="search" type="search"
@ -54,17 +46,17 @@
<th <th
scope="col" scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
{$_('name')} Donor
</th> </th>
<th <th
scope="col" scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
{$_('contact-information')} Target
</th> </th>
<th <th
scope="col" scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
{$_('donations')} Amount per Distance
</th> </th>
<th <th
scope="col" scope="col"
@ -77,76 +69,98 @@
</tr> </tr>
</thead> </thead>
<tbody class="divide-y divide-gray-200"> <tbody class="divide-y divide-gray-200">
{#each current_donors as donor} {#each current_donations as donation}
{#if donor.firstname {#if donation.donor.firstname
.toLowerCase() .toLowerCase()
.includes( .includes(
searchvalue.toLowerCase() searchvalue.toLowerCase()
) || donor.middlename ) || donation.donor.middlename
.toLowerCase() .toLowerCase()
.includes( .includes(
searchvalue.toLowerCase() searchvalue.toLowerCase()
) || donor.lastname ) || donation.donor.lastname
.toLowerCase() .toLowerCase()
.includes( .includes(
searchvalue.toLowerCase() searchvalue.toLowerCase()
) || should_display_based_on_id(donor.id)} ) || donation.runner?.firstname
<tr data-rowid="donor_{donor.id}"> .toLowerCase()
.includes(
searchvalue.toLowerCase()
) || donation.runner?.middlename
.toLowerCase()
.includes(
searchvalue.toLowerCase()
) || donation.runner?.lastname
.toLowerCase()
.includes(
searchvalue.toLowerCase()
) || should_display_based_on_id(donation.id)}
<tr data-rowid="donation_{donation.id}">
<td class="px-6 py-4 whitespace-nowrap"> <td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center"> <div class="flex items-center">
<div class="ml-4"> <a
<div class="text-sm font-medium text-gray-900"> href="../donors/{donation.donor.id}"
{donor.firstname} class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{donation.donor.firstname}
{donor.middlename || ''} {donation.donor.middlename || ''}
{donor.lastname} {donation.donor.lastname}</a>
</div>
</div>
</div> </div>
</td> </td>
<td class="px-6 py-4 whitespace-nowrap"> <td class="px-6 py-4 whitespace-nowrap">
{#if donor.email} {#if donation.runner}
<div class="text-sm text-gray-500">{donor.email}</div> <div class="text-sm font-medium text-gray-900">
{/if} <a
{#if donor.phone} href="../runners/{donation.runner.id}"
<div class="text-sm text-gray-500">{donor.phone}</div> class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{donation.runner.firstname}
{/if} {donation.runner.middlename || ''}
{#if donor.address.address1 !== null} {donation.runner.lastname}</a>
{donor.address.address1}<br /> </div>
{donor.address.address2 || ''}<br /> {:else}
{donor.address.postalcode} <div class="text-sm font-medium text-gray-900">
{donor.address.city} Fixed Donation
{donor.address.country} </div>
{/if} {/if}
</td> </td>
<td class="px-6 py-4 whitespace-nowrap">TODO</td>
<td class="px-6 py-4 whitespace-nowrap"> <td class="px-6 py-4 whitespace-nowrap">
{(donor.donationAmount/100).toFixed(2).toLocaleString("de-DE", {valute: "EUR"})}€ {#if donation.amountPerDistance}
<div class="text-sm font-medium text-gray-900">
{(donation.amountPerDistance / 100)
.toFixed(2)
.toLocaleString('de-DE', { valute: 'EUR' })}€
</div>
{:else}
<div class="text-sm font-medium text-gray-900">
Fixed Donation
</div>
{/if}
</td> </td>
{#if active_deletes[donor.id] === true} <td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-gray-900">
{(donation.amount / 100)
.toFixed(2)
.toLocaleString('de-DE', { valute: 'EUR' })}€
</div>
</td>
{#if active_deletes[donation.id] === true}
<td <td
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button <button
on:click={() => { on:click={() => {
active_deletes[donor.id] = false; active_deletes[donation.id] = false;
}} }}
tabindex="0" tabindex="0"
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button> class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
<button <button
on:click={() => { on:click={() => {
DonorService.donorControllerRemove(donor.id, false) DonationService.donationControllerRemove(donation.id, false)
.then((resp) => { .then((resp) => {
current_donors = current_donors.filter((obj) => obj.id !== donor.id); current_donations = current_donations.filter((obj) => obj.id !== donation.id);
Toastify({ Toastify({
text: 'Donor deleted', text: 'Donation deleted',
duration: 500, duration: 500,
backgroundColor: backgroundColor:
'linear-gradient(to right, #00b09b, #96c93d)', 'linear-gradient(to right, #00b09b, #96c93d)',
}).showToast(); }).showToast();
}) })
.catch((err) => {
modal_open = true;
delete_donor = donor;
});
}} }}
tabindex="0" tabindex="0"
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button> class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
@ -155,12 +169,12 @@
<td <td
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<a <a
href="./{donor.id}" href="./{donation.id}"
class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a> class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
{#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:DELETE')} {#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:DELETE')}
<button <button
on:click={() => { on:click={() => {
active_deletes[donor.id] = true; active_deletes[donation.id] = true;
}} }}
tabindex="0" tabindex="0"
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button> class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>