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