Add shot table column lock with two-pane horizontal scroll
Add a lock toggle to the shot table toolbar that freezes the checkbox, thumbnail, and shot name columns. When locked, the table splits into a fixed left pane and a horizontally scrollable right pane so the scrollbar spans only the movable columns. Constrain the table to fill the viewport height so the scrollbar stays at the screen bottom, and add min-w-0 to the layout to keep horizontal overflow inside the table instead of the page. Also fix the asset Task Status filter to render task type groups by using the object-aware TaskStatusBadge. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -91,6 +91,7 @@
|
||||
<!-- Task Status Filter (only for list view) -->
|
||||
<TaskStatusFilter
|
||||
v-if="viewMode === 'list'"
|
||||
:all-task-types="allTaskTypes"
|
||||
:project-id="projectId"
|
||||
@filter-changed="$emit('task-status-filter-changed', $event)"
|
||||
/>
|
||||
|
||||
@@ -1,149 +1,136 @@
|
||||
<template>
|
||||
<div class="flex items-center gap-2">
|
||||
<Select v-model="selectedFilter" @update:model-value="handleFilterChange">
|
||||
<SelectTrigger class="w-[200px]">
|
||||
<SelectValue placeholder="Filter by task status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Tasks</SelectItem>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Modeling</SelectLabel>
|
||||
<SelectItem
|
||||
v-for="status in allStatuses"
|
||||
:key="`modeling:${status.id}`"
|
||||
:value="`modeling:${status.id}`"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<TaskStatusBadge :status="status.id as any" />
|
||||
<span>Modeling - {{ status.name }}</span>
|
||||
<Popover>
|
||||
<PopoverTrigger as-child>
|
||||
<Button variant="outline" size="sm" class="h-8 border-dashed">
|
||||
<ListFilter class="mr-2 h-4 w-4" />
|
||||
Task Status
|
||||
<Badge
|
||||
v-if="selectedFilters.length > 0"
|
||||
variant="secondary"
|
||||
class="ml-2 rounded-sm px-1 font-normal"
|
||||
>
|
||||
{{ selectedFilters.length }}
|
||||
</Badge>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="w-[220px] p-0" align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search task status..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No status found.</CommandEmpty>
|
||||
|
||||
<!-- All Tasks Option -->
|
||||
<CommandGroup>
|
||||
<CommandItem value="all" @select="clearAllFilters">
|
||||
<div
|
||||
:class="[
|
||||
'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
|
||||
selectedFilters.length === 0
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'opacity-50 [&_svg]:invisible'
|
||||
]"
|
||||
>
|
||||
<Check class="h-4 w-4" />
|
||||
</div>
|
||||
<span>All Tasks</span>
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
|
||||
<!-- Task Type Groups -->
|
||||
<CommandGroup v-for="taskType in allTaskTypes" :key="taskType">
|
||||
<CommandSeparator />
|
||||
<div class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
|
||||
{{ formatTaskType(taskType) }}
|
||||
</div>
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Surfacing</SelectLabel>
|
||||
<SelectItem
|
||||
v-for="status in allStatuses"
|
||||
:key="`surfacing:${status.id}`"
|
||||
:value="`surfacing:${status.id}`"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<TaskStatusBadge :status="status as any" />
|
||||
<span>Surfacing - {{ status.name }}</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Rigging</SelectLabel>
|
||||
<SelectItem
|
||||
v-for="status in allStatuses"
|
||||
:key="`rigging:${status.id}`"
|
||||
:value="`rigging:${status.id}`"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<TaskStatusBadge :status="status as any" />
|
||||
<span>Rigging - {{ status.name }}</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Button
|
||||
v-if="selectedFilter && selectedFilter !== 'all'"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
@click="clearFilter"
|
||||
class="h-8 px-2"
|
||||
>
|
||||
<X class="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<CommandItem
|
||||
v-for="status in allStatuses"
|
||||
:key="`${taskType}:${status.id}`"
|
||||
:value="`${taskType}:${status.id}`"
|
||||
@select="toggleFilter(`${taskType}:${status.id}`)"
|
||||
>
|
||||
<div
|
||||
:class="[
|
||||
'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
|
||||
selectedFilters.includes(`${taskType}:${status.id}`)
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'opacity-50 [&_svg]:invisible'
|
||||
]"
|
||||
>
|
||||
<Check class="h-4 w-4" />
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<TaskStatusBadge :status="status as any" />
|
||||
</div>
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, watch } from 'vue'
|
||||
import { X } from 'lucide-vue-next'
|
||||
import { ListFilter, Check } from 'lucide-vue-next'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import TaskStatusBadge from '@/components/task/TaskStatusBadge.vue'
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from '@/components/ui/popover'
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
CommandSeparator,
|
||||
} from '@/components/ui/command'
|
||||
import TaskStatusBadge from '@/components/status/TaskStatusBadge.vue'
|
||||
import { TaskStatus } from '@/services/asset'
|
||||
import { customTaskStatusService, type CustomTaskStatus, type SystemTaskStatus } from '@/services/customTaskStatus'
|
||||
import { useTaskStatusesStore } from '@/stores/taskStatuses'
|
||||
|
||||
interface Props {
|
||||
allTaskTypes: string[]
|
||||
projectId?: number
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'filter-changed', filter: string): void
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
// Use the shared task statuses store
|
||||
const emit = defineEmits<{
|
||||
'filter-changed': [filter: string]
|
||||
}>()
|
||||
|
||||
const taskStatusesStore = useTaskStatusesStore()
|
||||
const selectedFilters = ref<string[]>([])
|
||||
|
||||
const selectedFilter = ref('all')
|
||||
|
||||
// Get loading state from store
|
||||
const isLoading = computed(() => {
|
||||
return props.projectId ? taskStatusesStore.isLoading(props.projectId) : false
|
||||
})
|
||||
|
||||
// System status options (fallback if no project ID)
|
||||
const defaultStatusOptions = [
|
||||
{ id: TaskStatus.NOT_STARTED, name: 'Not Started', color: '', is_system: true },
|
||||
{ id: TaskStatus.IN_PROGRESS, name: 'In Progress', color: '', is_system: true },
|
||||
{ id: TaskStatus.SUBMITTED, name: 'Submitted', color: '', is_system: true },
|
||||
{ id: TaskStatus.APPROVED, name: 'Approved', color: '', is_system: true },
|
||||
{ id: TaskStatus.RETAKE, name: 'Retake', color: '', is_system: true }
|
||||
{ id: TaskStatus.RETAKE, name: 'Retake', color: '', is_system: true },
|
||||
]
|
||||
|
||||
// Combine system and custom statuses
|
||||
const allStatuses = computed(() => {
|
||||
if (!props.projectId) {
|
||||
return defaultStatusOptions
|
||||
}
|
||||
|
||||
if (!props.projectId) return defaultStatusOptions
|
||||
|
||||
const statusData = taskStatusesStore.getProjectStatuses(props.projectId)
|
||||
if (!statusData) {
|
||||
return defaultStatusOptions
|
||||
}
|
||||
|
||||
// Convert system statuses to the format expected by TaskStatusBadge
|
||||
const systemStatusList = statusData.system_statuses.map(status => ({
|
||||
id: status.id,
|
||||
name: status.name,
|
||||
color: status.color,
|
||||
is_system: status.is_system
|
||||
if (!statusData) return defaultStatusOptions
|
||||
|
||||
const systemStatusList = statusData.system_statuses.map(s => ({
|
||||
id: s.id, name: s.name, color: s.color, is_system: s.is_system,
|
||||
}))
|
||||
|
||||
// Convert custom statuses to the format expected by TaskStatusBadge
|
||||
const customStatusList = statusData.statuses.map(status => ({
|
||||
id: status.id,
|
||||
name: status.name,
|
||||
color: status.color,
|
||||
is_system: false
|
||||
const customStatusList = statusData.statuses.map(s => ({
|
||||
id: s.id, name: s.name, color: s.color, is_system: false,
|
||||
}))
|
||||
|
||||
return [...systemStatusList, ...customStatusList]
|
||||
})
|
||||
|
||||
// Load custom statuses when component mounts or projectId changes
|
||||
const loadStatuses = async () => {
|
||||
if (!props.projectId) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!props.projectId) return
|
||||
try {
|
||||
await taskStatusesStore.fetchProjectStatuses(props.projectId)
|
||||
} catch (error) {
|
||||
@@ -151,25 +138,25 @@ const loadStatuses = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadStatuses()
|
||||
})
|
||||
onMounted(loadStatuses)
|
||||
watch(() => props.projectId, loadStatuses)
|
||||
|
||||
watch(() => props.projectId, () => {
|
||||
loadStatuses()
|
||||
})
|
||||
|
||||
const handleFilterChange = (filter: any) => {
|
||||
if (!filter) return
|
||||
const filterStr = String(filter)
|
||||
selectedFilter.value = filterStr
|
||||
// Convert "all" to empty string for the API
|
||||
const apiFilter = filterStr === 'all' ? '' : filterStr
|
||||
const toggleFilter = (filter: string) => {
|
||||
const index = selectedFilters.value.indexOf(filter)
|
||||
if (index > -1) {
|
||||
selectedFilters.value.splice(index, 1)
|
||||
} else {
|
||||
selectedFilters.value.push(filter)
|
||||
}
|
||||
const apiFilter = selectedFilters.value.length > 0 ? selectedFilters.value.join(',') : ''
|
||||
emit('filter-changed', apiFilter)
|
||||
}
|
||||
|
||||
const clearFilter = () => {
|
||||
selectedFilter.value = 'all'
|
||||
const clearAllFilters = () => {
|
||||
selectedFilters.value = []
|
||||
emit('filter-changed', '')
|
||||
}
|
||||
</script>
|
||||
|
||||
const formatTaskType = (taskType: string) =>
|
||||
taskType.charAt(0).toUpperCase() + taskType.slice(1)
|
||||
</script>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<AppSidebar />
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<SidebarInset class="flex-1 flex flex-col">
|
||||
<SidebarInset class="flex-1 flex flex-col min-w-0">
|
||||
<!-- Header -->
|
||||
<AppHeader />
|
||||
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="relative h-full">
|
||||
<div class="relative h-full flex flex-col">
|
||||
<!-- Main Content -->
|
||||
<div class="space-y-4">
|
||||
<!-- Toolbar - Sticky -->
|
||||
<div class="sticky top-0 z-10 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b pb-4 px-4 sm:px-6 pt-4 sm:pt-6 mb-4">
|
||||
<div class="flex flex-col flex-1 min-h-0">
|
||||
<!-- Toolbar -->
|
||||
<div class="flex-shrink-0 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b pb-4 px-4 sm:px-6 pt-4 sm:pt-6 mb-4">
|
||||
<ShotTableToolbar
|
||||
:view-mode="viewMode"
|
||||
:episode-filter="episodeFilter"
|
||||
@@ -14,12 +14,14 @@
|
||||
:project-id="projectId"
|
||||
:selected-shot="selectedShot"
|
||||
:is-detail-panel-enabled="isDetailPanelEnabled"
|
||||
:is-columns-locked="lockColumns"
|
||||
@update:view-mode="viewMode = $event"
|
||||
@update:episode-filter="handleEpisodeFilterChange"
|
||||
@update:search="searchQuery = $event"
|
||||
@update:column-visibility="handleColumnVisibilityChange"
|
||||
@task-status-filter-changed="handleTaskStatusFilter"
|
||||
@toggle-detail-panel="toggleDetailPanelEnabled"
|
||||
@toggle-column-lock="toggleColumnLock"
|
||||
@bulk-create="showBulkCreateDialog = true"
|
||||
@create-shot="showCreateDialog = true"
|
||||
/>
|
||||
@@ -76,11 +78,11 @@
|
||||
</div>
|
||||
|
||||
<!-- Shots Grid/List/Table -->
|
||||
<div v-else>
|
||||
<div v-else class="flex-1 min-h-0">
|
||||
<!-- Grid View -->
|
||||
<div
|
||||
v-if="viewMode === 'grid'"
|
||||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 px-4 sm:px-6"
|
||||
v-if="viewMode === 'grid'"
|
||||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 px-4 sm:px-6 h-full overflow-auto"
|
||||
>
|
||||
<ShotCard
|
||||
v-for="shot in filteredShots"
|
||||
@@ -93,7 +95,7 @@
|
||||
</div>
|
||||
|
||||
<!-- List View -->
|
||||
<div v-else-if="viewMode === 'list'" class="space-y-2 px-4 sm:px-6">
|
||||
<div v-else-if="viewMode === 'list'" class="space-y-2 px-4 sm:px-6 h-full overflow-auto">
|
||||
<div
|
||||
v-for="shot in filteredShots"
|
||||
:key="shot.id"
|
||||
@@ -148,6 +150,7 @@
|
||||
:sorting="sorting"
|
||||
:column-visibility="columnVisibility"
|
||||
:all-task-types="allTaskTypes"
|
||||
:lock-columns="lockColumns"
|
||||
@update:sorting="sorting = $event"
|
||||
@update:column-visibility="handleColumnVisibilityChange"
|
||||
@update:rowSelection="handleRowSelectionChange"
|
||||
@@ -395,6 +398,13 @@ const columnVisibilityStore = useColumnVisibilityStore()
|
||||
const columnVisibility = ref<VisibilityState>({})
|
||||
const rowSelection = ref<Record<string, boolean>>({})
|
||||
|
||||
// Lock (freeze) the first columns (select/thumbnail/name) for horizontal scroll
|
||||
const lockColumns = ref(localStorage.getItem('shot-columns-locked') === 'true')
|
||||
const toggleColumnLock = () => {
|
||||
lockColumns.value = !lockColumns.value
|
||||
localStorage.setItem('shot-columns-locked', String(lockColumns.value))
|
||||
}
|
||||
|
||||
// Computed for selected count
|
||||
const selectedCount = computed(() => {
|
||||
return Object.keys(rowSelection.value).length
|
||||
|
||||
@@ -208,6 +208,19 @@
|
||||
<PanelRightOpen v-else class="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
<!-- Lock First Columns Toggle Button (only for table view) -->
|
||||
<Button
|
||||
v-if="viewMode === 'table'"
|
||||
@click="$emit('toggle-column-lock')"
|
||||
:variant="isColumnsLocked ? 'default' : 'outline'"
|
||||
size="sm"
|
||||
:class="['h-8 w-8 p-0', isColumnsLocked ? 'bg-primary text-primary-foreground hover:bg-primary/90' : '']"
|
||||
:title="isColumnsLocked ? 'Unlock columns' : 'Lock first columns'"
|
||||
>
|
||||
<Lock v-if="isColumnsLocked" class="h-4 w-4" />
|
||||
<Unlock v-else class="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
<!-- Clear Filters -->
|
||||
<Button
|
||||
v-if="hasFilters"
|
||||
@@ -250,7 +263,7 @@
|
||||
import { computed } from 'vue'
|
||||
import {
|
||||
LayoutGrid, List, Table2, Search, Film, Plus, Layers,
|
||||
PanelRightClose, PanelRightOpen, Check, X, Settings2, ListTodo, ListX
|
||||
PanelRightClose, PanelRightOpen, Check, X, Settings2, ListTodo, ListX, Lock, Unlock
|
||||
} from 'lucide-vue-next'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
@@ -284,6 +297,7 @@ interface Props {
|
||||
projectId: number
|
||||
selectedShot: Shot | null
|
||||
isDetailPanelEnabled: boolean
|
||||
isColumnsLocked: boolean
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
@@ -295,6 +309,7 @@ const emit = defineEmits<{
|
||||
'update:column-visibility': [value: VisibilityState]
|
||||
'task-status-filter-changed': [value: string]
|
||||
'toggle-detail-panel': []
|
||||
'toggle-column-lock': []
|
||||
'toggle-task-columns': []
|
||||
'bulk-create': []
|
||||
'create-shot': []
|
||||
|
||||
@@ -1,7 +1,107 @@
|
||||
<template>
|
||||
<div class="space-y-2 px-4">
|
||||
<div class="rounded-md border">
|
||||
<Table>
|
||||
<div class="px-4 h-full flex flex-col">
|
||||
<div class="rounded-md border flex-1 min-h-0 overflow-hidden">
|
||||
<!-- Locked: two-pane layout (fixed left pane + horizontally scrollable right pane) -->
|
||||
<template v-if="lockColumns">
|
||||
<div v-if="hasRows" class="flex h-full">
|
||||
<!-- Left pane: frozen columns (no horizontal scroll, vertical scroll hidden + synced) -->
|
||||
<div ref="leftPane" class="flex-shrink-0 h-full overflow-y-auto scrollbar-hide border-r" @scroll="onLeftScroll">
|
||||
<table class="caption-bottom text-sm">
|
||||
<TableHeader>
|
||||
<TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
|
||||
<TableHead
|
||||
v-for="header in frozenHeaders(headerGroup)"
|
||||
:key="header.id"
|
||||
:style="frozenWidth(header.column.id)"
|
||||
:class="header.column.getCanSort() ? 'cursor-pointer select-none hover:bg-muted/50' : ''"
|
||||
@click="header.column.getCanSort() ? header.column.toggleSorting() : null"
|
||||
>
|
||||
<FlexRender
|
||||
v-if="!header.isPlaceholder"
|
||||
:render="header.column.columnDef.header"
|
||||
:props="header.getContext()"
|
||||
/>
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow
|
||||
v-for="row in table.getRowModel().rows"
|
||||
:key="row.id"
|
||||
:data-state="row.getIsSelected() ? 'selected' : undefined"
|
||||
class="cursor-pointer hover:bg-muted/50 h-12"
|
||||
:class="{ 'bg-muted/30': row.getIsSelected(), 'table-row-selectable': true, 'selecting': isRangeSelecting }"
|
||||
@click="handleRowClick(row.original, $event, row)"
|
||||
@dblclick="emit('row-dblclick', row.original)"
|
||||
@mousedown="handleMouseDown"
|
||||
@mouseup="handleMouseUp"
|
||||
>
|
||||
<TableCell
|
||||
v-for="cell in frozenCells(row)"
|
||||
:key="cell.id"
|
||||
:style="frozenWidth(cell.column.id)"
|
||||
>
|
||||
<FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Right pane: movable columns (own horizontal scrollbar, only shown when needed) -->
|
||||
<div ref="rightPane" class="flex-1 min-w-0 h-full overflow-auto" @scroll="onRightScroll">
|
||||
<table class="min-w-full caption-bottom text-sm">
|
||||
<TableHeader>
|
||||
<TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
|
||||
<TableHead
|
||||
v-for="header in movableHeaders(headerGroup)"
|
||||
:key="header.id"
|
||||
:class="[
|
||||
header.column.getCanSort() ? 'cursor-pointer select-none hover:bg-muted/50' : '',
|
||||
header.column.id === 'actions' ? 'w-12' : '',
|
||||
allTaskTypes.includes(header.column.id) ? 'w-[140px]' : '',
|
||||
]"
|
||||
@click="header.column.getCanSort() ? header.column.toggleSorting() : null"
|
||||
>
|
||||
<FlexRender
|
||||
v-if="!header.isPlaceholder"
|
||||
:render="header.column.columnDef.header"
|
||||
:props="header.getContext()"
|
||||
/>
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow
|
||||
v-for="row in table.getRowModel().rows"
|
||||
:key="row.id"
|
||||
:data-state="row.getIsSelected() ? 'selected' : undefined"
|
||||
class="cursor-pointer hover:bg-muted/50 h-12"
|
||||
:class="{ 'bg-muted/30': row.getIsSelected(), 'table-row-selectable': true, 'selecting': isRangeSelecting }"
|
||||
@click="handleRowClick(row.original, $event, row)"
|
||||
@dblclick="emit('row-dblclick', row.original)"
|
||||
@mousedown="handleMouseDown"
|
||||
@mouseup="handleMouseUp"
|
||||
>
|
||||
<TableCell
|
||||
v-for="cell in movableCells(row)"
|
||||
:key="cell.id"
|
||||
v-memo="[cell.getValue(), cell.column.getIsVisible()]"
|
||||
>
|
||||
<FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="h-24 flex items-center justify-center text-sm text-muted-foreground">
|
||||
No results.
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Unlocked: standard single table -->
|
||||
<Table v-else>
|
||||
<TableHeader>
|
||||
<TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
|
||||
<TableHead
|
||||
@@ -31,7 +131,7 @@
|
||||
:key="row.id"
|
||||
:data-state="row.getIsSelected() ? 'selected' : undefined"
|
||||
class="cursor-pointer hover:bg-muted/50"
|
||||
:class="{
|
||||
:class="{
|
||||
'bg-muted/30': row.getIsSelected(),
|
||||
'table-row-selectable': true,
|
||||
'selecting': isRangeSelecting
|
||||
@@ -69,13 +169,15 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import { ref, watch } from 'vue'
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import {
|
||||
FlexRender,
|
||||
getCoreRowModel,
|
||||
getSortedRowModel,
|
||||
useVueTable,
|
||||
type ColumnDef,
|
||||
type HeaderGroup,
|
||||
type Row,
|
||||
type SortingState,
|
||||
type VisibilityState,
|
||||
} from '@tanstack/vue-table'
|
||||
@@ -95,10 +197,51 @@ interface Props {
|
||||
sorting: SortingState
|
||||
columnVisibility: VisibilityState
|
||||
allTaskTypes: string[]
|
||||
lockColumns?: boolean
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
// Frozen (locked) columns and their fixed widths (px), in column order.
|
||||
const FROZEN: Record<string, number> = {
|
||||
select: 48,
|
||||
thumbnail: 96,
|
||||
name: 200,
|
||||
}
|
||||
|
||||
const isFrozen = (id: string) => id in FROZEN
|
||||
|
||||
const frozenWidth = (id: string) => {
|
||||
const w = FROZEN[id]
|
||||
return w ? { width: `${w}px`, minWidth: `${w}px` } : undefined
|
||||
}
|
||||
|
||||
// Column partitioning for the two-pane (locked) layout. Movable headers/cells
|
||||
// respect column visibility; frozen ones are always shown.
|
||||
const frozenHeaders = (group: HeaderGroup<Shot>) =>
|
||||
group.headers.filter((h) => isFrozen(h.column.id) && h.column.getIsVisible())
|
||||
const movableHeaders = (group: HeaderGroup<Shot>) =>
|
||||
group.headers.filter((h) => !isFrozen(h.column.id) && h.column.getIsVisible())
|
||||
const frozenCells = (row: Row<Shot>) =>
|
||||
row.getVisibleCells().filter((c) => isFrozen(c.column.id))
|
||||
const movableCells = (row: Row<Shot>) =>
|
||||
row.getVisibleCells().filter((c) => !isFrozen(c.column.id))
|
||||
|
||||
const hasRows = computed(() => table.getRowModel().rows.length > 0)
|
||||
|
||||
// Sync vertical scroll between the two panes (right pane owns the scrollbars).
|
||||
const leftPane = ref<HTMLElement>()
|
||||
const rightPane = ref<HTMLElement>()
|
||||
let syncing = false
|
||||
const syncScroll = (from?: HTMLElement, to?: HTMLElement) => {
|
||||
if (syncing || !from || !to) return
|
||||
syncing = true
|
||||
to.scrollTop = from.scrollTop
|
||||
requestAnimationFrame(() => { syncing = false })
|
||||
}
|
||||
const onRightScroll = () => syncScroll(rightPane.value, leftPane.value)
|
||||
const onLeftScroll = () => syncScroll(leftPane.value, rightPane.value)
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:sorting': [sorting: SortingState]
|
||||
'update:columnVisibility': [visibility: VisibilityState]
|
||||
@@ -280,4 +423,13 @@ watch(
|
||||
-ms-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
/* Hide the left pane's vertical scrollbar (its scroll is synced from the right pane) */
|
||||
.scrollbar-hide {
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE/Edge */
|
||||
}
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
display: none; /* Chrome/Safari */
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -8,7 +8,7 @@ const props = defineProps<{
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative w-full overflow-auto">
|
||||
<div class="relative w-full h-full overflow-auto">
|
||||
<table :class="cn('w-full caption-bottom text-sm', props.class)">
|
||||
<slot />
|
||||
</table>
|
||||
|
||||
@@ -13,9 +13,9 @@
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="flex-1 overflow-auto">
|
||||
<div class="flex-1 overflow-hidden flex flex-col min-h-0">
|
||||
<!-- Shot Browser -->
|
||||
<div v-if="projectId">
|
||||
<div v-if="projectId" class="flex-1 min-h-0 flex flex-col">
|
||||
<ShotBrowser
|
||||
:project-id="projectId"
|
||||
:selected-episode-id="selectedEpisodeId ?? undefined"
|
||||
|
||||
Reference in New Issue
Block a user