dialogs follow extended, settings created

Author: esteecodes

angular-primeng-app/src/app/components/header/header.component.html

@@ -6,6 +6,7 @@ <h1>{{ blogName }}</h1>
     </a>
     <div class="controls">
       <app-search-dialog [blogId]="blogId"></app-search-dialog>
+      <app-settings-dialog></app-settings-dialog>
       <p-inputSwitch [(ngModel)]="checked" (click)="onThemeChange(checked ? 'dark' : 'light')" id="theme-switch"></p-inputSwitch>
     </div>
   </div>
@@ -27,7 +28,7 @@ <h1>{{ blogName }}</h1>
       </div>
     </div>
     <div class="follow">
-      <p-button (click)="showDialog()" label="Follow" [raised]="true"></p-button>
+      <app-follow-dialog></app-follow-dialog>
     </div>
   </div>
   <div class="toolbar-row">
@@ -38,12 +39,3 @@ <h1>{{ blogName }}</h1>
     </div>
   </div>
 </p-toolbar>
-
-<p-dialog [(visible)]="visible" [style]="{width: '27vw'}">
-  <div class="logo-wrapper">
-    <img class="logo" src="/assets/images/anguhashblog-logo-purple-bgr.jpg" alt="">
-  </div>
-  <h3>Hey, 👋 sign up or sign in to interact.</h3>
-  <a class="button" href="https://hashnode.com/" target="_blank" rel="noopener noreferrer"><img src="/assets/images/hashnode-logo-white.png" alt="Sign in">Sign in with Hashnode</a>
-  <p>This blog is powered by <a class="link" href="https://hashnode.com/" target="_blank" rel="noopener noreferrer">Hashnode</a>. To interact with the content on this blog, please log in through Hashnode.</p>
-</p-dialog>

angular-primeng-app/src/app/components/header/header.component.scss

@@ -64,59 +64,8 @@ p-toolbar {
   }
 }
 
-p-dialog {
-  h3 {
-    font-size: 1.1rem;
-    font-weight: 400;
-    text-align: center;
-  }
-
-  .logo-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .logo {
-      width: 5rem;
-      height: 5rem;
-      margin: 1rem;
-      border-radius: 50%;
-    }
-  }
-
-  .button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #2563eb;
-    color: #fff;
-    font-size: 1.1rem;
-    padding: 0.7rem 3rem;
-    margin: 2rem 1rem;
-    border: none;
-    border-radius: 3rem;
-
-    img {
-      width: 1.5rem;
-      height: 1.5rem;
-      margin-right: 0.5rem;
-    }
-  }
-
-  .link {
-    color: #2563eb;
-    font-size: 0.8.5rem;
-    margin: 0;
-  }
-
-  p {
-    font-size: 0.8rem;
-    text-align: center;
-  }
-}
-
 .controls {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 0.5rem;
 }

angular-primeng-app/src/app/components/header/header.component.ts

@@ -13,13 +13,17 @@ import { ToolbarModule } from "primeng/toolbar";
 import { ButtonModule } from "primeng/button";
 import { InputSwitchModule } from "primeng/inputswitch";
 import { DialogModule } from "primeng/dialog";
