Kevin
137 lines
3.6 KiB
Vue
137 lines
3.6 KiB
Vue
<script setup lang="ts">
|
|
import { computed, onBeforeMount } from 'vue'
|
|
import {
|
|
cooler,
|
|
cpu,
|
|
defaultIcon,
|
|
fan,
|
|
graphicCard,
|
|
hardDrive,
|
|
memory,
|
|
motherboard,
|
|
pcCase,
|
|
powerSupply,
|
|
ssd,
|
|
wiFiCard,
|
|
} from '~/assets/icons'
|
|
import type Component from '#models/component'
|
|
import { Link } from '@adonisjs/inertia/vue'
|
|
|
|
const props = defineProps<{
|
|
components: Component[]
|
|
isAdminActive: boolean
|
|
}>()
|
|
const components = props.components
|
|
const originHeader = { 'X-Inertia-Origin': 'computer' }
|
|
|
|
let cost = 0
|
|
onBeforeMount(() => {
|
|
components.forEach((component: Component) => {
|
|
cost += parseFloat(String(component.price))
|
|
})
|
|
})
|
|
|
|
const componentTypeOrder = [
|
|
'Processor',
|
|
'Motherboard',
|
|
'Graphic Card',
|
|
'Memory',
|
|
'SSD',
|
|
'Storage',
|
|
'Cooler',
|
|
'Power Supply',
|
|
'Case',
|
|
'WiFi-Card',
|
|
'Fan',
|
|
'Other',
|
|
]
|
|
|
|
// Trier les composants selon l'ordre sp├®cifi├®
|
|
const sortedComponents = computed(() => {
|
|
return components.slice().sort((a, b) => {
|
|
return componentTypeOrder.indexOf(a.type.name) - componentTypeOrder.indexOf(b.type.name)
|
|
})
|
|
})
|
|
|
|
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
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full">
|
|
<table class="w-full mb-4 text-sm">
|
|
<thead>
|
|
<tr
|
|
class="px-4 py-2 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-400 bg-gray-50"
|
|
>
|
|
<td v-if="isAdminActive" colspan="5"></td>
|
|
<td v-else colspan="4"></td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="(component, index) in sortedComponents"
|
|
:key="component.id"
|
|
:class="{ 'bg-gray-200': index % 2 !== 0 }"
|
|
>
|
|
<td class="px-4 py-2 border-b border-gray-400">
|
|
<img
|
|
:src="getIconPath(component.type.name)"
|
|
:alt="`${component.type.name} Icon`"
|
|
class="w-6 h-6"
|
|
/>
|
|
</td>
|
|
<td class="px-4 py-2 border-b border-gray-400">
|
|
{{ component.type.name }}
|
|
</td>
|
|
<td
|
|
class="px-4 py-2 border-b border-gray-400"
|
|
:class="[isAdminActive ? '' : 'text-right']"
|
|
>
|
|
{{ component.name }}
|
|
</td>
|
|
|
|
<td v-if="isAdminActive" class="px-4 py-2 border-b border-gray-400 text-right">
|
|
Ôé¼{{ component.price }}
|
|
</td>
|
|
<td class="px-4 py-2 border-b border-gray-400 flex justify-center items-center">
|
|
<Link
|
|
:href="`/components/${component.id}/edit`"
|
|
method="get"
|
|
as="button"
|
|
class="px-3 py-1 bg-indigo-600 text-white rounded hover:bg-blue-700 transition text-sm"
|
|
:headers="originHeader"
|
|
>
|
|
Edit
|
|
</Link>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot v-if="isAdminActive">
|
|
<tr class="bg-gray-800 text-white">
|
|
<td class="px-4 py-2 border-b border-gray-400 whitespace-nowrap" colspan="3">Total</td>
|
|
<td class="px-4 py-2 border-b border-gray-400 whitespace-nowrap text-right">
|
|
Ôé¼{{ cost.toFixed(2) }}
|
|
</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|