Skip to content

Commit ed0a1c4

Browse files
sha4besobolevskaiamichelu89pavel-s-epam
authored
feat: Add Aspect Model semantic Explanation (#124)
* feat: Create an external link template for a table column * Generate Semantic Explanation map for an Aspect Model * Update Table Cell component to show copy icon * fix: Add translation * Update MultiLanguageText type generation * fix: Update EsmfTableCellLinkComponent * Add semantic explanation to the table Signed-off-by: Pavel Shalamkov <[email protected]> --------- Signed-off-by: Pavel Shalamkov <[email protected]> Co-authored-by: Evgeniya Sobolevskaya <[email protected]> Co-authored-by: Michele Santoro <[email protected]> Co-authored-by: Pavel Shalamkov <[email protected]>
1 parent 78a1b82 commit ed0a1c4

23 files changed

+289
-67
lines changed

‎src/ng-generate/components/shared/generators/constants/index.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/*
2+
* Copyright Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
3+
*/
4+
5+
export {generateSemanticExplanation} from './semantic-explanation/index';

‎src/ng-generate/components/shared/generators/constants/semantic-explanation/files/__name@dasherize__-senantic-explanation.const.ts.template‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
2+
/** <%= options.generationDisclaimerText %> **/
3+
4+
/** TODO does it make sense to all restrictions by Table Columns Enum to match all the active columns??? **/
5+
6+
export const <%= classify(name) %>SemanticExplanation: Record<string, {name: string; description: string}> = {
7+
<% for(let column of options.tableColumns) {
8+
let propertyLocaleKeyPath = `${options.templateHelper.getVersionedAccessPrefix(options)}${options.isAspectSelected ? options.jsonAccessPath : ''}${column.complexPrefix}${column.property.name}`; %>
9+
'<%= column.property.name %>': {name: '<%= propertyLocaleKeyPath %>.preferredName', description: '<%= propertyLocaleKeyPath %>.description'},
10+
<% } %>
11+
};

‎src/ng-generate/components/shared/generators/constants/semantic-explanation/index.ts‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/*
2+
* Copyright (c) 2024 Robert Bosch Manufacturing Solutions GmbH
3+
*
4+
* See the AUTHORS file(s) distributed with this work for
5+
* additional information regarding authorship.
6+
*
7+
* This Source Code Form is subject to the terms of the Mozilla Public
8+
* License, v. 2.0. If a copy of the MPL was not distributed with this
9+
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
10+
*
11+
* SPDX-License-Identifier: MPL-2.0
12+
*/
13+
14+
import {
15+
apply,
16+
applyTemplates,
17+
MergeStrategy,
18+
mergeWith,
19+
move,
20+
Rule,
21+
SchematicContext,
22+
Tree,
23+
url
24+
} from '@angular-devkit/schematics';
25+
import {strings} from '@angular-devkit/core';
26+
import {Values} from '../../../schema';
27+
import {getTableColumValues} from '../../../utils';
28+
29+
export function generateSemanticExplanation(options: Values): Rule {
30+
return (tree: Tree, _context: SchematicContext) => {
31+
return mergeWith(
32+
apply(url('../shared/generators/constants/semantic-explanation/files'), [
33+
applyTemplates({
34+
classify: strings.classify,
35+
dasherize: strings.dasherize,
36+
options: {...options,
37+
tableColumns: getTableColumValues(options.listAllProperties, options)
38+
},
39+
name: options.name
40+
}),
41+
move('src/app/shared/constants')
42+
]),
43+
options.overwrite ? MergeStrategy.Overwrite : MergeStrategy.Error,
44+
);
45+
};
46+
47+
}

‎src/ng-generate/components/shared/generators/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export * from './components/index';
1515
export * from './directives/index';
1616
export * from './modules/index';
1717
export * from './pipes/index';
18+
export * from './constants/index';
1819
export * from './services/index';
1920
export * from './styles/index';
2021
export * from './utils/index';

‎src/ng-generate/components/shared/generators/language/files/__name@dasherize__.translation.json.template‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,7 @@
162162
"restoreDefaults": "Restore Defaults",
163163
"columns": "Columns",
164164
"export": "Export",
165+
"noLink": "No link",
165166
"toolbar": {
166167
"sorted_tooltip": "Sort data by property",
167168
"sort_dir_tooltip": "Sort data direction",

‎src/ng-generate/components/shared/index.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import {
4040
} from './generators';
4141
import {APP_SHARED_MODULES, cardModules, formModules, tableModules, updateSharedModule} from '../../../utils/modules';
4242
import {WIZARD_CONFIG_FILE} from '../../prompter/index';
43+
import {generateSemanticExplanation} from './generators/constants';
4344

4445
export let options: Schema;
4546

@@ -98,6 +99,9 @@ export function prepareOptions(schema: Schema, componentType: ComponentType): Sc
9899
skipImport: false,
99100
};
100101

102+
console.log('---> options.configFile');
103+
console.log(options.configFile);
104+
101105
if (options.configFile === 'wizard.config.json') {
102106
options.configFile = WIZARD_CONFIG_FILE;
103107
}
@@ -250,6 +254,7 @@ export function generateGeneralFilesRules(): Array<Rule> {
250254
generateValidateInputDirective(options),
251255
generateHorizontalOverflowDirective(options),
252256
generateShowDescriptionPipe(options),
257+
generateSemanticExplanation(options as Values)
253258
];
254259
}
255260

