Remove SCSS files related to components, layouts, and Bootstrap variables no longer in use
This commit is contained in:
@@ -0,0 +1,24 @@
|
||||
|
||||
<!-- html -->
|
||||
<nav aria-label="Breadcrumb" class="breadcrumb">
|
||||
@let breadcrumbs = breadcrumbs$ | async;
|
||||
<a mat-button [routerLink]="['/']">
|
||||
<mat-icon>home</mat-icon>
|
||||
</a>
|
||||
@if (breadcrumbs) {
|
||||
@for (bc of breadcrumbs; track bc.url; let last = $last) {
|
||||
|
||||
@if (!last) {
|
||||
<a mat-button [routerLink]="bc.url">
|
||||
<mat-icon class="sep">chevron_right</mat-icon>
|
||||
{{ bc.label }}</a>
|
||||
} @else {
|
||||
<a mat-button >
|
||||
<mat-icon class="sep">chevron_right</mat-icon>
|
||||
{{ bc.label }}</a>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</nav>
|
||||
<mat-divider></mat-divider>
|
||||
@@ -0,0 +1,15 @@
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-bottom: inherit;
|
||||
}
|
||||
.breadcrumb .sep {
|
||||
font-size: 16px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.breadcrumb a[mat-button] {
|
||||
min-width: auto;
|
||||
padding: 0 4px;
|
||||
text-transform: none;
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { BreadcrumbsComponent } from './breadcrumbs.component';
|
||||
|
||||
describe('BreadcrumbsComponent', () => {
|
||||
let component: BreadcrumbsComponent;
|
||||
let fixture: ComponentFixture<BreadcrumbsComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [BreadcrumbsComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(BreadcrumbsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,58 @@
|
||||
import {Component, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA} from '@angular/core';
|
||||
import {ActivatedRoute, NavigationEnd, Router, RouterLink} from '@angular/router';
|
||||
import {MatButton} from '@angular/material/button';
|
||||
import {AsyncPipe, NgForOf, NgIf} from '@angular/common';
|
||||
import {MatIcon} from '@angular/material/icon';
|
||||
import {Observable, startWith} from 'rxjs';
|
||||
import {filter, map} from 'rxjs/operators';
|
||||
import {MatDivider} from '@angular/material/divider';
|
||||
|
||||
type Breadcrumb = { label: string; url: string };
|
||||
|
||||
@Component({
|
||||
selector: 'app-breadcrumbs',
|
||||
imports: [
|
||||
RouterLink,
|
||||
MatIcon,
|
||||
MatButton,
|
||||
NgIf,
|
||||
AsyncPipe,
|
||||
NgForOf,
|
||||
MatDivider
|
||||
],
|
||||
templateUrl: './breadcrumbs.component.html',
|
||||
styleUrl: './breadcrumbs.component.scss',
|
||||
schemas:[CUSTOM_ELEMENTS_SCHEMA,NO_ERRORS_SCHEMA]
|
||||
})
|
||||
export class BreadcrumbsComponent {
|
||||
|
||||
breadcrumbs$: Observable<Breadcrumb[]>;
|
||||
|
||||
constructor(private router: Router, private route: ActivatedRoute) {
|
||||
this.breadcrumbs$ = this.router.events.pipe(
|
||||
filter(e => e instanceof NavigationEnd),
|
||||
startWith(null),
|
||||
map(() => this.build(this.route.root))
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
private build(route: ActivatedRoute, url = '', crumbs: Breadcrumb[] = []): Breadcrumb[] {
|
||||
const children = route.children;
|
||||
if (!children || children.length === 0) return crumbs;
|
||||
|
||||
for (const child of children) {
|
||||
if (child.outlet !== 'primary') continue;
|
||||
|
||||
const routeURL = child.snapshot.url.map(s => s.path).join('/');
|
||||
if (routeURL) url += `/${routeURL}`;
|
||||
|
||||
const label = child.snapshot.data['breadcrumb'] as string | undefined;
|
||||
if (label) crumbs.push({ label, url });
|
||||
|
||||
return this.build(child, url, crumbs);
|
||||
}
|
||||
return crumbs;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -13,6 +13,7 @@
|
||||
</button>
|
||||
</mat-toolbar>
|
||||
<input
|
||||
id="fileInput"
|
||||
type="file"
|
||||
fileName="fileInput"
|
||||
(change)="selectFile($event)"
|
||||
|
||||
Reference in New Issue
Block a user