From e8f7c1c832037af251d2e3c41600b7c7109fdaa2 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Fri, 19 Feb 2021 19:21:08 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20basic=20select=20boxes=20in=20table?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #62
---
 src/components/runners/RunnersOverview.svelte | 124 +++++++++++-------
 src/locales/en.json                           |   2 +
 2 files changed, 76 insertions(+), 50 deletions(-)

diff --git a/src/components/runners/RunnersOverview.svelte b/src/components/runners/RunnersOverview.svelte
index 9c6e29e4..54166f61 100644
--- a/src/components/runners/RunnersOverview.svelte
+++ b/src/components/runners/RunnersOverview.svelte
@@ -80,6 +80,22 @@
         <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">
+                <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
                 scope="col"
                 class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
@@ -124,6 +140,12 @@
                   <tr
                     data-rowid="user_{runner.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">
                       <div class="flex items-center">
                         <div class="ml-4">
@@ -135,56 +157,58 @@
                         </div>
                       </div>
                     </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    {#if runner.email}
-                      <div class="text-sm text-gray-500">{runner.email}</div>
-                    {/if}
-                    {#if runner.phone}
-                      <div class="text-sm text-gray-500">{runner.phone}</div>
-                    {/if}
-                    {#if runner.address.address1 !== null}
-                      {runner.address.address1}<br />
-                      {runner.address.address2 || ''}<br />
-                      {runner.address.postalcode}
-                      {runner.address.city}
-                      {runner.address.country}
-                    {/if}
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    {#if runner.group.responseType === 'RUNNERTEAM'}
-                      <a
-                        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>
-                    {/if}
-                    {#if runner.group.responseType === 'RUNNERORGANIZATION'}
-                      <a
-                        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>
-                    {/if}
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">{runner.distance}</td>
-                  {#if active_deletes[runner.id] === true}
-                    <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                      <button
-                        on:click={() => {
-                          active_deletes[runner.id] = false;
-                        }}
-                        tabindex="0"
-                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">Cancel
-                        Delete</button>
-                      <button
-                        on:click={() => {
-                          RunnerService.runnerControllerRemove(runner.id, true)
-                            .then((resp) => {
-                              current_runners = current_runners.filter((obj) => obj.id !== runner.id);
-                            })
-                            .catch((err) => {
-                              // error deleting user
-                            });
-                        }}
-                        tabindex="0"
-                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                      {#if runner.email}
+                        <div class="text-sm text-gray-500">{runner.email}</div>
+                      {/if}
+                      {#if runner.phone}
+                        <div class="text-sm text-gray-500">{runner.phone}</div>
+                      {/if}
+                      {#if runner.address.address1 !== null}
+                        {runner.address.address1}<br />
+                        {runner.address.address2 || ''}<br />
+                        {runner.address.postalcode}
+                        {runner.address.city}
+                        {runner.address.country}
+                      {/if}
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                      {#if runner.group.responseType === 'RUNNERTEAM'}
+                        <a
+                          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>
+                      {/if}
+                      {#if runner.group.responseType === 'RUNNERORGANIZATION'}
+                        <a
+                          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>
+                      {/if}
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                      {runner.distance}
+                    </td>
+                    {#if active_deletes[runner.id] === true}
+                      <td
+                        class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                        <button
+                          on:click={() => {
+                            active_deletes[runner.id] = false;
+                          }}
+                          tabindex="0"
+                          class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">Cancel
+                          Delete</button>
+                        <button
+                          on:click={() => {
+                            RunnerService.runnerControllerRemove(runner.id, true)
+                              .then((resp) => {
+                                current_runners = current_runners.filter((obj) => obj.id !== runner.id);
+                              })
+                              .catch((err) => {
+                                // error deleting user
+                              });
+                          }}
+                          tabindex="0"
+                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
                       </td>
                     {:else}
                       <td
diff --git a/src/locales/en.json b/src/locales/en.json
index 40e6843f..f056709e 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -84,6 +84,7 @@
     "delete-team": "Delete Team",
     "delete-user": "Delete User",
     "dependency_name": "Name",
+    "deselect-all": "deselect all",
     "distance": "Distance",
     "distance-in-km": "Distance in km",
     "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...",
     "save": "Save",
     "save-changes": "Save Changes",
+    "select-all": "select all",
     "send-a-mail-to-lfk-odit-services": "send a mail to lfk@odit.services",
     "settings": "Settings",
     "stats-are-being-loaded": "stats are being loaded...",