From 0e587d48caa4f5f3415f9e618c6acdbbb929da14 Mon Sep 17 00:00:00 2001
From: ekzyis <ekzyis@ekzyis.com>
Date: Mon, 20 Nov 2023 00:52:21 +0100
Subject: [PATCH] Update MarketForm

* use textarea
* add end date input
* add cancel button
* add missing Content-type header
---
 vue/src/components/MarketForm.vue | 26 +++++++++++++++++---------
 vue/src/components/MarketList.vue |  2 +-
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/vue/src/components/MarketForm.vue b/vue/src/components/MarketForm.vue
index 4b5d9a3..6fa0cdb 100644
--- a/vue/src/components/MarketForm.vue
+++ b/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">
-    <label class="mx-1" for="desc">description</label>
-    <input v-model="description" class="mx-1" id="desc" name="desc" type="text" placeholder="event description">
-    <button class="mx-1" type="submit">submit</button>
+  <form ref="form" class="flex flex-col mx-auto text-left" method="post" action="/api/market"
+    @submit.prevent="submitForm">
+    <label for="desc">event description</label>
+    <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 })
-  await fetch(url, { method: 'post', body })
+  const body = JSON.stringify({ description: description.value, endDate: endDate.value })
+  await fetch(url, { method: 'post', headers: { 'Content-type': 'application/json' }, body })
 }
 
 </script>
 
 <style scoped>
-input {
-  padding: 0 0.3em;
+textarea {
   color: #000;
 }
 </style>
diff --git a/vue/src/components/MarketList.vue b/vue/src/components/MarketList.vue
index 6202e67..5b2365f 100644
--- a/vue/src/components/MarketList.vue
+++ b/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>