Init Repo
This commit is contained in:
@@ -0,0 +1,241 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user