UI data binding changes
This commit is contained in:
@@ -9,31 +9,23 @@
|
||||
<ul class="filter-list">
|
||||
|
||||
<li class="filter-item">
|
||||
<button class="active" data-filter-btn>All</button>
|
||||
<button [ngClass]="{active: filter === 'All'}" (click)="filterProjects('All')">All</button>
|
||||
</li>
|
||||
|
||||
<li class="filter-item">
|
||||
<button data-filter-btn>Web design</button>
|
||||
</li>
|
||||
|
||||
<li class="filter-item">
|
||||
<button data-filter-btn>Applications</button>
|
||||
</li>
|
||||
|
||||
<li class="filter-item">
|
||||
<button data-filter-btn>Web development</button>
|
||||
<li class="filter-item" *ngFor="let category of model.projectsCategories">
|
||||
<button (click)="filterProjects(category)" [ngClass]="{active: filter === category}" (click)="filter = category">{{category}}</button>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div class="filter-select-box">
|
||||
<div class="filter-select-box" (click)="categoryClicked = !categoryClicked">
|
||||
|
||||
<button class="filter-select" data-select>
|
||||
<button class="filter-select" [ngClass]="{active: categoryClicked}" >
|
||||
|
||||
<div class="select-value" data-selecct-value>Select category</div>
|
||||
<div class="select-value">{{filter}}</div>
|
||||
|
||||
<div class="select-icon">
|
||||
<ion-icon name="chevron-down"></ion-icon>
|
||||
<i class="fa-regular fa-chevron-down"></i>
|
||||
</div>
|
||||
|
||||
</button>
|
||||
@@ -41,186 +33,32 @@
|
||||
<ul class="select-list">
|
||||
|
||||
<li class="select-item">
|
||||
<button data-select-item>All</button>
|
||||
<button (click)="filterProjects('All')">All</button>
|
||||
</li>
|
||||
|
||||
<li class="select-item">
|
||||
<button data-select-item>Web design</button>
|
||||
</li>
|
||||
|
||||
<li class="select-item">
|
||||
<button data-select-item>Applications</button>
|
||||
</li>
|
||||
|
||||
<li class="select-item">
|
||||
<button data-select-item>Web development</button>
|
||||
<li class="select-item" *ngFor="let category of model.projectsCategories">
|
||||
<button (click)="filterProjects(category)">{{category}}</button>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<ul class="project-list">
|
||||
|
||||
<li class="project-item active" data-filter-item data-category="web development">
|
||||
<a href="#">
|
||||
<li class="project-item active" *ngFor="let project of projects">
|
||||
<a>
|
||||
|
||||
<figure class="project-img">
|
||||
<div class="project-item-icon-box">
|
||||
<!-- <div class="project-item-icon-box">
|
||||
<ion-icon name="eye-outline"></ion-icon>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<img src="./assets/images/project-1.jpg" alt="finance" loading="lazy">
|
||||
<img src="{{imagesOrigin + project.imagePath}}" [alt]="project.category" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<h3 class="project-title">Finance</h3>
|
||||
<h3 class="project-title">{{project.name}}</h3>
|
||||
|
||||
<p class="project-category">Web development</p>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="project-item active" data-filter-item data-category="web development">
|
||||
<a href="#">
|
||||
|
||||
<figure class="project-img">
|
||||
<div class="project-item-icon-box">
|
||||
<ion-icon name="eye-outline"></ion-icon>
|
||||
</div>
|
||||
|
||||
<img src="./assets/images/project-2.png" alt="orizon" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<h3 class="project-title">Orizon</h3>
|
||||
|
||||
<p class="project-category">Web development</p>
|
||||
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="project-item active" data-filter-item data-category="web design">
|
||||
<a href="#">
|
||||
|
||||
<figure class="project-img">
|
||||
<div class="project-item-icon-box">
|
||||
<ion-icon name="eye-outline"></ion-icon>
|
||||
</div>
|
||||
|
||||
<img src="./assets/images/project-3.jpg" alt="fundo" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<h3 class="project-title">Fundo</h3>
|
||||
|
||||
<p class="project-category">Web design</p>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="project-item active" data-filter-item data-category="applications">
|
||||
<a href="#">
|
||||
|
||||
<figure class="project-img">
|
||||
<div class="project-item-icon-box">
|
||||
<ion-icon name="eye-outline"></ion-icon>
|
||||
</div>
|
||||
|
||||
<img src="./assets/images/project-4.png" alt="brawlhalla" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<h3 class="project-title">Brawlhalla</h3>
|
||||
|
||||
<p class="project-category">Applications</p>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="project-item active" data-filter-item data-category="web design">
|
||||
<a href="#">
|
||||
|
||||
<figure class="project-img">
|
||||
<div class="project-item-icon-box">
|
||||
<ion-icon name="eye-outline"></ion-icon>
|
||||
</div>
|
||||
|
||||
<img src="./assets/images/project-5.png" alt="dsm." loading="lazy">
|
||||
</figure>
|
||||
|
||||
<h3 class="project-title">DSM.</h3>
|
||||
|
||||
<p class="project-category">Web design</p>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="project-item active" data-filter-item data-category="web design">
|
||||
<a href="#">
|
||||
|
||||
<figure class="project-img">
|
||||
<div class="project-item-icon-box">
|
||||
<ion-icon name="eye-outline"></ion-icon>
|
||||
</div>
|
||||
|
||||
<img src="./assets/images/project-6.png" alt="metaspark" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<h3 class="project-title">MetaSpark</h3>
|
||||
|
||||
<p class="project-category">Web design</p>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="project-item active" data-filter-item data-category="web development">
|
||||
<a href="#">
|
||||
|
||||
<figure class="project-img">
|
||||
<div class="project-item-icon-box">
|
||||
<ion-icon name="eye-outline"></ion-icon>
|
||||
</div>
|
||||
|
||||
<img src="./assets/images/project-7.png" alt="summary" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<h3 class="project-title">Summary</h3>
|
||||
|
||||
<p class="project-category">Web development</p>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="project-item active" data-filter-item data-category="applications">
|
||||
<a href="#">
|
||||
|
||||
<figure class="project-img">
|
||||
<div class="project-item-icon-box">
|
||||
<ion-icon name="eye-outline"></ion-icon>
|
||||
</div>
|
||||
|
||||
<img src="./assets/images/project-8.jpg" alt="task manager" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<h3 class="project-title">Task Manager</h3>
|
||||
|
||||
<p class="project-category">Applications</p>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="project-item active" data-filter-item data-category="web development">
|
||||
<a href="#">
|
||||
|
||||
<figure class="project-img">
|
||||
<div class="project-item-icon-box">
|
||||
<ion-icon name="eye-outline"></ion-icon>
|
||||
</div>
|
||||
|
||||
<img src="./assets/images/project-9.png" alt="arrival" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<h3 class="project-title">Arrival</h3>
|
||||
|
||||
<p class="project-category">Web development</p>
|
||||
<p class="project-category">{{project.category}}</p>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@@ -1,19 +1,47 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||
import { BaseComponent } from '../base/base.component';
|
||||
import { ISideBar } from '../contact-sidebar/side-bar.model';
|
||||
import { CvService } from '../services/cv.service';
|
||||
import { IProjects } from './projects.model';
|
||||
import { IProject } from '../models/project.model';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { ICv } from '../models/cv.model';
|
||||
import { Subscription } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'app-projects',
|
||||
templateUrl: './projects.component.html',
|
||||
styleUrl: './projects.component.scss'
|
||||
})
|
||||
export class ProjectsComponent extends BaseComponent<ISideBar> implements OnInit{
|
||||
constructor(svc: CvService){
|
||||
export class ProjectsComponent extends BaseComponent<IProjects> implements OnInit, OnDestroy{
|
||||
filter: string = 'All';
|
||||
projects: IProject[] = this.model.projects;
|
||||
subscription: Subscription = <Subscription>{};
|
||||
categoryClicked: boolean = false;
|
||||
constructor(svc: CvService, public http: HttpClient){
|
||||
super(svc);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.subscription = this.svc.baseSubject.subscribe((resume: ICv | unknown) =>{
|
||||
this.projects = this.model.projects;
|
||||
});
|
||||
this.init();
|
||||
}
|
||||
|
||||
filterProjects(category: string) {
|
||||
this.filter = category;
|
||||
this.projects = this.filter === 'All'
|
||||
? this.model.projects
|
||||
: this.model.projects.filter(
|
||||
(project: IProject) => project.category === this.filter
|
||||
);
|
||||
}
|
||||
|
||||
isCategoryActive(category: string){
|
||||
return this.filter === category;
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.subscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
import { IProject } from "../models/project.model";
|
||||
|
||||
export interface IProjects{
|
||||
projects: IProject[];
|
||||
projectsCategories: string[];
|
||||
}
|
||||
Reference in New Issue
Block a user