Redesign did claims on did view page

src/App.vue

@@ -40,14 +40,16 @@ export default {
       return this.$route.name !== 'intro';
     },
   },
-  beforeCreate() {
-    this.$store.dispatch('authenticate').then(() => {
-      this.$store.dispatch('listDIDs').then(() => {
-        this.$router.push({ name: 'listDIDs' });
-      });
-    }).catch(() => {
+  async beforeCreate() {
+    try {
+      await this.$store.dispatch('authenticate');
+      await this.$store.dispatch('listDIDs');
+      await this.$store.dispatch('listClaimSchemas');
+
+      this.$router.push({ name: 'listDIDs' });
+    } catch (err) {
       this.$router.push({ name: 'intro' });
-    });
+    }
   },
 };
 </script>

src/components/ClaimList.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <b-table
+      :items="claimTable"
+      :fields="['name','value','details']"
+      class="m-0"
+      hover
+      show-empty
+      empty-text="No properties"
+    >
+      <template slot="details" slot-scope="data">
+        <b-button
+          size="sm"
+          variant="outline-primary"
+          v-b-modal="`'modal-${data.item.claim.id}'`"
+        >
+          DETAILS
+        </b-button>
+        <b-modal
+          :id="`'modal-${data.item.claim.id}'`"
+          :title="`${data.item.name}`"
+          ok-only
+          ok-title="CLOSE"
+        >
+          <pre>{{data.item.claim}}</pre>
+        </b-modal>
+      </template>
+    </b-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ClaimList',
+  props: {
+    claims: {
+      type: Array,
+      required: true,
+    },
+    schemas: {
+      type: Array,
+      required: true,
+    },
+    showDidAlias: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    claimTable() {
+      return this.claims.map(claim => ({
+        name: claim.schema_name,
+        value: this.getClaimValue(claim),
+        claim,
+      }));
+    },
+  },
+  methods: {
+    findClaimSchema(schemaId) {
+      const [schema] = this.schemas.filter(item => item.id === schemaId);
+      return schema;
+    },
+    getClaimValue(claim) {
+      const schema = this.findClaimSchema(claim.schema_id);
+      const values = [];
+
+      if (schema.ordering.length === 0) {
+        Object.keys(claim.content).forEach((key) => {
+          values.push(claim.content[key]);
+        });
+      } else {
+        schema.ordering.forEach((key) => {
+          values.push(claim.content[key]);
+        });
+      }
+      return values.join(' ');
+    },
+  },
+};
+</script>

src/components/index.js

@@ -1,5 +1,5 @@
 import ClaimCard from '@/components/ClaimCard.vue';
-import ClaimCard2 from '@/components/ClaimCard2.vue';
+import ClaimList from '@/components/ClaimList.vue';
 import Content from '@/components/Content.vue';
 import DidCard from '@/components/DidCard.vue';
 import FilterBar from '@/components/FilterBar.vue';
