From e64728668853e7b3d984ff18591628f11284f55a Mon Sep 17 00:00:00 2001
From: Robin Munn <rmunn@pobox.com>
Date: Thu, 30 May 2024 14:54:25 +0700
Subject: [PATCH] Improve OrgRoleSelect

Now it can be used in forms (with a label) and in tables (without label)
and look good in both locations.
---
 frontend/src/lib/forms/OrgRoleSelect.svelte        | 14 ++++++++++++++
 .../org/[org_id]/AddOrgMember.svelte               |  2 +-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/forms/OrgRoleSelect.svelte b/frontend/src/lib/forms/OrgRoleSelect.svelte
index 4e028221a..7cb701d89 100644
--- a/frontend/src/lib/forms/OrgRoleSelect.svelte
+++ b/frontend/src/lib/forms/OrgRoleSelect.svelte
@@ -1,13 +1,26 @@
 <script lang="ts">
   import { OrgRole } from '$lib/gql/types';
   import t from '$lib/i18n';
+  import Select from './Select.svelte';
 
   export let id = 'role';
   export let value: OrgRole;
   export let disabled = false;
   export let verbose = false;
+  export let withLabel = false;
+  export let error: string | string[] | undefined = undefined;
 </script>
 
+{#if withLabel}
+<Select {id} bind:value label={$t('org_role.label')} {error}>
+  <option value={OrgRole.User}>
+    {$t(verbose ? 'org_role.user_description' : 'org_role.user')}
+  </option>
+  <option value={OrgRole.Admin}>
+    {$t(verbose ? 'org_role.admin_description' : 'org_role.admin')}
+  </option>
+</Select>
+{:else}
 <select {disabled} bind:value {id} class="select select-bordered" on:change>
   <option value={OrgRole.User}>
     {$t(verbose ? 'org_role.user_description' : 'org_role.user')}
@@ -16,3 +29,4 @@
     {$t(verbose ? 'org_role.admin_description' : 'org_role.admin')}
   </option>
 </select>
+{/if}
diff --git a/frontend/src/routes/(authenticated)/org/[org_id]/AddOrgMember.svelte b/frontend/src/routes/(authenticated)/org/[org_id]/AddOrgMember.svelte
index 91a26bf3c..6da825dd3 100644
--- a/frontend/src/routes/(authenticated)/org/[org_id]/AddOrgMember.svelte
+++ b/frontend/src/routes/(authenticated)/org/[org_id]/AddOrgMember.svelte
@@ -100,7 +100,7 @@
       autofocus
     />
   {/if}
-  <OrgRoleSelect bind:value={$form.role} error={errors.role} />
+  <OrgRoleSelect withLabel bind:value={$form.role} error={errors.role} />
   <span slot="submitText">
     {#if $form.usernameOrEmail.includes('@')}
       {$t('org_page.add_user.submit_button_email')}