Release version v1.0.0-71

CHANGELOG.md

@@ -1,6 +1,17 @@
 # Changelog
 
 
+## v1.0.0-71
+
+
+### 🚀 Enhancements
+
+- Allow to resize grid view columns ([da211ae](https://github.com/undb-io/undb/commit/da211ae))
+
+### ❤️ Contributors
+
+- Nichenqin ([@nichenqin](http://github.com/nichenqin))
+
 ## v1.0.0-70
 
 

apps/frontend/schema.graphql

@@ -75,6 +75,10 @@ type GalleryOption {
   field: String
 }
 
+type GridOption {
+  widths: JSON
+}
+
 type Invitation {
   email: String!
   id: ID!
@@ -204,6 +208,7 @@ type View {
   fields: JSON
   filter: JSON
   gallery: GalleryOption
+  grid: GridOption
   id: ID!
   isDefault: Boolean
   kanban: KanbanOption

apps/frontend/src/lib/components/blocks/grid-view/grid-view-data-table.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
   import * as ContextMenu from "$lib/components/ui/context-menu"
   import { Render, Subscribe, createRender, createTable } from "svelte-headless-table"
-  import { writable, type Readable, type Writable } from "svelte/store"
+  import { derived, writable, type Readable, type Writable } from "svelte/store"
   import GridViewCheckbox from "./grid-view-checkbox.svelte"
   import * as Table from "$lib/components/ui/table/index.js"
   import { addResizedColumns, addSelectedRows } from "svelte-headless-table/plugins"
   import { copyToClipboard } from "@svelte-put/copy"
   import { toast } from "svelte-sonner"
   import { cn } from "$lib/utils.js"
   import { getRecordsStore } from "$lib/store/records.store"
-  import { type Field } from "@undb/table"
+  import { GridView, type Field } from "@undb/table"
   import { getTable } from "$lib/store/table.store"
   import GridViewActions from "./grid-view-actions.svelte"
   import GridViewActionHeader from "./grid-view-action-header.svelte"
@@ -30,7 +30,9 @@
   import { gridViewStore, isRowSelected, isSelectedCell } from "./grid-view.store"
   import SelectedRecordsButton from "./selected-records-button.svelte"
   import { aggregatesStore } from "$lib/store/aggregates.store"
-    import ViewPagination from "../view/view-pagination.svelte"
+  import ViewPagination from "../view/view-pagination.svelte"
+  import { createMutation } from "@tanstack/svelte-query"
+  import { trpc } from "$lib/trpc/client"
 
   export let readonly = false
   export let viewId: Readable<string>
@@ -41,6 +43,8 @@
 
   const t = getTable()
 
+  let fields = derived(t, ($t) => $t?.getOrderedVisibleFields($viewId) ?? ([] as Field[]))
+
   const r = queryParam("r")
   const deleteRecordId = queryParam("deleteRecordId")
   const duplicateRecordId = queryParam("duplicateRecordId")
@@ -50,11 +54,11 @@
     toast.success("Copied record ID to clipboard")
   }
 
-  $: view = $t.views.getViewById($viewId)
-  $: viewFilter = view.filter.into(undefined)
+  let view = derived(t, ($t) => $t.views.getViewById($viewId) as GridView)
+  $: viewFilter = $view.filter.into(undefined)
   $: hasFilterFieldIds = viewFilter?.fieldIds
 
-  $: colorSpec = view.color.into(undefined)?.getSpec($t.schema).into(undefined)
+  $: colorSpec = $view.color.into(undefined)?.getSpec($t.schema).into(undefined)
 
   $: getTableAggregates = aggregatesStore.getTableAggregates
   $: aggregates = $getTableAggregates($t.id.value)
@@ -63,14 +67,17 @@
   let hasRecord = store.hasRecord
   let count = store.count
 
+  const setFieldWidth = createMutation({
+    mutationFn: trpc.table.view.setFieldWidth.mutate,
+  })
+
   const table = createTable(store.data, {
     select: addSelectedRows(),
     resize: addResizedColumns(),
   })
-  $: fields = $t?.getOrderedVisibleFields($viewId) ?? ([] as Field[])
 
-  $: columns =
-    table.createColumns([
+  let columns = derived([fields, view], ([$fields, $view]) => {
+    return table.createColumns([
       table.column({
         accessor: "$select",
         header: (_, { pluginStates }) => {
@@ -107,7 +114,7 @@
           },
         },
       }),
-      ...fields.map((field, index) =>
+      ...$fields.map((field, index) =>
         table.column({
           header: () => createRender(GridViewHeader, { field }),
           accessor: field.id.value,
@@ -131,7 +138,8 @@
           }),
           plugins: {
             resize: {
-              initialWidth: 200,
+              initialWidth: $view.getFieldWidth(field.id.value),
+              disable: readonly,
             },
           },
         }),
@@ -149,10 +157,10 @@
           },
         },
       }),
-    ]) ?? []
+    ])
+  })
 
