From 6529907a139edd8450e699a8ea9befae622137f7 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Sat, 9 Jan 2021 18:27:22 +0100
Subject: [PATCH] display full user names in overview table

ref #12
---
 src/components/UsersOverview.svelte | 72 ++++++++++++++++++++---------
 1 file changed, 49 insertions(+), 23 deletions(-)

diff --git a/src/components/UsersOverview.svelte b/src/components/UsersOverview.svelte
index 9fde14cf..33b0d867 100644
--- a/src/components/UsersOverview.svelte
+++ b/src/components/UsersOverview.svelte
@@ -78,8 +78,11 @@
                     </div>
                   {/if}
                   <div class="ml-4">
-                    <div class="text-sm font-medium text-gray-900 dark:text-gray-100">
+                    <div
+                      class="text-sm font-medium text-gray-900 dark:text-gray-100">
                       {u.firstname}
+                      {u.middlename || ''}
+                      {u.lastname}
                     </div>
                     <div class="text-sm text-gray-500">
                       {u.email || u.username}
@@ -104,7 +107,8 @@
               </td>
               <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                 {#each u.groups as g}
-                  <a href="../groups/{g.id}"
+                  <a
+                    href="../groups/{g.id}"
                     class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{g.name}</a>
                 {/each}
               </td>
@@ -113,65 +117,87 @@
                 <a
                   href="./{u.id}"
                   class="text-indigo-600 hover:text-indigo-900">Edit</a>
-                <span tabindex="0" href="#" class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</span>
+                <span
+                  tabindex="0"
+                  href="#"
+                  class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</span>
               </td>
             </tr>
           {/each}
         </tbody>
       </table>
-      <div class="grid px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border-t dark:border-gray-700 bg-gray-50 sm:grid-cols-9 dark:text-gray-400 dark:bg-gray-900">
-        <span class="flex items-center col-span-3">
-          Showing 21-30 of 100
-        </span>
-        <span class="col-span-2"></span>
+      <div
+        class="grid px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border-t dark:border-gray-700 bg-gray-50 sm:grid-cols-9 dark:text-gray-400 dark:bg-gray-900">
+        <span class="flex items-center col-span-3"> Showing 21-30 of 100 </span>
+        <span class="col-span-2" />
         <!-- Pagination -->
         <span class="flex col-span-4 mt-2 sm:mt-auto sm:justify-end">
           <nav aria-label="Table navigation">
             <ul class="inline-flex items-center">
               <li>
-                <button class="px-3 py-1 rounded-md rounded-l-lg focus:outline-none focus:shadow-outline-purple" aria-label="Previous">
-                  <svg aria-hidden="true" class="w-4 h-4 fill-current" viewBox="0 0 20 20">
-                    <path d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" fill-rule="evenodd"></path>
+                <button
+                  class="px-3 py-1 rounded-md rounded-l-lg focus:outline-none focus:shadow-outline-purple"
+                  aria-label="Previous">
+                  <svg
+                    aria-hidden="true"
+                    class="w-4 h-4 fill-current"
+                    viewBox="0 0 20 20">
+                    <path
+                      d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+                      clip-rule="evenodd"
+                      fill-rule="evenodd" />
                   </svg>
                 </button>
               </li>
               <li>
-                <button class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">
+                <button
+                  class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">
                   1
                 </button>
               </li>
               <li>
-                <button class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">
+                <button
+                  class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">
                   2
                 </button>
               </li>
               <li>
-                <button class="px-3 py-1 text-white transition-colors duration-150 bg-purple-600 border border-r-0 border-purple-600 rounded-md focus:outline-none focus:shadow-outline-purple">
+                <button
+                  class="px-3 py-1 text-white transition-colors duration-150 bg-purple-600 border border-r-0 border-purple-600 rounded-md focus:outline-none focus:shadow-outline-purple">
                   3
                 </button>
               </li>
               <li>
-                <button class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">
+                <button
+                  class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">
                   4
                 </button>
               </li>
+              <li><span class="px-3 py-1">...</span></li>
               <li>
-                <span class="px-3 py-1">...</span>
-              </li>
-              <li>
-                <button class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">
+                <button
+                  class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">
                   8
                 </button>
               </li>
               <li>
-                <button class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">
+                <button
+                  class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">
                   9
                 </button>
               </li>
               <li>
-                <button class="px-3 py-1 rounded-md rounded-r-lg focus:outline-none focus:shadow-outline-purple" aria-label="Next">
-                  <svg class="w-4 h-4 fill-current" aria-hidden="true" viewBox="0 0 20 20">
-                    <path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" fill-rule="evenodd"></path>
+                <button
+                  class="px-3 py-1 rounded-md rounded-r-lg focus:outline-none focus:shadow-outline-purple"
+                  aria-label="Next">
+                  <svg
+                    class="w-4 h-4 fill-current"
+                    aria-hidden="true"
+                    viewBox="0 0 20 20">
+                    <path
+                      d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                      clip-rule="evenodd"
+                      fill-rule="evenodd" />
                   </svg>
                 </button>
               </li>