feat: confirm before update

undb-io · Aug 31, 2024 · 1e4a35a · 1e4a35a
1 parent abd4b1b
commit 1e4a35a
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 1 deletion.
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/button-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/button-cell.svelte
@@ -1,14 +1,17 @@
 <script lang="ts">
   import { trpc } from "$lib/trpc/client"
   import { createMutation } from "@tanstack/svelte-query"
-  import { ButtonField, RecordDO } from "@undb/table"
+  import { ButtonField, FieldIdVo, RecordDO } from "@undb/table"
   import { toast } from "svelte-sonner"
   import { gridViewStore } from "../grid-view.store"
   import { Button } from "$lib/components/ui/button"
   import { LoaderCircleIcon } from "lucide-svelte"
   import { recordsStore } from "$lib/store/records.store"
   import { getTable } from "$lib/store/table.store"
   import { objectify } from "radash"
+  import * as AlertDialog from "$lib/components/ui/alert-dialog"
+  import FieldPicker from "../../field-picker/field-picker.svelte"
+  import FieldControl from "../../field-control/field-control.svelte"
 
   export let tableId: string
   export let field: ButtonField
@@ -30,6 +33,14 @@
   })
 
   function handleClick() {
+    if (field.shouldConfirm) {
+      confirm = true
+    } else {
+      handleUpdate()
+    }
+  }
+
+  function handleUpdate() {
     const option = field.option.into(undefined)
     if (!option) return
     const action = option.action
@@ -47,6 +58,8 @@
   }
 
   $: disabled = record ? field.getIsDisabled($table, record) : false
+
+  let confirm = false
 </script>
 
 <div class={$$restProps.class}>
@@ -58,3 +71,37 @@
     {/if}
   </Button>
 </div>
+
+<AlertDialog.Root bind:open={confirm}>
+  <AlertDialog.Content>
+    <AlertDialog.Header>
+      <AlertDialog.Title>Confirm to update</AlertDialog.Title>
+      <AlertDialog.Description>The following fields will be updated when you click the button.</AlertDialog.Description>
+    </AlertDialog.Header>
+
+    {#if field.option.isSome()}
+      {#each field.option.unwrap().action.values as value}
+        {@const field = value.field ? $table.schema.getFieldById(new FieldIdVo(value.field)).unwrap() : undefined}
+        <div class="flex items-center gap-2">
+          <FieldPicker value={value.field} disabled />
+          {#if field}
+            <FieldControl
+              class="text-xs"
+              placeholder="Value to update..."
+              value={value.value}
+              {field}
+              disabled
+              readonly
+              tableId={$table.id.value}
+            />
+          {/if}
+        </div>
+      {/each}
+    {/if}
+
+    <AlertDialog.Footer>
+      <AlertDialog.Cancel on:click={() => (confirm = false)}>Cancel</AlertDialog.Cancel>
+      <AlertDialog.Action on:click={handleUpdate}>Continue</AlertDialog.Action>
+    </AlertDialog.Footer>
+  </AlertDialog.Content>
+</AlertDialog.Root>
diff --git a/packages/table/src/modules/schema/fields/variants/button-field/button-field.vo.ts b/packages/table/src/modules/schema/fields/variants/button-field/button-field.vo.ts
@@ -114,6 +114,10 @@ export class ButtonField extends AbstractField<ButtonFieldValue, undefined, IBut
     visitor.button(this)
   }
 
+  get shouldConfirm() {
+    return this.option.into(undefined)?.action.confirm ?? false
+  }
+
   override $onOtherFieldDeleted(field: Field) {
     const disabled = this.option.into(undefined)?.disabled
     const action = this.option.into(undefined)?.action