From 66a3cbc0c0885cd9e4272fcf1d162c2cd01735b5 Mon Sep 17 00:00:00 2001
From: bczmarko <bczmarko@intrend.hu>
Date: Mon, 4 Mar 2024 09:26:22 +0100
Subject: [PATCH 1/2] Add search button in the minimal header in post-details

---
 .../post-details/post-details.component.html  |  1 +
 .../post-details/post-details.component.scss  |  4 ++
 .../post-details/post-details.component.ts    | 43 +++++++++----------
 3 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/angular-primeng-app/src/app/components/post-details/post-details.component.html b/angular-primeng-app/src/app/components/post-details/post-details.component.html
index f1f7878..ef19d4b 100644
--- a/angular-primeng-app/src/app/components/post-details/post-details.component.html
+++ b/angular-primeng-app/src/app/components/post-details/post-details.component.html
@@ -7,6 +7,7 @@ <h1>{{blogName}}</h1>
       </a>
     </div>
     <div class="p-toolbar-group-end">
+      <app-search-dialog [blogId]="blogId"></app-search-dialog>
       <p-inputSwitch [(ngModel)]="checked" (click)="onThemeChange(checked ? 'dark' : 'light')"
         id="theme-switch"></p-inputSwitch>
     </div>
diff --git a/angular-primeng-app/src/app/components/post-details/post-details.component.scss b/angular-primeng-app/src/app/components/post-details/post-details.component.scss
index 1d44ba3..1cd4a2c 100644
--- a/angular-primeng-app/src/app/components/post-details/post-details.component.scss
+++ b/angular-primeng-app/src/app/components/post-details/post-details.component.scss
@@ -7,6 +7,10 @@
         margin: 0;
       }
     }
+
+    .p-toolbar-group-end {
+      gap: 10px;
+    }
   }
 
   article {
diff --git a/angular-primeng-app/src/app/components/post-details/post-details.component.ts b/angular-primeng-app/src/app/components/post-details/post-details.component.ts
index aa9489e..bd6caf8 100644
--- a/angular-primeng-app/src/app/components/post-details/post-details.component.ts
+++ b/angular-primeng-app/src/app/components/post-details/post-details.component.ts
@@ -16,6 +16,7 @@ import { ButtonModule } from "primeng/button";
 import { InputSwitchModule } from "primeng/inputswitch";
 
 import { SanitizerHtmlPipe } from "../../pipes/sanitizer-html.pipe";
+import { SearchDialogComponent } from "../../partials/search-dialog/search-dialog.component";
 
 @Component({
   selector: 'app-post-details',
@@ -31,41 +32,39 @@ import { SanitizerHtmlPipe } from "../../pipes/sanitizer-html.pipe";
     ToolbarModule,
     ButtonModule,
     InputSwitchModule,
-    SanitizerHtmlPipe
+    SanitizerHtmlPipe,
+    SearchDialogComponent
   ],
   templateUrl: './post-details.component.html',
   styleUrl: './post-details.component.scss'
 })
-export class PostDetailsComponent implements OnInit, OnDestroy {
+export class PostDetailsComponent implements OnInit {
   post$!: Observable<Post>;
   blogInfo!: BlogInfo;
+  blogId: string = "";
   blogName: string = "";
-	blogSocialLinks!: BlogLinks;
-	checked: boolean = true;
-	selectedTheme: string = "dark";
-  route: ActivatedRoute = inject(ActivatedRoute);
-  private blogService: BlogService = inject(BlogService);
+  checked: boolean = true;
+  selectedTheme: string = "dark";
   themeService: ThemeService = inject(ThemeService);
-  private querySubscription?: Subscription;
+  private blogService: BlogService = inject(BlogService);
 
-  @Input({ required: true }) slug!: string;
+  @Input({required: true})
+  set slug(slug: string) {
+    this.post$ = this.blogService.getSinglePost(slug);
+  }
 
   ngOnInit(): void {
-    this.querySubscription = this.blogService
-    .getBlogInfo()
-    .subscribe((data) => {
-      this.blogInfo = data;
-      this.blogName = this.blogInfo.title;
-    });
-    this.post$ = this.blogService.getSinglePost(this.slug);
+    this.blogService
+      .getBlogInfo()
+      .subscribe((data) => {
+        this.blogInfo = data;
+        this.blogId = this.blogInfo.id;
+        this.blogName = this.blogInfo.title;
+      });
   }
 
   onThemeChange(theme: string): void {
-		this.selectedTheme = theme;
-		this.themeService.setTheme(theme);
-	}
-
-  ngOnDestroy(): void {
-    this.querySubscription?.unsubscribe();
+    this.selectedTheme = theme;
+    this.themeService.setTheme(theme);
   }
 }

From 7e445179564dd880e28b587c614cda5a2324026b Mon Sep 17 00:00:00 2001
From: bczmarko <bczmarko@intrend.hu>
Date: Mon, 4 Mar 2024 11:42:19 +0100
Subject: [PATCH 2/2] in .p-toolbar-group-end css rule using rem instead of px

---
 .../src/app/components/post-details/post-details.component.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/angular-primeng-app/src/app/components/post-details/post-details.component.scss b/angular-primeng-app/src/app/components/post-details/post-details.component.scss
index 1cd4a2c..170edea 100644
--- a/angular-primeng-app/src/app/components/post-details/post-details.component.scss
+++ b/angular-primeng-app/src/app/components/post-details/post-details.component.scss
@@ -9,7 +9,7 @@
     }
 
     .p-toolbar-group-end {
-      gap: 10px;
+      gap: 0.625rem;
     }
   }