feat(education): add education page + pwa

angular.json

@@ -27,7 +27,11 @@
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [
-              "src/assets"
+              "src/assets",
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
             ],
             "styles": [
               "src/assets/styles/styles.scss",
@@ -53,7 +57,8 @@
                   "maximumError": "16kB"
                 }
               ],
-              "outputHashing": "all"
+              "outputHashing": "all",
+              "serviceWorker": "ngsw-config.json"
             },
             "development": {
               "optimization": false,

ngsw-config.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": [
+          "/favicon.ico",
+          "/index.csr.html",
+          "/index.html",
+          "/manifest.webmanifest",
+          "/*.css",
+          "/*.js"
+        ]
+      }
+    },
+    {
+      "name": "assets",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/**/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
+        ]
+      }
+    }
+  ]
+}

package.json

@@ -25,6 +25,7 @@
     "@angular/platform-browser": "^19.2.0",
     "@angular/platform-browser-dynamic": "^19.2.0",
     "@angular/router": "^19.2.0",
+    "@angular/service-worker": "^19.2.0",
     "@ngxs/devtools-plugin": "^19.0.0",
     "@ngxs/logger-plugin": "^19.0.0",
     "@ngxs/store": "^19.0.0",
@@ -36,7 +37,6 @@
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.2.0",
     "@angular/cli": "^19.2.0",
     "@angular/compiler-cli": "^19.2.0",
     "@commitlint/cli": "^19.7.1",
@@ -64,4 +64,4 @@
       "eslint --fix"
     ]
   }
-}
+}

public/manifest.webmanifest

@@ -0,0 +1,59 @@
+{
+  "name": "osf",
+  "short_name": "osf",
+  "theme_color": "#1976d2",
+  "background_color": "#fafafa",
+  "display": "standalone",
+  "scope": "./",
+  "start_url": "./",
+  "icons": [
+    {
+      "src": "icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable any"
+    }
+  ]
+}

src/app/app.config.ts

@@ -11,6 +11,7 @@ import { ConfirmationService } from 'primeng/api';
 import { AuthState } from '@core/store/auth';
 import { HomeState } from '@core/store/home';
 import { ResourceFiltersState } from '@shared/components/resources/resource-filters/store/resource-filters.state';
+import { provideServiceWorker } from '@angular/service-worker';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -34,6 +35,10 @@ export const appConfig: ApplicationConfig = {
     }),
     provideAnimations(),
     provideHttpClient(),
+    provideServiceWorker('ngsw-worker.js', {
+      enabled: true,
+      registrationStrategy: 'registerWhenStable:30000',
+    }),
     ConfirmationService,
   ],
 };

src/app/app.routes.ts

