b

frontend/src/app/components/protected/create/hyper-ide/components/ide-tree/ide-tree.component.html

@@ -28,7 +28,16 @@
                   mat-icon-button
                   color="primary"
                   class="tree-action-btn"
-                  title="New file..."
+                  title="Copy OpenAPI specification URL"
+                  (click)="copyOpenAPISpecificationUrl()">
+                  <mat-icon>http</mat-icon>
+                </button>
+
+                <button
+                  mat-icon-button
+                  color="primary"
+                  class="tree-action-btn"
+                  title="New file ..."
                   (click)="createNewFileObject('file')">
                   <mat-icon>post_add</mat-icon>
                 </button>
@@ -37,7 +46,7 @@
                   mat-icon-button
                   color="primary"
                   class="tree-action-btn"
-                  title="New folder..."
+                  title="New folder ..."
                   (click)="createNewFileObject('folder')">
                   <mat-icon>create_new_folder</mat-icon>
                 </button>

frontend/src/app/components/protected/create/hyper-ide/components/ide-tree/ide-tree.component.ts

@@ -16,12 +16,15 @@ import { FileNode } from '../../models/file-node.model';
 import { FileService } from 'src/app/services/file.service';
 import { GeneralService } from 'src/app/services/general.service';
 import { WorkflowService } from 'src/app/services/workflow.service';
+import { EndpointService } from 'src/app/services/endpoint.service';
 import { MagicResponse } from 'src/app/models/magic-response.model';
 import { CodemirrorActionsService } from 'src/app/services/codemirror-actions.service';
+import { ParametriseActionDialog } from '../parametrise-action-dialog/parametrise-action-dialog.component';
+import { OpenAPISpecifictionDialogComponent } from '../openapi-specification-dialog/openapi-specification-dialog.component';
 import { ConfirmationDialogComponent } from 'src/app/components/protected/common/confirmation-dialog/confirmation-dialog.component';
 import { NewFileFolderDialogComponent } from 'src/app/components/protected/create/hyper-ide/components/new-file-folder-dialog/new-file-folder-dialog.component';
 import { IncompatibleFileDialogComponent } from 'src/app/components/protected/create/hyper-ide/components/incompatible-file-dialog/incompatible-file-dialog.component';
-import { ParametriseActionDialog } from '../parametrise-action-dialog/parametrise-action-dialog.component';
+import { BackendService } from 'src/app/services/backend.service';
 
 /**
  * Tree component for Hyper IDE displaying files and folders, allowing user
@@ -67,7 +70,9 @@ export class IdeTreeComponent implements OnInit {
     private dialog: MatDialog,
     private fileService: FileService,
     private cdr: ChangeDetectorRef,
+    private endpointSerivce: EndpointService,
     private workflowService: WorkflowService,
+    private backendService: BackendService,
     private generalService: GeneralService,
     private codemirrorActionsService: CodemirrorActionsService) { }
 
@@ -95,6 +100,33 @@ export class IdeTreeComponent implements OnInit {
     });
   }
 
+  copyOpenAPISpecificationUrl() {
+
+    this.generalService.showLoading();
+    this.endpointSerivce.getOpenAPISpecification(this.activeFolder).subscribe({
+
+      next: (result: any) => {
+
+        this.generalService.hideLoading();
+        this.dialog.open(OpenAPISpecifictionDialogComponent, {
+          width: '750px',
+          maxWidth: '80vw',
+          autoFocus: true,
+          data: {
+            json: JSON.stringify(result, null, 2),
+            url: this.backendService.active.url + '/magic/system/endpoints/openapi?system=true&filter=' + this.activeFolder,
+          }
+        });
+      },
+
+      error: (error: any) => {
+
+        this.generalService.hideLoading();
+        this.generalService.showFeedback(error?.error?.message ?? error, 'errorMessage', 'Ok', 4000);
+      }
+    });
+  }
+
   /**
    * Returns true if currently open file is a Hyperlambda file.
    */

frontend/src/app/components/protected/create/hyper-ide/components/openapi-specification-dialog/openapi-specification-dialog.component.html

