Use instructions dynamically in svelte:component

Also fixed some things to make TS happy.
sillsdev · Aug 30, 2024 · c47e23e · c47e23e
1 parent 68c9131
commit c47e23e
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 6 deletions.
diff --git a/source/SIL.AppBuilder.Portal/src/routes/(authenticated)/tasks/[product_id]/+page.server.ts b/source/SIL.AppBuilder.Portal/src/routes/(authenticated)/tasks/[product_id]/+page.server.ts
@@ -13,6 +13,20 @@ type Fields = {
   langCode?: string;
 }
 
+type File = {
+  buildId: number;
+  type: string;
+  size: string;
+  url: string;
+  id: number;
+};
+
+type User = {
+  id: number;
+  name: string;
+  email: string;
+};
+
 export const load = (async ({ params, url, locals }) => {
   return {
     actions: [],
@@ -22,7 +36,7 @@ export const load = (async ({ params, url, locals }) => {
       name: "Test Project",
       description: "a test project"
     } as Fields,
-    files: [],
-    reviewers: []
+    files: [] as File[],
+    reviewers: [] as User[]
   }
 }) satisfies PageServerLoad;
diff --git a/source/SIL.AppBuilder.Portal/src/routes/(authenticated)/tasks/[product_id]/+page.svelte b/source/SIL.AppBuilder.Portal/src/routes/(authenticated)/tasks/[product_id]/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { PageData } from './$types';
-  import Waiting from "./instructions/Waiting.svelte";
+  import { instructions } from './instructions';
 
   export let data: PageData;
 </script>
@@ -104,8 +104,8 @@
     {/if}
   </div>
   {#if data.instructions}
-  <div class="py-2">
-    <Waiting />
+  <div class="py-2" id="instructions">
+    <svelte:component this={instructions[data.instructions]} />
   </div>
   {/if}
   {#if data.files?.length > 0}
@@ -162,8 +162,18 @@
   {/if}
 </div>
 
-<style>
+<style lang=postcss>
   .label-text {
     font-weight: bold;
   }
+  /*this VVV technique allows css rules to break svelte scoping downwards*/
+  #instructions :global(ul) {
+    @apply pl-10 list-disc;
+  }
+  #instructions :global(ol) {
+    @apply pl-10 list-decimal;
+  }
+  #instructions :global(h3) {
+    @apply text-info;
+  }
 </style>