Redesign crud tables

e2e/tests/admin/alerts.spec.ts

@@ -45,7 +45,7 @@ test.describe("The Admin Alerts Page", () => {
 
  await ap.goto();
 
- const title = ap.page.locator("h1");
+ const title = ap.page.locator('[data-testid="tablenav-title"]');
  await expect(title).toHaveText("Alerts");
  });
  });

e2e/tests/admin/apikeys.spec.ts

@@ -45,7 +45,7 @@ test.describe("The Admin API Keys Page", () => {
 
  await ap.goto();
 
- const title = ap.page.locator("h1");
+ const title = ap.page.locator('[data-testid="tablenav-title"]');
  await expect(title).toHaveText("API Keys");
  });
  });

e2e/tests/admin/organizations.spec.ts

@@ -45,7 +45,7 @@ test.describe("The Admin Organizations Page", () => {
 
  await ap.goto();
 
- const title = ap.page.locator("h1");
+ const title = ap.page.locator('[data-testid="tablenav-title"]');
  await expect(title).toHaveText("Organizations");
  });
  });

e2e/tests/admin/poker-games.spec.ts

@@ -45,7 +45,7 @@ test.describe("The Admin Poker Games Page", () => {
 
  await ap.goto();
 
- const title = ap.page.locator("h1");
+ const title = ap.page.locator('[data-testid="tablenav-title"]');
  await expect(title).toHaveText("Battles");
  });
  });

e2e/tests/admin/team.spec.ts

@@ -46,7 +46,9 @@ test.describe("The Admin Team Page", () => {
  const team = await registeredPage.createTeam(testTeamName);
 
  await ap.goto(team.id);
- await expect(ap.page.locator("h1")).toContainText(testTeamName);
+ await expect(
+ ap.page.locator('[data-testid="tablenav-title"]').nth(0),
+ ).toContainText(testTeamName);
  });
  });
 });

e2e/tests/admin/teams.spec.ts

@@ -45,7 +45,7 @@ test.describe("The Admin Teams Page", () => {
 
  await ap.goto();
 
- const title = ap.page.locator("h1");
+ const title = ap.page.locator('[data-testid="tablenav-title"]');
  await expect(title).toHaveText("Teams");
  });
  });

e2e/tests/admin/users.spec.ts

@@ -45,8 +45,8 @@ test.describe("The Admin Users Page", () => {
 
  await ap.goto();
 
- const title = ap.page.locator("h1");
- await expect(title).toHaveText("Users");
+ const title = ap.page.locator('[data-testid="tablenav-title"]');
+ await expect(title).toHaveText("Registered Users");
  });
  });
 });

e2e/tests/teams.spec.ts

@@ -19,10 +19,14 @@ test.describe("Teams page", () => {
  await teamsPage.goto();
 
  await expect(
- teamsPage.page.locator("h2", { hasText: "Organizations" }),
+ teamsPage.page.locator('[data-testid="tablenav-title"]', {
+ hasText: "Organizations",
+ }),
  ).toBeVisible();
  await expect(
- teamsPage.page.locator("h2", { hasText: "Teams" }),
+ teamsPage.page.locator('[data-testid="tablenav-title"]', {
+ hasText: "Teams",
+ }),
  ).toBeVisible();
  });
 
@@ -38,13 +42,19 @@ test.describe("Teams page", () => {
  });
 
  await expect(
- teamsPage.page.locator("h2", { hasText: "Departments" }),
+ teamsPage.page.locator('[data-testid="tablenav-title"]', {
+ hasText: "Departments",
+ }),
  ).toBeVisible();
  await expect(
- teamsPage.page.locator("h2", { hasText: "Teams" }),
+ teamsPage.page.locator('[data-testid="tablenav-title"]', {
+ hasText: "Teams",
+ }),
  ).toBeVisible();
  await expect(
- teamsPage.page.locator("h2", { hasText: "Users" }),
+ teamsPage.page.locator('[data-testid="tablenav-title"]', {
+ hasText: "Users",
+ }),
  ).toBeVisible();
  });
  });
