191 lines
4.9 KiB
HTML
191 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Asset Selection Test</title>
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
<style>
|
|
body {
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
padding: 20px;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 20px;
|
|
}
|
|
th, td {
|
|
border: 1px solid #ddd;
|
|
padding: 12px;
|
|
text-align: left;
|
|
}
|
|
th {
|
|
background-color: #f5f5f5;
|
|
}
|
|
tr:hover {
|
|
background-color: #f9f9f9;
|
|
}
|
|
tr.selected {
|
|
background-color: #e3f2fd;
|
|
}
|
|
.checkbox {
|
|
width: 18px;
|
|
height: 18px;
|
|
cursor: pointer;
|
|
}
|
|
.info {
|
|
margin-top: 20px;
|
|
padding: 15px;
|
|
background-color: #f0f0f0;
|
|
border-radius: 4px;
|
|
}
|
|
button {
|
|
padding: 8px 16px;
|
|
margin-right: 10px;
|
|
cursor: pointer;
|
|
border: 1px solid #ddd;
|
|
background: white;
|
|
border-radius: 4px;
|
|
}
|
|
button:hover {
|
|
background-color: #f5f5f5;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<h1>Asset Selection Test</h1>
|
|
<p>Testing checkbox selection with array-based v-model</p>
|
|
|
|
<div>
|
|
<button @click="selectAll">Select All</button>
|
|
<button @click="deselectAll">Deselect All</button>
|
|
<button @click="selectFirst3">Select First 3</button>
|
|
</div>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 50px;">
|
|
<input
|
|
type="checkbox"
|
|
class="checkbox"
|
|
:checked="isAllSelected"
|
|
@change="toggleSelectAll"
|
|
/>
|
|
</th>
|
|
<th>ID</th>
|
|
<th>Name</th>
|
|
<th>Category</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="asset in assets"
|
|
:key="asset.id"
|
|
:class="{ selected: selectedAssets[asset.id] }"
|
|
>
|
|
<td>
|
|
<input
|
|
type="checkbox"
|
|
class="checkbox"
|
|
:checked="selectedAssets[asset.id]"
|
|
@change="toggleAssetSelection(asset.id, $event.target.checked)"
|
|
/>
|
|
</td>
|
|
<td>{{ asset.id }}</td>
|
|
<td>{{ asset.name }}</td>
|
|
<td>{{ asset.category }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="info">
|
|
<h3>Selection Info</h3>
|
|
<p><strong>Selected Count:</strong> {{ getSelectedCount }} / {{ assets.length }}</p>
|
|
<p><strong>Selected IDs:</strong> {{ getSelectedIds().join(', ') || 'None' }}</p>
|
|
<p><strong>All Selected:</strong> {{ isAllSelected ? 'Yes' : 'No' }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const { createApp, ref, computed } = Vue;
|
|
|
|
createApp({
|
|
setup() {
|
|
const assets = ref([
|
|
{ id: 1, name: 'Character_Hero', category: 'Characters' },
|
|
{ id: 2, name: 'Prop_Sword', category: 'Props' },
|
|
{ id: 3, name: 'Set_Castle', category: 'Sets' },
|
|
{ id: 4, name: 'Vehicle_Car', category: 'Vehicles' },
|
|
{ id: 5, name: 'Character_Villain', category: 'Characters' },
|
|
{ id: 6, name: 'Prop_Shield', category: 'Props' },
|
|
]);
|
|
|
|
// Using object with boolean values instead of array
|
|
const selectedAssets = ref({});
|
|
|
|
const isAllSelected = computed(() => {
|
|
return assets.value.length > 0 &&
|
|
assets.value.every(a => selectedAssets.value[a.id]);
|
|
});
|
|
|
|
const getSelectedIds = () => {
|
|
return Object.keys(selectedAssets.value)
|
|
.filter(id => selectedAssets.value[id])
|
|
.map(id => Number(id));
|
|
};
|
|
|
|
const getSelectedCount = computed(() => {
|
|
return getSelectedIds().length;
|
|
});
|
|
|
|
const toggleSelectAll = (event) => {
|
|
const checked = event.target.checked;
|
|
assets.value.forEach(asset => {
|
|
selectedAssets.value[asset.id] = checked;
|
|
});
|
|
};
|
|
|
|
const toggleAssetSelection = (assetId, checked) => {
|
|
selectedAssets.value[assetId] = checked;
|
|
};
|
|
|
|
const selectAll = () => {
|
|
assets.value.forEach(asset => {
|
|
selectedAssets.value[asset.id] = true;
|
|
});
|
|
};
|
|
|
|
const deselectAll = () => {
|
|
selectedAssets.value = {};
|
|
};
|
|
|
|
const selectFirst3 = () => {
|
|
selectedAssets.value = {};
|
|
assets.value.slice(0, 3).forEach(asset => {
|
|
selectedAssets.value[asset.id] = true;
|
|
});
|
|
};
|
|
|
|
return {
|
|
assets,
|
|
selectedAssets,
|
|
isAllSelected,
|
|
getSelectedIds,
|
|
getSelectedCount,
|
|
toggleSelectAll,
|
|
toggleAssetSelection,
|
|
selectAll,
|
|
deselectAll,
|
|
selectFirst3
|
|
};
|
|
}
|
|
}).mount('#app');
|
|
</script>
|
|
</body>
|
|
</html>
|