From 4e394aa20819b7992e7bc391b92c796ed8cac70f Mon Sep 17 00:00:00 2001
From: romilin <118544135+romilin@users.noreply.github.com>
Date: Wed, 30 Aug 2023 14:11:47 +0200
Subject: [PATCH] Add sort button

Sort Properties, Path, Data types and Responses
---
 .../common/icon-button.component.ts           |  3 +
 .../properties-section.component.html         |  2 +
 .../properties-section.component.ts           | 18 +++-
 .../editor/_components/master.component.html  |  3 +
 .../editor/_components/master.component.ts    | 89 ++++++++++++-------
 5 files changed, 82 insertions(+), 33 deletions(-)

diff --git a/front-end/studio/src/app/pages/apis/{apiId}/editor/_components/common/icon-button.component.ts b/front-end/studio/src/app/pages/apis/{apiId}/editor/_components/common/icon-button.component.ts
index 14a67db8c..1dd373780 100644
--- a/front-end/studio/src/app/pages/apis/{apiId}/editor/_components/common/icon-button.component.ts
+++ b/front-end/studio/src/app/pages/apis/{apiId}/editor/_components/common/icon-button.component.ts
@@ -66,6 +66,9 @@ export class IconButtonComponent extends AbstractBaseComponent {
         if (this.type === 'import') {
             return "pficon pficon-import";
         }
+        if (this.type === 'sort') {
+            return "fa fa-sort-amount-down";
+        }
         return "fa fa-info";
     }
 
diff --git a/front-end/studio/src/app/pages/apis/{apiId}/editor/_components/forms/definition/properties-section.component.html b/front-end/studio/src/app/pages/apis/{apiId}/editor/_components/forms/definition/properties-section.component.html
index 8890af592..d56f30a1d 100644
--- a/front-end/studio/src/app/pages/apis/{apiId}/editor/_components/forms/definition/properties-section.component.html
+++ b/front-end/studio/src/app/pages/apis/{apiId}/editor/_components/forms/definition/properties-section.component.html
@@ -10,6 +10,8 @@
                                      [title]="'Add a property to the schema.'"></icon-button>
                         <icon-button (onClick)="deleteAllSchemaProperties()" [disabled]="!hasProperties()" [pullRight]="true" type="delete"
                                      [title]="'Delete all properties from the schema.'"></icon-button>
+                        <icon-button (onClick)="toggleSorted()" [pullRight]="true" type="sort"
+                                     [title]="'Sort properties'"></icon-button>
                     </span>
     <div body>
         <!-- Warning when no properties exist -->
