From ad3df7c6b5c49d46170021e83e22a575a7ca1471 Mon Sep 17 00:00:00 2001 From: Bangara Raju Kottedi Date: Sun, 28 Apr 2024 13:31:31 +0530 Subject: [PATCH] UI data binding changes --- angular.json | 16 +- src/app/base/base.component.ts | 3 + src/app/blog/blog.component.html | 157 +--------------- src/app/blog/blog.component.scss | 80 -------- src/app/blog/blog.component.ts | 6 +- src/app/blog/blog.model.ts | 5 + src/app/models/cv.model.ts | 1 + src/app/models/post.model.ts | 3 + src/app/projects/projects.component.html | 196 ++------------------ src/app/projects/projects.component.ts | 36 +++- src/app/projects/projects.model.ts | 6 + src/environments/environment.development.ts | 4 + src/environments/environment.ts | 4 + src/proxy.conf.json | 4 + src/styles.scss | 2 +- 15 files changed, 106 insertions(+), 417 deletions(-) create mode 100644 src/app/blog/blog.model.ts create mode 100644 src/app/projects/projects.model.ts create mode 100644 src/environments/environment.development.ts create mode 100644 src/environments/environment.ts diff --git a/angular.json b/angular.json index 12f0279..2fbe6b5 100644 --- a/angular.json +++ b/angular.json @@ -48,7 +48,13 @@ "maximumError": "4kb" } ], - "outputHashing": "all" + "outputHashing": "all", + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.production.ts" + } + ] }, "development": { "buildOptimizer": false, @@ -56,7 +62,13 @@ "vendorChunk": true, "extractLicenses": false, "sourceMap": true, - "namedChunks": true + "namedChunks": true, + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.development.ts" + } + ] } }, "defaultConfiguration": "production" diff --git a/src/app/base/base.component.ts b/src/app/base/base.component.ts index 63961d0..6aac0b6 100644 --- a/src/app/base/base.component.ts +++ b/src/app/base/base.component.ts @@ -1,9 +1,12 @@ +import { environment } from "src/environments/environment"; import { ICv } from "../models/cv.model"; import { CvService } from "../services/cv.service"; export abstract class BaseComponent { public model: T = {}; candidateId: number = 1; + imagesOrigin: string = environment.imagesUrl + '/images/'; + constructor(public svc: CvService) { } diff --git a/src/app/blog/blog.component.html b/src/app/blog/blog.component.html index 10b4b22..3f0e17f 100644 --- a/src/app/blog/blog.component.html +++ b/src/app/blog/blog.component.html @@ -8,174 +8,33 @@ diff --git a/src/app/blog/blog.component.scss b/src/app/blog/blog.component.scss index 4fbc311..e69de29 100644 --- a/src/app/blog/blog.component.scss +++ b/src/app/blog/blog.component.scss @@ -1,80 +0,0 @@ -.blog-posts { margin-bottom: 10px; } - - .blog-posts-list { - display: grid; - grid-template-columns: 1fr; - gap: 20px; - } - - .blog-post-item > a { - position: relative; - background: var(--border-gradient-onyx); - height: 100%; - box-shadow: var(--shadow-4); - border-radius: 16px; - z-index: 1; - } - - .blog-post-item > a::before { - content: ""; - position: absolute; - inset: 1px; - border-radius: inherit; - background: var(--eerie-black-1); - z-index: -1; - } - - .blog-banner-box { - width: 100%; - height: 200px; - border-radius: 12px; - overflow: hidden; - } - - .blog-banner-box img { - width: 100%; - height: 100%; - object-fit: cover; - transition: var(--transition-1); - } - - .blog-post-item > a:hover .blog-banner-box img { transform: scale(1.1); } - - .blog-content { padding: 15px; } - - .blog-meta { - display: flex; - justify-content: flex-start; - align-items: center; - gap: 7px; - margin-bottom: 10px; - } - - .blog-meta :is(.blog-category, time) { - color: var(--light-gray-70); - font-size: var(--fs-6); - font-weight: var(--fw-300); - } - - .blog-meta .dot { - background: var(--light-gray-70); - width: 4px; - height: 4px; - border-radius: 4px; - } - - .blog-item-title { - margin-bottom: 10px; - line-height: 1.3; - transition: var(--transition-1); - } - - .blog-post-item > a:hover .blog-item-title { color: var(--orange-yellow-crayola); } - - .blog-text { - color: var(--light-gray); - font-size: var(--fs-6); - font-weight: var(--fw-300); - line-height: 1.6; - } - \ No newline at end of file diff --git a/src/app/blog/blog.component.ts b/src/app/blog/blog.component.ts index 9d49107..15d8b4d 100644 --- a/src/app/blog/blog.component.ts +++ b/src/app/blog/blog.component.ts @@ -1,14 +1,16 @@ import { Component, OnInit } from '@angular/core'; import { CvService } from '../services/cv.service'; -import { ISideBar } from '../contact-sidebar/side-bar.model'; import { BaseComponent } from '../base/base.component'; +import { IBlog } from './blog.model'; +import { environment } from 'src/environments/environment'; @Component({ selector: 'app-blog', templateUrl: './blog.component.html', styleUrl: './blog.component.scss' }) -export class BlogComponent extends BaseComponent implements OnInit{ +export class BlogComponent extends BaseComponent implements OnInit{ + blogImageUrl: string = environment.blogImagesUrl; constructor(svc: CvService){ super(svc); } diff --git a/src/app/blog/blog.model.ts b/src/app/blog/blog.model.ts new file mode 100644 index 0000000..0e29ccc --- /dev/null +++ b/src/app/blog/blog.model.ts @@ -0,0 +1,5 @@ +import { IPost } from "../models/post.model"; + +export interface IBlog{ + posts: IPost[]; +} \ No newline at end of file diff --git a/src/app/models/cv.model.ts b/src/app/models/cv.model.ts index bc589fd..3406709 100644 --- a/src/app/models/cv.model.ts +++ b/src/app/models/cv.model.ts @@ -19,4 +19,5 @@ export interface ICv{ experiences: IExperience[]; hobbies: IHobby[]; projects: IProject[]; + projectsCategories: string[]; } \ No newline at end of file diff --git a/src/app/models/post.model.ts b/src/app/models/post.model.ts index ce504e2..54bf6ac 100644 --- a/src/app/models/post.model.ts +++ b/src/app/models/post.model.ts @@ -8,4 +8,7 @@ export interface IPost{ likes: number; views: number; comments: number; + image: string; + createdDate: string; + modifiedDate: string; } \ No newline at end of file diff --git a/src/app/projects/projects.component.html b/src/app/projects/projects.component.html index 52157b6..27ebae4 100644 --- a/src/app/projects/projects.component.html +++ b/src/app/projects/projects.component.html @@ -9,31 +9,23 @@
  • - +
    • -
  • - -
    • - -
  • - -
    • - -
  • - +
  • +
-
+
- @@ -41,186 +33,32 @@
  • - +
    • -
  • - -
    • - -
  • - -
    • - -
  • - +
  • +
-
    -
  • - +
  • +
    -
    + - finance +
    -

    Finance

    +

    {{project.name}}

    -

    Web development

    - -     -
    • - -
  • - - -
    -
    - -
    - - orizon -
    - -

    Orizon

    - -

    Web development

    - - -     -
    • - -
  • - - -
    -
    - -
    - - fundo -
    - -

    Fundo

    - -

    Web design

    - -     -
    • - -
  • - - -
    -
    - -
    - - brawlhalla -
    - -

    Brawlhalla

    - -

    Applications

    - -     -
    • - -
  • - - -
    -
    - -
    - - dsm. -
    - -

    DSM.

    - -

    Web design

    - -     -
    • - -
  • - - -
    -
    - -
    - - metaspark -
    - -

    MetaSpark

    - -

    Web design

    - -     -
    • - -
  • - - -
    -
    - -
    - - summary -
    - -

    Summary

    - -

    Web development

    - -     -
    • - -
  • - - -
    -
    - -
    - - task manager -
    - -

    Task Manager

    - -

    Applications

    - -     -
    • - -
  • - - -
    -
    - -
    - - arrival -
    - -

    Arrival

    - -

    Web development

    +

    {{project.category}}
    • diff --git a/src/app/projects/projects.component.ts b/src/app/projects/projects.component.ts index 9ac5541..824ad55 100644 --- a/src/app/projects/projects.component.ts +++ b/src/app/projects/projects.component.ts @@ -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 implements OnInit{ - constructor(svc: CvService){ +export class ProjectsComponent extends BaseComponent implements OnInit, OnDestroy{ +filter: string = 'All'; +projects: IProject[] = this.model.projects; +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(); + } } diff --git a/src/app/projects/projects.model.ts b/src/app/projects/projects.model.ts new file mode 100644 index 0000000..07956df --- /dev/null +++ b/src/app/projects/projects.model.ts @@ -0,0 +1,6 @@ +import { IProject } from "../models/project.model"; + +export interface IProjects{ + projects: IProject[]; + projectsCategories: string[]; +} \ No newline at end of file diff --git a/src/environments/environment.development.ts b/src/environments/environment.development.ts new file mode 100644 index 0000000..98e0e6f --- /dev/null +++ b/src/environments/environment.development.ts @@ -0,0 +1,4 @@ +export const environment = { + imagesUrl: 'https://localhost:7013', + blogImagesUrl: 'https://bangararaju.kottedi.in/blog/assets/img/posts/' +}; diff --git a/src/environments/environment.ts b/src/environments/environment.ts new file mode 100644 index 0000000..98e0e6f --- /dev/null +++ b/src/environments/environment.ts @@ -0,0 +1,4 @@ +export const environment = { + imagesUrl: 'https://localhost:7013', + blogImagesUrl: 'https://bangararaju.kottedi.in/blog/assets/img/posts/' +}; diff --git a/src/proxy.conf.json b/src/proxy.conf.json index 5601489..958e7e3 100644 --- a/src/proxy.conf.json +++ b/src/proxy.conf.json @@ -2,5 +2,9 @@ "/api": { "target": "https://localhost:7013", "secure": false + }, + "/images": { + "target": "https://localhost:7013", + "secure": false } } \ No newline at end of file diff --git a/src/styles.scss b/src/styles.scss index f85b334..e62def4 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1755,7 +1755,7 @@ * BLOG */ - .blog-banner-box { height: 230px; } + //.blog-banner-box { height: 230px; } }