mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-09-22 05:50:48 +02:00
dividindo os produtos e criando o search
This commit is contained in:
Betteloni
parent
19f6b2493c
commit
b90c7d8f11
31 changed files with 1425 additions and 264 deletions
|
|
@ -11,7 +11,7 @@ import {
|
|||
|
||||
export const routes: Routes = [
|
||||
{
|
||||
path: 'home',
|
||||
path: 'p',
|
||||
loadChildren: () => import('./public/public.module')
|
||||
.then(m => m.PublicModule),
|
||||
},
|
||||
|
|
@ -50,8 +50,8 @@ export const routes: Routes = [
|
|||
},
|
||||
],
|
||||
},
|
||||
{ path: '', redirectTo: 'home', pathMatch: 'full' },
|
||||
{ path: '**', redirectTo: 'home' },
|
||||
{ path: '', redirectTo: 'p', pathMatch: 'full' },
|
||||
{ path: '**', redirectTo: 'p' },
|
||||
];
|
||||
|
||||
const config: ExtraOptions = {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
<div class="category-container">
|
||||
<!-- <ngx-category *ngFor="let category of categories" [category]="category"></ngx-category> -->
|
||||
<a class="category" href="" *ngFor="let category of categories" (click)="onClick(category)">
|
||||
<div class="text-container">
|
||||
<i class="fa" [ngClass]="category.icon" style="margin-bottom: 10px; font-size: 24px;"></i>
|
||||
<span class="title">{{category.name}}</span>
|
||||
<i class="line"></i>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import 'bootstrap/scss/mixins/breakpoints';
|
||||
@import '@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
|
||||
.category-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
-webkit-flex-wrap: wrap;
|
||||
height: 130px;
|
||||
}
|
||||
|
||||
a.category {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
min-width: 120px;
|
||||
height: 7.5rem;
|
||||
font-size: 0.875rem;
|
||||
text-decoration: none;
|
||||
color: #8994a3;
|
||||
margin-bottom: 1rem;
|
||||
background: white;
|
||||
box-shadow: 0 8px 20px #dae0eb99;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
a.category {
|
||||
color: rgb(16, 126, 2);
|
||||
text-decoration: none;
|
||||
font-size: inherit;
|
||||
font-style: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
a.category .text-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
a.category nb-icon {
|
||||
font-size: 1.875rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
a.category nb-icon {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
a.category .title {
|
||||
padding-bottom: 0.75rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a.category .line {
|
||||
display: none;
|
||||
height: 0.1875rem;
|
||||
width: 60%;
|
||||
background: #3366ff;
|
||||
border-radius: 1.5px;
|
||||
}
|
||||
|
||||
a.category:hover .line {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import { Component, Input, OnDestroy, OnInit } from "@angular/core";
|
||||
import { Subject } from "rxjs";
|
||||
import { Router } from "@angular/router";
|
||||
import { Category } from "../../../../admin/category/category.model";
|
||||
|
||||
@Component({
|
||||
selector: "ngx-category-list",
|
||||
styleUrls: ["./category-list.component.scss"],
|
||||
templateUrl: "./category-list.component.html",
|
||||
})
|
||||
export class CategoryListComponent implements OnInit, OnDestroy {
|
||||
private destroy$: Subject<void> = new Subject<void>();
|
||||
@Input() categories: Category[];
|
||||
|
||||
constructor(private router: Router) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
console.log("init");
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.destroy$.next();
|
||||
this.destroy$.complete();
|
||||
}
|
||||
|
||||
onClick(category: Category) {
|
||||
this.router.navigate(["p", "search"]);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<a class="category" (click)="onClick()">
|
||||
<div class="text-container">
|
||||
<i
|
||||
class="fa"
|
||||
[ngClass]="category.icon"
|
||||
style="margin-bottom: 10px; font-size: 24px"
|
||||
></i>
|
||||
<span class="title">{{ category.name }}</span>
|
||||
<i class="line"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
@import "../../../../@theme/styles/themes";
|
||||
@import "bootstrap/scss/mixins/breakpoints";
|
||||
@import "@nebular/theme/styles/global/breakpoints";
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
-webkit-flex-wrap: wrap;
|
||||
height: 130px;
|
||||
}
|
||||
|
||||
a.category {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
min-width: 120px;
|
||||
height: 7.5rem;
|
||||
font-size: 0.875rem;
|
||||
text-decoration: none;
|
||||
color: #8994a3;
|
||||
margin-bottom: 1rem;
|
||||
background: white;
|
||||
box-shadow: 0 8px 20px #dae0eb99;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
a.category {
|
||||
color: rgb(16, 126, 2);
|
||||
text-decoration: none;
|
||||
font-size: inherit;
|
||||
font-style: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
a.category .text-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
a.category nb-icon {
|
||||
font-size: 1.875rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
a.category nb-icon {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
a.category .title {
|
||||
padding-bottom: 0.75rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
a.category .line {
|
||||
display: none;
|
||||
height: 0.1875rem;
|
||||
width: 60%;
|
||||
background: #3366ff;
|
||||
border-radius: 1.5px;
|
||||
}
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
a.category:hover .line {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import { Component, Input, OnDestroy, OnInit } from "@angular/core";
|
||||
import { Subject } from "rxjs";
|
||||
import { Router } from "@angular/router";
|
||||
import { Category } from "../../../../admin/category/category.model";
|
||||
|
||||
@Component({
|
||||
selector: "ngx-category",
|
||||
styleUrls: ["./category.component.scss"],
|
||||
templateUrl: "./category.component.html",
|
||||
})
|
||||
export class CategoryComponent implements OnInit, OnDestroy {
|
||||
private destroy$: Subject<void> = new Subject<void>();
|
||||
@Input() category: Category;
|
||||
|
||||
constructor(private router: Router) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
console.log("init");
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.destroy$.next();
|
||||
this.destroy$.complete();
|
||||
}
|
||||
|
||||
onClick() {
|
||||
this.router.navigate(["search"], { queryParams: {category: this.category.id} });
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<nb-card class="product" *ngIf="product">
|
||||
<nb-card class="product" *ngIf="product" (click)="onClick()">
|
||||
<nb-card-header class="card-img-top">
|
||||
<ul>
|
||||
<li>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
@import '../../../../@theme/styles/themes';
|
||||
@import 'bootstrap/scss/mixins/breakpoints';
|
||||
@import '@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
import {Component, Input, OnDestroy, OnInit} from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { Router } from '@angular/router';
|
||||
import { Product } from '../../../../admin/product/product';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-product-card',
|
||||
styleUrls: ['./product-card.component.scss'],
|
||||
templateUrl: './product-card.component.html',
|
||||
})
|
||||
export class ProductCardComponent implements OnInit, OnDestroy {
|
||||
private destroy$: Subject<void> = new Subject<void>();
|
||||
@Input() product: Product;
|
||||
|
||||
constructor(private router: Router) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
console.log('init');
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.destroy$.next();
|
||||
this.destroy$.complete();
|
||||
}
|
||||
|
||||
onClick() {
|
||||
this.router.navigate([
|
||||
"home",
|
||||
"p",
|
||||
this.product.id
|
||||
]);
|
||||
}
|
||||
}
|
||||
44
src/app/public/@shared/shared.module.ts
Normal file
44
src/app/public/@shared/shared.module.ts
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { ThemeModule } from '../../@theme/theme.module';
|
||||
import {
|
||||
NbActionsModule,
|
||||
NbButtonModule,
|
||||
NbCardModule,
|
||||
NbTabsetModule,
|
||||
NbUserModule,
|
||||
NbRadioModule,
|
||||
NbSelectModule,
|
||||
NbListModule,
|
||||
NbIconModule,
|
||||
} from '@nebular/theme';
|
||||
import { ProductCardComponent } from './components/product-card/product-card.component';
|
||||
import { CategoryComponent } from './components/category/category.component';
|
||||
import { CategoryListComponent } from './components/category-list/category-list.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
ThemeModule,
|
||||
NbCardModule,
|
||||
NbUserModule,
|
||||
NbButtonModule,
|
||||
NbTabsetModule,
|
||||
NbActionsModule,
|
||||
NbRadioModule,
|
||||
NbSelectModule,
|
||||
NbListModule,
|
||||
NbIconModule,
|
||||
NbButtonModule,
|
||||
],
|
||||
declarations: [
|
||||
ProductCardComponent,
|
||||
CategoryComponent,
|
||||
CategoryListComponent
|
||||
],
|
||||
exports: [
|
||||
ProductCardComponent,
|
||||
CategoryComponent,
|
||||
CategoryListComponent
|
||||
]
|
||||
})
|
||||
export class SharedModule {
|
||||
}
|
||||
|
|
@ -17,11 +17,11 @@
|
|||
|
||||
mdb-carousel {
|
||||
width: 100%; /* Largura total do carrossel */
|
||||
height: 400px; /* Altura do carrossel */
|
||||
height: 320px; /* Altura do carrossel */
|
||||
}
|
||||
|
||||
mdb-carousel-item {
|
||||
width: 100%; /* A imagem ocupa toda a largura do carrossel */
|
||||
height: 80%; /* A imagem ocupa toda a altura do carrossel */
|
||||
height: 320px; /* A imagem ocupa toda a altura do carrossel */
|
||||
object-fit: cover; /* A imagem será cortada para cobrir o espaço sem distorcer */
|
||||
}
|
||||
15
src/app/public/home/home-routing.module.ts
Normal file
15
src/app/public/home/home-routing.module.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { HomeComponent } from './home.component';
|
||||
|
||||
const routes: Routes = [{
|
||||
path: '',
|
||||
component: HomeComponent
|
||||
}]
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class HomeRoutingModule {
|
||||
}
|
||||
|
|
@ -4,14 +4,7 @@
|
|||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="category">
|
||||
<a href="" *ngFor="let category of categories">
|
||||
<div class="text-container">
|
||||
<i class="fa" [ngClass]="category.icon" style="margin-bottom: 10px; font-size: 24px;"></i>
|
||||
<span class="title">{{category.name}}</span>
|
||||
<i class="line"></i>
|
||||
</div>
|
||||
</a>
|
||||
<ngx-category-list [categories]="categories"></ngx-category-list>
|
||||
</div>
|
||||
|
||||
<div class="col-12 ad-row">
|
||||
|
|
@ -27,7 +20,7 @@
|
|||
</div>
|
||||
<div class="d-flex flex-row flex-nowrap overflow-auto">
|
||||
<div *ngFor="let product of products" class="card-col">
|
||||
<ngx-home-product [product]="product"></ngx-home-product>
|
||||
<ngx-product-card [product]="product"></ngx-product-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -38,7 +31,7 @@
|
|||
</div>
|
||||
<div class="d-flex flex-row flex-nowrap overflow-auto">
|
||||
<div *ngFor="let paidAds of paidAds" class="card-col">
|
||||
<ngx-home-product></ngx-home-product>
|
||||
<ngx-product-card></ngx-product-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -49,7 +42,7 @@
|
|||
</div>
|
||||
<div class="d-flex flex-row flex-nowrap overflow-auto">
|
||||
<div *ngFor="let product of products" class="card-col">
|
||||
<ngx-home-product></ngx-home-product>
|
||||
<ngx-product-card></ngx-product-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -23,88 +23,6 @@ mdb-carousel-item {
|
|||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.category
|
||||
[_nghost-pwx-c109]
|
||||
.settings-column[_ngcontent-pwx-c109]
|
||||
ngd-page-tabs[_ngcontent-pwx-c109] {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.category {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
-webkit-flex-wrap: wrap;
|
||||
height: 130px;
|
||||
}
|
||||
|
||||
.category a {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
min-width: 120px;
|
||||
height: 7.5rem;
|
||||
font-size: 0.875rem;
|
||||
text-decoration: none;
|
||||
color: #8994a3;
|
||||
margin-bottom: 1rem;
|
||||
background: white;
|
||||
box-shadow: 0 8px 20px #dae0eb99;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.category a {
|
||||
color: rgb(16, 126, 2);
|
||||
text-decoration: none;
|
||||
font-size: inherit;
|
||||
font-style: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.category a .text-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.category a nb-icon {
|
||||
font-size: 1.875rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.category nb-icon {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.category a .title {
|
||||
padding-bottom: 0.75rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.category a .line {
|
||||
display: none;
|
||||
height: 0.1875rem;
|
||||
width: 60%;
|
||||
background: #3366ff;
|
||||
border-radius: 1.5px;
|
||||
}
|
||||
|
||||
.category a:hover .line {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ad-row {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -17,12 +17,15 @@ import { HomeComponent } from './home.component';
|
|||
import { FormsModule } from '@angular/forms';
|
||||
import { MdbCarouselModule } from 'mdb-angular-ui-kit/carousel';
|
||||
import { BannerHomeComponent } from './banner/banner.component';
|
||||
import { ProductHomeComponent } from './product/product.component';
|
||||
import { SharedModule } from '../@shared/shared.module';
|
||||
import { HomeRoutingModule } from './home-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
HomeRoutingModule,
|
||||
FormsModule,
|
||||
ThemeModule,
|
||||
SharedModule,
|
||||
NbCardModule,
|
||||
NbUserModule,
|
||||
NbButtonModule,
|
||||
|
|
@ -38,8 +41,7 @@ import { ProductHomeComponent } from './product/product.component';
|
|||
],
|
||||
declarations: [
|
||||
HomeComponent,
|
||||
BannerHomeComponent,
|
||||
ProductHomeComponent
|
||||
BannerHomeComponent
|
||||
],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
<nb-card>
|
||||
<nb-card-header class="card-img-top">
|
||||
<ul>
|
||||
<li>
|
||||
<img [src]="imageUrl" />
|
||||
</li>
|
||||
</ul>
|
||||
<span class="badge">{{ highlight }}</span>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<h5 class="card-title">{{ title }}</h5>
|
||||
<p class="card-text">{{ price }}</p>
|
||||
</nb-card-body>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li *ngFor="let item of items" class="list-group-item">{{ item }}</li>
|
||||
</ul>
|
||||
</nb-card>
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
@import 'bootstrap/scss/mixins/breakpoints';
|
||||
@import '@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
.card-img-top {
|
||||
font-size: 1.125rem;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
text-anchor: middle;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
overflow: hidden;
|
||||
border-bottom: 0;
|
||||
height: 180px;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card-img-top ul {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: flex-start;
|
||||
margin: 0;
|
||||
overflow: scroll hidden;
|
||||
padding: 0;
|
||||
scroll-snap-type: x mandatory;
|
||||
scrollbar-width: none;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.card-img-top ul li {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
min-width: 100%;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
scroll-snap-align: start;
|
||||
scroll-snap-stop: always;
|
||||
}
|
||||
|
||||
.card-img-top ul li img, .card-img-top ul li svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
overflow-clip-margin: content-box;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.card-img-top span.badge {
|
||||
align-items: center;
|
||||
background: blue;
|
||||
color:white;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
height: 24px;
|
||||
left: 16px;
|
||||
top: 16px;
|
||||
max-width: calc(100% - 16px);
|
||||
position: absolute;
|
||||
z-index: 8;
|
||||
display: block;
|
||||
text-overflow: ellipsis;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { PaidAds } from '../../../admin/paidAds/paidAds';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-home-product',
|
||||
templateUrl: './paidAds.component.html',
|
||||
styleUrls: ['./paidAds.component.css']
|
||||
})
|
||||
export class paidAdsComponent implements OnInit, OnDestroy{
|
||||
private destroy$: Subject<void> = new Subject<void>();
|
||||
@Input() product: PaidAds;
|
||||
@Input() imageUrl: string = '';
|
||||
@Input() title: string = '';
|
||||
@Input() price: string = '';
|
||||
@Input() highlight: string = ''; // Ex: "Destaque"
|
||||
@Input() items: string[] = []; // Lista de itens
|
||||
|
||||
constructor() {}
|
||||
|
||||
ngOnInit(): void {
|
||||
console.log('init');
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.destroy$.next();
|
||||
this.destroy$.complete();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
import {Component, Input, OnDestroy, OnInit} from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { Product } from '../../../admin/product/product';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-home-product',
|
||||
styleUrls: ['./product.component.scss'],
|
||||
templateUrl: './product.component.html',
|
||||
})
|
||||
export class ProductHomeComponent implements OnInit, OnDestroy {
|
||||
private destroy$: Subject<void> = new Subject<void>();
|
||||
@Input() product: Product;
|
||||
|
||||
constructor() {}
|
||||
|
||||
ngOnInit(): void {
|
||||
console.log('init');
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.destroy$.next();
|
||||
this.destroy$.complete();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="category">
|
||||
<a href="" *ngFor="let category of categories">
|
||||
<div class="text-container">
|
||||
<i class="fa" [ngClass]="category.icon" style="margin-bottom: 10px; font-size: 24px;"></i>
|
||||
<span class="title">{{category.name}}</span>
|
||||
<i class="line"></i>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-12 ad-row">
|
||||
<div class="ad-container">
|
||||
<div class="ad"><p>Publicidade</p></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="d-flex flex-col">
|
||||
<h2>Anúncios patrocinados</h2>
|
||||
</div>
|
||||
<div class="d-flex flex-row flex-nowrap overflow-auto">
|
||||
<div *ngFor="let product of products" class="card-col">
|
||||
<ngx-product-card [product]="product"></ngx-product-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="d-flex flex-col">
|
||||
<h2>Anúncios testes</h2>
|
||||
</div>
|
||||
<div class="d-flex flex-row flex-nowrap overflow-auto">
|
||||
<div *ngFor="let paidAds of paidAds" class="card-col">
|
||||
<ngx-product-card></ngx-product-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="d-flex flex-col">
|
||||
<h2>Anúncios padrão</h2>
|
||||
</div>
|
||||
<div class="d-flex flex-row flex-nowrap overflow-auto">
|
||||
<div *ngFor="let product of products" class="card-col">
|
||||
<ngx-product-card></ngx-product-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
157
src/app/public/product-details/product-details.component.scss
Normal file
157
src/app/public/product-details/product-details.component.scss
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
@import '../../@theme/styles/themes';
|
||||
@import 'bootstrap/scss/mixins/breakpoints';
|
||||
@import '@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
.solar-card nb-card-header {
|
||||
border: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
ngx-traffic {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
mdb-carousel-item {
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
.row .col-12 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.category
|
||||
[_nghost-pwx-c109]
|
||||
.settings-column[_ngcontent-pwx-c109]
|
||||
ngd-page-tabs[_ngcontent-pwx-c109] {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.category {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
-webkit-flex-wrap: wrap;
|
||||
height: 130px;
|
||||
}
|
||||
|
||||
.category a {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
min-width: 120px;
|
||||
height: 7.5rem;
|
||||
font-size: 0.875rem;
|
||||
text-decoration: none;
|
||||
color: #8994a3;
|
||||
margin-bottom: 1rem;
|
||||
background: white;
|
||||
box-shadow: 0 8px 20px #dae0eb99;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.category a {
|
||||
color: rgb(16, 126, 2);
|
||||
text-decoration: none;
|
||||
font-size: inherit;
|
||||
font-style: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.category a .text-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.category a nb-icon {
|
||||
font-size: 1.875rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.category nb-icon {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.category a .title {
|
||||
padding-bottom: 0.75rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.category a .line {
|
||||
display: none;
|
||||
height: 0.1875rem;
|
||||
width: 60%;
|
||||
background: #3366ff;
|
||||
border-radius: 1.5px;
|
||||
}
|
||||
|
||||
.category a:hover .line {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ad-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ad-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 970px;
|
||||
height: 90px;
|
||||
margin: 24px 12px;
|
||||
border: 1px gray;
|
||||
}
|
||||
|
||||
.ad {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #e1e1e1;
|
||||
}
|
||||
|
||||
.ad p {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-col {
|
||||
flex: 1 0 calc(16.66% - 1rem);
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1500px) {
|
||||
.card-col {
|
||||
flex: 0 0 calc(16.66% - 1rem);
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1200px) {
|
||||
.card-col {
|
||||
flex: 0 0 calc(20% - 1rem);
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 840px) {
|
||||
.card-col {
|
||||
flex: 0 0 calc(16.66% - 1rem);
|
||||
}
|
||||
}
|
||||
134
src/app/public/product-details/product-details.component.ts
Normal file
134
src/app/public/product-details/product-details.component.ts
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { Banner } from '../../admin/banner/banner.model';
|
||||
import { Category } from '../../admin/category/category.model';
|
||||
import { Product } from '../../admin/product/product';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-product-details',
|
||||
styleUrls: ['./product-details.component.scss'],
|
||||
templateUrl: './product-details.component.html',
|
||||
})
|
||||
export class ProductDetailsComponent implements OnDestroy {
|
||||
private destroy$: Subject<void> = new Subject<void>();
|
||||
banners: Banner[];
|
||||
categories: Category[];
|
||||
products: Product[];
|
||||
paidAds: any[];
|
||||
|
||||
constructor() {}
|
||||
|
||||
ngOnInit(): void {
|
||||
console.log('init');
|
||||
|
||||
this.categories = [
|
||||
{
|
||||
"name": "Iluminação",
|
||||
"id": "Iluminacao",
|
||||
"updatedAt": new Date(),
|
||||
"createdAt": new Date(),
|
||||
"icon": "fa-lightbulb"
|
||||
},
|
||||
{
|
||||
"name": "Exaustores/Filtros",
|
||||
"id": "Exaustores",
|
||||
"updatedAt": new Date(),
|
||||
"createdAt": new Date(),
|
||||
"icon": "fa-fan"
|
||||
},
|
||||
{
|
||||
"name": "Estufas",
|
||||
"id": "Estufas",
|
||||
"updatedAt": new Date(),
|
||||
"createdAt": new Date(),
|
||||
"icon": "fa-home"
|
||||
},
|
||||
{
|
||||
"name": "Medidores",
|
||||
"id": "Medidores",
|
||||
"updatedAt": new Date(),
|
||||
"createdAt": new Date(),
|
||||
"icon": "fa-thermometer"
|
||||
},
|
||||
{
|
||||
"name": "Acessórios",
|
||||
"id": "Acessorios",
|
||||
"updatedAt": new Date(),
|
||||
"createdAt": new Date(),
|
||||
"icon": "fa-scissors"
|
||||
},
|
||||
{
|
||||
"name": "Outros",
|
||||
"id": "Outros",
|
||||
"updatedAt": new Date(),
|
||||
"createdAt": new Date(),
|
||||
"icon": "fa-spider"
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
this.products = [{
|
||||
id: "1",
|
||||
userId: "1",
|
||||
categoryId: "1",
|
||||
sub_categoryId: "1",
|
||||
brandId: "1",
|
||||
name: "Maquina de lavar roupa 14kg sper blaster",
|
||||
description: "",
|
||||
conditionId: "1",
|
||||
price: 3458.10,
|
||||
previousPrice: 4458.10,
|
||||
createdAt: new Date(),
|
||||
isActive: true,
|
||||
isPromoted: true,
|
||||
viewCount: 0,
|
||||
img_urls: [
|
||||
"https://img.olx.com.br/images/89/890461810585731.webp"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "1",
|
||||
userId: "1",
|
||||
categoryId: "1",
|
||||
sub_categoryId: "1",
|
||||
brandId: "1",
|
||||
name: "Maquina de lavar roupa 14kg sper blaster 2",
|
||||
description: "",
|
||||
conditionId: "1",
|
||||
price: 3458.10,
|
||||
previousPrice: 4458.10,
|
||||
createdAt: new Date(),
|
||||
isActive: true,
|
||||
isPromoted: false,
|
||||
viewCount: 0,
|
||||
img_urls: [
|
||||
"https://img.olx.com.br/images/89/890461810585731.webp"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "1",
|
||||
userId: "1",
|
||||
categoryId: "1",
|
||||
sub_categoryId: "1",
|
||||
brandId: "1",
|
||||
name: "Maquina de lavar roupa 14kg sper blaster 3",
|
||||
description: "",
|
||||
conditionId: "1",
|
||||
price: 3458.10,
|
||||
createdAt: new Date(),
|
||||
isActive: true,
|
||||
isPromoted: true,
|
||||
viewCount: 0,
|
||||
img_urls: [
|
||||
"https://img.olx.com.br/images/89/890461810585731.webp"
|
||||
]
|
||||
}]
|
||||
|
||||
this.paidAds = [1,1,1]
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.destroy$.next();
|
||||
this.destroy$.complete();
|
||||
}
|
||||
}
|
||||
42
src/app/public/product-details/product-details.module.ts
Normal file
42
src/app/public/product-details/product-details.module.ts
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
||||
import {
|
||||
NbActionsModule,
|
||||
NbButtonModule,
|
||||
NbCardModule,
|
||||
NbIconModule,
|
||||
NbListModule,
|
||||
NbRadioModule,
|
||||
NbSelectModule,
|
||||
NbTabsetModule,
|
||||
NbUserModule,
|
||||
} from '@nebular/theme';
|
||||
import { NgxEchartsModule } from 'ngx-echarts';
|
||||
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { MdbCarouselModule } from 'mdb-angular-ui-kit/carousel';
|
||||
import { ThemeModule } from '../../@theme/theme.module';
|
||||
import { ProductDetailsComponent } from './product-details.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
FormsModule,
|
||||
ThemeModule,
|
||||
NbCardModule,
|
||||
NbUserModule,
|
||||
NbButtonModule,
|
||||
NbTabsetModule,
|
||||
NbActionsModule,
|
||||
NbRadioModule,
|
||||
NbSelectModule,
|
||||
NbListModule,
|
||||
NbIconModule,
|
||||
NbButtonModule,
|
||||
NgxEchartsModule,
|
||||
MdbCarouselModule
|
||||
],
|
||||
declarations: [
|
||||
ProductDetailsComponent
|
||||
],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
||||
})
|
||||
export class ProductDetailsModule { }
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
|
||||
import { PublicComponent } from './public.component';
|
||||
import { HomeComponent } from './home/home.component';
|
||||
import { NotFoundComponent } from './miscellaneous/not-found/not-found.component';
|
||||
import { PublicComponent } from './public.component';
|
||||
|
||||
const routes: Routes = [{
|
||||
path: '',
|
||||
|
|
@ -11,6 +11,16 @@ const routes: Routes = [{
|
|||
children: [
|
||||
{
|
||||
path: '',
|
||||
loadChildren: () => import('./home/home.module')
|
||||
.then(m => m.HomeModule),
|
||||
},
|
||||
{
|
||||
path: 'search',
|
||||
loadChildren: () => import('./search/search.module')
|
||||
.then(m => m.SearchModule),
|
||||
},
|
||||
{
|
||||
path: 'p/:id',
|
||||
component: HomeComponent,
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,22 +1,25 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { NbMenuModule } from '@nebular/theme';
|
||||
import { NgModule } from "@angular/core";
|
||||
import { NbMenuModule } from "@nebular/theme";
|
||||
|
||||
import { ThemeModule } from '../@theme/theme.module';
|
||||
import { PublicComponent } from './public.component';
|
||||
import { PublicRoutingModule } from './public-routing.module';
|
||||
import { MiscellaneousModule } from './miscellaneous/miscellaneous.module';
|
||||
import { HomeModule } from './home/home.module';
|
||||
import { ThemeModule } from "../@theme/theme.module";
|
||||
import { HomeModule } from "./home/home.module";
|
||||
import { MiscellaneousModule } from "./miscellaneous/miscellaneous.module";
|
||||
import { ProductDetailsModule } from "./product-details/product-details.module";
|
||||
import { PublicRoutingModule } from "./public-routing.module";
|
||||
import { PublicComponent } from "./public.component";
|
||||
import { SearchModule } from "./search/search.module";
|
||||
import { SharedModule } from "./@shared/shared.module";
|
||||
@NgModule({
|
||||
imports: [
|
||||
PublicRoutingModule,
|
||||
ThemeModule,
|
||||
NbMenuModule,
|
||||
MiscellaneousModule,
|
||||
HomeModule
|
||||
],
|
||||
declarations: [
|
||||
PublicComponent,
|
||||
HomeModule,
|
||||
SearchModule,
|
||||
ProductDetailsModule,
|
||||
SharedModule
|
||||
],
|
||||
declarations: [PublicComponent],
|
||||
})
|
||||
export class PublicModule {
|
||||
}
|
||||
export class PublicModule {}
|
||||
|
|
|
|||
15
src/app/public/search/search-routing.module.ts
Normal file
15
src/app/public/search/search-routing.module.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { SearchComponent } from './search.component';
|
||||
|
||||
const routes: Routes = [{
|
||||
path: '',
|
||||
component: SearchComponent
|
||||
}];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class SearchRoutingModule {
|
||||
}
|
||||
27
src/app/public/search/search.component.html
Normal file
27
src/app/public/search/search.component.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<nb-layout windowMode>
|
||||
<nb-layout-header>
|
||||
<div class="row">
|
||||
<div class="col-12">Header</div>
|
||||
</div>
|
||||
</nb-layout-header>
|
||||
|
||||
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
|
||||
<nb-menu [items]="menu"></nb-menu>
|
||||
</nb-sidebar>
|
||||
|
||||
<nb-layout-column>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="d-flex flex-row flex-wrap">
|
||||
<div *ngFor="let product of products" class="card-col">
|
||||
<ngx-product-card [product]="product"></ngx-product-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nb-layout-column>
|
||||
|
||||
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" right responsive>
|
||||
ad
|
||||
</nb-sidebar>
|
||||
</nb-layout>
|
||||
167
src/app/public/search/search.component.scss
Normal file
167
src/app/public/search/search.component.scss
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
@import '../../@theme/styles/themes';
|
||||
@import 'bootstrap/scss/mixins/breakpoints';
|
||||
@import '@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
.solar-card nb-card-header {
|
||||
border: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
ngx-traffic {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
mdb-carousel-item {
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
.row .col-12 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.category
|
||||
[_nghost-pwx-c109]
|
||||
.settings-column[_ngcontent-pwx-c109]
|
||||
ngd-page-tabs[_ngcontent-pwx-c109] {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.category {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
-webkit-flex-wrap: wrap;
|
||||
height: 130px;
|
||||
}
|
||||
|
||||
.category a {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
min-width: 120px;
|
||||
height: 7.5rem;
|
||||
font-size: 0.875rem;
|
||||
text-decoration: none;
|
||||
color: #8994a3;
|
||||
margin-bottom: 1rem;
|
||||
background: white;
|
||||
box-shadow: 0 8px 20px #dae0eb99;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.category a {
|
||||
color: rgb(16, 126, 2);
|
||||
text-decoration: none;
|
||||
font-size: inherit;
|
||||
font-style: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.category a .text-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.category a nb-icon {
|
||||
font-size: 1.875rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.category nb-icon {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.category a .title {
|
||||
padding-bottom: 0.75rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.category a .line {
|
||||
display: none;
|
||||
height: 0.1875rem;
|
||||
width: 60%;
|
||||
background: #3366ff;
|
||||
border-radius: 1.5px;
|
||||
}
|
||||
|
||||
.category a:hover .line {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ad-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ad-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 970px;
|
||||
height: 90px;
|
||||
margin: 24px 12px;
|
||||
border: 1px gray;
|
||||
}
|
||||
|
||||
.ad {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #e1e1e1;
|
||||
}
|
||||
|
||||
.ad p {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-col {
|
||||
flex: 1 0 calc(25.00% - 1rem);
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1500px) {
|
||||
.card-col {
|
||||
flex: 0 0 calc(25% - 1rem);
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1200px) {
|
||||
.card-col {
|
||||
flex: 0 0 calc(20% - 1rem);
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 840px) {
|
||||
.card-col {
|
||||
flex: 0 0 calc(25% - 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
@include nb-install-component() {
|
||||
.menu-sidebar ::ng-deep .scrollable {
|
||||
padding-top: nb-theme(layout-padding-top);
|
||||
}
|
||||
}
|
||||
|
||||
nb-layout .layout .layout-container nb-sidebar .main-container-fixed {
|
||||
top: 12rem;
|
||||
}
|
||||
378
src/app/public/search/search.component.ts
Normal file
378
src/app/public/search/search.component.ts
Normal file
|
|
@ -0,0 +1,378 @@
|
|||
import {Component, OnDestroy} from '@angular/core';
|
||||
import { NbMenuItem, NbSidebarService, NbThemeService } from '@nebular/theme';
|
||||
import { takeWhile } from 'rxjs/operators' ;
|
||||
import { SolarData } from '../../@core/data/solar';
|
||||
import { Banner } from '../../admin/banner/banner.model';
|
||||
import { Subject } from 'rxjs';
|
||||
import { Category } from '../../admin/category/category.model';
|
||||
import { Product } from '../../admin/product/product';
|
||||
import { PaidAds } from '../../admin/paidAds/paidAds';
|
||||
|
||||
|
||||
interface CardSettings {
|
||||
title: string;
|
||||
iconClass: string;
|
||||
type: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-search',
|
||||
styleUrls: ['./search.component.scss'],
|
||||
templateUrl: './search.component.html',
|
||||
})
|
||||
export class SearchComponent implements OnDestroy {
|
||||
private destroy$: Subject<void> = new Subject<void>();
|
||||
banners: Banner[];
|
||||
categories: Category[];
|
||||
products: Product[];
|
||||
paidAds: any[];
|
||||
menu: NbMenuItem[] = [
|
||||
{
|
||||
title: 'E-commerce',
|
||||
icon: 'shopping-cart-outline',
|
||||
link: '/admin/dashboard',
|
||||
home: true,
|
||||
},
|
||||
]
|
||||
|
||||
constructor(private sidebarService: NbSidebarService) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
console.log('init');
|
||||
|
||||
this.categories = [
|
||||
{
|
||||
"name": "Iluminação",
|
||||
"id": "Iluminacao",
|
||||
"updatedAt": new Date(),
|
||||
"createdAt": new Date(),
|
||||
"icon": "fa-lightbulb"
|
||||
},
|
||||
{
|
||||
"name": "Exaustores/Filtros",
|
||||
"id": "Exaustores",
|
||||
"updatedAt": new Date(),
|
||||
"createdAt": new Date(),
|
||||
"icon": "fa-fan"
|
||||
},
|
||||
{
|
||||
"name": "Estufas",
|
||||
"id": "Estufas",
|
||||
"updatedAt": new Date(),
|
||||
"createdAt": new Date(),
|
||||
"icon": "fa-home"
|
||||
},
|
||||
{
|
||||
"name": "Medidores",
|
||||
"id": "Medidores",
|
||||
"updatedAt": new Date(),
|
||||
"createdAt": new Date(),
|
||||
"icon": "fa-thermometer"
|
||||
},
|
||||
{
|
||||
"name": "Acessórios",
|
||||
"id": "Acessorios",
|
||||
"updatedAt": new Date(),
|
||||
"createdAt": new Date(),
|
||||
"icon": "fa-scissors"
|
||||
},
|
||||
{
|
||||
"name": "Outros",
|
||||
"id": "Outros",
|
||||
"updatedAt": new Date(),
|
||||
"createdAt": new Date(),
|
||||
"icon": "fa-spider"
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
this.products = [{
|
||||
id: "1",
|
||||
userId: "1",
|
||||
categoryId: "1",
|
||||
sub_categoryId: "1",
|
||||
brandId: "1",
|
||||
name: "Maquina de lavar roupa 14kg sper blaster",
|
||||
description: "",
|
||||
conditionId: "1",
|
||||
price: 3458.10,
|
||||
previousPrice: 4458.10,
|
||||
createdAt: new Date(),
|
||||
isActive: true,
|
||||
isPromoted: true,
|
||||
viewCount: 0,
|
||||
img_urls: [
|
||||
"https://img.olx.com.br/images/89/890461810585731.webp"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "1",
|
||||
userId: "1",
|
||||
categoryId: "1",
|
||||
sub_categoryId: "1",
|
||||
brandId: "1",
|
||||
name: "Maquina de lavar roupa 14kg sper blaster 2",
|
||||
description: "",
|
||||
conditionId: "1",
|
||||
price: 3458.10,
|
||||
previousPrice: 4458.10,
|
||||
createdAt: new Date(),
|
||||
isActive: true,
|
||||
isPromoted: false,
|
||||
viewCount: 0,
|
||||
img_urls: [
|
||||
"https://img.olx.com.br/images/89/890461810585731.webp"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "1",
|
||||
userId: "1",
|
||||
categoryId: "1",
|
||||
sub_categoryId: "1",
|
||||
brandId: "1",
|
||||
name: "Maquina de lavar roupa 14kg sper blaster 3",
|
||||
description: "",
|
||||
conditionId: "1",
|
||||
price: 3458.10,
|
||||
createdAt: new Date(),
|
||||
isActive: true,
|
||||
isPromoted: true,
|
||||
viewCount: 0,
|
||||
img_urls: [
|
||||
"https://img.olx.com.br/images/89/890461810585731.webp"
|
||||
]
|
||||
},{
|
||||
id: "1",
|
||||
userId: "1",
|
||||
categoryId: "1",
|
||||
sub_categoryId: "1",
|
||||
brandId: "1",
|
||||
name: "Maquina de lavar roupa 14kg sper blaster",
|
||||
description: "",
|
||||
conditionId: "1",
|
||||
price: 3458.10,
|
||||
previousPrice: 4458.10,
|
||||
createdAt: new Date(),
|
||||
isActive: true,
|
||||
isPromoted: true,
|
||||
viewCount: 0,
|
||||
img_urls: [
|
||||
"https://img.olx.com.br/images/89/890461810585731.webp"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "1",
|
||||
userId: "1",
|
||||
categoryId: "1",
|
||||
sub_categoryId: "1",
|
||||
brandId: "1",
|
||||
name: "Maquina de lavar roupa 14kg sper blaster 2",
|
||||
description: "",
|
||||
conditionId: "1",
|
||||
price: 3458.10,
|
||||
previousPrice: 4458.10,
|
||||
createdAt: new Date(),
|
||||
isActive: true,
|
||||
isPromoted: false,
|
||||
viewCount: 0,
|
||||
img_urls: [
|
||||
"https://img.olx.com.br/images/89/890461810585731.webp"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "1",
|
||||
userId: "1",
|
||||
categoryId: "1",
|
||||
sub_categoryId: "1",
|
||||
brandId: "1",
|
||||
name: "Maquina de lavar roupa 14kg sper blaster 3",
|
||||
description: "",
|
||||
conditionId: "1",
|
||||
price: 3458.10,
|
||||
createdAt: new Date(),
|
||||
isActive: true,
|
||||
isPromoted: true,
|
||||
viewCount: 0,
|
||||
img_urls: [
|
||||
"https://img.olx.com.br/images/89/890461810585731.webp"
|
||||
]
|
||||
},{
|
||||
id: "1",
|
||||
userId: "1",
|
||||
categoryId: "1",
|
||||
sub_categoryId: "1",
|
||||
brandId: "1",
|
||||
name: "Maquina de lavar roupa 14kg sper blaster",
|
||||
description: "",
|
||||
conditionId: "1",
|
||||
price: 3458.10,
|
||||
previousPrice: 4458.10,
|
||||
createdAt: new Date(),
|
||||
isActive: true,
|
||||
isPromoted: true,
|
||||
viewCount: 0,
|
||||
img_urls: [
|
||||
"https://img.olx.com.br/images/89/890461810585731.webp"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "1",
|
||||
userId: "1",
|
||||
categoryId: "1",
|
||||
sub_categoryId: "1",
|
||||
brandId: "1",
|
||||
name: "Maquina de lavar roupa 14kg sper blaster 2",
|
||||
description: "",
|
||||
conditionId: "1",
|
||||
price: 3458.10,
|
||||
previousPrice: 4458.10,
|
||||
createdAt: new Date(),
|
||||
isActive: true,
|
||||
isPromoted: false,
|
||||
viewCount: 0,
|
||||
img_urls: [
|
||||
"https://img.olx.com.br/images/89/890461810585731.webp"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "1",
|
||||
userId: "1",
|
||||
categoryId: "1",
|
||||
sub_categoryId: "1",
|
||||
brandId: "1",
|
||||
name: "Maquina de lavar roupa 14kg sper blaster 3",
|
||||
description: "",
|
||||
conditionId: "1",
|
||||
price: 3458.10,
|
||||
createdAt: new Date(),
|
||||
isActive: true,
|
||||
isPromoted: true,
|
||||
viewCount: 0,
|
||||
img_urls: [
|
||||
"https://img.olx.com.br/images/89/890461810585731.webp"
|
||||
]
|
||||
},{
|
||||
id: "1",
|
||||
userId: "1",
|
||||
categoryId: "1",
|
||||
sub_categoryId: "1",
|
||||
brandId: "1",
|
||||
name: "Maquina de lavar roupa 14kg sper blaster",
|
||||
description: "",
|
||||
conditionId: "1",
|
||||
price: 3458.10,
|
||||
previousPrice: 4458.10,
|
||||
createdAt: new Date(),
|
||||
isActive: true,
|
||||
isPromoted: true,
|
||||
viewCount: 0,
|
||||
img_urls: [
|
||||
"https://img.olx.com.br/images/89/890461810585731.webp"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "1",
|
||||
userId: "1",
|
||||
categoryId: "1",
|
||||
sub_categoryId: "1",
|
||||
brandId: "1",
|
||||
name: "Maquina de lavar roupa 14kg sper blaster 2",
|
||||
description: "",
|
||||
conditionId: "1",
|
||||
price: 3458.10,
|
||||
previousPrice: 4458.10,
|
||||
createdAt: new Date(),
|
||||
isActive: true,
|
||||
isPromoted: false,
|
||||
viewCount: 0,
|
||||
img_urls: [
|
||||
"https://img.olx.com.br/images/89/890461810585731.webp"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "1",
|
||||
userId: "1",
|
||||
categoryId: "1",
|
||||
sub_categoryId: "1",
|
||||
brandId: "1",
|
||||
name: "Maquina de lavar roupa 14kg sper blaster 3",
|
||||
description: "",
|
||||
conditionId: "1",
|
||||
price: 3458.10,
|
||||
createdAt: new Date(),
|
||||
isActive: true,
|
||||
isPromoted: true,
|
||||
viewCount: 0,
|
||||
img_urls: [
|
||||
"https://img.olx.com.br/images/89/890461810585731.webp"
|
||||
]
|
||||
},{
|
||||
id: "1",
|
||||
userId: "1",
|
||||
categoryId: "1",
|
||||
sub_categoryId: "1",
|
||||
brandId: "1",
|
||||
name: "Maquina de lavar roupa 14kg sper blaster",
|
||||
description: "",
|
||||
conditionId: "1",
|
||||
price: 3458.10,
|
||||
previousPrice: 4458.10,
|
||||
createdAt: new Date(),
|
||||
isActive: true,
|
||||
isPromoted: true,
|
||||
viewCount: 0,
|
||||
img_urls: [
|
||||
"https://img.olx.com.br/images/89/890461810585731.webp"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "1",
|
||||
userId: "1",
|
||||
categoryId: "1",
|
||||
sub_categoryId: "1",
|
||||
brandId: "1",
|
||||
name: "Maquina de lavar roupa 14kg sper blaster 2",
|
||||
description: "",
|
||||
conditionId: "1",
|
||||
price: 3458.10,
|
||||
previousPrice: 4458.10,
|
||||
createdAt: new Date(),
|
||||
isActive: true,
|
||||
isPromoted: false,
|
||||
viewCount: 0,
|
||||
img_urls: [
|
||||
"https://img.olx.com.br/images/89/890461810585731.webp"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "1",
|
||||
userId: "1",
|
||||
categoryId: "1",
|
||||
sub_categoryId: "1",
|
||||
brandId: "1",
|
||||
name: "Maquina de lavar roupa 14kg sper blaster 3",
|
||||
description: "",
|
||||
conditionId: "1",
|
||||
price: 3458.10,
|
||||
createdAt: new Date(),
|
||||
isActive: true,
|
||||
isPromoted: true,
|
||||
viewCount: 0,
|
||||
img_urls: [
|
||||
"https://img.olx.com.br/images/89/890461810585731.webp"
|
||||
]
|
||||
}]
|
||||
|
||||
this.paidAds = [1,1,1]
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.destroy$.next();
|
||||
this.destroy$.complete();
|
||||
}
|
||||
|
||||
toggle() {
|
||||
this.sidebarService.toggle(true);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
53
src/app/public/search/search.module.ts
Normal file
53
src/app/public/search/search.module.ts
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
||||
import {
|
||||
NbActionsModule,
|
||||
NbButtonModule,
|
||||
NbCardModule,
|
||||
NbIconModule,
|
||||
NbLayoutModule,
|
||||
NbListModule,
|
||||
NbMenuModule,
|
||||
NbRadioModule,
|
||||
NbSelectModule,
|
||||
NbSidebarModule,
|
||||
NbTabsetModule,
|
||||
NbUserModule,
|
||||
} from '@nebular/theme';
|
||||
import { NgxEchartsModule } from 'ngx-echarts';
|
||||
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { MdbCarouselModule } from 'mdb-angular-ui-kit/carousel';
|
||||
import { ThemeModule } from '../../@theme/theme.module';
|
||||
import { SearchRoutingModule } from './search-routing.module';
|
||||
import { SearchComponent } from './search.component';
|
||||
import { SharedModule } from '../@shared/shared.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
SearchRoutingModule,
|
||||
SharedModule,
|
||||
FormsModule,
|
||||
ThemeModule,
|
||||
NbSidebarModule.forRoot(),
|
||||
NbMenuModule.forRoot(),
|
||||
NbLayoutModule,
|
||||
NbCardModule,
|
||||
NbUserModule,
|
||||
NbButtonModule,
|
||||
NbTabsetModule,
|
||||
NbActionsModule,
|
||||
NbRadioModule,
|
||||
NbSelectModule,
|
||||
NbListModule,
|
||||
NbIconModule,
|
||||
NbButtonModule,
|
||||
NgxEchartsModule,
|
||||
MdbCarouselModule,
|
||||
|
||||
],
|
||||
declarations: [
|
||||
SearchComponent
|
||||
],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
||||
})
|
||||
export class SearchModule { }
|
||||
Loading…
Add table
Add a link
Reference in a new issue