From 2ad088f89b3ae3ef8455794ab70e62ac5467bc8a Mon Sep 17 00:00:00 2001 From: Martin Maul Date: Thu, 7 Mar 2024 10:37:16 +0100 Subject: [PATCH] chore(contracts): 625 removed breadcrumbs and header section from layout --- CHANGELOG.md | 3 + .../core/layout/header/header.component.html | 10 -- .../layout/layout/layout.component.spec.ts | 2 +- .../core/layout/layout/layout.component.ts | 4 +- .../breadcrumbs/breadcrumbs.component.html | 32 ------ .../breadcrumbs/breadcrumbs.component.scss | 63 ----------- .../breadcrumbs/breadcrumbs.component.spec.ts | 74 ------------ .../breadcrumbs/breadcrumbs.component.ts | 105 ------------------ .../breadcrumbs/breadcrumbs.model.ts | 25 ----- frontend/src/app/modules/shared/index.ts | 1 - .../src/app/modules/shared/shared.module.ts | 3 - 11 files changed, 6 insertions(+), 316 deletions(-) delete mode 100644 frontend/src/app/modules/shared/components/breadcrumbs/breadcrumbs.component.html delete mode 100644 frontend/src/app/modules/shared/components/breadcrumbs/breadcrumbs.component.scss delete mode 100644 frontend/src/app/modules/shared/components/breadcrumbs/breadcrumbs.component.spec.ts delete mode 100644 frontend/src/app/modules/shared/components/breadcrumbs/breadcrumbs.component.ts delete mode 100644 frontend/src/app/modules/shared/components/breadcrumbs/breadcrumbs.model.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 31f0645e13..52275c127f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,9 @@ _**For better traceability add the corresponding GitHub issue number in each cha - Updated RELEASE.md to the latest release guide (added more steps) - #515 Fixed notification toast click area +### Removed +- #625 Removed the header and breadcrumbs section from app layout + ## [10.6.0 - 04.03.2024] ### Added diff --git a/frontend/src/app/modules/core/layout/header/header.component.html b/frontend/src/app/modules/core/layout/header/header.component.html index 12a82b57b5..24f16b4658 100644 --- a/frontend/src/app/modules/core/layout/header/header.component.html +++ b/frontend/src/app/modules/core/layout/header/header.component.html @@ -41,16 +41,6 @@ - -
- -
- -
-

{{ 'pageTitle.' + activeMenu | i18n }}

-
- - diff --git a/frontend/src/app/modules/core/layout/layout/layout.component.spec.ts b/frontend/src/app/modules/core/layout/layout/layout.component.spec.ts index 39777944dd..f3ba897055 100644 --- a/frontend/src/app/modules/core/layout/layout/layout.component.spec.ts +++ b/frontend/src/app/modules/core/layout/layout/layout.component.spec.ts @@ -36,7 +36,7 @@ describe('LayoutComponent', () => { imports: [ LayoutModule ], providers: [ LayoutComponent ], }); - let header = fixture.debugElement.query(By.css('.header--breadcrumb-container')); + let header = fixture.debugElement.query(By.css('.layout-content__box-modal')); expect(header).not.toBeNull(); let toast = fixture.debugElement.query(By.css('.layout-toast-component')); let headerDistanceToTop = header.nativeElement.getBoundingClientRect().y + 'px'; diff --git a/frontend/src/app/modules/core/layout/layout/layout.component.ts b/frontend/src/app/modules/core/layout/layout/layout.component.ts index 8a715a97ac..4876c5f1ce 100644 --- a/frontend/src/app/modules/core/layout/layout/layout.component.ts +++ b/frontend/src/app/modules/core/layout/layout/layout.component.ts @@ -36,9 +36,9 @@ export class LayoutComponent { * This Block positions the toast component to the start of the header breadcrumb component (vertical top distance) * so that on every screen size the position stays the same (not relative) */ - const headerBreadCrumbRef = this.elementRef.nativeElement.querySelector('.header--breadcrumb-container'); + const layoutContentRef = this.elementRef.nativeElement.querySelector('.layout-content__box-modal'); const toastLayoutRef = this.elementRef.nativeElement.querySelector('.layout-toast-component'); - const elementTopDistance = headerBreadCrumbRef.getBoundingClientRect().top; + const elementTopDistance = layoutContentRef.getBoundingClientRect().top; this.renderer.setStyle(toastLayoutRef, 'top', `${ elementTopDistance }px`); } diff --git a/frontend/src/app/modules/shared/components/breadcrumbs/breadcrumbs.component.html b/frontend/src/app/modules/shared/components/breadcrumbs/breadcrumbs.component.html deleted file mode 100644 index 35df1fb14d..0000000000 --- a/frontend/src/app/modules/shared/components/breadcrumbs/breadcrumbs.component.html +++ /dev/null @@ -1,32 +0,0 @@ - - -
    -
  1. - - {{ breadcrumb.label | i18n }} - -
    2. -