@@ -0,0 +1,30 @@
+<h3 mat-dialog-title>OpenAPI Specification for endpoints</h3>
+
+<div mat-dialog-content>
+
+  <div class="text-muted mb-2">
+    {{data.url}}
+  </div>
+
+  <pre
+    class="mb-2 result"
+    [highlight]="data.json"></pre>
+
+</div>
+
+<div mat-dialog-actions [align]="'end'">
+
+  <button
+    mat-button
+    (click)="copy()">
+    Copy
+  </button>
+
+  <button
+    mat-flat-button
+    color="primary"
+    mat-dialog-close>
+    Close
+  </button>
+
+</div>

frontend/src/app/components/protected/create/hyper-ide/components/openapi-specification-dialog/openapi-specification-dialog.component.scss

@@ -0,0 +1,10 @@
+pre.result {
+  color: #fafafa;
+  border-radius: 5px;
+  box-shadow: 3px 3px 5px rgba(0,0,0,.2);
+  height: 400px;
+  margin: 0;
+  text-wrap:wrap;
+  padding: 1rem;
+  overflow: auto;
+}

frontend/src/app/components/protected/create/hyper-ide/components/openapi-specification-dialog/openapi-specification-dialog.component.ts

@@ -0,0 +1,37 @@
+
+/*
+ * Copyright (c) 2023 Thomas Hansen - For license inquiries you can contact thomas@ainiro.io.
+ */
+
+// Angular and system imports.
+import { Clipboard } from '@angular/cdk/clipboard';
+import { Component, Inject, OnInit } from '@angular/core';
+
+// Application specific imports.
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { GeneralService } from 'src/app/services/general.service';
+
+/**
+ * Modal dialog showing JSON JSON output encapsulating OpenAPI specification.
+ */
+@Component({
+  selector: 'app-openapi-specification-dialog',
+  templateUrl: './openapi-specification-dialog.component.html',
+  styleUrls: ['./openapi-specification-dialog.component.scss']
+})
+export class OpenAPISpecifictionDialogComponent {
+
+  /**
+   * Creates an instance of your component.
+   */
+  constructor(
+    private clipBoard: Clipboard,
+    private generalService: GeneralService,
+    @Inject(MAT_DIALOG_DATA) public data: any) { }
+
+  copy() {
+
+    this.clipBoard.copy(this.data.json);
+    this.generalService.showFeedback('You can find the content on your clipboard', 'successMessage');
+  }
+}

frontend/src/app/components/protected/create/hyper-ide/module/ide.module.ts

@@ -38,6 +38,7 @@ import { FormlyAutocompleteTextareaComponent } from '../components/parametrise-a
 import { ExecuteFeedbackDialog } from '../components/execute-feedback-dialog/execute-feedback-dialog.component';
 import { FormlyWorkflowComponent } from '../components/parametrise-action-dialog/components/formly-workflow/formly-workflow.component';
 import { FormlyActionComponent } from '../components/parametrise-action-dialog/components/formly-action/formly-action.component';
