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,127 @@
+<script setup lang="ts">
+import { computed, reactive } from 'vue'
+import { Link, router, usePage } from '@inertiajs/vue3'
+
+const { props } = usePage<{
+  computer: any
+  availableComponents: any[]
+  states: any[]
+  errors?: any[]
+}>()
+const { computer, availableComponents, states } = props
+const errors = computed(() => props.errors || [])
+
+const form = reactive({
+  id: computer.id,
+  title: computer.title,
+  sellPrice: computer.sellPrice,
+  gpuScore: computer.gpuScore,
+  cpuScore: computer.cpuScore,
+  globalScore: computer.globalScore,
+  stateId: computer.state.id,
+  componentsId: computer.components.map((c: any) => c.id),
+})
+
+function updateComponents(componentsId: number[]) {
+  form.componentsId = componentsId
+}
+
+function deleteComputer(id: number) {
+  router.delete(`/computers/${id}`)
+}
+
+function getErrorMessage(field: string): string | null {
+  const error = errors.value.find((error) => error.field === field)
+  return error ? error.message : null
+}
+</script>
+
+<template>
+  <div class="max-w-4xl mx-auto p-8 bg-white shadow-lg rounded-lg">
+    <h1 class="text-2xl font-semibold mb-8 text-gray-800">Edit Computer</h1>
+    <form class="space-y-6">
+      <div>
+        <label class="block text-gray-700 text-sm font-bold mb-2" for="title">Title</label>
+        <input
+          v-model="form.title"
+          class="w-full mt-2 border-gray-200 focus:border-indigo-600 focus:ring focus:ring-indigo-500/40 px-3 py-2 border rounded text-gray-700"
+          type="text"
+        />
+      </div>
+
+      <div>
+        <label class="block text-gray-700 text-sm font-bold mb-2" for="sellPrice">Sell Price</label>
+        <input
+          name="sell_price"
+          v-model="form.sellPrice"
+          class="w-full mt-2 border-gray-200 focus:border-indigo-600 focus:ring focus:ring-indigo-500/40 px-3 py-2 border rounded text-gray-700"
+          type="number"
+          step="0.01"
+        />
+      </div>
+
+      <div class="grid grid-cols-3 gap-4">
+        <div>
+          <label class="block text-gray-700 text-sm font-bold mb-2" for="gpuScore">GPU Score</label>
+          <input
+            v-model="form.gpuScore"
+            class="w-full border-gray-200 focus:border-indigo-600 focus:ring focus:ring-indigo-500/40 px-3 py-2 border rounded text-gray-700"
+            type="number"
+          />
+        </div>
+        <div>
+          <label class="block text-gray-700 text-sm font-bold mb-2" for="cpuScore">CPU Score</label>
+          <input
+            v-model="form.cpuScore"
+            class="w-full border-gray-200 focus:border-indigo-600 focus:ring focus:ring-indigo-500/40 px-3 py-2 border rounded text-gray-700"
+            type="number"
+          />
+        </div>
+        <div>
+          <label class="block text-gray-700 text-sm font-bold mb-2" for="globalScore"
+            >Global Score</label
+          >
+          <input
+            v-model="form.globalScore"
+            class="w-full border-gray-200 focus:border-indigo-600 focus:ring focus:ring-indigo-500/40 px-3 py-2 border rounded text-gray-700"
+            type="number"
+          />
+        </div>
+      </div>
+
+      <div class="pt-2">
+        <label class="block text-gray-700 text-sm font-bold mb-2" for="components">State</label>
+        <select
+          v-model="form.stateId"
+          class="w-full mt-2 border-gray-200 focus:border-indigo-600 focus:ring-indigo-500 px-3 py-2.5 focus:ring-1 border rounded text-gray-700 bg-white"
+        >
+          <option disabled value="">Please select one</option>
+          <option v-for="state in states" :key="state.id" :value="state.id">
+            {{ state.name }}
+          </option>
+        </select>
+      </div>
+      <div
+        class="flex flex-col md:flex-row items-stretch justify-between space-y-2 md:space-y-0 md:space-x-2"
+      >
+        <Link
+          :href="`/computers/${form.id}`"
+          method="put"
+          :data="form"
+          as="button"
+          class="w-full md:w-auto px-4 py-2 bg-indigo-600 text-white rounded hover:bg-blue-700 transition flex justify-center"
+        >
+          Save
+        </Link>
+        <button
+          @click="deleteComputer(computer.id)"
+          class="w-full md:w-auto px-4 py-2 bg-gray-300 text-white rounded hover:bg-red-500 transition flex items-center justify-center"
+        >
+          Delete
+        </button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<style scoped></style>