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

✨ basic select boxes in table

Browse Source 
ref #62
This commit is contained in:
Philipp Dormann 2021-02-19 19:21:08 +01:00
parent b337873ca2
commit e8f7c1c832
2 changed files with 76 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -80,6 +80,22 @@
<table class="divide-y divide-gray-200 w-full"> <table class="divide-y divide-gray-200 w-full">
<thead class="bg-gray-50"> <thead class="bg-gray-50">
<tr> <tr>
<th
scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
<span
on:click={() => {
const newstate = !current_runners.some((r) => r.is_selected === true);
current_runners = current_runners.map((r) => {
r.is_selected = newstate;
return r;
});
}}
class="underline cursor-pointer select-none">{#if current_runners.some((r) => r.is_selected === true)}
{$_('deselect-all')}
{:else}{$_('select-all')}{/if}
</span>
</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">
@ -124,6 +140,12 @@
<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">
<input
bind:checked={runner.is_selected}
type="checkbox"
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
</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">
@ -135,56 +157,58 @@
</div> </div>
</div> </div>
</td> </td>
<td class="px-6 py-4 whitespace-nowrap"> <td class="px-6 py-4 whitespace-nowrap">
{#if runner.email} {#if runner.email}
<div class="text-sm text-gray-500">{runner.email}</div> <div class="text-sm text-gray-500">{runner.email}</div>
{/if} {/if}
{#if runner.phone} {#if runner.phone}
<div class="text-sm text-gray-500">{runner.phone}</div> <div class="text-sm text-gray-500">{runner.phone}</div>
{/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.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}
{#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">{runner.distance}</td> <td class="px-6 py-4 whitespace-nowrap">
{#if active_deletes[runner.id] === true} {runner.distance}
<td </td>
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> {#if active_deletes[runner.id] === true}
<button <td
on:click={() => { class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
active_deletes[runner.id] = false; <button
}} on:click={() => {
tabindex="0" active_deletes[runner.id] = false;
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">Cancel }}
Delete</button> tabindex="0"
<button class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">Cancel
on:click={() => { Delete</button>
RunnerService.runnerControllerRemove(runner.id, true) <button
.then((resp) => { on:click={() => {
current_runners = current_runners.filter((obj) => obj.id !== runner.id); RunnerService.runnerControllerRemove(runner.id, true)
}) .then((resp) => {
.catch((err) => { current_runners = current_runners.filter((obj) => obj.id !== runner.id);
// error deleting user })
}); .catch((err) => {
}} // error deleting user
tabindex="0" });
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button> }}
tabindex="0"
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
</td> </td>
{:else} {:else}
<td <td

2
src/locales/en.json
View File

@ -84,6 +84,7 @@
"delete-team": "Delete Team", "delete-team": "Delete Team",
"delete-user": "Delete User", "delete-user": "Delete User",
"dependency_name": "Name", "dependency_name": "Name",
"deselect-all": "deselect all",
"distance": "Distance", "distance": "Distance",
"distance-in-km": "Distance in km", "distance-in-km": "Distance in km",
"do-you-want-to-delete-the-organization-delete_org-name": "Do you want to delete the organization {orgname}?", "do-you-want-to-delete-the-organization-delete_org-name": "Do you want to delete the organization {orgname}?",
@ -191,6 +192,7 @@
"runners-are-being-loaded": "runners are being loaded...", "runners-are-being-loaded": "runners are being loaded...",
"save": "Save", "save": "Save",
"save-changes": "Save Changes", "save-changes": "Save Changes",
"select-all": "select all",
"send-a-mail-to-lfk-odit-services": "send a mail to lfk@odit.services", "send-a-mail-to-lfk-odit-services": "send a mail to lfk@odit.services",
"settings": "Settings", "settings": "Settings",
"stats-are-being-loaded": "stats are being loaded...", "stats-are-being-loaded": "stats are being loaded...",