Merge pull request #47 from hypersign-protocol/pageSepration

Page sepration

Author: varsha766

src/App.vue

@@ -560,7 +560,11 @@ export default {
               title: "Credential",
               icon: "fa fa-certificate",
             })
-
+            menu.push({
+              href: "/studio/ssi/usage/" + this.getSelectedService.appId,
+              title: "Usages",
+              icon: "fa fa-chart-bar",
+                      })
 
             menu.push({
               href: "/studio/ssi/credit/" + this.getSelectedService.appId,

src/router.js

@@ -12,6 +12,7 @@ const Credential = () => import('./views/playground/Sessions.vue')
 const CredentialDetails = () => import('./views/playground/SessionsDetails.vue')
 const DIDs = () => import('./views/playground/DID.vue')
 const SSIDashboardCredit = () => import('./views/playground/SSIDashboardCredit.vue')
+const SSIDashboardUsage = () => import('./views/playground/SSIDashboardUsages.vue')
 const KYCCreditDashboard = () => import('./views/playground/KYCDashboardCredit.vue')
 const UsageS = () => import('./views/playground/Usage.vue')
 const OnChainKycSystems = () => import('./views/playground/OnChainKycSystems.vue')
@@ -125,6 +126,15 @@ const router = new Router({
         title: `${config.app.name} - SSI Credit`
       }
     },
+    {
+      path: '/studio/ssi/usage/:appId',
+      name: 'Usage',
+      component: SSIDashboardUsage,
+      meta: {
+        requiresAuth: true,
+        title: `${config.app.name} - Usages`
+      }
+    },
     {
       path: '/studio/onchainkyc/credit/:appId',
       name: 'KYCCredit',

src/views/playground/CredentialStatus.vue

@@ -193,9 +193,10 @@ h5 span {
                     @input="OnSchemaSelectDropDownChange(selectedSchema)"
                     @change="OnSchemaSelectDropDownChange(selectedSchema)" />
                   <datalist id="schema">
-                    <option v-for="browser in selectOptions" :key="browser.selected" :value="browser.value"
+                    <option v-for="schema in schemaIdsList" :key="schema.value"
+                     :value="schema.value"
                       class="form-control">
-                      {{ browser.text }}
+                      {{ schema.text }}
                     </option>
                   </datalist>
                   <!-- <span
@@ -532,6 +533,7 @@ export default {
       schemaConfigVisible: false,
       issuerConfigVisible: false,
       credentialDocumentToView: "",
+      schemaIdsList:[],
       booleanOption: [
         { text: true, value: true },
         { text: false, value: false },
@@ -610,6 +612,26 @@ export default {
       errorMessage:"",
       selectedCredential:""
     };
+  },
+    async mounted() {
+    try {
+     const schemaIds=this.schemaList.map(schema=>{
+        if(schema.id&&schema.id!==undefined && schema.status === 'Registered'){
+          return {
+            text:schema.schemaDocument.name + " "+ `{${UtilsMixin.methods.truncate(schema.id, 60)}}`,
+            value:schema.id
+        }
+        }
+        else{
+          return null
+        }
+      })
+      this.schemaIdsList = schemaIds.filter(x => x)
+      this.schemaIdsList.unshift({ value: null, text: "Please select a schema" })
+      return this.schemaIdsList;
+    } catch (error) {
+      return this.notifyErr(error.message)
+    }
   },
   async created() {
     try {
@@ -637,6 +659,7 @@ export default {
   methods: {
     ...mapActions('mainStore', [
       'fetchCredentialList',
+      'fetchSchemaList',
       'resolveCredential',
       'checkBlockchainStatusOfSSI',
       'resolveSchema',
@@ -726,8 +749,10 @@ export default {
       this.reasonForCredentialUpdate = "";
       this.verificationMethodId = "";
       this.errorMessage = "";
+      this.warningMessage="";
   },
    async handleCredentialAction(credentialId,action){
+       this.resetForm()
        this.vcId = credentialId; 
        this.selectedAction =action ;
        this.selectedCredential= this.credentialList.find(x=>x.id===credentialId)
@@ -757,13 +782,13 @@ export default {
           }
            let fetchedCredStatus;
            const { revoked, suspended, issuer } =this.selectedCredential.credentialStatus;
-            if (!revoked && !suspended) {
-              fetchedCredStatus='LIVE'
-            } else if (!suspended) {
-              fetchedCredStatus="SUSPEND"
-            }else{
-              fetchedCredStatus="REVOKE"
-            }
+              if (revoked) {
+                  fetchedCredStatus = "REVOKE";
+                } else if (suspended) {
+                  fetchedCredStatus = "SUSPEND";
+                } else {
+                  fetchedCredStatus = "LIVE";
+                }
          //check for status
         switch (this.selectedAction) {
           case "LIVE":
@@ -774,7 +799,7 @@ export default {
             break;
           case "SUSPEND":
             if (fetchedCredStatus === "SUSPEND") {
-               this.errorMessage = "Credential is already Live.";
+               this.errorMessage = "Credential is already SUSPENDED.";
             }
             break;
           case "REVOKE":

src/views/playground/KYCDashboardCredit.vue

@@ -158,15 +158,26 @@ h5 span {
                     <div class="">
                         <div class="">
                             <p><b>Total Credits</b></p>
-                            <p>
-                                <span style="font-size:xx-large;">
-                                    {{ numberFormat(myKYCCredits.allRemainingCredits) }}
-                                </span> <span style="font-size:larger;">/</span>
-                                <span style="font-size:larger; color: grey">
-                                    {{ numberFormat(myKYCCredits.allAvailableCredits) }}
+                          <p v-if="myKYCCredits.allRemainingCredits === 0 && myKYCCredits.allAvailableCredits === 0">
+                            <span style="font-size: xx-large;">
+                                {{ numberFormat(myKYCCredits.allRemainingCredits) }}
+                            </span>
+                         </p>
+                         <p v-else>
+                            <span style="font-size: xx-large;">
+                                {{ numberFormat(myKYCCredits.allRemainingCredits) }}
+                            </span> 
+                            <span style="font-size: larger;">/</span>
+                            <span style="font-size: larger; color: grey">
+                                {{ numberFormat(myKYCCredits.allAvailableCredits) }}
+                            </span>
+                         </p>
+                            <p v-if="this.timeRemaining==='Expired'">
+                                <span style="font-size:small; color: grey">
+                                    Expired
                                 </span>
                             </p>
-                            <p>
+                             <p v-else>
                                 <span style="font-size:small; color: grey">
                                     Expires In: {{ this.timeRemaining }}
                                 </span>

src/views/playground/SSIDashboardCredit.vue

@@ -185,34 +185,6 @@ h5 span {
             </div>
         </div>
 
-        <!--Usage -->
-        <div class="">
-            <div class="" style="text-align: left">
-                <div class="form-group" style="display:flex">
-                    <h3 style="text-align: left;">Usage</h3>
-                </div>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-4">
-                <v-card class="p-4">
-                    <canvas id="didChart"></canvas>
-                </v-card>
-            </div>
-
-            <div class="col-4">
-                <v-card class="p-4">
-                    <canvas id="credChart"></canvas>
-                </v-card>
-            </div>
-
-            <div class="col-4">
-                <v-card class="p-4">
-                    <canvas id="schemaChart"></canvas>
-                </v-card>
-            </div>
-        </div>
-
         <!-- Credit History -->
         <!--