Org list page

backend/LexBoxApi/GraphQL/CustomTypes/OrgGqlConfiguration.cs

@@ -0,0 +1,15 @@
+using LexCore.Entities;
+
+namespace LexBoxApi.GraphQL.CustomTypes;
+
+[ObjectType]
+public class OrgGqlConfiguration : ObjectType<Organization>
+{
+    protected override void Configure(IObjectTypeDescriptor<Organization> descriptor)
+    {
+        descriptor.Field(o => o.CreatedDate).IsProjected();
+        // TODO: Will we want something similar to the following Project code for orgs?
+        // descriptor.Field(o => o.Id).Use<RefreshJwtProjectMembershipMiddleware>();
+        // descriptor.Field(o => o.Members).Use<RefreshJwtProjectMembershipMiddleware>();
+    }
+}

backend/LexCore/Entities/Organization.cs

@@ -1,9 +1,18 @@
-namespace LexCore.Entities;
+using System.ComponentModel.DataAnnotations.Schema;
+using System.Linq.Expressions;
+using EntityFrameworkCore.Projectables;
+
+namespace LexCore.Entities;
 
 public class Organization : EntityBase
 {
     public required string Name { get; set; }
     public required List<OrgMember> Members { get; set; }
+
+    [NotMapped]
+    [Projectable(UseMemberBody = nameof(SqlMemberCount))]
+    public int MemberCount { get; set; }
+    private static Expression<Func<Organization, int>> SqlMemberCount => org => org.Members.Count;
 }
 
 public class OrgMember : EntityBase

frontend/schema.graphql

@@ -212,10 +212,11 @@ type OrgMember {
 }
 
 type Organization {
+  createdDate: DateTime!
+  memberCount: Int!
   name: String!
   members: [OrgMember!]!
   id: UUID!
-  createdDate: DateTime!
   updatedDate: DateTime!
 }
 
@@ -591,13 +592,15 @@ input OrganizationFilterInput {
   or: [OrganizationFilterInput!]
   name: StringOperationFilterInput
   members: ListFilterInputTypeOfOrgMemberFilterInput
+  memberCount: IntOperationFilterInput
   id: UuidOperationFilterInput
   createdDate: DateTimeOperationFilterInput
   updatedDate: DateTimeOperationFilterInput
 }
 
 input OrganizationSortInput {
   name: SortEnumType
+  memberCount: SortEnumType
   id: SortEnumType
   createdDate: SortEnumType
   updatedDate: SortEnumType

frontend/src/lib/i18n/locales/en.json

@@ -94,6 +94,7 @@
   },
   "appmenu": {
     "log_out": "Log out",
+    "orgs": "Organizations",
     "help": "Help"
   },
   "close": "Close",
