Create OrderRow component

vue/src/components/MarketOrders.vue

@@ -7,11 +7,7 @@
         <th>status</th>
       </thead>
       <tbody>
-        <tr v-for="o in orders " :key="o.id" class="success">
+        <OrderRow :order="o" v-for="o in orders" :key="o.id" />
-          <td>{{ o.side }} {{ o.quantity }} {{ o.ShareDescription }} @ {{ o.price }} sats</td>
-          <td class="hidden-sm">{{ ago(new Date(o.CreatedAt)) }}</td>
-          <td class="font-mono">PENDING</td>
-        </tr>
       </tbody>
     </table>
   </div>
@@ -20,7 +16,7 @@
 <script setup>
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
-import ago from 's-ago'
+import OrderRow from './OrderRow.vue'
 
 const route = useRoute()
 const marketId = route.params.id
@@ -30,7 +26,11 @@ const url = `/api/market/${marketId}/orders`
 await fetch(url)
   .then(r => r.json())
   .then(body => {
-    orders.value = body
+    orders.value = body.map(o => {
+      // remove market column
+      delete o.MarketId
+      return o
+    })
   })
   .catch(console.error)
 </script>

vue/src/components/OrderRow.vue

@@ -0,0 +1,22 @@
+<template>
+  <tr :class="className">
+    <td v-if="order.MarketId"><router-link :to="/market/ + order.MarketId">{{ order.MarketId }}</router-link></td>
+    <td>{{ order.side }} {{ order.quantity }} {{ order.ShareDescription }} @ {{ order.price }} sats</td>
+    <td :title="order.CreatedAt" class="hidden-sm">{{ ago(new Date(order.CreatedAt)) }}</td>
+    <td></td>
+  </tr>
+</template>
+
+<script setup>
+import { ref, defineProps, computed } from 'vue'
+import ago from 's-ago'
+
+const props = defineProps(['order'])
+
+const order = ref(props.order)
+
+const className = computed(() => {
+  return order.value.side === 'BUY' ? 'success' : 'error'
+})
+
+</script>

vue/src/components/UserOrders.vue

@@ -8,12 +8,7 @@
         <th>status</th>
       </thead>
       <tbody>
-        <tr v-for="o in orders " :key="o.id">
+        <OrderRow :order="o" v-for="o in orders" :key="o.id" />
-          <td><router-link :to="/market/ + o.MarketId">{{ o.MarketId }}</router-link></td>
-          <td>{{ o.side }} {{ o.quantity }} {{ o.ShareDescription }} @ {{ o.price }} sats</td>
-          <td :title="o.CreatedAt" class="hidden-sm">{{ ago(new Date(o.CreatedAt)) }}</td>
-          <td></td>
-        </tr>
       </tbody>
     </table>
   </div>
@@ -21,7 +16,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import ago from 's-ago'
+import OrderRow from './OrderRow.vue'
 
 const orders = ref(null)