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

✨ basic TeamsOverview

Browse Source 
ref #14
This commit is contained in:
Philipp Dormann 2021-01-15 21:22:51 +01:00
parent 9bb027ec4c
commit 597e9e1ea9
2 changed files with 38 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
src/components/TeamsOverview.svelte
View File

@ -1,5 +1,5 @@
<script> <script>
import { _ } from "svelte-i18n"; import { t, _ } from "svelte-i18n";
import Toastify from "toastify-js"; import Toastify from "toastify-js";
import { RunnerTeamService } from "@odit/lfk-client-js"; import { RunnerTeamService } from "@odit/lfk-client-js";
const teams_promise = RunnerTeamService.runnerTeamControllerGetAll(); const teams_promise = RunnerTeamService.runnerTeamControllerGetAll();
@ -10,10 +10,7 @@
$: searchvalue = ""; $: searchvalue = "";
$: active_deletes = []; $: active_deletes = [];
export let current_teams = []; export let current_teams = [];
$: userscache = [];
$: advanced_search = false;
usersstore.subscribe((val) => { usersstore.subscribe((val) => {
userscache = val;
current_teams = val; current_teams = val;
}); });
teams_promise.then((data) => { teams_promise.then((data) => {
@ -21,38 +18,24 @@
}); });
</script> </script>
{#if store.state.jwtinfo.userdetails.permissions.includes('USER:GET')} {#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:GET')}
{#await teams_promise} {#await teams_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">users are being loaded...</p> <p class="font-bold">teams are being loaded...</p>
<p class="text-sm">{$_('this-might-take-a-moment')}</p> <p class="text-sm">{$_('this-might-take-a-moment')}</p>
</div> </div>
{:then} {:then}
{#if current_teams.length === 0} {#if current_teams.length === 0}
<TeamsEmptyState /> <TeamsEmptyState />
{:else} {:else}
<!-- {#if advanced_search}
advanced search
{:else} -->
<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" />
<!-- {/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 <div
class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"> class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
<table class="divide-y divide-gray-200 w-full"> <table class="divide-y divide-gray-200 w-full">
@ -66,12 +49,12 @@
<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">
Status {$_('organization')}
</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">
Groups Contact
</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>
@ -79,66 +62,61 @@
</tr> </tr>
</thead> </thead>
<tbody class="divide-y divide-gray-200"> <tbody class="divide-y divide-gray-200">
{#each current_teams as u} {#each current_teams as t}
{#if Object.values(u) {#if Object.values(t)
.toString() .toString()
.toLowerCase() .toLowerCase()
.includes(searchvalue)} .includes(searchvalue)}
<tr data-rowid="user_{u.id}"> <tr data-rowid="team_{t.id}">
<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">
{#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="ml-4">
<div <div
class="text-sm font-medium text-gray-900 dark:text-gray-100"> class="text-sm font-medium text-gray-900 dark:text-gray-100">
{u.firstname} {t.name}
{u.middlename || ''}
{u.lastname}
</div>
<div class="text-sm text-gray-500">
{u.email || u.username}
</div> </div>
</div> </div>
</div> </div>
</td> </td>
<td class="px-6 py-4 whitespace-nowrap"> <td class="px-6 py-4 whitespace-nowrap">
{#if u.enabled} <div class="flex items-center">
<span <div class="ml-4">
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span> <div
{:else} class="text-sm font-medium text-gray-900 dark:text-gray-100">
<span {#if t.parentGroup}
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Inactive</span> {t.parentGroup.name}
{/if} {:else}no organization specified{/if}
</div>
</div>
</div>
</td> </td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> <td class="px-6 py-4 whitespace-nowrap">
{#each u.groups as g} <div class="flex items-center">
<a <div class="ml-4">
href="../groups/{g.id}" <div
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{g.name}</a> class="text-sm font-medium text-gray-900 dark:text-gray-100">
{/each} {#if t.contact}
{JSON.stringify(t.contact)}
{:else}no contact specified{/if}
</div>
</div>
</div>
</td> </td>
{#if active_deletes[u.id] === true} {#if active_deletes[t.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[u.id] = false; active_deletes[t.id] = false;
}} }}
tabindex="0" tabindex="0"
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">Cancel class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">Cancel
Delete</button> Delete</button>
<button <button
on:click={() => { on:click={() => {
UserService.userControllerRemove(u.id, true) RunnerTeamService.runnerTeamControllerRemove(t.id, true)
.then((resp) => { .then((resp) => {
current_teams = current_teams.filter((obj) => obj.id !== u.id); current_teams = current_teams.filter((obj) => obj.id !== t.id);
}) })
.catch((err) => { .catch((err) => {
// error deleting user // error deleting user
@ -152,12 +130,12 @@
<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="./{u.id}" href="./{t.id}"
class="text-indigo-600 hover:text-indigo-900">Edit</a> 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 <button
on:click={() => { on:click={() => {
active_deletes[u.id] = true; active_deletes[t.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>

1
src/locales/en.json
View File

@ -94,6 +94,7 @@
"minimum-lap-time-in-s": "minimum lap time in s", "minimum-lap-time-in-s": "minimum lap time in s",
"no-license-text-could-be-found": "No license text could be found 😢", "no-license-text-could-be-found": "No license text could be found 😢",
"no-tracks-added-yet": "there are no tracks added yet.", "no-tracks-added-yet": "there are no tracks added yet.",
"organization": "Organization",
"organizations": "Organizations", "organizations": "Organizations",
"orgs": "Orgs", "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!", "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!",