Mirrors/headscale-ui
1
0
Fork 0
mirror of https://github.com/gurucomputing/headscale-ui.git synced 2026-07-17 16:39:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

implementation of user sorting

Browse source
This commit is contained in:
Christopher Bisset 2022-07-31 10:38:48 +10:00
parent 42b32b7e82
commit cba8d7df68
3 changed files with 65 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/lib/index/CreateUser.svelte
View file

@ -6,7 +6,7 @@
// name for user creation
let newUserName = '';
// whether the new card html element is visible
let newUserCardVisible = false;
export let newUserCardVisible = false;
// The Form used for validating input
let newUserForm: HTMLFormElement;
@ -29,13 +29,6 @@
</script>
<!-- html -->
<div in:fade class="p-4">
{#if newUserCardVisible == false}
<button on:click={() => (newUserCardVisible = true)} class="btn btn-primary btn-sm capitalize" type="button">+ New User</button>
{:else}
<button on:click={() => (newUserCardVisible = false)} class="btn btn-secondary btn-sm capitalize" type="button">- Hide New User</button>
{/if}
</div>
{#if newUserCardVisible}
<div in:fade out:fade={{ duration: newUserCardVisible ? 0 : 500 }} class="card-pending">
<form on:submit|preventDefault={newUserAction} class="relative" bind:this={newUserForm}>

41
src/lib/index/SortUsers.svelte Normal file
View file

@ -0,0 +1,41 @@
<script lang="ts">
import { getUsers } from '$lib/common/apiFunctions.svelte';
import { headscaleUserSortDirectionStore, headscaleUserSortStore } from '$lib/common/stores.js';
function sortAction() {
if ($headscaleUserSortDirectionStore == 'ascending') {
$headscaleUserSortDirectionStore = 'descending';
} else {
$headscaleUserSortDirectionStore = 'ascending';
}
getUsers();
}
</script>
<span class="flex">
<button
on:click={() => {
sortAction();
}}
class="mx-1"
>
{#if $headscaleUserSortDirectionStore == 'ascending'}
<!-- ascending sort icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12" />
</svg>
{:else}
<!-- descending sort icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4" />
</svg>
{/if}
</button>
<span class="btn-group">
<button class:btn-active="{$headscaleUserSortStore == 'id'}" on:click="{() => {$headscaleUserSortStore = 'id'; getUsers()}}" class="btn btn-xs">ID</button>
<button class:btn-active="{$headscaleUserSortStore == 'name'}" on:click="{() => {$headscaleUserSortStore = 'name'; getUsers()}}" class="btn btn-xs capitalize">User Name</button>
<button class:btn-active="{$headscaleUserSortStore == 'createdAt'}" on:click="{() => {$headscaleUserSortStore = 'createdAt'; getUsers()}}" class="btn btn-xs capitalize">Creation Date</button>
</span>
</span>

29
src/routes/index.svelte
View file

@ -1,16 +1,19 @@
<!-- typescript -->
<script lang="ts">
import CreateUser from '$lib/index/CreateUser.svelte';
import UserCard from '$lib/index/UserCard.svelte';
import { headscaleUserStore, apiTestStore } from '$lib/common/stores';
import { onMount } from 'svelte';
import { base } from '$app/paths';
import { fade } from 'svelte/transition';
import { getUsers } from '$lib/common/apiFunctions.svelte';
import { base } from '$app/paths';
import { headscaleUserStore, apiTestStore } from '$lib/common/stores';
import { onMount } from 'svelte';
import CreateUser from '$lib/index/CreateUser.svelte';
import SortUsers from '$lib/index/SortUsers.svelte';
import UserCard from '$lib/index/UserCard.svelte';
//
// Component Variables
//
// whether the new card html element is visible
let newUserCardVisible = false;
// let's the page know if it's ready to load
let componentLoaded = false;
@ -32,7 +35,21 @@
</div>
{#if $apiTestStore === 'succeeded'}
<!-- instantiate user based components -->
<CreateUser />
<table>
<tr
><td
><!-- device creation visibility button -->
<div class="p-4">
{#if newUserCardVisible == false}
<button on:click={() => (newUserCardVisible = true)} class="btn btn-primary btn-xs capitalize" type="button">+ New User</button>
{:else}
<button on:click={() => (newUserCardVisible = false)} class="btn btn-secondary btn-xs capitalize" type="button">- Hide New User</button>
{/if}
</div></td
><td><SortUsers /></td></tr
>
</table>
<CreateUser bind:newUserCardVisible />
{#each $headscaleUserStore as user}
<UserCard {user} />
{/each}