Skip to content

Commit 67b67de

Browse files
author
Konstantin Dinev
committed
chore(*): migrating to control flow
1 parent 901eea4 commit 67b67de

480 files changed

Lines changed: 10691 additions & 9600 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎projects/app-crm/src/app/grid-crm/grid-crm.component.html‎

Lines changed: 162 additions & 152 deletions
Large diffs are not rendered by default.

‎projects/app-crm/src/app/grid-crm/grid-crm.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
import { ActivatedRoute } from '@angular/router';
1111
import { CloseScrollStrategy, ConnectedPositioningStrategy, HorizontalAlignment, IColumnExportingEventArgs, IgxColumnComponent, IgxCsvExporterService, IgxDateSummaryOperand, IgxExcelExporterService, IgxGridComponent, IgxNumberSummaryOperand, IgxSummaryResult, IgxToggleDirective, OverlaySettings, PositionSettings, VerticalAlignment, CellType, GridSelectionMode, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxGridToolbarTitleComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective, IgxCellTemplateDirective, IgxAvatarComponent, IgxLinearProgressBarComponent } from 'igniteui-angular';
1212
import { data, Employee } from './data';
13-
import { NgClass, NgIf } from '@angular/common';
13+
import { NgClass } from '@angular/common';
1414
import { IgxPreventDocumentScrollDirective } from '../../../../../src/app/directives/prevent-scroll.directive';
1515
import { FormsModule } from '@angular/forms';
1616