+import { SettingsDialogComponent } from "../../partials/settings-dialog/settings-dialog.component";
+import { FollowDialogComponent } from "../../partials/follow-dialog/follow-dialog.component";
 
 @Component({
 	selector: "app-header",
 	standalone: true,
   imports: [
     AsyncPipe,
     SearchDialogComponent,
+    SettingsDialogComponent,
+    FollowDialogComponent,
     ButtonModule,
     FormsModule,
     InputSwitchModule,
@@ -87,10 +91,6 @@ export class HeaderComponent implements OnInit, OnDestroy {
 		this.themeService.setTheme(theme);
 	}
 
-	showDialog() {
-		this.visible = true;
-	}
-
   ngOnDestroy(): void {
 		this.querySubscription?.unsubscribe();
 	}

angular-primeng-app/src/app/partials/follow-dialog/follow-dialog.component.html

@@ -0,0 +1,10 @@
+<p-button (click)="showDialog()" label="Follow" [raised]="true"></p-button>
+
+<p-dialog [(visible)]="visible" [style]="{width: '27vw'}">
+  <div class="logo-wrapper">
+    <img class="logo" src="/assets/images/anguhashblog-logo-purple-bgr.jpg" alt="">
+  </div>
+  <h3>Hey, 👋 sign up or sign in to interact.</h3>
+  <a class="button" href="https://hashnode.com/" target="_blank" rel="noopener noreferrer"><img src="/assets/images/hashnode-logo-white.png" alt="Sign in">Sign in with Hashnode</a>
+  <p>This blog is powered by <a class="link" href="https://hashnode.com/" target="_blank" rel="noopener noreferrer">Hashnode</a>. To interact with the content on this blog, please log in through Hashnode.</p>
+</p-dialog>

angular-primeng-app/src/app/partials/follow-dialog/follow-dialog.component.scss

@@ -0,0 +1,50 @@
+p-dialog {
+  h3 {
+    font-size: 1.1rem;
+    font-weight: 400;
+    text-align: center;
+  }
+
+  .logo-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .logo {
+      width: 5rem;
+      height: 5rem;
+      margin: 1rem;
+      border-radius: 50%;
+    }
+  }
+
+  .button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #2563eb;
+    color: #fff;
+    font-size: 1.1rem;
+    padding: 0.7rem 3rem;
+    margin: 2rem 1rem;
+    border: none;
+    border-radius: 3rem;
+
+    img {
+      width: 1.5rem;
+      height: 1.5rem;
+      margin-right: 0.5rem;
+    }
+  }
+
+  .link {
+    color: #2563eb;
+    font-size: 0.8.5rem;
+    margin: 0;
+  }
+
+  p {
+    font-size: 0.8rem;
+    text-align: center;
+  }
+}

angular-primeng-app/src/app/partials/follow-dialog/follow-dialog.component.spec.ts

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

angular-primeng-app/src/app/partials/follow-dialog/follow-dialog.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { ButtonModule } from 'primeng/button';
+import { DialogModule } from 'primeng/dialog';
+
+@Component({
+  selector: 'app-follow-dialog',
+  standalone: true,
+  imports: [DialogModule, ButtonModule],
+  templateUrl: './follow-dialog.component.html',
+  styleUrl: './follow-dialog.component.scss'
+})
+export class FollowDialogComponent {
+	visible: boolean = false;
+
+  showDialog() {
+		this.visible = true;
+	}
+}

angular-primeng-app/src/app/partials/search-dialog/search-dialog.component.html

@@ -1,36 +1,36 @@
-<p-button class="transparent-button search-button" icon="pi pi-search"
-          [text]="true" [rounded]="true" (click)="showDialog()"></p-button>
+<p-button class="transparent-button search-button" icon="pi pi-search" [rounded]="true" [text]="true" [raised]="true"
+  (click)="showDialog()"></p-button>
 
 <p-dialog [(visible)]="visible" position="top" [modal]="true"
-          [style]="{ width: '60%', marginTop: '150px', maxHeight: '70%' }" [draggable]="false"
-          [dismissableMask]="true" header="Search posts">
+  [style]="{ width: '60%', marginTop: '150px', maxHeight: '70%' }" [draggable]="false" [dismissableMask]="true"
+  header="Search posts">
 
   <span class="search-input-container p-input-icon-right">
     @if (queryFormControl.value) {
-      <i class="pi pi-times input-clear-icon" (click)="clearQuery()"></i>
+    <i class="pi pi-times input-clear-icon" (click)="clearQuery()"></i>
     }
     <input class="search-input" type="text" pInputText placeholder="Start typing to search..."
-           [formControl]="queryFormControl">
+      [formControl]="queryFormControl">
   </span>
 
 
   @if (queryFormControl.value && posts.length !== 0) {
-    @for (post of posts; track post.id) {
-      <div class="search-result" (click)="navigateToPost(post.slug)">
-        <div class="info-section">
-          <h3 class="post-title">{{ post.title }}</h3>
-          <p class="author-name post-info">{{ post.author.name }}</p>
-          <p class="post-info">{{ post.publishedAt | date }}</p>
-        </div>
+  @for (post of posts; track post.id) {
+  <div class="search-result" (click)="navigateToPost(post.slug)">
+    <div class="info-section">
+      <h3 class="post-title">{{ post.title }}</h3>
+      <p class="author-name post-info">{{ post.author.name }}</p>
+      <p class="post-info">{{ post.publishedAt | date }}</p>
+    </div>
 
-        <img [src]="post.coverImage.url" [alt]="post.title + ' cover image'">
-      </div>
-    }
+    <img [src]="post.coverImage.url" [alt]="post.title + ' cover image'">
+  </div>
+  }
   } @else {
-    @if (queryFormControl.value) {
-      <p class="no-result-text"><i class="pi pi-search search-icon"></i>No matching articles found. Try another search</p>
-    } @else {
-      <p class="no-result-text"><i class="pi pi-search search-icon"></i>Search articles from this blog</p>
-    }
+  @if (queryFormControl.value) {
+  <p class="no-result-text"><i class="pi pi-search search-icon"></i>No matching articles found. Try another search</p>
+  } @else {
+  <p class="no-result-text"><i class="pi pi-search search-icon"></i>Search articles from this blog</p>
+  }
   }
 </p-dialog>

angular-primeng-app/src/app/partials/search-dialog/search-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, Input, OnInit } from '@angular/core';
+import { Component, inject, Input, OnInit } from "@angular/core";
 import { DialogModule } from "primeng/dialog";
 import { InputTextModule } from "primeng/inputtext";
 import { ButtonModule } from "primeng/button";
