From 597e9e1ea9da7c73bdcb8ef1ae1a13dfa68ff5a3 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Fri, 15 Jan 2021 21:22:51 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20basic=20TeamsOverview?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #14
---
 src/components/TeamsOverview.svelte | 96 +++++++++++------------------
 src/locales/en.json                 |  1 +
 2 files changed, 38 insertions(+), 59 deletions(-)

diff --git a/src/components/TeamsOverview.svelte b/src/components/TeamsOverview.svelte
index aa58ec18..d8400b8d 100644
--- a/src/components/TeamsOverview.svelte
+++ b/src/components/TeamsOverview.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { _ } from "svelte-i18n";
+  import { t, _ } from "svelte-i18n";
   import Toastify from "toastify-js";
   import { RunnerTeamService } from "@odit/lfk-client-js";
   const teams_promise = RunnerTeamService.runnerTeamControllerGetAll();
@@ -10,10 +10,7 @@
   $: searchvalue = "";
   $: active_deletes = [];
   export let current_teams = [];
-  $: userscache = [];
-  $: advanced_search = false;
   usersstore.subscribe((val) => {
-    userscache = val;
     current_teams = val;
   });
   teams_promise.then((data) => {
@@ -21,38 +18,24 @@
   });
 </script>
 
-{#if store.state.jwtinfo.userdetails.permissions.includes('USER:GET')}
+{#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:GET')}
   {#await teams_promise}
     <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">users are being loaded...</p>
+      <p class="font-bold">teams are being loaded...</p>
       <p class="text-sm">{$_('this-might-take-a-moment')}</p>
     </div>
   {:then}
     {#if current_teams.length === 0}
       <TeamsEmptyState />
     {:else}
-      <!-- {#if advanced_search}
-        advanced search
-      {:else} -->
       <input
         type="search"
         bind:value={searchvalue}
         placeholder={$_('datatable.search')}
         aria-label={$_('datatable.search')}
         class="gridjs-input gridjs-search-input mb-4" />
-      <!-- {/if} -->
-      <!-- <button
-        on:click={() => {
-          advanced_search = !advanced_search;
-        }}
-        type="button"
-        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">
-        {#if advanced_search}
-          toggle simple search
-        {:else}toggle advanced search{/if}
-      </button> -->
       <div
         class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
         <table class="divide-y divide-gray-200 w-full">
@@ -66,12 +49,12 @@
               <th
                 scope="col"
                 class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Status
+                {$_('organization')}
               </th>
               <th
                 scope="col"
                 class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Groups
+                Contact
               </th>
               <th scope="col" class="relative px-6 py-3">
                 <span class="sr-only">Action</span>
@@ -79,66 +62,61 @@
             </tr>
           </thead>
           <tbody class="divide-y divide-gray-200">
-            {#each current_teams as u}
-              {#if Object.values(u)
+            {#each current_teams as t}
+              {#if Object.values(t)
                 .toString()
                 .toLowerCase()
                 .includes(searchvalue)}
-                <tr data-rowid="user_{u.id}">
+                <tr data-rowid="team_{t.id}">
                   <td class="px-6 py-4 whitespace-nowrap">
                     <div class="flex items-center">
-                      {#if u.profilePic}
-                        <div class="flex-shrink-0 h-10 w-10">
-                          <img
-                            class="h-10 w-10 rounded-full"
-                            src={u.profilePic}
-                            alt="" />
-                        </div>
-                      {/if}
                       <div class="ml-4">
                         <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}
+                          {t.name}
                         </div>
                       </div>
                     </div>
                   </td>
                   <td class="px-6 py-4 whitespace-nowrap">
-                    {#if u.enabled}
-                      <span
-                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
-                    {:else}
-                      <span
-                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Inactive</span>
-                    {/if}
+                    <div class="flex items-center">
+                      <div class="ml-4">
+                        <div
+                          class="text-sm font-medium text-gray-900 dark:text-gray-100">
+                          {#if t.parentGroup}
+                            {t.parentGroup.name}
+                          {:else}no organization specified{/if}
+                        </div>
+                      </div>
+                    </div>
                   </td>
-                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                    {#each u.groups as g}
-                      <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 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 dark:text-gray-100">
+                          {#if t.contact}
+                            {JSON.stringify(t.contact)}
+                          {:else}no contact specified{/if}
+                        </div>
+                      </div>
+                    </div>
                   </td>
-                  {#if active_deletes[u.id] === true}
+                  {#if active_deletes[t.id] === true}
                     <td
                       class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                       <button
                         on:click={() => {
-                          active_deletes[u.id] = false;
+                          active_deletes[t.id] = false;
                         }}
                         tabindex="0"
                         class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">Cancel
                         Delete</button>
                       <button
                         on:click={() => {
-                          UserService.userControllerRemove(u.id, true)
+                          RunnerTeamService.runnerTeamControllerRemove(t.id, true)
                             .then((resp) => {
-                              current_teams = current_teams.filter((obj) => obj.id !== u.id);
+                              current_teams = current_teams.filter((obj) => obj.id !== t.id);
                             })
                             .catch((err) => {
                               // error deleting user
@@ -152,12 +130,12 @@
                     <td
                       class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                       <a
-                        href="./{u.id}"
+                        href="./{t.id}"
                         class="text-indigo-600 hover:text-indigo-900">Edit</a>
-                      {#if store.state.jwtinfo.userdetails.permissions.includes('USER:DELETE')}
+                      {#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:DELETE')}
                         <button
                           on:click={() => {
-                            active_deletes[u.id] = true;
+                            active_deletes[t.id] = true;
                           }}
                           tabindex="0"
                           class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</button>
diff --git a/src/locales/en.json b/src/locales/en.json
index 3c4bc96b..6bb8bc40 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -94,6 +94,7 @@
     "minimum-lap-time-in-s": "minimum lap time in s",
     "no-license-text-could-be-found": "No license text could be found 😢",
     "no-tracks-added-yet": "there are no tracks added yet.",
+    "organization": "Organization",
     "organizations": "Organizations",
     "orgs": "Orgs",
     "oss_credit_description": "We use a lot of open source software on these projects, and would like to thank the following projects and contributors who help make open source great!",