@eui/cli 21.0.0-alpha.4 → 21.0.0-alpha.5

package/lib/skeletons/web-spring-boot/myapp-web-rest/src/main/resources/data.sql

@@ -0,0 +1,11 @@
+insert into t_address (address_id, street, postal_code, city, country) values (-4, 'rue Montoyer, 15', '1000', 'Bruxelles', 'Belgium');
+insert into t_building (building_id, name, address_id) values ((select seq_building.nextval from dual), 'Montoyer 15 "Black Pearl"', -4);
+
+insert into t_address (address_id, street, postal_code, city, country) values (-3, 'rue de la Loi, 200', '1040', 'Bruxelles', 'Belgium');
+insert into t_building (building_id, name, address_id) values ((select seq_building.nextval from dual), 'Berlaymont', -3);
+
+insert into t_address (address_id, street, postal_code, city, country) values (-2, 'rue Breydel, 4', '1040', 'Bruxelles', 'Belgium');
+insert into t_building (building_id, name, address_id) values ((select seq_building.nextval from dual), 'Belliard 232', -2);
+
+insert into t_address (address_id, street, postal_code, city, country) values (-1, 'Place Rogier, 16', '1210', 'Saint-Josse', 'Belgium');
+insert into t_building (building_id, name, address_id) values ((select seq_building.nextval from dual), 'Covent Garden 2', -1);

package/lib/skeletons/web-spring-boot/pom.xml

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+
+    <groupId>@app.group.id@.@app.name@</groupId>
+    <artifactId>@app.name@</artifactId>
+    <version>0.1.0-SNAPSHOT</version>
+    <packaging>pom</packaging>
+    <name>@app.name@</name>
+    <description>Demo project for Spring Boot</description>
+
+    <parent>
+        <groupId>org.springframework.boot</groupId>
+        <artifactId>spring-boot-starter-parent</artifactId>
+        <version>3.4.4</version>
+    </parent>
+
+    <properties>
+        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
+        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
+        <java.version>21</java.version>
+    </properties>
+
+    <modules>
+        <module>@app.name@-web-rest</module>
+        <module>@app.name@-web</module>
+    </modules>
+
+</project>

package/lib/skeletons/web-symfony/myapp-web/angular.json

