@duplicati/ngclient 0.0.1

package/src/app/core/states/sysinfo.state.ts

@@ -0,0 +1,31 @@
+import { computed, inject, Injectable, signal } from '@angular/core';
+import { finalize } from 'rxjs';
+import { DuplicatiServerService, SystemInfoDto } from '../openapi';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SysinfoState {
+  #dupServer = inject(DuplicatiServerService);
+
+  isLoaded = signal(false);
+  systemInfo = signal<SystemInfoDto | null>(null);
+  backendModules = computed(() => {
+    return this.systemInfo()?.BackendModules ?? [];
+  });
+
+  preloadSystemInfo(force = false) {
+    if (!force && this.systemInfo()) {
+      return;
+    }
+
+    this.#dupServer
+      .getApiV1Systeminfo()
+      .pipe(finalize(() => this.isLoaded.set(true)))
+      .subscribe({
+        next: (res) => {
+          this.systemInfo.set(res);
+        },
+      });
+  }
+}

package/src/app/core/states/tasks.state.ts

@@ -0,0 +1,34 @@
+import { inject, Injectable, signal } from '@angular/core';
+import { finalize } from 'rxjs';
+import { TasksService } from '../openapi';
+import { Subscribed } from '../types/subscribed';
+
+export type TasksRes = Subscribed<ReturnType<TasksService['getApiV1Tasks']>>;
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TasksState {
+  #taskService = inject(TasksService);
+
+  tasks = signal<TasksRes>([]);
+  tasksLoading = signal(false);
+
+  getTasks() {
+    this.tasksLoading.set(true);
+
+    this.#taskService
+      .getApiV1Tasks()
+      .pipe(finalize(() => this.tasksLoading.set(false)))
+      .subscribe({
+        next: (res) => {
+          this.tasks.set(res);
+        },
+      });
+  }
+
+  getTask(id: number) {
+    // TODO maybe get task from server
+    return this.tasks().find((x) => x.TaskID === id) ?? null;
+  }
+}

package/src/app/core/types/subscribed.ts

@@ -0,0 +1,7 @@
+export type Subscribed<T> = T extends null | undefined
+  ? T // special case for `null | undefined` when not in `--strictNullChecks` mode
+  : T extends object & { subscribe(onfulfilled: infer F, ...args: infer _): any } // `await` only unwraps object types with a callable `then`. Non-object types are not unwrapped
+    ? F extends (value: infer V, ...args: infer _) => any // if the argument to `then` is callable, extracts the first argument
+      ? Subscribed<V> // recursively unwrap the value
+      : never // the argument to `then` was not callable
+    : T; // non-object or non-thenable

package/src/app/core/validators/custom.validators.ts

