Add file save

src/app/app.component.html

@@ -1,5 +1,6 @@
 <mat-toolbar data-tauri-drag-region color="secondary">
   <h1>BufPiv</h1>
+  <span>{{ selectedFile()?.name }}</span>
   <span>
     <button
       mat-icon-button
@@ -47,7 +48,7 @@
     <app-editor
       [selectedMessage]="selectedMessage()!"
       [showRaw]="previewOpen()"
-      [selectedFile]="selectedFile()"
+      [selectedFile]="selectedFilePath()"
     ></app-editor>
     }
   </mat-sidenav-content>

src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { CommonModule } from '@angular/common';
-import { Component, signal } from '@angular/core';
+import { Component, computed, signal } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
@@ -36,7 +36,7 @@ const mobileBreakpoints = [Breakpoints.Handset, Breakpoints.TabletPortrait];
   ],
 })
 export class AppComponent {
-  protected selectedFile = signal<string | undefined>(undefined);
+  protected selectedFile = signal<FileOrFolder | undefined>(undefined);
   protected selectedMessage = signal<ProtoMessage | undefined>(undefined);
   protected rightSideOpen = signal(true);
   protected leftSideOpen = signal(true);
@@ -46,6 +46,8 @@ export class AppComponent {
     this.breakpointObserver.isMatched(mobileBreakpoints)
   );
 
+  protected selectedFilePath = computed(() => this.selectedFile()?.path);
+
   constructor(private breakpointObserver: BreakpointObserver) {
     breakpointObserver
       .observe(mobileBreakpoints)
@@ -55,11 +57,12 @@ export class AppComponent {
 
   protected selectMessage(message: ProtoMessage) {
     this.selectedMessage.set(message);
+    this.selectedFile.set(undefined);
   }
 
   protected async fileSelected(file: FileOrFolder) {
     try {
-      this.selectedFile.set(file.path);
+      this.selectedFile.set(file);
     } catch (err) {
       console.error(err);
       alert(

src/app/editor/editor.component.html

@@ -1,5 +1,10 @@
-<h2>{{ selectedMessage().name }}</h2>
+<div class="proto-title">
-<div>
+  <h2>{{ selectedMessage().name }}</h2>
+  <button mat-icon-button matTooltip="Save configuration" (click)="save()">
+    <mat-icon>save</mat-icon>
+  </button>
+</div>
+<div class="editor-items">
   @if(values()) { @for (item of selectedMessage().values; track $index) {
   <app-proto-field
     [label]="item.name"

src/app/editor/editor.component.scss

@@ -5,15 +5,20 @@
 }
 
 pre,
-div {
+.editor-items {
   flex: 1;
   overflow: auto;
 }
 
-div {
+.editor-items {
   padding: 16px;
 }
 
 .actions {
   flex: 0 0 auto;
 }
+
+.proto-title {
+  display: flex;
+  justify-content: space-between;
+}

src/app/editor/editor.component.ts

@@ -11,21 +11,30 @@ import {
 import { MatButtonModule } from '@angular/material/button';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { DomSanitizer } from '@angular/platform-browser';
-import { readTextFile } from '@tauri-apps/api/fs';
+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 { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
   selector: 'app-editor',
   standalone: true,
-  imports: [CommonModule, ProtoFieldComponent, MatButtonModule],
+  imports: [
+    CommonModule,
+    ProtoFieldComponent,
+    MatButtonModule,
+    MatIconModule,
+    MatTooltipModule,
+  ],
   templateUrl: './editor.component.html',
   styleUrl: './editor.component.scss',
 })
 export class EditorComponent {
   selectedFile = input<string>();
   selectedMessage = input.required<ProtoMessage>();
+  indentSize = input<number>(2);
 
   showRaw = input<boolean>(true);
 
@@ -40,7 +49,11 @@ export class EditorComponent {
         if (!this.values()) {
           return;
         }
-        const json = JSON.stringify(this.values(), undefined, 2);
+        const json = JSON.stringify(
+          this.values(),
+          undefined,
+          this.indentSize()
+        );
         const highlighted = hljs.highlightAuto(json, ['json']);
         const sanitized = sanitizer.sanitize(
           SecurityContext.HTML,
@@ -94,10 +107,25 @@ export class EditorComponent {
 
   protected async copyToClipboard() {
     await navigator.clipboard.writeText(
-      JSON.stringify(this.values(), undefined, 2)
+      JSON.stringify(this.values(), undefined, this.indentSize())
     );
     this.snackBar.open('Successully copied to clipboard', 'Close', {
       duration: 2000,
     });
   }
+
+  protected async save() {
+    const selectedFile = this.selectedFile();
+    if (!selectedFile) {
+      return;
+    }
+    try {
+      await writeTextFile(
+        selectedFile,
+        JSON.stringify(this.values(), undefined, this.indentSize())
+      );
+    } catch (err) {
+      console.error('Failed to write to file ${this.selectedFile()}', err);
+    }
+  }
 }

src/styles.scss

@@ -30,6 +30,7 @@ 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);
 }