Merge pull request #120 from e-picsa/feat/options-tool-integration

feat: integrate option tool with extension toolkit

apps/picsa-apps/extension-app-native/android/app/build.gradle

@@ -6,8 +6,8 @@ android {
         applicationId "io.picsa.extension"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 3016000
-        versionName "3.16.0"
+        versionCode 3017000
+        versionName "3.17.0"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

apps/picsa-apps/extension-app/project.json

@@ -51,6 +51,11 @@
             "glob": "**/*",
             "input": "apps/picsa-tools/resources-tool/src/assets",
             "output": "assets"
+          },
+          {
+            "glob": "**/*",
+            "input": "apps/picsa-tools/option-tool/src/assets",
+            "output": "assets"
           }
         ],
         "styles": [

apps/picsa-apps/extension-app/src/app/app-routing.module.ts

@@ -4,6 +4,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { BudgetToolModule } from '@picsa/budget/src/app/app.module-embedded';
 import { ClimateToolModule } from '@picsa/climate/src/app/app.module-embedded';
 import { MonitoringToolModule } from '@picsa/monitoring/src/app/app.module-embedded';
+import { OptionsToolModule } from '@picsa/option/src/app/app.module-embedded';
 import { ResourcesToolModule } from '@picsa/resources/src/app/app.module-embedded';
 
 const routes: Routes = [
@@ -30,6 +31,13 @@ const routes: Routes = [
         (mod) => mod.MonitoringToolModule
       ),
   },
+  {
+    path: 'option',
+    loadChildren: () =>
+      import('@picsa/option/src/app/app.module-embedded').then(
+        (mod) => mod.OptionsToolModule
+      ),
+  },
   {
     path: 'resources',
     loadChildren: () =>
@@ -75,6 +83,7 @@ const routes: Routes = [
     ClimateToolModule.forRoot({ urlPrefix: 'climate' }),
     BudgetToolModule.forRoot({ urlPrefix: 'budget' }),
     MonitoringToolModule.forRoot({ urlPrefix: 'monitoring' }),
+    OptionsToolModule.forRoot({ urlPrefix: 'option' }),
     ResourcesToolModule.forRoot({ urlPrefix: 'resources' }),
   ],
   exports: [RouterModule],

apps/picsa-tools/monitoring-tool/src/app/app.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'picsa-monitoring-tool',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
@@ -10,7 +11,7 @@ export class AppComponent {
 }
 
 @Component({
-  // tslint:disable component-selector
+  // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'picsa-monitoring-tool',
   template: '',
 })

apps/picsa-tools/option-tool/project.json

@@ -31,7 +31,7 @@
             {
               "type": "initial",
               "maximumWarning": "500kb",
-              "maximumError": "1mb"
+              "maximumError": "2mb"
             },
             {
               "type": "anyComponentStyle",

apps/picsa-tools/option-tool/src/app/app-routing.module.ts

@@ -0,0 +1,26 @@
+import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+
+export const ROUTES_COMMON: Routes = [
+  {
+    path: '',
+    loadChildren: () =>
+      import('./pages/home/home.module').then((m) => m.HomeModule),
+    title: 'Options',
+  },
+];
+/** Routes only registered in standalone mode */
+const ROUTES_STANDALONE: Routes = [{ path: '**', redirectTo: '' }];
+
+/*******************************************************************
+ *  Standalone Version
+ ******************************************************************/
+@NgModule({
+  imports: [
+    RouterModule.forRoot([...ROUTES_COMMON, ...ROUTES_STANDALONE], {
+      preloadingStrategy: PreloadAllModules,
+    }),
+  ],
+  exports: [RouterModule],
+})
+export class AppRoutingModule {}

apps/picsa-tools/option-tool/src/app/app.component.html

@@ -1 +1,4 @@
-<option-home></option-home>
+<div class="page">
+  <picsa-header></picsa-header>
+  <router-outlet></router-outlet>
+</div>

apps/picsa-tools/option-tool/src/app/app.component.spec.ts

@@ -1,12 +1,10 @@
 import { AppComponent } from './app.component';
-import { NxWelcomeComponent } from './nx-welcome.component';
 import { TestBed } from '@angular/core/testing';
 
-
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [AppComponent, NxWelcomeComponent],
+      declarations: [AppComponent],
     }).compileComponents();
   });
 

