projects/cobbler-frontend/src/app/items/file/overview/file-overview.component.ts
OnInit
OnDestroy
AfterViewInit
| selector | cobbler-file-overview |
| imports |
MatCell
MatCellDef
MatColumnDef
MatHeaderCell
MatHeaderRow
MatHeaderRowDef
MatIcon
MatIconButton
MatMenu
MatMenuItem
MatRow
MatRowDef
MatTable
MatMenuTrigger
MatHeaderCellDef
MatTooltip
MatPaginatorModule
MatInputModule
MatFormFieldModule
MatSort
|
| templateUrl | ./file-overview.component.html |
| styleUrl | ./file-overview.component.scss |
Properties |
|
Methods |
| addFile |
addFile()
|
|
Returns :
void
|
| applyFilter | ||||||
applyFilter(event: Event)
|
||||||
|
Parameters :
Returns :
void
|
| deleteFile |
deleteFile(uid: string, name: string)
|
|
Returns :
void
|
| ngAfterViewInit |
ngAfterViewInit()
|
|
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| renameFile |
renameFile(uid: string, name: string)
|
|
Returns :
void
|
| Private retrieveFiles |
retrieveFiles()
|
|
Returns :
void
|
| showDistro |
showDistro(uid: string, name: string)
|
|
Returns :
void
|
| Private _snackBar |
Type : unknown
|
Default value : inject(MatSnackBar)
|
| Private cobblerApiService |
Type : unknown
|
Default value : inject(CobblerApiService)
|
| dataSource |
Type : unknown
|
Default value : new MatTableDataSource<File>([])
|
| Readonly dialog |
Type : unknown
|
Default value : inject<MatDialog>(MatDialog)
|
| displayedColumns |
Type : string[]
|
Default value : ['name', 'action', 'path', 'actions']
|
| Private ngUnsubscribe |
Type : unknown
|
Default value : new Subject<void>()
|
| paginator |
Type : MatPaginator
|
Decorators :
@ViewChild(MatPaginator)
|
| Private router |
Type : unknown
|
Default value : inject(Router)
|
| sort |
Type : MatSort
|
Decorators :
@ViewChild(MatSort)
|
| table |
Type : MatTable<File>
|
Decorators :
@ViewChild(MatTable)
|
| userService |
Type : unknown
|
Default value : inject(UserService)
|
import {
AfterViewInit,
Component,
OnDestroy,
OnInit,
ViewChild,
inject,
} from '@angular/core';
import { MatIconButton } from '@angular/material/button';
import { MatDialog } from '@angular/material/dialog';
import { MatIcon } from '@angular/material/icon';
import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
import { MatSnackBar } from '@angular/material/snack-bar';
import {
MatCell,
MatCellDef,
MatColumnDef,
MatHeaderCell,
MatHeaderCellDef,
MatHeaderRow,
MatHeaderRowDef,
MatRow,
MatRowDef,
MatTable,
MatTableDataSource,
} from '@angular/material/table';
import { MatTooltip } from '@angular/material/tooltip';
import { Router, RouterLink } from '@angular/router';
import { CobblerApiService, File } 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 { FileCreateComponent } from '../create/file-create.component';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSort } from '@angular/material/sort';
@Component({
selector: 'cobbler-file-overview',
imports: [
MatCell,
MatCellDef,
MatColumnDef,
MatHeaderCell,
MatHeaderRow,
MatHeaderRowDef,
MatIcon,
MatIconButton,
MatMenu,
MatMenuItem,
MatRow,
MatRowDef,
MatTable,
MatMenuTrigger,
MatHeaderCellDef,
MatTooltip,
MatPaginatorModule,
MatInputModule,
MatFormFieldModule,
MatSort,
],
templateUrl: './file-overview.component.html',
styleUrl: './file-overview.component.scss',
})
export class FileOverviewComponent implements OnInit, OnDestroy, AfterViewInit {
userService = inject(UserService);
private cobblerApiService = inject(CobblerApiService);
private _snackBar = inject(MatSnackBar);
private router = inject(Router);
readonly dialog = inject<MatDialog>(MatDialog);
// Unsubscribe
private ngUnsubscribe = new Subject<void>();
// Table
displayedColumns: string[] = ['name', 'action', 'path', 'actions'];
dataSource = new MatTableDataSource<File>([]);
@ViewChild(MatTable) table!: MatTable<File>;
@ViewChild(MatPaginator) paginator!: MatPaginator;
@ViewChild(MatSort) sort!: MatSort;
ngOnInit(): void {
this.retrieveFiles();
}
ngAfterViewInit(): void {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
ngOnDestroy(): void {
this.ngUnsubscribe.next();
this.ngUnsubscribe.complete();
}
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
private retrieveFiles(): void {
this.cobblerApiService
.get_files()
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe({
next: (value) => {
this.dataSource.data = value;
},
error: (error) => {
// HTML encode the error message since it originates from XML
this._snackBar.open(Utils.toHTML(error.message), 'Close');
},
});
}
addFile(): void {
const dialogRef = this.dialog.open(FileCreateComponent, { width: '40%' });
dialogRef.afterClosed().subscribe((result) => {
if (typeof result === 'string') {
this.router.navigate(['/items', 'file', result]);
}
});
}
showDistro(uid: string, name: string): void {
this.router.navigate(['/items', 'file', name]);
}
renameFile(uid: string, name: string): void {
const dialogRef = this.dialog.open(DialogItemRenameComponent, {
data: {
itemType: 'Repository',
itemName: name,
itemUid: uid,
},
});
dialogRef.afterClosed().subscribe((newItemName) => {
if (newItemName === undefined) {
// Cancel means we don't need to rename the file
return;
}
this.cobblerApiService
.get_file_handle(name, this.userService.token)
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe({
next: (fileHandle) => {
this.cobblerApiService
.rename_file(fileHandle, newItemName, this.userService.token)
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe({
next: (value) => {
this.retrieveFiles();
},
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');
},
});
});
}
deleteFile(uid: string, name: string): void {
this.cobblerApiService
.remove_file(name, this.userService.token, false)
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe({
next: (value) => {
this.retrieveFiles();
},
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">FILES</h1>
<span class="title-cell-button">
<button mat-icon-button (click)="this.addFile()" matTooltip="Add File">
<mat-icon>add</mat-icon>
</button></span
>
</div>
</div>
<mat-form-field appearance="fill">
<mat-label>Filter</mat-label>
<input
matInput
(keyup)="applyFilter($event)"
placeholder="Ex. download_config_files_deb"
#input
/>
</mat-form-field>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let element">
<a (click)="showDistro(element.uid, element.name)"
>{{ element.name }}
<mat-icon class="link-icon" aria-hidden="true"
>arrow_outward</mat-icon
></a
>
</td>
</ng-container>
<!-- Action Column -->
<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef>Action</th>
<td mat-cell *matCellDef="let element">{{ element.action }}</td>
</ng-container>
<!-- Path Column -->
<ng-container matColumnDef="path">
<th mat-header-cell *matHeaderCellDef>Path</th>
<td mat-cell *matCellDef="let element">{{ element.path }}</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)="renameFile(element.uid, element.name)">
<mat-icon>edit</mat-icon>
<span>Rename</span>
</button>
<button mat-menu-item (click)="deleteFile(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>
<mat-paginator
[length]="100"
[pageSize]="10"
[pageSizeOptions]="[5, 10, 25, 100]"
aria-label="Select page"
>
</mat-paginator>