+import { OpenAPISpecifictionDialogComponent } from '../components/openapi-specification-dialog/openapi-specification-dialog.component';
 
 @NgModule({
   declarations: [
@@ -63,6 +64,7 @@ import { FormlyActionComponent } from '../components/parametrise-action-dialog/c
     CreateKeyValueDialogComponent,
     CreateArrayDialogComponent,
     ExecuteFeedbackDialog,
+    OpenAPISpecifictionDialogComponent,
   ],
   imports: [
     CommonModule,

frontend/src/app/services/crudify.service.ts

@@ -28,20 +28,13 @@ export class CrudifyService {
 
   /**
    * Creates an instance of your service.
-   *
-   * @param httpService HTTP service to use for backend invocations
-   * @param feedbackService Needed to provide feedback to user
-   * @param locale Needed to format strings according to locale
    */
   constructor(
     private httpService: HttpService,
-    private generalService: GeneralService,
     @Inject(LOCALE_ID) public locale: string) { }
 
   /**
    * Crudifies a database table for a specified HTTP verb.
-   *
-   * @param data Input for process
    */
   crudify(data: Crudify) {
 
@@ -66,86 +59,9 @@ export class CrudifyService {
 
   /**
    * Generates an SQL endpoint for a specified HTTP verb.
-   *
-   * @param data Input for process
    */
   generateSqlEndpoint(data: CustomSql) {
 
     return this.httpService.post<MagicResponse>('/magic/system/crudifier/custom-sql', data);
   }
-
-  /**
-   * Returns a list of all templates the backend has stored.
-   */
-  templates() {
-
-    return this.httpService.get<string[]>('/magic/system/crudifier/templates');
-  }
-
-  /**
-   * Returns the custom arguments associated with the specified template.
-   *
-   * @param name Name of template to retrieve custom arguments for
-   */
-  templateCustomArgs(name: string) {
-
-    return this.httpService.get<any>('/magic/system/crudifier/template-args?name=' + encodeURIComponent(name));
-  }
-
-  /**
-   * Generates a frontend and downloads to client as a ZIP file.
-   *
-   * @param templateName Name of template to use
-   * @param apiUrl API root URL to use when generating template
-   * @param frontendUrl Frontend URL of where app is supposed to be deployed
-   * @param email Email address of user required to renew SSL certificate
-   * @param name Name of application
-   * @param copyright Copyright notice to put at top of all files
-   * @param endpoints Endpoints you want to embed into your result
-   * @param deployLocally If true frontend is deployed locally on server
-   * @param args Custom args endpoint requires
-   * @param onAfter Callback to be invoked once process is done
-   */
-  generate(
-    templateName: string,
-    apiUrl: string,
-    name: string,
-    copyright: string,
-    endpoints: any[],
-    deployLocally: boolean,
-    args: any,
-    onAfter: () => void = null,
-    onError: () => void = null) {
-
-    const payload = {
-      templateName,
-      apiUrl,
-      name,
-      copyright,
-      endpoints,
-      deployLocally,
-      args
-    };
-
-    this.httpService.downloadPost('/magic/system/crudifier/generate-frontend', payload).subscribe({
-      next: (res) => {
-
-        const disp = res.headers.get('Content-Disposition');
-        if (disp) {
-          let filename = disp.split(';')[1].trim().split('=')[1].replace(/"/g, '');
-          const file = new Blob([res.body]);
-          saveAs(file, filename);
-        }
-        if (onAfter) {
-          onAfter();
-        }
-      },
-      error: () => {
-
-        if (onError) {
-          onError();
-        }
-      }
-    });
-  }
 }

frontend/src/app/services/endpoint.service.ts

@@ -26,6 +26,9 @@ export class EndpointService {
     return this.httpService.get<Endpoint[]>('/magic/system/endpoints/list');
   }
 
+  /**
+   * Invokes URL using HTTP GET verb.
+   */
   get(url: string, responseType: string = 'json') {
 
     return this.httpService.get<any>(url, {
@@ -34,6 +37,9 @@ export class EndpointService {
     });
   }
 
+  /**
+   * Invokes URL using HTTP DELETE verb.
+   */
   delete(url: string, responseType: string = 'json') {
 
     return this.httpService.delete<any>(url, {
@@ -42,6 +48,9 @@ export class EndpointService {
     });
   }
 
+  /**
+   * Invokes URL using HTTP POST verb.
+   */
   post(url: string, args: any, responseType: string = 'json') {
 
     return this.httpService.post<any>(url, args, {
@@ -50,6 +59,9 @@ export class EndpointService {
     });
   }
 
+  /**
+   * Invokes URL using HTTP PUT verb.
+   */
   put(url: string, args: any, responseType: string = 'json') {
 
     return this.httpService.put<any>(url, args, {
@@ -58,11 +70,22 @@ export class EndpointService {
     });
   }
 
+  /**
+   * Invokes URL using HTTP PATCH verb.
+   */
   patch(url: string, args: any, responseType: string = 'json') {
 
     return this.httpService.patch<any>(url, args, {
       observe: 'response',
       responseType,
     });
   }
+
+  /**
+   * Returns OpenAPI specification for the specified folder.
+   */
+  getOpenAPISpecification(folder: string) {
+
+    return this.httpService.get<any>('/magic/system/endpoints/openapi?system=true&filter=' + encodeURIComponent(folder));
+  }
 }