Develop

.github/workflows/pr_on_master.yml

@@ -6,7 +6,7 @@ on:
   pull_request:
     branches:
       - master
-    types: [ opened, reopened, synchronize ]
+    types: [opened, reopened, synchronize]
 
 jobs:
   build:
@@ -15,7 +15,7 @@ jobs:
     strategy:
       matrix:
         # Latest nodes only
-        node-version: [ 16.x ]
+        node-version: [16.x]
         # Define Steps
     steps:
       # Checkout code
@@ -37,13 +37,16 @@ jobs:
       - uses: c-hive/gha-npm-cache@v1
         if: ${{ !env.ACT }}
 
-      - uses: nrwl/nx-set-shas@v2
+      - uses: nrwl/nx-set-shas@v3
+        with:
+          main-branch-name: 'master'
 
       - name: Install environment
         run: npm ci --include=dev
 
       - run: npx nx workspace-lint
-      - run: npx nx format:check --base="origin/master" --code-coverage
+      - run: npx nx format:write --base="origin/master" --code-coverage --verbose
+      - run: npx nx format:check --base="origin/master" --code-coverage --verbose
       - run: npx nx affected --target=lint --parallel=3
-      - run: npx nx affected --target=test --parallel=3 --ci --code-coverage
+      - run: npx nx affected --target=test --parallel=3 --ci --code-coverage --verbose
       - run: npx nx affected --target=build --parallel=3

README.md

@@ -1,12 +1,14 @@
 # RBTech
+
 A Nx Workspace which contains our angular libraries.
 
 ## Requirements
 
-- node.js `v14`, [here](https://nodejs.org/it/)
+- node.js `v16`, [here](https://nodejs.org/it/)
 - run `npm install`
 - `nx` cli, `npm install -g nx`
 
 # Libraries
 
 - [angular-winbox](packages/angular-winbox)
+- [angular-sidebar](packages/angular-sidebar)

apps/winbox-example-app/jest.config.ts → apps/winbox-example-app/jest.config.js

@@ -1,5 +1,12 @@
 /* eslint-disable */
-export default {
+const esModules = [
+  'winbox',
+  '@angular',
+  '@ngrx',
+  '@ng-bootstrap/ng-bootstrap',
+  '@fortawesome/angular-fontawesome',
+].join('|');
+module.exports = {
   displayName: 'winbox-example-app',
   preset: '../../jest.preset.js',
   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
@@ -10,10 +17,10 @@ export default {
     },
   },
   coverageDirectory: '../../coverage/apps/winbox-example-app',
+  transformIgnorePatterns: [`/node_modules/(?!${esModules}/)`],
   transform: {
-    '^.+\\.(ts|mjs|js|html)$': 'jest-preset-angular',
+    '^.+\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular',
   },
-  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
   snapshotSerializers: [
     'jest-preset-angular/build/serializers/no-ng-attributes',
     'jest-preset-angular/build/serializers/ng-snapshot',

apps/winbox-example-app/project.json

@@ -27,13 +27,13 @@
           "budgets": [
             {
               "type": "initial",
-              "maximumWarning": "500kb",
-              "maximumError": "1mb"
+              "maximumWarning": "4mb",
+              "maximumError": "5mb"
             },
             {
               "type": "anyComponentStyle",
-              "maximumWarning": "2kb",
-              "maximumError": "4kb"
+              "maximumWarning": "150kb",
+              "maximumError": "150kb"
             }
           ],
           "fileReplacements": [
@@ -86,7 +86,7 @@
       "executor": "@nrwl/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/apps/winbox-example-app"],
       "options": {
-        "jestConfig": "apps/winbox-example-app/jest.config.ts",
+        "jestConfig": "apps/winbox-example-app/jest.config.js",
         "passWithNoTests": true
       }
     }

apps/winbox-example-app/src/app/app.component.html

@@ -1 +1,2 @@
+<rbtech-sidebar [menu]="menu"></rbtech-sidebar>
 <router-outlet></router-outlet>

apps/winbox-example-app/src/app/app.component.spec.ts

@@ -1,13 +1,15 @@
 import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
-import { NxWelcomeComponent } from './nx-welcome.component';
 import { RouterTestingModule } from '@angular/router/testing';
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
+import { SidebarComponent } from '@rbtechdev/angular-sidebar';
+import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [RouterTestingModule],
-      declarations: [AppComponent, NxWelcomeComponent],
+      imports: [RouterTestingModule, PerfectScrollbarModule, NgbModalModule],
+      declarations: [AppComponent, SidebarComponent],
     }).compileComponents();
   });
 
