Added "add query" button to main field in doc viewer.

Closes #646.
altair-graphql · Mar 16, 2019 · 003f803 · 003f803
1 parent fa213de
commit 003f803
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 16 deletions.
diff --git a/src/app/components/doc-viewer/doc-viewer-field/doc-viewer-field.component.html b/src/app/components/doc-viewer/doc-viewer-field/doc-viewer-field.component.html
@@ -7,6 +7,13 @@
     <div class="doc-viewer-item-query-description">
       {{ data.description }}
     </div>
+    <div class="doc-viewer-item-query-inner">
+      <button class="doc-viewer-item-query-add-btn"
+      (click)="addToEditor({ name: data.name, parentType: parentType })" track-id="add_query">
+        <ng-container *ngIf="isRootType(parentType)">{{ 'DOCS_ADD_QUERY_TEXT' | translate }}</ng-container>
+        <ng-container *ngIf="!isRootType(parentType)">{{ 'DOCS_ADD_FRAGMENT_TEXT' | translate }}</ng-container>
+      </button>
+    </div>
   </div>
 </div>
 

diff --git a/src/app/components/doc-viewer/doc-viewer-field/doc-viewer-field.component.ts b/src/app/components/doc-viewer/doc-viewer-field/doc-viewer-field.component.ts
@@ -14,6 +14,7 @@ import {
 export class DocViewerFieldComponent implements OnInit {
   @Input() data: any = {};
   @Input() gqlSchema;
+  @Input() parentType = '';
   @Output() goToFieldChange = new EventEmitter();
   @Output() goToTypeChange = new EventEmitter();
   @Output() addToEditorChange = new EventEmitter();
@@ -27,6 +28,25 @@ export class DocViewerFieldComponent implements OnInit {
     return name.replace(/[\[\]!]/g, '');
   }
 
+  /**
+   * Check if the current type is a root type
+   * @param type
+   */
+  isRootType(type) {
+    if (!type || !this.gqlSchema) {
+      return false;
+    }
+
+    switch (type) {
+      case this.gqlSchema.getQueryType() && this.gqlSchema.getQueryType().name:
+      case this.gqlSchema.getMutationType() && this.gqlSchema.getMutationType().name:
+      case this.gqlSchema.getSubscriptionType() && this.gqlSchema.getSubscriptionType().name:
+        return true;
+    }
+
+    return false;
+  }
+
   goToField(name, parentType) {
     // console.log('field field', name, parentType);
     this.goToFieldChange.next({ name, parentType });

diff --git a/src/app/components/doc-viewer/doc-viewer/doc-viewer.component.html b/src/app/components/doc-viewer/doc-viewer/doc-viewer.component.html
@@ -48,6 +48,7 @@
         <app-doc-viewer-field
          [data]="gqlSchema.getType(docView.parentType).getFields()[docView.name]"
          [gqlSchema]="gqlSchema"
+         [parentType]="docView.parentType"
          (goToFieldChange)="goToField($event.name, $event.parentType)"
          (goToTypeChange)="goToType($event.name)"
          (addToEditorChange)="addToEditor($event.name, $event.parentType)"

diff --git a/src/scss/components/_doc-viewer.scss b/src/scss/components/_doc-viewer.scss
@@ -217,28 +217,28 @@ background: rgba(var(--rgb-orange), .1);
   margin-bottom: 10px;
 }
 .doc-viewer-item{
+  position: relative;
   margin-bottom: 20px;
+  &:hover{
+    .doc-viewer-item-query-add-btn{
+      opacity: 1;
+    }
+  }
 }
 .doc-viewer-item-query{
-  position: relative;
   padding-left: 10px;
   padding-right: 75px;
   &:before{
-      content: '';
-      position: absolute;
-      top: 6px;
-      left: 0;
-      display: inline-block;
-      width: 5px;
-      height: 5px;
-      border-radius: 2px;
-      background-color: var(--green-color);
-      vertical-align: middle;
-  }
-  &:hover{
-      .doc-viewer-item-query-add-btn{
-          opacity: 1;
-      }
+    content: '';
+    position: absolute;
+    top: 6px;
+    left: 0;
+    display: inline-block;
+    width: 5px;
+    height: 5px;
+    border-radius: 2px;
+    background-color: var(--green-color);
+    vertical-align: middle;
   }
 }
 .doc-viewer-item-field{