@duplicati/ngclient 0.0.1

package/src/app/create-edit-backup/options/options.component.ts

@@ -0,0 +1,113 @@
+import { JsonPipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, ElementRef, inject, signal, viewChild } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import {
+  SparkleButtonComponent,
+  SparkleFormFieldComponent,
+  SparkleIconComponent,
+  SparkleMenuComponent,
+  SparkleSelectComponent,
+} from '@sparkle-ui/core';
+import { startWith } from 'rxjs';
+import ToggleCardComponent from '../../core/components/toggle-card/toggle-card.component';
+import { ICommandLineArgument, SettingInputDto } from '../../core/openapi';
+import { SysinfoState } from '../../core/states/sysinfo.state';
+import { CreateEditBackupState } from '../create-edit-backup.state';
+
+const fb = new FormBuilder();
+const SIZE_OPTIONS = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB'] as const;
+const RETENTION_OPTIONS = ['Local folder', 'Local drive', 'Remote drive', 'Cloud drive'] as const;
+
+type SizeOptions = (typeof SIZE_OPTIONS)[number];
+type RetentionOptions = (typeof RETENTION_OPTIONS)[number];
+type AdvancedOption = ReturnType<typeof createAdvancedOption>;
+
+export const createOptionsForm = (
+  defaults = {
+    remoteVolumeSize: 0,
+    size: 'GB' as SizeOptions,
+    backupRetention: 'Local folder' as RetentionOptions,
+    advancedOptions: [],
+  }
+) => {
+  return fb.group({
+    remoteVolumeSize: fb.group({
+      size: fb.control<number>(defaults.remoteVolumeSize),
+      unit: fb.control<SizeOptions>(defaults.size),
+    }),
+    backupRetention: fb.control<RetentionOptions>(defaults.backupRetention),
+    advancedOptions: fb.array<AdvancedOption>([]),
+  });
+};
+
+export const createAdvancedOption = (name: string | null | undefined, defaultValue: string | null | undefined) => {
+  return fb.group({
+    name: fb.control<SettingInputDto['Name']>(name),
+    value: fb.control<SettingInputDto['Value']>(defaultValue),
+  });
+};
+
+@Component({
+  selector: 'app-options',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    SparkleMenuComponent,
+    SparkleSelectComponent,
+    SparkleButtonComponent,
+    SparkleIconComponent,
+    SparkleFormFieldComponent,
+    ToggleCardComponent,
+    JsonPipe,
+  ],
+  templateUrl: './options.component.html',
+  styleUrl: './options.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class OptionsComponent {
+  #sysinfo = inject(SysinfoState);
+  #createEditBackupState = inject(CreateEditBackupState);
+  #router = inject(Router);
+  #route = inject(ActivatedRoute);
+  formRef = viewChild.required<ElementRef<HTMLFormElement>>('formRef');
+
+  optionsForm = this.#createEditBackupState.optionsForm;
+  sizeOptions = signal(SIZE_OPTIONS);
+  rentationOptions = signal(RETENTION_OPTIONS);
+  selectionAdvancedOptions = toSignal(this.optionsForm.controls.advancedOptions.valueChanges.pipe(startWith([])));
+  advancedOptions = signal<ICommandLineArgument[]>(this.#sysinfo.systemInfo()?.Options ?? []);
+
+  nonSelectedAdvancedOptions = computed(() => {
+    return this.advancedOptions().filter(
+      (x) => this.selectionAdvancedOptions()?.findIndex((y) => y.name === x.Name) === -1
+    );
+  });
+
+  addNewOption(option: ICommandLineArgument) {
+    this.optionsForm.controls.advancedOptions.push(createAdvancedOption(option.Name, option.DefaultValue));
+  }
+
+  displayFn() {
+    const items = this.advancedOptions();
+
+    return (val: string) => {
+      const item = items.find((x) => x.Name === val);
+
+      if (!item) {
+        return '';
+      }
+
+      return `${item.Name}`;
+    };
+  }
+
+  goBack() {
+    this.#router.navigate(['schedule'], { relativeTo: this.#route.parent });
+  }
+
+  submit() {
+    this.#createEditBackupState.submit();
+  }
+}

package/src/app/create-edit-backup/schedule/schedule.component.html

@@ -0,0 +1,102 @@
+<form [formGroup]="scheduleForm" #formRef (submit)="next()">
+  <h3 class="title-30">Schedule</h3>
+
+  <div class="toggle-wrap">
+    <spk-toggle class="raised primary">
+      Automatically run backups
+      <input type="checkbox" formControlName="autoRun" />
+    </spk-toggle>
+
+    <p>If a date was missed, the job will run as soon as possible.</p>
+  </div>
+
+  @if (!scheduleFormSignal()?.autoRun) {
+    <div class="row-inputs" formGroupName="nextTime">
+      <spk-form-field>
+        <label for="time">Next time</label>
+        <input type="time" id="time" #timeRef formControlName="time" (focus)="timeRef.showPicker()" />
+        <spk-icon spkSuffix>clock</spk-icon>
+      </spk-form-field>
+
+      <spk-form-field>
+        <label for="date"></label>
+        <input type="date" id="date" #dateRef formControlName="date" (focus)="dateRef.showPicker()" />
+        <spk-icon spkSuffix>calendar</spk-icon>
+      </spk-form-field>
+    </div>
+
+    <ng-container formGroupName="runAgain">
+      <div class="row-inputs">
+        <spk-form-field>
+          <label for="repeatValue">Run again every</label>
+          <input type="number" id="repeatValue" formControlName="repeatValue" />
+        </spk-form-field>
+
+        <spk-select [displayFn]="displayFn">
+          <input type="text" id="repeatUnit" formControlName="repeatUnit" />
+
+          <ng-container options>
+            @for (unit of unitOptions; track $index) {
+              <option [value]="unit.key">{{ unit.label }}</option>
+            }
+          </ng-container>
+        </spk-select>
+      </div>
+
+      <app-toggle-card formGroupName="allowedDays" [disallowToggle]="true">
+        <ng-container title>Allowed days</ng-container>
+
+        <div class="days-wrap">
+          <spk-toggle class="raised primary">
+            Monday
+            <input type="checkbox" formControlName="mon" />
+          </spk-toggle>
+
+          <spk-toggle class="raised primary">
+            Tuesday
+            <input type="checkbox" formControlName="tue" />
+          </spk-toggle>
+
+          <spk-toggle class="raised primary">
+            Wednesday
+            <input type="checkbox" formControlName="wed" />
+          </spk-toggle>
+
+          <spk-toggle class="raised primary">
+            Thursday
+            <input type="checkbox" formControlName="thu" />
+          </spk-toggle>
+
+          <spk-toggle class="raised primary">
+            Friday
+            <input type="checkbox" formControlName="fri" />
+          </spk-toggle>
+
+          <spk-toggle class="raised primary">
+            Saturday
+            <input type="checkbox" formControlName="sat" />
+          </spk-toggle>
+
+          <spk-toggle class="raised primary">
+            Sunday
+            <input type="checkbox" formControlName="sun" />
+          </spk-toggle>
+        </div>
+      </app-toggle-card>
+    </ng-container>
+  }
+
+  <div class="form-actions">
+    <button spk-button type="button" (click)="goBack()">
+      <spk-icon>arrow-left</spk-icon>
+      Go back
+    </button>
+
+    <button spk-button class="raised primary" type="submit">
+      <spk-icon>arrow-right</spk-icon>
+      Continue
+    </button>
+  </div>
+</form>
+
+<!-- <pre>{{ scheduleForm.value | json }}</pre> -->

package/src/app/create-edit-backup/schedule/schedule.component.scss

@@ -0,0 +1,38 @@
+@use '@sparkle-ui/core/styles/helpers' as *;
+
+:host {
+  display: block;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: p2r(24);
+}
+
+.toggle-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: p2r(4);
+}
+
+.row-inputs {
+  display: flex;
+  align-items: flex-end;
+  gap: p2r(8);
+
+  > * {
+    flex: 1 0;
+  }
+}
+
+.days-wrap {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: p2r(16);
+}
+
+.form-actions {
+  display: flex;
+  justify-content: space-between;
+}