@@ -0,0 +1,169 @@
+{
+    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "version": 1,
+    "newProjectRoot": "projects",
+    "defaultProject": "app",
+    "cli": {
+        "analytics": false
+    },
+    "projects": {
+      "app": {
+        "root": "",
+        "sourceRoot": "src",
+        "projectType": "application",
+        "prefix": "app",
+        "schematics": {
+          "@schematics/angular:component": {
+            "styleext": "scss"
+          }
+        },
+        "architect": {
+          "build": {
+            "builder": "ngx-build-plus:build",
+            "options": {
+              "outputPath": "dist",
+              "index": "src/index.html",
+              "main": "src/main.ts",
+              "polyfills": "src/polyfills.ts",
+              "tsConfig": "src/tsconfig.app.json",
+              "assets": [
+                "src/favicon.ico",
+                "src/assets",
+                {
+                  "glob": "**/*",
+                  "input": "node_modules/@eui/core/assets/",
+                  "output": "./assets"
+                },
+                {
+                  "glob": "**/*",
+                  "input": "node_modules/@eui/styles/dist/assets/images",
+                  "output": "./assets/images"
+                }
+              ],
+              "styles": [
+                "node_modules/@eui/styles/dist/styles/eui.css",
+                "node_modules/@eui/styles/dist/styles/eui-utilities.css",
+                "node_modules/@eui/styles/dist/styles/eui-legacy-bootstrap-utilities.css",
+                "src/styles.scss"
+              ]
+            },
+            "configurations": {
+              "production": {
+                "fileReplacements": [
+                  {
+                    "replace": "src/environments/environment.ts",
+                    "with": "src/environments/environment.prod.ts"
+                  }
+                ],
+                "optimization": true,
+                "outputHashing": "all",
+                "sourceMap": false,
+                "extractCss": true,
+                "namedChunks": true,
+                "aot": true,
+                "extractLicenses": true,
+                "vendorChunk": false,
+                "buildOptimizer": true,
+                "budgets": [
+                  {
+                    "type": "initial",
+                    "maximumWarning": "3mb",
+                    "maximumError": "5mb"
+                  }
+                ]
+              },
+              "dev": {
+                "fileReplacements": [
+                  {
+                    "replace": "src/environments/environment.ts",
+                    "with": "src/environments/environment.dev.ts"
+                  }
+                ]
+              }
+            }
+          },
+          "serve": {
+            "builder": "@angular-devkit/build-angular:dev-server",
+            "options": {
+              "browserTarget": "app:build"
+            },
+            "configurations": {
+              "proxy-mock": {
+                "browserTarget": "app:build",
+                "proxyConfig": "proxy-mock.conf.json"
+              },
+              "proxy": {
+                "browserTarget": "app:build",
+                "proxyConfig": "proxy.conf.json"
+              },
+              "production": {
+                "browserTarget": "app:build:production"
+              }
+            }
+          },
+          "test": {
+            "builder": "@angular-devkit/build-angular:karma",
+            "options": {
+              "main": "src/test.ts",
+              "polyfills": "src/polyfills.ts",
+              "tsConfig": "src/tsconfig.spec.json",
+              "karmaConfig": "src/karma.conf.js",
+              "styles": [
+                "src/styles.scss"
+              ],
+              "scripts": [],
+              "assets": [
+                "src/favicon.ico",
+                "src/assets",
+                {
+                  "glob": "**/*",
+                  "input": "node_modules/@eui/core/assets/",
+                  "output": "./assets"
+                }
+              ]
+            }
+          },
+          "lint": {
+            "builder": "@angular-devkit/build-angular:tslint",
+            "options": {
+              "tsConfig": [
+                "src/tsconfig.app.json",
+                "src/tsconfig.spec.json"
+              ],
+              "exclude": [
+                "**/node_modules/**"
+              ]
+            }
+          }
+        }
+      },
+      "app-e2e": {
+        "root": "e2e/",
+        "projectType": "application",
+        "prefix": "",
+        "architect": {
+          "e2e": {
+            "builder": "@angular-devkit/build-angular:protractor",
+            "options": {
+              "protractorConfig": "e2e/protractor.conf.js",
+              "devServerTarget": "app:serve"
+            },
+            "configurations": {
+              "production": {
+                "devServerTarget": "app:serve:production"
+              }
+            }
+          },
+          "lint": {
+            "builder": "@angular-devkit/build-angular:tslint",
+            "options": {
+              "tsConfig": "e2e/tsconfig.e2e.json",
+              "exclude": [
+                "**/node_modules/**"
+              ]
+            }
+          }
+        }
+      }
+    }
+  }

package/lib/skeletons/web-symfony/myapp-web/package.json

@@ -0,0 +1,23 @@
+{
+    "name": "eui-angular-app",
+    "version": "21.0.0-alpha.4",
+    "license": "EUPL-1.1",
+    "description": "eUI JEE Symfony app scripts",
+    "scripts": {
+        "ng": "ng",
+        "e2e": "ng e2e",
+        "stylelint": "stylelint \"src/**/*.scss\"",
+        "tslint": "tslint \"src/**/*.ts\"",
+        "clean": "rimraf out-tsc dist packages/**/dist/** packages/**/out-tsc/** packages/**/src/lib/**/*.js packages/**/src/lib/**/*.js.map",
+        "start-symfony": "eui-scripts start-symfony --configuration=dev",
+        "start-serve": "eui-scripts serve-app --configuration=proxy-mock",
+        "start": "npm run clean && npm-run-all --parallel start-symfony start-serve",
+        "start-mean": "npm run clean && npm-run-all --parallel start-mock-server-mean start-serve",
+        "start-proxy": "npm run clean && eui-scripts serve-app --configuration=proxy",
+        "generate-changelog": "eui-scripts generate-changelog"
+    },
+    "private": true,
+    "dependencies": {
+        "@eui/deps-base": "21.0.0-alpha.4"
+    }
+}

package/lib/skeletons/web-symfony/myapp-web/src/app/app-routing.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+    { path: '', redirectTo: 'screen/home', pathMatch: 'full' },
+    { path: 'index.jsp', redirectTo: 'screen/home' },
+    { path: 'screen/home', loadChildren: './features/home/home.module#Module' },
+    { path: 'screen/products', loadChildren: './features/products/products.module#ProductsModule' },
+    { path: 'screen/module1', loadChildren: './features/module1/module1.module#Module' },
+    { path: 'screen/module2', loadChildren: './features/module2/module2.module#Module' }
+];
+
+@NgModule({
+    imports: [
+        RouterModule.forRoot(routes),
+    ],
+})
+export class AppRoutingModule {}

package/lib/skeletons/web-symfony/myapp-web/src/app/app.component.ts

