feat(session-05): Project completed

apps/angular-app/src/app/app.component.html

@@ -1 +1,2 @@
+<mfee-header></mfee-header>
 <router-outlet></router-outlet>

apps/angular-app/src/app/app.component.ts

@@ -1,9 +1,11 @@
 import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
+import { HeaderComponent } from './components/header/header.component';
+
 @Component({
   standalone: true,
-  imports: [RouterModule],
+  imports: [HeaderComponent, RouterModule],
   selector: 'mfee-project-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'

apps/angular-app/src/app/app.config.ts

@@ -1,8 +1,9 @@
+import { provideHttpClient } from '@angular/common/http';
 import { ApplicationConfig } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { appRoutes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(appRoutes)]
+  providers: [provideRouter(appRoutes), provideHttpClient()]
 };

apps/angular-app/src/app/app.routes.ts

@@ -1,3 +1,22 @@
 import { Route } from '@angular/router';
 
-export const appRoutes: Route[] = [];
+import { HomeComponent } from './views/home/home.component';
+import { PageNotFoundComponent } from './views/page-not-found/page-not-found.component';
+import { PostComponent } from './views/post/post.component';
+
+export const appRoutes: Route[] = [
+  {
+    path: '',
+    pathMatch: 'full',
+    component: HomeComponent
+  },
+  {
+    path: 'post/:id',
+    component: PostComponent
+  },
+  {
+    path: '**',
+    component: PageNotFoundComponent
+  }
+];
+

apps/angular-app/src/app/components/add-post/add-post.component.html

@@ -0,0 +1,3 @@
+<button class="mfee-add-post-button" (click)="addPost()" title="Add post">
+  <i class="material-icons">edit</i>
+</button>

apps/angular-app/src/app/components/add-post/add-post.component.scss

@@ -0,0 +1,16 @@
+.mfee-add-post-button {
+  position: fixed;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 99px;
+  background-color: orange;
+  border: none;
+  right: 1rem;
+  top: 3rem;
+  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

apps/angular-app/src/app/components/add-post/add-post.component.spec.ts

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

apps/angular-app/src/app/components/add-post/add-post.component.ts

@@ -0,0 +1,19 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Output } from '@angular/core';
+
+@Component({
+  selector: 'mfee-add-post',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './add-post.component.html',
+  styleUrl: './add-post.component.scss'
+})
+export class AddPostComponent {
+  @Output() clickAction: EventEmitter<void> = new EventEmitter<void>();
+
+  constructor() {}
+
+  public addPost(): void {
+    this.clickAction.emit();
+  }
+}

apps/angular-app/src/app/components/categories/categories.component.html

@@ -0,0 +1,8 @@
+<section class="mfee-category-container">
+  <ul class="mfee-category">
+    <li class="mfee-category__item" *ngFor="let category of categories" (click)="setCategory(category.id)"
+      [class.mfee-category__item--active]="selectedCategory === category.id">
+      {{ category.name }}
+    </li>
+  </ul>
+</section>

apps/angular-app/src/app/components/categories/categories.component.scss

@@ -0,0 +1,47 @@
+.mfee-category-container {
+  display: flex;
+  justify-content: center;
+}
+
+.mfee-category {
+  list-style: none;
+  display: flex;
+  padding: 0;
+
+  @media (max-width: 767px) {
+    flex-direction: column;
+    width: 95%;
+  }
+
+  &__item {
+    padding: 0.6rem 1.2rem;
+    border: 1px solid #ccc;
+    border-bottom: none;
+    cursor: pointer;
+
+    &:last-of-type {
+      border-bottom: 1px solid #ccc;
+    }
+
+    @media (min-width: 767px) {
+      border-right: none;
+      border-bottom: 1px solid #ccc;
+
+      &:first-of-type {
+        border-top-left-radius: 0.2rem;
+        border-bottom-left-radius: 0.2rem;
+      }
+
+      &:last-of-type {
+        border-right: 1px solid #ccc;
+        border-top-right-radius: 0.2rem;
+        border-bottom-right-radius: 0.2rem;
+      }
+    }
+
+    &--active,
+    &:hover {
+      background-color: #ccc;
+    }
+  }
+}

apps/angular-app/src/app/components/categories/categories.component.spec.ts

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

apps/angular-app/src/app/components/categories/categories.component.ts

@@ -0,0 +1,21 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+import { Category } from '../../models/Category';
+
+@Component({
+  selector: 'mfee-categories',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './categories.component.html',
+  styleUrl: './categories.component.scss'
+})
+export class CategoriesComponent {
+  @Input() selectedCategory: string;
+  @Input() categories: Array<Category>;
+  @Output() categoryChange: EventEmitter<string> = new EventEmitter<string>();
+
+  setCategory(categoryId: string) {
+    this.categoryChange.emit(categoryId)
+  }
+}

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

@@ -0,0 +1,8 @@
+<header class="mfee-header">
+  <div class="mfee-header__slogan">
+    <span class="mfee-header__slogan-icon">[</span>
+    <label>Making your Life Easier</label>
+    <span class="mfee-header__slogan-icon">]</span>
+  </div>
+  <h1 class="mfee-header__title">Discovering the World</h1>
+</header>

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

@@ -0,0 +1,22 @@
+.mfee-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1.5rem 0;
+  text-align: center;
+
+  &__slogan {
+    color: orange;
+    font-size: 0.8rem;
+  }
+
+  &__slogan-icon {
+    font-size: 2em;
+    padding: 0 0.5rem;
+  }
+
+  &__title {
+    margin: 0;
+    font-size: 2.5rem;
+  }
+}

apps/angular-app/src/app/components/header/header.component.spec.ts

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

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

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'mfee-header',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './header.component.html',
+  styleUrl: './header.component.scss',
+})
+export class HeaderComponent {}

apps/angular-app/src/app/components/post-grid/post-grid.component.html

@@ -0,0 +1,19 @@
+<section class="mfee-grid-container">
+  <div class="mfee-grid-post" *ngFor="let post of posts" [ngStyle]="{ 'background-image': 'url(' + post.image + ')' }" (click)="onClick($event, post.id)">
+    <h2 class="mfee-grid-post__title">{{ post.title }}</h2>
+    <span class="mfee-grid-post__comments">{{ post.comments.count }} Comments
+      <i class="material-icons">forum</i></span>
+    <p class="mfee-grid-post__description">{{ post.description }}</p>
+    <div class="mfee-grid-post__footer">
+      <label class="mfee-grid-post__tag">{{ post.category.name }}</label>
+      <ul class="mfee-grid-post__actions">
+        <li class="mfee-grid-post__actions-item" title="Edit" (click)="onEditPost(post.id)">
+          <i class="material-icons">edit</i>
+        </li>
+        <li class="mfee-grid-post__actions-item" title="Delete" (click)="onDeletePost(post.id)">
+          <i class="material-icons">delete</i>
+        </li>
+      </ul>
+    </div>
+  </div>
+</section>