package/src/app/create-edit-backup/schedule/schedule.component.ts

@@ -0,0 +1,137 @@
+import { JsonPipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, ElementRef, inject, viewChild } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import {
+  SparkleButtonComponent,
+  SparkleFormFieldComponent,
+  SparkleIconComponent,
+  SparkleSelectComponent,
+  SparkleToggleComponent,
+} from '@sparkle-ui/core';
+import ToggleCardComponent from '../../core/components/toggle-card/toggle-card.component';
+import { CreateEditBackupState } from '../create-edit-backup.state';
+
+const fb = new FormBuilder();
+
+const UNIT_OPTIONS = [
+  {
+    key: 's',
+    label: 'Seconds',
+  },
+  {
+    key: 'm',
+    label: 'Minutes',
+  },
+  {
+    key: 'h',
+    label: 'Hours',
+  },
+  {
+    key: 'D',
+    label: 'Days',
+  },
+  {
+    key: 'W',
+    label: 'Weeks',
+  },
+  {
+    key: 'M',
+    label: 'Months',
+  },
+  {
+    key: 'Y',
+    label: 'Years',
+  },
+] as const;
+
+type Unit = (typeof UNIT_OPTIONS)[number]['key'];
+export type Days = 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat' | 'sun';
+
+export const createScheduleForm = (
+  defaults = {
+    autoRun: false,
+    nextTime: { time: '13:00', date: new Date().toISOString().split('T')[0] },
+    runAgain: {
+      repeatValue: 1,
+      repeatUnit: 'D' as Unit,
+      allowedDays: {
+        mon: false,
+        tue: false,
+        wed: false,
+        thu: false,
+        fri: false,
+        sat: false,
+        sun: false,
+      },
+    },
+  }
+) => {
+  return fb.group({
+    autoRun: fb.control<boolean>(defaults.autoRun),
+    nextTime: fb.group({
+      time: fb.control<string>(defaults.nextTime.time),
+      date: fb.control<string>(defaults.nextTime.date),
+    }),
+    runAgain: fb.group({
+      repeatValue: fb.control<number>(defaults.runAgain.repeatValue),
+      repeatUnit: fb.control<Unit>(defaults.runAgain.repeatUnit),
+      allowedDays: fb.group({
+        mon: fb.control<boolean>(defaults.runAgain.allowedDays.mon),
+        tue: fb.control<boolean>(defaults.runAgain.allowedDays.tue),
+        wed: fb.control<boolean>(defaults.runAgain.allowedDays.wed),
+        thu: fb.control<boolean>(defaults.runAgain.allowedDays.thu),
+        fri: fb.control<boolean>(defaults.runAgain.allowedDays.fri),
+        sat: fb.control<boolean>(defaults.runAgain.allowedDays.sat),
+        sun: fb.control<boolean>(defaults.runAgain.allowedDays.sun),
+      }),
+    }),
+  });
+};
+
+export type ScheduleFormValue = ReturnType<typeof createScheduleForm>['value'];
+
+@Component({
+  selector: 'app-schedule',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    SparkleFormFieldComponent,
+    SparkleSelectComponent,
+    SparkleToggleComponent,
+    SparkleIconComponent,
+    SparkleButtonComponent,
+    ToggleCardComponent,
+    JsonPipe,
+  ],
+  templateUrl: './schedule.component.html',
+  styleUrl: './schedule.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class ScheduleComponent {
+  #createEditBackupState = inject(CreateEditBackupState);
+  #router = inject(Router);
+  #route = inject(ActivatedRoute);
+  formRef = viewChild.required<ElementRef<HTMLFormElement>>('formRef');
+
+  scheduleForm = this.#createEditBackupState.scheduleForm;
+  scheduleFormSignal = this.#createEditBackupState.scheduleFormSignal;
+  unitOptions = UNIT_OPTIONS;
+
+  displayFn(val: Unit) {
+    const item = UNIT_OPTIONS.find((x) => x.key === val);
+
+    if (!item) {
+      return '';
+    }
+    return `${item.label}`;
+  }
+
+  goBack() {
+    this.#router.navigate(['source-data'], { relativeTo: this.#route.parent });
+  }
+
+  next() {
+    this.#router.navigate(['options'], { relativeTo: this.#route.parent });
+  }
+}