@@ -0,0 +1,77 @@
+import { Component, OnInit } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { Observable } from 'rxjs/Observable';
+import { Store } from '@ngrx/store';
+
+import { UserState, getUserState, UxLink, UxLanguage } from '@eui/core';
+
+@Component({
+    selector: 'app-root',
+    templateUrl: './app.component.html'
+})
+export class AppComponent implements OnInit {
+    userState: Observable<UserState>;
+
+    menuLinks: UxLink[] = [];
+    notificationLinks: UxLink[] = [];
+
+    constructor(
+        private translateService: TranslateService,
+        private store: Store<any>,
+    ) {
+    }
+
+    ngOnInit() {
+        this.userState = <any>this.store.select(getUserState);
+
+        this._createMenuLinks();
+        this._createNotifications();
+    }
+
+    onLanguageChanged(language: UxLanguage) {
+        this.translateService.use(language.code);
+    }
+
+    private _createMenuLinks() {
+        this.menuLinks = [
+            new UxLink(
+                {
+                    label: 'HOME', url: '/screen/home', isHome: true
+                }
+            ),
+            new UxLink(
+                {
+                    label: 'Module1', url: '/screen/module1', children: [
+                        new UxLink({ label: 'disabled item', disabled: true }),
+                        new UxLink({ label: 'Page 1', url: '/screen/module1/page1' }),
+                        new UxLink({ label: 'Page 2', url: '/screen/module1/page2' })
+                    ]
+                }
+            ),
+            new UxLink(
+                {
+                    label: 'Module2', url: '/screen/module2'
+                }
+            ),
+            new UxLink(
+                {
+                    label: 'Products', url: '/screen/products'
+                }
+            )
+        ];
+    }
+
+    private _createNotifications() {
+        this.notificationLinks = [
+            new UxLink(
+                { label: 'Notification title', subLabel: 'This is the description of the noficiation' }
+            ),
+            new UxLink(
+                { label: 'Notification title', subLabel: 'This is the description of the noficiation' }
+            ),
+            new UxLink(
+                 { label: 'Notification title', subLabel: 'This is the description of the noficiation' }
+            ),
+        ];
+    }
+}

package/lib/skeletons/web-symfony/myapp-web/src/app/features/products/components/products.component.html

