Skip to content

Commit

Permalink
feat: template preview
Browse files Browse the repository at this point in the history
  • Loading branch information
nichenqin committed Sep 26, 2024
1 parent dd50463 commit 550256d
Show file tree
Hide file tree
Showing 23 changed files with 398 additions and 70 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
let open = false
</script>

<Popover.Root bind:open openFocus>
<Popover.Root bind:open openFocus portal="body">
<Popover.Trigger asChild let:builder>
<Button
disabled={readonly || disabled}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
export let field: CheckboxField
export let value: boolean = false
export let recordId: string
export let readonly = false
export let onValueChange: (value: boolean) => void
const updateCell = createMutation({
Expand All @@ -23,9 +24,10 @@

<div class={cn($$restProps.class, "flex items-center justify-center")}>
<Checkbox
disabled={readonly}
bind:checked={value}
onCheckedChange={(checked) => {
onValueChange(checked)
onValueChange(!!checked)
$updateCell.mutate({
tableId,
id: recordId,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
import ShareTableTools from "$lib/components/blocks/table-tools/share-table-tools.svelte"
export let readonly = false
export let viewId: Readable<string>
export let viewId: Readable<string | undefined>
export let currentPage: Writable<number | null>
export let isLoading = false
export let total: number
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
import type { KanbanView } from "@undb/table"
export let view: KanbanView
export let readonly = false
</script>

<Dropdown.Root>
Expand All @@ -16,7 +17,13 @@
</Button>
</Dropdown.Trigger>
<Dropdown.Content class="w-[400px] p-2">
<Dropdown.Label>Update kanban view</Dropdown.Label>
<SelectKanbanFieldForm {view} />
<Dropdown.Label>
{#if !readonly}
Update kanban view
{:else}
Kanban view
{/if}
</Dropdown.Label>
<SelectKanbanFieldForm {view} {readonly} />
</Dropdown.Content>
</Dropdown.Root>
Original file line number Diff line number Diff line change
@@ -1,37 +1,43 @@
<script lang="ts">
import { getTable } from "$lib/store/table.store"
import type { Readable } from "svelte/store"
import type { KanbanView } from "@undb/table"
import type { KanbanView, RecordDO } from "@undb/table"
import SelectKanbanField from "./select-kanban-field.svelte"
import SelectKanbanView from "./select-kanban-view.svelte"
import TableTools from "../table-tools/table-tools.svelte"
import { FieldIdVo } from "@undb/table"
import { FieldIdVo, Records } from "@undb/table"
import SelectKanbanRequiresSingle from "./select-kanban-requires-single.svelte"
import KanbanOptionButton from "./kanban-option-button.svelte"
import { createRecordsStore, setRecordsStore } from "$lib/store/records.store"
const table = getTable()
export let viewId: Readable<string>
export let viewId: Readable<string | undefined>
export let shareId: string | undefined = undefined
export let readonly = false
export let records: RecordDO[] | undefined = undefined
export let disableRecordQuery = false
$: view = $table.views.getViewById($viewId) as KanbanView
$: fieldId = view.type === "kanban" ? view.field.into(undefined) : undefined
$: field = fieldId ? $table.schema.getFieldById(new FieldIdVo(fieldId)).into(undefined) : undefined
const recordsStore = createRecordsStore()
setRecordsStore(recordsStore)
if (records) {
recordsStore.setRecords(new Records(records), Date.now())
}
</script>

{#key $table.id.value}
<TableTools>
<TableTools {readonly}>
{#if !shareId}
<KanbanOptionButton {view} />
<KanbanOptionButton {view} {readonly} />
{/if}
</TableTools>
{#if view.type === "kanban"}
{#if field?.type === "select"}
{#if field.isSingle}
<SelectKanbanView {view} {shareId} {viewId} />
<SelectKanbanView {view} {shareId} {viewId} {disableRecordQuery} {readonly} />
{:else}
<section class="flex h-full w-full items-center justify-center">
<SelectKanbanRequiresSingle {view} {field} {shareId} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@
import { createMutation } from "@tanstack/svelte-query"
import { toast } from "svelte-sonner"
import { invalidate } from "$app/navigation"
import { hasPermission } from "$lib/store/space-member.store"
export let readonly = false
const table = getTable()
Expand Down Expand Up @@ -59,6 +62,7 @@
<div class="grid w-full items-center gap-4">
<div class="flex flex-col space-y-1.5">
<FieldPicker
disabled={readonly}
placeholder="Select a select type field to group kanban lanes"
value={$formData.kanban?.field}
onValueChange={(field) => {
Expand All @@ -74,9 +78,13 @@
</div>
</form>

<CreateFieldButton class="w-full" variant="secondary" />
{#if !readonly && $hasPermission("field:update")}
<CreateFieldButton class="w-full" variant="secondary" />
{/if}

<div class="flex w-full justify-end">
<Button type="submit" form="select-kanban-field-form">Confirm</Button>
</div>
{#if !readonly}
<div class="flex w-full justify-end">
<Button type="submit" form="select-kanban-field-form" disabled={readonly}>Confirm</Button>
</div>
{/if}
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -50,19 +50,20 @@
export let tableId: string
export let view: KanbanView
export let viewId: Readable<string>
export let viewId: Readable<string | undefined>
export let fieldId: string
export let field: SelectField
export let option: IOption | null
export let readonly = false
export let shareId: string | undefined = undefined
export let disableRecordQuery = false
$: color = view.color.into(undefined)
const q = queryParam("q")
let getIsLaneCollapsed = kanbanStore.getIsLaneCollapsed
$: isLaneCollapsed = $getIsLaneCollapsed($viewId, option?.id ?? "") ?? false
$: isLaneCollapsed = $viewId ? ($getIsLaneCollapsed($viewId, option?.id ?? "") ?? false) : false
const query = createInfiniteQuery(
derived([table, viewId, q], ([$table, $viewId, $q]) => {
Expand Down Expand Up @@ -109,7 +110,7 @@
}
return pages.length + 1
},
enabled: view?.type === "kanban",
enabled: view?.type === "kanban" && !disableRecordQuery,
filters: {
conjunction: "and",
children: [{ field: fieldId, op: "eq", value: option ? option.id : null }],
Expand Down Expand Up @@ -304,6 +305,9 @@
<DropdownMenu.Item
class="text-xs text-gray-700"
on:click={() => {
if (!$viewId) {
return
}
kanbanStore.toggleLane($viewId, option?.id ?? "")
}}
>
Expand All @@ -323,7 +327,7 @@
getKanbanBgColor(option?.color ?? "gray"),
)}
>
{#if !readonly && $hasPermission("record:create")}
{#if $hasPermission("record:create")}
{#if $query.isFetchedAfterMount}
{#if recordDos.length > 0}
<Button on:click={onCreateRecord} variant="outline" size="sm" class="w-full">
Expand All @@ -339,7 +343,7 @@
<Option option={option ?? { id: "", name: "No Option", color: "gray" }} />
</div>
</div>
{#if !(field.required && !option)}
{#if !readonly && !(field.required && !option)}
<Button on:click={onCreateRecord} variant="outline" size="sm">
<PlusIcon class="text-muted-foreground mr-2 h-4 w-4 font-semibold" />
New Record
Expand Down Expand Up @@ -376,7 +380,7 @@
</div>
<div class="mt-2 flex w-full items-center justify-between px-2 py-0.5">
{#if !shareId}
{#if !(field.required && !option)}
{#if !(field.required && !option) && !readonly}
<Button variant="outline" size="xs" on:click={onCreateRecord}>
<PlusIcon class="text-muted-foreground mr-2 h-3 w-3 font-semibold" />
New Record
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,11 @@
const table = getTable()
export let viewId: Readable<string>
export let viewId: Readable<string | undefined>
export let view: KanbanView
export let readonly = false
export let shareId: string | undefined = undefined
export let disableRecordQuery = false
let fieldId = view.field.unwrapUnchecked()!
let field = $table.schema.getFieldById(new FieldIdVo(fieldId)).into(undefined) as SelectField
Expand Down Expand Up @@ -99,11 +100,31 @@

<div class="flex-1 overflow-x-auto overflow-y-hidden p-4">
<div bind:this={lanesContainer} class="flex h-full space-x-2 overflow-y-hidden pr-2">
<SelectKanbanLane {field} {readonly} tableId={$table.id.value} {viewId} {fieldId} option={null} {shareId} {view} />
<SelectKanbanLane
{field}
{readonly}
tableId={$table.id.value}
{viewId}
{fieldId}
option={null}
{shareId}
{view}
{disableRecordQuery}
/>
{#each options as option (option.id)}
<SelectKanbanLane {field} {readonly} tableId={$table.id.value} {viewId} {fieldId} {option} {shareId} {view} />
<SelectKanbanLane
{field}
{readonly}
tableId={$table.id.value}
{viewId}
{fieldId}
{option}
{shareId}
{view}
{disableRecordQuery}
/>
{/each}
{#if !shareId}
{#if !shareId && !readonly}
<div class="flex w-[350px] shrink-0 flex-col space-y-2 rounded-sm px-2 pt-2 transition-all">
<Popover.Root>
<Popover.Trigger asChild let:builder>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@
import { page } from "$app/stores"
import GridViewDataTable from "$lib/components/blocks/grid-view/grid-view-data-table.svelte"
import { preferences } from "$lib/store/persisted.store"
import { createRecordsStore, setRecordsStore, type RecordsStore } from "$lib/store/records.store"
import { createRecordsStore, setRecordsStore } from "$lib/store/records.store"
import { getTable } from "$lib/store/table.store"
import { trpc } from "$lib/trpc/client"
import { createQuery } from "@tanstack/svelte-query"
import { Records, type IRecordsDTO } from "@undb/table"
import { derived, writable, type Readable } from "svelte/store"
import { derived, type Readable } from "svelte/store"
import { queryParam, ssp } from "sveltekit-search-params"
export let viewId: Readable<string>
export let viewId: Readable<string | undefined>
const t = getTable()
const perPage = derived(preferences, ($preferences) => $preferences.gridViewPerPage ?? 50)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,28 @@
import ViewFields from "../view-fields/view-fields.svelte"
import ShareViewButton from "../share/share-view-button.svelte"
import BulkUpdateRecordsButton from "../bulk-update-records/bulk-update-records-button.svelte"
export let readonly = false
</script>

<div class="flex items-center justify-between gap-2 border-b px-4 py-2">
<div class="flex items-center gap-2">
<CreateRecordButton />
<ViewFilterEditor />
<ViewColorEditor />
<ViewSort />
<ViewFields />
{#if !readonly}
<CreateRecordButton />
{/if}
<ViewFilterEditor {readonly} />
<ViewColorEditor {readonly} />
<ViewSort {readonly} />
<ViewFields {readonly} />
<slot></slot>
</div>

<div class="flex items-center gap-2">
<BulkUpdateRecordsButton />
<CreateFieldButton />
<ShareViewButton />
{#if !readonly}
<BulkUpdateRecordsButton />
<CreateFieldButton />
<ShareViewButton />
{/if}
<RecordsSearch />
</div>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
ChevronRightIcon,
DatabaseIcon,
HardDriveIcon,
SheetIcon,
PlusIcon,
EllipsisIcon,
PencilIcon,
Expand Down
Loading

0 comments on commit 550256d

Please sign in to comment.