projects/cobbler-frontend/src/app/items/template/create/template-create.component.ts

Implements

OnDestroy

Metadata

Relationships

Used by

No results matching.

Depends on

Index

Properties
Methods

Methods

createTemplate
createTemplate()
Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void

Properties

Private Readonly _formBuilder
Type : unknown
Default value : inject(FormBuilder)
Private _snackBar
Type : unknown
Default value : inject(MatSnackBar)
Private cobblerApiService
Type : unknown
Default value : inject(CobblerApiService)
Readonly dialogRef
Type : unknown
Default value : inject(MatDialogRef<TemplateCreateComponent>)
Private ngUnsubscribe
Type : unknown
Default value : new Subject<void>()
templateCreateFormGroup
Type : unknown
Default value : this._formBuilder.group({ name: [''], content: [''], })
userService
Type : unknown
Default value : inject(UserService)
import { Component, inject, OnDestroy } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { MatInputModule } from '@angular/material/input';
import { MatSnackBar } from '@angular/material/snack-bar';
import { CobblerApiService } from 'cobbler-api';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { UserService } from '../../../services/user.service';
import Utils from '../../../utils';

@Component({
  selector: 'cobbler-template-create',
  imports: [
    MatButtonModule,
    MatDialogModule,
    ReactiveFormsModule,
    MatInputModule,
  ],
  templateUrl: './template-create.component.html',
  styleUrl: './template-create.component.scss',
})
export class TemplateCreateComponent implements OnDestroy {
  userService = inject(UserService);
  private cobblerApiService = inject(CobblerApiService);
  private _snackBar = inject(MatSnackBar);

  // Dialog
  readonly dialogRef = inject(MatDialogRef<TemplateCreateComponent>);

  // Form
  private readonly _formBuilder = inject(FormBuilder);
  templateCreateFormGroup = this._formBuilder.group({
    name: [''],
    content: [''],
  });

  // Unsubscribe
  private ngUnsubscribe = new Subject<void>();

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

  createTemplate(): void {
    this.cobblerApiService
      .write_autoinstall_template(
        this.templateCreateFormGroup.get('name').value,
        this.templateCreateFormGroup.get('content').value,
        this.userService.token,
      )
      .pipe(takeUntil(this.ngUnsubscribe))
      .subscribe({
        next: () => {
          this.dialogRef.close(this.templateCreateFormGroup.get('name').value);
        },
        error: (err) => {
          // HTML encode the error message since it originates from XML
          this._snackBar.open(
            Utils.toHTML(err.message),
            $localize`:@@snackbar.action.close:Close`,
          );
        },
      });
  }
}
<h1 mat-dialog-title i18n="@@template.create.title">Create Template</h1>
<div mat-dialog-content>
  <form [formGroup]="templateCreateFormGroup">
    <mat-form-field>
      <mat-label i18n="@@template.create.field.name">Name</mat-label>
      <input
        matInput
        required
        cdkFocusInitial
        type="text"
        formControlName="name"
      />
    </mat-form-field>
    <mat-form-field class="form-field-full-width">
      <mat-label i18n="@@template.create.field.content"
        >Template Content</mat-label
      >
      <textarea matInput formControlName="content"></textarea>
    </mat-form-field>
  </form>
  <div mat-dialog-actions>
    <button
      mat-button
      data-testid="item-create-submit"
      (click)="createTemplate()"
      i18n="@@template.create.save-button"
    >
      Save Template
    </button>
    <button mat-button [mat-dialog-close]="false" i18n="@@button.cancel">
      Cancel
    </button>
  </div>
</div>

./template-create.component.scss

:host {
  width: 100%;
}

:host ::ng-deep mat-form-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""