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.

Sign up for GitHub

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

Jump to bottom

refactor(client): migrate components to new angular control flow #821

Merged
merged 1 commit into from
Mar 1, 2024
Merged

refactor(client): migrate components to new angular control flow #821

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
11 changes: 7 additions & 4 deletions apps/documentation/src/app/componenets/md-reference-tree/md-reference-tree.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,13 @@
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
<li class="mat-tree-node">
<!-- use a disabled button to provide padding for tree leaf -->
<button mat-icon-button *ngIf="!node.filePath" disabled></button>
<button mat-icon-button *ngIf="node.filePath" [attr.aria-label]="'show ' + node.name">
<mat-icon (click)="showReadme(node.filePath)">open_in_browser</mat-icon>
</button>
@if (!node.filePath) {
<button mat-icon-button disabled></button>
} @else {
<button mat-icon-button [attr.aria-label]="'show ' + node.name">
<mat-icon (click)="showReadme(node.filePath)">open_in_browser</mat-icon>
</button>
}
{{ node.name }}
</li>
</mat-tree-node>
Expand Down
100 changes: 50 additions & 50 deletions apps/documentation/src/app/componenets/root/root.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,50 @@
<div class="root" *ngIf="config$ | async as config">
<mat-toolbar color="primary" class="root__toolbar">
<button mat-icon-button disabled>
<mat-icon>recycling</mat-icon>
</button>

<span class="flex--full"></span>

<button mat-icon-button [matMenuTriggerFor]="mobileMenuTop">
<mat-icon>menu</mat-icon>
</button>
<mat-menu #mobileMenuTop="matMenu">
<a mat-menu-item href="https://nx.dev" target="_blank" rel="noreferrer"> <mat-icon>library_books</mat-icon> Nx Reference </a>
<a mat-menu-item href="https://cli.angular.io/reference.pdf" target="_blank" rel="noreferrer">
<mat-icon>build</mat-icon> Angular CLI Reference
</a>
<a mat-menu-item href="https://material.angular.io/" target="_blank" rel="noreferrer">
<mat-icon>change_history</mat-icon> Angular Material
</a>
<a mat-menu-item href="https://material.io/icons/" target="_blank" rel="noreferrer">
<mat-icon>info_outline</mat-icon> Material Icons
</a>
</mat-menu>
</mat-toolbar>

<mat-sidenav-container class="flex--full" [hasBackdrop]="false" [autosize]="true">
<mat-sidenav #sidenav mode="side" [opened]="config.sidenavOpen">
<app-documentation-md-reference-tree></app-documentation-md-reference-tree>
</mat-sidenav>

<mat-sidenav-content>
<div class="root__content">
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>

<mat-toolbar color="primary" class="root__toolbar">
<button mat-icon-button (click)="sidenav.toggle()">
<mat-icon title="open sidenav" *ngIf="!sidenav.opened"> flip_to_front </mat-icon>
<mat-icon title="open sidenav" *ngIf="sidenav.opened"> flip_to_back </mat-icon>
</button>

<span class="flex--full"></span>

