pending order detail expansion fix

src/components/Orders.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-data-table :headers="datatableHeaders" :items="orders" item-value="index"
+    <v-data-table :headers="datatableHeaders" :items="orders" item-value="id"
                   item-selectable="selectable" :show-select="false" :show-expand="true">
       <template v-slot:item.start="{ value }">{{ dateString(value) }}</template>
       <template v-slot:item.input="{ item }">
@@ -42,7 +42,7 @@
       <template v-slot:item.avg="{ item }">
         <pair-price :base-addr="item.order.tokenIn" :quote-addr="item.order.tokenOut" :value="item.avg" :show-btn="true"/>
       </template>
-      <template v-slot:item.status="{ item }">
+      <template v-slot:item.state="{ item }">
         <v-chip v-if="item.state===PendingOrderState.Submitted || item.state===PendingOrderState.Signing"
                 prepend-icon="mdi-signature">Wallet Signing</v-chip>
         <v-chip v-if="item.state===PendingOrderState.Rejected" prepend-icon="mdi-cancel">Rejected</v-chip>
@@ -135,26 +135,12 @@ const vaultAddr = computed(()=>props.vault?props.vault:s.vault)
 const inverted = ref({})
 
 
-// <thead>
-// <tr>
-//   <th className="num d-none d-md-table-cell">Date</th>
-//   <th className="token d-none d-sm-table-cell">Input</th>
-//   <th className="token d-none d-sm-table-cell">Output</th>
-//   <th className="amount">Remaining</th>
-//   <th className="amount">Filled</th>
-//   <th className="amount d-none d-md-table-cell">Avg&nbsp;Price</th>
-//   <th className="status">Status</th>
-//   <th className="cancel d-none d-lg-table-cell">&nbsp;</th>
-// </tr>
-// </thead>
 const datatableHeaders = [
   {title: 'Date', align: 'start', key: 'start'},
   {title: 'Input', align: 'end', key: 'input'},
   {title: 'Output', align: 'end', key: 'output'},
-  // {title: 'Remaining', align: 'end', key: 'remaining'},
-  // {title: 'Filled', align: 'end', key: 'filled'},
   {title: 'Avg Price', align: 'end', key: 'avg'},
-  {title: 'Status', align: 'end', key: 'status'},
+  {title: 'Status', align: 'end', key: 'state'},
   // {title: '', align: 'end', key: 'action'},
 ];
 
@@ -207,6 +193,7 @@ const orders = computed(()=>{
   for (const pend of ws.pendingOrders) {
     console.log('pended order', pend)
     result.push({
+      id: pend.id,
       start: pend.placementTime,
       order: pend.order,
       filled: 0,
@@ -216,13 +203,15 @@ const orders = computed(()=>{
   }
 
   // historical orders
-  if( vaultAddr.value in s.orders ) {
-    for (const [index, status] of Object.entries(s.orders[vaultAddr.value]).reverse()) {
+  const vault = vaultAddr.value;
+  if( vault in s.orders ) {
+    for (const [index, status] of Object.entries(s.orders[vault]).reverse()) {
       const st = {...status}
       const o = {...st.order}
       st.order = o
       console.log('order status', st)
       result.push(st)
+      st.id = `${vault}|${index}`
       st.index = parseInt(index)
       o.tranches = o.tranches.map((tranche)=>{
         const t = {...tranche}
@@ -246,7 +235,6 @@ const orders = computed(()=>{
       st.output = !o.amountIsInput ? o.amount : 0
       st.remaining = o.amount - st.filled
       st.selectable = st.state===OrderState.Open
-      st.status = st.state
     }
   }
   console.log('orders', result)
@@ -274,7 +262,7 @@ function describeTrancheLine(st, isMin, b, m) {
   // todo make this a PairPrice
   if( b===0 && m===0 ) return ''
   const chainId = useStore().chainId
-  console.log('tranche line', isMin, b, m)
+  // console.log('tranche line', isMin, b, m)
   const inverted = st.order.tokenIn > st.order.tokenOut
   const t0 = inverted ? st.order.tokenIn : st.order.tokenOut
   const t1 = !inverted ? st.order.tokenIn : st.order.tokenOut
@@ -309,7 +297,7 @@ function describeTrancheLine(st, isMin, b, m) {
   overflow-x: hidden;
   text-overflow: ellipsis;
 }
-.status {
+.state {
   max-width: 8em;
 }
 .cancel {