package/src/app/create-edit-backup/source-data/source-data.component.html

@@ -0,0 +1,93 @@
+@if (destinationIsLoaded()) {
+  <form [formGroup]="sourceDataForm" #formRef (submit)="next()">
+    <h3 class="title-30">Source Data</h3>
+
+    <app-file-tree [multiSelect]="true" [startingPath]="getPath()">
+      <label for="path">Folder path</label>
+      <input type="text" id="path" tabindex="4" placeholder="Path" formControlName="path" />
+    </app-file-tree>
+
+    <!-- <app-toggle-card formArrayName="filters" [isActive]="true">
+    <ng-container title>Filters</ng-container>
+
+    @for (filterGroup of sourceDataForm.controls.filters.controls; track $index) {
+      <div class="filter-inputs" [formGroup]="filterGroup">
+        <spk-select>
+          <input type="text" placeholder="Select an option..." formControlName="expressionOption" />
+
+          <ng-container options>
+            @for (option of expressionOptions(); track $index) {
+              <option [value]="option">{{ option }}</option>
+            }
+          </ng-container>
+        </spk-select>
+
+        <spk-form-field>
+          <input type="text" formControlName="expression" />
+        </spk-form-field>
+
+        <div class="filter-removal" (click)="removeFilterGroup($index)">
+          <spk-icon class="spk-primary">x-circle</spk-icon>
+        </div>
+      </div>
+    }
+
+    <button type="button" spk-button (click)="addFilterGroup()">Add filter</button>
+  </app-toggle-card> -->
+
+    <app-toggle-card formGroupName="excludes" [isActive]="true">
+      <ng-container title>Exclude</ng-container>
+
+      <spk-toggle class="raised primary">
+        Hidden files
+        <input type="checkbox" placeholder="Hidden files" formControlName="hidden" />
+      </spk-toggle>
+
+      <spk-toggle class="raised primary">
+        System files
+        <input type="checkbox" placeholder="System files" formControlName="system" />
+      </spk-toggle>
+
+      <spk-toggle class="raised primary">
+        Temporary files
+        <input type="checkbox" placeholder="Temporary files" formControlName="temporary" />
+      </spk-toggle>
+
+      <spk-toggle class="raised primary" [class.active]="filesLargerThan()" (click)="toggleFilesLargerThan()">
+        Files larger than
+      </spk-toggle>
+
+      @if (filesLargerThan()) {
+        <div class="row-inputs" formGroupName="filesLargerThan">
+          <spk-form-field>
+            <input type="number" formControlName="size" />
+          </spk-form-field>
+
+          <spk-select>
+            <input type="text" formControlName="unit" placeholder="Select an option..." />
+
+            <ng-container options>
+              @for (option of sizeOptions(); track $index) {
+                <option [value]="option">{{ option }}</option>
+              }
+            </ng-container>
+          </spk-select>
+        </div>
+      }
+    </app-toggle-card>
+
+    <div class="form-actions">
+      <button spk-button type="button" (click)="goBack()">
+        <spk-icon>arrow-left</spk-icon>
+        Go back
+      </button>
+
+      <button spk-button class="raised primary" type="submit">
+        <spk-icon>arrow-right</spk-icon>
+        Continue
+      </button>
+    </div>
+  </form>
+
+  <!-- <pre>{{ sourceDataForm.value | json }}</pre> -->
+}