-  const viewModel = writable(table.createViewModel(columns ?? []))
-  $: columns, viewModel.set(table.createViewModel(columns))
+  const viewModel = derived(columns, ($columns) => table.createViewModel($columns))
 
   $: visibleColumns = $viewModel.visibleColumns
   $: headerRows = $viewModel.headerRows
@@ -166,7 +174,7 @@
     .map(Number)
     .map((index) => $store.ids[index])
 
-  $: resize = $viewModel.pluginStates.resize.columnWidths
+  $: columnWidths = $viewModel.pluginStates.resize.columnWidths
 </script>
 
 <div class="flex h-full w-full flex-col">
@@ -186,20 +194,37 @@
               {#each headerRow.cells as cell, i (cell.id)}
                 <Subscribe attrs={cell.attrs()} let:attrs props={cell.props()} let:props>
                   {@const hasFilter = hasFilterFieldIds?.has(cell.id) ?? false}
-                  <Table.Head
+                  <th
                     {...attrs}
                     class={cn(
-                      "h-9 border-r [&:has([role=checkbox])]:pl-3",
+                      "text-muted-foreground relative h-9 border-r px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pl-3 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
                       i === 0 && "border-r-0",
                       hasFilter && "bg-orange-50",
                     )}
+                    use:props.resize
                   >
                     {#if cell.id === "$select" && !$hasRecord}
                       <Checkbox checked={false} disabled />
                     {:else}
                       <Render of={cell.render()} />
+                      {#if !props.resize.disabled}
+                        <button
+                          class="absolute bottom-0 right-0 top-0 z-10 w-1 cursor-col-resize bg-transparent transition-colors hover:bg-sky-500/50"
+                          use:props.resize.drag
+                          on:mouseup={() => {
+                            const fieldId = cell.id
+                            const width = $columnWidths[fieldId]
+                            $setFieldWidth.mutate({
+                              tableId: $t.id.value,
+                              viewId: $viewId,
+                              field: fieldId,
+                              width,
+                            })
+                          }}
+                        />
+                      {/if}
                     {/if}
-                  </Table.Head>
+                  </th>
                 </Subscribe>
               {/each}
             </Table.Row>
@@ -307,7 +332,7 @@
         <tfooter class="text-muted-foreground sticky bottom-0 h-8 w-full border-t bg-white text-sm">
           <tr class="flex h-8 w-full">
             {#each $visibleColumns as column}
-              {@const width = $resize[column.id]}
+              {@const width = $columnWidths[column.id]}
               <td
                 style={`width: ${width}px; min-width: ${width}px; max-width: ${width}px`}
                 class="h-full overflow-hidden"

apps/frontend/src/routes/(authed)/(space)/t/[tableId]/+layout.gql

@@ -27,6 +27,10 @@ query GetTableQuery($tableId: ID!, $viewId: ID) {
       aggregate
       fields
 
+      grid {
+        widths
+      }
+
       kanban {
         field
       }

apps/frontend/src/routes/(share)/s/b/[shareId]/+layout.gql

@@ -31,6 +31,9 @@ query GetShareBaseData($shareId: ID!) {
         name
         type
         isDefault
+        grid {
+          widths
+        }
         kanban {
           field
         }

apps/frontend/src/routes/(share)/s/b/[shareId]/t/[tableId]/+layout.gql

@@ -27,6 +27,9 @@ query GetBaseTableShareData($shareId: ID!, $tableId: ID!) {
       isDefault
       fields
       type
+      grid {
+        widths
+      }
       kanban {
         field
       }

apps/frontend/src/routes/(share)/s/v/[shareId]/+layout.gql

@@ -38,6 +38,9 @@ query GetViewShareData($shareId: ID!) {
       option {
         showSystemFields
       }
+      grid {
+        widths
+      }
       kanban {
         field
       }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "undb",
-  "version": "1.0.0-70",
+  "version": "1.0.0-71",
   "private": true,
   "scripts": {
     "build": "NODE_ENV=production bun --bun turbo build",

packages/authz/src/space-member/space-action.ts

@@ -18,6 +18,12 @@ export const spaceActions = z.enum([
   "table:list",
   "table:delete",
 
+  "view:create",
+  "view:update",
+  "view:read",
+  "view:list",
+  "view:delete",
+
   "form:create",
   "form:update",
   "form:list",

packages/authz/src/space-member/space-permission.ts

@@ -14,6 +14,12 @@ export const spacePermission: Record<ISpaceMemberRole, Record<ISpaceAction, bool
     "base:read": true,
     "base:update": true,
 
+    "view:create": true,
+    "view:update": true,
+    "view:read": true,
+    "view:list": true,
+    "view:delete": true,
+
     "table:create": true,
     "table:update": true,
     "table:list": true,
@@ -70,6 +76,12 @@ export const spacePermission: Record<ISpaceMemberRole, Record<ISpaceAction, bool
     "table:delete": true,
     "table:read": true,
 
+    "view:create": true,
+    "view:update": true,
+    "view:read": true,
+    "view:list": true,
+    "view:delete": true,
+
     "form:create": true,
     "form:update": true,
     "form:list": true,
@@ -120,6 +132,12 @@ export const spacePermission: Record<ISpaceMemberRole, Record<ISpaceAction, bool
     "form:delete": true,
     "form:read": true,
 
+    "view:create": false,
+    "view:update": false,
+    "view:read": true,
+    "view:list": true,
+    "view:delete": false,
+
     "table:create": true,
     "table:update": true,
     "table:list": true,
@@ -170,6 +188,12 @@ export const spacePermission: Record<ISpaceMemberRole, Record<ISpaceAction, bool
     "table:delete": false,
     "table:read": true,
 
+    "view:create": false,
+    "view:update": false,
+    "view:read": true,
+    "view:list": true,
+    "view:delete": false,
+
     "form:create": false,
     "form:update": false,
     "form:list": true,

packages/command-handlers/src/handlers/index.ts

@@ -31,6 +31,7 @@ import { DuplicateViewCommandHandler } from "./duplicate-view.command-handler"
 import { EnableShareCommandHandler } from "./enable-share.command-handler"
 import { ExportViewCommandHandler } from "./export-view.command-handler"
 import { InviteCommandHandler } from "./invite.command-handler"
+import { SetFieldWidthCommandHandler } from "./set-field-width.command-handler"
 import { SetTableFormCommandHandler } from "./set-table-form.command-handler"
 import { SetTableRLSCommandHandler } from "./set-table-rls.command-handler"
 import { SetViewAggregateCommandHandler } from "./set-view-aggregate.command-handler"
@@ -102,4 +103,5 @@ export const commandHandlers = [
   TriggerRecordButtonCommandHandler,
   DeleteFormCommandHandler,
   SubmitFormCommandHandler,
+  SetFieldWidthCommandHandler,
 ]

packages/command-handlers/src/handlers/set-field-width.command-handler.ts

@@ -0,0 +1,24 @@
+import { SetFieldWidthCommand } from "@undb/commands"
+import { commandHandler } from "@undb/cqrs"
+import { singleton } from "@undb/di"
+import type { ICommandHandler } from "@undb/domain"
+import { createLogger } from "@undb/logger"
+import { TableIdVo, injectTableRepository, type ITableRepository } from "@undb/table"
+
+@commandHandler(SetFieldWidthCommand)
+@singleton()
+export class SetFieldWidthCommandHandler implements ICommandHandler<SetFieldWidthCommand, any> {
+  public readonly logger = createLogger(SetFieldWidthCommandHandler.name)
+  constructor(
+    @injectTableRepository()
+    private readonly repo: ITableRepository,
+  ) {}
+
+  async execute(command: SetFieldWidthCommand): Promise<any> {
+    const table = (await this.repo.findOneById(new TableIdVo(command.tableId))).unwrap()
+
+    const spec = table.$setFieldWidth(command)
+
+    await this.repo.updateOneById(table, spec)
+  }
+}

packages/commands/src/index.ts

@@ -31,6 +31,7 @@ export * from "./duplicate-view.command"
 export * from "./enable-share.command"
 export * from "./export-view.command"
 export * from "./invite.command"
+export * from "./set-field-width.command"
 export * from "./set-table-form.command"
 export * from "./set-table-rls.command"
 export * from "./set-view-aggregate.command"

packages/commands/src/set-field-width.command.ts

@@ -0,0 +1,22 @@
+import { Command, type CommandProps } from "@undb/domain"
+import { setFieldWidthDTO } from "@undb/table"
+import { z } from "@undb/zod"
+
+export const setFieldWidthCommand = setFieldWidthDTO
+
+export type ISetFieldWidthCommand = z.infer<typeof setFieldWidthCommand>
+
+export class SetFieldWidthCommand extends Command {
+  public readonly tableId: string
+  public readonly viewId?: string
+  public readonly field: string
+  public readonly width: number
+
+  constructor(props: CommandProps<ISetFieldWidthCommand>) {
+    super(props)
+    this.tableId = props.tableId
+    this.viewId = props.viewId
+    this.field = props.field
+    this.width = props.width
+  }
+}