<div *ngIf="version">
<small>{{ version }}</small>
</div>
</mat-toolbar>
</div>
@if (config$ | async; as config) {
<div class="root">
<mat-toolbar color="primary" class="root__toolbar">
<button mat-icon-button disabled>
<mat-icon>recycling</mat-icon>
</button>
<span class="flex--full"></span>
<button mat-icon-button [matMenuTriggerFor]="mobileMenuTop">
<mat-icon>menu</mat-icon>
</button>
<mat-menu #mobileMenuTop="matMenu">
<a mat-menu-item href="https://nx.dev" target="_blank" rel="noreferrer"> <mat-icon>library_books</mat-icon> Nx Reference </a>
<a mat-menu-item href="https://cli.angular.io/reference.pdf" target="_blank" rel="noreferrer">
<mat-icon>build</mat-icon> Angular CLI Reference
</a>
<a mat-menu-item href="https://material.angular.io/" target="_blank" rel="noreferrer">
<mat-icon>change_history</mat-icon> Angular Material
</a>
<a mat-menu-item href="https://material.io/icons/" target="_blank" rel="noreferrer">
<mat-icon>info_outline</mat-icon> Material Icons
</a>
</mat-menu>
</mat-toolbar>
<mat-sidenav-container class="flex--full" [hasBackdrop]="false" [autosize]="true">
<mat-sidenav #sidenav mode="side" [opened]="config.sidenavOpen">
<app-documentation-md-reference-tree></app-documentation-md-reference-tree>
</mat-sidenav>
<mat-sidenav-content>
<div class="root__content">
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
<mat-toolbar color="primary" class="root__toolbar">
<button mat-icon-button (click)="sidenav.toggle()">
@if (!sidenav.opened) {
<mat-icon title="open sidenav"> flip_to_front </mat-icon>
} @else {
<mat-icon title="open sidenav"> flip_to_back </mat-icon>
}
</button>
<span class="flex--full"></span>
@if (version) {
<div>
<small>{{ version }}</small>
</div>
}
</mat-toolbar>
</div>
}
2 changes: 1 addition & 1 deletion libs/client-chatbot/src/lib/components/chatbot-root/chatbot-root.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,4 +26,4 @@ <h3>
<span class="mat-caption">Hit <strong>Ctrl + Enter</strong> to submit your message.</span>
</form>

<ng-container *ngIf="respond$ | async"></ng-container>
@if (respond$ | async) {}
2 changes: 1 addition & 1 deletion .../client-chatbot/src/lib/components/chatbot-widget-root/chatbot-widget-root.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,4 +26,4 @@ <h3>
<span class="mat-caption">Hit <strong>Ctrl + Enter</strong> to submit your message.</span>
</form>

<ng-container *ngIf="respond$ | async"></ng-container>
@if (respond$ | async) {}
55 changes: 27 additions & 28 deletions libs/client-core-components/src/lib/components/navbar/navbar.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,27 @@
<mat-toolbar color="primary" class="toolbar" *ngIf="routerEvents$ | async">
<img
class="toolbar--logo"
[src]="logoSrc"
alt="{{ appName }}"
title="{{ appName }}"
[routerLink]="buttons[0].routerLink"
[ngClass]="{ 'toolbar--actionable': !buttons[0].routeActive() }"
/>

<span class="flex--full"></span>

<app-navigator (nagivateBack)="navigateBack()" (nagivateForward)="navigateForward()"></app-navigator>

<span class="flex--full"></span>

<button mat-icon-button [matMenuTriggerFor]="mobileMenuTop">
<mat-icon>menu</mat-icon>
</button>

<mat-menu #mobileMenuTop="matMenu">
<ng-template *ngFor="let button of buttons" [appFeatureFlag]="button.title !== 'Dashboards' ? null : 'dashboards'">
<a mat-menu-item [routerLink]="button.routerLink" [disabled]="button.routeActive()" (click)="navButtonClick()">
<mat-icon>{{ button.icon }}</mat-icon> {{ button.title }}
</a>
</ng-template>
</mat-menu>
</mat-toolbar>
@if (routerEvents$ | async) {
<mat-toolbar color="primary" class="toolbar">
<img
class="toolbar--logo"
[src]="logoSrc"
alt="{{ appName }}"
title="{{ appName }}"
[routerLink]="buttons[0].routerLink"
[ngClass]="{ 'toolbar--actionable': !buttons[0].routeActive() }"
/>
<span class="flex--full"></span>
<app-navigator (nagivateBack)="navigateBack()" (nagivateForward)="navigateForward()"></app-navigator>
<span class="flex--full"></span>
<button mat-icon-button [matMenuTriggerFor]="mobileMenuTop">
<mat-icon>menu</mat-icon>
</button>
<mat-menu #mobileMenuTop="matMenu">
@for (button of buttons; track button) {
<ng-template [appFeatureFlag]="button.title !== 'Dashboards' ? null : 'dashboards'">
<a mat-menu-item [routerLink]="button.routerLink" [disabled]="button.routeActive()" (click)="navButtonClick()">
<mat-icon>{{ button.icon }}</mat-icon> {{ button.title }}
</a>
</ng-template>
}
</mat-menu>
</mat-toolbar>
}
16 changes: 8 additions & 8 deletions libs/client-core-components/src/lib/components/search/search.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@
<mat-icon matSuffix>sentiment_very_satisfied</mat-icon>

