File

projects/cobbler-frontend/src/app/items/snippet/edit/snippet-edit.component.ts

Implements

OnInit OnDestroy

Metadata

Index

Properties
Methods

Constructor

constructor(route: ActivatedRoute, userService: UserService, cobblerApiService: CobblerApiService, _snackBar: MatSnackBar, router: Router, dialog: MatDialog)
Parameters :
Name Type Optional
route ActivatedRoute No
userService UserService No
cobblerApiService CobblerApiService No
_snackBar MatSnackBar No
router Router No
dialog MatDialog No

Methods

cancelEdit
cancelEdit()
Returns : void
copySnippet
copySnippet()
Returns : void
editSnippet
editSnippet()
Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void
ngOnInit
ngOnInit()
Returns : void
refreshData
refreshData()
Returns : void
removeSnippet
removeSnippet()
Returns : void
saveSnippet
saveSnippet()
Returns : void

Properties

Private Readonly _formBuilder
Default value : inject(FormBuilder)
content
Type : string
isEditMode
Type : boolean
Default value : false
name
Type : string
Private ngUnsubscribe
Default value : new Subject<void>()
snippetFormGroup
Default value : this._formBuilder.group({ content: new FormControl({ value: '', disabled: true }), })
import { Component, Inject, inject, OnDestroy, OnInit } from '@angular/core';
import {
  FormBuilder,
  FormControl,
  FormsModule,
  ReactiveFormsModule,
} from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatOptionModule } from '@angular/material/core';
import { MatDialog } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { ActivatedRoute, Router } from '@angular/router';
import { CobblerApiService } from 'cobbler-api';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { DialogBoxConfirmCancelEditComponent } from '../../../common/dialog-box-confirm-cancel-edit/dialog-box-confirm-cancel-edit.component';
import { DialogItemCopyComponent } from '../../../common/dialog-item-copy/dialog-item-copy.component';
import { UserService } from '../../../services/user.service';
import Utils from '../../../utils';

@Component({
  selector: 'cobbler-snippet-edit',
  standalone: true,
  imports: [
    FormsModule,
    MatButtonModule,
    MatCheckboxModule,
    MatFormFieldModule,
    MatIconModule,
    MatInputModule,
    MatOptionModule,
    MatSelectModule,
    MatTooltipModule,
    ReactiveFormsModule,
  ],
  templateUrl: './snippet-edit.component.html',
  styleUrl: './snippet-edit.component.scss',
})
export class SnippetEditComponent implements OnInit, OnDestroy {
  // Unsubscribe
  private ngUnsubscribe = new Subject<void>();

  // Form
  name: string;
  content: string;
  private readonly _formBuilder = inject(FormBuilder);
  snippetFormGroup = this._formBuilder.group({
    content: new FormControl({ value: '', disabled: true }),
  });
  isEditMode: boolean = false;

  constructor(
    private route: ActivatedRoute,
    private userService: UserService,
    private cobblerApiService: CobblerApiService,
    private _snackBar: MatSnackBar,
    private router: Router,
    @Inject(MatDialog) readonly dialog: MatDialog,
  ) {
    this.name = this.route.snapshot.paramMap.get('name');
  }

  ngOnInit(): void {
    this.refreshData();
  }

  ngOnDestroy(): void {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }

  refreshData(): void {
    this.cobblerApiService
      .read_autoinstall_snippet(this.name, this.userService.token)
      .subscribe({
        next: (value) => {
          this.content = value;
          this.snippetFormGroup.controls.content.setValue(
            Utils.toHTML(this.content),
          );
        },
        error: (error) => {
          // HTML encode the error message since it originates from XML
          this._snackBar.open(Utils.toHTML(error.message), 'Close');
        },
      });
  }

