Skip to content

Commit

Permalink
fixed followed seller
Browse files Browse the repository at this point in the history
  • Loading branch information
@u17260044
u17260044 committed Oct 26, 2023
1 parent e33bba4 commit 217686f
Show file tree
Hide file tree
Showing 8 changed files with 176 additions and 115 deletions.
108 changes: 61 additions & 47 deletions app/src/app/features/home/home.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
(click)="onCatClicked(page.path)">
<div
class="subCategoryCard hoverZoom"
style="background-image: url({{page.img}})">
style="background-image: url({{ page.img }})">
<div class="inner">
{{ page.title }}
</div>
Expand Down Expand Up @@ -150,6 +150,66 @@ <h2>Trending products</h2>
</div>
</div>
<br /><br />
<ng-container *ngIf="followedSellers$ | async as sellers">
<ng-container *ngIf="sellers !== null && sellers.length !== 0">
<div style="align-items: center">
<h2>Followed Sellers</h2>
</div>
<!-- <div style="width: 80%; height: 150px"> -->
<swiper-container
[slidesPerView]="3"
[speed]="500"
[pagination]="true"
[space-between]="30"
[css-mode]="true"
[centered-slides]="true"
*viewSize="'desktop'">
<swiper-slide
*ngFor="let seller of sellers"
style="align-items: center">
<ion-img
*ngIf="seller.logo && seller.logo.length > 0"
style="height: 100px"
(click)="redirect(seller.id)"
[src]="seller.logo"
[alt]="seller.name"></ion-img>
</swiper-slide>
</swiper-container>
<swiper-container
[slidesPerView]="2"
speed="500"
[lazy]="true"
*viewSize="'mobile'">
<swiper-slide *ngFor="let seller of sellers">
<!-- <div
style="
align-items: center;
height: 200px;
border: 1px solid grey;
border-radius: 5px;
"> -->
<ion-img
*ngIf="seller.logo && seller.logo.length > 0"
style="height: 100px"
(click)="redirect(seller.id)"
[src]="seller.logo"
[alt]="seller.name"></ion-img>
<!-- <ng-template #noLogo>
<ion-label
(click)="redirect(seller.id)"
style="font-weight: 500; font-size: large">
{{ seller.name }}
</ion-label>
</ng-template> -->
<!-- </div> -->
</swiper-slide>
</swiper-container>
<!-- </div> -->
<!-- </div> -->
<br /><br />
</ng-container>
</ng-container>
<br />
<div class="register-row">
<div class="register-container">
<div class="register-title">
Expand All @@ -168,52 +228,6 @@ <h2>
</div>
<br /><br />

<ng-container *ngIf="followedSellers$ | async as sellers">
<ng-container *ngIf="sellers !== null && sellers.length !== 0">
<div
style="
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
">
<div style="align-items: center">
<h3>Followed Sellers</h3>
</div>
<div style="width: 600px; height: 100px">
<swiper-container [slidesPerView]="3" speed="500" [lazy]="true">
<swiper-slide
*ngFor="let seller of sellers"
style="width: 200px; align-items: center">
<!-- <div
style="
align-items: center;
height: 200px;
border: 1px solid grey;
border-radius: 5px;
"> -->
<ion-img
*ngIf="seller.logo && seller.logo.length > 0"
style="height: 100px"
(click)="redirect(seller.id)"
[src]="seller.logo"
[alt]="seller.name"></ion-img>
<!-- <ng-template #noLogo>
<ion-label
(click)="redirect(seller.id)"
style="font-weight: 500; font-size: large">
{{ seller.name }}
</ion-label>
</ng-template> -->
<!-- </div> -->
</swiper-slide>
</swiper-container>
</div>
</div>
<br /><br />
</ng-container>
</ng-container>

<app-footer></app-footer>
</ion-content>

Expand Down
140 changes: 81 additions & 59 deletions app/src/app/features/home/home.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,48 +26,61 @@ ion-button {
}

swiper-container {
max-width: 400px;
// max-width: 400px;
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100px;
}
swiper-slide ion-img {
display: block;
// width: 100%;
// height: 100px;
height: 100%;
object-fit: contain;
}

swiper-slide {
// display: flex;
// flex-direction: row;
// align-items: center;
// justify-content: center;
}
.swiper-button-prev,
.swiper-button-next {
background-color: navy;
color: white;
padding: 0.5rem;
border-radius: 0.5rem;
text-align: center;
// font-size: 18px;
// background: #fff;
width: fit-content;
display: flex;
justify-content: center;
align-items: center;
}
// .swiper-button-prev,
// .swiper-button-next {
// background-color: navy;
// color: white;
// padding: 0.5rem;
// border-radius: 0.5rem;
// }

.swiper-button-prev {
left: 2rem;
right: auto;
}
// .swiper-button-prev {
// left: 2rem;
// right: auto;
// }

.swiper-button-next {
right: 2rem;
left: auto;
}
// .swiper-button-next {
// right: 2rem;
// left: auto;
// }

