From b35206fe46394f11305cc97b46395d7fa13c19ad Mon Sep 17 00:00:00 2001
From: sp90 <dev@nomis.dk>
Date: Tue, 5 Nov 2024 11:34:52 +0100
Subject: [PATCH] Be able to remove advanced fields from destinations

---
 src/app/backup/backup.state.ts                |  28 ++
 .../destination/destination.component.html    | 400 +++++++++---------
 .../destination/destination.component.scss    |  11 +
 .../destination/destination.component.ts      |  16 +-
 .../toggle-card/toggle-card.component.scss    |   4 +
 5 files changed, 251 insertions(+), 208 deletions(-)

diff --git a/src/app/backup/backup.state.ts b/src/app/backup/backup.state.ts
index accda3d..2a58f3e 100644
--- a/src/app/backup/backup.state.ts
+++ b/src/app/backup/backup.state.ts
@@ -99,6 +99,34 @@ export class BackupState {
       .filter((x) => this.selectedAdvancedOptions()?.findIndex((y) => y.name === x.Name) === -1);
   });
 
+  addAdvancedFormPair(item: FormView) {
+    this.selectedAdvancedFormPair.update((y) => {
+      y.push(item);
+
+      return y;
+    });
+
+    this.notSelectedAdvancedFormPair.update((y) => {
+      y = y.filter((x) => x.name !== item.name);
+
+      return y;
+    });
+  }
+
+  removeAdvancedFormPair(item: FormView) {
+    this.notSelectedAdvancedFormPair.update((y) => {
+      y.push(item);
+
+      return y;
+    });
+
+    this.selectedAdvancedFormPair.update((y) => {
+      y = y.filter((x) => x.name !== item.name);
+
+      return y;
+    });
+  }
+
   init(id: 'new' | 'string' = 'new', isDraft = false) {
     this.backupId.set(id);
 
diff --git a/src/app/backup/destination/destination.component.html b/src/app/backup/destination/destination.component.html
index 66a193c..364c81a 100644
--- a/src/app/backup/destination/destination.component.html
+++ b/src/app/backup/destination/destination.component.html
@@ -150,212 +150,220 @@ <h3>Google Drive</h3>
           }
 
           <ng-template #fieldTemplate let-item>
