File

projects/cobbler-frontend/src/app/items/distro/overview/distros-overview.component.ts

Implements

OnInit OnDestroy

Metadata

Index

Properties
Methods

Constructor

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

Methods

addDistro
addDistro()
Returns : void
deleteDistro
deleteDistro(uid: string, name: string)
Parameters :
Name Type Optional
uid string No
name string No
Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void
ngOnInit
ngOnInit()
Returns : void
renameDistro
renameDistro(uid: string, name: string)
Parameters :
Name Type Optional
uid string No
name string No
Returns : void
Private retrieveDistros
retrieveDistros()
Returns : void
showDistro
showDistro(uid: string, name: string)
Parameters :
Name Type Optional
uid string No
name string No
Returns : void

Properties

dataSource
Type : Array<Distro>
Default value : []
displayedColumns
Type : string[]
Default value : ['name', 'breed', 'os_version', 'actions']
Private ngUnsubscribe
Default value : new Subject<void>()
table
Type : MatTable<Distro>
Decorators :
@ViewChild(MatTable)
Public userService
Type : UserService
import { Component, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatDialog } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatTable, MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { Router } from '@angular/router';
import { CobblerApiService, Distro } from 'cobbler-api';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { DialogItemRenameComponent } from '../../../common/dialog-item-rename/dialog-item-rename.component';
import { UserService } from '../../../services/user.service';
import Utils from '../../../utils';
import { DistroCreateComponent } from '../create/distro-create.component';

@Component({
  selector: 'cobbler-distro-overview',
  templateUrl: './distros-overview.component.html',
  styleUrls: ['./distros-overview.component.scss'],
  standalone: true,
  imports: [
    MatButtonModule,
    MatTableModule,
    MatIconModule,
    MatMenuModule,
    MatTooltipModule,
  ],
})
export class DistrosOverviewComponent implements OnInit, OnDestroy {
  // Unsubscribe
  private ngUnsubscribe = new Subject<void>();

  // Table
  displayedColumns: string[] = ['name', 'breed', 'os_version', 'actions'];
  dataSource: Array<Distro> = [];

  @ViewChild(MatTable) table: MatTable<Distro>;

  constructor(
    public userService: UserService,
    private cobblerApiService: CobblerApiService,
    private _snackBar: MatSnackBar,
    private router: Router,
    @Inject(MatDialog) readonly dialog: MatDialog,
  ) {}

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

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

  private retrieveDistros(): void {
    this.cobblerApiService
      .get_distros()
      .pipe(takeUntil(this.ngUnsubscribe))
      .subscribe({
        next: (value) => {
          this.dataSource = value;
        },
        error: (error) => {
          // HTML encode the error message since it originates from XML
          this._snackBar.open(Utils.toHTML(error.message), 'Close');
        },
      });
  }

  addDistro(): void {
    const dialogRef = this.dialog.open(DistroCreateComponent, { width: '40%' });
    dialogRef.afterClosed().subscribe((result) => {
      if (typeof result === 'string') {
        this.router.navigate(['/items', 'distro', result]);
      }
    });
  }

  showDistro(uid: string, name: string): void {
    this.router.navigate(['/items', 'distro', name]);
  }

  renameDistro(uid: string, name: string): void {
    const dialogRef = this.dialog.open(DialogItemRenameComponent, {
      data: {
        itemType: 'Distro',
        itemName: name,
        itemUid: uid,
      },
    });

    dialogRef.afterClosed().subscribe((newItemName) => {
      if (newItemName === undefined) {
        // Cancel means we don't need to rename the distro
        return;
      }
      this.cobblerApiService
        .get_distro_handle(name, this.userService.token)
        .pipe(takeUntil(this.ngUnsubscribe))
        .subscribe({
          next: (distroHandle) => {
            this.cobblerApiService
              .rename_distro(distroHandle, newItemName, this.userService.token)
              .pipe(takeUntil(this.ngUnsubscribe))
              .subscribe({
                next: (value) => {
                  this.retrieveDistros();
                },
                error: (error) => {
                  // HTML encode the error message since it originates from XML
                  this._snackBar.open(Utils.toHTML(error.message), 'Close');
                },
              });
          },
          error: (error) => {
            // HTML encode the error message since it originates from XML
            this._snackBar.open(Utils.toHTML(error.message), 'Close');
          },
        });
    });
  }

  deleteDistro(uid: string, name: string): void {
    this.cobblerApiService
      .remove_distro(name, this.userService.token, false)
      .pipe(takeUntil(this.ngUnsubscribe))
      .subscribe({
        next: (value) => {
          this.retrieveDistros();
        },
        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">DISTROS</h1>
    <span class="title-cell-button">
      <button
        mat-icon-button
        (click)="this.addDistro()"
        matTooltip="Add Distribution"
      >
        <mat-icon>add</mat-icon>
      </button></span
    >
  </div>
</div>

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>Name</th>
    <td mat-cell *matCellDef="let element">{{ element.name }}</td>
  </ng-container>

  <!-- Breed Column -->
  <ng-container matColumnDef="breed">
    <th mat-header-cell *matHeaderCellDef>Breed</th>
    <td mat-cell *matCellDef="let element">{{ element.breed }}</td>
  </ng-container>

  <!-- OsVersion Column -->
  <ng-container matColumnDef="os_version">
    <th mat-header-cell *matHeaderCellDef>Operating System Version</th>
    <td mat-cell *matCellDef="let element">{{ element.os_version }}</td>
  </ng-container>

  <ng-container matColumnDef="actions">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let element">
      <button mat-icon-button [matMenuTriggerFor]="menu">
        <mat-icon>more_vert</mat-icon>
      </button>
      <mat-menu #menu="matMenu">
        <button mat-menu-item (click)="showDistro(element.uid, element.name)">
          <mat-icon>visibility</mat-icon>
          <span>Show details</span>
        </button>
        <button mat-menu-item (click)="renameDistro(element.uid, element.name)">
          <mat-icon>edit</mat-icon>
          <span>Rename</span>
        </button>
        <button mat-menu-item (click)="deleteDistro(element.uid, element.name)">
          <mat-icon>delete</mat-icon>
          <span>Delete</span>
        </button>
      </mat-menu>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>

./distros-overview.component.scss

.title-table {
  display: table;
  width: 100%;
}

.title-row {
  display: table-cell;
  width: 100%;
}

.title-cell-text {
  display: table-cell;
  width: 100%;
  vertical-align: middle;
}

.title-cell-button {
  display: table-cell;
}

.form-replicate {
  min-width: 150px;
  max-width: 600px;
  width: 100%;
}

.form-field-full-width {
  width: 100%;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""