Refactoring

src/views/opg/CallStack.vue

@@ -6,12 +6,18 @@
         </v-list-item-content>
         </v-list-item>
         <div class="d-flex flex-column px-4 call-stack-content-wrapper" style="font-size: 15px">
-            <CallStackItem
-                v-for="(op, idx) in operations"
-                :key="idx"
-                :network="network"
-                :operation="op"
-            />
+            <template v-for="op in operations">
+                <CallStackItem
+                    :key="op.id"
+                    :operation="op"
+                    :network="network"
+                />
+                <CallStackItem v-for="intOp in op.internal_operations"
+                    :key="intOp.id"
+                    :operation="intOp"
+                    :network="network"
+                />
+            </template>
         </div>
     </v-list>
 </template>
@@ -29,14 +35,5 @@ export default {
     components: {
         CallStackItem
     },
-    created() {
-        this.operations.sort((a, b) => {
-        // if (a.counter !== b.counter) {
-        //     return a.counter - b.counter;
-        // }
-
-        return a.id - b.id;
-        });
-    },
 }
 </script>

src/views/opg/CallStackItem.vue

@@ -5,10 +5,7 @@
             <span class="text--secondary" v-if="alias">{{ alias }}</span>
             <Shortcut v-else class="text--secondary" :str="operation.destination"/>
             <span v-if="operation.destination" class="text--secondary" style="font-size: 20px"> → </span>
-            <span v-if="operation.tag" class="hash accent--text">event {{ operation.tag }}</span>
-            <span v-else-if="operation.kind === 'transfer_ticket'" class="hash accent--text">{{ operation.kind }}:{{ operation.entrypoint ? operation.entrypoint : '' }}()</span>
-            <span v-else-if="operation.entrypoint" class="hash secondary--text">{{ operation.entrypoint }}()</span>
-            <span v-else>{{ operation.amount ? operation.amount : 0 | uxtz }}</span>
+            <span :class="itemClass">{{ itemValue }}</span>
         </div>
     </div>
 </template>
@@ -27,16 +24,33 @@ export default {
     },
     data: () => {
         return {
-            alias: null
+            alias: null,
+            itemClass: '',
+            itemValue: '',
         }
     },
     async created() {
+        this.setClassAndValue();
         this.alias = await this.fetchAlias();
     },
     methods: {
         async fetchAlias() {
             return await this.getAlias(this.network, this.operation.destination)
-        }
+        },
+        setClassAndValue() {
+            if (this.operation.tag) {
+                this.itemClass = "'hash accent--text'";
+                this.itemValue = 'event ' + this.operation.tag;
+            } else if (this.operation.kind === 'transfer_ticket') {
+                this.itemClass = 'hash accent--text';
+                this.itemValue = this.operation.kind;
+            } else if (this.operation.entrypoint) {
+                this.itemClass = 'hash secondary--text';
+                this.itemValue = this.operation.entrypoint + '()';
+            } else {
+                this.itemValue = this.$options.filters.uxtz(this.operation.amount ? this.operation.amount : 0);
+            }
+        },
     }
 }
 </script>

src/views/opg/ContentsTab.vue

@@ -1,15 +1,15 @@
 <template>
   <div>
     <v-skeleton-loader
-      v-if="loading && contents.length === 0"
+      v-if="loading && operations.length === 0"
       :loading="loading"
       type="list-item-two-line, list-item-two-line, list-item-two-line"
     />
-    <template v-else-if="!loading && contents.length > 0">
+    <template v-else-if="!loading && operations.length > 0">
       <v-card
         flat
         outlined
-        v-for="(op, idx) in contents"
+        v-for="(op, idx) in operations"
         :key="idx"
         class="mb-8"
       >
@@ -42,21 +42,5 @@ export default {
     operations: Array,
     loading: Boolean,
   },
-  computed: {
-    contents() {
-      let contents = [];
-      if (this.operations) {
-        this.operations.forEach((op) => {
-          if (op.internal) {
-            contents[contents.length - 1].internal_operations.push(op);
-          } else {
-            op.internal_operations = [];
-            contents.push(op);
-          }
-        });
-      }
-      return contents.sort((a, b) => a.counter - b.counter);
-    },
-  },
 };
 </script>

src/views/opg/OperationGroup.vue

@@ -53,7 +53,7 @@
     </v-row>
     <v-row class="px-7">
       <v-col cols="9" class="pr-7">
-        <OpgContents :loading="loading" :operations="operations"></OpgContents>
+        <OpgContents :loading="loading" :operations="contents"></OpgContents>
       </v-col>
       <v-col cols="3" class="pl-0">
         <v-list v-if="content">
@@ -102,7 +102,7 @@
           </v-list-item>
         </v-list>
 
-        <CallStack v-if="content" :network="network" :operations="operations"/>
+        <CallStack v-if="content" :network="network" :operations="contents"/>
       </v-col>
     </v-row>
 
@@ -146,20 +146,38 @@ export default {
     this.getOPG();
   },
   computed: {
-    contentsLength() {
-      return this.operations.filter((op) => !op.internal).length;
-    },
     content() {
-      if (this.operations.length > 0) {
-        return this.operations[0];
+      if (this.contents.length > 0) {
+        return this.contents[0];
       }
       return undefined;
     },
+    contents() {
+      let contents = [];
+      if (this.operations) {
+        this.operations.forEach((op) => {
+          if (op.internal) {
+            contents[contents.length - 1].internal_operations.push(op);
+          } else {
+            op.internal_operations = [];
+            contents.push(op);
+          }
+        });
+      }
+      return contents.sort((a, b) => a.counter - b.counter);
+    },
     totalCost() {
-      return this.operations.reduce(
-        (acc, c) => acc + (c.fee || 0) + (c.burned || 0),
-        0
-      );
+      return this.contents.reduce(function(acc, op) {
+        let sum = acc + (op.fee || 0) + (op.burned || 0);
+
+        if (op.internal_operations) {
+          sum += op.internal_operations.reduce(function(intAcc, intOp) {
+            return intAcc + (intOp.fee || 0) + (intOp.burned || 0);
+          }, 0);
+        }
+
+        return sum;
+      }, 0);
     },
     breadcrumbsItems() {
       return [