package/src/app/create-edit-backup/source-data/source-data.component.scss

@@ -0,0 +1,41 @@
+@use '@sparkle-ui/core/styles/helpers' as *;
+
+:host {
+  display: block;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: p2r(24);
+}
+
+.form-actions {
+  display: flex;
+  justify-content: space-between;
+}
+
+.row-inputs {
+  display: grid;
+  grid-template-columns: 1fr min-content;
+  gap: p2r(8);
+}
+
+.filter-inputs {
+  display: flex;
+  gap: p2r(8);
+  align-items: flex-end;
+
+  > * {
+    flex: 1 0;
+  }
+
+  .filter-removal {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: p2r(40);
+    flex: 0 0;
+  }
+}

package/src/app/create-edit-backup/source-data/source-data.component.ts

@@ -0,0 +1,114 @@
+import { JsonPipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, ElementRef, inject, signal, viewChild } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import {
+  SparkleButtonComponent,
+  SparkleFormFieldComponent,
+  SparkleIconComponent,
+  SparkleSelectComponent,
+  SparkleToggleComponent,
+} from '@sparkle-ui/core';
+import FileTreeComponent from '../../core/components/file-tree/file-tree.component';
+import ToggleCardComponent from '../../core/components/toggle-card/toggle-card.component';
+import { CreateEditBackupState } from '../create-edit-backup.state';
+
+const fb = new FormBuilder();
+const SIZE_OPTIONS = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB'] as const;
+const EXPRESSION_OPTIONS = ['Contains', 'Does not contain', 'Is greater than', 'Is less than'] as const;
+
+type SizeOptions = (typeof SIZE_OPTIONS)[number] | null;
+type ExpressionOptions = (typeof EXPRESSION_OPTIONS)[number];
+
+const createExpressionGroup = () => {
+  return fb.group({
+    expressionOption: fb.control<ExpressionOptions>(EXPRESSION_OPTIONS[0]),
+    expression: fb.nonNullable.control<string>('*'),
+  });
+};
+
+type ExpressionGroup = ReturnType<typeof createExpressionGroup>;
+
+export const createSourceDataForm = (
+  defaults = {
+    path: '',
+    excludes: {
+      hidden: false,
+      system: false,
+      temporary: false,
+      filesLargerThan: null,
+    },
+  }
+) => {
+  return fb.group({
+    path: fb.control<string>(defaults.path),
+    excludes: fb.group({
+      hidden: fb.control<boolean>(defaults.excludes.hidden),
+      system: fb.control<boolean>(defaults.excludes.system),
+      temporary: fb.control<boolean>(defaults.excludes.temporary),
+      filesLargerThan: fb.group({
+        size: fb.control<number | null>(null),
+        unit: fb.control<string | null>(null),
+      }),
+    }),
+  });
+};
+
+@Component({
+  selector: 'app-source-data',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    SparkleFormFieldComponent,
+    SparkleIconComponent,
+    SparkleButtonComponent,
+    SparkleSelectComponent,
+    SparkleToggleComponent,
+    FileTreeComponent,
+    ToggleCardComponent,
+
+    JsonPipe,
+  ],
+  templateUrl: './source-data.component.html',
+  styleUrl: './source-data.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class SourceDataComponent {
+  #createEditBackupState = inject(CreateEditBackupState);
+  #router = inject(Router);
+  #route = inject(ActivatedRoute);
+  formRef = viewChild.required<ElementRef<HTMLFormElement>>('formRef');
+  sourceDataForm = this.#createEditBackupState.sourceDataForm;
+  sourceDataFormSignal = this.#createEditBackupState.sourceDataFormSignal;
+  destinationIsLoaded = this.#createEditBackupState.destinationIsLoaded;
+
+  filesLargerThan = computed(() => this.sourceDataFormSignal()?.excludes?.filesLargerThan?.size !== null);
+  sizeOptions = signal(SIZE_OPTIONS);
+  expressionOptions = signal(EXPRESSION_OPTIONS);
+
+  getPath() {
+    return this.sourceDataForm.value.path ?? null;
+  }
+
+  toggleFilesLargerThan() {
+    if (this.sourceDataForm.controls.excludes.value.filesLargerThan?.size === null) {
+      this.sourceDataForm.controls.excludes.controls.filesLargerThan.setValue({
+        size: 50,
+        unit: 'MB',
+      });
+    } else {
+      this.sourceDataForm.controls.excludes.controls.filesLargerThan.setValue({
+        size: null,
+        unit: null,
+      });
+    }
+  }
+
+  goBack() {
+    this.#router.navigate(['destination'], { relativeTo: this.#route.parent });
+  }
+
+  next() {
+    this.#router.navigate(['schedule'], { relativeTo: this.#route.parent });
+  }
+}