pc_builder/inertia/pages/widgets/ComputerComponentsTable.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>