Feature/refactore proposal branch (#27)

Author: michelu89

package-lock.json

@@ -1,33 +1,33 @@
 {
-    "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
-    "schematics": {
-        "ng-add": {
-            "description": "Add ui schematics library",
-            "factory": "./ng-add/index#add"
-        },
-        "table": {
-            "description": "Create a component that displays data with a data-table",
-            "factory": "./ng-generate/table/index",
-            "schema": "./ng-generate/table/schema.json"
-        },
-        "table-prompter": {
-            "description": "generate custom prompter",
-            "factory": "./ng-generate/table-prompter/index"
-        },
-        "table-generation": {
-            "description": "Executes the table generation",
-            "factory": "./ng-generate/table/index#generateTable",
-            "schema": "./ng-generate/table/schema.json"
-        },
-        "i18n": {
-            "description": "Add i18n strategy to the application",
-            "factory": "./ng-generate/i18n/index",
-            "schema": "./ng-generate/i18n/schema.json"
-        },
-        "types": {
-            "description": "Generate type definitions for an aspect model",
-            "factory": "./ng-generate/types/index",
-            "schema": "./ng-generate/types/schema.json"
-        }
+  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-add": {
+      "description": "Add ui schematics library",
+      "factory": "./ng-add/index#add"
+    },
+    "table": {
+      "description": "Create a component that displays data with a data-table",
+      "factory": "./ng-generate/table/index",
+      "schema": "./ng-generate/table/schema.json"
+    },
+    "table-prompter": {
+      "description": "generate custom prompter",
+      "factory": "./ng-generate/table-prompter/index"
+    },
+    "table-generation": {
+      "description": "Executes the table generation",
+      "factory": "./ng-generate/table/index#generate",
+      "schema": "./ng-generate/table/schema.json"
+    },
+    "i18n": {
+      "description": "Add i18n strategy to the application",
+      "factory": "./ng-generate/i18n/index",
+      "schema": "./ng-generate/i18n/schema.json"
+    },
+    "types": {
+      "description": "Generate type definitions for an aspect model",
+      "factory": "./ng-generate/types/index",
+      "schema": "./ng-generate/types/schema.json"
     }
+  }
 }

src/collection.json

@@ -15,10 +15,10 @@ import {chain, Rule} from '@angular-devkit/schematics';
 import {Schema} from './schema';
 import {addPackageJsonDependencies, addPackageJsonScripts} from '../../utils/package-json';
 import {NodeDependencyType} from '@schematics/angular/utility/dependencies';
-import {generateTranslationModule} from '../../utils/aspect-model';
 import {TemplateHelper} from '../../utils/template-helper';
 import {formatGeneratedFiles} from '../../utils/file';
 import ora from 'ora';
