formats, use basic accordion

bmlt-enabled · Nov 12, 2024 · 48fad2c · 48fad2c
1 parent e8fae48
commit 48fad2c
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 107 deletions.
diff --git a/src/resources/js/components/BasicAccordion.svelte b/src/resources/js/components/BasicAccordion.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+  export let header: string;
+  export let open: boolean = false;
+
+  function accordionToggle() {
+    open = !open;
+  }
+</script>
+
+<div class="mb-2 w-full rounded-md border border-gray-700 bg-gray-800">
+  <button
+    type="button"
+    aria-expanded={open}
+    aria-label="Toggle accordion"
+    class="flex w-full items-center justify-between rounded-md px-4 py-4 text-left text-sm font-semibold text-gray-300 hover:bg-gray-700 focus:outline-none"
+    on:click={accordionToggle}
+    on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && accordionToggle()}
+  >
+    <span class="w-full">{header}</span>
+
+    {#if open}
+      <svg class="h-3 w-3 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5" />
+      </svg>
+    {:else}
+      <svg class="h-3 w-3 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
+      </svg>
+    {/if}
+  </button>
+
+  <div class={open ? 'w-full bg-gray-800 px-4 py-2 text-gray-200' : 'hidden'}>
+    <slot />
+  </div>
+
+  <div class="w-full border-t border-gray-700" />
+</div>
diff --git a/src/resources/js/components/BmltAccordion.svelte b/src/resources/js/components/BmltAccordion.svelte
diff --git a/src/resources/js/components/FormatForm.svelte b/src/resources/js/components/FormatForm.svelte
@@ -2,7 +2,7 @@
   import { validator } from '@felte/validator-yup';
   import { createForm } from 'felte';
   import { AccordionItem, Accordion, Button, Helper, Input, Label, Select } from 'flowbite-svelte';
-  import BmltAccordion from './BmltAccordion.svelte';
+  import BasicAccordion from './BasicAccordion.svelte';
 
   import { createEventDispatcher } from 'svelte';
   import * as yup from 'yup';
@@ -194,52 +194,38 @@
         {selectedFormat?.id}
       </div>
     {/if}
-      <div id="properties-panel" class="overflow-auto hide-scrollbar">
-          <BmltAccordion ItemName="Deutsch">
-              Deutsch
-          </BmltAccordion>
-          <BmltAccordion ItemName="Dansk">
-              Dansk
-          </BmltAccordion>
-          <BmltAccordion ItemName="English">
-              English
-          </BmltAccordion>
-      </div>
     <div class="md:col-span-2">
-      <Accordion multiple>
-        {#each allLanguages as lang}
-          <AccordionItem open={$translations.getLanguage() === lang}>
-            <span slot="header">{mappings[lang]}</span>
-            <div>
-              <Label for="{lang}_key" class="mb-2">{getLabel('keyTitle', lang)}</Label>
-              <Input type="text" id="{lang}_key" name="{lang}_key" disabled={isReservedKey(lang)} />
-              <Helper class="mb-2" color="red">
-                {#if $errors[lang + '_key']}
-                  {$errors[lang + '_key']}
-                {/if}
-              </Helper>
-            </div>
-            <div>
-              <Label for="{lang}_name" class="mb-2">{getLabel('nameTitle', lang)}</Label>
-              <Input type="text" id="{lang}_name" name="{lang}_name" />
-              <Helper class="mb-2" color="red">
-                {#if $errors[lang + '_name']}
-                  {$errors[lang + '_name']}
-                {/if}
-              </Helper>
-            </div>
-            <div>
-              <Label for="{lang}_description" class="mb-2">{getLabel('descriptionTitle', lang)}</Label>
-              <Input type="text" id="{lang}_description" name="{lang}_description" />
-              <Helper class="mb-2" color="red">
-                {#if $errors[lang + '_description']}
-                  {$errors[lang + '_description']}
-                {/if}
-              </Helper>
-            </div>
-          </AccordionItem>
-        {/each}
-      </Accordion>
+      {#each allLanguages as lang}
+        <BasicAccordion header={mappings[lang]} open={$translations.getLanguage() === lang}>
+          <div>
+            <Label for="{lang}_key" class="mb-2">{getLabel('keyTitle', lang)}</Label>
+            <Input type="text" id="{lang}_key" name="{lang}_key" disabled={isReservedKey(lang)} />
+            <Helper class="mb-2" color="red">
+              {#if $errors[lang + '_key']}
+                {$errors[lang + '_key']}
+              {/if}
+            </Helper>
+          </div>
+          <div>
+            <Label for="{lang}_name" class="mb-2">{getLabel('nameTitle', lang)}</Label>
+            <Input type="text" id="{lang}_name" name="{lang}_name" />
+            <Helper class="mb-2" color="red">
+              {#if $errors[lang + '_name']}
+                {$errors[lang + '_name']}
+              {/if}
+            </Helper>
+          </div>
+          <div>
+            <Label for="{lang}_description" class="mb-2">{getLabel('descriptionTitle', lang)}</Label>
+            <Input type="text" id="{lang}_description" name="{lang}_description" />
+            <Helper class="mb-2" color="red">
+              {#if $errors[lang + '_description']}
+                {$errors[lang + '_description']}
+              {/if}
+            </Helper>
+          </div>
+        </BasicAccordion>
+      {/each}
     </div>
     {#if noFormatTranslations}
       <div class="md:col-span-2">

diff --git a/src/resources/js/routes/Account.svelte b/src/resources/js/routes/Account.svelte
@@ -13,6 +13,7 @@
   import { spinner } from '../stores/spinner';
   import { translations } from '../stores/localization';
   import type { User } from 'bmlt-root-server-client';
+  import BasicAccordion from '../components/BasicAccordion.svelte';
 
   const dispatch = createEventDispatcher<{ saved: { user: User } }>();
   let userType = 'unknown';
@@ -198,12 +199,9 @@
           </Button>
         </div>
       </div>
-      <Accordion>
-        <AccordionItem>
-          <span slot="header">{$translations.serviceBodiesWithEditableMeetings}</span>
-          <AccountServiceBodyList user={$authenticatedUser} />
-        </AccordionItem>
-      </Accordion>
+      <BasicAccordion header={$translations.serviceBodiesWithEditableMeetings}>
+        <AccountServiceBodyList user={$authenticatedUser} />
+      </BasicAccordion>
     </div>
   </form>
 </div>