@nymphjs/tilmeld-setup 1.0.0-beta.13 → 1.0.0-beta.131

package/app/src/routes/Groups.svelte

@@ -0,0 +1,203 @@
+{#if $clientConfig == null || $user == null}
+  <section>
+    <div style="display: flex; justify-content: center; align-items: center;">
+      <CircularProgress style="height: 45px; width: 45px;" indeterminate />
+    </div>
+  </section>
+{:else}
+  <div class="solo-search-container solo-container">
+    <Fab
+      href="/groups/edit/+"
+      use={[link]}
+      color="primary"
+      mini
+      class="solo-fab"
+      title="New Group"
+    >
+      <Icon tag="svg" viewBox="0 0 24 24">
+        <path fill="currentColor" d={mdiPlus} />
+      </Icon>
+    </Fab>
+    <Paper class="solo-paper" elevation={6}>
+      <Icon class="solo-icon" tag="svg" viewBox="0 0 24 24">
+        <path fill="currentColor" d={mdiMagnify} />
+      </Icon>
+      <Input
+        bind:value={entitySearch}
+        onkeydown={entitySearchKeyDown}
+        placeholder="Group Search"
+        class="solo-input"
+      />
+    </Paper>
+    <Fab
+      onclick={searchEntities}
+      disabled={entitySearch === ''}
+      color="primary"
+      mini
+      class="solo-fab"
+      title="Search"
+    >
+      <Icon tag="svg" viewBox="0 0 24 24">
+        <path fill="currentColor" d={mdiArrowRight} />
+      </Icon>
+    </Fab>
+  </div>
+  <section>
+    {#if failureMessage}
+      <div class="tilmeld-failure">
+        {failureMessage}
+      </div>
+    {/if}
+
+    {#if entitiesSearching}
+      <div style="display: flex; justify-content: center; align-items: center;">
+        <CircularProgress style="height: 32px; width: 32px;" indeterminate />
+      </div>
+    {:else if entities != null}
+      <DataTable table$aria-label="Group list" style="width: 100%;">
+        <Head>
+          <Row>
+            {#if !$clientConfig.emailUsernames}
+              <Cell>Groupname</Cell>
+            {/if}
+            {#if $clientConfig.userFields.includes('name')}
+              <Cell>Name</Cell>
+            {/if}
+            {#if $clientConfig.userFields.includes('email')}
+              <Cell>Email</Cell>
+            {/if}
+            <Cell>Enabled</Cell>
+          </Row>
+        </Head>
+        <Body>
+          {#each entities as curEntity (curEntity.guid)}
+            <Row>
+              {#if !$clientConfig.emailUsernames}
+                <Cell
+                  ><a
+                    href="/groups/edit/{encodeURIComponent(
+                      curEntity.guid || '',
+                    )}"
+                    use:link>{curEntity.groupname}</a
+                  ></Cell
+                >
+              {/if}
+              {#if $clientConfig.userFields.includes('name')}
+                <Cell
+                  ><a
+                    href="/groups/edit/{encodeURIComponent(
+                      curEntity.guid || '',
+                    )}"
+                    use:link>{curEntity.name}</a
+                  ></Cell
+                >
+              {/if}
+              {#if $clientConfig.userFields.includes('email')}
+                <Cell
+                  ><a
+                    href="/groups/edit/{encodeURIComponent(
+                      curEntity.guid || '',
+                    )}"
+                    use:link>{curEntity.email}</a
+                  ></Cell
+                >
+              {/if}
+              <Cell>{curEntity.enabled ? 'Yes' : 'No'}</Cell>
+            </Row>
+          {:else}
+            <Row>
+              <Cell
+                colspan={1 +
+                  (!$clientConfig.emailUsernames ? 1 : 0) +
+                  ($clientConfig.userFields.includes('name') ? 1 : 0) +
+                  ($clientConfig.userFields.includes('email') ? 1 : 0)}
+                >None found.</Cell
+              >
+            </Row>
+          {/each}
+        </Body>
+      </DataTable>
+    {/if}
+  </section>
+{/if}
+
+<script lang="ts">
+  import type { Writable } from 'svelte/store';
+  import { getContext } from 'svelte';
+  import { link, push } from 'svelte-spa-router';
+  import queryParser from '@nymphjs/query-parser';
+  import type {
+    AdminGroupData,
+    ClientConfig,
+    CurrentUserData,
+  } from '@nymphjs/tilmeld-client';
+  import type {
+    Group as GroupClass,
+    User as UserClass,
+  } from '@nymphjs/tilmeld-client';
+  import { mdiMagnify, mdiArrowRight, mdiPlus } from '@mdi/js';
+  import CircularProgress from '@smui/circular-progress';
+  import Paper from '@smui/paper';
+  import DataTable, { Head, Body, Row, Cell } from '@smui/data-table';
+  import { Input } from '@smui/textfield';
+  import Fab from '@smui/fab';
+  import { Icon } from '@smui/common';
+
+  import { nymph, Group, User } from '../nymph.js';
+
+  let { params }: { params: { query?: string } } = $props();
+
+  let entitySearch = $derived(params.query ?? '');
+  let failureMessage: string | undefined = $state();
+
+  const clientConfig =
+    getContext<Writable<ClientConfig | undefined>>('clientConfigStore');
+  const user =
+    getContext<Writable<(UserClass & CurrentUserData) | null | undefined>>(
+      'userStore',
+    );
+
+  $effect(() => {
+    if (params) {
+      handleSearchParam();
+    }
+  });
+
+  async function handleSearchParam() {
+    if (params.query && params.query !== '') {
+      entitiesSearching = true;
+      failureMessage = undefined;
+      try {
+        const query = queryParser({
+          query: params.query,
+          entityClass: Group,
+          defaultFields: ['groupname', 'name', 'email'],
+          qrefMap: {
+            User: {
+              class: User,
+              defaultFields: ['username', 'name', 'email'],
+            },
+            Group: {
+              class: Group,
+              defaultFields: ['groupname', 'name', 'email'],
+            },
+          },
+        });
+        entities = await nymph.getEntities(...query);
+      } catch (e: any) {
+        failureMessage = e?.message;
+      }
+      entitiesSearching = false;
+    }
+  }
+
+  let entitiesSearching = $state(false);
+  let entities: (GroupClass & AdminGroupData)[] | undefined = $state();
+  async function searchEntities() {
+    push(`/groups/${encodeURIComponent(entitySearch)}`);
+  }
+  function entitySearchKeyDown(event: CustomEvent | KeyboardEvent) {
+    event = event as KeyboardEvent;
+    if (event.key === 'Enter') searchEntities();
+  }
+</script>

package/app/src/{Intro.svelte → routes/Intro.svelte}

@@ -3,7 +3,12 @@
 
   <p>
     Welcome to Tilmeld. This program handles users and groups. It can be a
-    little tricky to set up, so read through this introduction carefully.
+    little tricky to set up, so read through this introduction carefully. You
+    can familiarize yourself with the search box's syntax <a
+      href="https://nymph.io/packages/query-parser/"
+      target="_blank"
+      rel="noreferrer noopener">here</a
+    >.
   </p>
 
   <h3>How It Works</h3>
@@ -19,6 +24,10 @@
     server-side entities. The first user account registered in Tilmeld will be
     granted admin priveleges with the <code>system/admin</code> ability.
   </p>
+  <p>
+    If you create a user account through this setup app, it will not have a
+    generated primary group, so you may want to avoid that.
+  </p>
 
   <h3>Primary Groups</h3>
   <p>
@@ -62,3 +71,7 @@
     user is changed, that information is propagated to the group.
   </p>
 </section>
+
+<script lang="ts">
+  let {}: {} = $props();
+</script>

package/app/src/routes/NotFound.svelte

@@ -0,0 +1,9 @@
+<section>
+  <h2 style="margin-top: 0;">Not Found</h2>
+
+  <p>Sorry, that address was not found.</p>
+</section>
+
+<script lang="ts">
+  let {}: {} = $props();
+</script>