+import {generateTranslationModule} from "../table/generators/modules/translation/index";
 
 /**
  * generates translation files for aspect model.

src/ng-generate/i18n/index.ts

@@ -190,7 +190,7 @@ function getTtlPaths(promptSubj: Subject<any>, allAnswers: Schema, subscriber: S
     // listener
     const process = inquirer.prompt(promptSubj as any).ui.process;
     process.subscribe(
-        (singleAnswer: {name: string; answer: any}) => {
+        (singleAnswer: { name: string; answer: any }) => {
             switch (true) {
                 case singleAnswer.name === createOrImport.name: {
                     if (singleAnswer.answer) {
@@ -255,7 +255,8 @@ function getTtlPaths(promptSubj: Subject<any>, allAnswers: Schema, subscriber: S
         err => {
             console.log('Error: ', err);
         },
-        () => {}
+        () => {
+        }
     );
 
     promptSubj.next(createOrImport);
@@ -357,7 +358,7 @@ function loadSourceProcessResult(allAnswers: any, tree: Tree, options: Schema, p
                     .then(aspect => {
                         resolve(
                             !aspect.isCollectionAspect &&
-                                loader.filterElements((entry: DefaultEntity) => entry instanceof DefaultEntity).length >= 1
+                            loader.filterElements((entry: DefaultEntity) => entry instanceof DefaultEntity).length >= 1
                         );
                     })
                     .catch(error => reject(error));
@@ -641,19 +642,19 @@ function getUserConfigQuestions(allAnswers: any, tree: Tree, options: Schema): Q
                                 value: 'addCustomCommandBarActions',
                             },
                         ];
-                        if (templateHelper.getStringProperties(options).length > 0) {
+                        if (templateHelper.getStringProperties(options as Schema).length > 0) {
                             choices.push({
                                 name: 'Search for string properties',
                                 value: 'addSearchBar',
                             });
                         }
-                        if (templateHelper.getDateProperties(options).length > 0) {
+                        if (templateHelper.getDateProperties(options as Schema).length > 0) {
                             choices.push({
                                 name: 'Quick filters for properties of type date',
                                 value: 'addDateQuickFilters',
                             });
                         }
-                        if (templateHelper.getEnumProperties(options).length > 0) {
+                        if (templateHelper.getEnumProperties(options as Schema).length > 0) {
                             choices.push({
                                 name: 'Quick filters for properties of type enumeration',
                                 value: 'addEnumQuickFilters',
@@ -672,25 +673,29 @@ function getUserConfigQuestions(allAnswers: any, tree: Tree, options: Schema): Q
         name: 'chooseLanguageForSearch',
         message: 'Which language should be used for the search functionality?',
         when: (answers: any) =>
-            answers.addCommandBar && new TemplateHelper().isAddCommandBarFunctionSearch(answers.enabledCommandBarFunctions),
+            answers.addCommandBar && new TemplateHelper().hasSearchBar(answers),
         choices: () => {
-            loadAspect(allAnswers, tree).then(aspect => {
-                const templateHelper = new TemplateHelper();
-                let selectedElement: Aspect | Entity = aspect;
-                if (allAnswers.selectedModelElementUrn && allAnswers.selectedModelElementUrn.length > 0) {
-                    selectedElement = loader.findByUrn(allAnswers.selectedModelElementUrn) as Aspect | Entity;
-                }
+            return new Promise<any>((resolve, reject) => {
+                loadAspect(allAnswers, tree)
+                    .then(aspect => {
+                        const templateHelper = new TemplateHelper();
+                        let selectedElement: Aspect | Entity = aspect;
+                        if (allAnswers.selectedModelElementUrn && allAnswers.selectedModelElementUrn.length > 0) {
+                            selectedElement = loader.findByUrn(allAnswers.selectedModelElementUrn) as Aspect | Entity;
+                        }
 
-                const languageCodes = templateHelper.resolveAllLanguageCodes(selectedElement);
-                const choices = [{name: 'English', value: 'en'}];
+                        const languageCodes = templateHelper.resolveAllLanguageCodes(selectedElement);
+                        const choices = [{name: 'English', value: 'en'}];
 
-                languageCodes.forEach(code => {
-                    if (code !== 'en') {
-                        choices.push({name: locale.getByTag(code).name, value: code});
-                    }
-                });
+                        languageCodes.forEach(code => {
+                            if (code !== 'en') {
+                                choices.push({name: locale.getByTag(code).name, value: code});
+                            }
+                        });
 
-                return choices;
+                        resolve(choices);
+                    })
+                    .catch(error => reject(error));
             });
         },
         default: 'en',

src/ng-generate/table-prompter/index.ts

@@ -0,0 +1,34 @@
+<div class="scrollable-chips-container" *ngIf="filterService.activeFilters.length">
+    <button data-test="scroll-left-button" mat-mini-fab class="mat-elevation-z0"
+            [disabled]="chipsScrollEl.disableLeftBtn" (click)="chipsScrollEl.scrollChipList('left')"
+            *ngIf="chipsScrollEl.scrollable">
+        <mat-icon data-test="scroll-left-icon" class="material-icons"
+                  [matTooltip]="'scroll.left' | translate">chevron_left
+        </mat-icon>
+    </button>
+    <div class="chip-list-container" data-test="chip-list-container" horizontalOverflow
+         #chipsScrollEl="horizontalOverflow" #chipList [chipsObj]="chips">
+        <mat-chip-list data-test="chip-list" #chips>
+            <mat-chip
+                    data-test="chip"
+                    *ngFor="let filter of filterService.activeFilters"
+                    [removable]="filter.removable"
+                    (removed)="triggerRemoveFilter(filter)"
+            >
+                <div data-test="chip-text" class="chip-text" matTooltip="{{ chipListValue(filter) }}">
+                    {{ chipListValue(filter) }}
+                </div>
+                <button *ngIf="filter.removable" matChipRemove data-test="mat-chip-remove">
+                    <mat-icon class="material-icons" data-test="remove-chip">cancel</mat-icon>
+                </button>
+            </mat-chip>
+        </mat-chip-list>
+    </div>
+    <button data-test="scroll-right-button" mat-mini-fab class="mat-elevation-z0"
+            [disabled]="chipsScrollEl.disableRightBtn" (click)="chipsScrollEl.scrollChipList('right')"
+            *ngIf="chipsScrollEl.scrollable">
+        <mat-icon data-test="scroll-right-icon" class="material-icons"
+                  [matTooltip]="'scroll.right' | translate">chevron_right
+        </mat-icon>
+    </button>
+</div>

src/ng-generate/table/generators/components/chip-list/files/__name@dasherize__-chip-list.component.html.template

@@ -0,0 +1,12 @@
+/** <%= options.generationDisclaimerText %> **/
+:host ::ng-deep .mat-chip-list-wrapper {
+  margin: 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+
+  .mat-chip {
+    flex: 0 0 auto;
+  }
+}

src/ng-generate/table/generators/components/chip-list/files/__name@dasherize__-chip-list.component.scss.template