-            <ng-container [formGroupName]="item.formGroupName">
-              @if (item.destination.type === 'file-tree') {
-                <app-file-tree
-                  [startingPath]="getFormFieldValue(item.index, item.formGroupName, item.destination.name)">
-                  <label for="destination-{{ item.formGroupName }}-{{ item.formGroupName }}-{{ item.index }}">
-                    {{ item.destination.shortDescription ?? item.destination.name }}
-                    @if (item.destination.longDescription) {
-                      <spk-tooltip class="primary" [message]="item.destination.longDescription">
-                        <spk-icon>question</spk-icon>
-                      </spk-tooltip>
-                    }
-                  </label>
-                  <input
-                    type="text"
-                    id="destination-{{ item.formGroupName }}-{{ item.index }}"
-                    formControlName="{{ item.destination.name }}" />
-                </app-file-tree>
-              } @else if (item.destination.type === 'String' || item.destination.type === 'Path') {
-                <spk-form-field>
-                  <label for="destination-{{ item.formGroupName }}-{{ item.index }}">
-                    {{ item.destination.shortDescription ?? item.destination.name }}
-                    @if (item.destination.longDescription) {
-                      <spk-tooltip class="primary" [message]="item.destination.longDescription">
-                        <spk-icon>question</spk-icon>
-                      </spk-tooltip>
-                    }
-                  </label>
-
-                  <input
-                    type="text"
-                    id="destination-{{ item.formGroupName }}-{{ item.index }}"
-                    formControlName="{{ item.destination.name }}" />
-
-                  @if (item.destination.type === 'Path') {
-                    <spk-icon prefix>link</spk-icon>
-                  } @else {
-                    <spk-icon prefix>textbox</spk-icon>
-                  }
-                </spk-form-field>
-              } @else if (item.destination.type === 'Password') {
-                <spk-form-field>
-                  <label for="destination-{{ item.formGroupName }}-{{ item.index }}">
-                    {{ item.destination.shortDescription ?? item.destination.name }} -- {{ item.oauthField }}
-                    {{ item.destinationType }} {{ item.destination.name }}
-                  </label>
-                  <input
-                    [type]="$any(item.destination).showPassword ? 'text' : 'password'"
-                    autocomplete="off"
-                    id="destination-{{ item.formGroupName }}-{{ item.index }}"
-                    formControlName="{{ item.destination.name }}" />
-
-                  @if (item.oauthField === item.destination.name) {
-                    <span prefix class="link" (click)="oauthStartTokenCreation(item.destinationType)">AuthID</span>
-                  } @else {
-                    <spk-icon prefix>password</spk-icon>
-                  }
-                  @if ($any(item.destination).showPassword) {
-                    <spk-icon
-                      class="clickable"
-                      suffix
-                      (click)="$any(item.destination).showPassword = !$any(item.destination).showPassword">
-                      eye
-                    </spk-icon>
-                  } @else {
-                    <spk-icon
-                      class="clickable"
-                      suffix
-                      (click)="$any(item.destination).showPassword = !$any(item.destination).showPassword">
-                      eye-slash
-                    </spk-icon>
-                  }
-                </spk-form-field>
-              } @else if (item.destination.type === 'Enumeration') {
-                <spk-select>
-                  <label for="destination-{{ item.formGroupName }}-{{ item.index }}">
-                    {{ item.destination.shortDescription ?? item.destination.name }}
-
-                    @if (item.destination.longDescription) {
-                      <spk-tooltip class="primary" [message]="item.destination.longDescription">
-                        <spk-icon>question</spk-icon>
-                      </spk-tooltip>
+            <div class="field-row" [class.single-field]="item.formGroupName !== 'advanced'">
+              <ng-container [formGroupName]="item.formGroupName">
+                @if (item.destination.type === 'file-tree') {
+                  <app-file-tree
+                    [startingPath]="getFormFieldValue(item.index, item.formGroupName, item.destination.name)">
+                    <label for="destination-{{ item.formGroupName }}-{{ item.formGroupName }}-{{ item.index }}">
+                      {{ item.destination.shortDescription ?? item.destination.name }}
+                      @if (item.destination.longDescription) {
+                        <spk-tooltip class="primary" [message]="item.destination.longDescription">
+                          <spk-icon>question</spk-icon>
+                        </spk-tooltip>
+                      }
+                    </label>
+                    <input
+                      type="text"
+                      id="destination-{{ item.formGroupName }}-{{ item.index }}"
+                      formControlName="{{ item.destination.name }}" />
+                  </app-file-tree>
+                } @else if (item.destination.type === 'String' || item.destination.type === 'Path') {
+                  <spk-form-field>
+                    <label for="destination-{{ item.formGroupName }}-{{ item.index }}">
+                      {{ item.destination.shortDescription ?? item.destination.name }}
+                      @if (item.destination.longDescription) {
+                        <spk-tooltip class="primary" [message]="item.destination.longDescription">
+                          <spk-icon>question</spk-icon>
+                        </spk-tooltip>
+                      }
+                    </label>
+
+                    <input
+                      type="text"
+                      id="destination-{{ item.formGroupName }}-{{ item.index }}"
+                      formControlName="{{ item.destination.name }}" />
+
+                    @if (item.destination.type === 'Path') {
+                      <spk-icon prefix>link</spk-icon>
+                    } @else {
+                      <spk-icon prefix>textbox</spk-icon>
                     }
-                  </label>
-                  <input
-                    type="search"
-                    id="destination-{{ item.formGroupName }}-{{ item.index }}"
-                    formControlName="{{ item.destination.name }}" />
-
-                  <ng-container options>
-                    @for (option of item.destination.options; track $index) {
-                      <option [value]="option">{{ option }}</option>
+                  </spk-form-field>
+                } @else if (item.destination.type === 'Password') {
+                  <spk-form-field>
+                    <label for="destination-{{ item.formGroupName }}-{{ item.index }}">
+                      {{ item.destination.shortDescription ?? item.destination.name }} -- {{ item.oauthField }}
+                      {{ item.destinationType }} {{ item.destination.name }}
+                    </label>
+                    <input
+                      [type]="$any(item.destination).showPassword ? 'text' : 'password'"
+                      autocomplete="off"
+                      id="destination-{{ item.formGroupName }}-{{ item.index }}"
+                      formControlName="{{ item.destination.name }}" />
+
+                    @if (item.oauthField === item.destination.name) {
+                      <span prefix class="link" (click)="oauthStartTokenCreation(item.destinationType)">AuthID</span>
+                    } @else {
+                      <spk-icon prefix>password</spk-icon>
                     }
-                  </ng-container>
-                </spk-select>
-              } @else if (item.destination.type === 'Size') {
-                <div class="form-column" [formGroupName]="item.destination.name">
-                  <label for="destination-{{ item.formGroupName }}-{{ item.index }}">
-                    {{ item.destination.shortDescription ?? item.destination.name }}
-
-                    @if (item.destination.longDescription) {
-                      <spk-tooltip class="primary" [message]="item.destination.longDescription">
-                        <spk-icon>question</spk-icon>
-                      </spk-tooltip>
+                    @if ($any(item.destination).showPassword) {
+                      <spk-icon
+                        class="clickable"
+                        suffix
+                        (click)="$any(item.destination).showPassword = !$any(item.destination).showPassword">
+                        eye
+                      </spk-icon>
+                    } @else {
+                      <spk-icon
+                        class="clickable"
+                        suffix
+                        (click)="$any(item.destination).showPassword = !$any(item.destination).showPassword">
+                        eye-slash
+                      </spk-icon>
                     }
-                  </label>
+                  </spk-form-field>
+                } @else if (item.destination.type === 'Enumeration') {
+                  <spk-select>
+                    <label for="destination-{{ item.formGroupName }}-{{ item.index }}">
+                      {{ item.destination.shortDescription ?? item.destination.name }}
 
-                  <div class="form-row">
-                    <spk-form-field>
-                      <input
-                        type="number"
-                        id="destination-{{ item.formGroupName }}-{{ item.index }}"
-                        formControlName="size" />
+                      @if (item.destination.longDescription) {
+                        <spk-tooltip class="primary" [message]="item.destination.longDescription">
+                          <spk-icon>question</spk-icon>
+                        </spk-tooltip>
+                      }
+                    </label>
+                    <input
+                      type="search"
+                      id="destination-{{ item.formGroupName }}-{{ item.index }}"
+                      formControlName="{{ item.destination.name }}" />
 
-                      <spk-icon prefix>resize</spk-icon>
-                    </spk-form-field>
+                    <ng-container options>
+                      @for (option of item.destination.options; track $index) {
+                        <option [value]="option">{{ option }}</option>
+                      }
+                    </ng-container>
+                  </spk-select>
+                } @else if (item.destination.type === 'Size') {
+                  <div class="form-column" [formGroupName]="item.destination.name">
+                    <label for="destination-{{ item.formGroupName }}-{{ item.index }}">
+                      {{ item.destination.shortDescription ?? item.destination.name }}
+
+                      @if (item.destination.longDescription) {
+                        <spk-tooltip class="primary" [message]="item.destination.longDescription">
+                          <spk-icon>question</spk-icon>
+                        </spk-tooltip>
+                      }
+                    </label>
 
-                    <spk-select>
-                      <label></label>
-                      <input type="search" formControlName="unit" />
+                    <div class="form-row">
+                      <spk-form-field>
+                        <input
+                          type="number"
+                          id="destination-{{ item.formGroupName }}-{{ item.index }}"
+                          formControlName="size" />
 
-                      <ng-container options>
-                        @for (option of sizeOptions(); track $index) {
-                          <option [value]="option">{{ option }}</option>
-                        }
-                      </ng-container>
-                    </spk-select>
+                        <spk-icon prefix>resize</spk-icon>
+                      </spk-form-field>
+
+                      <spk-select>
+                        <label></label>
+                        <input type="search" formControlName="unit" />
+
+                        <ng-container options>
+                          @for (option of sizeOptions(); track $index) {
+                            <option [value]="option">{{ option }}</option>
+                          }
+                        </ng-container>
+                      </spk-select>
+                    </div>
                   </div>
-                </div>
-              } @else if (item.destination.type === 'Integer') {
-                <spk-form-field>
-                  <label for="destination-{{ item.formGroupName }}-{{ item.index }}">
-                    {{ item.destination.shortDescription ?? item.destination.name }}
-                    @if (item.destination.longDescription) {
-                      <spk-tooltip class="primary" [message]="item.destination.longDescription">
-                        <spk-icon>question</spk-icon>
-                      </spk-tooltip>
-                    }
-                  </label>
-                  <input
-                    type="number"
-                    id="destination-{{ item.formGroupName }}-{{ item.index }}"
-                    formControlName="{{ item.destination.name }}" />
-                  <spk-icon prefix>numpad</spk-icon>
-                </spk-form-field>
-              } @else if (item.destination.type === 'Boolean') {
-                <spk-toggle class="primary raised">
-                  <label for="destination-{{ item.formGroupName }}-{{ item.index }}">
-                    {{ item.destination.shortDescription ?? item.destination.name }}
-                    @if (item.destination.longDescription) {
-                      <spk-tooltip class="primary" [message]="item.destination.longDescription">
-                        <spk-icon>question</spk-icon>
-                      </spk-tooltip>
-                    }
-                  </label>
-                  <input
-                    type="checkbox"
-                    id="destination-{{ item.formGroupName }}-{{ item.index }}"
-                    formControlName="{{ item.destination.name }}" />
-                </spk-toggle>
-              } @else if (item.destination.type === 'Flags') {
-                <spk-select [selectMultiple]="true" class="primary">
-                  <label for="destination-{{ item.formGroupName }}-{{ item.index }}">
-                    {{ item.destination.shortDescription ?? item.destination.name }}
-                    @if (item.destination.longDescription) {
-                      <spk-tooltip class="primary" [message]="item.destination.longDescription">
-                        <spk-icon>question</spk-icon>
-                      </spk-tooltip>
-                    }
-                  </label>
-                  <input type="text" id="text" formControlName="{{ item.destination.name }}" />
-
-                  <ng-container options>
-                    @for (option of item.destination.options; track $index) {
-                      @if (option === 'None') {
-                        <spk-option [value]="'None'" deselect>None</spk-option>
-                      } @else {
-                        <spk-option [value]="option">
-                          {{ option }}
-
-                          <spk-checkbox class="raised primary" />
-                        </spk-option>
+                } @else if (item.destination.type === 'Integer') {
+                  <spk-form-field>
+                    <label for="destination-{{ item.formGroupName }}-{{ item.index }}">
+                      {{ item.destination.shortDescription ?? item.destination.name }}
+                      @if (item.destination.longDescription) {
+                        <spk-tooltip class="primary" [message]="item.destination.longDescription">
+                          <spk-icon>question</spk-icon>
+                        </spk-tooltip>
                       }
-                    }
-                  </ng-container>
-                </spk-select>
-              } @else if (item.destination.type === 'Timespan') {
-                <spk-form-field>
-                  <label for="destination-{{ item.formGroupName }}-{{ item.index }}">
-                    {{ item.destination.shortDescription ?? item.destination.name }}
-                    @if (item.destination.longDescription) {
-                      <spk-tooltip class="primary" [message]="item.destination.longDescription">
-                        <spk-icon>question</spk-icon>
-                      </spk-tooltip>
-                    }
-                  </label>
-                  <input
-                    type="text"
-                    id="destination-{{ item.formGroupName }}-{{ item.index }}"
-                    formControlName="{{ item.destination.name }}" />
-
-                  <span error>
-                    <!-- {{ destinationForm.controls.destinations.controls[index]?.hasError('pattern') }} -->
-                  </span>
-                </spk-form-field>
+                    </label>
+                    <input
+                      type="number"
+                      id="destination-{{ item.formGroupName }}-{{ item.index }}"
+                      formControlName="{{ item.destination.name }}" />
+                    <spk-icon prefix>numpad</spk-icon>
+                  </spk-form-field>
+                } @else if (item.destination.type === 'Boolean') {
+                  <spk-toggle class="primary raised">
+                    <label for="destination-{{ item.formGroupName }}-{{ item.index }}">
+                      {{ item.destination.shortDescription ?? item.destination.name }}
+                      @if (item.destination.longDescription) {
+                        <spk-tooltip class="primary" [message]="item.destination.longDescription">
+                          <spk-icon>question</spk-icon>
+                        </spk-tooltip>
+                      }
+                    </label>
+                    <input
+                      type="checkbox"
+                      id="destination-{{ item.formGroupName }}-{{ item.index }}"
+                      formControlName="{{ item.destination.name }}" />
+                  </spk-toggle>
+                } @else if (item.destination.type === 'Flags') {
+                  <spk-select [selectMultiple]="true" class="primary">
+                    <label for="destination-{{ item.formGroupName }}-{{ item.index }}">
+                      {{ item.destination.shortDescription ?? item.destination.name }}
+                      @if (item.destination.longDescription) {
+                        <spk-tooltip class="primary" [message]="item.destination.longDescription">
+                          <spk-icon>question</spk-icon>
+                        </spk-tooltip>
+                      }
+                    </label>
+                    <input type="text" id="text" formControlName="{{ item.destination.name }}" />
+
+                    <ng-container options>
+                      @for (option of item.destination.options; track $index) {
+                        @if (option === 'None') {
+                          <spk-option [value]="'None'" deselect>None</spk-option>
+                        } @else {
+                          <spk-option [value]="option">
+                            {{ option }}
+
+                            <spk-checkbox class="raised primary" />
+                          </spk-option>
+                        }
+                      }
+                    </ng-container>
+                  </spk-select>
+                } @else if (item.destination.type === 'Timespan') {
+                  <spk-form-field>
+                    <label for="destination-{{ item.formGroupName }}-{{ item.index }}">
+                      {{ item.destination.shortDescription ?? item.destination.name }}
+                      @if (item.destination.longDescription) {
+                        <spk-tooltip class="primary" [message]="item.destination.longDescription">
+                          <spk-icon>question</spk-icon>
+                        </spk-tooltip>
+                      }
+                    </label>
+                    <input
+                      type="text"
+                      id="destination-{{ item.formGroupName }}-{{ item.index }}"
+                      formControlName="{{ item.destination.name }}" />
+
+                    <span error>
+                      <!-- {{ destinationForm.controls.destinations.controls[index]?.hasError('pattern') }} -->
+                    </span>
+                  </spk-form-field>
+                }
+              </ng-container>
+
+              @if (item.formGroupName === 'advanced') {
+                <button spk-button class="outlined" type="button" (click)="removeAdvancedFormPair(item.destination)">
+                  <spk-icon>x-circle</spk-icon>
+                </button>
               }
-            </ng-container>
+            </div>
           </ng-template>
         </ng-container>
       </ng-container>
diff --git a/src/app/backup/destination/destination.component.scss b/src/app/backup/destination/destination.component.scss
index a51218f..78333e4 100644
--- a/src/app/backup/destination/destination.component.scss
+++ b/src/app/backup/destination/destination.component.scss
@@ -24,6 +24,17 @@ header {
   }
 }
 
+.field-row {
+  display: grid;
+  align-items: flex-end;
+  grid-template-columns: 1fr p2r(40);
+  gap: p2r(8);
+
+  &.single-field {
+    display: block;
+  }
+}
+
 form {
   display: flex;
   flex-direction: column;
diff --git a/src/app/backup/destination/destination.component.ts b/src/app/backup/destination/destination.component.ts
index 9245f59..31d4723 100644
--- a/src/app/backup/destination/destination.component.ts
+++ b/src/app/backup/destination/destination.component.ts
@@ -128,19 +128,11 @@ export default class DestinationComponent {
   }
 
   addAdvancedFormPair(item: FormView) {
-    console.log(item);
-
-    this.selectedAdvancedFormPair.update((y) => {
-      y.push(item);
-
-      return y;
-    });
-
-    this.notSelectedAdvancedFormPair.update((y) => {
-      y = y.filter((x) => x.name !== item.name);
+    this.#backupState.addAdvancedFormPair(item);
+  }
 
-      return y;
-    });
+  removeAdvancedFormPair(item: FormView) {
+    this.#backupState.removeAdvancedFormPair(item);
   }
 
   targetUrl = computed(() => {
diff --git a/src/app/core/components/toggle-card/toggle-card.component.scss b/src/app/core/components/toggle-card/toggle-card.component.scss
index 02eee71..6cb6fbe 100644
--- a/src/app/core/components/toggle-card/toggle-card.component.scss
+++ b/src/app/core/components/toggle-card/toggle-card.component.scss
@@ -46,4 +46,8 @@
   transition:
     max-height 250ms linear,
     padding 250ms linear;
+
+  &:empty {
+    display: none;
+  }
 }