Initial commit: PC Builder AdonisJS project

2026-06-28 10:41:51 +02:00
commit 648d0af538
144 changed files with 18570 additions and 0 deletions
@@ -0,0 +1,128 @@
+<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>