pc_builder/inertia/pages/computers/create.vue

<script setup lang="ts">
import { computed, reactive } from 'vue'
import { Link, usePage } from '@inertiajs/vue3'

const { props } = usePage<{
  components: any[]
  states: any[]
  errors: Record<string, string>
}>()
const { components, states } = props
const errors = computed(() => props.errors || {})

const componentTypeOrder = [
  'Processor',
  'Motherboard',
  'Graphic Card',
  'Memory',
  'SSD',
  'Storage',
  'Cooler',
  'Power Supply',
  'Case',
  'WiFi-Card',
  'Fan',
  'Other',
]

const componentsByType = computed(() => {
  const groups = new Map<string, any[]>()
  components.forEach((component) => {
    if (!groups.has(component.type.name)) {
      groups.set(component.type.name, [])
    }
    groups.get(component.type.name)!.push(component)
  })
  return Array.from(groups)
    .map(([type, components]) => ({ type, components }))
    .sort((a, b) => componentTypeOrder.indexOf(a.type) - componentTypeOrder.indexOf(b.type))
})

const form = reactive({
  title: '',
  sellPrice: 0,
  gpuScore: 0,
  cpuScore: 0,
  stateId: 1,
  globalScore: 0,
  componentsId: [] as number[],
})

function getErrorMessage(field: string): string | null {
  return errors.value[field] || 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">Create New Computer</h1>
    <form class="space-y-6">
      <div class="mt-2">
        <label class="block text-gray-700 text-sm font-bold mb-2" for="title">Title</label>
        <input
          name="title"
          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 class="mt-2 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
            name="gpuScore"
            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
            name="cpuScore"
            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
            name="globalScore"
            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="mt-2">
        <label class="block text-gray-700 text-sm font-bold mb-2" for="components"
          >Components</label
        >
        <div v-for="{ type, components } in componentsByType" :key="type">
          <label :for="`select-${type}`" class="block text-gray-700 text-sm font-bold mb-1 mt-2">
            {{ type }}
          </label>
          <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
            <div
              v-for="component in components"
              :key="component.id"
              class="flex items-center mt-1"
            >
              <input
                type="checkbox"
                :id="`checkbox-${component.id}`"
                :value="component.id"
                v-model="form.componentsId"
                class="mr-2"
              />
              <label :for="`checkbox-${component.id}`" class="text-sm text-gray-700">
                {{ component.name }}
              </label>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-2 grid grid-cols-3 gap-4">
        <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 />
        <div class="mt-2">
          <label class="block text-gray-700 text-sm font-bold mb-2" for="sellPrice"
            >Sell Price</label
          >
          <input
            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>

      <Link
        href="/computers"
        type="button"
        as="button"
        method="post"
        :data="form"
        class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-blue-700 transition"
      >
        Create
      </Link>
    </form>
  </div>
</template>

<style scoped></style>