@@ -0,0 +1,120 @@
+import { AbstractControl, FormArray, FormGroup, ValidationErrors, ValidatorFn } from '@angular/forms';
+
+export function validateWhen(
+  predicate: (parent: FormGroup | FormArray) => boolean,
+  validators: ValidatorFn | ValidatorFn[],
+  errorNamespace = 'conditional'
+): ValidatorFn {
+  return (control: AbstractControl) => {
+    if (!control.parent) {
+      return null;
+    }
+
+    let error: ValidationErrors | null = null;
+
+    if (predicate(control.parent)) {
+      const validatorArr = Array.isArray(validators) ? validators : [validators];
+
+      error = validatorArr.find((validator) => validator(control) !== null) ?? null;
+    }
+
+    if (errorNamespace && error) {
+      const customError: ValidationErrors = {};
+      customError[errorNamespace] = error;
+      error = customError;
+    }
+
+    return error as ValidationErrors | null;
+  };
+}
+
+export function watchField() {
+  return (control: AbstractControl): null => {
+    if (!control.parent) {
+      return null;
+    }
+
+    Object.values(control.parent.controls).forEach((ctrl) => {
+      if (ctrl !== control) {
+        ctrl.updateValueAndValidity();
+      }
+    });
+
+    return null;
+  };
+}
+
+export function validateIf<T>(
+  conditionalFieldName: string,
+  conditionalValue: T | T[],
+  validators: ValidatorFn | ValidatorFn[],
+  errorNamespace = 'conditional'
+): ValidatorFn {
+  return (control: AbstractControl) => {
+    if (!control.parent) {
+      return null;
+    }
+
+    let error: ValidationErrors | null = null;
+
+    const conditionalFormCtrl = control.parent.get(conditionalFieldName);
+
+    if (!conditionalFormCtrl) {
+      console.warn('Conditional field not found');
+
+      return null;
+    }
+
+    const isConditionalValueArray = Array.isArray(conditionalValue);
+
+    if (
+      isConditionalValueArray
+        ? conditionalFormCtrl.value?.includes(conditionalValue)
+        : conditionalFormCtrl.value === conditionalValue
+    ) {
+      const validatorArr = Array.isArray(validators) ? validators : [validators];
+
+      error = validatorArr.find((validator) => validator(control) !== null) ?? null;
+    }
+
+    if (errorNamespace && error) {
+      const customError: ValidationErrors = {};
+      customError[errorNamespace] = error;
+      error = customError;
+    }
+
+    return error;
+  };
+}
+
+export function accumulatedMax(conditionalValue: number): ValidatorFn {
+  return (control: AbstractControl): ValidationErrors => {
+    let error: { accumulatedMax: string } | ValidationErrors = {};
+
+    const accumulatedControlValue = control.value.reduce((a: number, b: number) => a + b, 0);
+
+    if (accumulatedControlValue > conditionalValue) {
+      error = {
+        accumulatedMax: `Total page count exceeds the maximum (${conditionalValue}) count.`,
+      };
+    }
+
+    return error;
+  };
+}
+
+export function accumulatedMin(conditionalValue: number): ValidatorFn {
+  return (control: AbstractControl): ValidationErrors => {
+    let error: { accumulatedMax: string } | ValidationErrors = {};
+
+    const accumulatedControlValue = control.value.reduce((a: number, b: number) => a + b, 0);
+
+    if (accumulatedControlValue < conditionalValue) {
+      error = {
+        accumulatedMin: `Total page count exceeds the minimum (${conditionalValue}) count.`,
+      };
+    }
+
+    return error;
+  };
+}

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

@@ -0,0 +1,28 @@
+<app-status-bar />
+
+<spk-stepper>
+  <div spk-step routerLinkActive="active" [routerLink]="['/backup', backupId(), 'general']">
+    <spk-radio />
+    General
+  </div>
+  <div spk-step routerLinkActive="active" [routerLink]="['/backup', backupId(), 'destination']">
+    <spk-radio />
+    Destination
+  </div>
+  <div spk-step routerLinkActive="active" [routerLink]="['/backup', backupId(), 'source-data']">
+    <spk-radio />
+    Source Data
+  </div>
+  <div spk-step routerLinkActive="active" [routerLink]="['/backup', backupId(), 'schedule']">
+    <spk-radio />
+    Schedule
+  </div>
+  <div spk-step routerLinkActive="active" [routerLink]="['/backup', backupId(), 'options']">
+    <spk-radio />
+    Options
+  </div>
+</spk-stepper>
+
+<section>
+  <router-outlet></router-outlet>
+</section>

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

@@ -0,0 +1,15 @@
+@use '@sparkle-ui/core/styles/helpers' as *;
+
+:host {
+  display: block;
+}
+
+spk-stepper {
+  max-width: p2r(500);
+  margin: p2r(40) auto;
+}
+
+section {
+  max-width: p2r(500);
+  margin: 0 auto p2r(40);
+}

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

@@ -0,0 +1,33 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ActivatedRoute, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { SparkleIconComponent, SparkleRadioComponent, SparkleStepperComponent } from '@sparkle-ui/core';
+import StatusBarComponent from '../core/components/status-bar/status-bar.component';
+import { CreateEditBackupState } from './create-edit-backup.state';
+
+@Component({
+  selector: 'app-create-edit-backup',
+  standalone: true,
+  imports: [
+    RouterOutlet,
+    RouterLink,
+    RouterLinkActive,
+    StatusBarComponent,
+    SparkleRadioComponent,
+    SparkleStepperComponent,
+    SparkleIconComponent,
+  ],
+  templateUrl: './create-edit-backup.component.html',
+  styleUrl: './create-edit-backup.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [CreateEditBackupState],
+})
+export default class CreateEditBackupComponent {
+  #route = inject(ActivatedRoute);
+  #createEditBackupState = inject(CreateEditBackupState);
+
+  backupId = this.#createEditBackupState.backupId;
+
+  ngOnInit() {
+    this.#createEditBackupState.init(this.#route.snapshot.params['id']);
+  }
+}