@@ -427,6 +432,7 @@ export function formatAllFilesRule(): Rule {
427432
optionsPath.replace('app', 'assets/i18n'),
428433
'src/app/shared/directives',
429434
'src/app/shared/pipes',
435+
'src/app/shared/constants',
430436
'src/app/shared/services',
431437
`src/app/shared/components/${options.name}`,
432438
'src/assets/scss',

‎src/ng-generate/components/shared/methods/generation/extended-table.html.template‎

Lines changed: 30 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,7 @@
2929
</ng-container>
3030
<% } %>
3131

32-
<% let tableColumValuesFunc = options.tableColumValues(options.allProps, options); %>
33-
34-
<% for(let value of tableColumValuesFunc) { %>
32+
<% for(let value of options.tableColumns) { %>
3533
<%
3634
let language = options.templateHelper.isMultiStringProperty(value.property) ? '[currentLanguage]' : '';
3735
let propertyName = options.templateHelper.isEnumPropertyWithEntityValues(value.property)
@@ -43,6 +41,7 @@
4341
let datePipe = options.templateHelper.isDateTimeProperty(value.property) ? `| date: ${options.resolveDateTimeFormat(options, value.property)}` : '';
4442
let descriptionPipe = options.templateHelper.isEnumPropertyWithEntityValues(value.property) ? ` | showDescription:get${classify(value.property.name)}Value` : '';
4543
let cellContent = `!(${isEmptyValue}) ? (row.${cellPropertyPath}${descriptionPipe}${language}${datePipe}) : '-'`;
44+
let isLink = options.templateHelper.isLinkProperty(value.property)
4645
%>
4746

4847
<!-- <%= cellPropertyPath %> Column -->
@@ -51,12 +50,18 @@
5150
<%= options.templateHelper.isNumberProperty(value.property) ? `class="table-header-number"` : '' %>
5251
[resizeColumn]="true" [index]="<%= value.index %>" (dragging)='dragging = $event'
5352
>
54-
<span [matTooltip]=" '<%= propertyLocaleKeyPath %>.description' | transloco"
55-
[matTooltipDisabled]="headerTooltipsOff"
56-
matTooltipPosition="above"
57-
data-test="table-header-text">
58-
{{ '<%= propertyLocaleKeyPath %>.preferredName' | transloco }}
53+
<span data-test="table-header-text">
54+
{{ '<%= propertyLocaleKeyPath %>.preferredName' | transloco }}
5955
</span>
56+
<mat-icon
57+
class="table-header-icon material-icons"
58+
*ngIf="!headerTooltipsOff"
59+
[matTooltip]="'<%= propertyLocaleKeyPath %>.description' | transloco"
60+
(click)="$event.stopPropagation()"
61+
matTooltipClass="table-column-tooltip"
62+
matTooltipPosition="above"
63+
data-test="column-info-icon"
64+
>info_outlined</mat-icon>
6065
</th>
6166

6267
<td data-test="table-cell"
@@ -67,21 +72,29 @@
6772
<% } %>
6873
>
6974

70-
<esmf-table-cell
71-
[value]="<%= cellContent %>"
72-
<% if(options.hasSearchBar) { %>
73-
[configs]="configs"
74-
[highlightString]="highlightString"
75-
<% } %>
76-
(copyToClipboardEvent)="copyToClipboard($event)"
77-
></esmf-table-cell>
75+
<% if (isLink) { %>
76+
<esmf-table-cell-link
77+
[value]="<%= cellContent %>"
78+
[tooltipMessage]="'noLink' | transloco "
79+
></esmf-table-cell-link>
80+
<% } else { %>
81+
<esmf-table-cell
82+
[value]="<%= cellContent %>"
83+
[description]="'<%= propertyLocaleKeyPath %>.description' | transloco"
84+
<% if(options.hasSearchBar) { %>
85+
[configs]="configs"
86+
[highlightString]="highlightString"
87+
<% } %>
88+
(copyToClipboardEvent)="copyToClipboard($event)"
89+
></esmf-table-cell>
90+
<% } %>
7891
</td>
7992
</ng-container>
8093
<% } %>
8194