<mat-autocomplete #auto="matAutocomplete">
<mat-option
*ngFor="let option of filteredOptions | async"
[value]="option.value"
[disabled]="option.isActive()"
(onSelectionChange)="selectOption(option.routerLink)"
>
<mat-icon *ngIf="option.icon">{{ option.icon }}</mat-icon> {{ option.name }}
</mat-option>
@for (option of filteredOptions | async; track option) {
<mat-option [value]="option.value" [disabled]="option.isActive()" (onSelectionChange)="selectOption(option.routerLink)">
@if (option.icon) {
<mat-icon>{{ option.icon }}</mat-icon>
}
{{ option.name }}
</mat-option>
}
</mat-autocomplete>
</mat-form-field>
10 changes: 5 additions & 5 deletions libs/client-core-components/src/lib/components/theme-toggle/theme-toggle.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<button mat-icon-button (click)="toggleTheme()" appTooltip="Toogle theme">
<mat-icon *ngIf="darkThemeEnabled; else lightMode">light_mode</mat-icon>
@if (darkThemeEnabled) {
<mat-icon>light_mode</mat-icon>
} @else {
<mat-icon>dark_mode</mat-icon>
}
</button>

<ng-template #lightMode>
<mat-icon>dark_mode</mat-icon>
</ng-template>
18 changes: 11 additions & 7 deletions libs/client-core-components/src/lib/components/toolbar/toolbar.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,20 +14,24 @@
</button>

<mat-menu #mobileMenuBottom="matMenu">
<a mat-menu-item *ngFor="let anchor of anchors" [href]="anchor.href" target="_blank" rel="noreferrer">
<mat-icon>{{ anchor.icon }}</mat-icon> {{ anchor.title }}
</a>
@for (anchor of anchors; track anchor) {
<a mat-menu-item [href]="anchor.href" target="_blank" rel="noreferrer">
<mat-icon>{{ anchor.icon }}</mat-icon> {{ anchor.title }}
</a>
}

<mat-divider></mat-divider>

<a mat-menu-item (click)="toggleChatbot()"> <mat-icon>chat_bubble_outline</mat-icon> Chat widget </a>

<mat-divider></mat-divider>

<div mat-menu-item disabled *ngIf="version">
<mat-icon>new_releases</mat-icon>
{{ version }}
</div>
@if (version) {
<div mat-menu-item disabled>
<mat-icon>new_releases</mat-icon>
{{ version }}
</div>
}
</mat-menu>
</mat-toolbar>

Expand Down
8 changes: 5 additions & 3 deletions .../client-d3-charts/src/lib/components/chart-examples-bar/chart-examples-bar.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
<div class="container" *ngIf="chartConfig$ | async as config">
<app-bar-chart [chartId]="'bar-example-1'" [data]="config.data" [options]="config.options"></app-bar-chart>
</div>
@if (chartConfig$ | async; as config) {
<div class="container">
<app-bar-chart [chartId]="'bar-example-1'" [data]="config.data" [options]="config.options"></app-bar-chart>
</div>
}
16 changes: 9 additions & 7 deletions ...lib/components/chart-examples-force-directed/chart-examples-force-directed.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
<div class="container" *ngIf="chartConfig$ | async as config">
<app-force-directed-chart
[chartId]="'force-directed-example-1'"
[data]="config.data"
[options]="config.options"
></app-force-directed-chart>
</div>
@if (chartConfig$ | async; as config) {
<div class="container">
<app-force-directed-chart
[chartId]="'force-directed-example-1'"
[data]="config.data"
[options]="config.options"
></app-force-directed-chart>
</div>
}
57 changes: 28 additions & 29 deletions ...ent-d3-charts/src/lib/components/chart-examples-gauge/chart-examples-gauge.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,28 @@
<div class="container" *ngIf="chartConfig$ | async as config">
<app-gauge-chart
[chartId]="'gauge-example-1'"
[data]="config.data.first"
[options]="config.options.first"
[value]="value.first"
></app-gauge-chart>

