Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New frontend UX design #246

Open
wants to merge 58 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
58 commits
Select commit Hold shift + click to select a range
4f02d56
Update peer dependencies & use pnpm as package manager
Matthbo Oct 14, 2024
71cac5d
Remake app component
Matthbo Oct 14, 2024
540b23e
Add angular-component as file dependency & expand app layout
Matthbo Oct 15, 2024
d1ad591
Favicons, improve layout styling & basis for home page
Matthbo Oct 16, 2024
62a7860
Signals!
Matthbo Oct 17, 2024
3d0ca87
Improve home component layout and functionality
Matthbo Oct 18, 2024
42d0847
Working weighted search
Matthbo Oct 22, 2024
be0b5ac
Add basics of index page
Matthbo Oct 22, 2024
768a25e
Filter creation & assignments, index page improvements
Matthbo Oct 23, 2024
7725896
Improve ff-chips & index page styling
Matthbo Oct 24, 2024
ef874f5
Unfinished parts of filter menu on homepage
Matthbo Oct 25, 2024
184715f
Homepage filter improvements
Matthbo Oct 29, 2024
da699af
Add basics of details page
Matthbo Oct 29, 2024
136c907
Various pages are improved
Matthbo Oct 30, 2024
464b2f9
Improve routing, get element on details page
Matthbo Nov 1, 2024
9f91d4b
Add old url scheme, improve finding element & add component options
Matthbo Nov 4, 2024
2a6fd8a
A mess to try and get javadoc description properly working
Matthbo Nov 5, 2024
f429ee7
Trying to get structural directive working
Matthbo Nov 5, 2024
6932307
Better way of handling javadoc text
Matthbo Nov 6, 2024
987711f
Fix element description updating when navigating from previous element
Matthbo Nov 7, 2024
475c4df
Improve element description & component options styling
Matthbo Nov 8, 2024
eda02eb
sub option title styling
Matthbo Nov 8, 2024
0e35e09
fix overflow & word-wrapping on smaller screens
Matthbo Nov 22, 2024
6b609b1
Add collapse-directive to handle collapse & expand styling & animation
Matthbo Nov 22, 2024
750cf6e
Add collapse-directive to handle collapse & expand styling & animation
Matthbo Nov 25, 2024
c018154
Preparations to figure out toggling label filters
Matthbo Nov 25, 2024
20afcd1
Fix toggling labels
Matthbo Nov 26, 2024
c938aaa
Add proper filtering in home view
Matthbo Nov 27, 2024
547340f
Add list of selected filters for the user to see and remove
Matthbo Nov 28, 2024
9288aea
Improve selected filter close button styling
Matthbo Nov 28, 2024
8070628
Preparations of handling inherited properties
Matthbo Nov 28, 2024
63b50be
Forward implementation of inherited properties
Matthbo Nov 29, 2024
4f6786a
Display inherited properties
Matthbo Dec 3, 2024
6228e0c
Better displaying of component options
Matthbo Dec 4, 2024
36f5974
Improve styling for side-navigation
Matthbo Dec 4, 2024
9e1499c
Improve collapsables
Matthbo Dec 5, 2024
4c14ddf
Implement scroll to element for details right sidebar
Matthbo Dec 10, 2024
9a7fa5d
Detail page functional search
Matthbo Dec 10, 2024
704fd07
Improve details page search sidebar styling
Matthbo Dec 11, 2024
ba03d95
Various function and styling improvements
Matthbo Dec 11, 2024
bfc9627
More icons and style improvements
Matthbo Dec 12, 2024
ad7d5b2
Consistent colour & style of links on details page
Matthbo Dec 12, 2024
da2eef2
Add environment toggles for unfinished features
Matthbo Dec 12, 2024
be37408
Update pom & github checks
Matthbo Dec 12, 2024
1f5c850
Feedback smile button & copy syntax button
Matthbo Dec 12, 2024
b06261a
Improve directives based on feedback
Matthbo Dec 17, 2024
554156b
Improve details page & index page (now with colours)
Matthbo Dec 17, 2024
b3f7f28
Fix maven-build indentation
Matthbo Dec 17, 2024
649eeb4
Attempt to get pnpm working on github
Matthbo Dec 17, 2024
b16c782
Add variables for common styling colours
Matthbo Dec 18, 2024
7438235
Fix & improve various things
Matthbo Dec 18, 2024
0b54015
Fix angular-ci.yml
Matthbo Dec 18, 2024
5c4d4c5
Fix tests
Matthbo Dec 18, 2024
485ac19
refactor: simplify Maven build
philipsens Dec 18, 2024
9398a92
refactor: split testing doclet
philipsens Dec 18, 2024
92e5482
fix: pnpm in ci
philipsens Dec 18, 2024
dc4790d
Replace styleColours map for css variables
Matthbo Dec 19, 2024
954a5ac
Add easing on collapse-expand animation
Matthbo Dec 19, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Add old url scheme, improve finding element & add component options
Matthbo committed Dec 17, 2024
commit 9f91d4b972ca5f0a6a66a80bf2f3c400c5a00bfd
2 changes: 1 addition & 1 deletion frank-doc-frontend/package.json
Original file line number Diff line number Diff line change
@@ -55,7 +55,7 @@
"typescript": "~5.5.0"
},
"lint-staged": {
"./src/**/*.{ts, html}": "eslint"
"./src/app/**/*.{ts, html}": "eslint"
},
"packageManager": "pnpm@9.12.3+sha512.cce0f9de9c5a7c95bef944169cc5dfe8741abfb145078c0d508b868056848a87c81e626246cb60967cbd7fd29a6c062ef73ff840d96b3c86c40ac92cf4a813ee"
}
5 changes: 5 additions & 0 deletions frank-doc-frontend/src/app/app.routes.ts
Original file line number Diff line number Diff line change
@@ -18,6 +18,11 @@ export const routes: Routes = [
path: ':fullname',
component: DetailsComponent,
},
{
// old url structure, only checks element short name
path: ':label/:element',
component: DetailsComponent,
},
{
path: ':filter/:label/:element',
component: DetailsComponent,
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<header>
<div class="title">
<div class="title" routerLink="/">
<app-icon-ff-logo-small [width]="35" [height]="35"></app-icon-ff-logo-small>
<h1>Reference</h1>
<span class="version">{{ version }}</span>
6 changes: 3 additions & 3 deletions frank-doc-frontend/src/app/components/javadoc.pipe.ts
Original file line number Diff line number Diff line change
@@ -11,8 +11,8 @@ export class JavadocPipe implements PipeTransform {
private appService: AppService = inject(AppService);
private domSanatizer: DomSanitizer = inject(DomSanitizer);

transform(value: string, elements: FrankDoc['elements']): SafeHtml | string {
if (value === '') return value;
transform(value: string, elements: FrankDoc['elements'] | null): SafeHtml | string {
if (value === '' || !elements) return value;
const markdownLinkRegex = /\[(.*?)]\((.+?)\)/g;
const linkRegex = /(?:{@link\s(.*?)})/g;
value = value.replace(markdownLinkRegex, '<a target="_blank" href="$2" alt="$1">$1</a>'); // old regex: /\[(.*?)\]\((.+?)\)/g
@@ -39,7 +39,7 @@ export class JavadocPipe implements PipeTransform {

const element = this.findElement(elements, elementParts[0]);
if (!element) return name;
return `<a href="#/All/${element.name}">${name}</a>`;
return `<a href="#/${element.fullName}">${name}</a>`;
}

getInternalMethodReference(captureGroup: string, hashPosition: number): string {
Original file line number Diff line number Diff line change
@@ -15,10 +15,10 @@ <h3>Explanation</h3>
<h3>Quick Links</h3>
<ul>
<li>
<a href="">Github - TestPipe Implementation Examples</a>
<a [href]="githubUrlOf(element.name)">Github - {{ element.name }} Implementation Examples</a>
</li>
<li>
<a [href]="javaDocUrlOf(element.fullName)">Javadoc - TestPipe</a>
<a [href]="javaDocUrlOf(element.fullName)">Javadoc - {{ element.name }}</a>
</li>
</ul>
</div>
@@ -32,6 +32,116 @@ <h3>Syntax</h3>
</div>
<div class="section options">
<h3>Component Options</h3>
@if (element.attributes) {
<div class="attributes">
<span class="options-title">Attributes</span>
<ff-alert type="warning">The attributes below are required</ff-alert>
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Type</th>
</tr>
</thead>
<tbody>
@for (attribute of attributesRequired; track attribute.name) {
<tr>
<td>{{ attribute.name }}</td>
<td>{{ attribute.description }}</td>
<td>{{ attribute.type }}</td>
</tr>
}
</tbody>
</table>
<ff-alert type="info">The attributes below are optional</ff-alert>
<span class="options-sub-title">Optional</span>
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Type</th>
</tr>
</thead>
<tbody>
@for (attribute of attributesOptional; track attribute.name) {
<tr>
<td>{{ attribute.name }}</td>
<td>{{ attribute.description }}</td>
<td>{{ attribute.type }}</td>
</tr>
}
</tbody>
</table>
</div>
}
@if (element.parameters) {
<div class="parameters">
<span class="options-title">Parameters</span>
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Type</th>
</tr>
</thead>
<tbody>
@for (parameter of element.parameters; track parameter.name) {
<tr>
<td>{{ parameter.name }}</td>
<td>{{ parameter.description }}</td>
</tr>
}
</tbody>
</table>
</div>
}
@if (element.children) {
<div class="nested-elements">
<span class="options-title">Nested Elements</span>
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Cardinality</th>
</tr>
</thead>
<tbody>
@for (nestedElement of element.children; track nestedElement.roleName) {
<tr>
<td>{{ nestedElement.roleName }}</td>
<td>{{ nestedElement.description }}</td>
<td>{{ nestedElement.mandatory ? '1' : '0' }} .. {{ nestedElement.multiple ? 'n' : '1' }}</td>
</tr>
}
</tbody>
</table>
</div>
}
@if (element.forwards) {
<div class="forwards">
<span class="options-title">Forwards</span>
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
@for (forward of element.forwards; track forward.name) {
<tr>
<td>{{ forward.name }}</td>
<td>{{ forward.description }}</td>
</tr>
}
</tbody>
</table>
</div>
}
</div>
} @else {
<h2>Element not found</h2>
Original file line number Diff line number Diff line change
@@ -1,28 +1,42 @@
import { Component, Input } from '@angular/core';
import { ChipComponent } from '@frankframework/angular-components';
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { AlertComponent, ChipComponent } from '@frankframework/angular-components';
import { JavadocPipe } from '../../../components/javadoc.pipe';
import { KeyValuePipe } from '@angular/common';
import { RouterLink } from '@angular/router';
import { Element, FrankDoc } from '../../../frankdoc.types';
import { Attribute, Element, FrankDoc } from '../../../frankdoc.types';
import { environment } from '../../../../environments/environment';

@Component({
selector: 'app-details-element',
standalone: true,
imports: [ChipComponent, JavadocPipe, KeyValuePipe, RouterLink],
imports: [ChipComponent, JavadocPipe, KeyValuePipe, RouterLink, AlertComponent],
templateUrl: './details-element.component.html',
styleUrl: './details-element.component.scss',
})
export class DetailsElementComponent {
export class DetailsElementComponent implements OnChanges {
@Input({ required: true }) element!: Element | null;
@Input({ required: true }) frankDocElements!: FrankDoc['elements'] | null;

protected attributesRequired: Attribute[] = [];
protected attributesOptional: Attribute[] = [];

private filterColours: string[] = ['#CD55EB', '#037CD4', '#00B31D'];

ngOnChanges(changes: SimpleChanges): void {
if (changes['element'] && this.element?.attributes) {
this.attributesRequired = this.element?.attributes.filter((attribute) => attribute.mandatory === true) ?? [];
this.attributesOptional = this.element?.attributes.filter((attribute) => !attribute.mandatory) ?? [];
}
}

getLabelColor(index: number): string {
return this.filterColours[index % this.filterColours.length];
}

githubUrlOf(name: string): string {
return `${environment.githubWikiBaseUrl}/${name}`;
}

javaDocUrlOf(fullName: string): string | null {
return fullName.includes('.')
? `${environment.javadocBaseUrl}/${fullName.replaceAll('.', '/')}.html`
31 changes: 25 additions & 6 deletions frank-doc-frontend/src/app/views/details/details.component.ts
Original file line number Diff line number Diff line change
@@ -8,7 +8,7 @@ import { JavadocPipe } from '../../components/javadoc.pipe';
import { DetailsElementComponent } from './details-element/details-element.component';

type ElementFilterProperties = {
filterName: string;
filterName?: string;
labelName: string;
elementName: string;
};
@@ -37,18 +37,22 @@ export class DetailsComponent implements OnInit {

ngOnInit(): void {
this.route.params.subscribe((params) => {
const frankDocElements = this.frankDocElements();
const fullName: string | undefined = params['fullname'];
if (fullName) {
this.fullElementName = fullName;
if (frankDocElements) this.getElementByFullName(frankDocElements, fullName);
return;
}

const filterName: string | undefined = params['filter'];
const labelName: string | undefined = params['label'];
const elementName: string | undefined = params['element'];

if (!filterName || !labelName || !elementName) {
if (!labelName || !elementName) {
return;
}

this.elementFilterProperties = { filterName, labelName, elementName };
const elements = this.frankDocElements();
if (elements) this.getElementByFilterLabelNames(elements, this.elementFilterProperties);
@@ -57,7 +61,7 @@ export class DetailsComponent implements OnInit {

private findElement(frankDocElements: FrankDoc['elements'] | null): FrankDoc['elements'][string] | null {
if (!frankDocElements) return null;
if (this.fullElementName) return this.getElementByFullName(frankDocElements);
if (this.fullElementName) return this.getElementByFullName(frankDocElements, this.fullElementName);
if (!this.elementFilterProperties) return null;
return this.getElementByFilterLabelNames(frankDocElements, this.elementFilterProperties);
}
@@ -68,14 +72,29 @@ export class DetailsComponent implements OnInit {
): FrankDoc['elements'][string] | null {
const elements = Object.values(frankDocElements);
const { filterName, labelName, elementName } = elementFilterProperties;

if (!filterName) {
return this.getElementByShortName(elements, elementName);
}

const filteredElement = elements.find((element) => {
return element.name === elementName && element.labels?.[filterName]?.includes(labelName);
});
console.log(filteredElement);
return filteredElement ?? null;
}

private getElementByFullName(frankDocElements: FrankDoc['elements'] | null): FrankDoc['elements'][string] | null {
if (!frankDocElements || !this.fullElementName) return null;
return frankDocElements[this.fullElementName] ?? null;
private getElementByShortName(frankDocElements: Element[], shortName: string): Element | null {
// return frankDocElements.find((element) => element.name === shortName) ?? null;
const filteredElement = frankDocElements.find((element) => element.name === shortName);
console.log(filteredElement);
return filteredElement ?? null;
}

private getElementByFullName(frankDocElements: FrankDoc['elements'], fullName: string): Element | null {
// return frankDocElements[fullName] ?? null;
const filteredElement = frankDocElements[fullName];
console.log(filteredElement);
return filteredElement ?? null;
}
}
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
export const environment = {
showDeprecatedElements: false,
showInheritance: true,
xsdUrl: '/xml/xsd/FrankConfig.xsd',
javadocBaseUrl: 'https://javadoc.frankframework.org',
githubWikiBaseUrl: 'https://github.com/frankframework/frankframework/wiki',
frankDocUrl: '/js/frankdoc.json',
};
1 change: 1 addition & 0 deletions frank-doc-frontend/src/environments/environment.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
export const environment = {
xsdUrl: 'xml/xsd/FrankConfig.xsd',
javadocBaseUrl: 'https://javadoc.frankframework.org',
githubWikiBaseUrl: 'https://github.com/frankframework/frankframework/wiki',
frankDocUrl: 'js/frankdoc.json',
};