cyc-base 0.0.2 → 1.0.1

package/projects/cyc-base/src/classes/FirebasePage.ts

@@ -0,0 +1,66 @@
+import { Auth, getAuth } from 'firebase/auth';
+import { Database, getDatabase, ref } from 'firebase/database';
+import { ExtendedCommonPage } from './ExtendedCommonPage';
+
+/**
+ *  @extends CommonPage
+ *  @extends ExtendedCommonPage
+ */
+export class FirebasePage extends ExtendedCommonPage {
+  db!: Database;
+  auth!: Auth;
+  constructor() {
+    super();
+
+    this.auth = getAuth();
+    this.db = getDatabase();
+  }
+
+  get userRef() {
+    return ref(this.db, 'move_follow_up_2023/users');
+  }
+
+  get clusterRef() {
+    return ref(this.db, 'move_follow_up_2023/clusters');
+  }
+
+  get stRef() {
+    return ref(this.db, 'move_follow_up_2023/small_teams');
+  }
+
+  get cgRef() {
+    return ref(this.db, 'move_follow_up_2023/CGs');
+  }
+
+  get sheepRef() {
+    return ref(this.db, 'move_follow_up_2023/sheeps');
+  }
+
+  get sheepLogRef() {
+    return ref(this.db, 'move_follow_up_2023/sheeps_log');
+  }
+
+  get msjClassTypeRef() {
+    return ref(this.db, 'move_follow_up_2023/msj/msj_class_type');
+  }
+
+  get msjClassBatchRef() {
+    return ref(this.db, 'move_follow_up_2023/msj/msj_class_batch');
+  }
+
+  get msjClassTimeRef() {
+    return ref(this.db, 'move_follow_up_2023/msj/msj_class_time');
+  }
+
+  get msjStudBatchRef() {
+    return ref(this.db, 'move_follow_up_2023/msj/msj_student_batch_record');
+  }
+
+  get attRef() {
+    return ref(this.db, 'move_follow_up_2023/attendance/atts');
+  }
+
+  get titleRef() {
+    return ref(this.db, 'move_follow_up_2023/attendance/titles');
+  }
+}

package/projects/cyc-base/src/classes/SecurePage.ts

