fix: navigate after create view

apps/frontend/src/lib/components/blocks/table-header/table-header.svelte

@@ -234,8 +234,7 @@
             <CreateViewButton
               tableId={$table.id.value}
               viewNames={$table.views.views.map((v) => v.name.value)}
-              class="mt-0"
-              size="icon"
+              class="mt-0 p-0 hover:bg-transparent"
               variant="ghost"
             >
               <PlusCircleIcon class="h-4 w-4" />

apps/frontend/src/lib/components/blocks/view/create-view-button.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { invalidate } from "$app/navigation"
   import * as Form from "$lib/components/ui/form"
   import { Button } from "$lib/components/ui/button"
   import * as Popover from "$lib/components/ui/popover"
@@ -16,6 +15,7 @@
   import { hasPermission } from "$lib/store/space-member.store"
   import { LoaderCircleIcon } from "lucide-svelte"
   import ViewTypePicker from "./view-type-picker.svelte"
+  import { goto, invalidate } from "$app/navigation"
 
   let open = false
 
@@ -25,11 +25,12 @@
   const createViewMutation = createMutation({
     mutationFn: trpc.table.view.create.mutate,
     mutationKey: ["table", tableId, "createView"],
-    async onSuccess() {
+    async onSuccess(data) {
       viewNames = [...viewNames, $formData.name]
       toast.success("created view successfully")
       reset()
       await invalidate(`table:${tableId}`)
+      await goto(`/t/${tableId}/${data.viewId}`)
     },
     onError(e) {
       toast.error(e.message)

apps/frontend/src/lib/components/blocks/view/duplicate-view.svelte

@@ -2,23 +2,27 @@
   import { getTable, viewId } from "$lib/store/table.store"
   import { trpc } from "$lib/trpc/client"
   import { createMutation } from "@tanstack/svelte-query"
+  import { LoaderCircleIcon } from "lucide-svelte"
   import { duplicateViewCommand } from "@undb/commands"
   import { defaults, superForm } from "sveltekit-superforms"
   import { zodClient } from "sveltekit-superforms/adapters"
   import * as Form from "$lib/components/ui/form"
   import { Input } from "$lib/components/ui/input"
-  import { toggleModal, DUPLICATE_VIEW } from "$lib/store/modal.store"
+  import { closeModal, DUPLICATE_VIEW } from "$lib/store/modal.store"
   import { getNextName } from "@undb/utils"
   import { toast } from "svelte-sonner"
+  import { invalidate, goto } from "$app/navigation"
 
   const table = getTable()
 
   const duplicateViewMutation = createMutation({
     mutationKey: ["table", $viewId, "duplicateView"],
     mutationFn: trpc.table.view.duplicate.mutate,
-    onSuccess(data, variables, context) {
-      toggleModal(DUPLICATE_VIEW)
+    async onSuccess(data, variables, context) {
+      closeModal(DUPLICATE_VIEW)
       toast.success("View duplicated")
+      await invalidate(`table:${data.tableId}`)
+      await goto(`/t/${data.tableId}/${data.viewId}`)
     },
     onError(error, variables, context) {
       toast.error(error.message)
@@ -66,6 +70,11 @@
       <Form.FieldErrors />
     </Form.Field>
 
-    <Form.FormButton disabled={$duplicateViewMutation.isPending} class="w-full">Submit</Form.FormButton>
+    <Form.FormButton disabled={$duplicateViewMutation.isPending} class="w-full">
+      {#if $duplicateViewMutation.isPending}
+        <LoaderCircleIcon class="mr-2 size-4 animate-spin" />
+      {/if}
+      Duplicate</Form.FormButton
+    >
   </form>
 </div>

packages/command-handlers/src/handlers/create-table-view.command-handler.ts

@@ -1,20 +1,25 @@
-import { CreateTableViewCommand } from "@undb/commands"
+import { CreateTableViewCommand, type ICreateTableViewCommandOutput } from "@undb/commands"
 import { commandHandler } from "@undb/cqrs"
 import { singleton } from "@undb/di"
 import type { ICommandHandler } from "@undb/domain"
 import { injectTableService, type ITableService } from "@undb/table"
 
 @commandHandler(CreateTableViewCommand)
 @singleton()
-export class CreateTableViewCommandHandler implements ICommandHandler<CreateTableViewCommand, any> {
+export class CreateTableViewCommandHandler
+  implements ICommandHandler<CreateTableViewCommand, ICreateTableViewCommandOutput>
+{
   constructor(
     @injectTableService()
     private readonly service: ITableService,
   ) {}
 
-  async execute(command: CreateTableViewCommand): Promise<any> {
-    const table = await this.service.createTableView(command.input)
+  async execute(command: CreateTableViewCommand): Promise<ICreateTableViewCommandOutput> {
+    const { table, view } = await this.service.createTableView(command.input)
 
-    return table.id.value
+    return {
+      tableId: table.id.value,
+      viewId: view.id.value,
+    }
   }
 }

packages/command-handlers/src/handlers/duplicate-view.command-handler.ts

@@ -1,4 +1,4 @@
-import { DuplicateViewCommand } from "@undb/commands"
+import { DuplicateViewCommand, type IDuplicateViewCommandOutput } from "@undb/commands"
 import { commandHandler } from "@undb/cqrs"
 import { singleton } from "@undb/di"
 import type { ICommandHandler } from "@undb/domain"
@@ -7,18 +7,23 @@ import { TableIdVo, injectTableRepository, type ITableRepository } from "@undb/t
 
 @commandHandler(DuplicateViewCommand)
 @singleton()
-export class DuplicateViewCommandHandler implements ICommandHandler<DuplicateViewCommand, any> {
+export class DuplicateViewCommandHandler implements ICommandHandler<DuplicateViewCommand, IDuplicateViewCommandOutput> {
   public readonly logger = createLogger(DuplicateViewCommandHandler.name)
   constructor(
     @injectTableRepository()
     private readonly repo: ITableRepository,
   ) {}
 
-  async execute(command: DuplicateViewCommand): Promise<any> {
+  async execute(command: DuplicateViewCommand): Promise<IDuplicateViewCommandOutput> {
     const table = (await this.repo.findOneById(new TableIdVo(command.tableId))).unwrap()
 
-    const spec = table.$duplicateView(command)
+    const { spec, view } = table.$duplicateView(command)
 
     await this.repo.updateOneById(table, spec)
+
+    return {
+      tableId: table.id.value,
+      viewId: view.id.value,
+    }
   }
 }

packages/commands/src/create-table-view.command.ts

@@ -1,11 +1,18 @@
 import { Command, type CommandProps } from "@undb/domain"
-import { createTableViewDTO, type ICreateTableViewDTO } from "@undb/table"
+import { createTableViewDTO, tableId, viewId, type ICreateTableViewDTO } from "@undb/table"
 import { z } from "@undb/zod"
 
 export const createTableViewCommand = createTableViewDTO
 
 export type ICreateViewCommand = z.infer<typeof createTableViewCommand>
 
+export const createTableViewCommandOutput = z.object({
+  tableId: tableId,
+  viewId: viewId,
+})
+
+export type ICreateTableViewCommandOutput = z.infer<typeof createTableViewCommandOutput>
+
 export class CreateTableViewCommand extends Command {
   public readonly input: ICreateTableViewDTO
 

packages/commands/src/duplicate-view.command.ts

@@ -1,11 +1,18 @@
 import { Command, type CommandProps } from "@undb/domain"
-import { duplicateViewDTO } from "@undb/table"
+import { duplicateViewDTO, tableId, viewId } from "@undb/table"
 import { z } from "@undb/zod"
 
 export const duplicateViewCommand = duplicateViewDTO
 
 export type IDuplicateViewCommand = z.infer<typeof duplicateViewCommand>
 
+export const duplicateViewCommandOutput = z.object({
+  tableId: tableId,
+  viewId: viewId,
+})
+
+export type IDuplicateViewCommandOutput = z.infer<typeof duplicateViewCommandOutput>
+
 export class DuplicateViewCommand extends Command implements IDuplicateViewCommand {
   public readonly tableId: string
   public readonly viewId?: string

packages/table/src/methods/create-view.method.ts

@@ -1,12 +1,15 @@
 import { applyRules, Some, type Option } from "@undb/domain"
 import { ViewCreatedEvent } from "../events/view-created.event"
-import { type ICreateViewDTO } from "../modules"
+import { type ICreateViewDTO, type View } from "../modules"
 import { ViewFactory } from "../modules/views/view/view.factory"
 import { ViewNameShouldBeUnique } from "../rules/view-name-should-be-unique.rule"
 import { WithNewView, type TableComositeSpecification } from "../specifications"
 import type { TableDo } from "../table.do"
 
-export function createViewMethod(this: TableDo, dto: ICreateViewDTO): Option<TableComositeSpecification> {
+export function createViewMethod(
+  this: TableDo,
+  dto: ICreateViewDTO,
+): { spec: Option<TableComositeSpecification>; view: View } {
   const view = ViewFactory.create(dto)
   const spec = new WithNewView(view)
 
@@ -21,5 +24,5 @@ export function createViewMethod(this: TableDo, dto: ICreateViewDTO): Option<Tab
   })
   this.addDomainEvent(event)
 
-  return Some(spec)
+  return { spec: Some(spec), view }
 }

packages/table/src/methods/duplicate-view.method.ts

@@ -1,11 +1,15 @@
 import { applyRules, type Option } from "@undb/domain"
 import type { IDuplicateViewDTO } from "../dto/duplicate-view.dto"
 import { ViewCreatedEvent } from "../events/view-created.event"
+import type { View } from "../modules"
 import { ViewNameShouldBeUnique } from "../rules/view-name-should-be-unique.rule"
 import { type TableComositeSpecification } from "../specifications"
 import type { TableDo } from "../table.do"
 
-export function duplicateViewMethod(this: TableDo, dto: IDuplicateViewDTO): Option<TableComositeSpecification> {
+export function duplicateViewMethod(
+  this: TableDo,
+  dto: IDuplicateViewDTO,
+): { spec: Option<TableComositeSpecification>; view: View } {
   const view = this.views.getViewById(dto.viewId)
   const spec = view.$duplicate(dto)
 
@@ -22,5 +26,5 @@ export function duplicateViewMethod(this: TableDo, dto: IDuplicateViewDTO): Opti
     this.addDomainEvent(event)
   }
 
-  return spec
+  return { spec, view }
 }

packages/table/src/services/methods/create-table-view.method.ts

@@ -1,14 +1,18 @@
+import type { View } from "../../modules"
 import type { ICreateTableViewDTO } from "../../modules/views/dto/create-view.dto"
 import { TableIdVo } from "../../table-id.vo"
 import type { TableDo } from "../../table.do"
 import type { TableService } from "../table.service"
 
-export async function createTableViewMethod(this: TableService, dto: ICreateTableViewDTO): Promise<TableDo> {
+export async function createTableViewMethod(
+  this: TableService,
+  dto: ICreateTableViewDTO,
+): Promise<{ table: TableDo; view: View }> {
   const table = (await this.repository.findOneById(new TableIdVo(dto.tableId))).expect("Not found table")
 
-  const spec = table.$createView(dto)
+  const { spec, view } = table.$createView(dto)
 
   await this.repository.updateOneById(table, spec)
 
-  return table
+  return { table, view }
 }

packages/table/src/services/table.service.ts

@@ -21,6 +21,7 @@ import {
   type IReadableRecordDTO,
   type IRecordQueryRepository,
   type IRecordRepository,
+  type View,
 } from "../modules"
 import type { ICreateTableFormDTO } from "../modules/forms/dto/create-form.dto"
 import { TableCreator } from "../table.builder"
@@ -55,7 +56,7 @@ export interface ITableService {
 
   createTableForm(dto: ICreateTableFormDTO): Promise<TableDo>
   deleteTableForm(dto: IDeleteTableFormDTO): Promise<TableDo>
-  createTableView(dto: ICreateTableViewDTO): Promise<TableDo>
+  createTableView(dto: ICreateTableViewDTO): Promise<{ table: TableDo; view: View }>
 
   exportView(tableId: string, dto: IExportViewDTO): Promise<{ table: TableDo; records: IReadableRecordDTO[] }>
   duplicateBase(base: Base, spaceId: ISpaceId, targetSpaceId: ISpaceId, dto: IDuplicateBaseDTO): Promise<Base>

packages/trpc/src/router.ts

@@ -62,6 +62,7 @@ import {
   createTableFieldCommand,
   createTableFormCommand,
   createTableViewCommand,
+  createTableViewCommandOutput,
   createWebhookCommand,
   deleteBaseCommand,
   deleteFormCommand,
@@ -77,6 +78,7 @@ import {
   duplicateTableCommand,
   duplicateTableFieldCommand,
   duplicateViewCommand,
+  duplicateViewCommandOutput,
   enableShareCommand,
   inviteCommand,
   setFieldWidthCommand,
@@ -157,6 +159,7 @@ const viewRouter = t.router({
   create: privateProcedure
     .use(authz("view:create"))
     .input(createTableViewCommand)
+    .output(createTableViewCommandOutput)
     .mutation(({ input }) => commandBus.execute(new CreateTableViewCommand(input))),
   update: privateProcedure
     .use(authz("view:update"))
@@ -165,6 +168,7 @@ const viewRouter = t.router({
   duplicate: privateProcedure
     .use(authz("view:create"))
     .input(duplicateViewCommand)
+    .output(duplicateViewCommandOutput)
     .mutation(({ input }) => commandBus.execute(new DuplicateViewCommand(input))),
   delete: privateProcedure
     .use(authz("view:delete"))