Merge pull request #10 from hbweb/feat/topic-listing

hbweb · web-flow · commit 3bf426aff41b · 2023-09-18T16:39:23.000+07:00
Feat/topic listing
diff --git a/src/app/shared/components/header/header.component.html b/src/app/shared/components/header/header.component.html
@@ -3,7 +3,7 @@
     <div
       class="flex items-center text-3xl font-black text-gray-800 uppercase dark:text-white"
     >
-      <a href="/" routerLink="/"><span class="mt-1 ml-3 text-xs text-red-700"> Angular Pro </span></a>
+      <a href="/" routerLink="/"><span class="mt-1 text-xs text-red-700"> Angular Pro </span></a>
     </div>
     <div class="flex items-center">
       <nav
diff --git a/src/app/shared/data/topic-listing.json b/src/app/shared/data/topic-listing.json
diff --git a/src/app/shared/models/index.ts b/src/app/shared/models/index.ts
@@ -0,0 +1 @@
+export * from './topic.interface';
diff --git a/src/app/shared/models/topic.interface.ts b/src/app/shared/models/topic.interface.ts
@@ -0,0 +1,12 @@
+export interface Topic {
+  id: number;
+  title: string;
+  icon: string;
+  path: string;
+}
+
+
+export interface TopicsResponse {
+  data: Topic[];
+  status: number;
+}
diff --git a/src/app/topics/dependency-injection/inject-service/inject-service.component.html b/src/app/topics/dependency-injection/inject-service/inject-service.component.html
diff --git a/src/app/topics/dependency-injection/inject-service/inject-service.component.scss b/src/app/topics/dependency-injection/inject-service/inject-service.component.scss
diff --git a/src/app/topics/dependency-injection/inject-service/inject-service.component.spec.ts b/src/app/topics/dependency-injection/inject-service/inject-service.component.spec.ts
diff --git a/src/app/topics/dependency-injection/inject-service/inject-service.component.ts b/src/app/topics/dependency-injection/inject-service/inject-service.component.ts
diff --git a/src/app/topics/topic-listing/services/topic.service.spec.ts b/src/app/topics/topic-listing/services/topic.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { TopicService } from './topic.service';
+
+describe('TopicService', () => {
+  let service: TopicService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(TopicService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/topics/topic-listing/services/topic.service.ts b/src/app/topics/topic-listing/services/topic.service.ts
@@ -0,0 +1,16 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { TopicsResponse } from 'src/app/shared/models';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TopicService {
+
+  constructor(private _httpClient: HttpClient) { }
+
+  public getTopics(): Observable<TopicsResponse> {
+    return this._httpClient.get<TopicsResponse>('assets/data/topic-listing.json');
+  }
+}
diff --git a/src/app/topics/topic-listing/topic-listing.component.html b/src/app/topics/topic-listing/topic-listing.component.html
@@ -1 +1,18 @@
-<p>topic-listing works!</p>
+<div class="topics-container">
+  <h1 class="mb-2 text-1xl font-bold text-gray-800 md:text-3xl ">Angular advanced topics</h1>
+  <p class="pb-4">Angular is an application-design framework and development platform for creating efficient and sophisticated single-page apps.</p>
+  <ul *ngIf="(topics$ | async) as topics" class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4">
+    <ng-container *ngFor="let topic of topics">
+        <li class="item p-4">
+            <a href="{{ topic.path }}" routerLink="{{ topic.path }}">
+              <div class="title-wrapper flex justify-between py-4 mb-6">
+                <h4 class="text-xl">{{ topic.title }}</h4>
+                <i class="text-2xl {{topic.icon}}"></i>
+              </div>
+
+              <button class="inline-block w-full rounded py-3 px-6 text-white">View content</button>
+            </a>
+        </li>
+    </ng-container>
+  </ul>
+</div>
diff --git a/src/app/topics/topic-listing/topic-listing.component.scss b/src/app/topics/topic-listing/topic-listing.component.scss
@@ -0,0 +1,26 @@
+.topics-container ul {
+  list-style: none;
+
+  li {
+    display: block;
+    background-color: #dfe4ec;
+    transform: translateY(0);
+    transition: all 0.3s linear 0s;
+
+    button {
+      opacity: 0; // hide button
+      background: #212752;
+      color: #fff;
+      text-transform: uppercase;
+    }
+
+    &:hover {
+      transform: translateY(-5px);
+      box-shadow: 10px 20px 30px 0 rgba(33,38,82,0.15);
+
+      button {
+        opacity: 1;
+      }
+    }
+  }
+}
diff --git a/src/app/topics/topic-listing/topic-listing.component.ts b/src/app/topics/topic-listing/topic-listing.component.ts
@@ -1,4 +1,8 @@
+import { map } from 'rxjs/operators';
 import { Component } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Topic } from 'src/app/shared/models';
+import { TopicService } from './services/topic.service';
 
 @Component({
   selector: 'app-topic-listing',
@@ -7,4 +11,11 @@ import { Component } from '@angular/core';
 })
 export class TopicListingComponent {
 
+  topics$: Observable<Topic[]> = this.topicService.getTopics().pipe(
+    map( data => data.data)
+  );
+
+  constructor( private topicService: TopicService) {
+  }
+
 }
diff --git a/src/app/topics/topic-listing/topic-listing.module.ts b/src/app/topics/topic-listing/topic-listing.module.ts
@@ -3,6 +3,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { NgModule } from '@angular/core';
 import { TopicListingComponent } from './topic-listing.component';
 import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
 
 const routes: Routes = [
   {
@@ -17,7 +18,8 @@ const routes: Routes = [
   ],
   imports: [
     RouterModule.forChild(routes),
-    CommonModule
+    CommonModule,
+    HttpClientModule
   ],
 })
 export class TopicListingModule { }
diff --git a/src/assets/data/topic-listing.json b/src/assets/data/topic-listing.json
@@ -0,0 +1,18 @@
+{
+  "status": 200,
+  "data": [
+    {"id": 1, "title": "Angular Architecture", "icon": "fa-solid fa-house","path": "/architecture"},
+    {"id": 2, "title": "Advanced Component", "icon": "fa-brands fa-facebook","path": "/component"},
+    {"id": 3, "title": "Dependency Injection", "icon": "fa-solid fa-bomb","path": "/dependency-injection"},
+    {"id": 4, "title": "Advanced Typescript", "icon": "fa-solid fa-bomb","path": "/typescript"},
+    {"id": 5, "title": "Performances", "icon": "fa-solid fa-bomb","path": "/performances"},
+    {"id": 6, "title": "State Management", "icon": "fa-solid fa-bomb","path": "/state-management"},
+    {"id": 7, "title": "Advanced Directive", "icon": "fa-solid fa-bomb","path": "/directive"},
+    {"id": 8, "title": "Advanced Routing", "icon": "fa-solid fa-bomb","path": "/routing"},
+    {"id": 9, "title": "Advanced Rxjs", "icon": "fa-solid fa-bomb","path": "/rxjs"},
+    {"id": 10, "title": "Pipes", "icon": "fa-solid fa-bomb","path": "/pipes"},
+    {"id": 11, "title": "Advanced Forms", "icon": "fa-solid fa-bomb","path": "/forms"},
+    {"id": 12, "title": "Security", "icon": "fa-solid fa-bomb","path": "/security"},
+    {"id": 13, "title": "Testing", "icon": "fa-solid fa-bomb","path": "/testing"}
+  ]
+}

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	`<div`
`4`	`4`	`class="flex items-center text-3xl font-black text-gray-800 uppercase dark:text-white"`
`5`	`5`	`>`
`6`		`- <a href="/" routerLink="/"><span class="mt-1 ml-3 text-xs text-red-700"> Angular Pro </span></a>`
	`6`	`+ <a href="/" routerLink="/"><span class="mt-1 text-xs text-red-700"> Angular Pro </span></a>`
`7`	`7`	`</div>`
`8`	`8`	`<div class="flex items-center">`
`9`	`9`	`<nav`