Merge pull request #144 from suvarnakale/main

#816- Show jsonSchema on Publish page - Done
Sunbird-RC · Oct 18, 2023 · 0ea40dc · 0ea40dc
2 parents 42c62a3 + c9834d4
commit 0ea40dc
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 3 deletions.
diff --git a/src/app/admin/publish/publish.component.html b/src/app/admin/publish/publish.component.html
@@ -53,16 +53,20 @@
 
 <!-- -----------Publish Table------------------- -->
 
+<div  *ngIf="!isShowJson">
 <div class="fs-16 fw-700 d-flex text-color ml-5 mt-4">{{'PUBLISH' | translate}}</div>
 
 <div class="ml-5 mt-4 w-50 p-3 bg-color-secondary" *ngIf="count >= 1">
   {{count}} {{'SCHEMA_PUBLISHED' | translate}} 
   <a href="/explore-api" target="_blank">{{'EXPLORE_API_HERE' | translate}}</a>
   </div>
-<table class="ml-5 mt-4 bg-card vw-60 border-sp table">
+
+<table class="ml-5 mt-4 bg-card vw-0 border-sp table" style="width:85%;">
   <tr>
     <th><b class="px-0">{{'SCHEMA' | translate}}</b></th>
     <th><b class="px-0">{{'LAST_UPDATE' | translate}}</b></th>
+    <th><b class="px-0">Status</b></th>
+    <th><b class="px-0 float-end mr-4">{{'JSON_SCHEMA' | translate}}</b></th>
   </tr>
 
   <tr *ngFor="let item of publishData; let i=index" >
@@ -73,5 +77,26 @@
       <button type="button" class="draftbtn common-btn p-2" *ngIf="item.status== 'DRAFT'">{{'DRAFT' | translate}}</button>
       <button type="button" class="btn text-capitalize float-end bg-color-primary text-white fw-bold p-2" *ngIf="item.status== 'DRAFT'" (click)="changeStatus(item.osid, i)">{{'PUBLISH' | translate}}</button>
     </td>
+    <td>
+      <button class="btn text-capitalize float-end bg-color-secondary color-sec fw-bold p-2" (click)="showJson(i)">
+       <i class="fa fa-pencil-square-o" aria-hidden="true"></i> {{'JSON_SCHEMA' | translate}}
+      </button>
+    </td>
   </tr>
 </table>
+</div>
+<div *ngIf="isShowJson">
+  <div class="fs-16 fw-700 d-flex text-color ml-5 mt-4 mb-3">{{'JSON_SCHEMA' | translate}}</div>
+  <div class="">
+      <json-editor *ngIf="properties" [options]="editorOptions" [data]="properties"
+          [(ngModel)]="properties"></json-editor>
+          <footer class="footer fixed-bottom bg-card fixed-bottom-json zi-2000">
+            <div class="container-fluid">
+                <div>
+                  <button (click)="showTable()" class="btn text-capitalize float-end bg-color-primary text-white fw-bold px-3 my-2">{{'CLOSE' | translate}}</button>
+                  <button (click)="copyToClipboard()" class="btn text-capitalize float-end bg-color-primary text-white fw-bold px-3 my-2 mr-2">{{ 'COPY_JSON' | translate }} </button>
+                </div>
+            </div>
+        </footer>
+  </div>
+</div>
diff --git a/src/app/admin/publish/publish.component.ts b/src/app/admin/publish/publish.component.ts
@@ -1,29 +1,47 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, ViewChild } from "@angular/core";
 import { Console, timeStamp } from "console";
 import { GeneralService } from "src/app/services/general/general.service";
 import { TranslateService } from '@ngx-translate/core';
+import { JsonEditorComponent, JsonEditorOptions } from 'ang-jsoneditor';
+import { Clipboard } from '@angular/cdk/clipboard';
+import { ToastMessageService } from '../../services/toast-message/toast-message.service';
 
 @Component({
   selector: "publish",
   templateUrl: "./publish.component.html",
   styleUrls: ["./publish.component.scss"],
 })
 export class PublishComponent implements OnInit {
+  public editorOptions: JsonEditorOptions;
+  @ViewChild(JsonEditorComponent) jsonEditor: JsonEditorComponent;
+
   isShow = false;
   schemaOsid: any;
   publishData: any = [];
   count: number;
+  isShowJson: boolean = false;
+  properties: any;
+  jsonToCopy: string = '';
   constructor(private generalService: GeneralService, 
-    public translate: TranslateService) { }
+              public translate: TranslateService, 
+              private clipboard: Clipboard, 
+              public toastMsg: ToastMessageService) { }
 
   ngOnInit(): void {
+
+    this.editorOptions = new JsonEditorOptions();
+    this.editorOptions.mode = 'code';
+    this.editorOptions.history = true;
+    this.editorOptions.onChange = () => this.jsonEditor.get();
+
     this.generalService.getData("/Schema").subscribe((res) => {
       this.count = 0;
       for (let i = 0; i < res.length; i++) {
         if (res[i]["status"] == 'PUBLISHED') {
           this.count++;
         }
         res[i].schema = JSON.parse(res[i].schema);
+
         if (!res[i].schema.hasOwnProperty('isRefSchema') && !res[i].schema.isRefSchema) {
           this.publishData.push(res[i]);
         }
@@ -55,4 +73,19 @@ export class PublishComponent implements OnInit {
             });
       });
   }
+
+  showJson(i) {
+    this.isShowJson = !this.isShowJson;
+    this.properties = this.publishData[i]['schema']; 
+  }
+
+  showTable() {
+    this.isShowJson = !this.isShowJson;
+  }
+
+  copyToClipboard() {
+    this.jsonToCopy = JSON.stringify(this.properties, null, 2);
+    this.clipboard.copy(this.jsonToCopy);
+    this.toastMsg.success('success', 'Json Copied!');
+  }
 }
diff --git a/src/assets/i18n/global/en-global.json b/src/assets/i18n/global/en-global.json
@@ -20,6 +20,8 @@
     "PUBLISHED": "Published",
     "SAVE": "Save",
     "CANCEL": "Cancel",
+    "CLOSE":"Close",
+    "COPY_JSON":"Copy Json",
 
     "ADD_DOCUMENT": "Add Document",
     "EDIT_TEMPLATE": "Edit Template",

diff --git a/src/assets/i18n/global/hi-global.json b/src/assets/i18n/global/hi-global.json
@@ -21,6 +21,8 @@
   "PUBLISHED": "प्रकाशित",
   "SAVE": "सहेजें",
   "CANCEL": "रद्द करें",
+  "CLOSE":"बंद करें",
+  "COPY_JSON":"Json कॉपी करें",
 
   "ADD_DOCUMENT":"दस्तावेज़ जोड़ें",
   "EDIT_TEMPLATE":"टेम्पलेट संपादित करें",