homebox/frontend/pages/item/[id]/edit.vue

<script setup lang="ts">
  definePageMeta({
    layout: 'home',
  });

  const route = useRoute();
  const api = useUserApi();
  const toast = useNotifier();

  const itemId = computed<string>(() => route.params.id as string);

  const { data: item } = useAsyncData(async () => {
    const { data, error } = await api.items.get(itemId.value);
    if (error) {
      toast.error('Failed to load item');
      navigateTo('/home');
      return;
    }
    return data;
  });

  type FormField = {
    type: 'text' | 'textarea' | 'select' | 'date';
    label: string;
    ref: string;
  };

  const mainFields: FormField[] = [
    {
      type: 'text',
      label: 'Name',
      ref: 'name',
    },
    {
      type: 'textarea',
      label: 'Description',
      ref: 'description',
    },
    {
      type: 'text',
      label: 'Serial Number',
      ref: 'serialNumber',
    },
    {
      type: 'text',
      label: 'Model Number',
      ref: 'modelNumber',
    },
    {
      type: 'text',
      label: 'Manufacturer',
      ref: 'manufacturer',
    },
    {
      type: 'textarea',
      label: 'Notes',
      ref: 'notes',
    },
  ];

  const purchaseFields: FormField[] = [
    {
      type: 'text',
      label: 'Purchased From',
      ref: 'purchaseFrom',
    },
    {
      type: 'text',
      label: 'Purchased Price',
      ref: 'purchasePrice',
    },
    {
      type: 'date',
      label: 'Purchased At',
      ref: 'purchaseTime',
    },
  ];

  const soldFields = [
    {
      type: 'text',
      label: 'Sold To',
      ref: 'soldTo',
    },
    {
      type: 'text',
      label: 'Sold Price',
      ref: 'soldPrice',
    },
    {
      type: 'date',
      label: 'Sold At',
      ref: 'soldTime',
    },
  ];
</script>

<template>
  <BaseContainer v-if="item" class="pb-8">
    <div class="space-y-4">
      <div class="overflow-hidden card bg-base-100 shadow-xl sm:rounded-lg">
        <div class="px-4 py-5 sm:px-6">
          <h3 class="text-lg font-medium leading-6">Item Details</h3>
        </div>
        <div class="border-t border-gray-300 sm:p-0">
          <div class="sm:divide-y sm:divide-gray-300 grid grid-cols-1" v-for="field in mainFields">
            <div class="pt-2 pb-4 sm:px-6 border-b border-gray-300">
              <FormTextArea v-if="field.type === 'textarea'" v-model="item[field.ref]" :label="field.label" inline />
              <FormTextField v-else-if="field.type === 'text'" v-model="item[field.ref]" :label="field.label" inline />
              <FormDatePicker v-else-if="field.type === 'date'" v-model="item[field.ref]" :label="field.label" inline />
            </div>
          </div>
        </div>
      </div>

      <div class="overflow-visible card bg-base-100 shadow-xl sm:rounded-lg">
        <div class="px-4 py-5 sm:px-6">
          <h3 class="text-lg font-medium leading-6">Purchase Details</h3>
        </div>
        <div class="border-t border-gray-300 sm:p-0">
          <div class="sm:divide-y sm:divide-gray-300 grid grid-cols-1" v-for="field in purchaseFields">
            <div class="pt-2 pb-4 sm:px-6 border-b border-gray-300">
              <FormTextArea v-if="field.type === 'textarea'" v-model="item[field.ref]" :label="field.label" inline />
              <FormTextField v-else-if="field.type === 'text'" v-model="item[field.ref]" :label="field.label" inline />
              <FormDatePicker v-else-if="field.type === 'date'" v-model="item[field.ref]" :label="field.label" inline />
            </div>
          </div>
        </div>
      </div>

      <div class="overflow-visible card bg-base-100 shadow-xl sm:rounded-lg">
        <div class="px-4 py-5 sm:px-6">
          <h3 class="text-lg font-medium leading-6">Sold Details</h3>
        </div>
        <div class="border-t border-gray-300 sm:p-0">
          <div class="sm:divide-y sm:divide-gray-300 grid grid-cols-1" v-for="field in soldFields">
            <div class="pt-2 pb-4 sm:px-6 border-b border-gray-300">
              <FormTextArea v-if="field.type === 'textarea'" v-model="item[field.ref]" :label="field.label" inline />
              <FormTextField v-else-if="field.type === 'text'" v-model="item[field.ref]" :label="field.label" inline />
              <FormDatePicker v-else-if="field.type === 'date'" v-model="item[field.ref]" :label="field.label" inline />
            </div>
          </div>
        </div>
      </div>
    </div>
  </BaseContainer>
</template>