open raw json in textarea

giniedp · Jan 9, 2024 · 8a69b3e · 8a69b3e
1 parent 84fecda
commit 8a69b3e
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 16 deletions.
diff --git a/apps/web/app/pages/misc/preferences/data-export-dialog.component.html b/apps/web/app/pages/misc/preferences/data-export-dialog.component.html
@@ -52,7 +52,7 @@
 
   <div class="flex justify-end gap-1 layout-pad">
     <div class="btn-group">
-      <button class="btn btn-ghost" (click)="openIneditor()">Raw JSON</button>
+      <button class="btn btn-ghost" (click)="openJson()">Open raw JSON</button>
     </div>
     <div class="flex-1"></div>
     <div class="btn-group">

diff --git a/apps/web/app/pages/misc/preferences/data-export-dialog.component.ts b/apps/web/app/pages/misc/preferences/data-export-dialog.component.ts
@@ -8,12 +8,13 @@ import { DbService } from '~/data/db.service'
 import { SENSITIVE_KEYS } from '~/data/sensitive-keys'
 import { NwModule } from '~/nw'
 import { AppPreferencesService, PreferencesService } from '~/preferences'
+import { ClipboardService } from '~/ui/clipboard'
+import { CodeEditorModule } from '~/ui/code-editor'
 import { IconsModule } from '~/ui/icons'
 import { svgCircleCheck, svgCircleExclamation, svgCircleNotch, svgFileExport, svgInfoCircle } from '~/ui/icons/svg'
+import { PromptDialogComponent } from '~/ui/layout/modal'
 import { PlatformService } from '~/utils/services/platform.service'
 import { recursivelyEncodeArrayBuffers } from './buffer-encoding'
-import { EditorDialogComponent } from '~/ui/layout/modal'
-import { CodeEditorModule } from '~/ui/code-editor'
 
 export interface DataExportDialogState {
   active?: boolean
@@ -53,7 +54,8 @@ export class DataExportDialogComponent extends ComponentStore<DataExportDialogSt
     private preferences: PreferencesService,
     private dialogRef: DialogRef,
     private dialog: Dialog,
-    private platform: PlatformService
+    private platform: PlatformService,
+    private clipboard: ClipboardService,
   ) {
     super({})
   }
@@ -82,7 +84,7 @@ export class DataExportDialogComponent extends ComponentStore<DataExportDialogSt
       })
   }
 
-  public async openIneditor() {
+  public async openJson() {
     const publicExport = this.get(({ publicExport }) => publicExport)
     const data = this.preferences.export()
     const db = await this.db.export()
@@ -93,12 +95,13 @@ export class DataExportDialogComponent extends ComponentStore<DataExportDialogSt
       removeSensitiveKeys(data)
     }
 
-    EditorDialogComponent.open(this.dialog, {
+    const json = JSON.stringify(data, null, 2)
+    PromptDialogComponent.open(this.dialog, {
       data: {
-        title: '',
-        value: JSON.stringify(data, null, 2),
-        readonly: true,
-        language: 'json',
+        title: 'Data Exported',
+        input: json,
+        textarea: true,
+        body: 'Copy the data below and save it to a file manually.',
         positive: 'Close',
       },
     })

diff --git a/apps/web/app/ui/layout/modal/prompt-dialog.component.html b/apps/web/app/ui/layout/modal/prompt-dialog.component.html
@@ -7,7 +7,7 @@ <h3 class="font-bold text-lg bg-black p-3">{{ title }}</h3>
     <p>{{ body }}</p>
   </ng-container>
 
-  <ng-container *ngIf="type === 'number'">
+  @if(type === 'number') {
     <input
       [(ngModel)]="value"
       [type]="type"
@@ -16,18 +16,25 @@ <h3 class="font-bold text-lg bg-black p-3">{{ title }}</h3>
       [placeholder]="placeholder"
       class="input input-bordered w-full max-w-xs mt-3"
     />
-  </ng-container>
-  <ng-container *ngIf="type !== 'number'">
+  } @else if(textarea) {
+    <textarea
+      [(ngModel)]="value"
+      [placeholder]="placeholder"
+      rows="20"
+      class="input input-bordered w-full h-96 mt-3"
+    ></textarea>
+  } @else {
     <input
       [(ngModel)]="value"
       [type]="type || 'text'"
       [placeholder]="placeholder"
       class="input input-bordered w-full max-w-xs mt-3"
     />
-  </ng-container>
+  }
+
 </div>
 <div class="modal-action flex-row-reverse justify-start layout-pad gap-1">
   <button class="btn btn-primary" (click)="submit()">{{ positive }}</button>
   <button class="btn btn-ghost" (click)="close()" *ngIf="neutral">{{ neutral }}</button>
-  <button class="btn btn-ghost" (click)="abort()">{{ negative }}</button>
+  <button class="btn btn-ghost" (click)="abort()" *ngIf="negative">{{ negative }}</button>
 </div>
diff --git a/apps/web/app/ui/layout/modal/prompt-dialog.component.ts b/apps/web/app/ui/layout/modal/prompt-dialog.component.ts
@@ -9,11 +9,12 @@ export interface PromptDialogOptions {
   html?: boolean
   input?: string
   type?: 'text' | 'number' | 'password'
+  textarea?: boolean
   min?: number
   max?: number
   placeholder?: string
   positive: string
-  negative: string
+  negative?: string
   neutral?: string
 }
 
@@ -81,6 +82,10 @@ export class PromptDialogComponent {
     return this.data.max
   }
 
+  protected get textarea() {
+    return this.data.textarea
+  }
+
   protected value: string
 
   public constructor(