141 lines
4.4 KiB
Vue
141 lines
4.4 KiB
Vue
<template>
|
|
<div class="flex items-center gap-2">
|
|
<Select v-model="selectedColumn" @update:model-value="handleColumnToggle">
|
|
<SelectTrigger class="w-[180px]">
|
|
<SelectValue placeholder="Toggle columns">
|
|
<div class="flex items-center gap-2">
|
|
<Columns class="h-4 w-4" />
|
|
<span>Columns</span>
|
|
</div>
|
|
</SelectValue>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="toggle">Toggle Columns</SelectItem>
|
|
<SelectGroup>
|
|
<SelectLabel>Basic Columns</SelectLabel>
|
|
<SelectItem value="thumbnail" @click="toggleColumn('thumbnail')">
|
|
<div class="flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
:checked="isColumnVisible('thumbnail')"
|
|
@change="handleCheckboxChange('thumbnail', $event)"
|
|
class="rounded border-gray-300"
|
|
/>
|
|
<span>Thumbnail</span>
|
|
</div>
|
|
</SelectItem>
|
|
<SelectItem value="name" @click="toggleColumn('name')">
|
|
<div class="flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
:checked="isColumnVisible('name')"
|
|
@change="handleCheckboxChange('name', $event)"
|
|
class="rounded border-gray-300"
|
|
/>
|
|
<span>Shot Name</span>
|
|
</div>
|
|
</SelectItem>
|
|
<SelectItem value="episode" @click="toggleColumn('episode')">
|
|
<div class="flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
:checked="isColumnVisible('episode')"
|
|
@change="handleCheckboxChange('episode', $event)"
|
|
class="rounded border-gray-300"
|
|
/>
|
|
<span>Episode</span>
|
|
</div>
|
|
</SelectItem>
|
|
<SelectItem value="status" @click="toggleColumn('status')">
|
|
<div class="flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
:checked="isColumnVisible('status')"
|
|
@change="handleCheckboxChange('status', $event)"
|
|
class="rounded border-gray-300"
|
|
/>
|
|
<span>Status</span>
|
|
</div>
|
|
</SelectItem>
|
|
</SelectGroup>
|
|
<SelectGroup>
|
|
<SelectLabel>Task Status Columns</SelectLabel>
|
|
<SelectItem
|
|
v-for="taskType in allTaskTypes"
|
|
:key="taskType"
|
|
:value="taskType"
|
|
@click="toggleColumn(taskType)"
|
|
>
|
|
<div class="flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
:checked="isColumnVisible(taskType)"
|
|
@change="handleCheckboxChange(taskType, $event)"
|
|
class="rounded border-gray-300"
|
|
/>
|
|
<span>{{ formatTaskType(taskType) }}</span>
|
|
</div>
|
|
</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed } from 'vue'
|
|
import { Columns } from 'lucide-vue-next'
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectLabel,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select'
|
|
import type { VisibilityState } from '@tanstack/vue-table'
|
|
|
|
interface Props {
|
|
columnVisibility: VisibilityState
|
|
allTaskTypes: string[]
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:columnVisibility': [visibility: VisibilityState]
|
|
}>()
|
|
|
|
const selectedColumn = ref('toggle')
|
|
|
|
const handleColumnToggle = (value: string) => {
|
|
// Reset selection after interaction
|
|
selectedColumn.value = 'toggle'
|
|
}
|
|
|
|
const isColumnVisible = (columnId: string) => {
|
|
// If not in visibility state, column is visible by default
|
|
return props.columnVisibility[columnId] !== false
|
|
}
|
|
|
|
const handleCheckboxChange = (column: string, event: Event) => {
|
|
const target = event.target as HTMLInputElement
|
|
updateColumn(column, target.checked)
|
|
}
|
|
|
|
const toggleColumn = (column: string) => {
|
|
updateColumn(column, !isColumnVisible(column))
|
|
}
|
|
|
|
const updateColumn = (column: string, checked: boolean) => {
|
|
const newVisibility = { ...props.columnVisibility }
|
|
newVisibility[column] = checked
|
|
emit('update:columnVisibility', newVisibility)
|
|
}
|
|
|
|
const formatTaskType = (taskType: string) => {
|
|
return taskType.charAt(0).toUpperCase() + taskType.slice(1)
|
|
}
|
|
</script>
|