projects/cobbler-frontend/src/app/items/system/create/system-create.component.ts
OnDestroy
selector | cobbler-system-create |
standalone | true |
imports |
MatButtonModule
MatDialogModule
ReactiveFormsModule
MatInputModule
|
templateUrl | ./system-create.component.html |
styleUrl | ./system-create.component.scss |
Properties |
|
Methods |
constructor(userService: UserService, cobblerApiService: CobblerApiService, _snackBar: MatSnackBar)
|
||||||||||||
Parameters :
|
createSystem |
createSystem()
|
Returns :
void
|
ngOnDestroy |
ngOnDestroy()
|
Returns :
void
|
Private Readonly _formBuilder |
Default value : inject(FormBuilder)
|
Readonly dialogRef |
Default value : inject(MatDialogRef<SystemCreateComponent>)
|
Private ngUnsubscribe |
Default value : new Subject<void>()
|
systemCreateFormGroup |
Default value : this._formBuilder.group({
name: [''],
profile: [''],
})
|
Public userService |
Type : 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-system-create',
standalone: true,
imports: [
MatButtonModule,
MatDialogModule,
ReactiveFormsModule,
MatInputModule,
],
templateUrl: './system-create.component.html',
styleUrl: './system-create.component.scss',
})
export class SystemCreateComponent implements OnDestroy {
// Dialog
readonly dialogRef = inject(MatDialogRef<SystemCreateComponent>);
// Form
private readonly _formBuilder = inject(FormBuilder);
systemCreateFormGroup = this._formBuilder.group({
name: [''],
profile: [''],
});
// Unsubscribe
private ngUnsubscribe = new Subject<void>();
constructor(
public userService: UserService,
private cobblerApiService: CobblerApiService,
private _snackBar: MatSnackBar,
) {}
ngOnDestroy(): void {
this.ngUnsubscribe.next();
this.ngUnsubscribe.complete();
}
createSystem(): void {
this.cobblerApiService
.new_system(this.userService.token)
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe((systemHandle) => {
this.cobblerApiService
.modify_system(
systemHandle,
'name',
this.systemCreateFormGroup.get('name').value,
this.userService.token,
)
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe(() => {
this.cobblerApiService
.modify_system(
systemHandle,
'profile',
this.systemCreateFormGroup.get('profile').value,
this.userService.token,
)
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe({
next: () => {
this.cobblerApiService
.save_system(systemHandle, this.userService.token, 'new')
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe({
next: () => {
this._snackBar.dismiss();
this.dialogRef.close(
this.systemCreateFormGroup.get('name').value,
);
},
error: (err) => {
// HTML encode the error message since it originates from XML
this._snackBar.open(Utils.toHTML(err.message), 'Close');
},
});
},
});
});
});
}
}
<h1 mat-dialog-title>Create System</h1>
<div mat-dialog-content>
<form [formGroup]="systemCreateFormGroup">
<mat-form-field>
<mat-label>Name</mat-label>
<input
matInput
required
cdkFocusInitial
type="text"
formControlName="name"
/>
</mat-form-field>
<mat-form-field>
<mat-label>Profile</mat-label>
<input matInput required type="text" formControlName="profile" />
</mat-form-field>
</form>
<div mat-dialog-actions>
<button mat-button (click)="createSystem()">Save System</button>
<button mat-button [mat-dialog-close]="false">Cancel</button>
</div>
</div>