@@ -75,7 +75,7 @@ class SoonSummary extends IgxDateSummaryOperand {
7575
selector: 'app-grid',
7676
styleUrls: ['./grid-crm.component.scss'],
7777
templateUrl: './grid-crm.component.html',
78-
imports: [NgClass, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxGridToolbarTitleComponent, IgxInputGroupComponent, IgxPrefixDirective, NgIf, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent, IgxLinearProgressBarComponent]
78+
imports: [NgClass, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxGridToolbarTitleComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent, IgxLinearProgressBarComponent]
7979
})
8080
export class GridCRMComponent implements OnInit, AfterViewInit {
8181

‎projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.html‎

Lines changed: 127 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,125 +1,135 @@
11
<igc-dockmanager #dock class="light-theme dock-m-position" [layout]="docLayout">
2-
<div slot="grid" igxOverlayOutlet style="height: 100%">
3-
<igx-grid #grid columnSelection="multiple" [moving]="true" igxChartIntegration igxConditionalFormatting igxContextMenu
4-
[chartData]="chartData" primaryKey="id" [data]="data" [allowFiltering]="true" [filterMode]="'excelStyleFilter'">
5-
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="id" [hidden]="true"></igx-column>
6-
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="category" [width]="'110px'"></igx-column>
7-
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="type" [filterable]="false" [width]="'130px'"></igx-column>
8-
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="country" [width]="'100px'"></igx-column>
9-
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="price" dataType="number" [width]="'120px'" >
10-
<ng-template igxCell let-cell="cell">
11-
<div class="finjs-icons">
12-
<span>{{cell.value | currency:'USD':'symbol':'1.4-4'}}</span>
13-
</div>
14-
</ng-template>
15-
</igx-column>
16-
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="startY" [width]="'100px'" dataType="number" [formatter]="formatCurrency">
17-
</igx-column>
18-
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="startYDiff" dataType="number" [width]="'120px'" >
19-
<ng-template igxCell let-cell="cell">
20-
<div class="finjs-icons">
21-
<span>{{cell.value | number:'1.4-4'}}%</span>
22-
</div>
23-
</ng-template>
24-
</igx-column>
25-
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="buy" [width]="'100px'" dataType="number" [formatter]="formatCurrency" >
26-
</igx-column>
27-
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="buyDiff" dataType="number" [width]="'120px'" >
28-
<ng-template igxCell let-cell="cell">
29-
<div class="finjs-icons">
30-
<span>{{cell.value | number:'1.4-4'}}%</span>
31-
</div>
32-
</ng-template>
33-
</igx-column>
34-
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="highY" [width]="'100px'" dataType="number" [formatter]="formatCurrency"
35-
>
36-
</igx-column>
37-
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="highYDiff" [width]="'120px'" dataType="number" [formatter]="formatCurrency"
38-
>
39-
<ng-template igxCell let-cell="cell">
40-
<div class="finjs-icons">
41-
<span>{{cell.value | currency:'USD':'symbol':'1.4-4'}}</span>
42-
</div>
43-
</ng-template>
44-
</igx-column>
45-
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="openPrice" dataType="number" [formatter]="formatCurrency"
46-
[width]="'130px'">
47-
<ng-template igxCell let-cell="cell">
48-
<div class="finjs-icons">
49-
<span>{{cell.value | currency:'USD':'symbol':'1.4-4'}}</span>
50-
</div>
51-
</ng-template>
52-
</igx-column>
53-
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="openPriceDiff" dataType="number" [width]="'140px'" >
54-
<ng-template igxCell let-cell="cell">
55-
<div class="finjs-icons">
56-
<span>{{cell.value | number:'1.4-4'}}%</span>
57-
</div>
58-
</ng-template>
59-
</igx-column>
60-
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="lowY" [width]="'100px'" dataType="number" [formatter]="formatCurrency">
61-
</igx-column>
62-
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="lowYDiff" dataType="number" [width]="'120px'" >
63-
<ng-template igxCell let-cell="cell">
64-
<div class="finjs-icons">
65-
<span>{{cell.value | number:'1.4-4'}}%</span>
66-
</div>
67-
</ng-template>
68-
</igx-column>
69-
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="highD" [width]="'100px'" dataType="number" [headerClasses]="'headerAlignSyle'"
70-
[formatter]="formatCurrency">
71-
</igx-column>
72-
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="highDDiff" dataType="number" [width]="'120px'" >
73-
<ng-template igxCell let-cell="cell">
74-
<div class="finjs-icons">
75-
<span>{{cell.value | number:'1.4-4'}}%</span>
76-
</div>
77-
</ng-template>
78-
</igx-column>
79-
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="lowD" [width]="'100px'" dataType="number" [formatter]="formatCurrency">
80-
</igx-column>
81-
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="lowDDiff" dataType="number" [width]="'120px'" >
82-
<ng-template igxCell let-cell="cell">
83-
<div class="finjs-icons">
84-
<span>{{cell.value | number:'1.4-4'}}%</span>
85-
</div>
86-
</ng-template>
87-
</igx-column>
88-
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="sell" [width]="'110px'" dataType="number" [formatter]="formatCurrency" >
89-
</igx-column>
90-
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="sellDiff" dataType="number" [width]="'120px'" >
91-
<ng-template igxCell let-cell="cell">
92-
<div class="finjs-icons">
93-
<span>{{cell.value | number:'1.4-4'}}%</span>
94-
</div>
95-
</ng-template>
96-
</igx-column>
97-
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="region"></igx-column>
98-
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="contract"></igx-column>
99-
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="settlement" [width]="'150px'" ></igx-column>
100-
</igx-grid>
101-
</div>
2+
<div slot="grid" igxOverlayOutlet style="height: 100%">
3+
<igx-grid #grid columnSelection="multiple" [moving]="true" igxChartIntegration igxConditionalFormatting igxContextMenu
4+
[chartData]="chartData" primaryKey="id" [data]="data" [allowFiltering]="true" [filterMode]="'excelStyleFilter'">
5+
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="id" [hidden]="true"></igx-column>
6+
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="category" [width]="'110px'"></igx-column>
7+
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="type" [filterable]="false" [width]="'130px'"></igx-column>
8+
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="country" [width]="'100px'"></igx-column>
9+
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="price" dataType="number" [width]="'120px'" >
10+
<ng-template igxCell let-cell="cell">
11+
<div class="finjs-icons">
12+
<span>{{cell.value | currency:'USD':'symbol':'1.4-4'}}</span>
13+
</div>
14+
</ng-template>
15+
</igx-column>
16+
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="startY" [width]="'100px'" dataType="number" [formatter]="formatCurrency">
17+
</igx-column>
18+
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="startYDiff" dataType="number" [width]="'120px'" >
19+
<ng-template igxCell let-cell="cell">
20+
<div class="finjs-icons">
21+
<span>{{cell.value | number:'1.4-4'}}%</span>
22+
</div>
23+
</ng-template>
24+
</igx-column>
25+
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="buy" [width]="'100px'" dataType="number" [formatter]="formatCurrency" >
26+
</igx-column>
27+
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="buyDiff" dataType="number" [width]="'120px'" >
28+
<ng-template igxCell let-cell="cell">
29+
<div class="finjs-icons">
30+
<span>{{cell.value | number:'1.4-4'}}%</span>
31+
</div>
32+
</ng-template>
33+
</igx-column>
34+
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="highY" [width]="'100px'" dataType="number" [formatter]="formatCurrency"
35+
>
36+
</igx-column>
37+
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="highYDiff" [width]="'120px'" dataType="number" [formatter]="formatCurrency"
38+
>
39+
<ng-template igxCell let-cell="cell">
40+
<div class="finjs-icons">
41+
<span>{{cell.value | currency:'USD':'symbol':'1.4-4'}}</span>
42+
</div>
43+
</ng-template>
44+
</igx-column>
45+
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="openPrice" dataType="number" [formatter]="formatCurrency"
46+
[width]="'130px'">
47+
<ng-template igxCell let-cell="cell">
48+
<div class="finjs-icons">
49+
<span>{{cell.value | currency:'USD':'symbol':'1.4-4'}}</span>
50+
</div>
51+
</ng-template>
52+
</igx-column>
53+
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="openPriceDiff" dataType="number" [width]="'140px'" >
54+
<ng-template igxCell let-cell="cell">
55+
<div class="finjs-icons">
56+
<span>{{cell.value | number:'1.4-4'}}%</span>
57+
</div>
58+
</ng-template>
59+
</igx-column>
60+
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="lowY" [width]="'100px'" dataType="number" [formatter]="formatCurrency">
61+
</igx-column>
62+
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="lowYDiff" dataType="number" [width]="'120px'" >
63+
<ng-template igxCell let-cell="cell">
64+
<div class="finjs-icons">
65+
<span>{{cell.value | number:'1.4-4'}}%</span>
66+
</div>
67+
</ng-template>
68+
</igx-column>
69+
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="highD" [width]="'100px'" dataType="number" [headerClasses]="'headerAlignSyle'"
70+
[formatter]="formatCurrency">
71+
</igx-column>
72+
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="highDDiff" dataType="number" [width]="'120px'" >
73+
<ng-template igxCell let-cell="cell">
74+
<div class="finjs-icons">
75+
<span>{{cell.value | number:'1.4-4'}}%</span>
76+
</div>
77+
</ng-template>
78+
</igx-column>
79+
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="lowD" [width]="'100px'" dataType="number" [formatter]="formatCurrency">
80+
</igx-column>
81+
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="lowDDiff" dataType="number" [width]="'120px'" >
82+
<ng-template igxCell let-cell="cell">
83+
<div class="finjs-icons">
84+
<span>{{cell.value | number:'1.4-4'}}%</span>
85+
</div>
86+
</ng-template>
87+
</igx-column>
88+
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="sell" [width]="'110px'" dataType="number" [formatter]="formatCurrency" >
89+
</igx-column>
90+
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="sellDiff" dataType="number" [width]="'120px'" >
91+
<ng-template igxCell let-cell="cell">
92+
<div class="finjs-icons">
93+
<span>{{cell.value | number:'1.4-4'}}%</span>
94+
</div>
95+
</ng-template>
96+
</igx-column>
97+
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="region"></igx-column>
98+
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="contract"></igx-column>
99+
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="settlement" [width]="'150px'" ></igx-column>
100+
</igx-grid>
101+
</div>
102102

103-
<div slot="chart-types-content" class="chart-types-container">
104-
<div *ngFor="let chartType of chartTypes">
105-
<div *ngIf="(allCharts |filterType:chartType).length > 0" class="wrapper">
106-
<div>{{chartType | titlecase}} Chart</div>
107-
<div class="types-section">
108-
<div *ngFor="let chart of (allCharts | filterType: chartType); let i=index"
109-
(click)="createChart(chart)"
110-
title="{{chart}}"
111-
[ngClass]="{'disabled': allCharts.indexOf(chart) === -1, 'selected': chart | hastDuplicateLayouts: dock.layout: selectedCharts}"
112-
style="width: 60px; margin-right: 20px; cursor: pointer; position: relative;">
113-
<img src="assets/images/svg/charts/{{chart}}.svg" />
114-
<igx-badge *ngIf="selectedCharts[chart]" icon="check"></igx-badge>
115-
</div>
103+
<div slot="chart-types-content" class="chart-types-container">
104+
@for (chartType of chartTypes; track chartType) {
105+
<div>
106+
@if ((allCharts |filterType:chartType).length > 0) {
107+
<div class="wrapper">
108+
<div>{{chartType | titlecase}} Chart</div>
109+
<div class="types-section">
110+
@for (chart of (allCharts | filterType: chartType); track chart; let i = $index) {
111+
<div
112+
(click)="createChart(chart)"
113+
title="{{chart}}"
114+
[ngClass]="{'disabled': allCharts.indexOf(chart) === -1, 'selected': chart | hastDuplicateLayouts: dock.layout: selectedCharts}"
115+
style="width: 60px; margin-right: 20px; cursor: pointer; position: relative;">
116+
<img src="assets/images/svg/charts/{{chart}}.svg" />
117+
@if (selectedCharts[chart]) {
118+
<igx-badge icon="check"></igx-badge>
119+
}
116120
</div>
117-
<igx-divider></igx-divider>
121+
}
118122
</div>
119-
</div>
120-
</div>
123+
<igx-divider></igx-divider>
124+
</div>
125+
}
126+
</div>
127+
}
128+
</div>
121129

122-
<app-dock-slot *ngFor="let chart of allCharts" [id]="chart" >
130+
@for (chart of allCharts; track chart) {
131+
<app-dock-slot [id]="chart" >
123132
</app-dock-slot>
133+
}
124134
</igc-dockmanager>
125135

‎projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { FinancialData } from '../../data/financialData';
66
import { FloatingPanesService } from '../../services/floating-panes.service';
77
import { DockSlotComponent } from './dock-slot/dock-slot.component';
88
import { IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxDividerDirective, IgxBadgeComponent } from 'igniteui-angular';
9-
import { NgFor, NgIf, NgClass, DecimalPipe, TitleCasePipe, CurrencyPipe } from '@angular/common';
9+
import { NgClass, DecimalPipe, TitleCasePipe, CurrencyPipe } from '@angular/common';
1010

1111
@Pipe({
1212
name: 'filterType'
@@ -53,7 +53,7 @@ export class HastDuplicateLayouts implements PipeTransform {
5353
templateUrl: './data-analysis-dock-manager.component.html',
5454
styleUrls: ['./data-analysis-dock-manager.component.scss'],
5555
providers: [FloatingPanesService],
56-
imports: [IgxGridComponent, IgxChartIntegrationDirective, IgxBadgeComponent, IgxColumnComponent, IgxCellTemplateDirective, NgFor, NgIf, NgClass, IgxDividerDirective, DockSlotComponent, DecimalPipe, TitleCasePipe, CurrencyPipe, FilterTypePipe, HastDuplicateLayouts],
56+
imports: [IgxGridComponent, IgxChartIntegrationDirective, IgxBadgeComponent, IgxColumnComponent, IgxCellTemplateDirective, NgClass, IgxDividerDirective, DockSlotComponent, DecimalPipe, TitleCasePipe, CurrencyPipe, FilterTypePipe, HastDuplicateLayouts],
5757
schemas: [CUSTOM_ELEMENTS_SCHEMA]
5858
})
5959
export class DataAnalysisDockManagerComponent implements OnInit, AfterViewInit {

0 commit comments

Comments
 (0)