  removeSnippet(): void {
    this.cobblerApiService
      .remove_autoinstall_snippet(this.name, this.userService.token)
      .subscribe({
        next: (value) => {
          if (value) {
            this.router.navigate(['/items', 'snippet']);
            return;
          }
          // HTML encode the error message since it originates from XML
          this._snackBar.open(
            'Delete failed! Check server logs for more information.',
            'Close',
          );
        },
        error: (error) => {
          // HTML encode the error message since it originates from XML
          this._snackBar.open(Utils.toHTML(error.message), 'Close');
        },
      });
  }

  editSnippet(): void {
    this.isEditMode = true;
    this.snippetFormGroup.enable();
  }

  cancelEdit(): void {
    const dialogRef = this.dialog.open(DialogBoxConfirmCancelEditComponent, {
      data: {
        name: this.name,
      },
    });

    dialogRef.afterClosed().subscribe((dialogResult) => {
      if (dialogResult === false) {
        // False means the user want's to continue
        return;
      }
      this.isEditMode = false;
      this.snippetFormGroup.disable();
      this.refreshData();
    });
  }

  copySnippet(): void {
    const dialogRef = this.dialog.open(DialogItemCopyComponent, {
      data: {
        itemType: 'Snippet',
        itemName: this.name,
        itemUid: '',
      },
    });

    dialogRef.afterClosed().subscribe((newItemName) => {
      if (newItemName === undefined) {
        // Cancel means we don't need to rename the file
        return;
      }
      this.cobblerApiService
        .write_autoinstall_snippet(
          newItemName,
          this.content,
          this.userService.token,
        )
        .pipe(takeUntil(this.ngUnsubscribe))
        .subscribe({
          next: (value) => {
            this.router.navigate(['/items', 'snippet', newItemName]);
          },
          error: (error) => {
            // HTML encode the error message since it originates from XML
            this._snackBar.open(Utils.toHTML(error.message), 'Close');
          },
        });
    });
  }

  saveSnippet(): void {
    this.cobblerApiService
      .write_autoinstall_snippet(
        this.name,
        this.snippetFormGroup.controls.content.value,
        this.userService.token,
      )
      .subscribe({
        next: (value) => {
          this.isEditMode = false;
          this.snippetFormGroup.disable();
          this.refreshData();
        },
        error: (error) => {
          // HTML encode the error message since it originates from XML
          this._snackBar.open(Utils.toHTML(error.message), 'Close');
        },
      });
  }
}
<div class="title-table">
  <div class="title-row">
    <h1 class="title title-cell-text">Name: {{ name }}</h1>
    <span class="title-cell-button">
      <button
        mat-icon-button
        [disabled]="isEditMode"
        (click)="this.refreshData()"
        matTooltip="Refresh data"
      >
        <mat-icon>refresh</mat-icon>
      </button>
    </span>
    <span class="title-cell-button">
      <button
        mat-icon-button
        [disabled]="isEditMode"
        (click)="this.copySnippet()"
        matTooltip="Copy"
      >
        <mat-icon>content_copy</mat-icon>
      </button>
    </span>
    <span class="title-cell-button">
      <button
        mat-icon-button
        [disabled]="isEditMode"
        (click)="this.editSnippet()"
        matTooltip="Edit"
      >
        <mat-icon>edit</mat-icon>
      </button>
    </span>
    <span class="title-cell-button">
      <button
        mat-icon-button
        [disabled]="isEditMode"
        (click)="this.removeSnippet()"
        matTooltip="Delete"
      >
        <mat-icon>delete</mat-icon>
      </button>
    </span>
    @if (isEditMode) {
      <span class="title-cell-button">
        <button
          mat-icon-button
          (click)="this.cancelEdit()"
          matTooltip="Cancel edit"
        >
          <mat-icon>cancel</mat-icon>
        </button>
      </span>
    }
  </div>
</div>

<form class="form-replicate" [formGroup]="snippetFormGroup">
  <mat-form-field class="form-field-full-width">
    <mat-label>Template Content</mat-label>
    <textarea matInput formControlName="content"></textarea>
  </mat-form-field>
  @if (isEditMode) {
    <button mat-button (click)="saveSnippet()">Save Snippet</button>
  }
</form>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""