Partners in Store

frontend/package.json

@@ -23,6 +23,7 @@
   },
   "devDependencies": {
     "@mdi/font": "^5.7.55",
+    "@mdi/js": "^5.8.55",
     "@vue/cli-plugin-babel": "~4.3.0",
     "@vue/cli-plugin-eslint": "^4.5.7",
     "@vue/cli-plugin-router": "^4.5.7",
@@ -34,7 +35,6 @@
     "eslint-plugin-vue": "^6.2.2",
     "husky": "^4.3.0",
     "lint-staged": "^10.4.2",
-    "material-design-icons-iconfont": "^5.0.1",
     "prettier": "2.1.2",
     "vue-cli-plugin-vuetify": "^2.0.7",
     "vue-template-compiler": "^2.6.12"

frontend/src/api/admin.api.js

@@ -0,0 +1,7 @@
+/*
+ Copyright (c) 2020 - for information on the respective copyright owner
+ see the NOTICE file and/or the repository at
+ https://github.com/hyperledger-labs/organizational-agent
+
+ SPDX-License-Identifier: Apache-2.0
+*/

frontend/src/api/httpClient.js

@@ -0,0 +1,26 @@
+/*
+ Copyright (c) 2020 - for information on the respective copyright owner
+ see the NOTICE file and/or the repository at
+ https://github.com/hyperledger-labs/organizational-agent
+
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+// import { apiBaseUrl } from "../main";
+import axios from "axios";
+
+let apiBaseUrl = "/api";
+
+if (process.env.NODE_ENV === "development") {
+  apiBaseUrl = "http://localhost:8080/api";
+}
+
+const httpClient = axios.create({
+  baseURL: apiBaseUrl,
+  timeout: 1000,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+export default httpClient;

frontend/src/api/partners.api.js

@@ -0,0 +1,39 @@
+/*
+ Copyright (c) 2020 - for information on the respective copyright owner
+ see the NOTICE file and/or the repository at
+ https://github.com/hyperledger-labs/organizational-agent
+
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+import httpClient from "./httpClient";
+
+const END_POINT = "/partners";
+
+const getAllPartners = () => httpClient.get(END_POINT);
+
+const getPartner = (partnerId) => httpClient.get(`${END_POINT}/${partnerId}`);
+
+const updatePartner = (partnerId, payload) =>
+  httpClient.put(`${END_POINT}/${partnerId}`, payload);
+
+const removePartner = (partnerId) =>
+  httpClient.delete(`${END_POINT}/${partnerId}`);
+
+const lookupPartner = (did) => httpClient.get(`${END_POINT}/lookup/${did}`);
+
+const refreshPartner = (partnerId) =>
+  httpClient.get(`${END_POINT}/${partnerId}/refresh`);
+
+const getIssuerForSchema = (schemaId) =>
+  httpClient.get(`${END_POINT}?issuerFor=${schemaId}`);
+
+export {
+  getAllPartners,
+  getPartner,
+  updatePartner,
+  removePartner,
+  lookupPartner,
+  refreshPartner,
+  getIssuerForSchema,
+};

frontend/src/api/status.api.js

@@ -0,0 +1,7 @@
+/*
+ Copyright (c) 2020 - for information on the respective copyright owner
+ see the NOTICE file and/or the repository at
+ https://github.com/hyperledger-labs/organizational-agent
+
+ SPDX-License-Identifier: Apache-2.0
+*/

frontend/src/api/wallet.api.js

@@ -0,0 +1,7 @@
+/*
+ Copyright (c) 2020 - for information on the respective copyright owner
+ see the NOTICE file and/or the repository at
+ https://github.com/hyperledger-labs/organizational-agent
+
+ SPDX-License-Identifier: Apache-2.0
+*/

frontend/src/components/PartnerList.vue

@@ -9,11 +9,10 @@
 <template>
   <v-container>
     <v-data-table
-      :hide-default-footer="data.length < 10"
       v-model="selected"
       :loading="isBusy"
       :headers="headers"
-      :items="data"
+      :items="partners"
       :show-select="selectable"
       :sort-by="['updatedAt']"
       :sort-desc="[true]"
@@ -27,7 +26,7 @@
           v-bind:state="item.state"
         ></PartnerStateIndicator>
         <span v-bind:class="{ 'font-weight-medium': item.new }">
-          {{ item.name }}
+          {{ partnerName(item.id) }}
         </span>
       </template>
 
@@ -44,6 +43,7 @@
 
 <script>
 import { EventBus } from "../main";
+import { mapActions, mapGetters } from "vuex";
 import { getPartnerProfile, getPartnerName } from "../utils/partnerUtils";
 import PartnerStateIndicator from "@/components/PartnerStateIndicator";
 import NewMessageIcon from "@/components/NewMessageIcon";
@@ -82,21 +82,25 @@ export default {
     },
   },
   created() {
-    this.fetch();
+    // this.fetch();
+    this.fetchPartners();
   },
   data: () => {
     return {
       selected: [],
-      data: [],
-      isBusy: true,
     };
   },
   computed: {
-    expertMode() {
-      return this.$store.state.expertMode;
-    },
+    ...mapGetters({
+      isBusy: "isPartnersLoading",
+      expertMode: "expertMode",
+      partners: "getPartners",
+      partnerName: "getPartnerName",
+      // ...
+    }),
   },
   methods: {
+    ...mapActions(["fetchPartners"]),
     open(partner) {
       this.$router.push({
         name: "Partner",

frontend/src/components/Profile.vue

@@ -16,15 +16,29 @@
     <v-container v-for="(item, index) in credentials" v-bind:key="item.id">
       <v-row>
         <v-col cols="4">
-          <span class="grey--text text--darken-2 font-weight-medium">
-            <span v-if="item.type === CredentialTypes.OTHER.name">{{
-              item.credentialDefinitionId | credentialTag
-            }}</span>
-            <span v-else>{{ item.type | credentialLabel }}</span>
-          </span>
-          <div v-if="item.issuer" class="text-caption">
+          <v-row>
+            <span class="grey--text text--darken-2 font-weight-medium">
+              <span v-if="item.type === CredentialTypes.OTHER.name">{{
+                item.credentialDefinitionId | credentialTag
+              }}</span>
+              <span v-else>{{ item.type | credentialLabel }}</span>
+            </span>
+          </v-row>
+          <v-row v-if="item.issuer" class="text-caption">
             verified by {{ item.issuer }}
-          </div>
+          </v-row>
+          <v-row v-if="item.credentialData && item.credentialData.validFrom">
+            <v-icon small class="pt-1 mr-2">{{ validFrom }}</v-icon>
+            <span class="text-caption">{{
+              item.credentialData.validFrom | moment("YYYY-MM-DD")
+            }}</span>
+          </v-row>
+          <v-row v-if="item.credentialData && item.credentialData.validUntil">
+            <v-icon small class="pt-1 mr-2">{{ validUntil }}</v-icon>
+            <span class="text-caption">{{
+              item.credentialData.validUntil | moment("YYYY-MM-DD")
+            }}</span>
+          </v-row>
         </v-col>
         <v-col>
           <Credential
@@ -44,6 +58,9 @@ import { CredentialTypes } from "../constants";
 import OrganizationalProfile from "@/components/OrganizationalProfile";
 import Credential from "@/components/Credential";
 import { getPartnerProfile } from "../utils/partnerUtils";
+import { mdiCalendarCheck } from "@mdi/js";
+import { mdiCalendarRemove } from "@mdi/js";
+
 export default {
   components: {
     OrganizationalProfile,
@@ -56,6 +73,8 @@ export default {
   data: () => {
     return {
       CredentialTypes: CredentialTypes,
+      validFrom: mdiCalendarCheck,
+      validUntil: mdiCalendarRemove,
     };
   },
   computed: {

frontend/src/main.js

@@ -57,7 +57,7 @@ Vue.use(VueNativeSock, socketApi, {
     if (target === "SOCKET_ONMESSAGE") {
       if (this.format === "json" && event.data) {
         msg = JSON.parse(event.data);
-        // method = 'dispatch';
+        method = "dispatch";
         switch (msg.message.type) {
           case "PARTNER":
             target = "newPartner";

frontend/src/store/actions.js

@@ -1,3 +1,11 @@
+/*
+ Copyright (c) 2020 - for information on the respective copyright owner
+ see the NOTICE file and/or the repository at
+ https://github.com/hyperledger-labs/organizational-agent
+
+ SPDX-License-Identifier: Apache-2.0
+*/
+
 import moment from "moment";
 import { EventBus, axios, apiBaseUrl } from "../main";
 import { getPartnerProfile } from "../utils/partnerUtils";

frontend/src/store/index.js

@@ -11,13 +11,13 @@ import Vuex from "vuex";
 import { CredentialTypes } from "../constants";
 import taa from "./modules/taa";
 import socketEvents from "./modules/socketevents";
+import partners from "./modules/partners.module";
 import * as actions from "./actions";
 
 Vue.use(Vuex);
 
 const store = new Vuex.Store({
   state: {
-    partners: [],
     editedDocument: {}, //document currently being edited
     documents: [],
     credentials: [],
@@ -72,6 +72,7 @@ const store = new Vuex.Store({
 
   modules: {
     taa,
+    partners,
     socketEvents,
   },
 });