diff --git a/frontend/src/app/modules/shared/components/breadcrumbs/breadcrumbs.component.scss b/frontend/src/app/modules/shared/components/breadcrumbs/breadcrumbs.component.scss deleted file mode 100644 index 4170f6674b..0000000000 --- a/frontend/src/app/modules/shared/components/breadcrumbs/breadcrumbs.component.scss +++ /dev/null @@ -1,63 +0,0 @@ -/******************************************************************************** - * Copyright (c) 2022, 2023 Bayerische Motoren Werke Aktiengesellschaft (BMW AG) - * Copyright (c) 2022, 2023 ZF Friedrichshafen AG - * Copyright (c) 2022, 2023 Contributors to the Eclipse Foundation - * - * See the NOTICE file(s) distributed with this work for additional - * information regarding copyright ownership. - * - * This program and the accompanying materials are made available under the - * terms of the Apache License, Version 2.0 which is available at - * https://www.apache.org/licenses/LICENSE-2.0. - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT - * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the - * License for the specific language governing permissions and limitations - * under the License. - * - * SPDX-License-Identifier: Apache-2.0 - ********************************************************************************/ - -.breadcrumb { - background: none; - font-size: 0.8em; - margin: 0; - cursor: default; - @apply font-light; - span { - @apply text-primary; - } - - a:hover, - span:hover { - text-decoration: underline; - cursor: pointer; - } - - li { - list-style: none; - float: left; - margin: 5px 5px 5px 0; - } - - li:last-child { - margin-right: 20px; - - span { - @apply text-doveGray; - cursor: default; - text-decoration: none; - } - } - - li::after { - content: '>'; - color: darkgrey; - cursor: default; - } - - li:last-child::after { - content: ''; - } -} diff --git a/frontend/src/app/modules/shared/components/breadcrumbs/breadcrumbs.component.spec.ts b/frontend/src/app/modules/shared/components/breadcrumbs/breadcrumbs.component.spec.ts deleted file mode 100644 index 2de8dbefd7..0000000000 --- a/frontend/src/app/modules/shared/components/breadcrumbs/breadcrumbs.component.spec.ts +++ /dev/null @@ -1,74 +0,0 @@ -/******************************************************************************** - * Copyright (c) 2022, 2023 Bayerische Motoren Werke Aktiengesellschaft (BMW AG) - * Copyright (c) 2022, 2023 ZF Friedrichshafen AG - * Copyright (c) 2022, 2023 Contributors to the Eclipse Foundation - * - * See the NOTICE file(s) distributed with this work for additional - * information regarding copyright ownership. - * - * This program and the accompanying materials are made available under the - * terms of the Apache License, Version 2.0 which is available at - * https://www.apache.org/licenses/LICENSE-2.0. - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT - * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the - * License for the specific language governing permissions and limitations - * under the License. - * - * SPDX-License-Identifier: Apache-2.0 - ********************************************************************************/ - -import { ActivatedRoute, NavigationEnd, Router } from '@angular/router'; -import { LayoutFacade } from '@shared/abstraction/layout-facade'; -import { BreadcrumbsComponent } from '@shared/components/breadcrumbs/breadcrumbs.component'; -import { SharedModule } from '@shared/shared.module'; -import { screen, waitFor } from '@testing-library/angular'; -import { renderComponent } from '@tests/test-render.utils'; -import { of } from 'rxjs'; - -describe('BreadcrumbsComponent', () => { - const createRoutRoot = (path: string, firstChild?: ActivatedRoute, breadcrumb?: string) => { - breadcrumb = breadcrumb || path; - return { - routeConfig: { data: { breadcrumb }, path }, - snapshot: { params: { id: path + '-1' } }, - firstChild, - } as unknown as ActivatedRoute; - }; - - const renderBreadcrumbsComponent = async root => { - const routerEvents = new NavigationEnd(1, 'test', ''); - - return await renderComponent(BreadcrumbsComponent, { - declarations: [ BreadcrumbsComponent ], - imports: [ SharedModule ], - providers: [ - LayoutFacade, - { provide: Router, useValue: { root: '', events: of(routerEvents) } }, - { - provide: ActivatedRoute, - useValue: { - root, - }, - }, - ], - }); - }; - - it('should render', async () => { - const root = createRoutRoot('home', createRoutRoot('test', createRoutRoot('path'))); - await renderBreadcrumbsComponent(root); - expect(await waitFor(() => screen.getByText('routing.home'))).toBeInTheDocument(); - expect(await waitFor(() => screen.getByText('routing.test'))).toBeInTheDocument(); - expect(await waitFor(() => screen.getByText('routing.path'))).toBeInTheDocument(); - }); - - it('should not render id', async () => { - const root = createRoutRoot('home', createRoutRoot('test', createRoutRoot(':random_id'))); - await renderBreadcrumbsComponent(root); - expect(await waitFor(() => screen.getByText('routing.home'))).toBeInTheDocument(); - expect(await waitFor(() => screen.getByText('routing.test'))).toBeInTheDocument(); - expect(await screen.queryByText('random_id')).not.toBeInTheDocument(); - }); -}); diff --git a/frontend/src/app/modules/shared/components/breadcrumbs/breadcrumbs.component.ts b/frontend/src/app/modules/shared/components/breadcrumbs/breadcrumbs.component.ts deleted file mode 100644 index d49260b883..0000000000 --- a/frontend/src/app/modules/shared/components/breadcrumbs/breadcrumbs.component.ts +++ /dev/null @@ -1,105 +0,0 @@ -/******************************************************************************** - * Copyright (c) 2022, 2023 Bayerische Motoren Werke Aktiengesellschaft (BMW AG) - * Copyright (c) 2022, 2023 ZF Friedrichshafen AG - * Copyright (c) 2022, 2023 Contributors to the Eclipse Foundation - * - * See the NOTICE file(s) distributed with this work for additional - * information regarding copyright ownership. - * - * This program and the accompanying materials are made available under the - * terms of the Apache License, Version 2.0 which is available at - * https://www.apache.org/licenses/LICENSE-2.0. - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT - * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the - * License for the specific language governing permissions and limitations - * under the License. - * - * SPDX-License-Identifier: Apache-2.0 - ********************************************************************************/ - -// ToDo: May need to rework this component - -import { Component } from '@angular/core'; -import { ActivatedRoute, NavigationEnd, Router } from '@angular/router'; -import { distinctUntilChanged, filter } from 'rxjs/operators'; -import { LayoutFacade } from '../../abstraction/layout-facade'; -import { BreadcrumbsModel } from './breadcrumbs.model'; - -@Component({ - selector: 'app-breadcrumbs', - templateUrl: './breadcrumbs.component.html', - styleUrls: [ './breadcrumbs.component.scss' ], -}) -export class BreadcrumbsComponent { - public breadcrumbs: BreadcrumbsModel[] = []; - - constructor( - private readonly router: Router, - private readonly activatedRoute: ActivatedRoute, - private readonly layoutFacade: LayoutFacade, - ) { - this.router.events - .pipe( - filter(event => event instanceof NavigationEnd), - distinctUntilChanged(), - ) - .subscribe({ next: () => (this.breadcrumbs = this.createBreadcrumbs(this.activatedRoute.root)) }); - } - - public navigate(url: string, index: number): void { - if (index < this.breadcrumbs.length - 1) { - this.router.navigate([ url ]).then(); - } - } - - private createBreadcrumbs(route: ActivatedRoute, url = '', breadcrumbs: BreadcrumbsModel[] = []): BreadcrumbsModel[] { - // If no routeConfig is available we are on the root path - let label = route.routeConfig && route.routeConfig.data ? route.routeConfig.data.breadcrumb : ''; - let path = route.routeConfig && route.routeConfig.data ? route.routeConfig.path : ''; - - // If the route is dynamic route such as ':id', remove it - const lastRoutePart = path.split('/').pop(); - const isDynamicRoute = lastRoutePart.startsWith(':'); - - if (isDynamicRoute && !!route.snapshot) { - const paramName = lastRoutePart.split(':')[1]; - - const splitPath = path.split(path.indexOf('/:') !== -1 ? '/:' : ':')[0]; - label = splitPath.split('/').pop(); - - path = path.replace(lastRoutePart, route.snapshot.params[paramName]); - } - - // In the routeConfig the complete path is not available, - // so we rebuild it each time - const nextUrl = path ? `${ url }/${ path }` : url; - - const breadcrumb: BreadcrumbsModel = { - label, - url: nextUrl, - }; - - // TODO: Don't know if this will work for future implementations - // We must set the breadcrumb label on the component and if we leave the route, we must put it back to empty - if (breadcrumb.url && breadcrumb.label === '' && this.layoutFacade.breadcrumbLabel) { - breadcrumb.label = this.layoutFacade.breadcrumbLabel; - } - - // translate breadcrumb - if (breadcrumb.label) { - // each breadcrumb label should be registered in common translation under "routing" key - breadcrumb.label = `routing.${ breadcrumb.label }`; - } - - // Only adding route with non-empty label - const newBreadcrumbs = breadcrumb.label ? [ ...breadcrumbs, breadcrumb ] : [ ...breadcrumbs ]; - if (route.firstChild) { - // If we are not on our current path yet, - // there will be more children to look after, to build our breadcrumb - return this.createBreadcrumbs(route.firstChild, nextUrl, newBreadcrumbs); - } - return newBreadcrumbs; - } -} diff --git a/frontend/src/app/modules/shared/components/breadcrumbs/breadcrumbs.model.ts b/frontend/src/app/modules/shared/components/breadcrumbs/breadcrumbs.model.ts deleted file mode 100644 index 2112e51327..0000000000 --- a/frontend/src/app/modules/shared/components/breadcrumbs/breadcrumbs.model.ts +++ /dev/null @@ -1,25 +0,0 @@ -/******************************************************************************** - * Copyright (c) 2022, 2023 Bayerische Motoren Werke Aktiengesellschaft (BMW AG) - * Copyright (c) 2022, 2023 ZF Friedrichshafen AG - * Copyright (c) 2022, 2023 Contributors to the Eclipse Foundation - * - * See the NOTICE file(s) distributed with this work for additional - * information regarding copyright ownership. - * - * This program and the accompanying materials are made available under the - * terms of the Apache License, Version 2.0 which is available at - * https://www.apache.org/licenses/LICENSE-2.0. - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT - * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the - * License for the specific language governing permissions and limitations - * under the License. - * - * SPDX-License-Identifier: Apache-2.0 - ********************************************************************************/ - -export interface BreadcrumbsModel { - label: string; - url: string; -} diff --git a/frontend/src/app/modules/shared/index.ts b/frontend/src/app/modules/shared/index.ts index 171e2703a0..b4720af52c 100644 --- a/frontend/src/app/modules/shared/index.ts +++ b/frontend/src/app/modules/shared/index.ts @@ -38,7 +38,6 @@ export { Tree } from './modules/relations/presentation/tree/tree.d3'; export { CardIconComponent } from './components/card-icon/card-icon.component'; export { CardListComponent } from './components/card-list/card-list.component'; export { AvatarComponent } from './components/avatar/avatar.component'; -export { BreadcrumbsComponent } from './components/breadcrumbs/breadcrumbs.component'; export { ButtonComponent } from './components/button/button.component'; export { ToastContainerComponent } from './components/toasts/toast-container/toast-container.component'; export { ToastMessage } from './components/toasts/toast-message/toast-message.model'; diff --git a/frontend/src/app/modules/shared/shared.module.ts b/frontend/src/app/modules/shared/shared.module.ts index f8c2d74029..f57bbd526e 100644 --- a/frontend/src/app/modules/shared/shared.module.ts +++ b/frontend/src/app/modules/shared/shared.module.ts @@ -50,7 +50,6 @@ import { FormatPartlistSemanticDataModelToCamelCasePipe } from '@shared/pipes/fo import { I18NextModule } from 'angular-i18next'; import { BaseInputComponent } from './abstraction/baseInput/baseInput.component'; import { AvatarComponent } from './components/avatar/avatar.component'; -import { BreadcrumbsComponent } from './components/breadcrumbs/breadcrumbs.component'; import { ButtonComponent } from './components/button/button.component'; import { CardIconComponent } from './components/card-icon/card-icon.component'; import { CardListComponent } from './components/card-list/card-list.component'; @@ -83,7 +82,6 @@ import { TemplateModule } from './template.module'; ToastContainerComponent, PartsTableComponent, ToastMessageComponent, - BreadcrumbsComponent, ButtonComponent, TextWithIconComponent, TableComponent, @@ -134,7 +132,6 @@ import { TemplateModule } from './template.module'; exports: [ ToastContainerComponent, ToastMessageComponent, - BreadcrumbsComponent, ButtonComponent, TextWithIconComponent, TableComponent,