From cab1c0af1b0a1fb63581f8086c7beffe20f09d2c Mon Sep 17 00:00:00 2001 From: Charlie Greenman Date: Sat, 6 Apr 2024 20:35:59 -0400 Subject: [PATCH] Update so generate code ui --- generate-code-ui/src/app/app.component.html | 66 +---------- .../is-project-selected.pipe.ts | 2 +- package.json | 10 +- src/generate-code/generate-code.ts | 106 ++++++++++++++++++ 4 files changed, 113 insertions(+), 71 deletions(-) create mode 100644 src/generate-code/generate-code.ts diff --git a/generate-code-ui/src/app/app.component.html b/generate-code-ui/src/app/app.component.html index a68b1b5..b835fdc 100644 --- a/generate-code-ui/src/app/app.component.html +++ b/generate-code-ui/src/app/app.component.html @@ -1,67 +1,3 @@
-
- - - -
- - {{projectOption?.packageJsonParams?.name | idToTitle}} - -
- - - - {{authIsLoading ? 'Connecting...' : (selectedProjects | connectText : originalSelectedProjects)}} - - - - - {{organization?.displayName - ? (organization?.displayName | titlecase) - : (organization.orgId === organization.userId ? 'Personal Workspace' : organization.orgId)}} - - - -
- - - -
Razroo is loading...
- - -
- 
-_______   ________  ________  ________  ________     
-|\  ___ \ |\   __  \|\   __  \|\   __  \|\   __  \    
-\ \   __/|\ \  \|\  \ \  \|\  \ \  \|\  \ \  \|\  \   
- \ \  \_|/_\ \   _  _\ \   _  _\ \  \\\  \ \   _  _\  
-  \ \  \_|\ \ \  \\  \\ \  \\  \\ \  \\\  \ \  \\   \ 
-   \ \_______\ \__\\ _\\ \__\\ _\\ \_______\ \__\\ __\ 
-    \|_______|\|__|\|__|\|__|\|__|\|_______|\|__|\|__|
-
- Will need atleast one project that uses Git in your VSCode Workspace to use Razroo Projects. -
-
-
-
Use Razroo to create a new project
- - - {{starter?.corePathId | titlecase}} - - - - {{createProjectCalled ? 'Creating...' : 'Create'}} -
- - - - + Test web view
diff --git a/generate-code-ui/src/app/pipes/is-project-selected/is-project-selected.pipe.ts b/generate-code-ui/src/app/pipes/is-project-selected/is-project-selected.pipe.ts index 82c689f..031ab6d 100644 --- a/generate-code-ui/src/app/pipes/is-project-selected/is-project-selected.pipe.ts +++ b/generate-code-ui/src/app/pipes/is-project-selected/is-project-selected.pipe.ts @@ -1,4 +1,4 @@ -import { ProjectConfig } from './../../interfaces/project-config.interfaces'; +import { ProjectConfig } from '../../interfaces/project-config.interfaces'; import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ diff --git a/package.json b/package.json index 5c653b7..ee8f8a6 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,7 @@ }, { "command": "razroo.generate", - "title": "Razroo Auth0 Authentication" + "title": "Razroo Generate" }, { "command": "generate.angular.component", @@ -127,6 +127,10 @@ { "submenu": "scaffold.submenu", "group": "myextension.myGroup" + }, + { + "command": "razroo.generate", + "group": "myextension.myGroup" } ], "scaffold.submenu": [ @@ -216,10 +220,6 @@ { "id": "scaffold.submenu", "label": "Razroo Scaffold" - }, - { - "id": "generate", - "label": "Razroo Generate" } ], "viewsContainers": { diff --git a/src/generate-code/generate-code.ts b/src/generate-code/generate-code.ts new file mode 100644 index 0000000..4101192 --- /dev/null +++ b/src/generate-code/generate-code.ts @@ -0,0 +1,106 @@ +import { getUri } from '../utils/webview-utils/getUri'; +import * as vscode from 'vscode'; +import { getNonce } from '../utils/webview-utils/getNonce'; +import { COMMAND_CONNECT_PROJECTS_TRY_TO_AUTH, COMMAND_TRY_TO_AUTH, COMMAND_LOG_OUT_USER, COMMAND_CREATE_PROJECT } from '../constants'; + +export class ProjectsWebview implements vscode.WebviewViewProvider { + + public static readonly viewType = 'razroo.generate'; + private _disposables: vscode.Disposable[] = []; + + view?: vscode.WebviewView; + _extensionUri = this.extensionContext.extensionUri; + + constructor( + private extensionContext: vscode.ExtensionContext + ) { } + + public resolveWebviewView( + webviewView: vscode.WebviewView, + context: vscode.WebviewViewResolveContext, + _token: vscode.CancellationToken + ): void { + this.view = webviewView; + + webviewView.webview.options = { + // Allow scripts in the webview + enableScripts: true, + + localResourceRoots: [ + this._extensionUri + ] + }; + + webviewView.webview.html = this._getWebviewContent(webviewView.webview, this._extensionUri); + + this._setWebviewMessageListener(webviewView.webview, context); + } + + private _getWebviewContent(webview: vscode.Webview, extensionUri: vscode.Uri) { + // The CSS file from the Angular build output + const stylesUri = getUri(webview, extensionUri, ["dist", "generate-code-webview-ui", "styles.css"]); + // The JS files from the Angular build output + const runtimeUri = getUri(webview, extensionUri, ["dist", "generate-code-webview-ui", "runtime.js"]); + const polyfillsUri = getUri(webview, extensionUri, ["dist", "generate-code-webview-ui", "polyfills.js"]); + const scriptUri = getUri(webview, extensionUri, ["dist", "generate-code-webview-ui", "main.js"]); + + const nonce = getNonce(); + + // Tip: Install the es6-string-html VS Code extension to enable code highlighting below + return /*html*/ ` + + + + + + + Razroo Projects + + + + + + + + + `; + } + + /** + * Sets up an event listener to listen for messages passed from the webview context and + * executes code based on the message that is recieved. + * + * @param webview A reference to the extension webview + * @param context A reference to the extension context + */ + private _setWebviewMessageListener(webview: vscode.Webview, context: vscode.WebviewViewResolveContext) { + // Handle messages sent from the extension + webview.onDidReceiveMessage( + (message: any) => { + const {command, selectedProjects, path, projectName, disconnectedProjects, text, data, orgId} = message; + + switch (command) { + case "connectProjects": + vscode.commands.executeCommand(COMMAND_CONNECT_PROJECTS_TRY_TO_AUTH, {selectedProjects, disconnectedProjects, orgId}); + return; + case "initialAuthInfoRequest": + vscode.commands.executeCommand(COMMAND_TRY_TO_AUTH); + return; + case "unConnectProject": + vscode.commands.executeCommand('extension.logout'); + return; + case "logoutUser": + vscode.commands.executeCommand(COMMAND_LOG_OUT_USER); + return; + case "createProject": + vscode.commands.executeCommand(COMMAND_CREATE_PROJECT, {path, projectName}); + return; + // Add more switch case statements here as more webview message commands + // are created within the webview context (i.e. inside media/main.js) + } + }, + undefined, + this._disposables + ); + } +} \ No newline at end of file