From e23ae7575c0df9dbc5bf78a8a0aa6037be0df4fd Mon Sep 17 00:00:00 2001
From: IPdotSetAF <ipdotsetaf@gmail.com>
Date: Fri, 3 Jan 2025 03:50:38 +0330
Subject: [PATCH] feat: beautify checkbox - json beautify - xml beautify

---
 .../serialized-tool.component.html            | 39 +++++++------------
 .../serialized-tool.component.ts              |  5 ++-
 2 files changed, 18 insertions(+), 26 deletions(-)

diff --git a/Frontend/src/app/serialized-tool/serialized-tool.component.html b/Frontend/src/app/serialized-tool/serialized-tool.component.html
index fbd4b97..a4b8ea4 100644
--- a/Frontend/src/app/serialized-tool/serialized-tool.component.html
+++ b/Frontend/src/app/serialized-tool/serialized-tool.component.html
@@ -10,27 +10,19 @@ <h2>Serialized Tool</h2>
                 <label class="form-label">From</label>
                 <div class="form-check ">
                     <input class="form-check-input" type="radio" name="fromRadio" id="fromJson" value="json" [(ngModel)]="fromLang" (change)="convert()">
-                    <label class="form-check-label" for="fromJson">
-                        JSON
-                    </label>
+                    <label class="form-check-label" for="fromJson">JSON</label>
                 </div>
                 <div class="form-check">
                     <input class="form-check-input" type="radio" name="fromRadio" id="fromXml" value="xml" [(ngModel)]="fromLang" (change)="convert()">
-                    <label class="form-check-label" for="fromXml">
-                        XML
-                    </label>
+                    <label class="form-check-label" for="fromXml">XML</label>
                 </div>
                 <div class="form-check">
                     <input class="form-check-input" type="radio" name="fromRadio" id="fromYaml" value="yaml" [(ngModel)]="fromLang" (change)="convert()">
-                    <label class="form-check-label" for="fromYaml">
-                        YAML
-                    </label>
+                    <label class="form-check-label" for="fromYaml">YAML</label>
                 </div>
                 <div class="form-check">
                     <input class="form-check-input" type="radio" name="fromRadio" id="fromToml" value="toml" [(ngModel)]="fromLang" (change)="convert()">
-                    <label class="form-check-label" for="fromToml">
-                        TOML
-                    </label>
+                    <label class="form-check-label" for="fromToml">TOML</label>
                 </div>
             </div>
             <div class="code-border" [@hasError]="hasError">
@@ -44,27 +36,26 @@ <h2>Serialized Tool</h2>
                 <label class="form-label">To</label>
                 <div class="form-check ">
                     <input class="form-check-input" type="radio" name="toRadio" id="toJson" value="json" [(ngModel)]="toLang" (change)="convert()">
-                    <label class="form-check-label" for="toJson">
-                        JSON
-                    </label>
+                    <label class="form-check-label" for="toJson">JSON</label>
                 </div>
                 <div class="form-check">
                     <input class="form-check-input" type="radio" name="toRadio" id="toXml" value="xml" [(ngModel)]="toLang" (change)="convert()">
-                    <label class="form-check-label" for="toXml">
-                        XML
-                    </label>
+                    <label class="form-check-label" for="toXml">XML</label>
                 </div>
                 <div class="form-check">
                     <input class="form-check-input" type="radio" name="toRadio" id="toYaml" value="yaml" [(ngModel)]="toLang" (change)="convert()">
-                    <label class="form-check-label" for="toYaml">
-                        YAML
-                    </label>
+                    <label class="form-check-label" for="toYaml">YAML</label>
                 </div>
                 <div class="form-check">
                     <input class="form-check-input" type="radio" name="toRadio" id="toToml" value="toml" [(ngModel)]="toLang" (change)="convert()">
-                    <label class="form-check-label" for="toToml">
-                        TOML
-                    </label>
+                    <label class="form-check-label" for="toToml">TOML</label>
+                </div>
+
+                <div class="flex-fill d-flex justify-content-end">
+                    <div class="form-check form-switch">
+                        <input class="form-check-input" type="checkbox" id="beautify" [(ngModel)]="beautify" (change)="convert()">
+                        <label class="form-check-label" for="beautify">Beautify</label>
+                    </div>
                 </div>
             </div>
             <div class="code-border" [@valueChangeAnim]="status">
diff --git a/Frontend/src/app/serialized-tool/serialized-tool.component.ts b/Frontend/src/app/serialized-tool/serialized-tool.component.ts
index dc177a7..d46cef0 100644
--- a/Frontend/src/app/serialized-tool/serialized-tool.component.ts
+++ b/Frontend/src/app/serialized-tool/serialized-tool.component.ts
@@ -34,6 +34,7 @@ export class SerializedToolComponent implements AfterContentInit {
   protected toLang: string = "xml";
   protected status: boolean = false;
   protected hasError: boolean = false;
+  protected beautify: boolean = true;
 
   protected inputDebouncer = new Subject<string>();
 
@@ -77,10 +78,10 @@ export class SerializedToolComponent implements AfterContentInit {
 
       switch (this.toLang) {
         case "json":
-          this.toCode = JSON.stringify(obj);
+          this.toCode = this.beautify ? JSON.stringify(obj, null, 2) : JSON.stringify(obj);
           break;
         case "xml":
-          this.toCode = new xmlStringify().build(obj);
+          this.toCode = this.beautify ? new xmlStringify({ format: true }).build(obj) : new xmlStringify().build(obj);
           break;
         case "yaml":
           this.toCode = YAML.stringify(obj);