@@ -18,7 +18,7 @@ import StringField from '@/components/claimschema/StringField.vue';
 
 export {
   ClaimCard,
-  ClaimCard2,
+  ClaimList,
   Content,
   DidCard,
   FilterBar,

src/router.js

@@ -125,7 +125,7 @@ export default new Router({
       meta: {
         requiresAuth: true,
         breadcrumb: () => [
-          { text: 'Claims', active: true },
+          { text: 'CLAIMS', active: true },
         ],
         title: 'CLAIMS',
         homeUrl: SIGNED_IN_HOME_URL,
@@ -139,10 +139,10 @@ export default new Router({
       meta: {
         requiresAuth: true,
         breadcrumb: route => [
-          { text: 'Claims', to: '/vault/claims', rel: 'parent' },
+          { text: 'CLAIMS', to: '/vault/claims', rel: 'parent' },
           { text: route.params.id },
         ],
-        title: 'Claim details',
+        title: 'CLAIM DETAILS',
         homeUrl: SIGNED_IN_HOME_URL,
       },
     },

src/views/claim/CreateClaim.vue

@@ -28,41 +28,39 @@
             </b-form-select>
           </b-form-group>
           <hr>
-          <Loader :loading="schemasLoading">
-            <b-card>
-              <b-form-group
-                label="Schema:"
-                label-for="schema"
-                description="In many cases, a widely used template already
-                exists for the claim you want to make. If you don't find anything applicable,
-                you can create your own schema or modify an existing one."
+          <b-card>
+            <b-form-group
+              label="Schema:"
+              label-for="schema"
+              description="In many cases, a widely used template already
+              exists for the claim you want to make. If you don't find anything applicable,
+              you can create your own schema or modify an existing one."
+            >
+              <b-form-select
+                id="schema"
+                name="schema"
+                v-model="schema"
+                :options="availableSchemas ? availableSchemas : []"
+                v-validate="{ required: true }"
+                :state="validateState('schema')"
               >
-                <b-form-select
-                  id="schema"
-                  name="schema"
-                  v-model="schema"
-                  :options="availableSchemas ? availableSchemas : []"
-                  v-validate="{ required: true }"
-                  :state="validateState('schema')"
-                >
-                  <template slot="first">
-                    <option :value="null" disabled selected>-- Please select a schema --</option>
-                  </template>
-                </b-form-select>
-              </b-form-group>
-              <template v-for="item in schemaPropertiesCollection">
-                <component
-                  :key="item.key"
-                  :is="getSchemaComponent(item.properties.type)"
-                  v-bind="{data:{
-                    name: item.key,
-                    properties: item.properties,
-                  }}"
-                  v-model="claimContent[item.key]"
-                />
-              </template>
-            </b-card>
-          </Loader>
+                <template slot="first">
+                  <option :value="null" disabled selected>-- Please select a schema --</option>
+                </template>
+              </b-form-select>
+            </b-form-group>
+            <template v-for="item in schemaPropertiesCollection">
+              <component
+                :key="item.key"
+                :is="getSchemaComponent(item.properties.type)"
+                v-bind="{data:{
+                  name: item.key,
+                  properties: item.properties,
+                }}"
+                v-model="claimContent[item.key]"
+              />
+            </template>
+          </b-card>
           <hr>
           <b-form-group
             label="Witnesses:"
@@ -97,12 +95,11 @@
 <script>
 import { mapGetters } from 'vuex';
 import {
-  Loader, NumberField, Tooltip, StringField,
+  NumberField, Tooltip, StringField,
 } from '@/components';
 
 export default {
   components: {
-    Loader,
     NumberField,
     StringField,
     Tooltip,
@@ -112,7 +109,6 @@ export default {
   },
   data() {
     return {
-      schemasLoading: true,
       schema: null,
       saving: false,
       claimContent: {},
@@ -152,10 +148,6 @@ export default {
       return schemaProperties;
     },
   },
-  async beforeCreate() {
-    await this.$store.dispatch('listClaimSchemas');
-    this.schemasLoading = false;
-  },
   methods: {
     getSchemaComponent(type) {
       switch (type) {

src/views/did/ViewDID.vue

@@ -113,29 +113,33 @@
           </b-alert>
         </template>
         <template v-else>
-          <b-card-group deck id="claims-panel">
-            <ClaimCard2 v-for="claim in claims" :key="claim.id"
-                        :claim="claim" class="mb-3 mw-50" role="group" />
-          </b-card-group>
+          <ClaimList
+            :claims="claims"
+            :schemas="claimSchemas"
+          />
           <b-tooltip target="claims-panel" placement="left">
             <fa icon="unlock-alt" class="mr-2" />
             You will only share your claims with their witnesses
           </b-tooltip>
         </template>
       </Loader>
-      <b-button to="/vault/dids" variant="light" class="text-uppercase">Back to DIDs</b-button>
+      <b-button to="/vault/dids" variant="light" class="text-uppercase mt-4">Back to DIDs</b-button>
     </Loader>
   </div>
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 import api from '@/api';
-import { Loader, ClaimCard2 } from '@/components';
+import { Loader, ClaimList } from '@/components';
 
 export default {
   components: {
     Loader,
-    ClaimCard2,
+    ClaimList,
+  },
+  computed: {
+    ...mapGetters(['claimSchemas']),
   },
   data() {
     return {