identities

src/App.vue

@@ -0,0 +1,28 @@
+<template>
+  <v-app>
+    <v-app-bar app>
+      <v-toolbar-title>dashevo exprlorer</v-toolbar-title>
+
+      <v-spacer />
+
+      <v-btn text :to="{ name: 'identities' }">Identities</v-btn>
+      <v-btn class="ml-1" text :to="{ name: 'names' }">Names</v-btn>
+      <v-btn class="ml-1" text :to="{ name: 'contracts' }">Contracts</v-btn>
+      <v-btn class="ml-1" text :to="{ name: 'documents' }">Documents</v-btn>
+
+    </v-app-bar>
+
+    <v-content>
+      <router-view />
+    </v-content>
+  </v-app>
+</template>
+
+<script>
+export default {
+  created() {
+    this.$vuetify.theme.dark = window.matchMedia
+      && window.matchMedia('(prefers-color-scheme: dark)').matches;
+  },
+};
+</script>

src/assets/logo.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>

src/main.js

@@ -0,0 +1,14 @@
+import Vue from 'vue';
+import App from './App.vue';
+import router from './router';
+import store from './store';
+import vuetify from './plugins/vuetify';
+
+Vue.config.productionTip = false;
+
+new Vue({
+  router,
+  store,
+  vuetify,
+  render: h => h(App),
+}).$mount('#app');

src/plugins/vuetify.js

@@ -0,0 +1,7 @@
+import Vue from 'vue';
+import Vuetify from 'vuetify/lib';
+
+Vue.use(Vuetify);
+
+export default new Vuetify({
+});

src/router/index.js

@@ -0,0 +1,39 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+
+Vue.use(VueRouter);
+
+const routes = [
+  {
+    path: '/identities',
+    name: 'identities',
+    component: () => import(/* webpackChunkName: "identities" */ '../views/Identities.vue'),
+  },
+  {
+    path: '/contracts',
+    name: 'contracts',
+    component: () => import(/* webpackChunkName: "contracts" */ '../views/Contracts.vue'),
+  },
+  {
+    path: '/documents',
+    name: 'documents',
+    component: () => import(/* webpackChunkName: "documents" */ '../views/Documents.vue'),
+  },
+  {
+    path: '/names',
+    name: 'names',
+    component: () => import(/* webpackChunkName: "names" */ '../views/Names.vue'),
+  },
+  {
+    path: '*',
+    redirect: 'identities',
+  },
+];
+
+const router = new VueRouter({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes,
+});
+
+export default router;

src/store/index.js

@@ -0,0 +1,28 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import createPersistedState from 'vuex-persistedstate';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: {
+    identities: [],
+    names: [],
+    contracts: [],
+    documents: [],
+  },
+  mutations: {
+    addIdentity(state, identity) {
+      state.identities.push(identity);
+    },
+  },
+  actions: {
+    async createIdentity({ commit }, type) {
+      const identity = await new Promise((resolve) => {
+        setTimeout(() => resolve({ id: `t_id_${Date.now()}`, type }), 2000);
+      });
+      commit('addIdentity', identity);
+    },
+  },
+  plugins: [createPersistedState()],
+});

src/views/Contracts.vue

@@ -0,0 +1,8 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+};
+</script>

src/views/Documents.vue

@@ -0,0 +1,9 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+
+};
+</script>

src/views/Identities.vue

@@ -0,0 +1,92 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col>
+        <v-card tile flat>
+          <v-card-title>
+            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-btn>
+              <v-col>
+              </v-col>
+                <v-btn
+                  color="cyan"
+                  :loading="createUserIdentityLoading"
+                  @click="() => createIdentity(2)"
+                >
+                  user
+                </v-btn>
+              </v-col>
+            </v-row>
+            </v-container>
+
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+         <v-simple-table>
+          <thead>
+            <tr>
+              <th class="text-left">Id</th>
+              <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';
+
+export default {
+  data() {
+    return {
+      createAppIdentityLoading: false,
+      createUserIdentityLoading: false,
+    };
+  },
+  computed: {
+    ...mapState(['identities']),
+  },
+  methods: {
+    createIdentity(type) {
+      if (type === 1) {
+        this.createAppIdentityLoading = true;
+      }
+      if (type === 2) {
+        this.createUserIdentityLoading = true;
+      }
+      this.$store.dispatch('createIdentity', type).finally(() => {
+        if (type === 1) {
+          this.createAppIdentityLoading = false;
+        }
+        if (type === 2) {
+          this.createUserIdentityLoading = false;
+        }
+      });
+    },
+  },
+
+};
+</script>

src/views/Names.vue

@@ -0,0 +1,9 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+
+};
+</script>