@@ -141,6 +142,14 @@
 It is provided as a service to language communities by [SIL Language Technology](https://software.sil.org/) and \
 the [Linguistics Institute at Payap University](https://li.payap.ac.th/) in Chiang Mai, Thailand."
   },
+  "org": {
+    "table": {
+      "title": "Organizations",
+      "name": "Name",
+      "created_at": "Created",
+      "members": "Members"
+    },
+  },
   "project": {
     "create": {
       "title": "Create Project",
@@ -172,6 +181,8 @@ the [Linguistics Institute at Payap University](https://li.payap.ac.th/) in Chia
       "migrated": "Migrated",
       "type": "Type",
       "users": "Users",
+      "members": "Members",
+      "__comment": "Move 'members' to 'org.table' once org page PR is merged",
     },
     "filter": {
       "title": "Project filters",

frontend/src/lib/icons/HomeIcon.svelte

@@ -1,2 +1,5 @@
-<!-- https://icon-sets.iconify.design/mdi/logout/ -->
-<span class="i-mdi-home text-2xl" />
+<script lang="ts">
+  export let size: 'text-2xl' | 'text-xl' = 'text-2xl';
+</script>
+
+<span class="i-mdi-home-outline {size}" />

frontend/src/lib/layout/AppBar.svelte

@@ -31,7 +31,7 @@
     <div>
       {#if user}
         <!-- using a label means it works before hydration is complete -->
-        <label for="drawer-toggle" class="btn btn-primary px-2">
+        <label for="drawer-toggle" class="btn btn-primary glass px-2">
           {user.name}
           <AuthenticatedUserIcon size="text-4xl" />
         </label>

frontend/src/lib/layout/AppMenu.svelte

@@ -7,6 +7,7 @@
   import type {LexAuthUser} from '$lib/user';
   import Icon from '$lib/icons/Icon.svelte';
   import { helpLinks } from '$lib/components/help';
+  import DevContent from './DevContent.svelte';
 
   export let serverVersion: string;
   export let apiVersion: string | null;
@@ -45,6 +46,15 @@
     </a>
   </li>
 
+  <DevContent>
+  <li>
+    <a href="/org/list" data-sveltekit-preload-data="tap">
+      {$t('appmenu.orgs')}
+      <Icon icon="i-mdi-account-group-outline" size="text-2xl" />
+    </a>
+  </li>
+  </DevContent>
+
   <li>
     <a href="/user" data-sveltekit-preload-data="tap">
       {$t('account_settings.title')}
@@ -72,4 +82,8 @@
   a {
     justify-content: flex-end;
   }
+
+  .menu {
+    scrollbar-gutter: stable;
+  }
 </style>

frontend/src/lib/layout/Breadcrumbs/HomeBreadcrumb.svelte

@@ -1,11 +1,7 @@
 <script>
-  import t from '$lib/i18n';
   import PageBreadcrumb from './PageBreadcrumb.svelte';
 </script>
 
 <PageBreadcrumb href="/">
-  <span class="inline-flex gap-1 items-center">
-    {$t('user_dashboard.home_title')}
-    <span class="i-mdi-home-outline text-sm mb-[-1px]" />
-  </span>
+  <span class="i-mdi-home-outline text-lg mb-[-4px]"></span>
 </PageBreadcrumb>

frontend/src/lib/layout/Layout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import EmailVerificationStatus, { initEmailResult, initRequestedEmail } from '$lib/email/EmailVerificationStatus.svelte';
   import t from '$lib/i18n';
-  import { AdminIcon, Icon } from '$lib/icons';
+  import { AdminIcon, HomeIcon, Icon } from '$lib/icons';
   import { AdminContent, AppBar, AppMenu, Breadcrumbs, Content } from '$lib/layout';
   import { onMount } from 'svelte';
   import { ensureClientMatchesUser } from '$lib/gql';
@@ -46,24 +46,33 @@
           <Breadcrumbs />
           <div class="flex gap-4 items-center">
             <DevContent>
-              <a href="/sandbox" class="btn btn-sm btn-secondary">
-                <span class="max-sm:hidden">
-                  Sandbox
-                </span>
+              <a href="/sandbox" class="btn btn-sm btn-neutral glass">
                 <Icon size="text-2xl" icon="i-mdi-box-variant" />
               </a>
             </DevContent>
             <a href={helpLinks.helpList} target="_blank" rel="external"
-              class="btn btn-sm btn-info btn-outline max-sm:hidden">
+              class="btn btn-sm btn-info btn-outline hidden lg:flex">
               {$t('appmenu.help')}
               <Icon icon="i-mdi-open-in-new" size="text-lg" />
             </a>
+            <DevContent>
+            <a href="/org/list" class="btn btn-sm btn-secondary hidden lg:flex">
+              {$t('appmenu.orgs')}
+              <Icon icon="i-mdi-account-group-outline" size="text-xl" />
+            </a>
+            </DevContent>
+            <a href="/" class="btn btn-sm btn-primary">
+              <span class="max-sm:hidden">
+                {$t('user_dashboard.title')}
+              </span>
+              <HomeIcon size="text-xl" />
+            </a>
             <AdminContent>
               <a href="/admin" class="btn btn-sm btn-accent">
                 <span class="max-sm:hidden">
                   {$t('admin_dashboard.title')}
                 </span>
-                <AdminIcon />
+                <AdminIcon size="text-xl" />
               </a>
             </AdminContent>
           </div>

frontend/src/routes/(authenticated)/+page.svelte

@@ -50,7 +50,7 @@
   $: shownProjects = limitResults ? limit(filteredProjects) : filteredProjects;
 </script>
 
-<HeaderPage wide title={$t('user_dashboard.title')} setBreadcrumb={false}>
+<HeaderPage wide title={$t('user_dashboard.title')}>
   <svelte:fragment slot="header-content">
     <div class="flex gap-4 w-full">
       <div class="grow">

frontend/src/routes/(authenticated)/org/list/+page.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+  import { FilterBar } from '$lib/components/FilterBar';
+  import type { OrgListPageQuery } from '$lib/gql/types';
+  import t, { date, number } from '$lib/i18n';
+  import { Icon } from '$lib/icons';
+  import { Page } from '$lib/layout';
+  import { getSearchParams, queryParam } from '$lib/util/query-params';
+  import type { PageData } from './$types';
+  import type { OrgListSearchParams } from './+page';
+
+  export let data: PageData;
+  $: orgs = data.orgs;
+
+  const queryParams = getSearchParams<OrgListSearchParams>({
+    search: queryParam.string<string>(''),
+  });
+  const { queryParamValues, defaultQueryParamValues } = queryParams;
+
+  type OrgList = OrgListPageQuery['orgs']
+
+  type Column = 'name' | 'members' | 'created_at';
+  let sortColumn: Column = 'name';
+  type Dir = 'ascending' | 'descending';
+  let sortDir: Dir = 'ascending';
+
+  function swapSortDir(): void {
+    sortDir = sortDir === 'ascending' ? 'descending' : 'ascending';
+  }
+
+  function handleSortClick(clickedColumn: Column): void {
+    if (sortColumn === clickedColumn) {
+      swapSortDir();
+    } else {
+      sortColumn = clickedColumn;
+      sortDir = 'ascending';
+    }
+  }
+
+  function filterOrgs(orgs: OrgList, search: string): OrgList {
+    return orgs.filter((org) => org.name.toLowerCase().includes(search.toLowerCase()));
+  }
+
+  function sortOrgs(orgs: OrgList, sortColumn: Column, sortDir: Dir): OrgList {
+    const data = [... orgs];
+    let mult = sortDir === 'ascending' ? 1 : -1;
+    data.sort((a, b) => {
+      if (sortColumn === 'members') {
+        return (a.memberCount - b.memberCount) * mult;
+      } else if (sortColumn === 'name') {
+        const comp = a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
+        return comp * mult;
+      } else if (sortColumn === 'created_at') {
+        const comp = a.createdDate < b.createdDate ? -1 : a.createdDate > b.createdDate ? 1 : 0;
+        return comp * mult;
+      }
+      return 0;
+    });
+    return data;
+  }
+
+  $: filteredOrgs = $orgs ? filterOrgs($orgs, $queryParamValues.search) : [];
+  $: displayOrgs = sortOrgs(filteredOrgs, sortColumn, sortDir);
+</script>
+
+<!--
+TODO:
+
+* Sort options: name, created date, # users
+* Paging
+-->
+
+<Page wide title={$t('org.table.title')}>
+  <h1 class="text-3xl text-left grow max-w-full mb-4 flex gap-4 items-center">
+    {$t('org.table.title')}
+    <Icon icon="i-mdi-account-group-outline" size="text-5xl" />
+  </h1>
+
+  <div class="mt-4">
+    <FilterBar
+      searchKey="search"
+      filterKeys={['search']}
+      filters={queryParamValues}
+      filterDefaults={defaultQueryParamValues}
+    />
+  </div>
+
+  <div class="divider" />
+  <div class="overflow-x-auto @container scroll-shadow">
+    <table class="table table-lg">
+      <thead>
+        <tr class="bg-base-200">
+          <th on:click={() => handleSortClick('name')} class="cursor-pointer hover:bg-base-300">
+            {$t('org.table.name')}
+            <span class:invisible={sortColumn !== 'name'}  class="{`i-mdi-sort-${sortDir}`} text-xl align-[-5px] ml-2" />
+          </th>
+          <th on:click={() => handleSortClick('members')} class="cursor-pointer hover:bg-base-300 hidden @md:table-cell">
+            {$t('org.table.members')}
+            <span class:invisible={sortColumn !== 'members'} class="{`i-mdi-sort-${sortDir}`} text-xl align-[-5px] ml-2" />
+          </th>
+          <th on:click={() => handleSortClick('created_at')} class="cursor-pointer hover:bg-base-300 hidden @xl:table-cell">
+            {$t('org.table.created_at')}
+            <span class:invisible={sortColumn !== 'created_at'}  class="{`i-mdi-sort-${sortDir}`} text-xl align-[-5px] ml-2" />
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each displayOrgs as org}
+          <tr>
+            <td>
+                <a class="link" href={`/org/${org.id}`}>
+                  {org.name}
+                </a>
+            </td>
+            <td class="hidden @md:table-cell">
+              {$number(org.memberCount)}
+            </td>
+            <td class="hidden @xl:table-cell">
+              {$date(org.createdDate)}
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+</Page>

frontend/src/routes/(authenticated)/org/list/+page.ts

@@ -0,0 +1,28 @@
+import { getClient, graphql } from '$lib/gql';
+
+import type {PageLoadEvent} from './$types';
+import { tryMakeNonNullable } from '$lib/util/store';
+
+export type OrgListSearchParams = {
+  search: string,
+};
+
+export async function load(event: PageLoadEvent) {
+  const client = getClient();
+  const orgQueryResult = await client
+    .awaitedQueryStore(event.fetch,
+      graphql(`
+        query orgListPage {
+          orgs {
+            id
+            name
+            createdDate
+            memberCount
+          }
+        }
+      `),
+    {}
+    );
+  const nonNullableOrgs = tryMakeNonNullable(orgQueryResult.orgs);
+  return {orgs: nonNullableOrgs};
+}

frontend/tailwind.config.cjs

@@ -16,6 +16,7 @@ module.exports = {
         'winter': {
           ...require("daisyui/src/theming/themes")["winter"],
           "warning": "#FFBE00", // warning color from corporate, because it has much better contrast
+          "primary": "#0058BF", // easier on the eyes
         },
       },
       {