<app-gauge-chart
[chartId]="'gauge-example-2'"
[data]="config.data.second"
[options]="config.options.second"
[value]="value.second"
></app-gauge-chart>

<app-gauge-chart
[chartId]="'gauge-example-3'"
[data]="config.data.second"
[options]="config.options.third"
[value]="value.third"
></app-gauge-chart>

<app-gauge-chart
[chartId]="'gauge-example-4'"
[data]="config.data.second"
[options]="config.options.fourth"
[value]="value.third"
></app-gauge-chart>
</div>
@if (chartConfig$ | async; as config) {
<div class="container">
<app-gauge-chart
[chartId]="'gauge-example-1'"
[data]="config.data.first"
[options]="config.options.first"
[value]="value.first"
></app-gauge-chart>
<app-gauge-chart
[chartId]="'gauge-example-2'"
[data]="config.data.second"
[options]="config.options.second"
[value]="value.second"
></app-gauge-chart>
<app-gauge-chart
[chartId]="'gauge-example-3'"
[data]="config.data.second"
[options]="config.options.third"
[value]="value.third"
></app-gauge-chart>
<app-gauge-chart
[chartId]="'gauge-example-4'"
[data]="config.data.second"
[options]="config.options.fourth"
[value]="value.third"
></app-gauge-chart>
</div>
}
57 changes: 28 additions & 29 deletions ...lient-d3-charts/src/lib/components/chart-examples-line/chart-examples-line.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,28 @@
<div class="container" *ngIf="chartConfig$ | async as config">
<app-line-chart
[chartId]="'line-example-1'"
[data]="[config.data[0]]"
[datasetLabels]="[config.datasetLabels[0]]"
[options]="config.options"
></app-line-chart>

<app-line-chart
[chartId]="'line-example-2'"
[data]="[config.data[1]]"
[datasetLabels]="[config.datasetLabels[1]]"
[options]="config.optionsDateDdMmYy"
></app-line-chart>

<app-line-chart
[chartId]="'line-example-3'"
[data]="[config.data[1], config.data[2]]"
[datasetLabels]="[config.datasetLabels[1], config.datasetLabels[2]]"
[options]="config.optionsDateDdMmYyyy"
></app-line-chart>

<app-line-chart
[chartId]="'line-example-4'"
[data]="config.data"
[datasetLabels]="config.datasetLabels"
[options]="config.optionsDateMmYyyy"
></app-line-chart>
</div>
@if (chartConfig$ | async; as config) {
<div class="container">
<app-line-chart
[chartId]="'line-example-1'"
[data]="[config.data[0]]"
[datasetLabels]="[config.datasetLabels[0]]"
[options]="config.options"
></app-line-chart>
<app-line-chart
[chartId]="'line-example-2'"
[data]="[config.data[1]]"
[datasetLabels]="[config.datasetLabels[1]]"
[options]="config.optionsDateDdMmYy"
></app-line-chart>
<app-line-chart
[chartId]="'line-example-3'"
[data]="[config.data[1], config.data[2]]"
[datasetLabels]="[config.datasetLabels[1], config.datasetLabels[2]]"
[options]="config.optionsDateDdMmYyyy"
></app-line-chart>
<app-line-chart
[chartId]="'line-example-4'"
[data]="config.data"
[datasetLabels]="config.datasetLabels"
[options]="config.optionsDateMmYyyy"
></app-line-chart>
</div>
}
Loading
Loading