@@ -22,13 +24,4 @@ describe('AppComponent', () => {
     const app = fixture.componentInstance;
     expect(app.title).toEqual('winbox-example-app');
   });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain(
-      'Welcome winbox-example-app'
-    );
-  });
 });

apps/winbox-example-app/src/app/app.component.ts

@@ -1,6 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { WinboxService } from '@rbtech/angular-winbox';
 import { SimpleComponentComponent } from './simple-component/simple-component.component';
+import { SidebarMenuModel } from '@rbtechdev/angular-sidebar';
+import { ModalYesNoComponent } from './modal-yes-no/modal-yes-no.component';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { faQuestion } from '@fortawesome/free-solid-svg-icons/faQuestion';
 
 @Component({
   selector: 'rbtech-root',
@@ -9,24 +13,116 @@ import { SimpleComponentComponent } from './simple-component/simple-component.co
 })
 export class AppComponent implements OnInit {
   title = 'winbox-example-app';
+  faIcon = faQuestion;
+  menu: SidebarMenuModel = {
+    sidebarTitle: 'SIDEBAR',
+    status: '',
+    username: 'USER',
+    subtitle: 'Admin',
+    sidebarTitleHref: '/home',
+    sidebarUsrPicSrc: 'assets/user.png',
+    placeholderSearch: 'Cerca...',
+    isSearchVisible: true,
+    contentMenus: [
+      {
+        title: 'HEADER',
+        type: 'header',
+        visible: true,
+        badge: {
+          visible: true,
+          class: 'badge bg-secondary',
+          text: '4',
+        },
+      },
+      {
+        title: 'MENU 1',
+        type: 'simple',
+        visible: true,
+        icon: this.faIcon,
+        href: '/s',
+      },
+      {
+        title: 'HEADER',
+        type: 'header',
+        visible: true,
+      },
+      {
+        title: 'MENU 1',
+        type: 'dropdown',
+        visible: true,
+        icon: this.faIcon,
+        href: '#',
+        badge: {
+          visible: true,
+          class: 'badge bg-secondary',
+          text: '4',
+        },
+        subMenus: [
+          {
+            title: 'SUBMENU 1',
+            visible: true,
+            href: '/g',
+            badge: {
+              visible: true,
+              class: 'badge bg-secondary',
+              text: 'New',
+            },
+          },
+        ],
+      },
+    ],
+    footerMenus: [
+      {
+        type: 'simple',
+        icon: this.faIcon,
+      },
+      {
+        type: 'dropdown',
+        icon: this.faIcon,
+        dropdownHeaderTitle: 'Hello',
+        href: '#',
+        dropdownItems: [
+          {
+            text: 'HELLO',
+            icon: this.faIcon,
+            subtitle: 'HELLO S',
+          },
+        ],
+      },
+    ],
+  };
 
-  constructor(private winboxService: WinboxService) {}
+  constructor(
+    private winboxService: WinboxService,
+    private modalService: NgbModal
+  ) {}
 
   ngOnInit(): void {
-    this.winboxService.openWinBox<SimpleComponentComponent>(
-      {
-        title: 'Test',
-        height: '90%',
-        width: '40%',
-        x: 'center',
-        y: 'center',
-        index: 1057,
-        onclose: (): boolean => {
-          return true;
+    const winboxInstance =
+      this.winboxService.openWinBox<SimpleComponentComponent>(
+        {
+          title: 'Test',
+          height: '90%',
+          width: '40%',
+          x: 'center',
+          y: 'center',
+          index: 1057,
+          onclose: (): boolean => {
+            const modal = this.modalService.open(ModalYesNoComponent);
+            modal.componentInstance.title = 'Titolo';
+            modal.componentInstance.message = 'Vuoi chiudere winbox?';
+            winboxInstance.winBox.minimize(true);
+
+            modal.result
+              .then(() => {
+                winboxInstance.winBox.close(true);
+              })
+              .catch(() => winboxInstance.winBox.maximize(false));
+            return false;
+          },
         },
-      },
-      SimpleComponentComponent
-    );
+        SimpleComponentComponent
+      );
     this.winboxService.showLastWinbox();
   }
 }

apps/winbox-example-app/src/app/app.module.ts

@@ -4,12 +4,17 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppComponent } from './app.component';
 import { RouterModule } from '@angular/router';
 import { SimpleComponentComponent } from './simple-component/simple-component.component';
