Refactor code structure for improved readability and maintainability

src/app/admin/projects/projects.html

@@ -0,0 +1,78 @@
+<article class="projects" data-page="projects">
+
+    <header>
+        <h2 class="h2 article-title">Projects</h2>
+    </header>
+
+    <section class="projects">
+
+        <ul class="filter-list">
+
+            <li class="filter-item">
+                <button [ngClass]="{active: filter === 'All'}" (click)="filterProjects('All')">All</button>
+            </li>
+
+            @for (category of model.projectsCategories; track category) {
+            <li class="filter-item">
+                <button (click)="filterProjects(category)" [ngClass]="{active: filter === category}">{{category}}</button>
+            </li>
+            }
+
+        </ul>
+
+        <div class="filter-select-box" (click)="categoryClicked = !categoryClicked">
+
+            <button class="filter-select" [ngClass]="{active: categoryClicked}">
+
+                <div class="select-value">{{filter}}</div>
+
+                <div class="select-icon">
+                    <i class="fa-regular fa-chevron-down"></i>
+                </div>
+
+            </button>
+
+            <ul class="select-list">
+
+                <li class="select-item">
+                    <button (click)="filterProjects('All')">All</button>
+                </li>
+
+                @for (category of model.projectsCategories; track category) {
+                <li class="select-item">
+                    <button (click)="filterProjects(category)">{{category}}</button>
+                </li>
+                }
+
+            </ul>
+        </div>
+
+        <ul class="project-list">
+
+            @for (project of projects; track project) {
+            <li class="project-item  active">
+                <a>
+
+                    <figure class="project-img">
+                        <!-- <div class="project-item-icon-box">
+                <ion-icon name="eye-outline"></ion-icon>
+              </div> -->
+
+                        <img src="{{imagesOrigin + project.imagePath}}" loading="lazy">
+                    </figure>
+
+                    <h3 class="project-title">{{project.name}}</h3>
+                    <div class="project-category">
+                        @for (responsibility of project.responsibilities; track responsibility; let i = $index) {
+                        <span class="inline">{{i > 0 ? ', ' + responsibility : responsibility}}</span>
+                        }
+                    </div>
+                </a>
+            </li>
+            }
+
+        </ul>
+
+    </section>
+
+</article>

src/app/admin/projects/projects.model.ts

@@ -0,0 +1,6 @@
+import { IProject } from "../models/project.model";
+
+export interface IProjects{
+    projects: IProject[];
+    projectsCategories: string[];
+}

src/app/admin/projects/projects.scss

@@ -0,0 +1,7 @@
+.inline{
+    display: inline;
+}
+
+.no-margin{
+    margin-left: 0px;
+}

src/app/admin/projects/projects.spec.ts

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

src/app/admin/projects/projects.ts

@@ -0,0 +1,46 @@
+import { Component, inject, OnInit } from '@angular/core';
+import { IProject } from '../models/project.model';
+import { BaseComponent } from '../base.component';
+import { AdminService } from '../services/admin.service';
+import { IProjects } from './projects.model';
+import { Subscription } from 'rxjs';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-projects',
+  templateUrl: './projects.html',
+  styleUrl: './projects.scss',
+  imports: [CommonModule]
+})
+export class Projects extends BaseComponent<IProjects> implements OnInit {
+  filter = 'All';
+  projects!: IProject[];
+  subscription: Subscription = {} as Subscription;
+  categoryClicked = false;
+  constructor() {
+    const svc = inject(AdminService);
+    super(svc);
+  }
+
+  ngOnInit(): void {
+    this.getProjects();
+  }
+
+  getProjects() {
+    this.svc.getProjects(this.candidateId).subscribe((response: IProjects) => {
+      this.svc.projects = this.svc.projects ?? response;
+      this.projects = response.projects;
+      this.assignData(response);
+    });
+  }
+
+  filterProjects(category: string) {
+    this.filter = category;
+    this.projects = this.filter === 'All'
+      ? this.model.projects
+      : this.model.projects.filter(
+        (project: IProject) => {
+          return project.categories.includes(category)
+        });
+  }
+}