Highlight matching orders

db/market.go

@@ -149,7 +149,7 @@ func (db *DB) FetchUserOrders(pubkey string, orders *[]Order) error {
 func (db *DB) FetchMarketOrders(marketId int64, orders *[]Order) error {
 	query := "" +
 		"SELECT o.id, share_id, o.pubkey, o.side, o.quantity, o.price, o.invoice_id, o.created_at, s.description, s.market_id, " +
-		"CASE WHEN o.order_id IS NOT NULL THEN 'EXECUTED' ELSE 'PENDING' END AS status " +
+		"CASE WHEN o.order_id IS NOT NULL THEN 'EXECUTED' ELSE 'PENDING' END AS status, o.order_id " +
 		"FROM orders o " +
 		"JOIN shares s ON o.share_id = s.id " +
 		"JOIN invoices i ON i.id = o.invoice_id " +
@@ -162,7 +162,7 @@ func (db *DB) FetchMarketOrders(marketId int64, orders *[]Order) error {
 	defer rows.Close()
 	for rows.Next() {
 		var order Order
-		rows.Scan(&order.Id, &order.ShareId, &order.Pubkey, &order.Side, &order.Quantity, &order.Price, &order.InvoiceId, &order.CreatedAt, &order.ShareDescription, &order.Share.MarketId, &order.Status)
+		rows.Scan(&order.Id, &order.ShareId, &order.Pubkey, &order.Side, &order.Quantity, &order.Price, &order.InvoiceId, &order.CreatedAt, &order.ShareDescription, &order.Share.MarketId, &order.Status, &order.OrderId)
 		*orders = append(*orders, order)
 	}
 	return nil

db/types.go

@@ -61,5 +61,6 @@ type (
 		Price     int64  `json:"price"`
 		InvoiceId UUID
 		Invoice
+		OrderId UUID
 	}
 )

vue/src/components/MarketOrders.vue

@@ -7,7 +7,8 @@
         <th>status</th>
       </thead>
       <tbody>
-        <OrderRow :order="o" v-for="o in orders" :key="o.id" />
+        <OrderRow :order="o" v-for="o in orders" :key="o.Id" @mouseover="() => mouseover(o.Id)"
+          :selected="selected" />
       </tbody>
     </table>
   </div>
@@ -21,6 +22,18 @@ import OrderRow from './OrderRow.vue'
 const route = useRoute()
 const marketId = route.params.id
 
+const selected = ref([])
+
+function mouseover (oid) {
+  const o2id = orders.value.find(i => i.OrderId === oid)?.Id
+  if (o2id) {
+    selected.value = [oid, o2id]
+  } else {
+    // reset selection
+    selected.value = []
+  }
+}
+
 const orders = ref([])
 const url = `/api/market/${marketId}/orders`
 await fetch(url)

vue/src/components/OrderRow.vue

@@ -4,7 +4,7 @@
     <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 :class="'font-mono ' + statusClassName">{{ order.Status }}</td>
+    <td :class="'font-mono ' + statusClassName + ' ' + selectedClassName">{{ order.Status }}</td>
   </tr>
 </template>
 
@@ -12,7 +12,7 @@
 import { ref, defineProps, computed } from 'vue'
 import ago from 's-ago'
 
-const props = defineProps(['order'])
+const props = defineProps(['order', 'selected'])
 
 const order = ref(props.order)
 
@@ -23,4 +23,25 @@ const statusClassName = computed(() => {
   return 'error'
 })
 
+const selectedClassName = computed(() => {
+  if (typeof props.selected === 'boolean') {
+    return props.selected ? 'selected' : ''
+  }
+  if (Array.isArray(props.selected)) {
+    return props.selected.some(id => id === order.value.Id) ? 'selected' : ''
+  }
+  return ''
+})
+
 </script>
+
+<style scoped>
+td {
+  padding: 0 0.5em;
+}
+
+.selected {
+  background-color: #35df8d;
+  color: white;
+}
+</style>

vue/src/components/UserInvoices.vue

@@ -46,6 +46,10 @@ table {
   align-items: center;
 }
 
+td {
+  padding: 0 0.5em;
+}
+
 th {
   padding: 0 2rem;
 }