Add basic (very basic) table view to org list

Next we'll add filtering and sorting capabilities
sillsdev · May 31, 2024 · 7071cc1 · 7071cc1
1 parent fdac31e
commit 7071cc1
Showing 1 changed file with 36 additions and 0 deletions.
diff --git a/frontend/src/routes/(authenticated)/org/list/+page.svelte b/frontend/src/routes/(authenticated)/org/list/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import t, { date, number } from '$lib/i18n';
   import type { PageData } from './$types';
 
   export let data: PageData;
@@ -25,3 +26,38 @@ TODO:
 * Table view
 * Paging
 -->
+
+
+<div class="overflow-x-auto @container scroll-shadow">
+  <table class="table table-lg">
+    <thead>
+      <tr class="bg-base-200">
+        <th>{$t('project.table.name')}</th>
+        <th class="hidden @md:table-cell">{$t('project.table.users')}</th>
+        <th class="hidden @xl:table-cell">
+            {$t('project.table.created_at')}
+            <span class="i-mdi-sort-descending text-xl align-[-5px] ml-2" />
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      {#each $orgs as org}
+        <tr>
+          <td>
+            <span class="flex gap-2 items-center">
+                <a class="link" href={`/org/${org.id}`}>
+                  {org.name}
+                </a>
+            </span>
+          </td>
+          <td class="hidden @md:table-cell">
+            {$number(org.members.length)}
+          </td>
+          <td class="hidden @xl:table-cell">
+            {$date(org.createdDate)}
+          </td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>