added support for a context-menu for operations. fixes #106

Apicurio · May 24, 2017 · ae3581a · ae3581a
1 parent 54cb769
commit ae3581a
Show file tree

Hide file tree

Showing 4 changed files with 136 additions and 61 deletions.
diff --git a/front-end/app/studio/pages/apis/{apiId}/editor/_components/dialogs/add-path.component.ts b/front-end/app/studio/pages/apis/{apiId}/editor/_components/dialogs/add-path.component.ts
@@ -43,6 +43,9 @@ export class AddPathDialogComponent {
         if (!path) {
             this.path = "";
         }
+        if (!this.path.endsWith("/")) {
+            this.path = this.path + "/";
+        }
         this._isOpen = true;
         this.addPathModal.changes.subscribe( thing => {
             if (this.addPathModal.first) {

diff --git a/front-end/app/studio/pages/apis/{apiId}/editor/editor.component.html b/front-end/app/studio/pages/apis/{apiId}/editor/editor.component.html
@@ -18,6 +18,17 @@
             </li>
         </ul>
 
+        <!-- Operation Context Menu -->
+        <ul id="operation-context-menu" class="dropdown-menu context-menu" *ngIf="contextMenuType === 'operation'"
+            [style.left]="contextMenuPos.left" [style.top]="contextMenuPos.top">
+            <li>
+                <a href="#" onclick="return false" (click)="deleteOperation()">
+                    <span class="pficon pficon-delete"></span>
+                    <span>Delete Operation</span>
+                </a>
+            </li>
+        </ul>
+
         <!-- Definition Context Menu -->
         <ul id="definition-context-menu" class="dropdown-menu context-menu" *ngIf="contextMenuType === 'definition'"
             [style.left]="contextMenuPos.left" [style.top]="contextMenuPos.top">
@@ -86,31 +97,45 @@ <h2>{{ document().info.title }}</h2>
                 <div class="section-body collapse in" id="path-section-body">
                     <div class="api-path" *ngFor="let path of paths()"
                             [class.problem-marker]="hasValidationProblem(path)"
-                            [class.contexted]="contextMenuType === 'path' && contextMenuItem === path.path()"
-                            [class.selected]="selectedItem === path.path() && (selectedType === 'path' || selectedType === 'operation')">
-                        <div path-item [path]="path.path()" (click)="selectPath(path)" (contextmenu)="showPathContextMenu($event, path.path())"></div>
-                        <div class="api-operations" *ngIf="selectedItem === path.path() && (selectedType === 'path' || selectedType === 'operation') && hasAtLeastOneOperation(path)">
-                            <span *ngIf="hasOperation(path, 'get')" class="label label-success"  (click)="selectOperation(path, 'get')"
+                            [class.contexted]="isPathContexted(path)"
+                            [class.selected]="isPathSelected(path)">
+                        <div path-item [path]="path.path()" (click)="selectPath(path)" (contextmenu)="showPathContextMenu($event, path)"></div>
+                        <div class="api-operations" *ngIf="isPathSelected(path) && hasAtLeastOneOperation(path)">
+                            <span *ngIf="hasOperation(path, 'get')" class="label label-success"  (click)="selectOperation(path.get)"
+                                  (contextmenu)="showOperationContextMenu($event, path.get)"
                                   [class.problem-marker]="hasValidationProblem(path.get)"
-                                  [class.selected]="selectedType === 'operation' && subselectedItem === 'get'">GET</span>
-                            <span *ngIf="hasOperation(path, 'put')" class="label label-info" (click)="selectOperation(path, 'put')"
+                                  [class.contexted]="contextMenuType === 'operation' && contextMenuItem === path.get"
+                                  [class.selected]="selectedItem === path.get">GET</span>
+                            <span *ngIf="hasOperation(path, 'put')" class="label label-info" (click)="selectOperation(path.put)"
+                                  (contextmenu)="showOperationContextMenu($event, path.put)"
                                   [class.problem-marker]="hasValidationProblem(path.put)"
-                                  [class.selected]="selectedType === 'operation' && subselectedItem === 'put'">PUT</span>
-                            <span *ngIf="hasOperation(path, 'post')" class="label label-warning" (click)="selectOperation(path, 'post')"
+                                  [class.contexted]="contextMenuType === 'operation' && contextMenuItem === path.put"
+                                  [class.selected]="selectedItem === path.put">PUT</span>
+                            <span *ngIf="hasOperation(path, 'post')" class="label label-warning" (click)="selectOperation(path.post)"
+                                  (contextmenu)="showOperationContextMenu($event, path.post)"
                                   [class.problem-marker]="hasValidationProblem(path.post)"
-                                  [class.selected]="selectedType === 'operation' && subselectedItem === 'post'">POST</span>
-                            <span *ngIf="hasOperation(path, 'delete')" class="label label-danger" (click)="selectOperation(path, 'delete')"
+                                  [class.contexted]="contextMenuType === 'operation' && contextMenuItem === path.post"
+                                  [class.selected]="selectedItem === path.post">POST</span>
+                            <span *ngIf="hasOperation(path, 'delete')" class="label label-danger" (click)="selectOperation(path.delete)"
+                                  (contextmenu)="showOperationContextMenu($event, path.delete)"
                                   [class.problem-marker]="hasValidationProblem(path.delete)"
-                                  [class.selected]="selectedType === 'operation' && subselectedItem === 'delete'">DELETE</span>
-                            <span *ngIf="hasOperation(path, 'options')" class="label label-info" (click)="selectOperation(path, 'options')"
+                                  [class.contexted]="contextMenuType === 'operation' && contextMenuItem === path.delete"
+                                  [class.selected]="selectedItem === path.delete">DELETE</span>
+                            <span *ngIf="hasOperation(path, 'options')" class="label label-info" (click)="selectOperation(path.options)"
+                                  (contextmenu)="showOperationContextMenu($event, path.options)"
                                   [class.problem-marker]="hasValidationProblem(path.options)"
-                                  [class.selected]="selectedType === 'operation' && subselectedItem === 'options'">OPTIONS</span>
-                            <span *ngIf="hasOperation(path, 'head')" class="label label-info" (click)="selectOperation(path, 'head')"
+                                  [class.contexted]="contextMenuType === 'operation' && contextMenuItem === path.options"
+                                  [class.selected]="selectedItem === path.options">OPTIONS</span>
+                            <span *ngIf="hasOperation(path, 'head')" class="label label-info" (click)="selectOperation(path.head)"
+                                  (contextmenu)="showOperationContextMenu($event, path.head)"
                                   [class.problem-marker]="hasValidationProblem(path.head)"
-                                  [class.selected]="selectedType === 'operation' && subselectedItem === 'head'">HEAD</span>
-                            <span *ngIf="hasOperation(path, 'patch')" class="label label-info" (click)="selectOperation(path, 'patch')"
+                                  [class.contexted]="contextMenuType === 'operation' && contextMenuItem === path.head"
+                                  [class.selected]="selectedItem === path.head">HEAD</span>
+                            <span *ngIf="hasOperation(path, 'patch')" class="label label-info" (click)="selectOperation(path.patch)"
+                                  (contextmenu)="showOperationContextMenu($event, path.patch)"
                                   [class.problem-marker]="hasValidationProblem(path.patch)"
-                                  [class.selected]="selectedType === 'operation' && subselectedItem === 'patch'">PATCH</span>
+                                  [class.contexted]="contextMenuType === 'operation' && contextMenuItem === path.patch"
+                                  [class.selected]="selectedItem === path.patch">PATCH</span>
                             <span>&nbsp;</span>
                         </div>
                     </div>
@@ -146,8 +171,8 @@ <h2>{{ document().info.title }}</h2>
                     <div definition-item class="api-definition" *ngFor="let def of definitions()" [name]="def.definitionName()"
                          (click)="selectDefinition(def)" (contextmenu)="showDefinitionContextMenu($event, def)"
                          [class.problem-marker]="hasValidationProblem(def)"
-                         [class.contexted]="contextMenuType === 'definition' && contextMenuItem === def.definitionName()"
-                         [class.selected]="selectedItem === def.definitionName() && selectedType === 'definition'"></div>
+                         [class.contexted]="contextMenuType === 'definition' && contextMenuItem === def"
+                         [class.selected]="selectedItem === def"></div>
                     <div class="alert alert-info" *ngIf="definitions().length === 0">
                         <span class="pficon pficon-info"></span>
                         <strong>None Found</strong>

diff --git a/front-end/app/studio/pages/apis/{apiId}/editor/editor.component.less b/front-end/app/studio/pages/apis/{apiId}/editor/editor.component.less
@@ -693,7 +693,7 @@
   margin-right: 3px;
 }
 
-#path-context-menu, #definition-context-menu {
+#path-context-menu, #definition-context-menu, #operation-context-menu, #response-context-menu {
   display: block;
   position: fixed;
 }