Compare commits
36 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
fdc7d80bbf
|
|||
|
352551e168
|
|||
|
7aec050419
|
|||
|
d98fb0d5b2
|
|||
|
5014bf5bc5
|
|||
|
0708cabc75
|
|||
|
4fcb26cf93
|
|||
|
269def20d1
|
|||
|
b8de9e0e42
|
|||
|
7b2b598588
|
|||
|
e0b61486b0
|
|||
|
3f86f7412f
|
|||
|
6454d960de
|
|||
|
37154c188b
|
|||
|
8da7578a0a
|
|||
| 2a64094006 | |||
| e9ce9644ff | |||
|
52439aa5bc
|
|||
|
ccf865687b
|
|||
|
cac34db1fd
|
|||
|
faf3893180
|
|||
|
c33dfcfddd
|
|||
|
019e14ab1f
|
|||
|
b5790196c6
|
|||
|
94a64ca690
|
|||
| a6ce04c903 | |||
| 165c154233 | |||
|
318547db46
|
|||
|
e60c09e19c
|
|||
|
4834d1484c
|
|||
|
4b6342727e
|
|||
|
cb5fa52cd9
|
|||
|
947d01cf7f
|
|||
|
3563394fb3
|
|||
|
269d7a7def
|
|||
|
e95f2333b0
|
59
CHANGELOG.md
59
CHANGELOG.md
@@ -2,8 +2,67 @@
|
||||
|
||||
All notable changes to this project will be documented in this file. Dates are displayed in UTC.
|
||||
|
||||
#### [1.2.0](https://git.odit.services/lfk/frontend/compare/1.1.0...1.2.0)
|
||||
|
||||
- feat(donoroverview): Added datatable formatters [`d98fb0d`](https://git.odit.services/lfk/frontend/commit/d98fb0d5b288c987a45ccbf2bb026ccaab539a71)
|
||||
- feat(donors): Load donors paginated [`5014bf5`](https://git.odit.services/lfk/frontend/commit/5014bf5bc5873cfe4ae04d71b4aff12b257dd2e3)
|
||||
- feat(donorsoverview): Dynamicly add newly generated donors [`352551e`](https://git.odit.services/lfk/frontend/commit/352551e168b5dced5e7353e82655908d82d28af0)
|
||||
- feat(donorsoverview): Implemented delete confirmation with datatable [`7aec050`](https://git.odit.services/lfk/frontend/commit/7aec050419f6f1bf853c3e1bc655b01725ed3b65)
|
||||
|
||||
#### [1.1.0](https://git.odit.services/lfk/frontend/compare/1.0.0...1.1.0)
|
||||
|
||||
> 19 April 2023
|
||||
|
||||
- 🚀RELEASE v1.1.0 [`0708cab`](https://git.odit.services/lfk/frontend/commit/0708cabc75e63a876e54a0b343318f8d934ae319)
|
||||
- feat(dashboar): Added total donors to overview [`e0b6148`](https://git.odit.services/lfk/frontend/commit/e0b61486b089aa1e611ef3569b1521fc331ec0e4)
|
||||
- feat(dashboard): Updated stats icons [`4fcb26c`](https://git.odit.services/lfk/frontend/commit/4fcb26cf9371e27e5d7e474b3558ef354e9114c0)
|
||||
- feat(dashboard): Added average sponsoring [`269def2`](https://git.odit.services/lfk/frontend/commit/269def20d114ededaba3153bbd50ec2ddd70e1c6)
|
||||
- feat(dashboard): Added total donations [`7b2b598`](https://git.odit.services/lfk/frontend/commit/7b2b59858839b98370af6fb1e6028ba0a1639186)
|
||||
- feat(dashboard): Added average distance [`b8de9e0`](https://git.odit.services/lfk/frontend/commit/b8de9e0e427b3a8b56e6354ad7168ae12c7cce85)
|
||||
- Lockfile [`3f86f74`](https://git.odit.services/lfk/frontend/commit/3f86f7412ffc4bc27328ad1f7d3c3118546e7e29)
|
||||
- Bumped client [`6454d96`](https://git.odit.services/lfk/frontend/commit/6454d960de3f9f5ea86679f157b3b7e7cffde74d)
|
||||
- new license file version [CI SKIP] [`2a64094`](https://git.odit.services/lfk/frontend/commit/2a640940062765a470387103a72ed14a2411d97b)
|
||||
|
||||
### [1.0.0](https://git.odit.services/lfk/frontend/compare/0.19.0...1.0.0)
|
||||
|
||||
> 19 April 2023
|
||||
|
||||
- 🚀RELEASE v1.0.0 [`8da7578`](https://git.odit.services/lfk/frontend/commit/8da7578a0a46a3e97d8c870e29399f6e8821c9fa)
|
||||
- Merge pull request 'feature/175-request_pagination' (#176) from feature/175-request_pagination into dev [`e9ce964`](https://git.odit.services/lfk/frontend/commit/e9ce9644ff03f981cec6e9ad56aa5fdf0ff71ef4)
|
||||
- Donation paginated loading [`ccf8656`](https://git.odit.services/lfk/frontend/commit/ccf865687b34016931a702c0a9b98a0a18e2b03a)
|
||||
- Paginated scan loading [`cac34db`](https://git.odit.services/lfk/frontend/commit/cac34db1fd3bf5dc7c7be64b3a76ca4c8c77938d)
|
||||
- Implemented Async loading of cards via pagination (500 cards per request) [`c33dfcf`](https://git.odit.services/lfk/frontend/commit/c33dfcfddddfed0902f3fa9b1d8a1d3e1560262f)
|
||||
- Paginated runner loading (1000 per page) [`faf3893`](https://git.odit.services/lfk/frontend/commit/faf3893180bb735bea6f1ea58c896686b89949fe)
|
||||
- Allways set loaded to true [`52439aa`](https://git.odit.services/lfk/frontend/commit/52439aa5bc8cfb1d78d5dfce55b1a0df640ad8f5)
|
||||
- Bumped lfk client [`019e14a`](https://git.odit.services/lfk/frontend/commit/019e14ab1f99906f13d36c7148d0f4b7894072f2)
|
||||
- new license file version [CI SKIP] [`a6ce04c`](https://git.odit.services/lfk/frontend/commit/a6ce04c90386f16abf235cc7b2f95aeea5011c7d)
|
||||
|
||||
#### [0.19.0](https://git.odit.services/lfk/frontend/compare/0.18.4...0.19.0)
|
||||
|
||||
> 17 April 2023
|
||||
|
||||
- 🚀RELEASE v0.19.0 [`94a64ca`](https://git.odit.services/lfk/frontend/commit/94a64ca69078c7fe2935eeb5f955fab95a79cb85)
|
||||
- Merge pull request 'feature/173-scanstation_configcodes' (#174) from feature/173-scanstation_configcodes into dev [`165c154`](https://git.odit.services/lfk/frontend/commit/165c1542338c58f2abf42fef2e7b84b40d1e2d9c)
|
||||
- I18n [`e60c09e`](https://git.odit.services/lfk/frontend/commit/e60c09e19c9cc20338906e84f4db4e009d926360)
|
||||
- Implemented config code generation [`4b63427`](https://git.odit.services/lfk/frontend/commit/4b6342727ee0ea38597750d8c99edc301f1ccc2d)
|
||||
- Styling [`4834d14`](https://git.odit.services/lfk/frontend/commit/4834d1484c3fb6ecd4a1b56aa9fbb8125c641a62)
|
||||
- Adjusted size on smaller devices [`318547d`](https://git.odit.services/lfk/frontend/commit/318547db46045e41de64d5688368e85cd6fb8035)
|
||||
- Lockfile [`947d01c`](https://git.odit.services/lfk/frontend/commit/947d01cf7fc7fe2ee88c56e017b0d663f1f3b4f9)
|
||||
- Barcode placeholder [`cb5fa52`](https://git.odit.services/lfk/frontend/commit/cb5fa52cd9a97490b50fb0c02c26615b49650c08)
|
||||
- Added bwip-js for barcode generation [`3563394`](https://git.odit.services/lfk/frontend/commit/3563394fb33d661890327e2ae08c400830b37844)
|
||||
|
||||
#### [0.18.4](https://git.odit.services/lfk/frontend/compare/0.18.3...0.18.4)
|
||||
|
||||
> 15 April 2023
|
||||
|
||||
- 🚀RELEASE v0.18.4 [`269d7a7`](https://git.odit.services/lfk/frontend/commit/269d7a7defdde059ef2bb5103262cf734e9babe9)
|
||||
- Hide address2 in orgs by default [`e95f233`](https://git.odit.services/lfk/frontend/commit/e95f2333b0b958ed00c0e097b43aac2e70ad0d38)
|
||||
|
||||
#### [0.18.3](https://git.odit.services/lfk/frontend/compare/0.18.2...0.18.3)
|
||||
|
||||
> 15 April 2023
|
||||
|
||||
- 🚀RELEASE v0.18.3 [`950217e`](https://git.odit.services/lfk/frontend/commit/950217e0a350f9999b879475edf41f2f11c48179)
|
||||
- Dont show adress 2 in runner overview [`5e65fb3`](https://git.odit.services/lfk/frontend/commit/5e65fb33013c3dad38e7ad6740b017ae206f278f)
|
||||
|
||||
#### [0.18.2](https://git.odit.services/lfk/frontend/compare/0.18.1...0.18.2)
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.18.3-RELEASE_INFO</span>
|
||||
<span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-1.2.0-RELEASE_INFO</span>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<script src="/env.js"></script>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@odit/lfk-frontend",
|
||||
"version": "0.18.3",
|
||||
"version": "1.2.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"i18n-order": "node order.js",
|
||||
@@ -39,9 +39,10 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@odit/lfk-client-js": "0.14.3",
|
||||
"@odit/lfk-client-js": "1.1.0",
|
||||
"@paralleldrive/cuid2": "^2.2.0",
|
||||
"@tanstack/svelte-table": "^8.8.5",
|
||||
"bwip-js": "^3.4.0",
|
||||
"check-password-strength": "2.0.7",
|
||||
"csvtojson": "2.0.10",
|
||||
"gridjs": "3.4.0",
|
||||
|
||||
16
pnpm-lock.yaml
generated
16
pnpm-lock.yaml
generated
@@ -2,14 +2,17 @@ lockfileVersion: '6.0'
|
||||
|
||||
dependencies:
|
||||
'@odit/lfk-client-js':
|
||||
specifier: 0.14.3
|
||||
version: 0.14.3
|
||||
specifier: 1.1.0
|
||||
version: 1.1.0
|
||||
'@paralleldrive/cuid2':
|
||||
specifier: ^2.2.0
|
||||
version: 2.2.0
|
||||
'@tanstack/svelte-table':
|
||||
specifier: ^8.8.5
|
||||
version: 8.8.5(svelte@3.58.0)
|
||||
bwip-js:
|
||||
specifier: ^3.4.0
|
||||
version: 3.4.0
|
||||
check-password-strength:
|
||||
specifier: 2.0.7
|
||||
version: 2.0.7
|
||||
@@ -507,8 +510,8 @@ packages:
|
||||
'@octokit/openapi-types': 16.0.0
|
||||
dev: true
|
||||
|
||||
/@odit/lfk-client-js@0.14.3:
|
||||
resolution: {integrity: sha512-oOZ9jjzqcbMA0Sfwxn4q9+8hHckMU2IhAn7v0OAS54zcnquYQANnY4RMEoNIyXd0oEe1z8QewBjyBvFEDg6BmA==}
|
||||
/@odit/lfk-client-js@1.1.0:
|
||||
resolution: {integrity: sha512-yhjsi7YMzL9/fJ7o06yszzw15iZhao3VmX0G9oqZWFwYJd1M2td3Lvm76mXNzTVlbdG6W0W3+eEjcalBdo51Pg==}
|
||||
dev: false
|
||||
|
||||
/@odit/license-exporter@0.0.12:
|
||||
@@ -847,6 +850,11 @@ packages:
|
||||
run-applescript: 5.0.0
|
||||
dev: true
|
||||
|
||||
/bwip-js@3.4.0:
|
||||
resolution: {integrity: sha512-Gx9LIBhmEFmNH4FJsS+Rs+bG5hUcs+OBemEEQ2ZTLz8tue0PA/lM692Gf2yuYJ2yUpLGtK9tAexs85tXBPG/ww==}
|
||||
hasBin: true
|
||||
dev: false
|
||||
|
||||
/bytes@3.1.2:
|
||||
resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
|
||||
engines: {node: '>= 0.8'}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -32,7 +32,7 @@
|
||||
export let original_data = {};
|
||||
export let current_cards = [];
|
||||
export const addCards = (cards) => {
|
||||
console.log(cards)
|
||||
console.log(cards);
|
||||
current_cards = current_cards.concat(...cards);
|
||||
options.update((options) => ({
|
||||
...options,
|
||||
@@ -155,15 +155,27 @@
|
||||
}).showToast();
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
RunnerCardService.runnerCardControllerGetAll().then((val) => {
|
||||
current_cards = val;
|
||||
onMount(async () => {
|
||||
let page = 0;
|
||||
while (page >= 0) {
|
||||
const cards = await RunnerCardService.runnerCardControllerGetAll(
|
||||
page,
|
||||
500
|
||||
);
|
||||
if (cards.length == 0) {
|
||||
page = -2;
|
||||
}
|
||||
|
||||
current_cards = current_cards.concat(...cards);
|
||||
options.update((options) => ({
|
||||
...options,
|
||||
data: current_cards,
|
||||
}));
|
||||
|
||||
dataLoaded = true;
|
||||
});
|
||||
page++;
|
||||
}
|
||||
console.log("All cards loaded");
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -229,7 +241,7 @@
|
||||
...options,
|
||||
data: current_cards,
|
||||
}));
|
||||
$table.resetRowSelection()
|
||||
$table.resetRowSelection();
|
||||
}}
|
||||
>
|
||||
{$_("delete-cards")}
|
||||
@@ -249,7 +261,10 @@
|
||||
</svg>
|
||||
</button>
|
||||
{/if}
|
||||
<GenerateRunnerCards cards_show={selected.length>0} bind:generate_cards={selectedCards} />
|
||||
<GenerateRunnerCards
|
||||
cards_show={selected.length > 0}
|
||||
bind:generate_cards={selectedCards}
|
||||
/>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
|
||||
@@ -35,7 +35,9 @@
|
||||
<p class="text-sm">{$_("this-might-take-a-moment")}</p>
|
||||
</div>
|
||||
{:then stats}
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 2xl:grid-cols-6 gap-4">
|
||||
<div
|
||||
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 2xl:grid-cols-6 gap-4"
|
||||
>
|
||||
<StatCard
|
||||
title={$_("runners")}
|
||||
value={stats.total_runners}
|
||||
@@ -59,18 +61,67 @@
|
||||
href="/scans/"
|
||||
>
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
size="24"
|
||||
class="stroke-current text-grey-500"
|
||||
height="24"
|
||||
width="24"
|
||||
height="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><polyline points="22 12 18 12 15 21 9 3 6 12 2 12" /></svg
|
||||
viewBox="0 0 24 24"
|
||||
><path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z"
|
||||
/></svg
|
||||
>
|
||||
</StatCard>
|
||||
<StatCard
|
||||
title={$_("total-donors")}
|
||||
value={stats.total_donors}
|
||||
href="/donors/"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24"
|
||||
><path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
d="M9.33 11.5h2.17A4.5 4.5 0 0 1 16 16H8.999L9 17h8v-1a5.578 5.578 0 0 0-.886-3H19a5 5 0 0 1 4.516 2.851C21.151 18.972 17.322 21 13 21c-2.761 0-5.1-.59-7-1.625L6 10.071A6.967 6.967 0 0 1 9.33 11.5zM5 19a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v9zM18 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm-7-3a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"
|
||||
/></svg
|
||||
>
|
||||
</StatCard>
|
||||
<StatCard
|
||||
title={$_("total-donation-count")}
|
||||
value={stats.total_donations}
|
||||
href="/donations/"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24"
|
||||
><path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z"
|
||||
/></svg
|
||||
>
|
||||
</StatCard>
|
||||
<StatCard
|
||||
title={$_("average-donation")}
|
||||
value={`${(stats.average_donation / 100).toFixed(2)} €`}
|
||||
href="/donations/"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24"
|
||||
><path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z"
|
||||
/></svg
|
||||
>
|
||||
</StatCard>
|
||||
<StatCard
|
||||
@@ -105,6 +156,22 @@
|
||||
/></svg
|
||||
>
|
||||
</StatCard>
|
||||
<StatCard
|
||||
title={$_("average-distance")}
|
||||
value={`${(stats.average_distance / 1000).toFixed(2)} km`}
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="24"
|
||||
width="24"
|
||||
><path d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z"
|
||||
/></svg
|
||||
>
|
||||
</StatCard>
|
||||
<StatCard
|
||||
title={$_("count_teams")}
|
||||
value={stats.total_teams}
|
||||
|
||||
@@ -5,18 +5,16 @@
|
||||
import Toastify from "toastify-js";
|
||||
import DonationsEmptyState from "./DonationsEmptyState.svelte";
|
||||
import AddDonationPaymentModal from "./AddDonationPaymentModal.svelte";
|
||||
import { onMount } from "svelte";
|
||||
$: searchvalue = "";
|
||||
$: active_deletes = [];
|
||||
$: dataLoaded = false;
|
||||
export let current_donations = [];
|
||||
export let payment_modal_open = false;
|
||||
export let editable = {};
|
||||
export let original_data = {};
|
||||
export let paid_amount_input = 0;
|
||||
const donations_promise = DonationService.donationControllerGetAll().then(
|
||||
(val) => {
|
||||
current_donations = val;
|
||||
}
|
||||
);
|
||||
|
||||
function should_display_based_on_id(id) {
|
||||
if (searchvalue.toString().slice(-1) === "*") {
|
||||
return id.toString().startsWith(searchvalue.replace("*", ""));
|
||||
@@ -26,210 +24,250 @@
|
||||
function open_payment_modal(donation) {
|
||||
editable = Object.assign({}, donation);
|
||||
original_data = Object.assign({}, donation);
|
||||
paid_amount_input = (donation.paidAmount/100).toFixed(2);
|
||||
paid_amount_input = (donation.paidAmount / 100).toFixed(2);
|
||||
payment_modal_open = true;
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
let page = 0;
|
||||
while (page >= 0) {
|
||||
const donations = await DonationService.donationControllerGetAll(
|
||||
page,
|
||||
500
|
||||
);
|
||||
if (donations.length == 0) {
|
||||
page = -2;
|
||||
}
|
||||
|
||||
current_donations = current_donations.concat(...donations);
|
||||
|
||||
dataLoaded = true;
|
||||
page++;
|
||||
}
|
||||
console.log("All donations loaded");
|
||||
});
|
||||
</script>
|
||||
|
||||
<AddDonationPaymentModal bind:current_donations bind:original_data bind:editable bind:paid_amount_input bind:payment_modal_open />
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:GET')}
|
||||
{#await donations_promise}
|
||||
<AddDonationPaymentModal
|
||||
bind:current_donations
|
||||
bind:original_data
|
||||
bind:editable
|
||||
bind:paid_amount_input
|
||||
bind:payment_modal_open
|
||||
/>
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:GET")}
|
||||
{#if !dataLoaded}
|
||||
<div
|
||||
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">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>
|
||||
{:then}
|
||||
{#if current_donations.length === 0}
|
||||
<DonationsEmptyState />
|
||||
{:else}
|
||||
<input
|
||||
type="search"
|
||||
bind:value={searchvalue}
|
||||
placeholder={$_('datatable.search')}
|
||||
aria-label={$_('datatable.search')}
|
||||
class="mb-4" />
|
||||
<div
|
||||
class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
|
||||
<table class="divide-y divide-gray-200 w-full">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('donor')}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('runner')}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('amount-per-kilometer')}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('donation-amount')}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('paid-amount')}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('status')}
|
||||
</th>
|
||||
<th scope="col" class="relative px-6 py-3">
|
||||
<span class="sr-only">{$_('action')}</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
{#each current_donations as donation}
|
||||
{#if donation.donor.firstname
|
||||
{:else if current_donations.length === 0}
|
||||
<DonationsEmptyState />
|
||||
{:else}
|
||||
<input
|
||||
type="search"
|
||||
bind:value={searchvalue}
|
||||
placeholder={$_("datatable.search")}
|
||||
aria-label={$_("datatable.search")}
|
||||
class="mb-4"
|
||||
/>
|
||||
<div
|
||||
class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
|
||||
>
|
||||
<table class="divide-y divide-gray-200 w-full">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
{$_("donor")}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
{$_("runner")}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
{$_("amount-per-kilometer")}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
{$_("donation-amount")}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
{$_("paid-amount")}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
{$_("status")}
|
||||
</th>
|
||||
<th scope="col" class="relative px-6 py-3">
|
||||
<span class="sr-only">{$_("action")}</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
{#each current_donations as donation}
|
||||
{#if donation.donor.firstname
|
||||
.toLowerCase()
|
||||
.includes(searchvalue.toLowerCase()) || donation.donor.lastname
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
searchvalue.toLowerCase()
|
||||
) || donation.donor.lastname
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
searchvalue.toLowerCase()
|
||||
) || donation.runner?.firstname
|
||||
.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">
|
||||
<div class="flex items-center">
|
||||
.includes(searchvalue.toLowerCase()) || donation.runner?.firstname
|
||||
.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">
|
||||
<div class="flex items-center">
|
||||
<a
|
||||
href="../donors/{donation.donor.id}"
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
|
||||
>{donation.donor.firstname}
|
||||
{donation.donor.middlename || ""}
|
||||
{donation.donor.lastname}</a
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
{#if donation.runner}
|
||||
<div class="text-sm font-medium text-gray-900">
|
||||
<a
|
||||
href="../donors/{donation.donor.id}"
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{donation.donor.firstname}
|
||||
{donation.donor.middlename || ''}
|
||||
{donation.donor.lastname}</a>
|
||||
href="../runners/{donation.runner.id}"
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
|
||||
>{donation.runner.firstname}
|
||||
{donation.runner.middlename || ""}
|
||||
{donation.runner.lastname}</a
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
{#if donation.runner}
|
||||
<div class="text-sm font-medium text-gray-900">
|
||||
<a
|
||||
href="../runners/{donation.runner.id}"
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{donation.runner.firstname}
|
||||
{donation.runner.middlename || ''}
|
||||
{donation.runner.lastname}</a>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="text-sm font-medium text-gray-900">
|
||||
{$_('fixed-donation')}
|
||||
</div>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
{#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 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>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="text-sm font-medium text-gray-900">
|
||||
{(donation.paidAmount / 100)
|
||||
.toFixed(2)
|
||||
.toLocaleString('de-DE', { valute: 'EUR' })}€
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
{#if donation.status =="PAID"}
|
||||
<span
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">{$_('paid')}</span>
|
||||
{:else}
|
||||
<span
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">{$_('open')}</span>
|
||||
{/if}
|
||||
</td>
|
||||
{#if active_deletes[donation.id] === true}
|
||||
<td
|
||||
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<button
|
||||
on:click={() => {
|
||||
active_deletes[donation.id] = false;
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
DonationService.donationControllerRemove(donation.id, false).then(
|
||||
(resp) => {
|
||||
current_donations = current_donations.filter(
|
||||
(obj) => obj.id !== donation.id
|
||||
);
|
||||
Toastify({
|
||||
text: $_('donation-deleted'),
|
||||
duration: 500,
|
||||
backgroundColor:
|
||||
'linear-gradient(to right, #00b09b, #96c93d)',
|
||||
}).showToast();
|
||||
}
|
||||
);
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
|
||||
</td>
|
||||
{:else}
|
||||
<td
|
||||
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<button
|
||||
on:click={() => {open_payment_modal(donation);}}
|
||||
class="text-[#025a21] hover:text-green-900 mr-4">{$_('enter-payment')}</button>
|
||||
<a
|
||||
href="./{donation.id}"
|
||||
class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:DELETE')}
|
||||
<button
|
||||
on:click={() => {
|
||||
active_deletes[donation.id] = true;
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
|
||||
{/if}
|
||||
</td>
|
||||
<div class="text-sm font-medium text-gray-900">
|
||||
{$_("fixed-donation")}
|
||||
</div>
|
||||
{/if}
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
{:catch error}
|
||||
<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
|
||||
<span class="inline-block align-middle mr-8">
|
||||
<b class="capitalize">{$_('general_promise_error')}</b>
|
||||
{error}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
{#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 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>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="text-sm font-medium text-gray-900">
|
||||
{(donation.paidAmount / 100)
|
||||
.toFixed(2)
|
||||
.toLocaleString("de-DE", { valute: "EUR" })}€
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
{#if donation.status == "PAID"}
|
||||
<span
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
|
||||
>{$_("paid")}</span
|
||||
>
|
||||
{:else}
|
||||
<span
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
|
||||
>{$_("open")}</span
|
||||
>
|
||||
{/if}
|
||||
</td>
|
||||
{#if active_deletes[donation.id] === true}
|
||||
<td
|
||||
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
|
||||
>
|
||||
<button
|
||||
on:click={() => {
|
||||
active_deletes[donation.id] = false;
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
|
||||
>{$_("cancel-delete")}</button
|
||||
>
|
||||
<button
|
||||
on:click={() => {
|
||||
DonationService.donationControllerRemove(
|
||||
donation.id,
|
||||
false
|
||||
).then((resp) => {
|
||||
current_donations = current_donations.filter(
|
||||
(obj) => obj.id !== donation.id
|
||||
);
|
||||
Toastify({
|
||||
text: $_("donation-deleted"),
|
||||
duration: 500,
|
||||
backgroundColor:
|
||||
"linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
});
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
|
||||
>{$_("confirm-delete")}</button
|
||||
>
|
||||
</td>
|
||||
{:else}
|
||||
<td
|
||||
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
|
||||
>
|
||||
<button
|
||||
on:click={() => {
|
||||
open_payment_modal(donation);
|
||||
}}
|
||||
class="text-[#025a21] hover:text-green-900 mr-4"
|
||||
>{$_("enter-payment")}</button
|
||||
>
|
||||
<a
|
||||
href="./{donation.id}"
|
||||
class="text-indigo-600 hover:text-indigo-900"
|
||||
>{$_("details")}</a
|
||||
>
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:DELETE")}
|
||||
<button
|
||||
on:click={() => {
|
||||
active_deletes[donation.id] = true;
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
|
||||
>{$_("delete")}</button
|
||||
>
|
||||
{/if}
|
||||
</td>
|
||||
{/if}
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/await}
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
@@ -1,15 +1,13 @@
|
||||
<script>
|
||||
import { _ } from "svelte-i18n";
|
||||
import { clickOutside } from "../base/outsideclick";
|
||||
|
||||
import {
|
||||
DonorService
|
||||
} from "@odit/lfk-client-js";
|
||||
|
||||
import { DonorService } from "@odit/lfk-client-js";
|
||||
import isEmail from "validator/es/lib/isEmail";
|
||||
import isMobilePhone from "validator/es/lib/isMobilePhone";
|
||||
import Toastify from "toastify-js";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
export let modal_open;
|
||||
export let current_donors;
|
||||
let firstname_input;
|
||||
let lastname_input;
|
||||
let middlename_input;
|
||||
@@ -19,6 +17,7 @@
|
||||
let address_input2;
|
||||
let address_zipcode;
|
||||
let address_city;
|
||||
const dispatch = createEventDispatcher();
|
||||
function focus(el) {
|
||||
el.focus();
|
||||
}
|
||||
@@ -75,7 +74,7 @@
|
||||
if (processed_last_submit === true) {
|
||||
processed_last_submit = false;
|
||||
const toast = Toastify({
|
||||
text: $_('donor-is-being-added'),
|
||||
text: $_("donor-is-being-added"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
let address = {};
|
||||
@@ -92,7 +91,7 @@
|
||||
firstname: firstname_input_value,
|
||||
lastname: lastname_input_value,
|
||||
address,
|
||||
receiptNeeded: address_checked
|
||||
receiptNeeded: address_checked,
|
||||
};
|
||||
if (middlename_input_value) {
|
||||
postdata.middlename = middlename_input_value;
|
||||
@@ -112,12 +111,11 @@
|
||||
modal_open = false;
|
||||
//
|
||||
Toastify({
|
||||
text: $_('donor-added'),
|
||||
text: $_("donor-added"),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
current_donors.push(result);
|
||||
current_donors = current_donors;
|
||||
dispatch("created", { donors: [result] });
|
||||
})
|
||||
.catch((err) => {
|
||||
//
|
||||
@@ -134,58 +132,70 @@
|
||||
{#if modal_open}
|
||||
<div
|
||||
class="fixed z-10 inset-0 overflow-y-auto"
|
||||
|
||||
use:clickOutside
|
||||
on:click_outside={() => {
|
||||
modal_open = false;
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<div
|
||||
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
|
||||
>
|
||||
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
||||
<div
|
||||
class="absolute inset-0 bg-gray-500 opacity-75"
|
||||
data-id="modal_backdrop" />
|
||||
data-id="modal_backdrop"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||
aria-hidden="true">​</span>
|
||||
aria-hidden="true">​</span
|
||||
>
|
||||
<div
|
||||
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="modal-headline">
|
||||
aria-labelledby="modal-headline"
|
||||
>
|
||||
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<div class="sm:flex sm:items-start">
|
||||
<div
|
||||
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
|
||||
>
|
||||
<svg
|
||||
class="h-6 w-6 text-blue-600"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||
height="24"
|
||||
><path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
d="M9.33 11.5h2.17A4.5 4.5 0 0 1 16 16H8.999L9 17h8v-1a5.578 5.578 0 0 0-.886-3H19a5 5 0 0 1 4.516 2.851C21.151 18.972 17.322 21 13 21c-2.761 0-5.1-.59-7-1.625L6 10.071A6.967 6.967 0 0 1 9.33 11.5zM5 19a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v9zM18 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm-7-3a3 3 0 1 1 0 6 3 3 0 0 1 0-6z" /></svg>
|
||||
d="M9.33 11.5h2.17A4.5 4.5 0 0 1 16 16H8.999L9 17h8v-1a5.578 5.578 0 0 0-.886-3H19a5 5 0 0 1 4.516 2.851C21.151 18.972 17.322 21 13 21c-2.761 0-5.1-.59-7-1.625L6 10.071A6.967 6.967 0 0 1 9.33 11.5zM5 19a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v9zM18 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm-7-3a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"
|
||||
/></svg
|
||||
>
|
||||
</div>
|
||||
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||
{$_('create-a-new-donor')}
|
||||
{$_("create-a-new-donor")}
|
||||
</h3>
|
||||
<div class="mt-2 mb-6">
|
||||
<p class="text-sm text-gray-500">
|
||||
{$_('please-provide-the-nessecary-information-to-add-a-new-donor')}
|
||||
{$_(
|
||||
"please-provide-the-nessecary-information-to-add-a-new-donor"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-6 gap-6">
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="firstname"
|
||||
class="block text-sm font-medium text-gray-700">{$_('first-name')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("first-name")}</label
|
||||
>
|
||||
<input
|
||||
use:focus
|
||||
autocomplete="off"
|
||||
placeholder={$_('first-name')}
|
||||
placeholder={$_("first-name")}
|
||||
class:border-red-500={!isFirstnameValid}
|
||||
class:focus:border-red-500={!isFirstnameValid}
|
||||
class:focus:ring-red-500={!isFirstnameValid}
|
||||
@@ -193,34 +203,41 @@
|
||||
bind:this={firstname_input}
|
||||
type="text"
|
||||
name="firstname"
|
||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
||||
/>
|
||||
{#if !isFirstnameValid}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('first-name-is-required')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("first-name-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="trackname"
|
||||
class="block text-sm font-medium text-gray-700">{$_('middle-name')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("middle-name")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('middle-name')}
|
||||
placeholder={$_("middle-name")}
|
||||
bind:value={middlename_input_value}
|
||||
bind:this={middlename_input}
|
||||
type="text"
|
||||
name="trackname"
|
||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="lastname"
|
||||
class="block text-sm font-medium text-gray-700">{$_('last-name')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("last-name")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder="{$_('last-name')}"
|
||||
placeholder={$_("last-name")}
|
||||
class:border-red-500={!isLastnameValid}
|
||||
class:focus:border-red-500={!isLastnameValid}
|
||||
class:focus:ring-red-500={!isLastnameValid}
|
||||
@@ -228,21 +245,25 @@
|
||||
bind:this={lastname_input}
|
||||
type="text"
|
||||
name="lastname"
|
||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
||||
/>
|
||||
{#if !isLastnameValid}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('last-name-is-required')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("last-name-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="phone"
|
||||
class="block text-sm font-medium text-gray-700">{$_('phone')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("phone")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('phone')}
|
||||
placeholder={$_("phone")}
|
||||
class:border-red-500={!isPhoneValidOrEmpty}
|
||||
class:focus:border-red-500={!isPhoneValidOrEmpty}
|
||||
class:focus:ring-red-500={!isPhoneValidOrEmpty}
|
||||
@@ -250,21 +271,27 @@
|
||||
bind:this={phone_input}
|
||||
type="tel"
|
||||
name="phone"
|
||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
||||
/>
|
||||
{#if !isPhoneValidOrEmpty}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{@html $_('the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{@html $_(
|
||||
"the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number"
|
||||
)}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="email"
|
||||
class="block text-sm font-medium text-gray-700">{$_('e-mail-adress')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("e-mail-adress")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('e-mail-adress')}
|
||||
placeholder={$_("e-mail-adress")}
|
||||
class:border-red-500={!isEmailValidOrEmpty}
|
||||
class:focus:border-red-500={!isEmailValidOrEmpty}
|
||||
class:focus:ring-red-500={!isEmailValidOrEmpty}
|
||||
@@ -272,11 +299,13 @@
|
||||
bind:this={email_input}
|
||||
type="email"
|
||||
name="email"
|
||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
||||
/>
|
||||
{#if !isEmailValidOrEmpty}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('valid-email-is-required')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("valid-email-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -287,19 +316,22 @@
|
||||
id="comments"
|
||||
name="comments"
|
||||
type="checkbox"
|
||||
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
|
||||
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-3 text-sm">
|
||||
<label
|
||||
for="comments"
|
||||
class="font-medium text-gray-700">{$_('receipt-needed')}</label>
|
||||
<label for="comments" class="font-medium text-gray-700"
|
||||
>{$_("receipt-needed")}</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{#if address_checked === true}
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="address1"
|
||||
class="block text-sm font-medium text-gray-700">{$_('address')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("address")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder="Address"
|
||||
@@ -310,34 +342,41 @@
|
||||
bind:this={address_input1}
|
||||
type="text"
|
||||
name="address1"
|
||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
||||
/>
|
||||
{#if !isAddress1Valid}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('address-is-required')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("address-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="address2"
|
||||
class="block text-sm font-medium text-gray-700">{$_('apartment-suite-etc')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("apartment-suite-etc")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('apartment-suite-etc')}
|
||||
placeholder={$_("apartment-suite-etc")}
|
||||
bind:value={address_input2_value}
|
||||
bind:this={address_input2}
|
||||
type="text"
|
||||
name="address2"
|
||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="zipcode"
|
||||
class="block text-sm font-medium text-gray-700">{$_('zip-postal-code')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("zip-postal-code")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('zip-postal-code')}
|
||||
placeholder={$_("zip-postal-code")}
|
||||
class:border-red-500={!iszipcodevalid}
|
||||
class:focus:border-red-500={!iszipcodevalid}
|
||||
class:focus:ring-red-500={!iszipcodevalid}
|
||||
@@ -345,18 +384,22 @@
|
||||
bind:this={address_zipcode}
|
||||
type="text"
|
||||
name="zipcode"
|
||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
||||
/>
|
||||
{#if !iszipcodevalid}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('valid-zipcode-postal-code-is-required')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("valid-zipcode-postal-code-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="city"
|
||||
class="block text-sm font-medium text-gray-700">City</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>City</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder="City"
|
||||
@@ -367,11 +410,13 @@
|
||||
bind:this={address_city}
|
||||
type="text"
|
||||
name="city"
|
||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
||||
/>
|
||||
{#if !iscityvalid}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('valid-city-is-required')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("valid-city-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -386,16 +431,18 @@
|
||||
class:opacity-50={!createbtnenabled}
|
||||
on:click={submit}
|
||||
type="button"
|
||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
|
||||
{$_('create')}
|
||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
|
||||
>
|
||||
{$_("create")}
|
||||
</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
modal_open = false;
|
||||
}}
|
||||
type="button"
|
||||
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
|
||||
{$_('cancel')}
|
||||
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
|
||||
>
|
||||
{$_("cancel")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script>
|
||||
import { _ } from "svelte-i18n";
|
||||
import { clickOutside } from "../base/outsideclick";
|
||||
|
||||
|
||||
import { DonorService } from "@odit/lfk-client-js";
|
||||
import Toastify from "toastify-js";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
@@ -13,60 +13,61 @@
|
||||
dispatch("cancelDelete", { id: delete_donor.id });
|
||||
}
|
||||
function deleteDonor() {
|
||||
DonorService.donorControllerRemove(
|
||||
delete_donor.id,
|
||||
true
|
||||
)
|
||||
.then((resp) => {
|
||||
Toastify({
|
||||
text: $_('donor-deleted'),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
location.replace("./");
|
||||
})
|
||||
.catch((err) => {});
|
||||
dispatch("delete", { id: delete_donor.id });
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if modal_open}
|
||||
<div
|
||||
class="fixed z-10 inset-0 overflow-y-auto"
|
||||
|
||||
use:clickOutside
|
||||
on:click_outside={cancelDelete}>
|
||||
on:click_outside={cancelDelete}
|
||||
>
|
||||
<div
|
||||
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
|
||||
>
|
||||
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
||||
<div
|
||||
class="absolute inset-0 bg-gray-500 opacity-75"
|
||||
data-id="modal_backdrop" />
|
||||
data-id="modal_backdrop"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||
aria-hidden="true">​</span>
|
||||
aria-hidden="true">​</span
|
||||
>
|
||||
<div
|
||||
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="modal-headline">
|
||||
aria-labelledby="modal-headline"
|
||||
>
|
||||
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<div class="sm:flex sm:items-start">
|
||||
<div
|
||||
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||
<svg class="h-6 w-6 text-blue-600" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M9.33 11.5h2.17A4.5 4.5 0 0116 16H9v1h8v-1a5.58 5.58 0 00-.89-3H19a5 5 0 014.52 2.85A13.15 13.15 0 0113 21c-2.76 0-5.1-.59-7-1.63v-9.3a6.97 6.97 0 013.33 1.43zM5 19a1 1 0 01-1 1H2a1 1 0 01-1-1v-9a1 1 0 011-1h2a1 1 0 011 1v9zM18 5a3 3 0 110 6 3 3 0 010-6zm-7-3a3 3 0 110 6 3 3 0 010-6z"/></svg>
|
||||
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
|
||||
>
|
||||
<svg
|
||||
class="h-6 w-6 text-blue-600"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path fill="none" d="M0 0h24v24H0z" /><path
|
||||
d="M9.33 11.5h2.17A4.5 4.5 0 0116 16H9v1h8v-1a5.58 5.58 0 00-.89-3H19a5 5 0 014.52 2.85A13.15 13.15 0 0113 21c-2.76 0-5.1-.59-7-1.63v-9.3a6.97 6.97 0 013.33 1.43zM5 19a1 1 0 01-1 1H2a1 1 0 01-1-1v-9a1 1 0 011-1h2a1 1 0 011 1v9zM18 5a3 3 0 110 6 3 3 0 010-6zm-7-3a3 3 0 110 6 3 3 0 010-6z"
|
||||
/></svg
|
||||
>
|
||||
</div>
|
||||
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||
{$_('attention')}
|
||||
{$_("attention")}
|
||||
</h3>
|
||||
<div class="mt-2 mb-6">
|
||||
<p class="text-sm text-gray-500">
|
||||
{$_(
|
||||
'do-you-want-to-delete-this-donor-with-all-related-donations'
|
||||
"do-you-want-to-delete-this-donor-with-all-related-donations"
|
||||
)}
|
||||
<br />
|
||||
{$_('all-associated-donations-will-get-deleted-as-well')}
|
||||
<br />
|
||||
{$_("all-associated-donations-will-get-deleted-as-well")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -76,14 +77,16 @@
|
||||
<button
|
||||
on:click={deleteDonor}
|
||||
type="button"
|
||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
|
||||
{$_('confirm-delete-donor-with-all-donations')}
|
||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
|
||||
>
|
||||
{$_("confirm-delete-donor-with-all-donations")}
|
||||
</button>
|
||||
<button
|
||||
on:click={cancelDelete}
|
||||
type="button"
|
||||
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
|
||||
{$_('cancel-keep-donor')}
|
||||
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
|
||||
>
|
||||
{$_("cancel-keep-donor")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
14
src/components/donors/DonorAddress.svelte
Normal file
14
src/components/donors/DonorAddress.svelte
Normal file
@@ -0,0 +1,14 @@
|
||||
<script>
|
||||
import { _ } from "svelte-i18n";
|
||||
export let address;
|
||||
</script>
|
||||
|
||||
{#if !address || !address.address1}
|
||||
{$_("no-address")}
|
||||
{:else}
|
||||
{address.address1}<br />
|
||||
<!-- {address.address2 || ''}<br /> -->
|
||||
{address.postalcode}
|
||||
{address.city}
|
||||
{address.country}
|
||||
{/if}
|
||||
29
src/components/donors/DonorDonations.svelte
Normal file
29
src/components/donors/DonorDonations.svelte
Normal file
@@ -0,0 +1,29 @@
|
||||
<script>
|
||||
import { _ } from "svelte-i18n";
|
||||
export let donations;
|
||||
</script>
|
||||
|
||||
{#if !donations || donations.length == 0}
|
||||
{$_('donor-has-no-associated-donations')}
|
||||
{:else}
|
||||
{#each donations as donation}
|
||||
{#if donation.responseType === "DISTANCEDONATION"}
|
||||
<a
|
||||
href="../donations/{donation.id}"
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-600 text-white mr-1"
|
||||
>{donation.runner.firstname}
|
||||
{donation.runner.middlename || ""}
|
||||
{donation.runner.lastname}</a
|
||||
>
|
||||
{:else}
|
||||
<a
|
||||
href="../donations/{d.id}"
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-700 text-white mr-1"
|
||||
>{$_("fixed-donation")}:
|
||||
{(d.amount / 100)
|
||||
.toFixed(2)
|
||||
.toLocaleString("de-DE", { valute: "EUR" })}€</a
|
||||
>
|
||||
{/if}
|
||||
{/each}
|
||||
{/if}
|
||||
@@ -5,50 +5,73 @@
|
||||
import DonorsOverview from "./DonorsOverview.svelte";
|
||||
$: current_donors = [];
|
||||
export let modal_open = false;
|
||||
let addDonors;
|
||||
</script>
|
||||
|
||||
<section class="container p-5">
|
||||
<span class="mb-1 text-3xl font-extrabold leading-tight">
|
||||
{$_('donors')}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:CREATE')}
|
||||
{$_("donors")}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:CREATE")}
|
||||
<button
|
||||
on:click={() => {
|
||||
modal_open = true;
|
||||
}}
|
||||
type="button"
|
||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
|
||||
{$_('add-donor')}
|
||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
|
||||
>
|
||||
{$_("add-donor")}
|
||||
</button>
|
||||
{/if}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:GET')}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:GET")}
|
||||
<button
|
||||
on:click={() => {
|
||||
const data = (current_donors.filter(d=>d.receiptNeeded===true)).map(function (d) {
|
||||
d.address.address2=d.address.address2===""?"":" "+d.address.address2;
|
||||
const address=`${d.address.address1}${d.address.address2}, ${d.address.postalcode} ${d.address.city}, ${d.address.country}`;
|
||||
return [d.firstname,d.middlename,d.lastname,d.paidDonationAmount,address];
|
||||
})
|
||||
let csv = `${$_('csv_import__firstname')};${$_('csv_import__middlename')};${$_('csv_import__lastname')};${$_('total_donation_amount_in_eur')};${$_('address')}\n`;
|
||||
data.forEach(function(row) {
|
||||
csv += row.join(';');
|
||||
const data = current_donors
|
||||
.filter((d) => d.receiptNeeded === true)
|
||||
.map(function (d) {
|
||||
d.address.address2 =
|
||||
d.address.address2 === "" ? "" : " " + d.address.address2;
|
||||
const address = `${d.address.address1}${d.address.address2}, ${d.address.postalcode} ${d.address.city}, ${d.address.country}`;
|
||||
return [
|
||||
d.firstname,
|
||||
d.middlename,
|
||||
d.lastname,
|
||||
d.paidDonationAmount,
|
||||
address,
|
||||
];
|
||||
});
|
||||
let csv = `${$_("csv_import__firstname")};${$_(
|
||||
"csv_import__middlename"
|
||||
)};${$_("csv_import__lastname")};${$_(
|
||||
"total_donation_amount_in_eur"
|
||||
)};${$_("address")}\n`;
|
||||
data.forEach(function (row) {
|
||||
csv += row.join(";");
|
||||
csv += "\n";
|
||||
});
|
||||
let hiddenElement = document.createElement('a');
|
||||
hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
|
||||
hiddenElement.target = '_blank';
|
||||
hiddenElement.download = `${$_('filename_sponsoringquittungsliste')}.csv`;
|
||||
hiddenElement.click();
|
||||
hiddenElement.remove();
|
||||
});
|
||||
let hiddenElement = document.createElement("a");
|
||||
hiddenElement.href = "data:text/csv;charset=utf-8," + encodeURI(csv);
|
||||
hiddenElement.target = "_blank";
|
||||
hiddenElement.download = `${$_(
|
||||
"filename_sponsoringquittungsliste"
|
||||
)}.csv`;
|
||||
hiddenElement.click();
|
||||
hiddenElement.remove();
|
||||
}}
|
||||
type="button"
|
||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
|
||||
{$_('sponsoring-quittungs-liste_herunterladen')}
|
||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
|
||||
>
|
||||
{$_("sponsoring-quittungs-liste_herunterladen")}
|
||||
</button>
|
||||
{/if}
|
||||
</span>
|
||||
<DonorsOverview bind:current_donors />
|
||||
<DonorsOverview bind:current_donors bind:addDonors />
|
||||
</section>
|
||||
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:CREATE')}
|
||||
<AddDonorModal bind:current_donors bind:modal_open />
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:CREATE")}
|
||||
<AddDonorModal
|
||||
on:created={(event) => {
|
||||
addDonors(event.detail.donors);
|
||||
}}
|
||||
bind:modal_open
|
||||
/>
|
||||
{/if}
|
||||
|
||||
@@ -5,214 +5,262 @@
|
||||
import DonorsEmptyState from "./DonorsEmptyState.svelte";
|
||||
import ConfirmDonorDeletion from "./ConfirmDonorDeletion.svelte";
|
||||
import Toastify from "toastify-js";
|
||||
import TableBottom from "../shared/TableBottom.svelte";
|
||||
import {
|
||||
createSvelteTable,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
getFilteredRowModel,
|
||||
getPaginationRowModel,
|
||||
getSortedRowModel,
|
||||
renderComponent,
|
||||
} from "@tanstack/svelte-table";
|
||||
import { writable } from "svelte/store";
|
||||
import { onMount } from "svelte";
|
||||
import InputElement from "../shared/InputElement.svelte";
|
||||
import TableHeader from "../shared/TableHeader.svelte";
|
||||
import TableActions from "../shared/TableActions.svelte";
|
||||
import DonorAddress from "./DonorAddress.svelte";
|
||||
import DonorDonations from "./DonorDonations.svelte";
|
||||
$: searchvalue = "";
|
||||
$: active_deletes = [];
|
||||
$: current_donations = [];
|
||||
$: selectedDonors =
|
||||
$table?.getSelectedRowModel().rows.map((row) => row.original) || [];
|
||||
$: selected =
|
||||
$table?.getSelectedRowModel().rows.map((row) => row.index) || [];
|
||||
|
||||
$: dataLoaded = false;
|
||||
|
||||
let modal_open = false;
|
||||
let delete_donor = {};
|
||||
export let current_donors = [];
|
||||
const donors_promise = DonorService.donorControllerGetAll().then((val) => {
|
||||
current_donors = val;
|
||||
export const addDonors = (donors) => {
|
||||
current_donors = current_donors.concat(...donors);
|
||||
options.update((options) => ({
|
||||
...options,
|
||||
data: current_donors,
|
||||
}));
|
||||
};
|
||||
|
||||
//Section table
|
||||
const columns = [
|
||||
{
|
||||
accessorKey: "id",
|
||||
header: () => "id",
|
||||
filterFn: `equalsString`,
|
||||
},
|
||||
{
|
||||
accessorKey: "name",
|
||||
header: () => $_("name"),
|
||||
cell: (info) => {
|
||||
const d = info.row.original;
|
||||
if (d.middlename) {
|
||||
return `${d.firstname} ${d.middlename} ${d.lastname}`;
|
||||
} else {
|
||||
return `${d.firstname} ${d.lastname}`;
|
||||
}
|
||||
},
|
||||
filterFn: `includesString`,
|
||||
},
|
||||
{
|
||||
accessorKey: "address",
|
||||
header: () => $_("contact-information"),
|
||||
cell: (info) => {
|
||||
return renderComponent(DonorAddress, { address: info.getValue() });
|
||||
},
|
||||
filterFn: `includesString`,
|
||||
},
|
||||
{
|
||||
accessorKey: "sponsorings",
|
||||
header: () => $_("sponsorings"),
|
||||
cell: (info) => {
|
||||
const donations = current_donations.filter(
|
||||
(d) => d?.donor?.id == info.row.original.id
|
||||
);
|
||||
return renderComponent(DonorDonations, { donations });
|
||||
},
|
||||
enableColumnFilter: false,
|
||||
},
|
||||
{
|
||||
accessorKey: "donationAmount",
|
||||
header: () => $_("total-donation-amount"),
|
||||
cell: (info) => {
|
||||
return `${(info.getValue() / 100)
|
||||
.toFixed(2)
|
||||
.toLocaleString("de-DE", { valute: "EUR" })}€`;
|
||||
},
|
||||
enableColumnFilter: false,
|
||||
},
|
||||
{
|
||||
accessorKey: "paidDonationAmount",
|
||||
header: () => $_("total-paid-amount"),
|
||||
cell: (info) => {
|
||||
return `${(info.getValue() / 100)
|
||||
.toFixed(2)
|
||||
.toLocaleString("de-DE", { valute: "EUR" })}€`;
|
||||
},
|
||||
enableColumnFilter: false,
|
||||
},
|
||||
{
|
||||
accessorKey: "actions",
|
||||
header: () => $_("action"),
|
||||
cell: (info) => {
|
||||
return renderComponent(TableActions, {
|
||||
detailsLink: `./${info.row.original.id}`,
|
||||
deleteAction: () => {
|
||||
active_deletes = current_donors.filter(
|
||||
(r) => r.id == info.row.original.id
|
||||
);
|
||||
},
|
||||
deleteEnabled:
|
||||
store.state.jwtinfo.userdetails.permissions.includes(
|
||||
"DONOR:DELETE"
|
||||
),
|
||||
});
|
||||
},
|
||||
enableColumnFilter: false,
|
||||
enableSorting: false,
|
||||
},
|
||||
];
|
||||
const options = writable({
|
||||
data: [],
|
||||
columns: columns,
|
||||
initialState: {
|
||||
pagination: {
|
||||
pageSize: 50,
|
||||
},
|
||||
},
|
||||
enableRowSelection: true,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getFilteredRowModel: getFilteredRowModel(),
|
||||
getPaginationRowModel: getPaginationRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
});
|
||||
const donation_promise = DonationService.donationControllerGetAll().then(
|
||||
(val) => {
|
||||
current_donations = val;
|
||||
}
|
||||
);
|
||||
const table = createSvelteTable(options);
|
||||
|
||||
function should_display_based_on_id(id) {
|
||||
if (searchvalue.toString().slice(-1) === "*") {
|
||||
return id.toString().startsWith(searchvalue.replace("*", ""));
|
||||
}
|
||||
return id.toString() === searchvalue;
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
let page = 0;
|
||||
while (page >= 0) {
|
||||
const donors = await DonorService.donorControllerGetAll(page, 500);
|
||||
const donations = await DonationService.donationControllerGetAll(
|
||||
page,
|
||||
500
|
||||
);
|
||||
if (donors.length == 0 && donations.length == 0) {
|
||||
page = -2;
|
||||
}
|
||||
|
||||
current_donors = current_donors.concat(...donors);
|
||||
current_donations = current_donations.concat(...donors);
|
||||
options.update((options) => ({
|
||||
...options,
|
||||
data: current_donors,
|
||||
}));
|
||||
|
||||
dataLoaded = true;
|
||||
page++;
|
||||
}
|
||||
|
||||
console.log("All donors loaded");
|
||||
});
|
||||
</script>
|
||||
|
||||
<ConfirmDonorDeletion
|
||||
on:cancelDelete={(event) => {
|
||||
modal_open = false;
|
||||
active_deletes[event.detail.id] = false;
|
||||
active_deletes = active_deletes.filter((a) => a.id !== event.detail.id);
|
||||
}}
|
||||
bind:modal_open
|
||||
bind:delete_donor />
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:GET')}
|
||||
{#await donors_promise && donation_promise}
|
||||
on:delete={async (event) => {
|
||||
await DonorService.donorControllerRemove(event.detail.id, true);
|
||||
Toastify({
|
||||
text: $_("donor-deleted"),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
current_donors = current_donors.filter((d) => d.id !== event.detail.id);
|
||||
active_deletes = active_deletes.filter((a) => a.id !== event.detail.id);
|
||||
options.update((options) => ({
|
||||
...options,
|
||||
data: current_donors,
|
||||
}));
|
||||
}}
|
||||
modal_open={active_deletes.length > 0}
|
||||
delete_donor={active_deletes[0]}
|
||||
/>
|
||||
{active_deletes.length}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:GET")}
|
||||
{#if !dataLoaded}
|
||||
<div
|
||||
class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
|
||||
role="alert">
|
||||
<p class="font-bold">{$_('donors-are-being-loaded')}</p>
|
||||
<p class="text-sm">{$_('this-might-take-a-moment')}</p>
|
||||
role="alert"
|
||||
>
|
||||
<p class="font-bold">{$_("donors-are-being-loaded")}</p>
|
||||
<p class="text-sm">{$_("this-might-take-a-moment")}</p>
|
||||
</div>
|
||||
{:then}
|
||||
{#if current_donors.length === 0}
|
||||
<DonorsEmptyState />
|
||||
{:else}
|
||||
<input
|
||||
type="search"
|
||||
bind:value={searchvalue}
|
||||
placeholder={$_('datatable.search')}
|
||||
aria-label={$_('datatable.search')}
|
||||
class="mb-4" />
|
||||
<div
|
||||
class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
|
||||
<table class="divide-y divide-gray-200 w-full">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('name')}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('contact-information')}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('donations')}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('total-donation-amount')}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('total-paid-amount')}
|
||||
</th>
|
||||
<th scope="col" class="relative px-6 py-3">
|
||||
<span class="sr-only">{$_('action')}</span>
|
||||
{:else if current_donors.length === 0}
|
||||
<DonorsEmptyState />
|
||||
{:else}
|
||||
<input
|
||||
type="search"
|
||||
bind:value={searchvalue}
|
||||
placeholder={$_("datatable.search")}
|
||||
aria-label={$_("datatable.search")}
|
||||
class="mb-4"
|
||||
/>
|
||||
<div
|
||||
class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
|
||||
>
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
{#each $table.getHeaderGroups() as headerGroup}
|
||||
<tr class="select-none">
|
||||
<th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
|
||||
<InputElement
|
||||
type="checkbox"
|
||||
checked={$table.getIsAllRowsSelected()}
|
||||
indeterminate={$table.getIsSomeRowsSelected()}
|
||||
on:change={() => $table.toggleAllRowsSelected()}
|
||||
/>
|
||||
</th>
|
||||
{#each headerGroup.headers as header}
|
||||
<TableHeader {header} />
|
||||
{/each}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
{#each current_donors as donor}
|
||||
{#if donor.firstname
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
searchvalue.toLowerCase()
|
||||
) || donor.lastname
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
searchvalue.toLowerCase()
|
||||
) || should_display_based_on_id(donor.id)}
|
||||
<tr data-rowid="donor_{donor.id}">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
<div class="ml-4">
|
||||
<div class="text-sm font-medium text-gray-900">
|
||||
{donor.firstname}
|
||||
{donor.middlename || ''}
|
||||
{donor.lastname}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
{#if donor.email}
|
||||
<div class="text-sm text-gray-500">{donor.email}</div>
|
||||
{/if}
|
||||
{#if donor.phone}
|
||||
<div class="text-sm text-gray-500">{donor.phone}</div>
|
||||
{/if}
|
||||
{#if donor.address.address1 !== null}
|
||||
{donor.address.address1}<br />
|
||||
<!-- {donor.address.address2 || ''}<br /> -->
|
||||
{donor.address.postalcode}
|
||||
{donor.address.city}
|
||||
{donor.address.country}
|
||||
{/if}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
{#if current_donations.filter((d) => d.donor.id == donor.id).length > 0}
|
||||
{#each current_donations.filter((o) => o.donor.id == donor.id) as d}
|
||||
{#if d.responseType === 'DISTANCEDONATION'}
|
||||
<a
|
||||
href="../donations/{d.id}"
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-600 text-white mr-1">{d.runner.firstname}
|
||||
{d.runner.middlename || ''}
|
||||
{d.runner.lastname}</a>
|
||||
{:else}
|
||||
<a
|
||||
href="../donations/{d.id}"
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-700 text-white mr-1">{$_('fixed-donation')}:
|
||||
{(d.amount / 100)
|
||||
.toFixed(2)
|
||||
.toLocaleString('de-DE', { valute: 'EUR' })}€</a>
|
||||
{/if}
|
||||
{/each}
|
||||
{:else}{$_('donor-has-no-associated-donations')}{/if}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
{(donor.donationAmount / 100)
|
||||
.toFixed(2)
|
||||
.toLocaleString('de-DE', { valute: 'EUR' })}€
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
{(donor.paidDonationAmount / 100)
|
||||
.toFixed(2)
|
||||
.toLocaleString('de-DE', { valute: 'EUR' })}€
|
||||
</td>
|
||||
{#if active_deletes[donor.id] === true}
|
||||
<td
|
||||
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<button
|
||||
on:click={() => {
|
||||
active_deletes[donor.id] = false;
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
DonorService.donorControllerRemove(donor.id, false)
|
||||
.then((resp) => {
|
||||
current_donors = current_donors.filter((obj) => obj.id !== donor.id);
|
||||
Toastify({
|
||||
text: 'Donor deleted',
|
||||
duration: 500,
|
||||
backgroundColor:
|
||||
'linear-gradient(to right, #00b09b, #96c93d)',
|
||||
}).showToast();
|
||||
})
|
||||
.catch((err) => {
|
||||
modal_open = true;
|
||||
delete_donor = donor;
|
||||
});
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
|
||||
</td>
|
||||
{:else}
|
||||
<td
|
||||
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<a
|
||||
href="./{donor.id}"
|
||||
class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:DELETE')}
|
||||
<button
|
||||
on:click={() => {
|
||||
active_deletes[donor.id] = true;
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
|
||||
{/if}
|
||||
</td>
|
||||
{/if}
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
{:catch error}
|
||||
<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
|
||||
<span class="inline-block align-middle mr-8">
|
||||
<b class="capitalize">{$_('general_promise_error')}</b>
|
||||
{error}
|
||||
</span>
|
||||
{/each}
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each $table.getRowModel().rows as row}
|
||||
<tr>
|
||||
<td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
|
||||
<InputElement
|
||||
type="checkbox"
|
||||
checked={row.getIsSelected()}
|
||||
on:change={() => row.toggleSelected()}
|
||||
/>
|
||||
</td>
|
||||
{#each row.getVisibleCells() as cell}
|
||||
<td>
|
||||
<svelte:component
|
||||
this={flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext()
|
||||
)}
|
||||
/>
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/await}
|
||||
<div class="h-2" />
|
||||
<TableBottom {table} {selected} />
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
@@ -132,7 +132,7 @@
|
||||
<div class="text-sm font-medium text-gray-900">
|
||||
{#if o.address.address1 !== null}
|
||||
{o.address.address1}<br />
|
||||
{o.address.address2 || ''}<br />
|
||||
<!-- {o.address.address2 || ''}<br /> -->
|
||||
{o.address.postalcode}
|
||||
{o.address.city}
|
||||
{o.address.country}
|
||||
|
||||
@@ -50,7 +50,6 @@
|
||||
}));
|
||||
};
|
||||
|
||||
|
||||
//Section table
|
||||
const columns = [
|
||||
{
|
||||
@@ -157,16 +156,7 @@
|
||||
}).showToast();
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
RunnerService.runnerControllerGetAll().then((val) => {
|
||||
current_runners = val;
|
||||
dataLoaded = true;
|
||||
|
||||
options.update((options) => ({
|
||||
...options,
|
||||
data: current_runners,
|
||||
}));
|
||||
});
|
||||
onMount(async () => {
|
||||
RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
|
||||
teams = val;
|
||||
});
|
||||
@@ -175,6 +165,24 @@
|
||||
orgs = val;
|
||||
}
|
||||
);
|
||||
|
||||
let page = 0;
|
||||
while (page >= 0) {
|
||||
const runners = await RunnerService.runnerControllerGetAll(page, 1000);
|
||||
if (runners.length == 0) {
|
||||
page = -2;
|
||||
}
|
||||
|
||||
current_runners = current_runners.concat(...runners);
|
||||
options.update((options) => ({
|
||||
...options,
|
||||
data: current_runners,
|
||||
}));
|
||||
|
||||
dataLoaded = true;
|
||||
page++;
|
||||
}
|
||||
console.log("All runners loaded");
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -30,6 +30,7 @@
|
||||
$table?.getSelectedRowModel().rows.map((row) => row.index) || [];
|
||||
|
||||
$: active_delete = undefined;
|
||||
$: dataLoaded = false;
|
||||
export let current_scans = [];
|
||||
export const addScans = (scans) => {
|
||||
current_scans = current_scans.concat(...scans);
|
||||
@@ -39,15 +40,6 @@
|
||||
}));
|
||||
};
|
||||
|
||||
const scans_promise = ScanService.scanControllerGetAll().then((val) => {
|
||||
current_scans = val;
|
||||
// handler.setRows(val);
|
||||
current_scans = val;
|
||||
options.update((options) => ({
|
||||
...options,
|
||||
data: current_scans,
|
||||
}));
|
||||
});
|
||||
let allTracks = [];
|
||||
TrackService.trackControllerGetAll().then((val) => {
|
||||
allTracks = val;
|
||||
@@ -99,7 +91,7 @@
|
||||
accessorKey: "timestamp",
|
||||
header: () => $_("timestamp"),
|
||||
cell: (info) => {
|
||||
return (new Date(parseInt(info.getValue())*1000)).toLocaleString()
|
||||
return new Date(parseInt(info.getValue()) * 1000).toLocaleString();
|
||||
},
|
||||
enableColumnFilter: false,
|
||||
},
|
||||
@@ -183,6 +175,26 @@
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
let page = 0;
|
||||
while (page >= 0) {
|
||||
const scans = await ScanService.scanControllerGetAll(page, 500);
|
||||
if (scans.length == 0) {
|
||||
page = -2;
|
||||
}
|
||||
|
||||
current_scans = current_scans.concat(...scans);
|
||||
options.update((options) => ({
|
||||
...options,
|
||||
data: current_scans,
|
||||
}));
|
||||
|
||||
dataLoaded = true;
|
||||
page++;
|
||||
}
|
||||
console.log("All scans loaded");
|
||||
});
|
||||
</script>
|
||||
|
||||
<DeleteScanModal
|
||||
@@ -193,7 +205,7 @@
|
||||
}}
|
||||
/>
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:GET")}
|
||||
{#await scans_promise}
|
||||
{#if !dataLoaded}
|
||||
<div
|
||||
class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
|
||||
role="alert"
|
||||
@@ -201,105 +213,96 @@
|
||||
<p class="font-bold">{$_("scans-are-being-loaded")}</p>
|
||||
<p class="text-sm">{$_("this-might-take-a-moment")}</p>
|
||||
</div>
|
||||
{:then}
|
||||
{#if current_scans.length === 0}
|
||||
<ScansEmptyState />
|
||||
{:else}
|
||||
{#if selected.length > 0}
|
||||
<button
|
||||
type="button"
|
||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
|
||||
id="options-menu"
|
||||
on:click={async () => {
|
||||
const prom = [];
|
||||
for (const scan of selectedScans) {
|
||||
prom.push(ScanService.scanControllerRemove(scan.id, true));
|
||||
}
|
||||
await Promise.all(prom);
|
||||
for (const scan of selectedScans) {
|
||||
current_scans = current_scans.filter((r) => r.id !== scan.id);
|
||||
}
|
||||
options.update((options) => ({
|
||||
...options,
|
||||
data: current_scans,
|
||||
}));
|
||||
$table.resetRowSelection();
|
||||
Toastify({
|
||||
text: $_("scan-deleted"),
|
||||
duration: 3500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
}}
|
||||
{:else if current_scans.length === 0}
|
||||
<ScansEmptyState />
|
||||
{:else}
|
||||
{#if selected.length > 0}
|
||||
<button
|
||||
type="button"
|
||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
|
||||
id="options-menu"
|
||||
on:click={async () => {
|
||||
const prom = [];
|
||||
for (const scan of selectedScans) {
|
||||
prom.push(ScanService.scanControllerRemove(scan.id, true));
|
||||
}
|
||||
await Promise.all(prom);
|
||||
for (const scan of selectedScans) {
|
||||
current_scans = current_scans.filter((r) => r.id !== scan.id);
|
||||
}
|
||||
options.update((options) => ({
|
||||
...options,
|
||||
data: current_scans,
|
||||
}));
|
||||
$table.resetRowSelection();
|
||||
Toastify({
|
||||
text: $_("scan-deleted"),
|
||||
duration: 3500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
}}
|
||||
>
|
||||
{$_("delete-scans")}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-5 h-5"
|
||||
>
|
||||
{$_("delete-scans")}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-5 h-5"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
{/if}
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
{#each $table.getHeaderGroups() as headerGroup}
|
||||
<tr class="select-none">
|
||||
<th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
|
||||
<InputElement
|
||||
type="checkbox"
|
||||
checked={$table.getIsAllRowsSelected()}
|
||||
indeterminate={$table.getIsSomeRowsSelected()}
|
||||
on:change={() => $table.toggleAllRowsSelected()}
|
||||
/>
|
||||
</th>
|
||||
{#each headerGroup.headers as header}
|
||||
<TableHeader {header} />
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each $table.getRowModel().rows as row}
|
||||
<tr>
|
||||
<td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
|
||||
<InputElement
|
||||
type="checkbox"
|
||||
checked={row.getIsSelected()}
|
||||
on:change={() => row.toggleSelected()}
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
{/if}
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
{#each $table.getHeaderGroups() as headerGroup}
|
||||
<tr class="select-none">
|
||||
<th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
|
||||
<InputElement
|
||||
type="checkbox"
|
||||
checked={$table.getIsAllRowsSelected()}
|
||||
indeterminate={$table.getIsSomeRowsSelected()}
|
||||
on:change={() => $table.toggleAllRowsSelected()}
|
||||
/>
|
||||
</th>
|
||||
{#each headerGroup.headers as header}
|
||||
<TableHeader {header} />
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each $table.getRowModel().rows as row}
|
||||
<tr>
|
||||
<td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
|
||||
<InputElement
|
||||
type="checkbox"
|
||||
checked={row.getIsSelected()}
|
||||
on:change={() => row.toggleSelected()}
|
||||
/>
|
||||
</td>
|
||||
{#each row.getVisibleCells() as cell}
|
||||
<td>
|
||||
<svelte:component
|
||||
this={flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext()
|
||||
)}
|
||||
/>
|
||||
</td>
|
||||
{#each row.getVisibleCells() as cell}
|
||||
<td>
|
||||
<svelte:component
|
||||
this={flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext()
|
||||
)}
|
||||
/>
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<TableBottom {table} {selected} />
|
||||
{/if}
|
||||
{:catch error}
|
||||
<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
|
||||
<span class="inline-block align-middle mr-8">
|
||||
<b class="capitalize">{$_("general_promise_error")}</b>
|
||||
{error}
|
||||
</span>
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/await}
|
||||
<TableBottom {table} {selected} />
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
@@ -1,14 +1,18 @@
|
||||
<script>
|
||||
import { _ } from "svelte-i18n";
|
||||
|
||||
import Toastify from "toastify-js";
|
||||
import { tick, createEventDispatcher } from "svelte";
|
||||
import bwipjs from "bwip-js";
|
||||
|
||||
export let copy_modal_open;
|
||||
export let new_station;
|
||||
const dispatch = createEventDispatcher();
|
||||
let valueCopy = null;
|
||||
let areaDom;
|
||||
let copied = false;
|
||||
$: is_qrcode = false;
|
||||
$: barcode = textToBase64Barcode(new_station.key, is_qrcode);
|
||||
|
||||
function close() {
|
||||
copy_modal_open = false;
|
||||
}
|
||||
@@ -36,10 +40,30 @@
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
}
|
||||
|
||||
// we can notifi by event or storage about copy status
|
||||
valueCopy = null;
|
||||
}
|
||||
|
||||
function textToBase64Barcode(text, is_qrcode) {
|
||||
const canvas = document.createElement("canvas");
|
||||
let bcid = "code128";
|
||||
if (is_qrcode) {
|
||||
bcid = "qrcode";
|
||||
}
|
||||
let codeconfig = {
|
||||
bcid,
|
||||
text: `${text}`,
|
||||
scale: 4,
|
||||
includetext: true,
|
||||
textxalign: "center",
|
||||
backgroundcolor: "ffffff",
|
||||
};
|
||||
if (bcid == "code128") {
|
||||
codeconfig.height = 10;
|
||||
}
|
||||
bwipjs.toCanvas(canvas, codeconfig);
|
||||
return canvas.toDataURL("image/png");
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if copy_modal_open}
|
||||
@@ -131,6 +155,44 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-auto text-center items-center">
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">
|
||||
{$_("config-codes")}
|
||||
</h2>
|
||||
<span class="flex items-center text-center">
|
||||
<p class="text-md text-gray-900 mr-3">Format:</p>
|
||||
<label for="codeswitch" class="text-md text-gray-900 mr-3"
|
||||
>Code128</label
|
||||
>
|
||||
<input
|
||||
id="codeswitch"
|
||||
type="checkbox"
|
||||
bind:checked={is_qrcode}
|
||||
class="relative shrink-0 w-[3.25rem] h-7 bg-gray-100 checked:bg-none checked:bg-blue-600 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 border border-transparent ring-1 ring-transparent focus:border-blue-600 focus:ring-blue-600 ring-offset-white focus:outline-none appearance-none before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-gray-400 dark:checked:before:bg-blue-200"
|
||||
/>
|
||||
<label for="codeswitch" class="text-md text-gray-900 ml-3"
|
||||
>QR-Code</label
|
||||
>
|
||||
</span>
|
||||
<h3 class="leading-6 font-medium text-gray-900">
|
||||
{$_("api-endpoint")}
|
||||
</h3>
|
||||
<img
|
||||
class:w-[50%]={is_qrcode}
|
||||
class:w-full={!is_qrcode}
|
||||
class="md:w-auto mb-2 mx-auto"
|
||||
alt="Registrierungscode"
|
||||
src={textToBase64Barcode(config.baseurl, is_qrcode)}
|
||||
/>
|
||||
<h3 class="leading-6 font-medium text-gray-900">{$_("token")}</h3>
|
||||
<img
|
||||
class:w-[50%]={is_qrcode}
|
||||
class:w-full={!is_qrcode}
|
||||
class="md:w-auto mb-2 mx-auto"
|
||||
alt="Registrierungscode"
|
||||
src={barcode}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
|
||||
<button
|
||||
|
||||
@@ -39,10 +39,13 @@
|
||||
"amount": "Anzahl",
|
||||
"amount-per-kilometer": "Betrag pro Kilometer",
|
||||
"apartment-suite-etc": "Apartment, Wohnung, etc.",
|
||||
"api-endpoint": "API-Endpunkt",
|
||||
"application_name": "Lauf für Kaya! - Admin",
|
||||
"applying-changes": "Änderungen anwenden",
|
||||
"attention": "Achtung!",
|
||||
"author": "Autor:in",
|
||||
"average-distance": "Durchschnittliche Strecke/Läufer:in",
|
||||
"average-donation": "Durchschnittliches Sponsoring",
|
||||
"bitte-bestaetige-diese-laeufer-fuer-den-import": "Bitte die Läufer:innen für den Import bestätigen.",
|
||||
"by": "von",
|
||||
"cancel": "Abbrechen",
|
||||
@@ -68,6 +71,7 @@
|
||||
"click-to-copy-token-to-clipboard": "Klicke auf den Token, um ihn in deine Zwischenablage zu kopieren",
|
||||
"close": "Schließen",
|
||||
"code": "Code",
|
||||
"config-codes": "Konfigurations-Codes",
|
||||
"configure-the-tracks-and-minimum-lap-times": "Bearbeite die Tracks und ihre minimale Rundenzeit",
|
||||
"confirm": "Bestätigen",
|
||||
"confirm-delete": "Löschung Bestätigen",
|
||||
@@ -281,6 +285,7 @@
|
||||
"name": "Name",
|
||||
"name-is-required": "Der Gruppenname muss angegeben werden",
|
||||
"new-password": "Neues Passwort",
|
||||
"no-address": "Keine Adresse hinterlegt",
|
||||
"no-contact-found": "Keine Kontakte gefunden",
|
||||
"no-contact-selected": "Kein Kontakt ausgewählt",
|
||||
"no-contact-specified": "Kein Kontakt angegeben",
|
||||
@@ -432,7 +437,9 @@
|
||||
"token": "Token",
|
||||
"total-distance": "gelaufene Strecke",
|
||||
"total-donation-amount": "Gesamtbetrag",
|
||||
"total-donation-count": "Gesamte Sponsorings",
|
||||
"total-donations": "Spendensumme",
|
||||
"total-donors": "gesamte Sponsor:innen",
|
||||
"total-paid-amount": "Gezahlter Gesamtbetrag",
|
||||
"total-scans": "gesamte Scans",
|
||||
"total_donation_amount_in_eur": "Gesamtbetrag in €",
|
||||
|
||||
@@ -39,10 +39,13 @@
|
||||
"amount": "Amount",
|
||||
"amount-per-kilometer": "Amount per kilometer",
|
||||
"apartment-suite-etc": "Apartment, suite, etc.",
|
||||
"api-endpoint": "API-Endpoint",
|
||||
"application_name": "Lauf für Kaya! - Admin",
|
||||
"applying-changes": "Applying Changes",
|
||||
"attention": "Attention!",
|
||||
"author": "Author",
|
||||
"average-distance": "average distance",
|
||||
"average-donation": "average donation",
|
||||
"bitte-bestaetige-diese-laeufer-fuer-den-import": "Please confirm these runners for import.",
|
||||
"by": "by",
|
||||
"cancel": "Cancel",
|
||||
@@ -68,6 +71,7 @@
|
||||
"click-to-copy-token-to-clipboard": "Click to copy the token to your clipboard",
|
||||
"close": "Close",
|
||||
"code": "Code",
|
||||
"config-codes": "Config codes",
|
||||
"configure-the-tracks-and-minimum-lap-times": "configure the tracks & minimum lap times",
|
||||
"confirm": "Confirm",
|
||||
"confirm-delete": "Confirm Delete",
|
||||
@@ -281,6 +285,7 @@
|
||||
"name": "Name",
|
||||
"name-is-required": "Name is required",
|
||||
"new-password": "New password",
|
||||
"no-address": "no address",
|
||||
"no-contact-found": "No contacts found",
|
||||
"no-contact-selected": "No contact selected",
|
||||
"no-contact-specified": "no contact specified",
|
||||
@@ -432,7 +437,9 @@
|
||||
"token": "Token",
|
||||
"total-distance": "total distance",
|
||||
"total-donation-amount": "total donation amount",
|
||||
"total-donation-count": "total donations (count)",
|
||||
"total-donations": "total donations",
|
||||
"total-donors": "total donors",
|
||||
"total-paid-amount": "Total paid amount",
|
||||
"total-scans": "total scans",
|
||||
"total_donation_amount_in_eur": "Total donation amount in €",
|
||||
|
||||
Reference in New Issue
Block a user