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
+ }
+}