replaced page.slug with page.id

ortwic · Apr 6, 2024 · 5f2d33b · 5f2d33b
1 parent 0706ad1
commit 5f2d33b
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 61 deletions.
diff --git a/src/app/models/page.model.ts b/src/app/models/page.model.ts
@@ -3,23 +3,12 @@ import { IFrameContent, MarkdownContent, SectionContent, SliderContent, FormCont
 export interface Page {
     id: string;
     title: string;
-    slug: string;
     hero_section: HeroSection,
     content: PageContent[];
-    sidebar?: {
-        title: string;
-        content: string;
-    },
-    seo_metadata?: {
-        meta_title: string;
-        meta_description: string;
-        focus_keywords: string;
-    },
-    footer_override: string;
+    min_read_time: number;
     publish_date: Date;
     last_updated: Date;
-    status: 'published' | 'beta' | 'draft';
-    min_read_time: number;
+    status: 'published' | 'draft';
 }
 
 export interface HeroSection {

diff --git a/src/app/pages/page/page.component.ts b/src/app/pages/page/page.component.ts
@@ -64,14 +64,14 @@ export class PageComponent {
             const next = pageIndex + 1 < pages.length ? pageIndex + 1 : undefined;
             return {
                 ...page,
-                data: unitData[page.slug] ?? {},
+                data: unitData[page.id] ?? {},
                 unitIndex,
                 prevIndex: prev,
                 nextIndex: next,
                 nextDisabled: () => this._step !== page.content.length
             };
         }),
-        tap(page => this.continue = this.initBreakpoints(page.content, page.unitIndex, page.slug)),
+        tap(page => this.continue = this.initBreakpoints(page.content, page.unitIndex, page.id)),
         tap(page => document.title = page.title + " | Why App"),
         tap(page => {
             this._startTime = Date.now();

diff --git a/src/app/pages/start/start.component.html b/src/app/pages/start/start.component.html
@@ -31,39 +31,39 @@ <h3>{{unit.title}}</h3>
                 <mat-divider />
             </p>
             <div class="card-container">
-                <mat-card class="card" *ngFor="let section of (unit.pages | async); let j = index">
+                <mat-card class="card" *ngFor="let page of (unit.pages | async); let j = index">
                     <mat-card-header class="card-header">
                         <div class="card-title">
                             <mat-card-title>
                                 <h3>
                                     <a [routerLink]="['/p', $index, j]">
-                                        {{section.title}}
+                                        {{page.title}}
                                     </a>
                                 </h3>
                             </mat-card-title>
-                            @if (section.hero_section) {
+                            @if (page.hero_section) {
                                 <mat-card-subtitle>
-                                    {{section.hero_section.subhead}}
+                                    {{page.hero_section.subhead}}
                                 </mat-card-subtitle>
                             }
                         </div>
                         <div class="card-progress">
-                            <app-progress-spinner [size]="50" [value]="pageProgressPercent($index, section.slug)">
-                                <small>{{pageProgressPercent($index, section.slug)}}%</small>
+                            <app-progress-spinner [size]="50" [value]="pageProgressPercent($index, page.id)">
+                                <small>{{pageProgressPercent($index, page.id)}}%</small>
                             </app-progress-spinner>
                         </div>
                     </mat-card-header>
                     <mat-card-content class="card-content">
                         <p>
-                            @if (section.hero_section && section.hero_section.image) {
-                                <img class="thumbnail" mat-card-image [src]="section.hero_section.image" [alt]="section.hero_section.image_info" />
+                            @if (page.hero_section && page.hero_section.image) {
+                                <img class="thumbnail" mat-card-image [src]="page.hero_section.image" [alt]="page.hero_section.image_info" />
                             } @else {
                                 <mat-divider />
                             }
                         </p>
                     </mat-card-content>
                     <mat-card-footer class="footer">
-                        @if (pageProgressPercent($index, section.slug) > 99) {
+                        @if (pageProgressPercent($index, page.id) > 99) {
                             <mat-icon fontIcon="task_alt"/> Erledigt
                         } @else {
                             <mat-icon fontIcon="radio_button_unchecked"/> Offen

diff --git a/src/app/pages/summary/summary.component.html b/src/app/pages/summary/summary.component.html
@@ -11,16 +11,16 @@ <h2>
         </div>
         <mat-accordion multi>
             <ng-container *ngFor="let page of pages($index) | async">
-                @if (data(unit[page.slug])) {
+                @if (data(unit[page.id])) {
                     <mat-expansion-panel expanded>
                         <mat-expansion-panel-header>
                             <mat-panel-title class="header">
                                 <span>{{page.title}}</span>
-                                <small>{{percent(unit[page.slug])}}%</small>
+                                <small>{{percent(unit[page.id])}}%</small>
                             </mat-panel-title>
                         </mat-expansion-panel-header>
                         <div class="content">                            
-                            @for (item of data(unit[page.slug]) | keyvalue: doneAtLast; track $index) {
+                            @for (item of data(unit[page.id]) | keyvalue: doneAtLast; track $index) {
                                 @if (item.key === doneKey) {
                                     <mat-divider /><br/>
                                     <label [title]="item.value + 's'">

diff --git a/src/app/services/firestore.service.ts b/src/app/services/firestore.service.ts
@@ -95,13 +95,19 @@ export class FirestoreService {
 
     public async getDocument<T>(id: string): Promise<T | undefined> {
         const docRef = doc(this.store, this.path, id);
-        return await this.toDocument(docRef) as T;
+        return {
+            id: id,
+            ...await this.toDocument(docRef) as T
+        };
     }
 
     protected async toDocument<T>(docRef: DocumentReference<T, DocumentData>) {
         const snapshot = await getDoc(docRef);
         if (snapshot.exists()) {
-            return snapshot.data(snapshotOptions);
+            return {
+                id: snapshot.id,
+                ...snapshot.data(snapshotOptions)
+            };
         }
 
         return Promise.resolve(undefined);

diff --git a/src/app/services/guide.service.ts b/src/app/services/guide.service.ts
@@ -1,40 +1,38 @@
 import { Injectable } from '@angular/core';
-import { 
-  getDoc,
-  orderBy, 
-  DocumentReference, 
-  QueryDocumentSnapshot, 
-} from '@angular/fire/firestore';
+import { getDoc, orderBy, DocumentReference, QueryDocumentSnapshot } from '@angular/fire/firestore';
 import { FirestoreService, snapshotOptions } from './firestore.service';
 import { Guide } from '../models/guide.model';
 import { Page } from '../models/page.model';
 
 @Injectable({
-  providedIn: 'root'
+    providedIn: 'root',
 })
 export class GuideService extends FirestoreService {
-  readonly dataPromise = super.getDocuments<Guide>(orderBy('no'));
+    readonly dataPromise = super.getDocuments<Guide>(orderBy('no'));
 
-  constructor() {
-    super('guide');
-  }
+    constructor() {
+        super('guide');
+    }
 
-  protected override fromFirestore(snapshot: QueryDocumentSnapshot) {
-    const toDocument = async (docRef: DocumentReference) => {
-      const doc = await getDoc(docRef);
-      return doc.data(snapshotOptions);
-    };
+    protected override fromFirestore(snapshot: QueryDocumentSnapshot) {
+        const toDocument = async (docRef: DocumentReference) => {
+            const doc = await getDoc(docRef);
+            return {
+                id: doc.id,
+                ...doc.data(snapshotOptions),
+            };
+        };
 
-    const data = snapshot.data(snapshotOptions);
-    const pageIds = data['pages'] ?? [];
-    const pages = Promise.all(pageIds.map(toDocument));
-    return { 
-      ...data,
-      pages,
-    };
-  }
+        const data = snapshot.data(snapshotOptions);
+        const pageIds = data['pages'] ?? [];
+        const pages = Promise.all(pageIds.map(toDocument));
+        return {
+            ...data,
+            pages,
+        };
+    }
 
-  async getPages(index: number): Promise<Page[]> {
-    return this.dataPromise.then(guide => guide[index]?.pages ?? []);
-  }
+    async getPages(index: number): Promise<Page[]> {
+        return this.dataPromise.then((guide) => guide[index]?.pages ?? []);
+    }
 }
diff --git a/src/app/services/user-result.service.ts b/src/app/services/user-result.service.ts
@@ -18,15 +18,15 @@ export class UserResultService {
                 return guide.pages.then(pages => {
                     let unitData: Record<string, Result> = {};
                     pages.forEach(page => {
-                        const count = userData[page.slug] ? Object.keys(userData[page.slug]).length : 0;
+                        const count = userData[page.id] ? Object.keys(userData[page.id]).length : 0;
                         const total = page.content
                           .filter(content => content.type === 'stepper')
                           .reduce((acc, content) => acc + (content as FormContent).value.length, 1);
                         const percent = Math.round(count / total * 100);
                         unitData = {
                             ...unitData,
-                            [page.slug]: {
-                                data: userData[page.slug],
+                            [page.id]: {
+                                data: userData[page.id],
                                 progress: {
                                     count, 
                                     total, 
@@ -35,8 +35,8 @@ export class UserResultService {
                             }
                         }
                     });
-                    const count = Object.keys(unitData).reduce((acc, slug) => acc + unitData[slug].progress.count, 0);
-                    const total = Object.keys(unitData).reduce((acc, slug) => acc + unitData[slug].progress.total, 0);
+                    const count = Object.keys(unitData).reduce((acc, id) => acc + unitData[id].progress.count, 0);
+                    const total = Object.keys(unitData).reduce((acc, id) => acc + unitData[id].progress.total, 0);
                     const percent = Math.round(count / total * 100);
                     return { 
                         ...unitData,