apps/picsa-tools/option-tool/src/app/app.component.ts

@@ -1,36 +1,19 @@
 import { Component } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
-import { MatIconRegistry } from '@angular/material/icon';
-
 
 @Component({
-  selector: 'option-root',
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'picsa-option-tool',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
-  title = 'picsa-tools-option-tool';
-
-  constructor(
-    private matIconRegistry: MatIconRegistry,
-    private domSanitizer: DomSanitizer
-  ) {
-    this.registerIcons();
-  }
-   // register custom icons from the assets/svgs folder for access within the app
-  // icons can be accessed in mat-icon as svgIcon='station_data_${key}'
-  registerIcons() {
-    const icons = {
-      female: 'female',
-      male: 'male'
-    };
-    for (const [key, value] of Object.entries(icons)) {
-      const iconName = `picsa_options_${key}`;
-      const iconUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(
-        `assets/svgs/${value}.svg`
-      );
-      this.matIconRegistry.addSvgIcon(iconName, iconUrl);
-    }
-  }
-
+  title = 'picsa-option';
 }
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'picsa-option-tool',
+  template: '',
+})
+// eslint-disable-next-line @angular-eslint/component-class-suffix
+export class AppComponentEmbedded extends AppComponent {}

apps/picsa-tools/option-tool/src/app/app.module-embedded.ts

@@ -0,0 +1,53 @@
+import { ModuleWithProviders, NgModule } from '@angular/core';
+import { Router, RouterModule } from '@angular/router';
+import { PicsaTranslateService } from '@picsa/shared/modules';
+
+import { registerEmbeddedRoutes } from '@picsa/utils';
+
+import { APP_COMMON_IMPORTS } from './app.module';
+import { AppComponentEmbedded } from './app.component';
+import { ROUTES_COMMON } from './app-routing.module';
+
+export class EmbeddedConfig {
+  /** Path app routed through, e.g. 'budget' */
+  urlPrefix: string;
+}
+
+/*******************************************************************
+ *  Routes
+ ******************************************************************/
+@NgModule({
+  imports: [RouterModule.forChild([])],
+})
+export class EmbeddedRoutingModule {
+  constructor(router: Router, embeddedConfig: EmbeddedConfig) {
+    registerEmbeddedRoutes(ROUTES_COMMON, router, embeddedConfig.urlPrefix);
+  }
+}
+
+/*******************************************************************
+ * Module
+ ******************************************************************/
+@NgModule({
+  declarations: [AppComponentEmbedded],
+  imports: [...APP_COMMON_IMPORTS, EmbeddedRoutingModule],
+  bootstrap: [AppComponentEmbedded],
+})
+export class BaseModule {
+  // ensure translate has been initiated
+  constructor(public translate: PicsaTranslateService) {}
+}
+
+/** Use to import directly into another app via lazy-loading */
+@NgModule()
+export class OptionsToolModule {
+  static forRoot(config: EmbeddedConfig): ModuleWithProviders<BaseModule> {
+    return {
+      ngModule: BaseModule,
+      providers: [
+        PicsaTranslateService,
+        { provide: EmbeddedConfig, useValue: config },
+      ],
+    };
+  }
+}

apps/picsa-tools/option-tool/src/app/app.module.ts

@@ -1,22 +1,50 @@
+import {
+  BrowserAnimationsModule,
+  NoopAnimationsModule,
+} from '@angular/platform-browser/animations';
+import { BrowserModule } from '@angular/platform-browser';
+import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 
+import {
+  PicsaDbModule,
+  PicsaTranslateModule,
+  PicsaTranslateService,
+} from '@picsa/shared/modules';
+import { PicsaCommonComponentsModule } from '@picsa/components';
+
 import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { BrowserModule } from '@angular/platform-browser';