@@ -0,0 +1,160 @@
+<div class="page-title">
+    List of products
+</div>
+
+<div class="row">
+    <div class="col-sm-8">
+        <ux-panel label="List of Products" [isBlocked]="mode === 'load'" contentHeight="60vh">
+
+            <uxPanelHeaderRightContent>
+                <div class="flex-container">
+                    <ux-button-group [hasPairedIcon]="true" styleClass="ml-3" (clicked)="addItem()">
+                        <ux-button-group-item label="Create new product"></ux-button-group-item>
+                        <ux-button-group-item iconClass="fa fa-plus"></ux-button-group-item>
+                    </ux-button-group>
+                </div>
+            </uxPanelHeaderRightContent>
+
+
+            <ng-container *ngIf="products && mode !== 'load'; else loading">
+
+
+                <p-table [value]="products" [paginator]="true" [rows]="10" [pageLinks]="3" [rowsPerPageOptions]="[5,10,20]" >
+                    <ng-template pTemplate="header" let-columns>
+                        <tr>
+                            <th [pSortableColumn]="'productId'">ID <p-sortIcon [field]="'productId'"></p-sortIcon></th>
+                            <th [pSortableColumn]="'name'">Name <p-sortIcon [field]="'name'"></p-sortIcon></th>
+                            <th [pSortableColumn]="'price'">Price <p-sortIcon [field]="'price'"></p-sortIcon></th>
+                            <th [pSortableColumn]="'description'">Description <p-sortIcon [field]="'description'"></p-sortIcon></th>
+                            <th class="actionsColumn">ACTIONS</th>
+                        </tr>
+                    </ng-template>
+
+                    <ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex" >
+                        <tr [pSelectableRow]="rowData" [pSelectableRowIndex]="rowIndex">
+                            <td>{{rowData.productId}}</td>
+                            <td>
+                                <ux-badge typeClass="default">
+                                    {{ rowData.name }}
+                                </ux-badge>
+                            </td>
+                            <td>{{rowData.price}}</td>
+                            <td>{{rowData.description}}</td>
+
+                            <td class="actionsColumn">
+                                <div class="flex-container justify-content-center">
+                                    <ux-button [isFlat]="true" iconClass="fa fa-pencil" typeClass="info" (click)="editProduct(rowData)"></ux-button>
+                                    <ux-button [isFlat]="true" iconClass="fa fa-trash-o" typeClass="danger" (click)="deleteProduct(rowData.productId)"></ux-button>
+                                </div>
+                            </td>
+                        </tr>
+                    </ng-template>
+
+
+                </p-table>
+            </ng-container>
+
+
+
+            <ng-template #loading>
+                <ng-container *ngIf="! serviceError; else error">
+                    Loading...
+                </ng-container>
+            </ng-template>
+
+            <ng-template #error>
+                <ux-alert typeClass="warning">
+                    Unable to retrieve the list of products; please <a (click)="loadProducts()">try again</a> later.<br/>
+                    If the problem persists, please contact the administrator.<br/>
+                    <br/>
+                    <a (click)="serviceErrorVisible = !serviceErrorVisible">
+                        <span *ngIf="!serviceErrorVisible">Show technical reason</span>
+                        <span *ngIf="serviceErrorVisible">Hide technical reason</span>
+                    </a>
+                    <pre *ngIf="serviceErrorVisible">{{serviceError.message}}</pre>
+                </ux-alert>
+            </ng-template>
+        </ux-panel>
+    </div>
+
+    <div class="col-sm-4">
+            <ux-panel label="Products" [isBlocked]="mode === 'load'" contentHeight="60vh">
+                <pre>{{products | json}}</pre>
+            </ux-panel>
+    </div>
+</div>
+
+
+
+<!-- MODAL EDIT / NEW-->
+<ux-modal id="modal1b" titleLabel="{{actionLabel}}" [isFooterVisible]="false" [isSizeSmall]="true" (onDismiss)="onModalDismiss($event)" (onAccept)="onModalAccept($event)">
+    <uxModalBody>
+        <form [formGroup]="formInput" *ngIf="ItemSelected">
+                <div class="row">
+                    <div class="col-10">
+                        <ux-form-group label="Name:" isRequired="true">
+                            <ux-form-control  [(ngModel)]="ItemSelected.name" formControlName="name" placeholderLabel="es: iPad Pro 512GB" ></ux-form-control>
+                        </ux-form-group>
+
+                        <ux-form-group label="Price:" isRequired="true">
+                            <ux-form-control [(ngModel)]="ItemSelected.price"  [isNumber]="true" formControlName="price" placeholderLabel="price"></ux-form-control>
+                        </ux-form-group>
+
+
+                        <ux-form-group label="Description:" isRequired=true>
+                            <ux-form-control [(ngModel)]="ItemSelected.description" [isTextarea]="true" formControlName="description" placeholderLabel="description"></ux-form-control>
+                        </ux-form-group>
+
+                        <div class="text-right mt-3">
+                                <ux-button (click)="onUpdateSubmit(ItemSelected)"    class='ml-3' [isDisabled]="!formInput.valid">
+                                        Update Product
+                                </ux-button>
+                        </div>
+
+                    </div>
+                </div>
+        </form>
+
+
+        <form [formGroup]="formInput" *ngIf="!ItemSelected">
+                <div class="row">
+                    <div class="col-10">
+                        <ux-form-group label="Name:" isRequired="true">
+                            <ux-form-control  formControlName="name" placeholderLabel="es: iPad Pro 512GB" ></ux-form-control>
+                        </ux-form-group>
+
+                        <ux-form-group label="Price:" isRequired="true">
+                            <ux-form-control   [isNumber]="true" formControlName="price" placeholderLabel="price"></ux-form-control>
+                        </ux-form-group>
+
+
+                        <ux-form-group label="Description:" isRequired=true>
+                            <ux-form-control [isTextarea]="true" formControlName="description" placeholderLabel="description"></ux-form-control>
+                        </ux-form-group>
+
+                        <div class="text-right mt-3">
+                                <ux-button (click)="onSubmit()"    class='ml-3' [isDisabled]="!formInput.valid">
+                                        Save Product
+                                </ux-button>
+                        </div>
+
+                    </div>
+                </div>
+        </form>
+
+
+
+
+    </uxModalBody>
+</ux-modal>
+
+
+<!-- MODAL DELETE -->
+<ux-modal id="modaldelete" titleLabel="Modal title" [isSizeSmall]="true"
+    [isHandleCloseOnDismiss]="false" [isHandleCloseOnAccept]="false" [isHandleCloseOnClose]="false"
+    (onDismiss)="onModalDismiss($event)" (onAccept)="onModalAccept($event)" (onClose)="onModalClose($event)">
+    <uxModalBody>
+        <p>Are you sure to delete it?</p>
+    </uxModalBody>
+</ux-modal>
+