+import { AngularSidebarModule } from '@rbtechdev/angular-sidebar';
+import { ModalYesNoComponent } from './modal-yes-no/modal-yes-no.component';
+import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
 
 @NgModule({
-  declarations: [AppComponent, SimpleComponentComponent],
+  declarations: [AppComponent, SimpleComponentComponent, ModalYesNoComponent],
   imports: [
     BrowserModule,
     RouterModule.forRoot([], { initialNavigation: 'enabledBlocking' }),
+    AngularSidebarModule,
+    NgbModalModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

apps/winbox-example-app/src/app/modal-yes-no/modal-yes-no.component.html

@@ -0,0 +1,35 @@
+<div class="modal-header">
+  <h4 [innerHTML]="title" class="modal-title" id="modal-title"></h4>
+  <button
+    (click)="cancel()"
+    aria-describedby="modal-title"
+    aria-label="Close button"
+    class="btn-close"
+    type="button"
+  >
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+
+<div class="modal-body">
+  <p [innerHTML]="message"></p>
+</div>
+
+<div class="modal-footer">
+  <button
+    (click)="cancel()"
+    [class]="ccsCancelClass"
+    class="btn cursor-pointer text-uppercase"
+    type="button"
+  >
+    {{ noLabel }}
+  </button>
+  <button
+    (click)="confirm()"
+    [class]="ccsConfirmClass"
+    class="btn cursor-pointer text-uppercase"
+    type="button"
+  >
+    {{ yesLabel }}
+  </button>
+</div>

apps/winbox-example-app/src/app/modal-yes-no/modal-yes-no.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'pmed-modal-yes-no',
+  templateUrl: './modal-yes-no.component.html',
+  styleUrls: ['./modal-yes-no.component.scss'],
+})
+export class ModalYesNoComponent {
+  @Input() title!: string;
+  @Input() message!: string;
+  @Input() yesLabel = 'Sì';
+  @Input() noLabel = 'No';
+  @Input() ccsCancelClass = 'btn-secondary';
+  @Input() ccsConfirmClass = 'btn-primary';
+
+  constructor(public modal: NgbActiveModal) {}
+
+  cancel() {
+    this.modal.dismiss();
+  }
+
+  confirm() {
+    this.modal.close();
+  }
+}

apps/winbox-example-app/src/styles.scss

@@ -1 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
+$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
+@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");
+@import "bootstrap/scss/bootstrap";

apps/winbox-example-app/tsconfig.app.json

@@ -6,5 +6,6 @@
   },
   "files": ["src/main.ts", "src/polyfills.ts"],
   "include": ["src/**/*.d.ts"],
-  "exclude": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts"]
+  "exclude": [
+    "jest.config.js", "**/*.test.ts", "**/*.spec.ts"]
 }

apps/winbox-example-app/tsconfig.spec.json

@@ -6,5 +6,6 @@
     "types": ["jest", "node"]
   },
   "files": ["src/test-setup.ts"],
-  "include": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"]
+  "include": [
+    "jest.config.js", "**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"]
 }

jest.config.ts → jest.config.js

@@ -1,5 +1,5 @@
 const { getJestProjects } = require('@nrwl/jest');
 
-export default {
+module.exports = {
   projects: getJestProjects(),
 };