RouterOutlet
MatListModule
+ MatButton
+ FormsModule
+ MatCheckbox
+ MatFormField
+ MatIcon
+ MatIconButton
+ MatInput
+ MatPrefix
+ MatSuffix
+ MatLabel
+ MatInputModule
+ MatFormFieldModule
+ ReactiveFormsModule
+ Properties+ |
+
+
|
+
+ Methods+ |
+
+
|
+
+ Accessors+ |
+
+
|
+
constructor()
+constructor(userService: UserService, cobblerApiService: CobblerApiService, _snackBar: MatSnackBar)
| Name | +Type | +Optional | +
| userService | + +
+ UserService
+ |
+
+ + No + | + +
| cobblerApiService | + +
+ CobblerApiService
+ |
+
+ + No + | + +
| _snackBar | + +
+ MatSnackBar
+ |
+
+ + No + | + +
| + + + addNewRepoFG + + + | +
+addNewRepoFG()
+ |
+
| + + | +
|
+
+
+ Returns :
+ void
+
+ |
+
| + + + removeNewRepoFG + + + | +||||||
+removeNewRepoFG(index: number)
+ |
+ ||||||
| + + | +||||||
|
+
+
+ Parameters :
+
+
+
+ Returns :
+ void
+
+
+
+
+ |
+
| + + + runReposync + + + | +
+runReposync()
+ |
+
| + + | +
|
+
+
+ Returns :
+ void
+
+ |
+
| + + + toHTML + + + | +||||||
+toHTML(input: string)
+ |
+ ||||||
| + + | +||||||
|
+
+
+ Parameters :
+
+
+
+ Returns :
+ any
+
+
+
+
+ |
+
| + + + Private + Readonly + _formBuilder + + + | +
+ Default value : inject(FormBuilder)
+ |
+
| + + | +
| + + + repositoryFormArray + + + | +
+ Default value : new FormArray([])
+ |
+
| + + | +
| + + + reposyncFormGroup + + + | +
+ Default value : this._formBuilder.group({
+ repoName: this.repositoryFormArray,
+ reposyncNoFail: false,
+ reposyncTries: 3,
+ })
+ |
+
| + + | +
| + + + Public + userService + + + | +
+ Type : UserService
+
+ |
+
| + + | +
| + + newRepositoryFormGroup + | +
+ getnewRepositoryFormGroup()
+ |
+
| + + | +
| + + repositoryArrayFGControls + | +
+ getrepositoryArrayFGControls()
+ |
+
| + + | +
import { Component } from '@angular/core';
-import { MatListModule } from '@angular/material/list';
-import { RouterOutlet } from '@angular/router';
+ import {Component, inject} from '@angular/core';
+import {MatListModule} from '@angular/material/list';
+import {RouterOutlet} from '@angular/router';
+import {UserService} from "../../services/user.service";
+import {CobblerApiService} from "cobbler-api";
+import {MatSnackBar} from "@angular/material/snack-bar";
+import {MatButton, MatIconButton} from "@angular/material/button";
+import {BackgroundReposyncOptions} from "cobbler-api";
+import {
+ FormArray,
+ FormBuilder,
+ FormControl,
+ FormGroup,
+ FormsModule,
+ ReactiveFormsModule,
+ Validators
+} from "@angular/forms";
+import {MatCheckbox} from "@angular/material/checkbox";
+import {MatFormField, MatFormFieldModule, MatLabel, MatPrefix, MatSuffix} from "@angular/material/form-field";
+import {MatIcon} from "@angular/material/icon";
+import {MatInput, MatInputModule} from "@angular/material/input";
@Component({
selector: 'cobbler-repo-sync',
templateUrl: './repo-sync.component.html',
styleUrls: ['./repo-sync.component.css'],
standalone: true,
- imports: [RouterOutlet, MatListModule],
+ imports: [
+ RouterOutlet,
+ MatListModule,
+ MatButton,
+ FormsModule,
+ MatCheckbox,
+ MatFormField,
+ MatIcon,
+ MatIconButton,
+ MatInput,
+ MatPrefix,
+ MatSuffix,
+ MatLabel,
+ MatInputModule,
+ MatFormFieldModule,
+ ReactiveFormsModule,
+ ],
})
export class RepoSyncComponent {
- constructor() {}
+ private readonly _formBuilder = inject(FormBuilder);
+ repositoryFormArray = new FormArray([]);
+
+ reposyncFormGroup = this._formBuilder.group({
+ repoName: this.repositoryFormArray,
+ reposyncNoFail: false,
+ reposyncTries: 3,
+ });
+ constructor(
+ public userService: UserService,
+ private cobblerApiService: CobblerApiService,
+ private _snackBar: MatSnackBar
+ ) {
+ }
+
+ get newRepositoryFormGroup(): FormGroup {
+ return new FormGroup({
+ repoName: new FormControl(null, [Validators.required]),
+ });
+ }
+
+ get repositoryArrayFGControls(): FormGroup[] {
+ return this.repositoryFormArray.controls as FormGroup[];
+ }
+
+ addNewRepoFG(): void {
+ this.repositoryFormArray.push(this.newRepositoryFormGroup);
+ }
+
+ removeNewRepoFG(index: number): void {
+ this.repositoryFormArray.removeAt(index);
+ }
+
+ runReposync(): void {
+ let repoNames: Array<string> = []
+ for (let control of this.reposyncFormGroup.controls.repoName.controls) {
+ if (control instanceof FormGroup) {
+ repoNames.push(control.value.repoName)
+ }
+ }
+ const reposyncOptions: BackgroundReposyncOptions = {
+ repos: repoNames,
+ only: "",
+ tries: this.reposyncFormGroup.controls.reposyncTries.value,
+ nofail: this.reposyncFormGroup.controls.reposyncNoFail.value,
+ }
+ this.cobblerApiService.background_reposync(reposyncOptions, this.userService.token).subscribe(
+ value => {
+ // TODO
+ console.log(value)
+ },
+ error => {
+ // HTML encode the error message since it originates from XML
+ this._snackBar.open(this.toHTML(error.message), 'Close');
+ })
+ }
+
+ toHTML(input: string): any {
+ // FIXME: Deduplicate method
+ return new DOMParser().parseFromString(input, 'text/html').documentElement.textContent;
+ }
}
<div class="right-column" id="dataScreen">
- <router-outlet></router-outlet>
- <div class="RepoSync-div">
- <h1 class="title">SYNC REPO</h1>
- <div class="list-group">
- <mat-list>
- <mat-list-item>data 01</mat-list-item>
- <mat-list-item>data 02</mat-list-item>
- <mat-list-item>data 03</mat-list-item>
- </mat-list>
+ <h1 class="title">SYNC REPOSITORIES</h1>
+
+<form class="systems-sync-section" [formGroup]="reposyncFormGroup">
+ <button mat-button (click)="addNewRepoFG()">
+ @if (repositoryArrayFGControls.length === 0) {
+ Sync specific Repositories
+ }
+ @if (repositoryArrayFGControls.length > 0) {
+ Add repository
+ }
+ </button>
+ @for (fg of repositoryArrayFGControls; track fg; let i = $index) {
+ <div formArrayName="repoName">
+ <div [formGroup]="fg">
+ <mat-form-field>
+ <span matTextPrefix>{{ i + 1 }}. </span>
+ <input matInput required type="text" formControlName="repoName" placeholder="Repository Name"/>
+ <button mat-icon-button matSuffix (click)="removeNewRepoFG(i)"><mat-icon>remove</mat-icon></button>
+ @if (reposyncFormGroup.controls.repoName.controls[i].hasError('required')) {
+ <mat-error>Repository name is <strong>required</strong></mat-error>
+ }
+ </mat-form-field>
+ </div>
</div>
- </div>
-</div>
+ } @empty {
+ <p>Syncing All Repositories</p>
+ }
+ <mat-form-field>
+ <mat-label>Tries</mat-label>
+ <input matInput formControlName="reposyncTries" placeholder="3" type="number" />
+ </mat-form-field>
+ <mat-checkbox formControlName="reposyncNoFail">No Fail</mat-checkbox>
+</form>
+<button mat-button (click)="runReposync()">RUN</button>