@@ -9,49 +9,50 @@ import { DatePipe } from "@angular/common";
 import { Router } from "@angular/router";
 
 @Component({
-  selector: 'app-search-dialog',
-  standalone: true,
-  imports: [
-    DialogModule,
-    InputTextModule,
-    ButtonModule,
-    FormsModule,
-    DatePipe,
-    ReactiveFormsModule
-  ],
-  templateUrl: './search-dialog.component.html',
-  styleUrl: './search-dialog.component.scss'
+	selector: "app-search-dialog",
+	standalone: true,
+	imports: [
+		DialogModule,
+		InputTextModule,
+		ButtonModule,
+		FormsModule,
+		DatePipe,
+		ReactiveFormsModule,
+	],
+	templateUrl: "./search-dialog.component.html",
+	styleUrl: "./search-dialog.component.scss",
 })
 export class SearchDialogComponent implements OnInit {
-  @Input({required: true}) blogId!: string;
+	@Input({ required: true }) blogId!: string;
 
-  visible = false;
-  posts: Post[] = [];
-  queryFormControl = new FormControl('');
-  blogService: BlogService = inject(BlogService);
-  router: Router = inject(Router);
+	visible = false;
+	posts: Post[] = [];
+	queryFormControl = new FormControl("");
+	blogService: BlogService = inject(BlogService);
+	router: Router = inject(Router);
 
-  ngOnInit() {
-    this.queryFormControl.valueChanges.subscribe(query => this.searchPosts(query));
-  }
+	ngOnInit() {
+		this.queryFormControl.valueChanges.subscribe((query) =>
+			this.searchPosts(query)
+		);
+	}
 
-  showDialog() {
-    this.visible = true;
-  }
+	showDialog() {
+		this.visible = true;
+	}
 
-  searchPosts(query: string | null) {
-    this.blogService.searchPosts(this.blogId, query)
-      .subscribe(response => {
-        this.posts = response;
-      });
-  }
+	searchPosts(query: string | null) {
+		this.blogService.searchPosts(this.blogId, query).subscribe((response) => {
+			this.posts = response;
+		});
+	}
 
-  navigateToPost(slug: string) {
-    this.visible = false;
-    this.router.navigate(['/post', slug]);
-  }
+	navigateToPost(slug: string) {
+		this.visible = false;
+		this.router.navigate(["/post", slug]);
+	}
 
-  clearQuery() {
-    this.queryFormControl.reset();
-  }
+	clearQuery() {
+		this.queryFormControl.reset();
+	}
 }