@@ -0,0 +1,31 @@
+/** <%= options.enerationDisclaimerText %> **/
+import {Component, EventEmitter, Output} from '@angular/core';
+import {FilterEnums, FilterType, <%= classify(name) %>FilterService} from './<%= dasherize(name) %>-filter.service';
+
+@Component({
+    selector: 'chip-list',
+    templateUrl: './<%= dasherize(name) %>-chip-list.component.html',
+    styleUrls: ['./<%= dasherize(name) %>-chip-list.component.scss']
+})
+export class <%= classify(name) %>ChipListComponent {
+    @Output() removeFilter = new EventEmitter<any>();
+
+    constructor(public filterService: <%= classify(name) %>FilterService) {
+    }
+
+    triggerRemoveFilter(filter: any): void {
+      this.removeFilter.emit(filter);
+    }
+
+   chipListValue(filter: FilterType): string {
+     if (filter.type === FilterEnums.Search) {
+       return `${filter.filterValue}: ${filter.label}`;
+     }
+
+     if (filter.type === FilterEnums.Date) {
+       return filter.label;
+     }
+
+     return `${filter.prop}: ${filter.label}`;
+   }
+}

src/ng-generate/table/generators/components/chip-list/files/__name@dasherize__-chip-list.component.ts.template

@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2023 Robert Bosch Manufacturing Solutions GmbH
+ *
+ * See the AUTHORS file(s) distributed with this work for
+ * additional information regarding authorship.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import {
+    apply,
+    applyTemplates,
+    MergeStrategy,
+    mergeWith,
+    move,
+    Rule,
+    SchematicContext,
+    Tree,
+    url
+} from '@angular-devkit/schematics';
+import {strings} from '@angular-devkit/core';
+
+export function generateChipList(options: any): Rule {
+    return (tree: Tree, _context: SchematicContext) => {
+        return mergeWith(
+            apply(url('./generators/components/chip-list/files'), [
+                applyTemplates({
+                    classify: strings.classify,
+                    dasherize: strings.dasherize,
+                    options: options,
+                    name: options.name,
+                }),
+                move(options.path),
+            ]),
+            options.overwrite? MergeStrategy.Overwrite : MergeStrategy.Error
+        );
+    };
+}

src/ng-generate/table/generators/components/chip-list/index.ts

@@ -0,0 +1,51 @@
+<div class="mat-h3 selection-title" (click)="$event.stopPropagation();">{{ 'columns' | translate }}</div>
+
+<mat-divider></mat-divider>
+<mat-selection-list cdkDropList (cdkDropListDropped)="columnDrop($event)" data-test="column-selection-list" class="selection-list">
+  <mat-list-option cdkDrag data-test="column-list-option" *ngFor="let column of columns" [selected]="column.selected" (click)="columnClick($event, column)">
+    <div class="list-content">
+      <div class="list-text">
+        <div data-test="column-option-preferred-name">{{ '<% if (options.versionedAccessPrefix) { %><%= options.versionedAccessPrefix %><% } %>' + column.name + '.preferredName' | translate }}</div>
+        <div class="mat-small" data-test="column-option-description">{{ '<% if (options.versionedAccessPrefix) { %><%= options.versionedAccessPrefix %><% } %>' + column.name + '.description' | translate }}</div>
+      </div>
+      <mat-icon data-test="drag-indicator-icon" matTooltip="Draggable row" class="material-icons" style="color:rgba(0,0,0,.54);">drag_indicator</mat-icon>
+    </div>
+  </mat-list-option>
+</mat-selection-list>
+
+<mat-divider></mat-divider>
+
+<div data-test="column-menu-actions-container" class="menu-actions-container" (click)="stopMenuClosing($event)">
+  <button
+    data-test="restore-to-defaults-button"
+    class="column-menu-restore-btn"
+    mat-stroked-button
+    color="accent"
+    (click)="resetStoredColumns($event)"
+  >
+    <mat-icon data-test="restore-to-defaults-icon" class="material-icons">settings_backup_restore</mat-icon>
+    <span data-test="restore-to-defaults-text">{{ 'restoreDefaults' | translate }}</span>
+  </button>
+  <span class="spacer"></span>
+  <button
+    data-test="column-menu-cancel-button"
+    mat-stroked-button
+    color="accent"
+    class="column-menu-cancel-btn"
+    (click)="closeMenu()"
+  >
+    <mat-icon data-test="column-menu-cancel-icon" class="material-icons">close</mat-icon>
+    <span data-test="column-menu-cancel-text">{{ 'cancel' | translate }}</span>
+  </button>
+
+  <button
+    data-test="column-menu-apply-button"
+    mat-raised-button
+    color="primary"
+    class="column-menu-apply-btn"
+    (click)="storeColumns()"
+  >
+    <mat-icon data-test="column-menu-apply-icon" class="material-icons">check</mat-icon>
+    <span data-test="column-menu-apply-text">{{ 'apply' | translate }}</span>
+  </button>
+</div>