@@ -68,7 +78,9 @@ test.describe("Teams page", () => {
  teamsPage.page.locator("h2", { hasText: "Storyboards" }),
  ).toBeVisible();
  await expect(
- teamsPage.page.locator("h2", { hasText: "Users" }),
+ teamsPage.page.locator('[data-testid="tablenav-title"]', {
+ hasText: "Users",
+ }),
  ).toBeVisible();
  });
  });

ui/src/components/global/AdminPageLayout.svelte → ui/src/components/AdminPageLayout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
- import { AppConfig, appRoutes } from '../../config';
- import LL from '../../i18n/i18n-svelte';
+ import { AppConfig, appRoutes } from '../config';
+ import LL from '../i18n/i18n-svelte';
 
  export let activePage = 'admin';
 

ui/src/components/icons/EyeIcon.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+ let klass = 'w-6 h-6';
+ export { klass as class };
+</script>
+
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 24 24"
+ fill="currentColor"
+ class="{klass}"
+>
+ <path d="M12 15a3 3 0 100-6 3 3 0 000 6z"></path>
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 010-1.113zM17.25 12a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0z"
+ ></path>
+</svg>

ui/src/components/table/CrudActions.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+ import LL from '../../i18n/i18n-svelte';
+ import EditIcon from '../icons/EditIcon.svelte';
+ import TrashIcon from '../icons/TrashIcon.svelte';
+ import EyeIcon from '../icons/EyeIcon.svelte';
+
+ export let detailsLink = '';
+ export let editBtnEnabled = true;
+ export let editBtnClickHandler = () => {};
+ export let editBtnTestId = 'edit';
+ export let deleteBtnEnabled = true;
+ export let deleteBtnClickHandler = () => {};
+ export let deleteBtnTestId = 'delete';
+</script>
+
+<div class="flex gap-2 justify-end items-center">
+ <slot />
+ {#if detailsLink !== ''}
+ <a href="{detailsLink}" class="hover:text-blue-500">
+ <EyeIcon />
+ <span class="sr-only">View Details</span>
+ </a>
+ {/if}
+ {#if editBtnEnabled}
+ <button
+ on:click="{editBtnClickHandler}"
+ class="hover:text-green-500"
+ data-testid="{editBtnTestId}"
+ >
+ <span class="sr-only">{$LL.edit()}</span>
+ <EditIcon />
+ </button>
+ {/if}
+ {#if deleteBtnEnabled}
+ <button
+ on:click="{deleteBtnClickHandler}"
+ class="hover:text-red-500"
+ data-testid="{deleteBtnTestId}"
+ >
+ <span class="sr-only">{$LL.delete()}</span>
+ <TrashIcon />
+ </button>
+ {/if}
+</div>

ui/src/components/table/HeadCol.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+ export let type = 'default';
+</script>
+
+{#if type === 'default'}
+ <th scope="col" class="p-4">
+ <slot />
+ </th>
+{:else if type === 'action'}
+ <th scope="col" class="relative px-2 py-2">
+ <slot />
+ </th>
+{/if}

ui/src/components/global/table/RowCol.svelte → ui/src/components/table/RowCol.svelte

@@ -3,11 +3,11 @@
 </script>
 
 {#if type === 'default'}
- <td class="px-6 py-4 whitespace-nowrap">
+ <td class="px-4 py-3 whitespace-nowrap font-medium">
  <slot />
  </td>
 {:else if type === 'action'}
- <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+ <td class="px-4 py-3 whitespace-nowrap text-right font-medium">
  <slot />
  </td>
 {/if}

ui/src/components/table/Table.svelte

@@ -0,0 +1,10 @@
+<div class="overflow-x-auto">
+ <table class="w-full text-sm text-left text-gray-700 dark:text-gray-200">
+ <thead
+ class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"
+ >
+ <slot name="header" />
+ </thead>
+ <slot name="body" />
+ </table>
+</div>

ui/src/components/table/TableContainer.svelte

@@ -0,0 +1,5 @@
+<div
+ class="bg-white dark:bg-gray-800 relative shadow-md sm:rounded-lg overflow-hidden"
+>
+ <slot />
+</div>