Merge branch 'angular-18-upgrade' into 'main'

Angular 18 Upgrade

See merge request walljm/dynamicbible!35

.gitlab-ci.yml

@@ -6,7 +6,7 @@ stages:
 
 build-android:
   stage: build
-  image: walljm/gradle_android:8.0.2-jdk17-33-node1
+  image: walljm/gradle_android:8.2.1-jdk17-android34-node22
   before_script:
     - cd ./src/android
     - bash ./install-sdk.sh
@@ -29,7 +29,7 @@ build-android:
 
 test:
   stage: test
-  image: walljm/node-chrome-headless:21.6
+  image: walljm/node-chrome-headless:22.4-bookworm
   variables:
     NODE_OPTIONS: "--max_old_space_size=2048"
   script:
@@ -68,7 +68,7 @@ deploy-prod-site:
 
 deploy-android:
   stage: prod
-  image: walljm/gradle_android:8.0.2-jdk17-33-node1
+  image: walljm/gradle_android:8.2.1-jdk17-android34-node22
   needs:
     - build-android
   before_script:

docker-node-chrome/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:21.6.2-bookworm
+FROM node:22.4-bookworm
 
 RUN apt-get update -qqy \
   && apt-get -qqy install \

docker-node-chrome/build.sh

@@ -1,2 +1,2 @@
-docker build -t walljm/node-chrome-headless:21.6 .
+docker build -t walljm/node-chrome-headless:22.4-bookworm .
-docker push walljm/node-chrome-headless:21.6
+docker push walljm/node-chrome-headless:22.4-bookworm

gradle_android_node/Dockerfile

@@ -1,5 +1,5 @@
 
-FROM gradle:8.0.2-jdk17-focal
+FROM gradle:8.2.1-jdk17-focal
 
 # Install Git and dependencies
 RUN apt-get update \
@@ -7,7 +7,7 @@ RUN apt-get update \
  && apt-get clean \
  && rm -rf /var/lib/apt/lists /var/cache/apt
 
-RUN curl -L -o node.tar.gz "https://nodejs.org/dist/v21.6.2/node-v21.6.2-linux-x64.tar.gz" && \
+RUN curl -L -o node.tar.gz "https://nodejs.org/dist/v22.4.1/node-v22.4.1-linux-x64.tar.gz" && \
     tar -xzf node.tar.gz -C /usr/local --strip-components=1 && \
     rm node.tar.gz && \
     ln -s /usr/local/bin/node /usr/local/bin/nodejs
@@ -42,7 +42,7 @@ RUN $ANDROID_SDK_ROOT/cmdline-tools/latest/bin/sdkmanager --update
 RUN $ANDROID_SDK_ROOT/cmdline-tools/latest/bin/sdkmanager --verbose \
     "build-tools;34.0.0" \
     "build-tools;30.0.3" \
-    "platforms;android-33" \
+    "platforms;android-34" \
     "platform-tools"
 
 

gradle_android_node/build.sh

@@ -1,2 +1,2 @@
-docker build -t walljm/gradle_android:8.0.2-jdk17-33-node1 .
+docker build -t walljm/gradle_android:8.2.1-jdk17-android34-node22 .
-docker push walljm/gradle_android:8.0.2-jdk17-33-node1
+docker push walljm/gradle_android:8.2.1-jdk17-android34-node22

src/android/app/build.gradle

@@ -85,7 +85,7 @@ dependencies {
   implementation 'com.google.firebase:firebase-auth'
 
   // Also declare the dependency for the Google Play services library and specify its version
-  implementation 'com.google.android.gms:play-services-auth:21.0.0'
+  implementation 'com.google.android.gms:play-services-auth:21.2.0'
 
 }
 

src/android/build.gradle

@@ -7,8 +7,8 @@ buildscript {
         mavenCentral()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:8.0.2'
+        classpath 'com.android.tools.build:gradle:8.2.1'
-        classpath 'com.google.gms:google-services:4.4.1'
+        classpath 'com.google.gms:google-services:4.4.2'
         classpath "com.github.triplet.gradle:play-publisher:3.8.1"
 
         // NOTE: Do not place your application dependencies here; they belong

src/android/capacitor-cordova-android-plugins/build.gradle

@@ -9,7 +9,7 @@ buildscript {
         mavenCentral()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:8.0.0'
+        classpath 'com.android.tools.build:gradle:8.2.1'
     }
 }
 
