split MetadataTab into components

src/router/index.js

@@ -21,7 +21,7 @@ import InteractTab from '@/views/contract/InteractTab.vue'
 import StorageTab from '@/views/contract/StorageTab.vue'
 import ContractTokensTab from '@/views/contract/TokensTab.vue'
 import TransfersTab from '@/views/contract/TransfersTab.vue'
-import MetadataTab from '@/views/contract/MetadataTab.vue'
+import MetadataTab from '@/views/contract/MetadataTab/MetadataTab.vue'
 import ForkTab from '@/views/contract/ForkTab.vue'
 
 import OperationGroup from '@/views/opg/OperationGroup.vue'

src/views/contract/MetadataTab/BriefInfo.vue

@@ -0,0 +1,62 @@
+<template>
+  <v-list>
+    <v-list-item v-if="metadata.name" selectable>
+      <v-list-item-content>
+        <v-list-item-title class="headline"
+        ><span>{{ metadata.name }}</span
+        >&nbsp;<span v-if="metadata.version" class="overline">{{
+            metadata.version
+          }}</span></v-list-item-title
+        >
+        <v-list-item-subtitle>{{
+            metadata.description
+          }}</v-list-item-subtitle>
+      </v-list-item-content>
+      <v-list-item-action>
+        <div class="d-flex flex-horizontal justify-center align-center">
+          <v-chip v-if="metadata.license" class="mx-2" outlined small disabled>{{
+              metadata.license.name
+            }}</v-chip>
+          <v-btn
+              v-if="metadata.homepage"
+              icon
+              :href="metadata.homepage"
+              target="_blank"
+              class="text--secondary"
+              rel="nofollow noopener"
+          >
+            <v-icon>mdi-web</v-icon>
+          </v-btn>
+        </div>
+      </v-list-item-action>
+    </v-list-item>
+    <div class="pl-2 mb-4">
+      <v-chip
+          v-for="(i, idx) in metadata.interfaces"
+          :key="idx"
+          class="mx-2"
+          disabled
+          small
+      >
+        {{ i }}
+      </v-chip>
+    </div>
+    <v-list-item v-if="metadata.authors" selectable>
+      <v-list-item-content>
+        <v-list-item-title class="overline">Authors</v-list-item-title>
+        <v-list-item-subtitle>{{
+            metadata.authors.join(", ")
+          }}</v-list-item-subtitle>
+      </v-list-item-content>
+    </v-list-item>
+  </v-list>
+</template>
+
+<script>
+export default {
+  name: "BriefInfo",
+  props: {
+    metadata: Object,
+  }
+}
+</script>

src/views/contract/MetadataTab/EventsList.vue

@@ -0,0 +1,26 @@
+<template>
+  <v-list>
+    <v-subheader class="title" v-if="metadata.events">Events</v-subheader>
+    <v-list-item
+        v-for="(event, idx) in metadata.events"
+        :key="idx"
+        selectable
+    >
+      <v-list-item-content>
+        <v-list-item-title class="overline">{{
+            event.name
+          }}</v-list-item-title>
+        <v-list-item-subtitle>{{ event.description }}</v-list-item-subtitle>
+      </v-list-item-content>
+    </v-list-item>
+  </v-list>
+</template>
+
+<script>
+export default {
+  name: "EventsList",
+  props: {
+    metadata: Object,
+  }
+}
+</script>

src/views/contract/MetadataTab/MetadataTab.vue

@@ -0,0 +1,44 @@
+<template>
+  <v-container fluid class="pa-8 canvas fill-canvas">
+    <v-skeleton-loader :loading="loading" type="card">
+      <BriefInfo :metadata="metadata" />
+      <ReservedFields class="mt-3" :metadata="metadata" />
+      <EventsList class="mt-3" :metadata="metadata" />
+    </v-skeleton-loader>
+  </v-container>
+</template>
+
+<script>
+import BriefInfo from "@/views/contract/MetadataTab/BriefInfo";
+import ReservedFields from "@/views/contract/MetadataTab/ReservedFields";
+import EventsList from "@/views/contract/MetadataTab/EventsList";
+
+export default {
+  name: "Metadata",
+  components: {EventsList, ReservedFields, BriefInfo},
+  props: { contract: Object },
+  data: () => {
+    return {
+      metadata: {},
+      loading: true,
+    };
+  },
+  mounted() {
+    if (this.contract.metadata !== undefined) {
+      this.loading = false;
+      this.metadata = this.contract.metadata;
+    }
+  },
+  watch: {
+    contract: {
+      deep: true,
+      handler: function (value) {
+        if (value.metadata !== undefined) {
+          this.metadata = value.metadata;
+          this.loading = false;
+        }
+      },
+    },
+  },
+};
+</script>

src/views/contract/MetadataTab/ReservedFields.vue

@@ -0,0 +1,26 @@
+<template>
+  <v-list>
+    <v-subheader class="title" v-if="metadata.events">Reserved fields</v-subheader>
+<!--    <v-list-item-->
+<!--        v-for="(event, idx) in metadata.events"-->
+<!--        :key="idx"-->
+<!--        selectable-->
+<!--    >-->
+<!--      <v-list-item-content>-->
+<!--        <v-list-item-title class="overline">{{-->
+<!--            event.name-->
+<!--          }}</v-list-item-title>-->
+<!--        <v-list-item-subtitle>{{ event.description }}</v-list-item-subtitle>-->
+<!--      </v-list-item-content>-->
+<!--    </v-list-item>-->
+  </v-list>
+</template>
+
+<script>
+export default {
+  name: "ReservedFields",
+  props: {
+    metadata: Object,
+  }
+}
+</script>