@@ -0,0 +1,229 @@
+import { Router } from '@angular/router';
+import {
+  PERMISSION,
+  AppUser,
+  ClickAction,
+  Click,
+  MsjClassBatch,
+} from 'cyc-type-def';
+import { FirebasePage } from './FirebasePage';
+import {
+  ref,
+  onValue,
+  push,
+  get,
+  equalTo,
+  orderByChild,
+  query,
+} from 'firebase/database';
+
+/**
+ * using observable to read user
+ * replace BasePage
+ *
+ * ---
+ * @extends CommonPage
+ * @extends ExtendedCommonPage
+ * @extends FirebasePage
+ */
+export class SecurePage extends FirebasePage {
+  protected isSecure: boolean;
+  protected router: Router;
+
+  constructor(router: Router, isSecure: boolean) {
+    super();
+
+    this.isSecure = isSecure;
+    this.router = router;
+  }
+
+  override checkAccessAndLoadData() {
+    if (this.firebaseUser) {
+      if (this.user) {
+        if (this.user.permission == PERMISSION.NOT_VERIFIED && this.isSecure) {
+          // not verified user
+          // redirect to home page
+          this.navigateHome();
+        }
+
+        // if (this.user.permissions) {
+        //   this.isSuperUser = this.user.permissions.includes(
+        //     PERMISSION.SUPER_USER
+        //   );
+        // }
+
+        this.checkPermission(this.user);
+        this.readData();
+      } else {
+        // user logged in but no data
+        // redirect to home page (how he came to here?)
+        if (this.isSecure) this.navigateHome();
+        // this.readData(); // navigated home, no need read data
+      }
+    } else {
+      // user not logged in
+      // redirect to home page
+      if (this.isSecure) this.navigateHome();
+      //   this.readData(); // navigated home, no need read data
+    }
+  }
+
+  navigateHome(): void {
+    this.router.navigate(['']);
+  }
+
+  loadTitle() {
+    const titleRef = ref(this.db, 'move_follow_up_2023/attendance/titles');
+    onValue(titleRef, (v) => {
+      if (v.exists()) {
+        this.arrTitle = Object.values(v.val());
+        this.arrTitleForRef = v.val();
+      }
+    });
+  }
+
+  loadSheep() {
+    const sheepRef = ref(this.db, 'move_follow_up_2023/sheeps');
+    onValue(sheepRef, (v) => {
+      if (v.exists()) {
+        this.arrSheep = Object.values(v.val());
+        this.arrSheepForRef = v.val();
+      }
+    });
+  }
+
+  loadAttendance() {}
+  loadUsers() {}
+  loadUsersAsync() {
+    const userRef = ref(this.db, 'move_follow_up_2023/users');
+    return get(userRef);
+  }
+
+  handleTitleSelected() {}
+  handleClusterSelected() {}
+  handleSmallTeamSelected() {}
+  handleCGSelected() {}
+
+  loadMsjClassType() {
+    const msjClassTypeRef = ref(
+      this.db,
+      'move_follow_up_2023/msj/msj_class_type'
+    );
+
+    return get(msjClassTypeRef);
+  }
+
+  loadMsjClassBatch() {
+    const msjClassBatchRef = ref(
+      this.db,
+      'move_follow_up_2023/msj/msj_class_batch'
+    );
+
+    return get(msjClassBatchRef);
+  }
+
+  loadMsjClassTime(msjClassBatch?: MsjClassBatch) {
+    const msjClassTimeRef = ref(
+      this.db,
+      'move_follow_up_2023/msj/msj_class_time'
+    );
+
+    let q = query(msjClassTimeRef);
+    if (msjClassBatch)
+      q = query(
+        msjClassTimeRef,
+        orderByChild('idMsjClassBatch'),
+        equalTo(msjClassBatch.id)
+      );
+
+    return get(q);
+  }
+
+  recordClick(action: ClickAction) {
+    const testAccId = '5FUtbbtMe4RNPys6QSUzri5UXFN2';
+    const testAcc2Id = 'q1GEMXkzbWOOEg2wreNuPsTgCw52';
+    const testAcc3Id = 'XZUlKaa5aUhwJ2KlEa5oJfImwZA3';
+    const testAcc4Id = '9O3bSHbL2pfWBC9BOJiwMbkHQdr2';
+    const developerAccId = 'ZqdQyuc1uuTbAfmhkjw5HgLFnc82';
+
+    let userId = this.user?.id;
+    if (
+      userId == testAccId ||
+      userId == testAcc2Id ||
+      userId == testAcc3Id ||
+      userId == testAcc4Id ||
+      userId == developerAccId
+    ) {
+      return;
+    }
+
+    const obj: Click = { action, timeStamp: new Date().getTime() };
+    if (userId) {
+      obj['userId'] = userId;
+    }
+    push(ref(this.db, 'move_follow_up_2023/attendance/clicks'), obj);
+  }
+
+  // FUNCTIONS INTERFACE
+
+  /**
+   * Execute after reading user data from database
+   * 
+   * @Override
+   * 
+   * @example
+    this.firebaseUser = user;
+    if (user) {
+      const userRef = ref(this.db, 'move_follow_up_2023/users/' + user.uid);
+      onValue(userRef, (v) => {
+        if (v.exists()) {
+          this.user = v.val();
+
+          if (this.user.permission == PERMISSION.NOT_VERIFIED) {
+            // not verified user
+            // redirect to home page
+            router.navigate(['']);
+            // this.router.navigate(['']);
+          }
+
+          this.checkPermission(this.user);
+          this.loadDataClone();
+        }
+      })
+    }
+              
+   * 
+   * @param user 
+   */
+  checkPermission(user: AppUser): void {
+    // console.log('checkPermission');
+  }
+
+  /**
+   * Execute after reading user data from database
+   * 
+   * @Override
+   * 
+   * @example
+    this.firebaseUser = user;
+    if (user) {
+      const userRef = ref(this.db, 'move_follow_up_2023/users/' + user.uid);
+      onValue(userRef, (v) => {
+        if (v.exists()) {
+          this.user = v.val();
+
+          if (this.user.permission == PERMISSION.NOT_VERIFIED) {
+            // not verified user
+            // redirect to home page
+            router.navigate(['']);
+            // this.router.navigate(['']);
+          }
+
+          this.checkPermission(this.user);
+          this.loadDataClone();
+        }
+      })
+    }
+   */
+  readData(): void {}
+}

package/projects/cyc-base/src/components/mat-nav-bar/mat-nav-bar.component.html

@@ -0,0 +1,21 @@
+<mat-toolbar style="padding-left: 8px; padding-right: 8px">
+  <button mat-icon-button (click)="toggleSideNav()">
+    <mat-icon>menu</mat-icon>
+  </button>
+  <span style="font-size: large"> {{ title() }} </span>
+  <span class="space"></span>
+  @if (user()) {
+    <mat-label style="font-size: x-small; text-wrap: wrap; line-height: 10px">{{
+      user().name ? user().name : user().phoneNum
+    }}</mat-label>
+    <button mat-icon-button (click)="logout()">
+      <mat-icon>exit_to_app</mat-icon>
+    </button>
+  } @else {
+    @if (!user()) {
+      <button mat-stroked-button routerLink="/login-email">
+        Login
+      </button>
+    }
+  }
+</mat-toolbar>