@@ -17,10 +17,10 @@ apply plugin: 'com.android.library'
 
 android {
     namespace "capacitor.cordova.android.plugins"
-    compileSdkVersion project.hasProperty('compileSdkVersion') ? rootProject.ext.compileSdkVersion : 33
+    compileSdk project.hasProperty('compileSdkVersion') ? rootProject.ext.compileSdkVersion : 34
     defaultConfig {
         minSdkVersion project.hasProperty('minSdkVersion') ? rootProject.ext.minSdkVersion : 22
-        targetSdkVersion project.hasProperty('targetSdkVersion') ? rootProject.ext.targetSdkVersion : 33
+        targetSdkVersion project.hasProperty('targetSdkVersion') ? rootProject.ext.targetSdkVersion : 34
         versionCode 1
         versionName "1.0"
     }

src/android/variables.gradle

@@ -1,15 +1,15 @@
 ext {
     minSdkVersion = 22
-    firebaseMessagingVersion = '23.0.5'
+    firebaseMessagingVersion = '23.3.1'
-    compileSdkVersion = 33
+    compileSdkVersion = 34
-    targetSdkVersion = 33
+    targetSdkVersion = 34
-    androidxActivityVersion = '1.7.0'
+    androidxActivityVersion = '1.8.0'
     androidxAppCompatVersion = '1.6.1'
     androidxCoordinatorLayoutVersion = '1.2.0'
-    androidxCoreVersion = '1.10.0'
+    androidxCoreVersion = '1.12.0'
-    androidxFragmentVersion = '1.5.6'
+    androidxFragmentVersion = '1.6.2'
     coreSplashScreenVersion = '1.0.1'
-    androidxWebkitVersion = '1.6.1'
+    androidxWebkitVersion = '1.9.0'
     junitVersion = '4.13.2'
     androidxJunitVersion = '1.1.5'
     androidxEspressoCoreVersion = '3.5.1'

src/ios/App/Podfile.lock

@@ -5,9 +5,9 @@ PODS:
   - AppAuth/Core (1.7.1)
   - AppAuth/ExternalUserAgent (1.7.1):
     - AppAuth/Core
-  - Capacitor (5.7.0):
+  - Capacitor (6.1.0):
     - CapacitorCordova
-  - CapacitorCordova (5.7.0)
+  - CapacitorCordova (6.1.0)
   - CodetrixStudioCapacitorGoogleAuth (0.0.1):
     - Capacitor
     - GoogleSignIn (~> 6.2.4)
@@ -42,8 +42,8 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   AppAuth: e93b919be5dbcbba49555011ce94f7d716368574
-  Capacitor: fc155ee2ee45a2093d716f13cf5aa5a865e2d85a
+  Capacitor: 187bd7847b6f71467015a20200a1a071be3e5f14
-  CapacitorCordova: e825fce1a2e14e4b5730641c7e098dccf74397b7
+  CapacitorCordova: be703980ca797f847c3356f78fa175d21c8330c2
   CodetrixStudioCapacitorGoogleAuth: fcce058390347c1ce5d8ac4764bdf1f5c1ee233b
   GoogleSignIn: 5651ce3a61e56ca864160e79b484cd9ed3f49b7a
   GTMAppAuth: 0ff230db599948a9ad7470ca667337803b3fc4dd

src/package.json

@@ -16,51 +16,51 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.2.3",
+    "@angular/animations": "^18.1.0",
-    "@angular/cdk": "^17.2.1",
+    "@angular/cdk": "^18.0.6",
-    "@angular/common": "^17.2.3",
+    "@angular/common": "^18.1.0",
-    "@angular/compiler": "^17.2.3",
+    "@angular/compiler": "^18.1.0",
-    "@angular/core": "^17.2.3",
+    "@angular/core": "^18.1.0",
-    "@angular/fire": "^17.0.1",
+    "@angular/fire": "^18.0.1",
-    "@angular/forms": "^17.2.3",
+    "@angular/forms": "^18.1.0",
-    "@angular/material": "^17.2.1",
+    "@angular/material": "^18.0.6",
-    "@angular/platform-browser": "^17.2.3",
+    "@angular/platform-browser": "^18.1.0",
-    "@angular/platform-browser-dynamic": "^17.2.3",
+    "@angular/platform-browser-dynamic": "^18.1.0",
-    "@angular/router": "^17.2.3",
+    "@angular/router": "^18.1.0",
-    "@capacitor/android": "^5.7.0",
+    "@capacitor/android": "^6.0.0",
-    "@capacitor/core": "^5.7.0",
+    "@capacitor/core": "^6.0.0",
-    "@capacitor/ios": "^5.7.0",
+    "@capacitor/ios": "^6.0.0",
     "@codetrix-studio/capacitor-google-auth": "^3.4.0-rc.0",
-    "@ngx-pwa/local-storage": "^17.0.0",
+    "@ngx-pwa/local-storage": "^18.0.0",
     "angular2-uuid": "^1.1.1",
     "firebase": "^10.8.0",
     "marked": "^9.0.0",
-    "ngx-markdown": "^17.1.1",
+    "ngx-markdown": "^18.0.0",
     "reselect": "^5.1.0",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.2",
     "zone.js": "~0.14.4"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "0.1702.1",
+    "@angular-devkit/architect": "0.1800.7",
-    "@angular-devkit/build-angular": "^17.2.1",
+    "@angular-devkit/build-angular": "^18.0.7",
-    "@angular-eslint/builder": "17.2.1",
+    "@angular-eslint/builder": "18.1.0",
-    "@angular-eslint/eslint-plugin": "17.2.1",
+    "@angular-eslint/eslint-plugin": "18.1.0",
-    "@angular-eslint/eslint-plugin-template": "17.2.1",
+    "@angular-eslint/eslint-plugin-template": "18.1.0",
-    "@angular-eslint/schematics": "17.2.1",
+    "@angular-eslint/schematics": "18.1.0",
-    "@angular-eslint/template-parser": "17.2.1",
+    "@angular-eslint/template-parser": "18.1.0",
-    "@angular/cli": "^17.2.1",
+    "@angular/cli": "^18.0.7",
-    "@angular/compiler-cli": "^17.2.1",
+    "@angular/compiler-cli": "^18.1.0",
-    "@capacitor/cli": "^5.7.0",
+    "@capacitor/cli": "^6.0.0",
     "@cypress/schematic": "^2.5.1",
     "@types/jasmine": "~5.1.4",
     "@types/jasminewd2": "~2.0.13",
     "@types/node": "^20.11.21",
-    "@typescript-eslint/eslint-plugin": "7.1.0",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^7.1.0",
+    "@typescript-eslint/parser": "^7.2.0",
-    "cypress": "latest",
+    "cypress": "13.6.6",
     "eslint": "^8.57.0",
-    "eslint-plugin-deprecation": "^2.0.0",
+    "eslint-plugin-deprecation": "^3.0.0",
     "eslint-plugin-optimize-regex": "^1.2.1",
     "eslint-plugin-simple-import-sort": "^12.0.0",
     "eslint-plugin-unused-imports": "^3.1.0",
@@ -77,7 +77,7 @@
     "karma-jasmine-html-reporter": "^2.1.0",
     "open": "^10.0.4",
     "ts-node": "~10.9.2",
-    "typescript": "~5.3.3"
+    "typescript": "~5.4.5"
   },
   "browserslist": [
     "last 1 Chrome version",

src/src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { DragDropModule } from '@angular/cdk/drag-drop';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { APP_ID, NgModule } from '@angular/core';
 import { AngularFireModule } from '@angular/fire/compat';
 import { AngularFireAuthModule } from '@angular/fire/compat/auth';
@@ -41,6 +41,7 @@ import { MarkedOptions, MarkedRenderer } from 'ngx-markdown';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 import { AddToPageModalComponent } from './components/add-to-page-modal/add-to-page-modal.component';
+import { CardEditModalComponent } from './components/card-edit-modal/card-edit-modal.component';
 import { HelpModalComponent } from './components/help-modal/help-modal.component';
 import { NoteEditModalComponent } from './components/note/edit-modal/note-edit-modal.component';
 import { NoteCardComponent } from './components/note/note-card.component';
@@ -75,8 +76,7 @@ export function markedOptionsFactory(): MarkedOptions {
   };
 }
 
-@NgModule({
+@NgModule({ declarations: [
-  declarations: [
         AppComponent,
         NotesAdminPageComponent,
         SavedPagesAdminPageComponent,
@@ -95,27 +95,22 @@ export function markedOptionsFactory(): MarkedOptions {
         VersePickerModalComponent,
         SettingsComponent,
         OkCancelModalComponent,
+        CardEditModalComponent,
     ],
-  imports: [
+    bootstrap: [AppComponent], imports: [BrowserModule,
-    BrowserModule,
-    HttpClientModule,
-
         ReactiveFormsModule,
         FormsModule,
         AppRoutingModule,
         BrowserAnimationsModule,
-
         MarkdownModule.forRoot({
             markedOptions: {
                 provide: MARKED_OPTIONS,
                 useFactory: markedOptionsFactory,
             },
         }),
-
         AngularFireModule.initializeApp(FirebaseConfig),
         AngularFireAuthModule,
         AngularFireDatabaseModule,
-
         DragDropModule,
         MatSidenavModule,
         MatChipsModule,
@@ -145,9 +140,5 @@ export function markedOptionsFactory(): MarkedOptions {
         MatTooltipModule,
         MatFormFieldModule,
         MatTabsModule,
-    ClipboardModule,
+        ClipboardModule], providers: [{ provide: APP_ID, useValue: 'ng-cli-universal' }, provideHttpClient(withInterceptorsFromDi())] })
-  ],
-  providers: [{ provide: APP_ID, useValue: 'ng-cli-universal' }],
-  bootstrap: [AppComponent],
-})
 export class AppModule {}

src/src/app/components/card-edit-modal/card-edit-modal.component.html

@@ -0,0 +1,16 @@
+<mat-toolbar>
+  <mat-icon>save</mat-icon>
+</mat-toolbar>
+<mat-dialog-content class="content">
+  <form [formGroup]="form">
+    <mat-form-field class="page-title">
+      <mat-label>Query</mat-label>
+      <input formControlName="qry" matInput />
+    </mat-form-field>
+  </form>
+
+  <div mat-dialog-actions>
+    <button mat-button (click)="save()">Save</button>
+    <button mat-button (click)="cancel()">Cancel</button>
+  </div>
+</mat-dialog-content>

src/src/app/components/card-edit-modal/card-edit-modal.component.scss

@@ -0,0 +1,25 @@
+.close-button {
+  float: right;
+}
+
+.title {
+  width: 100%;
+  padding-left: 1rem;
+  font-size: 1.5rem;
+  overflow: hidden;
+}
+
+.mat-mdc-form-field {
+  display: block;
+}
+
+.page-title {
+  min-width: 50vw;
+  padding-top: 12px;
+}
+
+.mat-mdc-dialog-content {
+  min-width: 60vw;
+  min-height: 20vh;
+  max-height: 80vh;
+}

src/src/app/components/card-edit-modal/card-edit-modal.component.ts

@@ -0,0 +1,45 @@
+import { Component, Inject } from '@angular/core';
+import { FormGroup, UntypedFormBuilder } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { CardItem } from 'src/app/models/card-state';
+import { AppService } from 'src/app/services/app.service';
+
+@Component({
+  selector: 'app-card-edit-modal',
+  templateUrl: 'card-edit-modal.component.html',
+  styleUrls: ['./card-edit-modal.component.scss'],
+})
+export class CardEditModalComponent {
+  form: FormGroup;
+  dialogTitle = 'Save Page using Current Cards';
+  oldCard: CardItem;
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: CardEditModalData,
+    public dialogRef: MatDialogRef<CardEditModalComponent>,
+    private appService: AppService,
+    private fb: UntypedFormBuilder
+  ) {
+    this.oldCard = data.card;
+    this.form = this.fb.group(data.card);
+  }
+
+  cancel() {
+    this.dialogRef.close();
+  }
+
+  save() {
+    this.appService.updateCard(
+      {
+        qry: this.form.get('qry').value,
+        type: this.form.get('type').value,
+      } as CardItem,
+      this.oldCard
+    );
+    this.dialogRef.close();
+  }
+}
+
+export interface CardEditModalData {
+  card: CardItem;
+}

src/src/app/components/card.component.ts

@@ -8,6 +8,7 @@ import { SubscriberBase } from '../common/subscriber-base';
 import { AddToPageModalComponent } from '../components/add-to-page-modal/add-to-page-modal.component';
 import { CardItem } from '../models/card-state';
 import { AppService } from '../services/app.service';
+import { CardEditModalComponent } from './card-edit-modal/card-edit-modal.component';
 
 @Component({
   template: '',
@@ -83,4 +84,12 @@ export class CardComponent extends SubscriberBase {
   moveCardUp() {
     this.appService.moveCard(this.cardItem, MoveDirection.Up);
   }
+
+  editReferenceModal() {
+    this.dialog.open(CardEditModalComponent, {
+      data: {
+        card: { ...this.cardItem } as CardItem,
+      },
+    });
+  }
 }

src/src/app/components/page-edit-modal/page-edit-modal.component.ts

@@ -14,21 +14,21 @@ export class PageEditModalComponent {
   dialogTitle = 'Save Page using Current Cards';
 
   constructor(
-    @Inject(MAT_DIALOG_DATA) public title: PageEditModalData,
+    @Inject(MAT_DIALOG_DATA) public data: PageEditModalData,
     public dialogRef: MatDialogRef<PageEditModalComponent>,
     private appService: AppService,
     private fb: UntypedFormBuilder
   ) {
-    if (title) {
+    if (data) {
       this.dialogTitle = 'Edit Page Name';
     } else {
-      title = {
+      data = {
         title: '',
         savedPage: null,
       };
     }
 
-    this.form = this.fb.group(title);
+    this.form = this.fb.group(data);
   }
 
   cancel() {
@@ -38,7 +38,7 @@ export class PageEditModalComponent {
   save() {
     if (this.dialogTitle === 'Edit Page Name') {
       this.appService.updateSavedPage({
-        ...this.title.savedPage,
+        ...this.data.savedPage,
         title: this.form.get('title').value,
       });
     } else {

src/src/app/components/passage/passage-card.component.html

@@ -102,6 +102,10 @@
       <mat-icon>more_vert</mat-icon>
     </button>
     <mat-menu #moreMenu="matMenu">
+      <button mat-menu-item (click)="editReferenceModal()">
+        <mat-icon>edit</mat-icon>
+        <span>Edit Reference</span>
+      </button>
       <button mat-menu-item (click)="copy()">
         <mat-icon>content_copy</mat-icon>
         <span>Copy Passage</span>

src/src/app/services/app.service.ts

@@ -294,7 +294,7 @@ export const updateCardAction = (newCard: CardItem, oldCard: CardItem): AppActio
         ...state,
         currentCards: new Storable(
           state.currentCards.value.map((c) => {
-            if (c === oldCard) {
+            if (c.type === oldCard.type && c.qry === oldCard.qry) {
               return newCard;
             }
             return c;
@@ -824,6 +824,11 @@ export class AppService extends createReducingService(initialState) {
     );
   }
 
+  async updateCard(newCard: CardItem, oldCard: CardItem) {
+    const card = await this.getCardByQuery(newCard.qry.trim());
+    this.dispatch(updateCardAction(card, oldCard));
+  }
+
   async clearCards() {
     this.dispatch(clearCardsAction());
   }

src/src/styles.scss

@@ -13,15 +13,15 @@
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/
-$db-primary: mat.define-palette(mat.$indigo-palette);
+$db-primary: mat.m2-define-palette(mat.$m2-indigo-palette);
-$db-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+$db-accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);
 
 // The warn palette is optional (defaults to red).
-$db-warn: mat.define-palette(mat.$red-palette);
+$db-warn: mat.m2-define-palette(mat.$m2-red-palette);
 
 // Create the theme object. A theme consists of configurations for individual
 // theming systems such as "color" or "typography".
-$db-theme: mat.define-light-theme(
+$db-theme: mat.m2-define-light-theme(
   (
     color: (
       primary: $db-primary,

src/tsconfig.json

@@ -5,7 +5,7 @@
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
-    "downlevelIteration": true,
+    "esModuleInterop": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "moduleResolution": "node",