241 lines
12 KiB
HTML
241 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Column Visibility Control Test</title>
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
<body class="p-8 bg-gray-50">
|
|
<div id="app">
|
|
<h1 class="text-2xl font-bold mb-6">Column Visibility Control Test</h1>
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow mb-6">
|
|
<h2 class="text-lg font-semibold mb-4">Updated Column Control (Select UI)</h2>
|
|
<div class="mb-4">
|
|
<!-- Simulated ColumnVisibilityControl -->
|
|
<div class="flex items-center gap-2">
|
|
<select v-model="selectedColumn" @change="handleColumnToggle" class="w-48 px-3 py-2 border border-gray-300 rounded-md">
|
|
<option value="toggle">Toggle Columns</option>
|
|
<optgroup label="Basic Columns">
|
|
<option value="name" @click="toggleColumn('name')">
|
|
☑️ Name ({{ visibleColumns.name ? 'Visible' : 'Hidden' }})
|
|
</option>
|
|
<option value="category" @click="toggleColumn('category')">
|
|
{{ visibleColumns.category ? '☑️' : '☐' }} Category
|
|
</option>
|
|
<option value="status" @click="toggleColumn('status')">
|
|
{{ visibleColumns.status ? '☑️' : '☐' }} Status
|
|
</option>
|
|
</optgroup>
|
|
<optgroup label="Task Status Columns">
|
|
<option value="modeling" @click="toggleColumn('modeling')">
|
|
{{ visibleColumns.modeling ? '☑️' : '☐' }} Modeling
|
|
</option>
|
|
<option value="surfacing" @click="toggleColumn('surfacing')">
|
|
{{ visibleColumns.surfacing ? '☑️' : '☐' }} Surfacing
|
|
</option>
|
|
<option value="rigging" @click="toggleColumn('rigging')">
|
|
{{ visibleColumns.rigging ? '☑️' : '☐' }} Rigging
|
|
</option>
|
|
</optgroup>
|
|
<optgroup label="Other Columns">
|
|
<option value="thumbnail" @click="toggleColumn('thumbnail')">
|
|
{{ visibleColumns.thumbnail ? '☑️' : '☐' }} Thumbnail
|
|
</option>
|
|
<option value="description" @click="toggleColumn('description')">
|
|
{{ visibleColumns.description ? '☑️' : '☐' }} Description
|
|
</option>
|
|
<option value="updatedAt" @click="toggleColumn('updatedAt')">
|
|
{{ visibleColumns.updatedAt ? '☑️' : '☐' }} Updated
|
|
</option>
|
|
</optgroup>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<h3 class="font-medium">Column Visibility Status:</h3>
|
|
<div class="grid grid-cols-3 gap-4 text-sm">
|
|
<div v-for="(visible, column) in visibleColumns" :key="column"
|
|
:class="visible ? 'text-green-600' : 'text-red-600'">
|
|
{{ column }}: {{ visible ? 'Visible' : 'Hidden' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<button @click="toggleAllColumns"
|
|
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
|
|
Toggle All Columns
|
|
</button>
|
|
<button @click="showAllColumns"
|
|
class="ml-2 px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600">
|
|
Show All
|
|
</button>
|
|
<button @click="hideAllColumns"
|
|
class="ml-2 px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600">
|
|
Hide All
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow">
|
|
<h2 class="text-lg font-semibold mb-4">Simulated Asset Table</h2>
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full border-collapse border border-gray-300">
|
|
<thead>
|
|
<tr class="bg-gray-50">
|
|
<th v-if="visibleColumns.name" class="border border-gray-300 px-4 py-2 text-left">Name</th>
|
|
<th v-if="visibleColumns.category" class="border border-gray-300 px-4 py-2 text-left">Category</th>
|
|
<th v-if="visibleColumns.status" class="border border-gray-300 px-4 py-2 text-left">Status</th>
|
|
<th v-if="visibleColumns.thumbnail" class="border border-gray-300 px-4 py-2 text-left">Thumbnail</th>
|
|
<th v-if="visibleColumns.modeling" class="border border-gray-300 px-4 py-2 text-left">Modeling</th>
|
|
<th v-if="visibleColumns.surfacing" class="border border-gray-300 px-4 py-2 text-left">Surfacing</th>
|
|
<th v-if="visibleColumns.rigging" class="border border-gray-300 px-4 py-2 text-left">Rigging</th>
|
|
<th v-if="visibleColumns.description" class="border border-gray-300 px-4 py-2 text-left">Description</th>
|
|
<th v-if="visibleColumns.updatedAt" class="border border-gray-300 px-4 py-2 text-left">Updated</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="asset in sampleAssets" :key="asset.id">
|
|
<td v-if="visibleColumns.name" class="border border-gray-300 px-4 py-2">{{ asset.name }}</td>
|
|
<td v-if="visibleColumns.category" class="border border-gray-300 px-4 py-2">{{ asset.category }}</td>
|
|
<td v-if="visibleColumns.status" class="border border-gray-300 px-4 py-2">{{ asset.status }}</td>
|
|
<td v-if="visibleColumns.thumbnail" class="border border-gray-300 px-4 py-2">{{ asset.thumbnail }}</td>
|
|
<td v-if="visibleColumns.modeling" class="border border-gray-300 px-4 py-2">
|
|
<span :class="getStatusColor(asset.modeling)">{{ asset.modeling }}</span>
|
|
</td>
|
|
<td v-if="visibleColumns.surfacing" class="border border-gray-300 px-4 py-2">
|
|
<span :class="getStatusColor(asset.surfacing)">{{ asset.surfacing }}</span>
|
|
</td>
|
|
<td v-if="visibleColumns.rigging" class="border border-gray-300 px-4 py-2">
|
|
<span :class="getStatusColor(asset.rigging)">{{ asset.rigging }}</span>
|
|
</td>
|
|
<td v-if="visibleColumns.description" class="border border-gray-300 px-4 py-2">{{ asset.description }}</td>
|
|
<td v-if="visibleColumns.updatedAt" class="border border-gray-300 px-4 py-2">{{ asset.updatedAt }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const { createApp, ref } = Vue;
|
|
|
|
createApp({
|
|
setup() {
|
|
const selectedColumn = ref('toggle');
|
|
|
|
const visibleColumns = ref({
|
|
name: true,
|
|
category: true,
|
|
status: true,
|
|
thumbnail: false,
|
|
modeling: true,
|
|
surfacing: true,
|
|
rigging: false,
|
|
description: false,
|
|
updatedAt: true
|
|
});
|
|
|
|
const sampleAssets = ref([
|
|
{
|
|
id: 1,
|
|
name: 'Hero Character',
|
|
category: 'Character',
|
|
status: 'Active',
|
|
thumbnail: '🎭',
|
|
modeling: 'approved',
|
|
surfacing: 'in_progress',
|
|
rigging: 'not_started',
|
|
description: 'Main character for the scene',
|
|
updatedAt: '2024-01-15'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'Magic Sword',
|
|
category: 'Prop',
|
|
status: 'Active',
|
|
thumbnail: '⚔️',
|
|
modeling: 'submitted',
|
|
surfacing: 'approved',
|
|
rigging: 'not_started',
|
|
description: 'Enchanted weapon with glowing effects',
|
|
updatedAt: '2024-01-14'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'Castle Environment',
|
|
category: 'Environment',
|
|
status: 'Active',
|
|
thumbnail: '🏰',
|
|
modeling: 'in_progress',
|
|
surfacing: 'not_started',
|
|
rigging: 'not_started',
|
|
description: 'Medieval castle background',
|
|
updatedAt: '2024-01-13'
|
|
}
|
|
]);
|
|
|
|
const handleColumnToggle = (event) => {
|
|
const value = event.target.value;
|
|
if (value !== 'toggle') {
|
|
toggleColumn(value);
|
|
}
|
|
// Reset selection
|
|
selectedColumn.value = 'toggle';
|
|
};
|
|
|
|
const toggleColumn = (column) => {
|
|
visibleColumns.value[column] = !visibleColumns.value[column];
|
|
};
|
|
|
|
const toggleAllColumns = () => {
|
|
const allVisible = Object.values(visibleColumns.value).every(v => v);
|
|
Object.keys(visibleColumns.value).forEach(key => {
|
|
visibleColumns.value[key] = !allVisible;
|
|
});
|
|
};
|
|
|
|
const showAllColumns = () => {
|
|
Object.keys(visibleColumns.value).forEach(key => {
|
|
visibleColumns.value[key] = true;
|
|
});
|
|
};
|
|
|
|
const hideAllColumns = () => {
|
|
Object.keys(visibleColumns.value).forEach(key => {
|
|
visibleColumns.value[key] = false;
|
|
});
|
|
};
|
|
|
|
const getStatusColor = (status) => {
|
|
const colors = {
|
|
'not_started': 'text-gray-500 bg-gray-100 px-2 py-1 rounded text-xs',
|
|
'in_progress': 'text-blue-700 bg-blue-100 px-2 py-1 rounded text-xs',
|
|
'submitted': 'text-yellow-700 bg-yellow-100 px-2 py-1 rounded text-xs',
|
|
'approved': 'text-green-700 bg-green-100 px-2 py-1 rounded text-xs',
|
|
'retake': 'text-red-700 bg-red-100 px-2 py-1 rounded text-xs'
|
|
};
|
|
return colors[status] || 'text-gray-500';
|
|
};
|
|
|
|
return {
|
|
selectedColumn,
|
|
visibleColumns,
|
|
sampleAssets,
|
|
handleColumnToggle,
|
|
toggleColumn,
|
|
toggleAllColumns,
|
|
showAllColumns,
|
|
hideAllColumns,
|
|
getStatusColor
|
|
};
|
|
}
|
|
}).mount('#app');
|
|
</script>
|
|
</body>
|
|
</html> |