From 3f8ecf0b082a08fdc473a977646c31d7a5ca52a4 Mon Sep 17 00:00:00 2001
From: Den <dlilienblum@gmail.com>
Date: Thu, 26 Dec 2019 13:07:41 +0300
Subject: [PATCH] contracts

---
 package-lock.json        |  13 ++++
 package.json             |   2 +
 src/router/index.js      |   9 ++-
 src/store/index.js       |  36 +++++++++--
 src/views/Contracts.vue  | 127 ++++++++++++++++++++++++++++++++++++++-
 src/views/Documents.vue  |  10 ++-
 src/views/Identities.vue |   4 +-
 src/views/Names.vue      |  61 +++++++++++--------
 8 files changed, 221 insertions(+), 41 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4f38ce0..f18cfac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2655,6 +2655,11 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "brace": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/brace/-/brace-0.11.1.tgz",
+      "integrity": "sha1-SJb8ydVE7vRfS7dmDbMg07N5/lg="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -13042,6 +13047,14 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vue2-ace-editor": {
+      "version": "0.0.15",
+      "resolved": "https://registry.npmjs.org/vue2-ace-editor/-/vue2-ace-editor-0.0.15.tgz",
+      "integrity": "sha512-e3TR9OGXc71cGpvYcW068lNpRcFt3+OONCC81oxHL/0vwl/V3OgqnNMw2/RRolgQkO/CA5AjqVHWmANWKOtNnQ==",
+      "requires": {
+        "brace": "^0.11.0"
+      }
+    },
     "vuelidate": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/vuelidate/-/vuelidate-0.7.4.tgz",