package/lib/skeletons/web-symfony/myapp-web/src/app/features/products/components/products.component.ts

@@ -0,0 +1,104 @@
+import { Component, OnInit } from '@angular/core';
+import { ProductsService } from '../services/products.service';
+import { Product } from '../models/product.model';
+import { UxService } from '@eui/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+
+@Component({
+    templateUrl: './products.component.html',
+    styleUrls: ['./products.component.scss'],
+})
+export class ProductsComponent implements OnInit {
+    formInput: FormGroup;
+    product: Product;
+    products: Array<Product>;
+    actionLabel: string;
+    serviceError: null;
+    IdSelected: number;
+    ItemSelected: Product;
+    mode = null;
+    modes: string [] = [];
+
+
+    constructor(protected productsService: ProductsService, public uxService: UxService, private fb: FormBuilder) {
+
+    }
+
+    ngOnInit() {
+        this.loadProducts();
+        this.buildForm();
+
+    }
+
+    loadProducts() {
+        this.serviceError = null;
+        this.productsService.loadProducts().subscribe(products => {
+            this.products = products.items;
+        }, error => {
+            this.serviceError = error;
+        });
+    }
+
+    buildForm(): void {
+
+        this.formInput = this.fb.group({
+            'name': [null , [Validators.required]],
+            'price': [null , [Validators.required]],
+            'description': [null , [Validators.required]]
+        });
+    }
+
+    editProduct(item: Product) {
+        this.ItemSelected = item;
+        this.actionLabel = 'Edit product';
+        this.uxService.openModal('modal1b');
+    }
+
+    deleteProduct(id: number) {
+        this.IdSelected = id;
+        this.uxService.openModal('modaldelete');
+    }
+
+    onModalAccept(event) {
+        this.productsService.deleteProduct(this.IdSelected).subscribe(product => {
+            let index = this.products.findIndex(item => item['productId'] === product['productId']);
+            this.products.splice(index, 1);
+        });
+        this.uxService.closeModal('modaldelete');
+    }
+
+    onModalDismiss(event) {
+        this.uxService.closeModal('modaldelete');
+    }
+
+    onModalClose(event) {
+        this.uxService.closeModal('modaldelete');
+    }
+
+    addItem() {
+        this.ItemSelected = null;
+        this.actionLabel = 'New product';
+        this.formInput.reset();
+        this.uxService.openModal('modal1b');
+    }
+
+    onSubmit() {
+        this.product = new Product(this.formInput.value);
+        this.productsService.addProduct(this.product).subscribe(product => {
+            this.products.push(product);
+            this.uxService.closeModal('modal1b');
+        }, error => {
+            this.serviceError = error;
+        });
+    }
+
+    onUpdateSubmit(ItemSelected: Product) {
+        this.product = new Product(this.formInput.value);
+        this.productsService.updateProduct(ItemSelected).subscribe(product => {
+            this.uxService.closeModal('modal1b');
+        }, error => {
+            this.serviceError = error;
+        });
+    }
+
+}

package/lib/skeletons/web-symfony/myapp-web/src/app/features/products/models/product.model.ts

@@ -0,0 +1,6 @@
+export class Product {
+
+    public constructor(init?: Partial<Product >) {
+        Object.assign(this, init);
+    }
+}

package/lib/skeletons/web-symfony/myapp-web/src/app/features/products/products-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { ProductsComponent } from './components/products.component';
+
+@NgModule({
+    imports: [
+        RouterModule.forChild([
+            { path: '', component: ProductsComponent },
+        ])
+    ],
+    exports: [
+        RouterModule
+    ]
+})
+export class ProductsRoutingModule {
+}

package/lib/skeletons/web-symfony/myapp-web/src/app/features/products/products.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PaginatorModule } from 'primeng/paginator';
+import { UxAllModule } from '@eui/core';
+import { ProductsComponent } from './components/products.component';
+import { ProductsService } from './services/products.service';
+import { ProductsRoutingModule } from './products-routing.module';
+import { TableModule } from 'primeng/table';
+
+@NgModule({
+    imports: [CommonModule, UxAllModule, ProductsRoutingModule, PaginatorModule, TableModule],
+    declarations: [ProductsComponent],
+    providers: [ProductsService]
+})
+export class ProductsModule {
+}