sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-31 09:37:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

#4205 Reihensuche

Browse Source
This commit is contained in:
Lorenz Hilpert
2023-08-23 14:31:55 +02:00
parent 771816f3af
commit d97b6afac8
10 changed files with 182 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/page/catalog/src/lib/article-details/article-details-text/article-details-text-link.component.css Normal file
View File

@@ -0,0 +1,3 @@
:host {
@apply text-[#0556B4];
}

3
apps/page/catalog/src/lib/article-details/article-details-text/article-details-text-link.component.html Normal file
View File

@@ -0,0 +1,3 @@
<a [routerLink]="route?.path" [queryParams]="route?.queryParams">
<ng-content></ng-content>
</a>

18
apps/page/catalog/src/lib/article-details/article-details-text/article-details-text-link.component.ts Normal file
View File

@@ -0,0 +1,18 @@
import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
import { RouterLink } from '@angular/router';
@Component({
selector: 'page-article-details-text-link',
templateUrl: 'article-details-text-link.component.html',
styleUrls: ['article-details-text-link.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush,
host: { class: 'page-article-details-text-link' },
standalone: true,
imports: [RouterLink],
})
export class ArticleDetailsTextLinkComponent {
@Input()
route: { path: string[]; queryParams?: Record<string, string> };
constructor() {}
}

3
apps/page/catalog/src/lib/article-details/article-details-text/article-details-text.component.css Normal file
View File

@@ -0,0 +1,3 @@
:host {
@apply block whitespace-pre-line;
}

6
apps/page/catalog/src/lib/article-details/article-details-text/article-details-text.component.html Normal file
View File

@@ -0,0 +1,6 @@
<ng-container *ngFor="let line of lines">
<ng-container [ngSwitch]="line | lineType">
<page-article-details-text-link *ngSwitchCase="'reihe'" [route]="line | reiheRoute"> {{ line }} <br /> </page-article-details-text-link>
<ng-container *ngSwitchDefault> {{ line }} <br /> </ng-container>
</ng-container>
</ng-container>

63
apps/page/catalog/src/lib/article-details/article-details-text/article-details-text.component.ts Normal file
View File

@@ -0,0 +1,63 @@
import { Component, ChangeDetectionStrategy, Input, Renderer2, ElementRef, OnChanges, SimpleChanges, HostBinding } from '@angular/core';
import { TextDTO } from '@swagger/cat';
import { ArticleDetailsTextLinkComponent } from './article-details-text-link.component';
import { NgFor, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
import { LineTypePipe } from './line-type.pipe';
import { ReiheRoutePipe } from './reihe-route.pipe';
const REIHE_REGEX = /^Reihe:\s*"(.+)\"$/m;
@Component({
selector: 'page-article-details-text',
templateUrl: 'article-details-text.component.html',
styleUrls: ['article-details-text.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush,
host: { class: 'page-article-details-text' },
standalone: true,
imports: [ArticleDetailsTextLinkComponent, NgFor, NgSwitch, NgSwitchCase, NgSwitchDefault, LineTypePipe, ReiheRoutePipe],
})
export class ArticleDetailsTextComponent {
@Input()
text: TextDTO;
get lines() {
return this.text?.value?.split('\n');
}
constructor(private elementRef: ElementRef, private renderer: Renderer2) {}
// ngOnChanges(changes: SimpleChanges): void {
// if (changes.text) {
// this.renderText();
// }
// }
// renderText() {
// console.log(this.getReihe());
// }
// getReihe() {
// REIHE_REGEX.exec(this.text?.value)?.forEach((match, groupIndex) => {
// if (groupIndex === 0) return;
// return match;
// });
// }
// @HostBinding('innerHTML')
// get htmlContent() {
// let content = this.text?.value;
// REIHE_REGEX.exec(content)?.forEach((match, groupIndex) => {
// if (groupIndex === 0) return;
// const aElement: HTMLAnchorElement = this.renderer.createElement('a');
// const text = this.renderer.createText(match);
// this.renderer.appendChild(aElement, text);
// this.renderer.setAttribute(aElement, 'href', `/search?query=${match}`);
// content = content.replace(match, aElement.outerHTML);
// });
// return content;
// }
}

14
apps/page/catalog/src/lib/article-details/article-details-text/line-type.pipe.ts Normal file
View File

@@ -0,0 +1,14 @@
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'lineType',
standalone: true,
pure: true,
})
export class LineTypePipe implements PipeTransform {
transform(value: string, ...args: any[]): 'text' | 'reihe' {
const REIHE_REGEX = /^Reihe:\s*"(.+)\"$/g;
const reihe = REIHE_REGEX.exec(value)?.[1];
return reihe ? 'reihe' : 'text';
}
}

69
apps/page/catalog/src/lib/article-details/article-details-text/reihe-route.pipe.ts Normal file
View File

@@ -0,0 +1,69 @@
import { ChangeDetectorRef, OnDestroy, Pipe, PipeTransform } from '@angular/core';
import { ApplicationService } from '@core/application';
import { ProductCatalogNavigationService } from '@shared/services';
import { isEqual } from 'lodash';
import { Subscription, combineLatest, BehaviorSubject } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';
@Pipe({
name: 'reiheRoute',
standalone: true,
pure: false,
})
export class ReiheRoutePipe implements PipeTransform, OnDestroy {
private subscription: Subscription;
value$ = new BehaviorSubject<string>('');
result: { path: string[]; queryParams?: Record<string, string> };
constructor(
private navigation: ProductCatalogNavigationService,
private application: ApplicationService,
private cdr: ChangeDetectorRef
) {
this.subscription = combineLatest([this.application.activatedProcessId$, this.value$])
.pipe(distinctUntilChanged(isEqual))
.subscribe(([processId, value]) => {
const REIHE_REGEX = /^Reihe:\s*"(.+)\"$/g;
const reihe = REIHE_REGEX.exec(value)?.[1];
if (!reihe) {
this.result = null;
return;
}
const main_qs = reihe.split('/')[0];
const path = this.navigation.getArticleSearchResultsPath(processId);
this.result = {
path,
queryParams: {
main_qs,
main_serial: 'serial',
},
};
this.cdr.detectChanges();
});
}
ngOnDestroy(): void {
this.subscription?.unsubscribe();
this.value$?.unsubscribe();
}
transform(value: string, ...args: any[]) {
this.value$.next(value);
return this.result;
// const REIHE_REGEX = /^Reihe:\s*"(.+)\"$/g;
// const reihe = REIHE_REGEX.exec(value)?.[1];
// this.navigation.getArticleSearchResultsPath(this.)
// return reihe ? `/search?query=${reihe}` : null;
}
}

4
apps/page/catalog/src/lib/article-details/article-details.component.html
View File

@@ -327,9 +327,7 @@
<hr class="bg-[#E6EFF9] border-t-2 my-3" />
<div #description class="page-article-details__product-description flex flex-col flex-grow" *ngIf="item.texts?.length > 0">
<div class="whitespace-pre-line">
{{ item.texts[0].value }}
</div>
<page-article-details-text [text]="item.texts[0]"> </page-article-details-text>
<button
class="font-bold flex flex-row text-[#0556B4] items-center mt-2"

2
apps/page/catalog/src/lib/article-details/article-details.module.ts
View File

@@ -12,6 +12,7 @@ import { UiTooltipModule } from '@ui/tooltip';
import { UiCommonModule } from '@ui/common';
import { OrderDeadlinePipeModule } from '@shared/pipes/order-deadline';
import { IconModule } from '@shared/components/icon';
import { ArticleDetailsTextComponent } from './article-details-text/article-details-text.component';
@NgModule({
imports: [
@@ -26,6 +27,7 @@ import { IconModule } from '@shared/components/icon';
IconModule,
PipesModule,
OrderDeadlinePipeModule,
ArticleDetailsTextComponent,
],
exports: [ArticleDetailsComponent, ArticleRecommendationsComponent],
declarations: [ArticleDetailsComponent, ArticleRecommendationsComponent],