names

package.json

@@ -1,5 +1,6 @@
 {
   "name": "dash-platform-console",
+  "description": "Dash Platform Console",
   "version": "0.1.0",
   "private": true,
   "scripts": {

public/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>Dash platform console</title>
+    <title>Dash Platform Console</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <v-app>
     <v-app-bar app>
-      <v-toolbar-title>dashevo exprlorer</v-toolbar-title>
+      <v-toolbar-title>Dash Platform Console</v-toolbar-title>
 
       <v-spacer />
 

src/router/index.js

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
+import Identities from '@/views/Identities.vue';
 
 Vue.use(VueRouter);
 
@@ -7,7 +8,7 @@ const routes = [
   {
     path: '/identities',
     name: 'identities',
-    component: () => import(/* webpackChunkName: "identities" */ '../views/Identities.vue'),
+    component: Identities,
   },
   {
     path: '/contracts',

src/store/index.js

@@ -4,24 +4,67 @@ import createPersistedState from 'vuex-persistedstate';
 
 Vue.use(Vuex);
 
+export const identityTypes = {
+  application: {
+    name: 'application',
+    value: 1,
+  },
+  user: {
+    name: 'user',
+    value: 2,
+  },
+};
+
 export default new Vuex.Store({
   state: {
-    identities: [],
+    identities: {
-    names: [],
+      user: [],
+      application: [],
+    },
+    names: {},
     contracts: [],
     documents: [],
   },
   mutations: {
-    addIdentity(state, identity) {
+    addIdentity(state, { identity, type }) {
-      state.identities.push(identity);
+      state.identities[type.name].push(identity);
+    },
+    addName(state, { identity, name }) {
+      const { id } = identity;
+      if (!state.names[id]) {
+        state.names[id] = [];
+      }
+      state.names[id].push(name);
     },
   },
   actions: {
     async createIdentity({ commit }, type) {
       const identity = await new Promise((resolve) => {
-        setTimeout(() => resolve({ id: `t_id_${Date.now()}`, type }), 2000);
+        setTimeout(() => resolve({ id: `t_${type.name}_id_${Date.now()}`, type }), 2000);
       });
-      commit('addIdentity', identity);
+      commit('addIdentity', { identity, type });
+    },
+    async registerName({ commit }, { identity, name }) {
+      await new Promise((resolve) => {
+        setTimeout(() => resolve(name), 2000);
+      });
+      commit('addName', { identity, name });
+    },
+  },
+  getters: {
+    identityLists(state) {
+      const { identities } = state;
+      return Object.keys(identityTypes).map(typeName => ({
+        type: identityTypes[typeName],
+        items: identities[typeName],
+      }));
+    },
+    userIdentitiesWithNames(state) {
+      const { user } = state.identities;
+      return user.map(identity => ({
+        ...identity,
+        names: state.names[identity.id] || [],
+      }));
     },
   },
   plugins: [createPersistedState()],

src/views/Contracts.vue

@@ -1,5 +1,7 @@
 <template>
-  <div></div>
+  <v-container>
+
+  </v-container>
 </template>
 
 <script>

src/views/Documents.vue

@@ -1,9 +1,12 @@
 <template>
-  <div></div>
+  <v-container>
+    <v-alert type="warning">
+      Not Implemented
+    </v-alert>
+  </v-container>
 </template>
 
 <script>
 export default {
-
 };
 </script>

src/views/Identities.vue

@@ -1,89 +1,62 @@
 <template>
   <v-container>
     <v-row>
-      <v-col>
+      <v-col
-        <v-card tile flat>
+        v-for="list in identityLists"
-          <v-card-title>
+        :key="list.type.value"
-            Create identity
-          </v-card-title>
-          <v-card-text>
-            <v-container>
-              <v-row>
-              <v-col>
-                <v-btn
-                  color="teal"
-                  :loading="createAppIdentityLoading"
-                  @click="() => createIdentity(1)"
       >
-                  application
+        <v-row class="mb-12">
-                </v-btn>
           <v-col>
+            <h1>{{ list.type.name }}</h1>
           </v-col>
+          <v-col md="auto">
             <v-btn
-                  color="cyan"
+              fab dark color="indigo"
-                  :loading="createUserIdentityLoading"
+              :loading="createIdentityLoading[list.type.name]"
-                  @click="() => createIdentity(2)"
+              @click="() => createIdentity(list.type)"
             >
-                  user
+              <v-icon>mdi-plus</v-icon>
             </v-btn>
           </v-col>
         </v-row>
-            </v-container>
+        <v-list shaped v-if="list.items.length">
-
+          <v-list-item v-for="identity in list.items" :key="identity.id">
-          </v-card-text>
+            <v-list-item-content>
-        </v-card>
+              <v-list-item-title>
-      </v-col>
+                {{ identity.id }}
-    </v-row>
+              </v-list-item-title>
-
+            </v-list-item-content>
-    <v-row>
+          </v-list-item>
-      <v-col>
+        </v-list>
-         <v-simple-table>
+        <span v-else>
-          <thead>
+          List is empty.
-            <tr>
+          Try to create an Identity
-              <th class="text-left">Id</th>
+        </span>
-              <th class="text-left">Type</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="identity in identities" :key="identity.id">
-              <td>{{ identity.id }}</td>
-              <td>{{ identity.type === 1 ? 'application' : 'user' }}</td>
-            </tr>
-          </tbody>
-      </v-simple-table>
       </v-col>
     </v-row>
   </v-container>
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapGetters } from 'vuex';
 
 export default {
   data() {
     return {
-      createAppIdentityLoading: false,
+      createIdentityLoading: {
-      createUserIdentityLoading: false,
+        application: false,
+        user: false,
+      },
     };
   },
   computed: {
-    ...mapState(['identities']),
+    ...mapGetters(['identityLists']),
   },
   methods: {
     createIdentity(type) {
-      if (type === 1) {
+      this.createIdentityLoading[type.name] = true;
-        this.createAppIdentityLoading = true;
-      }
-      if (type === 2) {
-        this.createUserIdentityLoading = true;
-      }
       this.$store.dispatch('createIdentity', type).finally(() => {
-        if (type === 1) {
+        this.createIdentityLoading[type.name] = false;
-          this.createAppIdentityLoading = false;
-        }
-        if (type === 2) {
-          this.createUserIdentityLoading = false;
-        }
       });
     },
   },

src/views/Names.vue

@@ -1,9 +1,104 @@
 <template>
-  <div></div>
+  <v-container>
+    <v-row v-if="userIdentitiesWithNames.length">
+      <v-col>
+        <v-simple-table>
+          <thead>
+            <tr>
+              <th>Id</th>
+              <th>Registered names</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="identity in userIdentitiesWithNames"
+              :key="identity.id"
+            >
+              <td>{{ identity.id }}</td>
+              <td>{{ identity.names.join(', ') }}</td>
+              <td>
+                <v-btn icon @click="() => openDialog(identity)">
+                  <v-icon>mdi-plus</v-icon>
+                </v-btn>
+              </td>
+            </tr>
+          </tbody>
+        </v-simple-table>
+      </v-col>
+    </v-row>
+    <v-alert v-else type="error">
+      You must have an identity
+      in order to create a domain name for it
+    </v-alert>
+
+    <v-dialog
+        v-model="showNameDialog"
+        max-width="400px"
+    >
+      <v-card>
+        <v-card-title>
+          Register a new domain name
+        </v-card-title>
+        <v-card-text>
+          <v-text-field counter v-model="name" />
+        </v-card-text>
+        <v-card-actions>
+          <v-btn text @click="showNameDialog">close</v-btn>
+          <v-spacer />
+          <v-btn
+            color="primary"
+            :loading="submitting"
+            @click="submit"
+          >
+            submit
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-container>
 </template>
 
 <script>
-export default {
+import { mapGetters, mapActions } from 'vuex';
 
+export default {
+  data() {
+    return {
+      showNameDialog: false,
+      submitting: false,
+      selectedIdentity: undefined,
+      name: '',
+    };
+  },
+  computed: {
+    ...mapGetters(['userIdentitiesWithNames']),
+  },
+  methods: {
+    ...mapActions(['registerName']),
+    openDialog(identity) {
+      this.selectedIdentity = identity;
+      this.name = '';
+      this.showNameDialog = true;
+    },
+    submit() {
+      const { name, selectedIdentity } = this;
+      this.submitting = true;
+      this.registerName({
+        identity: selectedIdentity,
+        name,
+      }).then(() => {
+        this.showNameDialog = false;
+      }).finally(() => {
+        this.submitting = false;
+      });
+    },
+  },
 };
 </script>
+
+<style scoped>
+  tr>td:last-child{
+    width: 1%;
+  }
+</style>