Update MarketForm

* use textarea
* add end date input
* add cancel button
* add missing Content-type header

vue/src/components/MarketForm.vue

@@ -1,28 +1,36 @@
 <template>
-  <form ref="form" class="mx-auto text-left" method="post" action="/api/market" @submit.prevent="submitForm">
+  <form ref="form" class="flex flex-col mx-auto text-left" method="post" action="/api/market"
-    <label class="mx-1" for="desc">description</label>
+    @submit.prevent="submitForm">
-    <input v-model="description" class="mx-1" id="desc" name="desc" type="text" placeholder="event description">
+    <label for="desc">event description</label>
-    <button class="mx-1" type="submit">submit</button>
+    <textarea v-model="description" class="mb-1" id="desc" name="desc" type="text"></textarea>
+    <label for="endDate">end date</label>
+    <input v-model="endDate" class="mb-3" id="endDate" name="endDate" type="date" />
+    <div class="flex flex-row justify-center">
+      <button type="button" class="me-1" @click.prevent="$props.onCancel">cancel</button>
+      <button type="submit">submit</button>
+    </div>
   </form>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, defineProps } from 'vue'
+
+defineProps(['onCancel'])
 
 const form = ref(null)
 const description = ref(null)
+const endDate = ref(null)
 
 const submitForm = async () => {
   const url = window.origin + '/api/market'
-  const body = JSON.stringify({ description: description.value })
+  const body = JSON.stringify({ description: description.value, endDate: endDate.value })
-  await fetch(url, { method: 'post', body })
+  await fetch(url, { method: 'post', headers: { 'Content-type': 'application/json' }, body })
 }
 
 </script>
 
 <style scoped>
-input {
+textarea {
-  padding: 0 0.3em;
   color: #000;
 }
 </style>

vue/src/components/MarketList.vue

@@ -6,7 +6,7 @@
   </ul>
   <button v-if="!showForm" @click.prevent="toggleForm">+ create market</button>
   <div v-else class="flex flex-col justify-center">
-    <MarketForm />
+    <MarketForm :onCancel="toggleForm" />
   </div>
 </template>