#60 NewPeerDialog.vue and JoinChannelDialog.vue are implemented, tabl…

…es are now fetching data from service dynamically.
stm-blockchain · Sep 20, 2021 · a1fa257 · a1fa257
1 parent 51b55e7
commit a1fa257
Show file tree

Hide file tree

Showing 6 changed files with 382 additions and 54 deletions.
diff --git a/Client/src/App.vue b/Client/src/App.vue
@@ -176,7 +176,7 @@ export default {
         this.baseMenu = this.caMenu;
       }
       if(to.fullPath === "/") this.$router.push({name: "splash"});
-      if (to.name === 'newPeer' || to.name === 'joinChannel' || to.name === 'chaincode') this.updateMenuAndTab(MENU_TYPES.PEER);
+      if (to.name === 'newPeer' || to.name === 'joinChannel' || to.name === 'chaincode' || to.name === 'peerOperations') this.updateMenuAndTab(MENU_TYPES.PEER);
       if (to.name === 'caInput' && this.showTopBarItems) this.updateMenuAndTab(MENU_TYPES.CA);
     }
   },

diff --git a/Client/src/components/JoinChannelDialog.vue b/Client/src/components/JoinChannelDialog.vue
@@ -0,0 +1,89 @@
+<template>
+  <Dialog v-model:visible="display" @hide="onHide" style="width: 80%">
+    <template #header>Yeni Kanala Katıl</template>
+    <div class="p-grid">
+      <div class="p-col-6">
+        <h6 class="p-text-left">Yeni Kanal Adı</h6>
+        <div class="p-inputgroup">
+          <InputText v-model="newChannelName" placeholder="Yeni Kanal Adı"/>
+        </div>
+      </div>
+
+      <div class="p-col-6" >
+        <h6 class="p-text-left">Orderer Bilgleri</h6>
+        <div class="p-col padding-zero p-inputgroup">
+          <div class="p-col padding-left-zero p-inputgroup">
+            <InputText v-model="ordererAddress" placeholder="Orderer Adresi"/>
+          </div>
+          <div class="p-col padding-left-zero p-inputgroup">
+            <InputText v-model="ordererOrgName" placeholder="Orderder Org Adı"/>
+          </div>
+        </div>
+      </div>
+
+      <div class="p-col-9">
+      </div>
+      <div class="p-col-3 p-align-end">
+        <Button label="Kanala Katıl" class="p-col-12" @click="onClick"></Button>
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<script>
+import EventService from "@/service/EventService";
+import {EVENTS} from "@/utilities/Utils";
+
+const SUMMARY = "Kanal İşlemleri";
+
+export default {
+  name: "JoinChannelDialog",
+  emits: [EVENTS.SHOW_PROGRESS_BAR, EVENTS.SHOW_TOAST, "close-dialog"],
+  props: ["visible"],
+  created() {
+    this.eventService = new EventService(this, SUMMARY);
+  },
+  methods: {
+    onHide() {
+      // do work here
+      this.$emit('close-dialog', {});
+    },
+    onClick() {
+      this.$emit('close-dialog', {
+        channelConfig: {
+          ordererConfig: {
+            ordererAddress: this.ordererAddress,
+            ordererOrgName: this.ordererOrgName
+          },
+          channelName: this.newChannelName
+        }
+      });
+    }
+  },
+  data() {
+    return {
+      display: false,
+      newChannelName: '',
+      ordererAddress: '',
+      ordererOrgName: '',
+      eventService: null
+    }
+  },
+  watch: {
+    visible: function (newValue) {
+      this.display = newValue;
+    }
+  }
+}
+</script>
+
+<style scoped>
+.padding-left-zero {
+  padding-left: 0 !important;
+  padding-top: 0 !important;
+}
+
+.padding-zero {
+  padding: 0 !important;
+}
+</style>
diff --git a/Client/src/components/NewPeerDialog.vue b/Client/src/components/NewPeerDialog.vue
@@ -0,0 +1,104 @@
+<template>
+  <Dialog v-model:visible="display" @hide="onHide" style="width: 80%">
+    <template #header>
+      Peer Bilgileri
+    </template>
+    <div class="p-grid p-pb-2">
+      <div class="p-col-6">
+        <h6 class="p-text-left">Peer Adı<span style="color:red;"> *</span></h6>
+        <div class="p-inputgroup">
+          <InputText v-model="peerName" placeholder="Kullanıcı adı girin"/>
+        </div>
+      </div>
+
+      <div class="p-col-6">
+        <h6 class="p-text-left">Peer Şifre <span style="color:red;"> *</span></h6>
+        <div class="p-inputgroup">
+          <InputText v-model="password" placeholder="Şifre girin"/>
+        </div>
+      </div>
+
+      <div class="p-col-6">
+        <h6 class="p-text-left">Host Adresleri<span style="color:red;"> *</span></h6>
+        <div class="p-inputgroup">
+          <InputText v-model="csrHosts" placeholder="eg. 172.20.20.82,*.Org1.com,..."/>
+        </div>
+      </div>
+
+      <div class="p-col-6">
+        <h6 class="p-text-left">Port<span style="color:red;"> *</span></h6>
+        <div class="p-inputgroup">
+          <InputText v-model="port" placeholder="eg. 7052"/>
+        </div>
+      </div>
+      <div class="p-col-12 p-text-left" style="color: red; font-size: 0.75em">* ile işaretlenen alanlar CA sunucusunun
+        oluşturulabilmesi için zorunludur
+      </div>
+      <div class="p-col-9">
+      </div>
+
+      <div class="p-col-3">
+        <Button label="Düğüm Oluştur" class="p-col-12" @click="onClick"></Button>
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<script>
+import EventService from "../service/EventService";
+import {EVENTS, INIT_ITEMS} from "@/utilities/Utils";
+
+const SUMMARY = 'Yeni Düğüm';
+export default {
+  name: "NewPeerDialog",
+  props: ['visible'],
+  emits: [EVENTS.SHOW_PROGRESS_BAR, EVENTS.SHOW_TOAST, "close-cc", "close-dialog"],
+  created() {
+    this.eventService = new EventService(this, SUMMARY);
+    this.clear();
+  },
+  methods: {
+    onHide() {
+      this.$emit('close-dialog', {});
+    },
+    onClick() {
+      this.$emit('close-dialog', {
+        newPeerConfig: {
+          peerName: this.peerName,
+          password: this.password,
+          orgName: this.orgName,
+          port: this.port,
+          csrHosts: this.csrHosts
+        }
+      });
+    },
+    clear() {
+      this.peerName = '';
+      this.password = '';
+      this.csrHosts = '';
+      this.port = '';
+      this.isDisabled = false;
+    }
+  },
+  data() {
+    return {
+      display: false,
+      peerName: '',
+      password: '',
+      orgName: localStorage.getItem(INIT_ITEMS.ORG_NAME),
+      port: '',
+      csrHosts: '',
+      eventService: null
+    }
+  },
+  watch: {
+    visible: function (newValue) {
+      this.display = newValue;
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>