@@ -10,6 +10,11 @@ export const routes: Routes = [
         (mod) => mod.RootComponent,
       ),
     children: [
+      {
+        path: '',
+        pathMatch: 'full',
+        redirectTo: 'home',
+      },
       {
         path: 'sign-up',
         loadComponent: () =>

src/app/core/services/service-worker/check-update.service.ts

@@ -0,0 +1,53 @@
+import { ApplicationRef, inject, Injectable } from '@angular/core';
+import { SwUpdate, VersionEvent } from '@angular/service-worker';
+import { interval, BehaviorSubject, first, concat } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+@Injectable({ providedIn: 'root' })
+export class NewVersionCheckerService {
+  isNewVersionAvailable = new BehaviorSubject<boolean>(false);
+  swUpdate = inject(SwUpdate);
+  appRef = inject(ApplicationRef);
+
+  updateInterval = 15 * 60 * 1000;
+
+  constructor() {
+    if (!this.swUpdate.isEnabled) {
+      return;
+    }
+
+    this.promptOnUpdateAvailable();
+    this.checkForUpdateAfterInterval(this.updateInterval);
+  }
+
+  applyUpdate(): void {
+    this.swUpdate
+      .activateUpdate()
+      .then(() => globalThis.location.reload())
+      .catch(() => console.error('Update failed'));
+  }
+
+  private promptOnUpdateAvailable(): void {
+    this.swUpdate.versionUpdates
+      .pipe(takeUntilDestroyed())
+      .subscribe((event: VersionEvent) => {
+        console.info('Current version is', event);
+
+        if (event.type !== 'NO_NEW_VERSION_DETECTED') {
+          this.isNewVersionAvailable.next(true);
+        }
+      });
+  }
+
+  private checkForUpdateAfterInterval(updateInterval: number) {
+    const appIsStable$ = this.appRef.isStable.pipe(
+      first((isStable) => isStable === true),
+    );
+    const everyInterval$ = interval(updateInterval);
+    const everyIntervalOnceAppIsStable$ = concat(appIsStable$, everyInterval$);
+
+    everyIntervalOnceAppIsStable$.subscribe(() => {
+      this.swUpdate.checkForUpdate();
+    });
+  }
+}

src/app/features/settings/profile-settings/education/education.component.html

@@ -0,0 +1,130 @@
+<form [formGroup]="educationForm">
+  <div formArrayName="educations" class="flex flex-column row-gap-4">
+    @for (
+      education of educations.controls;
+      track education.value;
+      let index = $index
+    ) {
+      <div
+        [formGroupName]="index"
+        class="flex flex-column border-1 border-round-lg p-4 name-container row-gap-4"
+      >
+        <div class="flex flex-row">
+          <h2>Education {{ index + 1 }}</h2>
+          @if (index !== 0) {
+            <div class="ml-auto remove-button">
+              <p-button class="ml-auto" (click)="removeEducation(index)"
+                >Remove
+              </p-button>
+            </div>
+          }
+        </div>
+
+        <div class="flex flex-column row-gap-4">
+          <div class="w-full">
+            <label for="education-inst-{{ index }}" class="mb-1"
+              >Institution</label
+            >
+            <input
+              pInputText
+              [id]="'education-inst-' + index"
+              class="w-full"
+              [formControlName]="educationFormControls.Institution"
+            />
+          </div>
+
+          <div
+            class="flex w-full column-gap-3 row-gap-4 flex-wrap lg:flex-nowrap"
+          >
+            <div class="w-full lg:w-6">
+              <label for="department-{{ index }}" class="mb-1"
+                >Department</label
+              >
+              <input
+                pInputText
+                [id]="'department-' + index"
+                class="w-full"
+                [formControlName]="educationFormControls.Department"
+              />
+            </div>
+            <div class="w-full lg:w-6">
+              <label for="degree-{{ index }}" class="mb-1">Degree</label>
+              <input
+                pInputText
+                [id]="'degree-' + index"
+                class="w-full"
+                [formControlName]="educationFormControls.Degree"
+              />
+            </div>
+          </div>
+
+          <div
+            class="flex gap-5 flex-column align-items-start md:flex-row md:align-items-end lg:align-items-center lg:gap-3"
+          >
+            <div
+              class="w-full md:w-6 flex column-gap-3 row-gap-4 flex-wrap lg:flex-nowrap"
+            >
+              <div class="w-full lg:w-6">
+                <label for="start-date-{{ index }}" class="mb-1"
+                  >Start Date</label
+                >
+                <p-datepicker
+                  [id]="'start-date-' + index"
+                  [formControlName]="educationFormControls.StartDate"
+                  dateFormat="mm/dd/yy"
+                  [iconDisplay]="'input'"
+                  [showIcon]="true"
+                ></p-datepicker>
+              </div>
+              <div class="w-full lg:w-6">
+                <label for="end-date-{{ index }}" class="mb-1">End Date</label>
+                <p-datepicker
+                  [id]="'end-date-' + index"
+                  [formControlName]="educationFormControls.EndDate"
+                  dateFormat="mm/dd/yy"
+                  [iconDisplay]="'input'"
+                  [showIcon]="true"
+                ></p-datepicker>
+              </div>
+            </div>
+
+            <div
+              class="flex align-items-center w-full md:w-6 md:mb-3 lg:mb-0 lg:mt-4"
+            >
+              <p-checkbox
+                [binary]="true"
+                [formControlName]="educationFormControls.onGoing"
+                [inputId]="'ongoing-' + index"
+                name="ongoing"
+              ></p-checkbox>
+              <label [for]="'ongoing-' + index" class="ml-2 mb-0 cursor-pointer"
+                >Ongoing</label
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    }
+  </div>
+</form>
+
+<p-button
+  label="Add One More"
+  severity="secondary"
+  class="ml-auto w-6 btn-full-width md:w-auto"
+  (click)="addEducation()"
+/>
+
+<div
+  class="flex justify-content-between align-items-end column-gap-2 md:ml-auto h-3rem mt-2"
+>
+  <p-button
+    class="w-6 btn-full-width md:w-auto"
+    label="Discard Changes"
+    severity="info"
+    disabled="true"
+  />
+  <div class="w-6 btn-full-width md:w-auto wide-m-button">
+    <p-button label="Save" disabled="true" (click)="saveEducation()" />
+  </div>
+</div>