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,136 @@
+<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 Component from '#models/component'
+import { Link } from '@inertiajs/vue3'
+
+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>