diff --git a/front-end/studio/src/app/pages/apis/{apiId}/editor/_components/forms/definition/properties-section.component.ts b/front-end/studio/src/app/pages/apis/{apiId}/editor/_components/forms/definition/properties-section.component.ts
index e5d043d3d..367461e15 100644
--- a/front-end/studio/src/app/pages/apis/{apiId}/editor/_components/forms/definition/properties-section.component.ts
+++ b/front-end/studio/src/app/pages/apis/{apiId}/editor/_components/forms/definition/properties-section.component.ts
@@ -59,6 +59,8 @@ export class PropertiesSectionComponent extends AbstractBaseComponent {
 
     _pconfigOpen: boolean = false;
 
+    _sorted: boolean = true;
+
     /**
      * C'tor.
      * @param changeDetectorRef
@@ -88,6 +90,10 @@ export class PropertiesSectionComponent extends AbstractBaseComponent {
         this._pconfigOpen = !this._pconfigOpen;
     }
 
+    public toggleSorted(): void {
+        this._sorted = !this._sorted;
+    }
+
     public hasProperties(): boolean {
         return this.properties().length > 0;
     }
@@ -96,9 +102,15 @@ export class PropertiesSectionComponent extends AbstractBaseComponent {
         let rval: Schema[] = [];
 
         let sourceSchema: OasSchema = this.getPropertySourceSchema();
-        sourceSchema.getPropertyNames().sort((left, right) => {
-            return left.localeCompare(right);
-        }).forEach(name => rval.push(sourceSchema.getProperty(name)));
+        // let propertyNames: String[] = sourceSchema.getPropertyNames();
+
+        if (this._sorted) {
+            sourceSchema.getPropertyNames().sort((left, right) => {
+                return left.localeCompare(right)
+            }).forEach(name => rval.push(sourceSchema.getProperty(name)));
+        } else {
+            sourceSchema.getPropertyNames().forEach(name => rval.push(sourceSchema.getProperty(name)));
+        }
 
         return rval;
     }
diff --git a/front-end/studio/src/app/pages/apis/{apiId}/editor/_components/master.component.html b/front-end/studio/src/app/pages/apis/{apiId}/editor/_components/master.component.html
index 44e465277..383d5d90c 100644
--- a/front-end/studio/src/app/pages/apis/{apiId}/editor/_components/master.component.html
+++ b/front-end/studio/src/app/pages/apis/{apiId}/editor/_components/master.component.html
@@ -94,6 +94,7 @@
                  contextHelp="The core of any REST API is the set of resources/paths it exposes.  Each path is of the form '/path/to/resource' and can support a number of operations.">
             <span actions>
                 <icon-button (onClick)="addPathDialog.open(document, getCurrentPathSelection())" [pullRight]="true" type="add"></icon-button>
+                <icon-button (onClick)="toggleSortPath()" [pullRight]="true" type="sort" title="Sort path"></icon-button>
             </span>
             <div body tabindex="0" class="path-list master-entity-list" (keydown)="onPathsKeypress($event)" #pathList>
                 <signpost *ngIf="paths().length === 0">
@@ -117,6 +118,7 @@
             <span actions>
                 <icon-button (onClick)="openAddDefinitionEditor()" [pullRight]="true" type="add" title="Create Data Type"></icon-button>
                 <icon-button *ngIf="importsEnabled()" (onClick)="importDataTypes()" [pullRight]="true" type="import" title="Import Data Type"></icon-button>
+                <icon-button (onClick)="toggleSortDefinition()" [pullRight]="true" type="sort" title="Sort Data Type"></icon-button>
             </span>
             <div body tabindex="0" class="definition-list master-entity-list" (keydown)="onDefinitionsKeypress($event)" #defList>
                 <signpost *ngIf="definitions().length === 0">
@@ -136,6 +138,7 @@
             <span actions>
                 <icon-button (onClick)="openAddResponseEditor()" [pullRight]="true" type="add" title="Create Response"></icon-button>
                 <icon-button *ngIf="importsEnabled()" (onClick)="importResponses()" [pullRight]="true" type="import" title="Import Response"></icon-button>
+                <icon-button (onClick)="toggleSortResponse()" [pullRight]="true" type="sort" title="Sort Response"></icon-button>
             </span>
             <div body tabindex="0" class="response-list master-entity-list" (keydown)="onResponsesKeypress($event)" #respList>
                 <signpost *ngIf="responses().length === 0">
diff --git a/front-end/studio/src/app/pages/apis/{apiId}/editor/_components/master.component.ts b/front-end/studio/src/app/pages/apis/{apiId}/editor/_components/master.component.ts
index 74b28945a..253272e54 100644
--- a/front-end/studio/src/app/pages/apis/{apiId}/editor/_components/master.component.ts
+++ b/front-end/studio/src/app/pages/apis/{apiId}/editor/_components/master.component.ts
@@ -110,6 +110,9 @@ export class EditorMasterComponent extends AbstractBaseComponent {
     _paths: OasPathItem[];
     _defs: (Oas20SchemaDefinition | Oas30SchemaDefinition)[];
     _responses: (Oas20ResponseDefinition | Oas30ResponseDefinition)[];
+    _sortedDefinition: Boolean = true;
+    _sortedPath: Boolean = true;
+    _sortedResponse: Boolean = true;
 
     /**
      * C'tor.
@@ -194,38 +197,47 @@ export class EditorMasterComponent extends AbstractBaseComponent {
     }
 
     /**
-     * Returns an array of paths that match the filter criteria and are sorted alphabetically.
+     * Returns an array of paths that match the filter criteria and are sorted alphabetically or not.
      */
     public paths(): OasPathItem[] {
-        if (!this._paths) {
-            let viz: FindPathItemsVisitor = new FindPathItemsVisitor(this.filterCriteria);
-            if (this.document && this.document.paths) {
-                this.document.paths.getPathItems().forEach(pathItem => {
-                    VisitorUtil.visitNode(pathItem, viz);
-                });
-            }
+        let viz: FindPathItemsVisitor = new FindPathItemsVisitor(this.filterCriteria);
+        if (this.document && this.document.paths) {
+            this.document.paths.getPathItems().forEach(pathItem => {
+                VisitorUtil.visitNode(pathItem, viz);
+            });
+        }
+
+        if (this._sortedPath) {
             this._paths = viz.getSortedPathItems();
+        } else {
+            this._paths = viz.pathItems;
         }
+
         return this._paths;
     }
 
     /**
-     * Returns the array of definitions, filtered by search criteria and sorted.
+     * Returns the array of definitions, filtered by search criteria and sorted or not.
      */
     public definitions(): (Oas20SchemaDefinition | Oas30SchemaDefinition)[] {
         let viz: FindSchemaDefinitionsVisitor = new FindSchemaDefinitionsVisitor(this.filterCriteria);
-        if (!this._defs) {
-            if (this.document.is2xDocument() && (this.document as Oas20Document).definitions) {
-                (this.document as Oas20Document).definitions.getDefinitions().forEach( definition => {
-                    VisitorUtil.visitNode(definition, viz);
-                })
-            } else if (this.document.is3xDocument() && (this.document as Oas30Document).components) {
-                (this.document as Oas30Document).components.getSchemaDefinitions().forEach( definition => {
-                    VisitorUtil.visitNode(definition, viz);
-                })
-            }
+
+        if (this.document.is2xDocument() && (this.document as Oas20Document).definitions) {
+            (this.document as Oas20Document).definitions.getDefinitions().forEach(definition => {
+                VisitorUtil.visitNode(definition, viz);
+            })
+        } else if (this.document.is3xDocument() && (this.document as Oas30Document).components) {
+            (this.document as Oas30Document).components.getSchemaDefinitions().forEach(definition => {
+                VisitorUtil.visitNode(definition, viz);
+            })
+        }
+
+        if (this._sortedDefinition) {
             this._defs = viz.getSortedSchemaDefinitions();
+        } else {
+            this._defs = viz.schemaDefinitions;
         }
+
         return this._defs;
     }
 
@@ -238,22 +250,27 @@ export class EditorMasterComponent extends AbstractBaseComponent {
     }
 
     /**
-     * Returns an array of responses filtered by the search criteria and sorted.
+     * Returns an array of responses filtered by the search criteria and sorted or not.
      */
     public responses(): (Oas20ResponseDefinition | Oas30ResponseDefinition)[] {
         let viz: FindResponseDefinitionsVisitor = new FindResponseDefinitionsVisitor(this.filterCriteria);
-        if (!this._responses) {
-            if (this.document.is2xDocument() && (this.document as Oas20Document).responses) {
-                (this.document as Oas20Document).responses.getResponses().forEach( response => {
-                    VisitorUtil.visitNode(response, viz);
-                })
-            } else if (this.document.is3xDocument() && (this.document as Oas30Document).components) {
-                (this.document as Oas30Document).components.getResponseDefinitions().forEach( response => {
-                    VisitorUtil.visitNode(response, viz);
-                })
-            }
+
+        if (this.document.is2xDocument() && (this.document as Oas20Document).responses) {
+            (this.document as Oas20Document).responses.getResponses().forEach(response => {
+                VisitorUtil.visitNode(response, viz);
+            })
+        } else if (this.document.is3xDocument() && (this.document as Oas30Document).components) {
+            (this.document as Oas30Document).components.getResponseDefinitions().forEach(response => {
+                VisitorUtil.visitNode(response, viz);
+            })
+        }
+
+        if (this._sortedResponse) {
             this._responses = viz.getSortedResponseDefinitions();
+        } else {
+            this._responses = viz.responseDefinitions;
         }
+
         return this._responses;
     }
 
@@ -862,6 +879,18 @@ export class EditorMasterComponent extends AbstractBaseComponent {
         this.onImportComponent.emit(ComponentType.response);
     }
 
+    public toggleSortDefinition() {
+        this._sortedDefinition = !this._sortedDefinition;
+    }
+
+    public toggleSortPath() {
+        this._sortedPath = !this._sortedPath;
+    }
+
+    public toggleSortResponse() {
+        this._sortedResponse = !this._sortedResponse;
+    }
+
 }