diff --git a/package.json b/package.json
index 2cef8ba..22d80ac 100644
--- a/package.json
+++ b/package.json
@@ -11,9 +11,11 @@
   "dependencies": {
     "@dashevo/dapi-client": "github:dashevo/dapi-client#v0.8-dev",
     "@dashevo/dpp": "github:dashevo/js-dpp#v0.10-dev",
+    "brace": "^0.11.1",
     "core-js": "^3.4.3",
     "vue": "^2.6.10",
     "vue-router": "^3.1.3",
+    "vue2-ace-editor": "0.0.15",
     "vuelidate": "^0.7.4",
     "vuetify": "^2.1.0",
     "vuex": "^3.1.2",
diff --git a/src/router/index.js b/src/router/index.js
index 42ba61c..6f69bd9 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,9 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import Identities from '@/views/Identities.vue';
+import Names from '@/views/Names.vue';
+import Contracts from '@/views/Contracts.vue';
+import Documents from '@/views/Documents.vue';
 
 Vue.use(VueRouter);
 
@@ -13,17 +16,17 @@ const routes = [
   {
     path: '/contracts',
     name: 'contracts',
-    component: () => import(/* webpackChunkName: "contracts" */ '../views/Contracts.vue'),
+    component: Contracts,
   },
   {
     path: '/documents',
     name: 'documents',
-    component: () => import(/* webpackChunkName: "documents" */ '../views/Documents.vue'),
+    component: Documents,
   },
   {
     path: '/names',
     name: 'names',
-    component: () => import(/* webpackChunkName: "names" */ '../views/Names.vue'),
+    component: Names,
   },
   {
     path: '*',
diff --git a/src/store/index.js b/src/store/index.js
index 957d6c7..bc3c1cc 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -22,8 +22,8 @@ export default new Vuex.Store({
       application: [],
     },
     names: {},
-    contracts: [],
-    documents: [],
+    contracts: {},
+    documents: {},
   },
   mutations: {
     addIdentity(state, { identity, type }) {
@@ -31,10 +31,21 @@ export default new Vuex.Store({
     },
     addName(state, { identity, name }) {
       const { id } = identity;
-      if (!state.names[id]) {
-        state.names[id] = [];
-      }
-      state.names[id].push(name);
+      const names = state.names[id] || [];
+      state.names = {
+        ...state.names,
+        [id]: [
+          ...names,
+          name,
+        ],
+      };
+    },
+    addContract(state, { identity, contract }) {
+      const { id } = identity;
+      state.contracts = {
+        ...state.contracts,
+        [id]: contract,
+      };
     },
   },
   actions: {
@@ -50,6 +61,12 @@ export default new Vuex.Store({
       });
       commit('addName', { identity, name });
     },
+    async registerContract({ commit }, { identity, json }) {
+      const contract = await new Promise((resolve) => {
+        setTimeout(() => resolve(json), 2000);
+      });
+      commit('addContract', { identity, contract });
+    },
   },
   getters: {
     identityLists(state) {
@@ -66,6 +83,13 @@ export default new Vuex.Store({
         names: state.names[identity.id] || [],
       }));
     },
+    applicationIdentitiesWithContracts(state) {
+      const { application } = state.identities;
+      return application.map(identity => ({
+        ...identity,
+        contract: state.contracts[identity.id],
+      }));
+    },
   },
   plugins: [createPersistedState()],
 });
diff --git a/src/views/Contracts.vue b/src/views/Contracts.vue
index 7bb149c..0127b3b 100644
--- a/src/views/Contracts.vue
+++ b/src/views/Contracts.vue
@@ -1,10 +1,135 @@
 <template>
   <v-container>
-
+    <v-row v-if="applicationIdentitiesWithContracts.length">
+      <v-col>
+        <v-simple-table>
+          <thead>
+            <tr>
+              <th>Id</th>
+              <th>Contract</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="identity in applicationIdentitiesWithContracts"
+              :key="identity.id"
+            >
+              <td>{{ identity.id }}</td>
+              <td>
+                <v-btn text @click="() => openDialog(identity)">
+                  {{ identity.contract ? 'view' : 'register' }}
+                </v-btn>
+              </td>
+            </tr>
+          </tbody>
+        </v-simple-table>
+      </v-col>
+    </v-row>
+    <v-row v-else>
+      <v-col>
+        <v-alert type="error">
+          You must have Application Identity
+          in order to register a Contract for it
+        </v-alert>
+      </v-col>
+    </v-row>
+    <v-dialog
+        v-model="showJsonDialog"
+        fullscreen hide-overlay transition="dialog-bottom-transition"
+    >
+      <v-card>
+        <v-form @submit="submit">
+          <v-toolbar color="primary">
+            <v-btn icon @click="showJsonDialog = false">
+              <v-icon>mdi-close</v-icon>
+            </v-btn>
+            <v-toolbar-title>Contract for {{selectedIdentity.id}}</v-toolbar-title>
+            <v-spacer></v-spacer>
+            <v-toolbar-items v-if="!selectedIdentity.contract">
+              <v-btn
+                text
+                :loading="submitting"
+                @click="submit"
+              >
+                submit
+              </v-btn>
+            </v-toolbar-items>
+          </v-toolbar>
+            <AceEditor
+              ref="aceEditor"
+              v-model="json"
+              @init="aceEditorInit"
+              lang="json"
+              theme="clouds_midnight"
+              width="100%"
+              height="94vh"
+            />
+        </v-form>
+      </v-card>
+    </v-dialog>
   </v-container>
 </template>
 
 <script>
+import { mapGetters, mapActions } from 'vuex';
+import AceEditor from 'vue2-ace-editor';
+import 'brace/mode/json';
+import 'brace/theme/clouds_midnight';
+
 export default {
+  components: { AceEditor },
+  data() {
+    return {
+      showJsonDialog: false,
+      submitting: false,
+      selectedIdentity: {},
+      json: '',
+    };
+  },
+  computed: {
+    ...mapGetters([
+      'applicationIdentitiesWithContracts',
+    ]),
+  },
+  methods: {
+    ...mapActions(['registerContract']),
+    setAceEditorReadonly() {
+      const readonly = this.selectedIdentity.contract;
+      if (this.$refs.aceEditor) {
+        this.$refs.aceEditor.editor.setReadOnly(readonly);
+      }
+    },
+    aceEditorInit() {
+      this.setAceEditorReadonly();
+    },
+    openDialog(identity) {
+      this.selectedIdentity = identity;
+      this.json = identity.contract ? identity.contract : '';
+      this.showJsonDialog = true;
+      this.setAceEditorReadonly();
+    },
+    submit() {
+      const { json, selectedIdentity } = this;
+      this.submitting = true;
+      this.registerContract({
+        identity: selectedIdentity,
+        json,
+      }).then(() => {
+        this.showJsonDialog = false;
+      }).finally(() => {
+        this.submitting = false;
+      });
+    },
+  },
 };
 </script>
+
+<style scoped>
+  tr>td:last-child {
+    width: 1%;
+  }
+
+  .ace_editor {
+    font-size: 1rem;
+  }
+</style>
diff --git a/src/views/Documents.vue b/src/views/Documents.vue
index 9c36df6..e9c3f1d 100644
--- a/src/views/Documents.vue
+++ b/src/views/Documents.vue
@@ -1,8 +1,12 @@
 <template>
   <v-container>
-    <v-alert type="warning">
-      Not Implemented
-    </v-alert>
+    <v-row>
+      <v-col>
+        <v-alert type="warning">
+          Not Implemented
+        </v-alert>
+      </v-col>
+    </v-row>
   </v-container>
 </template>
 
diff --git a/src/views/Identities.vue b/src/views/Identities.vue
index 36391cb..20a6001 100644
--- a/src/views/Identities.vue
+++ b/src/views/Identities.vue
@@ -9,9 +9,9 @@
           <v-col>
             <h1>{{ list.type.name }}</h1>
           </v-col>
-          <v-col md="auto">
+          <v-col cols="auto">
             <v-btn
-              fab dark color="indigo"
+              fab dark color="primary"
               :loading="createIdentityLoading[list.type.name]"
               @click="() => createIdentity(list.type)"
             >
diff --git a/src/views/Names.vue b/src/views/Names.vue
index 7bd3bc5..9cbaf8e 100644
--- a/src/views/Names.vue
+++ b/src/views/Names.vue
@@ -6,7 +6,7 @@
           <thead>
             <tr>
               <th>Id</th>
-              <th>Registered names</th>
+              <th>Names</th>
               <th></th>
             </tr>
           </thead>
@@ -27,33 +27,38 @@
         </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-row v-else>
+      <v-col>
+        <v-alert type="error">
+          You must have User Identity
+          in order to register a Domain Name for it
+        </v-alert>
+      </v-col>
+    </v-row>
     <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-form @submit="submit">
+          <v-card-title>
+            {{ selectedIdentity.id }}
+          </v-card-title>
+          <v-card-text>
+            <v-text-field counter v-model="name" label="Name" />
+          </v-card-text>
+          <v-card-actions>
+            <v-btn text @click="showNameDialog = false">close</v-btn>
+            <v-spacer />
+            <v-btn
+              color="primary"
+              type="submit"
+              :loading="submitting"
+            >
+              Register
+            </v-btn>
+          </v-card-actions>
+        </v-form>
       </v-card>
     </v-dialog>
   </v-container>
@@ -67,7 +72,7 @@ export default {
     return {
       showNameDialog: false,
       submitting: false,
-      selectedIdentity: undefined,
+      selectedIdentity: {},
       name: '',
     };
   },
@@ -81,7 +86,8 @@ export default {
       this.name = '';
       this.showNameDialog = true;
     },
-    submit() {
+    submit(event) {
+      event.preventDefault();
       const { name, selectedIdentity } = this;
       this.submitting = true;
       this.registerName({
@@ -98,7 +104,10 @@ export default {
 </script>
 
 <style scoped>
-  tr>td:last-child{
+  tr>td:first-child {
+    width: 1%;
+  }
+  tr>td:last-child {
     width: 1%;
   }
 </style>