package/projects/cyc-base/src/components/mat-nav-bar/mat-nav-bar.component.scss

@@ -0,0 +1,5 @@
+.space {
+  flex: 1 1 auto;
+  margin-left: 5px;
+  margin-right: 5px;
+}

package/projects/cyc-base/src/components/mat-nav-bar/mat-nav-bar.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { MatNavBarComponent } from './mat-nav-bar.component';
+
+describe('MatNavBarComponent', () => {
+  let component: MatNavBarComponent;
+  let fixture: ComponentFixture<MatNavBarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MatNavBarComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MatNavBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/cyc-base/src/components/mat-nav-bar/mat-nav-bar.component.ts

@@ -0,0 +1,47 @@
+import { Component, input, OnInit } from '@angular/core';
+import { MatButtonModule, MatIconButton } from '@angular/material/button';
+import { MatLabel } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { RouterModule } from '@angular/router';
+import { Auth, signOut } from 'firebase/auth';
+import { AppUser } from 'cyc-type-def';
+
+@Component({
+  selector: 'app-mat-nav-bar',
+  templateUrl: './mat-nav-bar.component.html',
+  styleUrls: ['./mat-nav-bar.component.scss'],
+  standalone: true,
+  imports: [
+    RouterModule,
+    MatLabel,
+    MatIconModule,
+    MatToolbarModule,
+    MatButtonModule,
+    MatMenuModule,
+    MatIconButton,
+  ],
+})
+export class MatNavBarComponent implements OnInit {
+  user = input.required<AppUser>();
+  title = input.required<string>();
+  auth = input.required<Auth>();
+
+  constructor() {}
+
+  ngOnInit() {}
+
+  logout() {
+    signOut(this.auth())
+      .then(() => {
+        console.log('Signed out.');
+        window.location.reload();
+      })
+      .catch((err) => {});
+  }
+
+  toggleSideNav() {
+    // this.helper.toggleSideNav();
+  }
+}

package/projects/cyc-base/src/lib/cyc-base.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CycBase } from './cyc-base';
+
+describe('CycBase', () => {
+  let component: CycBase;
+  let fixture: ComponentFixture<CycBase>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CycBase]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CycBase);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/cyc-base/src/lib/cyc-base.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'lib-cyc-base',
+  imports: [],
+  template: `
+    <p>
+      cyc-base works!
+    </p>
+  `,
+  styles: ``,
+})
+export class CycBase {
+
+}

