implement date picker

frontend/components/Form/DatePicker.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="dropdown dropdown-end w-full" ref="label">
+    <FormTextField tabindex="0" label="Date" v-model="dateText" :inline="inline" readonly />
+    <div @blur="resetTime" tabindex="0" class="mt-1 card compact dropdown-content shadow bg-base-100 rounded-box w-64">
+      <div class="card-body">
+        <div class="flex justify-between items-center">
+          <button class="btn btn-xs" @click="prevMonth">
+            <Icon class="h-5 w-5" name="mdi-arrow-left"></Icon>
+          </button>
+          <p class="text-center">{{ month }} {{ year }}</p>
+          <button class="btn btn-xs" @click="nextMonth">
+            <Icon class="h-5 w-5" name="mdi-arrow-right"></Icon>
+          </button>
+        </div>
+        <div class="grid grid-cols-7 gap-2">
+          <div v-for="d in daysIdx">
+            <p class="text-center">
+              {{ d }}
+            </p>
+          </div>
+          <template v-for="day in days">
+            <button
+              v-if="day.number != ''"
+              class="text-center btn-xs btn btn-outline"
+              @click="select($event, day.date)"
+            >
+              {{ day.number }}
+            </button>
+            <div v-else></div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const emit = defineEmits(['update:modelValue', 'update:text']);
+
+  const props = defineProps({
+    modelValue: {
+      type: Date,
+      required: false,
+      default: null,
+    },
+    inline: {
+      type: Boolean,
+      default: false,
+    },
+  });
+
+  const selected = useVModel(props, 'modelValue', emit);
+  const dateText = computed(() => {
+    if (selected.value) {
+      return selected.value.toLocaleDateString();
+    }
+    return '';
+  });
+
+  const time = ref(new Date());
+  function resetTime() {
+    time.value = new Date();
+  }
+
+  const label = ref<HTMLElement>();
+  onClickOutside(label, () => {
+    resetTime();
+  });
+
+  const month = computed(() => {
+    return time.value.toLocaleString('default', { month: 'long' });
+  });
+
+  const year = computed(() => {
+    return time.value.getFullYear();
+  });
+
+  function nextMonth() {
+    time.value.setMonth(time.value.getMonth() + 1);
+    time.value = new Date(time.value);
+  }
+
+  function prevMonth() {
+    time.value.setMonth(time.value.getMonth() - 1);
+    time.value = new Date(time.value);
+  }
+
+  const daysIdx = computed(() => {
+    return ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+  });
+
+  function select(e: MouseEvent, day: Date) {
+    console.log(day);
+    selected.value = day;
+    console.log(selected.value);
+    // @ts-ignore
+    e.target.blur();
+    resetTime();
+  }
+
+  type DayEntry = {
+    number: number | string;
+    date: Date;
+  };
+
+  function daysInMonth(month: number, year: number) {
+    return new Date(year, month, 0).getDate();
+  }
+
+  const days = computed<DayEntry[]>(() => {
+    const days = [];
+
+    const totalDays = daysInMonth(time.value.getMonth() + 1, time.value.getFullYear());
+
+    const firstDay = new Date(time.value.getFullYear(), time.value.getMonth(), 1).getDay();
+
+    for (let i = 0; i < firstDay; i++) {
+      days.push({
+        number: '',
+        date: new Date(),
+      });
+    }
+
+    for (let i = 1; i <= totalDays; i++) {
+      days.push({
+        number: i,
+        date: new Date(time.value.getFullYear(), time.value.getMonth(), i),
+      });
+    }
+
+    return days;
+  });
+</script>

frontend/components/Form/TextArea.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="form-control">
+  <div class="form-control" v-if="!inline">
     <label class="label">
       <span class="label-text">{{ label }}</span>
     </label>
@@ -9,13 +9,19 @@
       <span class="label-text-alt"> {{ valueLen }}/{{ limit }}</span>
     </label>
   </div>
+  <div v-else class="sm:grid sm:grid-cols-4 sm:items-start sm:gap-4">
+    <label class="label">
+      <span class="label-text">{{ label }}</span>
+    </label>
+    <textarea class="textarea textarea-bordered col-span-3 mt-3 h-24" auto-grow v-model="value" :placeholder="placeholder" />
+  </div>
 </template>
 
 <script lang="ts" setup>
   const emit = defineEmits(['update:modelValue']);
   const props = defineProps({
     modelValue: {
-      type: String,
+      type: [String],
       required: true,
     },
     label: {
@@ -34,6 +40,10 @@
       type: String,
       default: '',
     },
+    inline: {
+      type: Boolean,
+      default: false,
+    },
   });
 
   const value = useVModel(props, 'modelValue', emit);

frontend/components/Form/TextField.vue

@@ -1,10 +1,16 @@
 <template>
-  <div class="form-control w-full">
+  <div v-if="!inline" class="form-control w-full">
     <label class="label">
       <span class="label-text">{{ label }}</span>
     </label>
     <input ref="input" :type="type" v-model="value" class="input input-bordered w-full" />
   </div>
+  <div v-else class="sm:grid sm:grid-cols-4 sm:items-start sm:gap-4">
+    <label class="label">
+      <span class="label-text">{{ label }}</span>
+    </label>
+    <input class="input input-bordered col-span-3 w-full mt-2" v-model="value" />
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -14,7 +20,7 @@
       default: '',
     },
     modelValue: {
-      type: String,
+      type: [String, Number],
       default: null,
     },
     type: {
@@ -25,6 +31,10 @@
       type: Boolean,
       default: null,
     },
+    inline: {
+      type: Boolean,
+      default: false,
+    },
   });
 
   const input = ref<HTMLElement | null>(null);

frontend/lib/api/classes/items.ts

@@ -22,11 +22,11 @@ export interface Item {
   notes: string;
   purchaseFrom: string;
   purchasePrice: number;
-  purchaseTime: string;
+  purchaseTime: Date;
   serialNumber: string;
   soldNotes: string;
   soldPrice: number;
-  soldTime: string;
+  soldTime: Date;
   soldTo: string;
   updatedAt: string;
 }
@@ -41,7 +41,17 @@ export class ItemsApi extends BaseAPI {
   }
 
   async get(id: string) {
-    return this.http.get<Item>(route(`/items/${id}`));
+    const payload = await this.http.get<Item>(route(`/items/${id}`));
+
+    if (!payload.data) {
+      return payload;
+    }
+
+    // Parse Date Types
+    payload.data.purchaseTime = new Date(payload.data.purchaseTime);
+    payload.data.soldTime = new Date(payload.data.soldTime);
+
+    return payload;
   }
 
   async delete(id: string) {

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

@@ -1,11 +1,147 @@
-<template>
-  <div>Edit Me</div>
-</template>
-
 <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>
 
-<style scoped></style>
+<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>