new collection refactor

packages/web/public/global.css

@@ -96,7 +96,7 @@ body {
   max-width: 16.6666%;
 }
 
-.largeFormMarker input[type='text'] {
+.largeFormMarker input[type='text'], .largeFormMarker input[type='number'], .largeFormMarker input[type='password'], .largeFormMarker textarea {
   width: 100%;
   padding: 10px 10px;
   font-size: 14px;
@@ -105,13 +105,6 @@ body {
   border: 1px solid var(--theme-border);
 }
 
-.largeFormMarker input[type='password'] {
-  width: 100%;
-  padding: 10px 10px;
-  font-size: 14px;
-  box-sizing: border-box;
-  border-radius: 4px;
-}
 
 .largeFormMarker select {
   width: 100%;
@@ -121,15 +114,6 @@ body {
   border-radius: 4px;
 }
 
-.largeFormMarker textarea {
-  width: 100%;
-  padding: 10px 10px;
-  font-size: 14px;
-  box-sizing: border-box;
-  border-radius: 4px;
-  border: 1px solid var(--theme-border);
-}
-
 body *::-webkit-scrollbar {
   height: 0.8em;
   width: 0.8em;

packages/web/src/appobj/DatabaseAppObject.svelte

@@ -93,17 +93,7 @@
     const handleNewCollection = () => {
       showModal(NewCollectionModal, {
         driver,
-        onConfirm: async values => {
-          runOperationOnDatabase(
-            { conid: connection._id, database: name },
-            {
-              type: 'createCollection',
-              collection: values,
-            }
-          );
-
-          // saveScriptToDatabase({ conid: connection._id, database: name }, `db.createCollection('${newCollection}')`);
-        },
+        dbid: { conid: connection._id, database: name },
       });
     };
 

packages/web/src/commands/stdCommands.ts

@@ -294,24 +294,7 @@ registerCommand({
 
     showModal(NewCollectionModal, {
       driver,
-      onConfirm: async values => {
-        // await apiCall('database-connections/run-script', { ...dbid, sql: `db.createCollection('${newCollection}')` });
-        const resp = await apiCall('database-connections/run-operation', {
-          ...dbid,
-          operation: {
-            type: 'createCollection',
-            collection: values,
-          },
-        });
-
-        const { errorMessage } = resp || {};
-        if (errorMessage) {
-          showModal(ErrorMessageModal, { title: 'Error when executing operation', message: errorMessage });
-        } else {
-          showSnackbarSuccess('Saved to database');
-          apiCall('database-connections/sync-model', dbid);
-        }
-      },
+      dbid,
     });
   },
 });

packages/web/src/forms/FormArgument.svelte

@@ -4,6 +4,7 @@
   import FormCheckboxField from './FormCheckboxField.svelte';
   import FormSelectField from './FormSelectField.svelte';
   import FormTextField from './FormTextField.svelte';
+  import FormStringList from './FormStringList.svelte';
 
   export let arg;
   export let namePrefix;
@@ -12,9 +13,29 @@
 </script>
 
 {#if arg.type == 'text'}
-  <FormTextField label={arg.label} {name} defaultValue={arg.default} focused={arg.focused} />
+  <FormTextField
+    label={arg.label}
+    {name}
+    defaultValue={arg.default}
+    focused={arg.focused}
+    placeholder={arg.placeholder}
+  />
+{:else if arg.type == 'stringlist'}
+  <FormStringList
+    label={arg.label}
+    addButtonLabel={arg.addButtonLabel}
+    {name}
+    placeholder={arg.placeholder}
+  />
 {:else if arg.type == 'number'}
-  <FormTextField label={arg.label} type="number" {name} defaultValue={arg.default} focused={arg.focused} />
+  <FormTextField
+    label={arg.label}
+    type="number"
+    {name}
+    defaultValue={arg.default}
+    focused={arg.focused}
+    placeholder={arg.placeholder}
+  />
 {:else if arg.type == 'checkbox'}
   <FormCheckboxField label={arg.label} {name} defaultValue={arg.default} />
 {:else if arg.type == 'select'}

packages/web/src/forms/FormStringList.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import _ from 'lodash';
+
+  import { getFormContext } from './FormProviderCore.svelte';
+  import TextField from './TextField.svelte';
+  import InlineButton from '../buttons/InlineButton.svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
+  import FormStyledButton from '../buttons/FormStyledButton.svelte';
+
+  export let name;
+  export let label;
+  export let addButtonLabel;
+  export let placeholder;
+  export let templateProps;
+
+  const { template, values, setFieldValue } = getFormContext();
+
+  $: stringList = $values[name] ?? [];
+</script>
+
+<svelte:component this={template} type="text" {label} {...templateProps}>
+  {#each stringList as value, index}
+    <div class='input-line-flex'>
+      <TextField
+        {value}
+        {placeholder}
+        on:input={e => {
+          const newValues = stringList.map((v, i) => (i === index ? e.target['value'] : v));
+          setFieldValue(name, newValues);
+        }}
+      />
+
+      <InlineButton
+        on:click={() => {
+          setFieldValue(name, [...stringList.slice(0, index), ...stringList.slice(index + 1)]);
+        }}
+      >
+        <FontIcon icon="icon delete" />
+      </InlineButton>
+    </div>
+  {/each}
+
+  <FormStyledButton
+    value={addButtonLabel}
+    on:click={() => {
+      setFieldValue(name, [...stringList, '']);
+    }}
+  />
+</svelte:component>
+
+<style>
+    .input-line-flex {
+        display: flex;
+    }
+</style>

packages/web/src/modals/NewCollectionModal.svelte

@@ -5,15 +5,39 @@
   import FormProvider from '../forms/FormProvider.svelte';
   import FormSubmit from '../forms/FormSubmit.svelte';
   import FormTextField from '../forms/FormTextField.svelte';
+  import { apiCall } from '../utility/api';
+  import { showSnackbarSuccess } from '../utility/snackbar';
+  import ErrorMessageModal from './ErrorMessageModal.svelte';
   import ModalBase from './ModalBase.svelte';
-  import { closeCurrentModal } from './modalTools';
+  import { closeCurrentModal, showModal } from './modalTools';
 
-  export let onConfirm;
   export let driver;
+  export let dbid;
+
+  let isSaving = false;
 
   const handleSubmit = async values => {
+    isSaving = true;
+    try {
+      const resp = await apiCall('database-connections/run-operation', {
+        ...dbid,
+        operation: {
+          type: 'createCollection',
+          collection: values,
+        },
+      });
+
+      const { errorMessage } = resp || {};
+      if (errorMessage) {
+        showModal(ErrorMessageModal, { title: 'Error when executing operation', message: errorMessage });
+      } else {
+        showSnackbarSuccess('Saved to database');
+        apiCall('database-connections/sync-model', dbid);
         closeCurrentModal();
-    onConfirm(values);
+      }
+    } finally {
+      isSaving = false;
+    }
   };
 </script>
 
@@ -26,7 +50,7 @@
     <FormArgumentList args={driver?.newCollectionFormParams} />
 
     <svelte:fragment slot="footer">
-      <FormSubmit value="OK" on:click={e => handleSubmit(e.detail)} />
+      <FormSubmit value="OK" on:click={e => handleSubmit(e.detail)} disabled={isSaving} />
       <FormStyledButton type="button" value="Cancel" on:click={closeCurrentModal} />
     </svelte:fragment>
   </ModalBase>