Kevin
129 lines
4.2 KiB
Vue
129 lines
4.2 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
cooler,
|
|
cpu,
|
|
defaultIcon,
|
|
fan,
|
|
graphicCard,
|
|
hardDrive,
|
|
memory,
|
|
motherboard,
|
|
pcCase,
|
|
powerSupply,
|
|
ssd,
|
|
trashIcon,
|
|
wiFiCard,
|
|
} from '~/assets/icons'
|
|
import { router } from '@inertiajs/vue3'
|
|
import { useAdminMode } from '~/composables/isAdminMode'
|
|
import Component from '#models/component'
|
|
|
|
const props = defineProps<{
|
|
components: Component[]
|
|
}>()
|
|
|
|
const { isAdminActive } = useAdminMode()
|
|
|
|
function getIconPath(typeName: string): string {
|
|
const typeToIconMap: Record<string, string> = {
|
|
'Motherboard': motherboard,
|
|
'Processor': cpu,
|
|
'Memory': memory,
|
|
'HDD': hardDrive,
|
|
'SSD': ssd,
|
|
'Cooler': cooler,
|
|
'Graphic Card': graphicCard,
|
|
'Power Supply': powerSupply,
|
|
'Fan': fan,
|
|
'WiFi-Card': wiFiCard,
|
|
'Case': pcCase,
|
|
}
|
|
return typeToIconMap[typeName] || defaultIcon // Utilisez une ic├┤ne par d├®faut si n├®cessaire
|
|
}
|
|
|
|
function goToDetail(id: number) {
|
|
router.get(`/components/${id}`)
|
|
}
|
|
|
|
function deleteComponent(id: number) {
|
|
router.delete(`/components/${id}`)
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="flex flex-col mt-8">
|
|
<div class="py-2 -my-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
|
|
<div
|
|
class="inline-block min-w-full overflow-hidden align-middle border-b border-gray-200 shadow sm:rounded-lg"
|
|
>
|
|
<table class="min-w-full">
|
|
<thead>
|
|
<tr>
|
|
<th
|
|
class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50"
|
|
>
|
|
Type
|
|
</th>
|
|
<th
|
|
class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50"
|
|
>
|
|
Name
|
|
</th>
|
|
<th
|
|
v-if="isAdminActive"
|
|
class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50"
|
|
>
|
|
Price
|
|
</th>
|
|
<th
|
|
class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50"
|
|
>
|
|
Purchase Date
|
|
</th>
|
|
<th
|
|
class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50"
|
|
>
|
|
Action
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white">
|
|
<tr
|
|
v-for="component in components"
|
|
:key="component.id"
|
|
@click.stop.prevent="goToDetail(component.id)"
|
|
class="cursor-pointer hover:bg-indigo-600/50"
|
|
:class="[component.computerId !== null ? 'used bg-gray-400' : 'bg-white']"
|
|
>
|
|
<td class="px-6 py-4 border-b border-gray-200 whitespace-nowrap">
|
|
<img
|
|
:src="getIconPath(component.type.name)"
|
|
:alt="`${component.type.name} Icon`"
|
|
style="width: 32px; height: 32px"
|
|
/>
|
|
</td>
|
|
<td class="px-6 py-4 border-b border-gray-200 whitespace-nowrap">
|
|
{{ component.name }}
|
|
</td>
|
|
<td v-if="isAdminActive" class="px-6 py-4 border-b border-gray-200 whitespace-nowrap">
|
|
Ôé¼{{ component.price }}
|
|
</td>
|
|
<td class="px-6 py-4 border-b border-gray-200 whitespace-nowrap">
|
|
{{ component.purchaseDate }}
|
|
</td>
|
|
<td class="px-6 py-4 border-b border-gray-200 whitespace-nowrap">
|
|
<button
|
|
v-delete-confirm="() => deleteComponent(component.id)"
|
|
class="px-4 py-2 bg-gray-300 text-white rounded hover:bg-red-500 transition inline-flex items-center justify-center"
|
|
>
|
|
<img :src="trashIcon" alt="Delete" class="h-5 w-5" />
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style scoped></style>
|