8295
<% if(options.customColumns && options.customColumns.length > 0) { %>
8396
<% for(let [index, columnName] of options.customColumns.entries()) { %>
84-
<% let customColumnIndex = tableColumValuesFunc.length + index + 1; %>
97+
<% let customColumnIndex = options.tableColumns.length + index + 1; %>
8598
<!-- <%= columnName %> Column -->
8699
<ng-container data-test="custom-column-container" matColumnDef="<%= columnName %>">
87100
<% if(options.enableVersionSupport) { %>

‎src/ng-generate/components/table/generators/components/table-cell-link/files/__name@dasherize__.component.html.template‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!-- <%= options.generationDisclaimerText %> -->
2+
3+
<button
4+
[matTooltipDisabled]="!isDisabled()"
5+
[class.button-disabled]="isDisabled()"
6+
[matTooltip]="tooltipMessage()"
7+
(click)="openExternalLink()"
8+
matTooltipPosition="above"
9+
mat-icon-button
10+
aria-label="link row"
11+
>
12+
<mat-icon class="material-icons">open_in_new</mat-icon>
13+
</button>

‎src/ng-generate/components/table/generators/components/table-cell-link/files/__name@dasherize__.component.scss.template‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/** <%= options.generationDisclaimerText %> **/
2+
3+
button {
4+
background-color: transparent;
5+
border: none;
6+
color: inherit;
7+
padding: 0;
8+
font: inherit;
9+
cursor: pointer;
10+
outline: inherit;
11+
}
12+
13+
.button-disabled {
14+
cursor: not-allowed;
15+
opacity: 0.4;
16+
}

‎src/ng-generate/components/table/generators/components/table-cell-link/files/__name@dasherize__.component.ts.template‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/** <%= options.generationDisclaimerText %> **/
2+
3+
import {ChangeDetectionStrategy, Component, computed, input, Signal} from '@angular/core';
4+
import {MatTooltipModule} from '@angular/material/tooltip';
5+
import {MatIconModule} from '@angular/material/icon';
6+
7+
@Component({
8+
standalone: true,
9+
selector: '<%= dasherize(name) %>',
10+
templateUrl: './<%= dasherize(name) %>.component.html',
11+
styleUrls: ['./<%= dasherize(name) %>.component.<%= options.style %>'],
12+
changeDetection: ChangeDetectionStrategy.OnPush,
13+
imports: [MatTooltipModule, MatIconModule]
14+
})
15+
export class EsmfTableCellLinkComponent {
16+
value = input.required<string>();
17+
tooltipMessage = input.required<string>();
18+
19+
isDisabled: Signal<boolean> = computed(() => this.value() === '-');
20+
21+
openExternalLink() {
22+
if (this.isDisabled()){
23+
return;
24+
}
25+
26+
window.open(this.value(), '_blank');
27+
}
28+
}

0 commit comments

Comments
 (0)