Add save as, support for downloading in the browser and workaround for tauri bug

src/app/editor/editor.component.html

@@ -1,6 +1,6 @@
 <div class="proto-title">
   <h2>{{ selectedMessage().name }}</h2>
-  <button mat-icon-button matTooltip="Save configuration" (click)="save()">
+  <button mat-icon-button title="Save configuration" (click)="save()">
     <mat-icon>save</mat-icon>
   </button>
 </div>
@@ -22,3 +22,5 @@
 </div>
 <pre><code #code></code></pre>
 }
+
+<a #downloader [href]="saveHref()" [download]="downloadName()"></a>

src/app/editor/editor.component.ts

@@ -3,31 +3,28 @@ import {
   Component,
   ElementRef,
   SecurityContext,
+  computed,
   effect,
   input,
   signal,
   viewChild,
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { DomSanitizer } from '@angular/platform-browser';
 import { readTextFile, writeTextFile } from '@tauri-apps/api/fs';
 import hljs from 'highlight.js/lib/core';
 import { ProtoMessage } from '../model/proto-message.model';
 import { ProtoFieldComponent } from './proto-field/proto-field.component';
-import { MatIconModule } from '@angular/material/icon';
+import { save } from '@tauri-apps/api/dialog';
-import { MatTooltipModule } from '@angular/material/tooltip';
+
+declare const __TAURI__: any;
 
 @Component({
   selector: 'app-editor',
   standalone: true,
-  imports: [
+  imports: [CommonModule, ProtoFieldComponent, MatButtonModule, MatIconModule],
-    CommonModule,
-    ProtoFieldComponent,
-    MatButtonModule,
-    MatIconModule,
-    MatTooltipModule,
-  ],
   templateUrl: './editor.component.html',
   styleUrl: './editor.component.scss',
 })
@@ -35,10 +32,22 @@ export class EditorComponent {
   selectedFile = input<string>();
   selectedMessage = input.required<ProtoMessage>();
   indentSize = input<number>(2);
-
   showRaw = input<boolean>(true);
 
   protected values = signal<any>(undefined);
+  protected downloadName = computed(
+    () => this.selectedFile() ?? `${this.selectedMessage.name}.json`
+  );
+  private serialisedValues = computed(() =>
+    JSON.stringify(this.values(), undefined, this.indentSize())
+  );
+  protected saveHref = computed(() => {
+    const blob = new Blob([this.serialisedValues()], {
+      type: 'application/json',
+    });
+    return URL.createObjectURL(blob);
+  });
+  protected downloader = viewChild<ElementRef<HTMLAnchorElement>>('downloader');
 
   private code = viewChild<ElementRef<HTMLElement>>('code');
 
@@ -49,11 +58,7 @@ export class EditorComponent {
         if (!this.values()) {
           return;
         }
-        const json = JSON.stringify(
+        const json = this.serialisedValues();
-          this.values(),
-          undefined,
-          this.indentSize()
-        );
         const highlighted = hljs.highlightAuto(json, ['json']);
         const sanitized = sanitizer.sanitize(
           SecurityContext.HTML,
@@ -78,7 +83,6 @@ export class EditorComponent {
 
     effect(async () => {
       const selectedFile = this.selectedFile();
-      console.log('selected file' + selectedFile);
       if (selectedFile) {
         const fileContents = await readTextFile(selectedFile);
         try {
@@ -106,9 +110,7 @@ export class EditorComponent {
   }
 
   protected async copyToClipboard() {
-    await navigator.clipboard.writeText(
+    await navigator.clipboard.writeText(this.serialisedValues());
-      JSON.stringify(this.values(), undefined, this.indentSize())
-    );
     this.snackBar.open('Successully copied to clipboard', 'Close', {
       duration: 2000,
     });
@@ -116,16 +118,25 @@ export class EditorComponent {
 
   protected async save() {
     const selectedFile = this.selectedFile();
-    if (!selectedFile) {
+    if (__TAURI__) {
-      return;
+      const serialised = this.serialisedValues();
-    }
+      // TODO: Tauri is bugged on mac atm, remove this when resolved: https://github.com/tauri-apps/tauri/issues/4633
+      if (selectedFile) {
         try {
-      await writeTextFile(
+          await writeTextFile(selectedFile, serialised);
-        selectedFile,
-        JSON.stringify(this.values(), undefined, this.indentSize())
-      );
         } catch (err) {
           console.error('Failed to write to file ${this.selectedFile()}', err);
         }
+      } else {
+        const filePath = await save({
+          defaultPath: `${this.selectedMessage().name}.json`,
+        });
+        if (filePath) {
+          await writeTextFile(filePath, serialised);
+        }
+      }
+    } else {
+      this.downloader()?.nativeElement.click();
+    }
   }
 }

src/app/proto-definition-selector/proto-definition-selector.component.ts

@@ -16,6 +16,10 @@ import { ProtoMessage } from '../model/proto-message.model';
 import { ProtoDefinitionService } from './proto-definition.service';
 import { MatTreeModule } from '@angular/material/tree';
 import { MatSnackBar } from '@angular/material/snack-bar';
+import { writeTextFile } from '@tauri-apps/api/fs';
+import { save } from '@tauri-apps/api/dialog';
+
+declare const __TAURI__: any;
 
 @Component({
   selector: 'app-proto-definition-selector',
@@ -27,7 +31,9 @@ import { MatSnackBar } from '@angular/material/snack-bar';
       Select definitions
     </button>
     @if(currentFiles().length > 0) {
-    <button mat-button (click)="exporter.click()">Export Configuration</button>
+    <button mat-button (click)="exportConfiguration()">
+      Export Configuration
+    </button>
     }
     <button mat-button (click)="configurationSelector.click()">
       Import Configuration
@@ -79,6 +85,7 @@ export class ProtoDefinitionSelectorComponent {
   protected configurationSelector = viewChild<ElementRef<HTMLInputElement>>(
     'configurationSelector'
   );
+  protected exporter = viewChild<ElementRef<HTMLAnchorElement>>('exporter');
 
   protected selectedDefinition = signal<ProtoMessage[]>([]);
   protected selectedProtoFile = signal<string | null>(null);
@@ -88,8 +95,11 @@ export class ProtoDefinitionSelectorComponent {
   private allDefinitionFiles: File[] = [];
   private allProtoFiles = signal<ProtoMessage[]>([]);
 
+  private serialisedConfiguration = computed(() =>
+    JSON.stringify(this.allProtoFiles())
+  );
   protected exportHref = computed(() => {
-    const blob = new Blob([JSON.stringify(this.allProtoFiles())], {
+    const blob = new Blob([this.serialisedConfiguration()], {
       type: 'application/json',
     });
     return URL.createObjectURL(blob);
@@ -186,6 +196,19 @@ export class ProtoDefinitionSelectorComponent {
     }
   }
 
+  protected async exportConfiguration() {
+    if (__TAURI__) {
+      const filePath = await save({
+        defaultPath: `bufpiv.json`,
+      });
+      if (filePath) {
+        await writeTextFile(filePath, this.serialisedConfiguration());
+      }
+    } else {
+      this.exporter()?.nativeElement.click();
+    }
+  }
+
   @HostListener('dragover', ['$event'])
   onDrag(event: DragEvent) {
     event.preventDefault();

src/styles.scss

@@ -30,7 +30,6 @@ html {
   @include mat.list-theme(theme.$rose-theme);
   @include mat.select-theme(theme.$rose-theme);
   @include mat.snack-bar-theme(theme.$rose-theme);
-  @include mat.tooltip-theme(theme.$rose-theme);
   @include custom-colours(theme.$rose-theme);
 }