closes #12

LederCards · Apr 29, 2024 · 9fbe420 · 9fbe420
1 parent f1e01c1
commit 9fbe420
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 5 deletions.
diff --git a/src/app/_shared/pipes/faq.pipe.ts b/src/app/_shared/pipes/faq.pipe.ts
@@ -14,6 +14,8 @@ export class FaqPipe implements PipeTransform {
 
     const ruleRegex = /\$rule:([\d.]+)\$/gm;
     value = value.replace(ruleRegex, (match, p1) => {
+      if (!productId) return p1;
+
       const rulesUrl = this.metaService.getRulesByProductId(productId);
       if (!rulesUrl) return p1;
 
@@ -22,6 +24,8 @@ export class FaqPipe implements PipeTransform {
 
     const linkRegex = /\$link:([\w'" ]+)\$/gm;
     value = value.replace(linkRegex, (match, p1) => {
+      if (!productId) return p1;
+
       const foundCard = this.cardsService.getCardByIdOrName(p1);
       if (!foundCard) return p1;
 

diff --git a/src/app/faq/faq.page.html b/src/app/faq/faq.page.html
@@ -2,11 +2,16 @@
   <app-topbar [searchOnEnter]="true"></app-topbar>
 </ion-header>
 
+<header class="print-only print-header">
+  {{ faqProductName() }} FAQ
+</header>
+
 <ion-content>
   <div class="page-container">
 
     @if(currentFAQ(); as faq) {
     <ion-grid>
+
       <ion-row>
         <ion-col>
           <ion-list>
@@ -18,9 +23,14 @@
 
               @for(faqEntry of entry.faq; track $index) {
               <ion-item>
-                <ion-label text-wrap>
-                  <h3>Q: {{ faqEntry.q }}</h3>
-                  <p>A: {{ faqEntry.a }}</p>
+                <ion-label text-wrap class="print-only">
+                  <h3 [innerText]="'Q: ' + (faqEntry.q | faq)"></h3>
+                  <p [innerText]="'A: ' + (faqEntry.a | faq)"></p>
+                </ion-label>
+
+                <ion-label text-wrap class="print-hide">
+                  <h3 [innerHTML]="'Q: ' + (faqEntry.q | faq:productId())"></h3>
+                  <p [innerHTML]="'A: ' + (faqEntry.a | faq:productId())"></p>
                 </ion-label>
               </ion-item>
               }
@@ -54,4 +64,32 @@ <h3>Q: {{ faqEntry.q }}</h3>
   </div>
 
   <app-below-the-fold></app-below-the-fold>
-</ion-content>
+</ion-content>
+
+<!--
+<div class="print-only">
+
+  <div class="print-content">
+    @if(currentFAQ(); as faq) {
+    <ion-list>
+      @for(entry of faq; track $index) {
+      <ion-item-group>
+        <ion-item-divider>
+          <ion-label>{{ entry.card }}</ion-label>
+        </ion-item-divider>
+
+        @for(faqEntry of entry.faq; track $index) {
+        <ion-item>
+          <ion-label text-wrap>
+            <h3 [innerText]="'Q: ' + (faqEntry.q | faq)"></h3>
+            <p [innerText]="'A: ' + (faqEntry.a | faq)"></p>
+          </ion-label>
+        </ion-item>
+        }
+      </ion-item-group>
+      }
+    </ion-list>
+    }
+  </div>
+</div>
+-->
diff --git a/src/app/faq/faq.page.ts b/src/app/faq/faq.page.ts
@@ -16,12 +16,15 @@ export class FaqPage {
   public metaService = inject(MetaService);
 
   private locale = signal<string>('');
-  private productId = signal<string>('');
+  public productId = signal<string>('');
 
   public faqs = computed(() => this.faqService.getFAQs());
   public currentFAQ = computed(() =>
     this.faqService.getProductFAQ(this.productId(), this.locale())
   );
+  public faqProductName = computed(() =>
+    this.metaService.getProductNameByProductId(this.productId())
+  );
 
   constructor() {}
 

diff --git a/src/global.scss b/src/global.scss
@@ -33,6 +33,7 @@
 @import "~@ionic/angular/css/ionic-swiper.css";
 
 @import "colors";
+@import "print";
 
 body {
   --border-width: 2px;

diff --git a/src/print.scss b/src/print.scss
@@ -0,0 +1,54 @@
+.print-only {
+  @media screen {
+    display: none !important;
+  }
+}
+
+@media print {
+  ion-header,
+  app-below-the-fold,
+  .print-hide {
+    display: none !important;
+  }
+
+  .ion-page {
+    display: initial !important;
+    position: initial !important;
+  }
+
+  body {
+    position: initial !important;
+    max-height: initial !important;
+    overflow: auto !important;
+  }
+
+  ion-router-outlet {
+    overflow: auto !important;
+    contain: none !important;
+    position: initial !important;
+  }
+
+  ion-content {
+    --offset-bottom: unset !important;
+    display: unset !important;
+    position: unset !important;
+  }
+
+  .print-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 50px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 2rem;
+    padding-top: 8px;
+  }
+
+  .page-container {
+    margin-top: 50px;
+  }
+}