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

formatting

Browse Source
This commit is contained in:
Philipp Dormann 2023-02-16 11:48:30 +01:00
parent 08047a9307
commit 24d074752f
1 changed files with 85 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
src/components/runners/RunnersOverview.svelte
View File

@ -27,12 +27,8 @@
$: sponsoring_contracts_show = current_runners.some( $: sponsoring_contracts_show = current_runners.some(
(r) => r.is_selected === true (r) => r.is_selected === true
); );
$: cards_show = current_runners.some( $: cards_show = current_runners.some((r) => r.is_selected === true);
(r) => r.is_selected === true $: certificates_show = current_runners.some((r) => r.is_selected === true);
);
$: certificates_show = current_runners.some(
(r) => r.is_selected === true
);
$: generate_runners = current_runners.filter((r) => r.is_selected === true); $: generate_runners = current_runners.filter((r) => r.is_selected === true);
$: teams = []; $: teams = [];
$: orgs = []; $: orgs = [];
@ -59,13 +55,14 @@
} }
</script> </script>
{#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:GET')} {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")}
{#await runners_promise} {#await runners_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">{$_('runners-are-being-loaded')}</p> >
<p class="text-sm">{$_('this-might-take-a-moment')}</p> <p class="font-bold">{$_("runners-are-being-loaded")}</p>
<p class="text-sm">{$_("this-might-take-a-moment")}</p>
</div> </div>
{:then} {:then}
{#if current_runners.length === 0} {#if current_runners.length === 0}
@ -74,33 +71,35 @@
<input <input
type="search" type="search"
bind:value={searchvalue} bind:value={searchvalue}
placeholder={$_('datatable.search')} placeholder={$_("datatable.search")}
aria-label={$_('datatable.search')} aria-label={$_("datatable.search")}
class="gridjs-input gridjs-search-input mb-4" /> class="gridjs-input gridjs-search-input mb-4"
/>
<div class="block mb-6"> <div class="block mb-6">
<label <label for="country" class="text-sm font-medium text-gray-700"
for="country" >{$_("filter-by-organization-team")}</label
class="text-sm font-medium text-gray-700">{$_('filter-by-organization-team')}</label> >
<Select <Select
on:select={(event) => { on:select={(event) => {
selectedFilter = event.detail; selectedFilter = event.detail;
}} }}
selectedValue={selectedFilter} selectedValue={selectedFilter}
placeholder={$_('filter-by-organization-team')} placeholder={$_("filter-by-organization-team")}
containerClasses="mt-1 py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" containerClasses="mt-1 py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
items={selectgroups} items={selectgroups}
isMulti={true} /> isMulti={true}
/>
</div> </div>
<div class="h-12"> <div class="h-12">
<GenerateSponsoringContracts <GenerateSponsoringContracts
bind:sponsoring_contracts_show bind:sponsoring_contracts_show
bind:generate_runners /> bind:generate_runners
<GenerateRunnerCards />
bind:cards_show <GenerateRunnerCards bind:cards_show bind:generate_runners />
bind:generate_runners />
<GenerateRunnerCertificates <GenerateRunnerCertificates
bind:certificates_show bind:certificates_show
bind:generate_runners /> bind:generate_runners
/>
</div> </div>
<div <div
class:hidden={!pageLoaded} class:hidden={!pageLoaded}
@ -111,42 +110,50 @@
<tr> <tr>
<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"
>
<span <span
on:click={() => { on:click={() => {
const newstate = !current_runners.some((r) => r.is_selected === true); const newstate = !current_runners.some(
(r) => r.is_selected === true
);
current_runners = current_runners.map((r) => { current_runners = current_runners.map((r) => {
r.is_selected = newstate; r.is_selected = newstate;
return r; return r;
}); });
}} }}
class="underline cursor-pointer select-none">{#if current_runners.some((r) => r.is_selected === true)} class="underline cursor-pointer select-none"
{$_('deselect-all')} >{#if current_runners.some((r) => r.is_selected === true)}
{:else}{$_('select-all')}{/if} {$_("deselect-all")}
{:else}{$_("select-all")}{/if}
</span> </span>
</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"
{$_('name')} >
{$_("name")}
</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')} >
{$_("contact-information")}
</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"
{$_('group')} >
{$_("group")}
</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"
{$_('distance-in-km')} >
{$_("distance-in-km")}
</th> </th>
<th scope="col" class="relative px-6 py-3"> <th scope="col" class="relative px-6 py-3">
<span class="sr-only">{$_('action')}</span> <span class="sr-only">{$_("action")}</span>
</th> </th>
</tr> </tr>
</thead> </thead>
@ -160,19 +167,21 @@
{#if filterGroupIDs.includes(runner.group.id) || filterGroupIDs.includes(runner.group.parentGroup?.id) || filterGroupIDs.length === 0} {#if filterGroupIDs.includes(runner.group.id) || filterGroupIDs.includes(runner.group.parentGroup?.id) || filterGroupIDs.length === 0}
<tr <tr
data-rowid="user_{runner.id}" data-rowid="user_{runner.id}"
data-groupid={runner.group.id}> data-groupid={runner.group.id}
>
<td class="px-6 py-4 whitespace-nowrap"> <td class="px-6 py-4 whitespace-nowrap">
<input <input
bind:checked={runner.is_selected} bind:checked={runner.is_selected}
type="checkbox" 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"
/>
</td> </td>
<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"> <div class="ml-4">
<div class="text-sm font-medium text-gray-900"> <div class="text-sm font-medium text-gray-900">
{runner.firstname} {runner.firstname}
{runner.middlename || ''} {runner.middlename || ""}
{runner.lastname} {runner.lastname}
</div> </div>
</div> </div>
@ -187,60 +196,80 @@
{/if} {/if}
{#if runner.address.address1 !== null} {#if runner.address.address1 !== null}
{runner.address.address1}<br /> {runner.address.address1}<br />
{runner.address.address2 || ''}<br /> {runner.address.address2 || ""}<br />
{runner.address.postalcode} {runner.address.postalcode}
{runner.address.city} {runner.address.city}
{runner.address.country} {runner.address.country}
{/if} {/if}
</td> </td>
<td class="px-6 py-4 whitespace-nowrap"> <td class="px-6 py-4 whitespace-nowrap">
{#if runner.group.responseType === 'RUNNERTEAM'} {#if runner.group.responseType === "RUNNERTEAM"}
<a <a
href="../teams/{runner.group.id}" href="../teams/{runner.group.id}"
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{runner.group.parentGroup.name} &gt; {runner.group.name}</a> class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
>{runner.group.parentGroup.name} &gt; {runner.group
.name}</a
>
{/if} {/if}
{#if runner.group.responseType === 'RUNNERORGANIZATION'} {#if runner.group.responseType === "RUNNERORGANIZATION"}
<a <a
href="../orgs/{runner.group.id}" href="../orgs/{runner.group.id}"
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{runner.group.name}</a> class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
>{runner.group.name}</a
>
{/if} {/if}
</td> </td>
<td class="px-6 py-4 whitespace-nowrap"> <td class="px-6 py-4 whitespace-nowrap">
{runner.distance /1000 } km {runner.distance / 1000} km
</td> </td>
{#if active_deletes[runner.id] === true} {#if active_deletes[runner.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[runner.id] = false; active_deletes[runner.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={() => {
RunnerService.runnerControllerRemove(runner.id, true) RunnerService.runnerControllerRemove(
runner.id,
true
)
.then((resp) => { .then((resp) => {
current_runners = current_runners.filter((obj) => obj.id !== runner.id); current_runners = current_runners.filter(
(obj) => obj.id !== runner.id
);
}) })
.catch((err) => {}); .catch((err) => {});
}} }}
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
>
</td> </td>
{:else} {:else}
<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="./{runner.id}" href="./{runner.id}"
class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a> class="text-indigo-600 hover:text-indigo-900"
{#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:DELETE')} >{$_("details")}</a
>
{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:DELETE")}
<button <button
on:click={() => { on:click={() => {
active_deletes[runner.id] = true; active_deletes[runner.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
>
{/if} {/if}
</td> </td>
{/if} {/if}
@ -255,7 +284,7 @@
{:catch error} {:catch error}
<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500"> <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"> <span class="inline-block align-middle mr-8">
<b class="capitalize">{$_('general_promise_error')}</b> <b class="capitalize">{$_("general_promise_error")}</b>
{error} {error}
</span> </span>
</div> </div>