-import { EditorComponent } from './components/editor/editor.component';
-import { FormsModule } from '@angular/forms';
-import { HomeComponent } from './pages/home/home.component';
-import { HttpClientModule } from '@angular/common/http';
+import { AppRoutingModule } from './app-routing.module';
+import { OptionMaterialModule } from './components/material.module';
 
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { OptionMaterialModule } from './material.module';
-import { ReactiveFormsModule} from '@angular/forms';
+/** Core imports only required when running standalone */
+const StandaloneImports = [
+  AppRoutingModule,
+  BrowserModule,
+  BrowserAnimationsModule,
+  NoopAnimationsModule,
+  PicsaTranslateModule.forRoot(),
+];
 
+/** Common imports used in both standalone and embedded formats */
+export const APP_COMMON_IMPORTS = [
+  HttpClientModule,
+  OptionMaterialModule,
+  PicsaTranslateModule,
+  PicsaDbModule.forRoot(),
+  PicsaCommonComponentsModule,
+];
 
+/*******************************************************************
+ *  Standalone Version
+ ******************************************************************/
 @NgModule({
-  declarations: [AppComponent, HomeComponent, EditorComponent],
-  imports: [BrowserModule, OptionMaterialModule, FormsModule, HttpClientModule, ReactiveFormsModule,BrowserAnimationsModule,NoopAnimationsModule],
-  providers: [],
+  declarations: [AppComponent],
+  imports: [...StandaloneImports, ...APP_COMMON_IMPORTS],
   bootstrap: [AppComponent],
+  schemas: [],
 })
-export class AppModule {}
+export class AppModule {
+  // ensure translate service initialised
+  constructor(public translate: PicsaTranslateService) {}
+}

apps/picsa-tools/option-tool/src/app/components/components.module.ts

@@ -0,0 +1,30 @@
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+// Shared modules
+import { PicsaCommonComponentsModule } from '@picsa/components';
+import { PicsaTranslateModule } from '@picsa/shared/modules';
+
+// Local components
+import { EditorComponent } from './editor/editor.component';
+import { OptionMaterialModule } from './material.module';
+
+const Components = [EditorComponent];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    OptionMaterialModule,
+    PicsaCommonComponentsModule,
+    PicsaTranslateModule,
+    ReactiveFormsModule,
+    RouterModule,
+  ],
+  exports: [OptionMaterialModule, PicsaCommonComponentsModule, ...Components],
+  declarations: [Components],
+  providers: [],
+})
+export class OptionToolComponentsModule {}

apps/picsa-tools/option-tool/src/app/components/material.module.ts

@@ -0,0 +1,45 @@
+import { NgModule } from '@angular/core';
+
+import { DomSanitizer } from '@angular/platform-browser';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatIconRegistry } from '@angular/material/icon';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatTableModule } from '@angular/material/table';
+
+const COMPONENTS = [
+  MatButtonModule,
+  MatDialogModule,
+  MatIconModule,
+  MatStepperModule,
+  MatTableModule,
+];
+// use custom module to make it easier to control what is available through app
+@NgModule({
+  imports: COMPONENTS,
+  exports: COMPONENTS,
+})
+export class OptionMaterialModule {
+  constructor(
+    private matIconRegistry: MatIconRegistry,
+    private domSanitizer: DomSanitizer
+  ) {
+    this.registerIcons();
+  }
+  // register custom icons from the assets/svgs folder for access within the app
+  // icons can be accessed in mat-icon as svgIcon='station_data_${key}'
+  registerIcons() {
+    const icons = {
+      female: 'female',
+      male: 'male',
+    };
+    for (const [key, value] of Object.entries(icons)) {
+      const iconName = `picsa_options_${key}`;
+      const iconUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(
+        `assets/svgs/${value}.svg`
+      );
+      this.matIconRegistry.addSvgIcon(iconName, iconUrl);
+    }
+  }
+}