package/projects/cyc-base/src/lib/shared-db.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SharedDb } from './shared-db';
+
+describe('SharedDb', () => {
+  let service: SharedDb;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(SharedDb);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/projects/cyc-base/src/lib/shared-db.ts

@@ -0,0 +1,182 @@
+import { Injectable } from '@angular/core';
+import { AppUser, CG, Cluster, SmallTeam } from 'cyc-type-def';
+import { Auth, getAuth, onAuthStateChanged, User } from 'firebase/auth';
+import { Database, getDatabase, onValue, ref } from 'firebase/database';
+import { BehaviorSubject, Observable, ReplaySubject } from 'rxjs';
+
+export interface AppData {
+  arrCluster?: Cluster[];
+  arrClusterForRef?: { [key: string]: Cluster };
+
+  arrSt?: SmallTeam[];
+  arrStForRef?: { [key: string]: SmallTeam };
+
+  arrCg?: CG[];
+  arrCgForRef?: { [key: string]: CG };
+
+  firebaseUser?: User | null;
+  user?: AppUser;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SharedDb {
+  private _db: Database;
+  private firebaseAuth: Auth;
+
+  private dataSubject = new BehaviorSubject<AppData>({});
+  private listeners: { [key: string]: any } = {};
+  private isInitialized = false;
+
+  // Public observable for components to subscribe to
+  public data$ = this.dataSubject.asObservable();
+
+  public auth$ = new ReplaySubject<{ user: AppUser; firebaseUser: User } | undefined>(1);
+
+  constructor() {
+    this._db = getDatabase();
+    this.firebaseAuth = getAuth();
+  }
+
+  async initializeData(): Promise<void> {
+    if (this.isInitialized) {
+      return;
+    }
+
+    this.isInitialized = true;
+
+    this.listenToCluster();
+    this.listenToSmallTeam();
+    this.listenToCG();
+    this.listenToUser();
+  }
+
+  private listenToCluster(): void {
+    const dataRef = ref(this.db, 'move_follow_up_2023/clusters');
+
+    this.listeners['clusters'] = onValue(dataRef, (snapshot) => {
+      // console.log('listenToCluster');
+
+      const obj: { [key: string]: Cluster } = snapshot.val();
+      this.updateData({ arrClusterForRef: obj });
+    });
+  }
+
+  private listenToSmallTeam(): void {
+    const dataRef = ref(this.db, 'move_follow_up_2023/small_teams');
+
+    this.listeners['small_teams'] = onValue(dataRef, (snapshot) => {
+      // console.log('listenToSmallTeam');
+
+      const obj: { [key: string]: SmallTeam } = snapshot.val();
+      this.updateData({ arrStForRef: obj });
+    });
+  }
+
+  private listenToCG(): void {
+    const dataRef = ref(this.db, 'move_follow_up_2023/CGs');
+
+    this.listeners['CGs'] = onValue(dataRef, (snapshot) => {
+      // console.log('listenToCG');
+
+      const obj: { [key: string]: CG } = snapshot.val();
+      this.updateData({ arrCgForRef: obj });
+    });
+  }
+
+  private listenToUser(): void {
+    this.listeners['firebaseUser'] = onAuthStateChanged(this.firebaseAuth, (user) => {
+      console.log('auth change');
+
+      this.fetchUser(user);
+    });
+  }
+
+  private fetchUser(user: User | null) {
+    if (!user) {
+      this.auth$.next(undefined);
+      return;
+    }
+
+    const dataRef = ref(this.db, 'move_follow_up_2023/users/' + user.uid);
+    onValue(dataRef, (snapshot) => {
+      console.log('userRef onValue');
+
+      if (snapshot.exists()) {
+        let _user: AppUser = snapshot.val();
+        this.auth$.next({ user: _user, firebaseUser: user });
+      } else {
+        this.auth$.next(undefined);
+      }
+    });
+  }
+
+  private updateData(newData: Partial<AppData>): void {
+    const currentData = this.dataSubject.value;
+    const updatedData = { ...currentData, ...newData };
+    this.dataSubject.next(updatedData);
+  }
+
+  get auth(): Observable<{ user: AppUser; firebaseUser: User } | undefined> {
+    return new Observable((observer) => {
+      this.auth$.subscribe((data) => {
+        // console.log(data);
+        console.log('auth$');
+
+        if (!data) {
+          observer.next(undefined);
+        } else {
+          observer.next({
+            firebaseUser: data.firebaseUser,
+            user: data.user,
+          });
+        }
+      });
+    });
+  }
+
+  get pastoralTeam(): Observable<AppData> {
+    return new Observable((observer) => {
+      this.data$.subscribe((data) => {
+        // console.log(data);
+
+        observer.next({
+          arrClusterForRef: data.arrClusterForRef,
+          arrStForRef: data.arrStForRef,
+          arrCgForRef: data.arrCgForRef,
+          // firebaseUser: data.firebaseUser,
+          // user: data.user,
+        });
+      });
+    });
+  }
+
+  get cluster(): Observable<{ [key: string]: Cluster }> {
+    return new Observable((observer) => {
+      this.data$.subscribe((data) => {
+        observer.next(data.arrClusterForRef || {});
+      });
+    });
+  }
+
+  get smallTeam(): Observable<{ [key: string]: SmallTeam }> {
+    return new Observable((observer) => {
+      this.data$.subscribe((data) => {
+        observer.next(data.arrStForRef || {});
+      });
+    });
+  }
+
+  get CG(): Observable<{ [key: string]: CG }> {
+    return new Observable((observer) => {
+      this.data$.subscribe((data) => {
+        observer.next(data.arrCgForRef || {});
+      });
+    });
+  }
+
+  get db() {
+    return this._db;
+  }
+}

package/projects/cyc-base/src/public-api.ts

@@ -0,0 +1,18 @@
+/*
+ * Public API Surface of cyc-base
+ */
+
+export * from './lib/cyc-base';
+
+// service
+export * from './lib/shared-db';
+
+// base class
+export * from './classes/CommonPage';
+export * from './classes/ExtendedCommonPage';
+export * from './classes/FirebasePage';
+export * from './classes/SecurePage';
+export * from './classes/BasePage';
+
+// components
+export * from './components/mat-nav-bar/mat-nav-bar.component';

package/projects/cyc-base/tsconfig.lib.json

@@ -0,0 +1,18 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/projects/cyc-base/tsconfig.lib.prod.json

@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/projects/cyc-base/tsconfig.spec.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.d.ts",
+    "src/**/*.spec.ts"
+  ]
+}