@media (min-width: 640px) {
.swiper-button-prev,
.swiper-button-next {
padding: 1rem;
}
// .swiper-button-prev,
// .swiper-button-next {
// padding: 1rem;
// }

.swiper-button-prev {
left: 10rem;
}
// .swiper-button-prev {
// left: 10rem;
// }

.swiper-button-next {
right: 10rem;
}
// .swiper-button-next {
// right: 10rem;
// }
}

a {
Expand Down Expand Up @@ -269,20 +282,25 @@ a {
}

@media (max-width: 768px) {
.side-pannel,
.cat-container,
.register-title,
.register-btn {
width: 100%;
}
.row1 {
height: auto;
}
.carousel-container,
.custom-carousel,
.row,
.register-container {
flex-wrap: wrap;
}

.side-pannel,.cat-container,.register-title, .register-btn{
width: 100%;
}
.row1{
height: auto;
}
.carousel-container,.custom-carousel, .row,.register-container{
flex-wrap: wrap;
}

h2{
font-size: 6vw !important;
}
h2 {
font-size: 6vw !important;
}
}

.cat-img {
Expand Down Expand Up @@ -358,28 +376,32 @@ a {
padding-right: 20px;
}
}
@media (max-width: 600px){
.cat-container.parents {
@media (max-width: 600px) {
.cat-container.parents {
max-width: 90%;
padding-left: 0px;
padding-right: 0px;
}}
}
}

@media (max-width: 768px){
.subCategory {
width: 33%!important;
}}
@media (max-width: 768px) {
.subCategory {
width: 33% !important;
}
}

@media (max-width: 600px){
.subCategory {
width: 50%!important;
}}
@media (max-width: 600px) {
.subCategory {
width: 50% !important;
}
}

.hoverZoom {
transition: transform 0.5s;
}

@media (max-width: 600px){
.cat-container.parents .subCategoryCard .inner {
font-size: 1.1rem!important;
}}
@media (max-width: 600px) {
.cat-container.parents .subCategoryCard .inner {
font-size: 1.1rem !important;
}
}
24 changes: 19 additions & 5 deletions app/src/app/features/home/home.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import {
OnInit,
ViewChild,
OnDestroy,
AfterViewInit,
ChangeDetectorRef,
} from '@angular/core';
import { Router, NavigationExtras } from '@angular/router';
import { ProductService } from '@shared/servicies/product/product.service';
Expand All @@ -14,7 +16,8 @@ import { ProfileFacade } from '@features/profile/services/profile.facade';
import { ProductCardFacade } from '@app/shared/components/product-card/services/product-card.facade';
import { AuthFacade } from '../auth/services/auth.facade';

import { register } from 'swiper/element/bundle';
import { register, SwiperContainer } from 'swiper/element/bundle';
import Swiper from 'swiper';
register();
@Component({
selector: 'app-home',
Expand Down Expand Up @@ -77,18 +80,27 @@ export class HomeComponent implements OnInit, OnDestroy {
path: '/category/Toys%20and%20Games',
img: 'assets/images/categories/toys.png',
},

];
// isAuthenticated$;
constructor(
private router: Router,
private productService: ProductService,
public profileFacade: ProfileFacade,
public productCardFacade: ProductCardFacade,
public authFacade: AuthFacade
public authFacade: AuthFacade,
private changeDetector: ChangeDetectorRef
) {
this.followedSellers$ = this.profileFacade.followedSellers$;

this.followedSellers$ = this.profileFacade.followedSellersDetails$;
this.followedSellers$.pipe(debounceTime(500)).subscribe(data => {
if (data.length > 0) {
setTimeout(() => {
const swiperEl: SwiperContainer | null =
document.querySelector('swiper-container');
swiperEl?.swiper.update();
}, 1000);
// this.swiperr.update();
}
});
this.forYouProducts$ = of(null);
// this.followSubs = this.profileFacade.followedSellers$.subscribe(val => {
// if ((val !== null || val !== undefined) && val.length > 0) {
Expand All @@ -110,9 +122,11 @@ export class HomeComponent implements OnInit, OnDestroy {
}
});
}

async ionViewWillEnter() {
this.profileFacade.fetchRecommendedProducts();
}

async fetchFollowedSellerDetails() {
await this.profileFacade.fetchFollowedSellerDetails();
}
Expand Down
2 changes: 2 additions & 0 deletions app/src/app/features/home/home.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import { FooterModule } from '@shared/components/footer/footer.module';
import { ProductCardModule } from '../../shared/components/product-card/product-card.module';
// import { ProfileModule } from '@features/profile/profile.module';
import { ComboStateModule } from '@features/combo-state/combo-state.module';
import { ViewSizeModule } from '@app/shared/directives/view-size/view-size.module';

// const routes: Routes = [
// { path: '', pathMatch: 'full', component: HomeComponent },
Expand Down Expand Up @@ -64,6 +65,7 @@ import { ComboStateModule } from '@features/combo-state/combo-state.module';
ProductCardModule,
// ProfileModule,
ComboStateModule,
ViewSizeModule,
// RouterModule.forChild(routes),
],
})
Expand Down
Loading

0 comments on commit 217686f

Please sign in to comment.