Merge pull request #2333 from appwrite/feat-SER-338-add-create-more-for-columns

Author: ItzNotABug

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte

@@ -52,7 +52,7 @@
     import EditColumn from './columns/edit.svelte';
     import RowActivity from './rows/activity.svelte';
     import EditRowPermissions from './rows/editPermissions.svelte';
-    import { Dialog, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { Dialog, Layout, Typography, Selector } from '@appwrite.io/pink-svelte';
     import { Button, Seekbar } from '$lib/elements/forms';
     import { generateFakeRecords, generateColumns } from '$lib/helpers/faker';
     import { addNotification } from '$lib/stores/notifications';
@@ -70,6 +70,7 @@
     let createIndex: CreateIndex;
     let createColumn: CreateColumn;
     let selectedOption: Option['name'] = 'String';
+    let createMoreColumns = false;
 
     /**
      * adding a lot of fake data will trigger the realtime below
@@ -327,6 +328,10 @@
 
         spreadsheetRenderKey.set(hash(rowIds));
     }
+
+    $: if (!$showCreateColumnSheet.show) {
+        createMoreColumns = false;
+    }
 </script>
 
 <svelte:head>
@@ -336,20 +341,27 @@
 <slot />
 
 <SideSheet
-    closeOnBlur
+    closeOnBlur={false}
     title={$showCreateColumnSheet.title}
     titleBadge={selectedOption === 'Relationship' ? 'Experimental' : undefined}
     bind:show={$showCreateColumnSheet.show}
     submit={{
         text: 'Create',
-        onClick: async () => {
-            await createColumn?.submit();
-        },
+        onClick: async () => await createColumn?.submit(),
         disabled: !selectedOption
     }}>
+    {#snippet footer()}
+        <Layout.Stack inline direction="row" alignItems="center">
+            <Selector.Switch
+                id="create-more-columns"
+                bind:checked={createMoreColumns}
+                label="Create more" />
+        </Layout.Stack>
+    {/snippet}
     <CreateColumn
         bind:selectedOption
         bind:this={createColumn}
+        bind:createMore={createMoreColumns}
         column={$showCreateColumnSheet.column}
         columns={$showCreateColumnSheet.columns}
         direction={$showCreateColumnSheet.direction}

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createColumn.svelte

@@ -19,6 +19,7 @@
         columnId = $bindable(null),
         columnsOrder = $bindable(null),
         selectedOption = $bindable('String'),
+        createMore = $bindable(false),
         onColumnsReorder = null
     }: {
         column?: Columns;
@@ -27,6 +28,7 @@
         columnsOrder?: string[];
         direction: ColumnDirection;
         selectedOption: Option['name'];
+        createMore?: boolean;
         onColumnsReorder?: (newOrder: string[]) => void;
     } = $props();
 
@@ -148,12 +150,19 @@
                 message: `Column ${key ?? data?.key} has been created`
             });
             trackEvent(Submit.ColumnCreate);
+
+            if (createMore) {
+                init();
+                return true; // keep sheet open
+            }
+            return false; // close sheet
         } catch (e) {
             addNotification({
                 type: 'error',
                 message: e.message
             });
             trackError(e, Submit.ColumnCreate);
+            return true; // keep open on error
         }
     }