parent
88a88e7541
commit
661a5b700a
@ -27,7 +27,7 @@ export const PageListWithBonus: Page[] = [
|
||||
name: 'Ваша карта лояльности',
|
||||
description: '',
|
||||
resName: 'bonus-program',
|
||||
onSideBar: true,
|
||||
onSideBar: false,
|
||||
},
|
||||
{
|
||||
code: PageCode.Orders,
|
||||
|
||||
@ -56,6 +56,10 @@ import { ChangeQuantityComponent } from './components/change-quantity/change-qua
|
||||
import { MenuComponent } from './components/menu/menu.component';
|
||||
import { SidebarModule } from 'primeng/sidebar';
|
||||
import {RippleModule} from 'primeng/ripple';
|
||||
import {MatTabsModule} from '@angular/material/tabs';
|
||||
import { ModifierComponent } from './components/modifier/modifier.component';
|
||||
import { OptionComponent } from './components/option/option.component';
|
||||
import { ChangeQuantityOptionDirective } from './directives/change-quantity-option.directive';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', redirectTo: 'products', pathMatch: 'full' },
|
||||
@ -88,7 +92,10 @@ const routes: Routes = [
|
||||
UserDataOrderComponent,
|
||||
InfoComponent,
|
||||
ChangeQuantityComponent,
|
||||
MenuComponent
|
||||
MenuComponent,
|
||||
ModifierComponent,
|
||||
OptionComponent,
|
||||
ChangeQuantityOptionDirective
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
@ -127,7 +134,8 @@ const routes: Routes = [
|
||||
PaginatorModule,
|
||||
InputTextModule,
|
||||
SidebarModule,
|
||||
RippleModule
|
||||
RippleModule,
|
||||
MatTabsModule
|
||||
],
|
||||
providers: [DialogService, MessageService, MessagingService ],
|
||||
bootstrap: [AppComponent]
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
:host {
|
||||
.change-quantity {
|
||||
border: 1px solid #dfdee2;
|
||||
border-radius: 4px;
|
||||
border-radius: 1.125rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 28px;
|
||||
margin: 4px 16px 4px 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
min-width: 100px;
|
||||
padding: 0 8px;
|
||||
|
||||
button {
|
||||
background: #ffffff;
|
||||
|
||||
@ -2,7 +2,7 @@ button {
|
||||
margin-right: 1rem;
|
||||
padding: 4px 21px;
|
||||
margin-top: 8px;
|
||||
background-color: #09467f;
|
||||
background-color: var(--orange-main);
|
||||
color: #fff;
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
align-items: center;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: #09467f;
|
||||
background: var(--orange-main);
|
||||
border: solid #fff 1px !important;
|
||||
color: #fff;
|
||||
border-radius: 100%;
|
||||
|
||||
12
angular/src/app/components/modifier/modifier.component.html
Normal file
12
angular/src/app/components/modifier/modifier.component.html
Normal file
@ -0,0 +1,12 @@
|
||||
<div class="modifier-container">
|
||||
<ng-content select="[counter]"></ng-content>
|
||||
<h3>{{ modifier.name }}</h3>
|
||||
<div class="modifier-container__options">
|
||||
<app-option
|
||||
*ngFor="let option of modifier.options"
|
||||
[option]="option"
|
||||
[modifier]="modifier"
|
||||
[product]="product"
|
||||
></app-option>
|
||||
</div>
|
||||
</div>
|
||||
15
angular/src/app/components/modifier/modifier.component.scss
Normal file
15
angular/src/app/components/modifier/modifier.component.scss
Normal file
@ -0,0 +1,15 @@
|
||||
:host {
|
||||
.modifier-container {
|
||||
margin-bottom: 32px;
|
||||
&__options {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ModifierComponent } from './modifier.component';
|
||||
|
||||
describe('ModifierComponent', () => {
|
||||
let component: ModifierComponent;
|
||||
let fixture: ComponentFixture<ModifierComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ ModifierComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(ModifierComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
19
angular/src/app/components/modifier/modifier.component.ts
Normal file
19
angular/src/app/components/modifier/modifier.component.ts
Normal file
@ -0,0 +1,19 @@
|
||||
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
|
||||
import { CartModifier, Modifier } from 'src/app/interface/data';
|
||||
import { CartProduct } from 'src/app/models/cart-product';
|
||||
|
||||
@Component({
|
||||
selector: 'app-modifier[modifier][product]',
|
||||
templateUrl: './modifier.component.html',
|
||||
styleUrls: ['./modifier.component.scss']
|
||||
})
|
||||
export class ModifierComponent implements OnInit {
|
||||
@Input() product!: CartProduct
|
||||
@Input() modifier!: CartModifier
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
}
|
||||
@ -3,7 +3,7 @@
|
||||
padding: 0 54px;
|
||||
width: 100%;
|
||||
height: 54px;
|
||||
// background: #09467f;
|
||||
// background: var(--orange-main);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
17
angular/src/app/components/option/option.component.html
Normal file
17
angular/src/app/components/option/option.component.html
Normal file
@ -0,0 +1,17 @@
|
||||
<div
|
||||
appChangeQuantityOption
|
||||
[option]="option"
|
||||
[modifier]="modifier"
|
||||
[product]="product"
|
||||
[ngClass]="{
|
||||
'option-container': true,
|
||||
'selected': option.quantity
|
||||
}"
|
||||
[attr.quantity]="option.quantity"
|
||||
>
|
||||
<img
|
||||
src="{{ option.image?.length ? option.image : './assets/no-image.png' }}"
|
||||
alt="{{ option.name }}"
|
||||
/>
|
||||
<h4>{{ option.name }}</h4>
|
||||
</div>
|
||||
67
angular/src/app/components/option/option.component.scss
Normal file
67
angular/src/app/components/option/option.component.scss
Normal file
@ -0,0 +1,67 @@
|
||||
:host {
|
||||
width: 100%;
|
||||
max-width: 170px;
|
||||
.option-container {
|
||||
align-items: center;
|
||||
border: 1px solid #d8d8d8;
|
||||
border-radius: 1.125rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 0;
|
||||
padding-bottom: 12px;
|
||||
position: relative;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
&.selected {
|
||||
border-color: var(--orange-main);
|
||||
}
|
||||
|
||||
&[quantity] {
|
||||
&::before {
|
||||
content: attr(quantity);
|
||||
display: block;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
background-color: var(--orange-main);
|
||||
position: absolute;
|
||||
border-radius: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
right: 10px;
|
||||
top: 6px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
&[quantity="0"] {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 14px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
:host {
|
||||
max-width: calc(50% - 6px);
|
||||
}
|
||||
}
|
||||
23
angular/src/app/components/option/option.component.spec.ts
Normal file
23
angular/src/app/components/option/option.component.spec.ts
Normal file
@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { OptionComponent } from './option.component';
|
||||
|
||||
describe('OptionComponent', () => {
|
||||
let component: OptionComponent;
|
||||
let fixture: ComponentFixture<OptionComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ OptionComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(OptionComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
20
angular/src/app/components/option/option.component.ts
Normal file
20
angular/src/app/components/option/option.component.ts
Normal file
@ -0,0 +1,20 @@
|
||||
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
|
||||
import { CartModifier, Modifier } from 'src/app/interface/data';
|
||||
import { CartProduct } from 'src/app/models/cart-product';
|
||||
|
||||
@Component({
|
||||
selector: 'app-option[option][modifier][product]',
|
||||
templateUrl: './option.component.html',
|
||||
styleUrls: ['./option.component.scss']
|
||||
})
|
||||
export class OptionComponent implements OnInit {
|
||||
@Input() option!: Modifier
|
||||
@Input() modifier!: CartModifier;
|
||||
@Input() product!: CartProduct;
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,10 +1,20 @@
|
||||
<div class="product-modal">
|
||||
<img *ngIf="!product.image" src="./assets/no-image.png" alt="{{product.name}}">
|
||||
<img *ngIf="product.image" src="{{product.image}}" alt="{{product.name}}">
|
||||
<div class="product-modal__information-container">
|
||||
<img
|
||||
src="{{
|
||||
product.image?.length ? product.image : './assets/no-image.png'
|
||||
}}"
|
||||
alt="{{ product.name }}"
|
||||
/>
|
||||
<p class="product-modal__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi quas libero consequatur dolorum itaque dolor deserunt aut facilis debitis!</p>
|
||||
</div>
|
||||
|
||||
<div class="product-modal__modifiers-container">
|
||||
<ng-container *ngIf="product.modifiers_group.length">
|
||||
<div *ngFor="let modifierGroup of cartProduct.modifiers" [attr.isShow]="false"
|
||||
<div
|
||||
*ngIf="product.modifiers_group.length"
|
||||
class="product-modal__modifiers-container"
|
||||
>
|
||||
<!-- <ng-container *ngIf="product.modifiers_group.length">
|
||||
<div *ngFor="let modifierGroup of cartProduct.modifiers" [attr.isShow]="false"
|
||||
[ngClass]="{'product-modal__modifier': true, 'no-valid': isValidate && modifierGroup.allQuantity < modifierGroup.restrictions.minQuantity}" #modifierContainer>
|
||||
<a (click)="setOptionsView($event, modifierContainer)">
|
||||
{{modifierGroup.name}}
|
||||
@ -22,13 +32,24 @@
|
||||
</app-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container> -->
|
||||
<app-modifier
|
||||
*ngFor="let modifier of cartProduct.modifiers; let index = index"
|
||||
[modifier]="modifier"
|
||||
[product]="cartProduct"
|
||||
>
|
||||
<span counter>{{ index + 1 }} из {{ cartProduct.modifiers.length }}</span>
|
||||
</app-modifier>
|
||||
</div>
|
||||
|
||||
<div class="product-modal__footer">
|
||||
<span class="product-modal__footer-price">{{product.price}}₽</span>
|
||||
<button class="product-modal__add-to-cart" (click)="addToCart($event)">
|
||||
Добавить
|
||||
</button>
|
||||
<div class="product-modal__footer">
|
||||
<!-- <app-change-quantity (onChangeValue)="changeProductAmount()"></app-change-quantity> -->
|
||||
<span class="product-modal__footer-price">{{ cartProduct.finalPrice }}₽</span>
|
||||
<div class="product-modal__footer-buttons">
|
||||
<app-change-quantity [disabledButton]="cartProduct.amount === 1 ? 'minus' : 'none'" [value]="cartProduct.amount" (onChangeValue)="changeProductAmount($event)"></app-change-quantity>
|
||||
<button class="product-modal__add-to-cart" (click)="addToCart($event)">
|
||||
Добавить
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,100 +1,140 @@
|
||||
:host {
|
||||
.product-modal {
|
||||
position: relative;
|
||||
padding-bottom: 60px;
|
||||
.product-modal {
|
||||
position: relative;
|
||||
padding-bottom: 39px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 32px;
|
||||
|
||||
&>img {
|
||||
width: 100%;
|
||||
border-radius: 1.125rem;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
padding-top: 8px;
|
||||
border-top: solid #d1d1d1 1px;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__footer-price {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__add-to-cart {
|
||||
padding: 8px 26px;
|
||||
background: #C43F00;
|
||||
border: none;
|
||||
border-radius: 1.125rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&__modifier {
|
||||
border: 1px solid rgba(128, 128, 128, 0.23);
|
||||
margin: 0.5em 0;
|
||||
padding-bottom: 6px;
|
||||
border-radius: 1.125rem;
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
display: block;
|
||||
padding: 0.75em;
|
||||
border-radius: 0.15em;
|
||||
transition: background .3s ease;
|
||||
}
|
||||
|
||||
.options-container {
|
||||
transition: opacity .5s ease;
|
||||
padding-left: 16px;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
|
||||
&.isShow {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.no-valid {
|
||||
border-color: #cc0000;
|
||||
}
|
||||
}
|
||||
|
||||
&__modifier-icon {
|
||||
float: right;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
transition: transform .5s ease;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "\\";
|
||||
transform: rotate(346deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "/";
|
||||
transform: rotate(14deg);
|
||||
}
|
||||
|
||||
&.isShow {
|
||||
&::before {
|
||||
transform: rotate(76deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: rotate(104deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
&__information-container {
|
||||
max-width: calc(50% - 16px);
|
||||
img {
|
||||
width: 100%;
|
||||
border-radius: 1.125rem;
|
||||
height: fit-content;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-top: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
// & > img {
|
||||
// width: 50%;
|
||||
// border-radius: 1.125rem;
|
||||
// height: fit-content;
|
||||
// object-fit: cover;
|
||||
// }
|
||||
|
||||
&__footer {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
bottom: -14px;
|
||||
padding-top: 16px;
|
||||
border-top: solid #d1d1d1 1px;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__footer-price {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__footer-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
&__add-to-cart {
|
||||
padding: 8px 26px;
|
||||
background: var(--orange-main);
|
||||
border: none;
|
||||
border-radius: 1.125rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&__modifier {
|
||||
border: 1px solid rgba(128, 128, 128, 0.23);
|
||||
margin: 0.5em 0;
|
||||
padding-bottom: 6px;
|
||||
border-radius: 1.125rem;
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
display: block;
|
||||
padding: 0.75em;
|
||||
border-radius: 0.15em;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.options-container {
|
||||
transition: opacity 0.5s ease;
|
||||
padding-left: 16px;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
|
||||
&.isShow {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.no-valid {
|
||||
border-color: #cc0000;
|
||||
}
|
||||
}
|
||||
|
||||
&__modifiers-container {
|
||||
height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
&__modifier-icon {
|
||||
float: right;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "\\";
|
||||
transform: rotate(346deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "/";
|
||||
transform: rotate(14deg);
|
||||
}
|
||||
|
||||
&.isShow {
|
||||
&::before {
|
||||
transform: rotate(76deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: rotate(104deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1070px) {
|
||||
.product-modal {
|
||||
flex-direction: column;
|
||||
|
||||
&__information-container {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -32,7 +32,7 @@ export class ProductModalComponent implements OnInit {
|
||||
this.product = this.config.data.product
|
||||
this.modifiersGroups = this.config.data.modifiersGroups
|
||||
this.modifiers = this.config.data.modifiers
|
||||
this.cartProduct = new CartProduct(this.product.id, this.product.name, this.modifiersFilter(), this.modifiers);
|
||||
this.cartProduct = new CartProduct(this.product.id, this.product.name, this.modifiersFilter(), this.modifiers, this.product.price);
|
||||
}
|
||||
|
||||
modifiersFilter(): ModifiersGroup[] {
|
||||
@ -43,25 +43,6 @@ export class ProductModalComponent implements OnInit {
|
||||
return this.modifiers.filter((modifier) => modifier.groupId === modifierGroup.id)
|
||||
}
|
||||
|
||||
changeQuantity(event: any) {
|
||||
const value: ChangeValue = event.value
|
||||
const modifierGroup: CartModifier = event.modifierGroup
|
||||
const option: Modifier = event.option
|
||||
|
||||
const modifGroup = this.cartProduct.modifiers.find((modifGroup) => modifGroup.idLocal === modifierGroup.idLocal)
|
||||
const modifier = modifGroup?.options.find((modifier) => modifier.idLocal == option.idLocal)
|
||||
|
||||
if (!modifier) return
|
||||
if (!modifier.quantity && modifier.quantity !== 0) modifier.quantity = modifier.restrictions.byDefault
|
||||
if (value.type === 'minus') {
|
||||
modifier.quantity -= value.variableQuantity
|
||||
} else {
|
||||
modifier.quantity += value.variableQuantity
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
selectedOptions(modifier: ModifiersGroup): Modifier[] {
|
||||
const cartModifier = this.cartProduct.modifiers.find(cartModifier => cartModifier.id === modifier.id)
|
||||
if (modifier.restrictions.maxQuantity === 1 && modifier.restrictions.minQuantity === 1) {
|
||||
@ -103,6 +84,15 @@ export class ProductModalComponent implements OnInit {
|
||||
element.setAttribute('isShow', 'true')
|
||||
}
|
||||
|
||||
changeProductAmount({type, variableQuantity}: ChangeValue) {
|
||||
if (type === 'plus') {
|
||||
this.cartProduct.increment()
|
||||
} else {
|
||||
this.cartProduct.decrement()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
addToCart(event: Event) {
|
||||
if (event) {
|
||||
event.preventDefault()
|
||||
|
||||
@ -68,7 +68,7 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border: solid #09467f 1px;
|
||||
border: solid var(--orange-main) 1px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
padding-bottom: 16px;
|
||||
@ -137,7 +137,7 @@
|
||||
}
|
||||
|
||||
.elementor-button--checkout {
|
||||
background-color: #09467f;
|
||||
background-color: var(--orange-main);
|
||||
color: #fff;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
|
||||
@ -0,0 +1,8 @@
|
||||
import { ChangeQuantityOptionDirective } from './change-quantity-option.directive';
|
||||
|
||||
describe('ChangeQuantityOptionDirective', () => {
|
||||
it('should create an instance', () => {
|
||||
const directive = new ChangeQuantityOptionDirective();
|
||||
expect(directive).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,65 @@
|
||||
import {
|
||||
Directive,
|
||||
ElementRef,
|
||||
HostListener,
|
||||
Input,
|
||||
OnInit,
|
||||
} from '@angular/core';
|
||||
import { CartModifier, Modifier } from '../interface/data';
|
||||
import { CartProduct } from '../models/cart-product';
|
||||
|
||||
@Directive({
|
||||
selector: '[appChangeQuantityOption]',
|
||||
})
|
||||
export class ChangeQuantityOptionDirective implements OnInit {
|
||||
@Input() option!: Modifier;
|
||||
@Input() modifier!: CartModifier;
|
||||
@Input() product!: CartProduct;
|
||||
|
||||
constructor(private el: ElementRef) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.option.quantity = this.option.restrictions.byDefault;
|
||||
|
||||
if (!this.modifier.lastChangeOption && this.option.restrictions.byDefault) {
|
||||
this.modifier.lastChangeOption = this.option.idLocal;
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('click') onOptionClick() {
|
||||
this.changeQuantity({ option: this.option, modifier: this.modifier });
|
||||
}
|
||||
|
||||
changeQuantity({
|
||||
option,
|
||||
modifier,
|
||||
}: {
|
||||
option: Modifier;
|
||||
modifier: CartModifier;
|
||||
}): void {
|
||||
if (!option.quantity && option.quantity !== 0) {
|
||||
return;
|
||||
}
|
||||
const quantity = option.quantity;
|
||||
const allQuantity = modifier.allQuantity;
|
||||
const maxOptionQ = option.restrictions.maxQuantity;
|
||||
const minOptionQ = option.restrictions.minQuantity;
|
||||
const maxModifierQ = modifier.restrictions.maxQuantity;
|
||||
const minModifierQ = modifier.restrictions.minQuantity;
|
||||
const plusCondition =
|
||||
(quantity < maxOptionQ && allQuantity < maxModifierQ) ||
|
||||
(maxOptionQ === 0 && (allQuantity < maxModifierQ || maxModifierQ === 0));
|
||||
|
||||
if (!plusCondition && quantity > minOptionQ && allQuantity > minModifierQ) {
|
||||
this.product.decrementOption(modifier.idLocal, option.idLocal);
|
||||
}
|
||||
if (allQuantity === maxModifierQ && modifier.lastChangeOption) {
|
||||
this.product.decrementOption(modifier.idLocal, modifier.lastChangeOption);
|
||||
this.changeQuantity({ option, modifier });
|
||||
}
|
||||
if (plusCondition) {
|
||||
this.product.incrementOption(modifier.idLocal, option.idLocal);
|
||||
modifier.lastChangeOption = option.idLocal;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -157,6 +157,7 @@ export interface Modifier {
|
||||
groupId: string,
|
||||
price?: number,
|
||||
quantity?: number,
|
||||
image?: string;
|
||||
restrictions: {
|
||||
minQuantity: number,
|
||||
maxQuantity: number,
|
||||
@ -166,6 +167,7 @@ export interface Modifier {
|
||||
}
|
||||
|
||||
export interface CartModifier {
|
||||
lastChangeOption?: string;
|
||||
id: string;
|
||||
idLocal: string;
|
||||
name: string;
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
import { CartModifier, Modifier, ModifiersGroup, Option } from "../interface/data";
|
||||
import { CartModifier, Modifier, ModifiersGroup } from "../interface/data";
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
|
||||
export class CartProduct {
|
||||
|
||||
|
||||
constructor(id: string, name: string, modifiers: ModifiersGroup[] = [], options: Modifier[], amount: number = 1) {
|
||||
constructor(id: string, name: string, modifiers: ModifiersGroup[] = [], options: Modifier[], price: number, amount: number = 1) {
|
||||
this.id = id;
|
||||
this.guid = uuidv4();
|
||||
this.amount = amount;
|
||||
this.name = name;
|
||||
this.price = price * amount
|
||||
this.modifiers = modifiers.map(modifier => ({
|
||||
name: modifier.name,
|
||||
id: modifier.id,
|
||||
@ -33,6 +34,7 @@ export class CartProduct {
|
||||
guid: string;
|
||||
amount: number;
|
||||
name: string;
|
||||
price: number;
|
||||
modifiers: CartModifier[];
|
||||
|
||||
increment(): void {
|
||||
@ -45,6 +47,29 @@ export class CartProduct {
|
||||
}
|
||||
}
|
||||
|
||||
incrementOption(modifierId: string, optionId: string): void {
|
||||
const modifier = this.modifiers.find((modifier) => modifier.idLocal === modifierId)
|
||||
const option = modifier?.options.find((option) => option.idLocal === optionId)
|
||||
if (!option?.quantity && option?.quantity !== 0) return
|
||||
option.quantity++
|
||||
}
|
||||
|
||||
decrementOption(modifierId: string, optionId: string): void {
|
||||
const modifier = this.modifiers.find((modifier) => modifier.idLocal === modifierId)
|
||||
const option = modifier?.options.find((option) => option.idLocal === optionId)
|
||||
if (!option?.quantity && option?.quantity !== 0) return
|
||||
option.quantity--
|
||||
}
|
||||
|
||||
get finalPrice(): number{
|
||||
const modifiersPrice = this.modifiers.reduce<number>((previousValue, currentValue) => {
|
||||
return previousValue + currentValue.options.reduce<number>((previousOptionValue, currentOptionValue) => {
|
||||
return previousOptionValue + Number(currentOptionValue.price ? currentOptionValue.price * (currentOptionValue.quantity ?? 0) : 0);
|
||||
}, 0);
|
||||
}, 0);
|
||||
return (Number(this.price) + modifiersPrice) * this.amount;
|
||||
}
|
||||
|
||||
// addOption(modifier: ModifiersGroup, option: Modifier): void {
|
||||
// const productModifier = this.modifiers.find(value => value.id === modifier.id);
|
||||
// if (productModifier) {
|
||||
|
||||
@ -6,7 +6,11 @@
|
||||
>
|
||||
<div *ngIf="!showAuthoriztion; else authEl" class="account-page">
|
||||
<div *ngIf="showAuthoriztion" class="top-left-attribute"></div>
|
||||
<div [ngSwitch]="currentPage.code" class="">
|
||||
<app-bonus-program
|
||||
[currentPage]="currentPage"
|
||||
(deauthorization)="changePage(pageList[0])"
|
||||
></app-bonus-program>
|
||||
<!-- <div [ngSwitch]="currentPage.code" class="">
|
||||
<ng-container *ngSwitchCase="PageCode.Orders">
|
||||
<app-orders
|
||||
[currentPage]="currentPage"
|
||||
@ -14,10 +18,6 @@
|
||||
></app-orders>
|
||||
</ng-container>
|
||||
<ng-container *ngSwitchCase="PageCode.BonusProgram">
|
||||
<app-bonus-program
|
||||
[currentPage]="currentPage"
|
||||
(deauthorization)="changePage(pageList[0])"
|
||||
></app-bonus-program>
|
||||
</ng-container>
|
||||
<ng-container *ngSwitchCase="PageCode.UserData">
|
||||
<app-user-data></app-user-data>
|
||||
@ -25,8 +25,8 @@
|
||||
<ng-container *ngSwitchCase="PageCode.RefSystem">
|
||||
<app-ref-system></app-ref-system>
|
||||
</ng-container>
|
||||
</div>
|
||||
<nav *ngIf="!showAuthoriztion" class="woocommerce-MyAccount-navigation">
|
||||
</div> -->
|
||||
<!-- <nav *ngIf="!showAuthoriztion" class="woocommerce-MyAccount-navigation">
|
||||
<ul>
|
||||
<ng-container *ngFor="let page of pageList; let index = index">
|
||||
<li
|
||||
@ -59,7 +59,28 @@
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</nav> -->
|
||||
|
||||
<mat-tab-group mat-stretch-tabs="false" mat-align-tabs="center">
|
||||
<ng-container *ngFor="let page of pageList">
|
||||
<mat-tab *ngIf="page.onSideBar" label="{{ page.name }}">
|
||||
<div [ngSwitch]="page.resName" class="">
|
||||
<ng-container *ngSwitchCase="'orders'">
|
||||
<app-orders
|
||||
[currentPage]="currentPage"
|
||||
(deauthorization)="changePage(pageList[0])"
|
||||
></app-orders>
|
||||
</ng-container>
|
||||
<ng-container *ngSwitchCase="'user-data'">
|
||||
<app-user-data></app-user-data>
|
||||
</ng-container>
|
||||
<ng-container *ngSwitchCase="'ref-system'">
|
||||
<app-ref-system></app-ref-system>
|
||||
</ng-container>
|
||||
</div>
|
||||
</mat-tab>
|
||||
</ng-container>
|
||||
</mat-tab-group>
|
||||
</div>
|
||||
|
||||
<p-toast
|
||||
|
||||
@ -1,10 +1,15 @@
|
||||
:host ::ng-deep .mat-tab-body {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
:host {
|
||||
.woocommerce {
|
||||
min-height: calc(100vh - 39px);
|
||||
padding: 20px 18px 65px;
|
||||
position: relative;
|
||||
|
||||
&.auth-page {}
|
||||
&.auth-page {
|
||||
}
|
||||
|
||||
.main-menu-container {
|
||||
position: fixed;
|
||||
@ -57,11 +62,11 @@
|
||||
position: absolute;
|
||||
right: calc(50% - 24px);
|
||||
top: 3px;
|
||||
background: #D7120B;
|
||||
background: #d7120b;
|
||||
border-radius: 50px;
|
||||
min-width: 1.2rem;
|
||||
line-height: 1.2rem;
|
||||
font-size: .8rem;
|
||||
font-size: 0.8rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@ -70,6 +75,12 @@
|
||||
}
|
||||
|
||||
.account-page {
|
||||
max-width: 1208px;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
gap: 32px;
|
||||
width: 98%;
|
||||
flex-direction: row;
|
||||
nav {
|
||||
margin-bottom: 24px;
|
||||
margin-top: 26px;
|
||||
@ -97,7 +108,7 @@
|
||||
border-radius: 15px;
|
||||
|
||||
&.is-active {
|
||||
border: solid #09467f 1px;
|
||||
border: solid var(--orange-main) 1px;
|
||||
// display: none;
|
||||
}
|
||||
|
||||
@ -113,7 +124,7 @@
|
||||
.menu-item-info {
|
||||
margin-left: 16px;
|
||||
|
||||
&>a {
|
||||
& > a {
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
@ -124,7 +135,7 @@
|
||||
text-align-last: left;
|
||||
}
|
||||
|
||||
&>p {
|
||||
& > p {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
@ -140,24 +151,28 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-tab-group {
|
||||
width: calc(100% - 432px);
|
||||
}
|
||||
}
|
||||
|
||||
.top-left-attribute {
|
||||
width: 10px;
|
||||
height: 5px;
|
||||
background: #09467f;
|
||||
background: var(--orange-main);
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 69px;
|
||||
}
|
||||
|
||||
|
||||
.version {
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
bottom: 60px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width: 550px) {
|
||||
.woocommerce {
|
||||
@ -170,18 +185,30 @@
|
||||
border: solid 1px #dfdfdf;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 0 6px 2px rgb(223 223 223);
|
||||
transition: top .4s cubic-bezier(0.57, -0.43, 0.41, 1.3);
|
||||
transition: top 0.4s cubic-bezier(0.57, -0.43, 0.41, 1.3);
|
||||
top: -60px;
|
||||
|
||||
&[isShow=true] {
|
||||
|
||||
&[isShow="true"] {
|
||||
top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.version {
|
||||
bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@media screen and (max-width: 895px) {
|
||||
.woocommerce {
|
||||
.account-page {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
.mat-tab-group {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,11 +22,12 @@
|
||||
}
|
||||
|
||||
.card-container {
|
||||
background: #09467f;
|
||||
background: var(--orange-main);
|
||||
box-shadow: 0px 0px 5px rgb(0 0 0 / 15%);
|
||||
border-radius: 15px;
|
||||
margin-top: 11px;
|
||||
overflow: hidden;
|
||||
min-width: 400px;
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
|
||||
@ -65,7 +66,7 @@
|
||||
}
|
||||
|
||||
&__content {
|
||||
background-color: #09467f;
|
||||
background-color: var(--orange-main);
|
||||
color: #fff;
|
||||
|
||||
.info {
|
||||
@ -195,9 +196,17 @@
|
||||
margin-top: 12px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
background: #09467f;
|
||||
border-color: #09467f;
|
||||
background: var(--orange-main);
|
||||
border-color: var(--orange-main);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 895px) {
|
||||
.woocommerce-MyAccount-content {
|
||||
.card-container {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
<div class="orders">
|
||||
<h2>{{ currentPage.name }}</h2>
|
||||
<!-- <h2>{{ currentPage.name }}</h2> -->
|
||||
<table
|
||||
class="woocommerce-orders-table woocommerce-MyAccount-orders shop_table shop_table_responsive my_account_orders account-orders-table"
|
||||
>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.show-more-orders {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: #09467f;
|
||||
color: var(--orange-main);
|
||||
margin-top: 16px;
|
||||
}
|
||||
.woocommerce-MyAccount-content {
|
||||
@ -9,7 +9,7 @@
|
||||
margin-left: calc(50vw - 200px);
|
||||
}
|
||||
.woocommerce-orders-table {
|
||||
border: 2px solid #dee2e6;
|
||||
// border: 2px solid #dee2e6;
|
||||
border-bottom: 0;
|
||||
border-radius: 0.25rem;
|
||||
border-collapse: separate;
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
margin: 0 auto;
|
||||
.share {
|
||||
width: 50px;
|
||||
background-color: #09467f;
|
||||
background-color: var(--orange-main);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -19,7 +19,7 @@
|
||||
}
|
||||
}
|
||||
.copy {
|
||||
background-color: #09467f;
|
||||
background-color: var(--orange-main);
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
width: calc(100% - 66px);
|
||||
|
||||
@ -155,7 +155,7 @@
|
||||
padding: 12px;
|
||||
display: block;
|
||||
width: fit-content;
|
||||
background: #09467f;
|
||||
background: var(--orange-main);
|
||||
border-radius: 4px;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
|
||||
@ -1,111 +1,165 @@
|
||||
<p-toast position="top-center"></p-toast>
|
||||
<div *ngIf="!loading; else loadingEl" class="products-container">
|
||||
<div class="products-container__filters-container">
|
||||
<!-- <label>Категория</label>
|
||||
<div class="products-container__filters-container">
|
||||
<!-- <label>Категория</label>
|
||||
<p-treeSelect *ngIf="groups" [(ngModel)]="selectedGroup" [options]="groups"
|
||||
(onNodeSelect)="changeGroup()" (onNodeUnselect)="onGroupUnselect($event)" placeholder="Группа"></p-treeSelect> -->
|
||||
<div class="products-container__categories-container">
|
||||
<div *ngFor="let group of groups; let first = first" (click)="changeGroup(group)" [ngClass]="{
|
||||
'group-container': true,
|
||||
'active': group.id === selectedGroup.id,
|
||||
'non-visible': first
|
||||
}">
|
||||
<span>
|
||||
{{group.label}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<p-treeSelect *ngIf="terminalList" [(ngModel)]="selectedTerminal" [options]="terminalList"
|
||||
(onNodeSelect)="changeTerminal()" (onNodeUnselect)="onTerminalUnselect($event)"
|
||||
placeholder="Пункт самовывоза" [disabled]="!!cartService.cartCount"></p-treeSelect>
|
||||
<!-- <label>Пункт выдачи</label> -->
|
||||
<div class="products-container__categories-container">
|
||||
<div
|
||||
*ngFor="let group of groups; let first = first"
|
||||
(click)="changeGroup(group)"
|
||||
[ngClass]="{
|
||||
'group-container': true,
|
||||
active: group.id === selectedGroup.id,
|
||||
'non-visible': first
|
||||
}"
|
||||
>
|
||||
<span>
|
||||
{{ group.label }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <p-paginator [style]="{'background': 'transparent', padding: '8px 0'}" [alwaysShow]="false" [first]="currentPage" [rows]="10"
|
||||
<p-treeSelect
|
||||
*ngIf="terminalList"
|
||||
[(ngModel)]="selectedTerminal"
|
||||
[options]="terminalList"
|
||||
(onNodeSelect)="changeTerminal()"
|
||||
(onNodeUnselect)="onTerminalUnselect($event)"
|
||||
placeholder="Пункт самовывоза"
|
||||
[disabled]="!!cartService.cartCount"
|
||||
></p-treeSelect>
|
||||
<!-- <label>Пункт выдачи</label> -->
|
||||
</div>
|
||||
<!-- <p-paginator [style]="{'background': 'transparent', padding: '8px 0'}" [alwaysShow]="false" [first]="currentPage" [rows]="10"
|
||||
[totalRecords]="filterByGroup().length" (onPageChange)="onPageChange($event)" [pageLinkSize]="3"
|
||||
[showPageLinks]="true"></p-paginator> -->
|
||||
<div *ngIf="selectedGroup && selectedGroup.label !== 'Все'" class="products-container__category-name-container">
|
||||
<h1>{{selectedGroup.label}}</h1>
|
||||
<div class="bread-crumbs">
|
||||
<span class="all" (click)="changeGroup(groups[0])">Все </span>
|
||||
>
|
||||
<span class="selected-category"> {{selectedGroup.label}}</span>
|
||||
</div>
|
||||
<div
|
||||
*ngIf="selectedGroup && selectedGroup.label !== 'Все'"
|
||||
class="products-container__category-name-container"
|
||||
>
|
||||
<h1>{{ selectedGroup.label }}</h1>
|
||||
<div class="bread-crumbs">
|
||||
<span class="all" (click)="changeGroup(groups[0])">Все </span>
|
||||
>
|
||||
<span class="selected-category"> {{ selectedGroup.label }}</span>
|
||||
</div>
|
||||
<ng-container *ngIf="selectedGroup && selectedGroup.label === 'Все'">
|
||||
<div *ngFor="let group of groups.slice(1)" [ngClass]="{
|
||||
'products-container__category-container': true
|
||||
}">
|
||||
<div class="header">
|
||||
<h2>{{group.label}}</h2>
|
||||
<button (click)="changeGroup(group)">
|
||||
Перейти в категорию
|
||||
</button>
|
||||
</div>
|
||||
<div class="products-container__items">
|
||||
<div *ngFor="let product of filterByGroup(group)" (click)="addToCart($event, product)"
|
||||
class="products-container__item" #currentCategoryList>
|
||||
<img *ngIf="!product.image" src="./assets/no-image.png" alt="{{product.name}}">
|
||||
<img *ngIf="product.image" src="{{product.image}}" alt="{{product.name}}">
|
||||
<div class="products-container__name-container">
|
||||
<p>{{product.name}}</p>
|
||||
</div>
|
||||
<p class="products-container__product-composition">Lorem ipsum dolor sit amet consectetur
|
||||
adipisicing elit.
|
||||
Odio consequuntur voluptates est.</p>
|
||||
<div class="products-container__item-footer">
|
||||
<span>{{product.price}}₽</span>
|
||||
<button class="products-container__add-to-cart">В корзину</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ng-container *ngIf="selectedGroup && selectedGroup.label === 'Все'">
|
||||
<div
|
||||
*ngFor="let group of groups.slice(1)"
|
||||
[ngClass]="{
|
||||
'products-container__category-container': true
|
||||
}"
|
||||
>
|
||||
<div class="header">
|
||||
<h2>{{ group.label }}</h2>
|
||||
<button (click)="changeGroup(group)">Перейти в категорию</button>
|
||||
</div>
|
||||
<div class="products-container__items">
|
||||
<div
|
||||
*ngFor="let product of filterByGroup(group)"
|
||||
(click)="addToCart($event, product)"
|
||||
class="products-container__item"
|
||||
#currentCategoryList
|
||||
>
|
||||
<img
|
||||
src="{{
|
||||
product.image?.length ? product.image : './assets/no-image.png'
|
||||
}}"
|
||||
alt="{{ product.name }}"
|
||||
/>
|
||||
<div class="products-container__name-container">
|
||||
<p>{{ product.name }}</p>
|
||||
</div>
|
||||
<p class="products-container__product-composition">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio
|
||||
consequuntur voluptates est.
|
||||
</p>
|
||||
<div class="products-container__item-footer">
|
||||
<span>{{ product.price }}₽</span>
|
||||
<button class="products-container__add-to-cart">В корзину</button>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="selectedGroup && selectedGroup.label !== 'Все'">
|
||||
<div class="products-container__items">
|
||||
<div *ngFor="let product of filterByGroup()" (click)="addToCart($event, product)"
|
||||
class="products-container__item" #currentCategoryList>
|
||||
<img *ngIf="!product.image" src="./assets/no-image.png" alt="{{product.name}}">
|
||||
<img *ngIf="product.image" src="{{product.image}}" alt="{{product.name}}">
|
||||
<div class="products-container__name-container">
|
||||
<p>{{product.name}}</p>
|
||||
</div>
|
||||
<p class="products-container__product-composition">Lorem ipsum dolor sit amet consectetur adipisicing
|
||||
elit.
|
||||
Odio consequuntur voluptates est.</p>
|
||||
<div class="products-container__item-footer">
|
||||
<span>{{product.price}}₽</span>
|
||||
<button class="products-container__add-to-cart">В корзину</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="selectedGroup && selectedGroup.label !== 'Все'">
|
||||
<div class="products-container__items">
|
||||
<div
|
||||
*ngFor="let product of filterByGroup()"
|
||||
(click)="addToCart($event, product)"
|
||||
class="products-container__item"
|
||||
#currentCategoryList
|
||||
>
|
||||
<img
|
||||
*ngIf="!product.image"
|
||||
src="./assets/no-image.png"
|
||||
alt="{{ product.name }}"
|
||||
/>
|
||||
<img
|
||||
*ngIf="product.image"
|
||||
src="{{ product.image }}"
|
||||
alt="{{ product.name }}"
|
||||
/>
|
||||
<div class="products-container__name-container">
|
||||
<p>{{ product.name }}</p>
|
||||
</div>
|
||||
</ng-container>
|
||||
<!-- <p-paginator [style]="{'background': 'transparent', padding: '8px 0'}" [alwaysShow]="false" [first]="currentPage" [rows]="10"
|
||||
<p class="products-container__product-composition">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio
|
||||
consequuntur voluptates est.
|
||||
</p>
|
||||
<div class="products-container__item-footer">
|
||||
<span>{{ product.price }}₽</span>
|
||||
<button class="products-container__add-to-cart">В корзину</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<!-- <p-paginator [style]="{'background': 'transparent', padding: '8px 0'}" [alwaysShow]="false" [first]="currentPage" [rows]="10"
|
||||
[totalRecords]="filterByGroup().length" (onPageChange)="onPageChange($event)" [pageLinkSize]="3"
|
||||
[showPageLinks]="true"></p-paginator> -->
|
||||
<p-toast position="bottom-center" key="c" (onClose)="onReject()" [baseZIndex]="5000">
|
||||
<ng-template let-message pTemplate="message">
|
||||
<div class="flex flex-column" style="flex: 1">
|
||||
<div class="text-center">
|
||||
<i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
|
||||
<h4>{{message.summary}}</h4>
|
||||
<p style="font-weight: 600;">{{message.detail}}</p>
|
||||
</div>
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-6">
|
||||
<button type="button" pButton (click)="onConfirm()" label="Да"
|
||||
class="p-button-success"></button>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<button type="button" pButton (click)="onReject()" label="Нет"
|
||||
class="p-button-secondary"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-toast>
|
||||
<p-toast
|
||||
position="bottom-center"
|
||||
key="c"
|
||||
(onClose)="onReject()"
|
||||
[baseZIndex]="5000"
|
||||
>
|
||||
<ng-template let-message pTemplate="message">
|
||||
<div class="flex flex-column" style="flex: 1">
|
||||
<div class="text-center">
|
||||
<i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
|
||||
<h4>{{ message.summary }}</h4>
|
||||
<p style="font-weight: 600">{{ message.detail }}</p>
|
||||
</div>
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-6">
|
||||
<button
|
||||
type="button"
|
||||
pButton
|
||||
(click)="onConfirm()"
|
||||
label="Да"
|
||||
class="p-button-success"
|
||||
></button>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<button
|
||||
type="button"
|
||||
pButton
|
||||
(click)="onReject()"
|
||||
label="Нет"
|
||||
class="p-button-secondary"
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-toast>
|
||||
</div>
|
||||
<ng-template #loadingEl>
|
||||
<div class="angular-spinner-container" style="width: fit-content; height: 100%; margin: 16px auto;">
|
||||
<p-progressSpinner styleClass="angular-spinner"></p-progressSpinner>
|
||||
</div>
|
||||
</ng-template>
|
||||
<div
|
||||
class="angular-spinner-container"
|
||||
style="width: fit-content; height: 100%; margin: 16px auto"
|
||||
>
|
||||
<p-progressSpinner styleClass="angular-spinner"></p-progressSpinner>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
@ -1,258 +1,269 @@
|
||||
:host {
|
||||
.products-container {
|
||||
width: 100%;
|
||||
max-width: 1208px;
|
||||
.products-container {
|
||||
width: 100%;
|
||||
max-width: 1208px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 auto 16px;
|
||||
|
||||
&__category-name-container {
|
||||
margin-bottom: 16px;
|
||||
|
||||
h1 {
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.bread-crumbs {
|
||||
font-weight: 600;
|
||||
color: #9d9d9d;
|
||||
font-size: 16px;
|
||||
|
||||
.all {
|
||||
margin-right: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.selected-category {
|
||||
color: var(--orange-main);
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__filters-container {
|
||||
width: 100%;
|
||||
margin: 12px auto 24px auto;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
label {
|
||||
margin: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
&__categories-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
align-items: center;
|
||||
overflow-x: auto;
|
||||
width: 100%;
|
||||
margin-right: 16px;
|
||||
gap: 8px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset;
|
||||
background-color: #f9f9fd;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(180deg, #00c6fb, #005bea);
|
||||
}
|
||||
|
||||
.group-container {
|
||||
font-weight: 600;
|
||||
padding: 8px 24px;
|
||||
transition: all 0.5s;
|
||||
border-radius: 1.125rem;
|
||||
text-align: center;
|
||||
background: #ededed;
|
||||
border: none;
|
||||
min-width: fit-content;
|
||||
cursor: pointer;
|
||||
|
||||
&.non-visible {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
background: var(--orange-main);
|
||||
border: none;
|
||||
// box-shadow: 0 0 10px 5px rgb(221 221 221);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: var(--orange-main);
|
||||
border: none;
|
||||
// box-shadow: 0 0 10px 5px rgb(221 221 221);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__items {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__category-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 auto 16px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 48px 0 16px;
|
||||
|
||||
&__category-name-container {
|
||||
margin-bottom: 16px;
|
||||
|
||||
h1 {
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.bread-crumbs {
|
||||
font-weight: 600;
|
||||
color: #9d9d9d;
|
||||
font-size: 16px;
|
||||
|
||||
.all {
|
||||
margin-right: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.selected-category {
|
||||
color: #c43f00;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
&__filters-container {
|
||||
width: 100%;
|
||||
margin: 12px auto 24px auto;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
button {
|
||||
padding: 8px 26px;
|
||||
background: var(--orange-main);
|
||||
border: none;
|
||||
border-radius: 1.125rem;
|
||||
color: #fff;
|
||||
transition: all 0.3s;
|
||||
|
||||
label {
|
||||
margin: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
&__categories-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
align-items: center;
|
||||
overflow-x: auto;
|
||||
width: 100%;
|
||||
margin-right: 16px;
|
||||
gap: 8px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.group-container {
|
||||
font-weight: 600;
|
||||
padding: 8px 24px;
|
||||
transition: all 0.5s;
|
||||
border-radius: 1.125rem;
|
||||
text-align: center;
|
||||
background: #ededed;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
&.non-visible {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
background: #09467f;
|
||||
border: none;
|
||||
// box-shadow: 0 0 10px 5px rgb(221 221 221);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: #09467f;
|
||||
border: none;
|
||||
// box-shadow: 0 0 10px 5px rgb(221 221 221);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__items {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
margin: 0 auto;
|
||||
|
||||
}
|
||||
|
||||
&__category-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 48px 0 16px;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 8px 26px;
|
||||
background: #1D3F5F;
|
||||
border: none;
|
||||
border-radius: 1.125rem;
|
||||
color: #fff;
|
||||
transition: all .3s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 10px 5px rgb(211 211 211);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
height: auto;
|
||||
min-height: 200px;
|
||||
width: 290px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding-bottom: 38Px;
|
||||
transition: all .3s;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
height: 190px;
|
||||
object-fit: cover;
|
||||
border-radius: 1.125rem;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
scale: 1.01;
|
||||
border: none;
|
||||
|
||||
img {
|
||||
box-shadow: 0 0 10px 5px rgb(221 221 221);
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__name-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-top: 8px;
|
||||
|
||||
p {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
width: 100%;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&__add-to-cart {
|
||||
padding: 8px 26px;
|
||||
background: #C43F00;
|
||||
border: none;
|
||||
border-radius: 1.125rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&__item-footer {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
||||
&>span {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&__product-composition {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 1.375;
|
||||
&:hover {
|
||||
box-shadow: 0 0 10px 5px rgb(211 211 211);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// @media screen and (max-width: 1549px) {
|
||||
// .products-container {
|
||||
// &__items {
|
||||
// max-width: 1208px;
|
||||
// }
|
||||
// &__filters-container {
|
||||
// max-width: 1208px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
&__item {
|
||||
height: auto;
|
||||
min-height: 200px;
|
||||
width: 290px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding-bottom: 38px;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
|
||||
@media screen and (max-width: 1243px) {
|
||||
.products-container {
|
||||
max-width: 902px;
|
||||
img {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
height: 190px;
|
||||
object-fit: cover;
|
||||
border-radius: 1.125rem;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
scale: 1.01;
|
||||
border: none;
|
||||
|
||||
img {
|
||||
box-shadow: 0 0 10px 5px rgb(221 221 221);
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 937px) {
|
||||
.products-container {
|
||||
max-width: 596px;
|
||||
&__name-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-top: 8px;
|
||||
|
||||
&__filters-container {
|
||||
flex-direction: column-reverse;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
width: 100%;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 631px) {
|
||||
.products-container {
|
||||
max-width: 400px;
|
||||
|
||||
&__item {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&__add-to-cart {
|
||||
padding: 8px 26px;
|
||||
background: var(--orange-main);
|
||||
border: none;
|
||||
border-radius: 1.125rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// @media screen and (max-width: 631px) {
|
||||
// .products-container {
|
||||
// // max-width: none;
|
||||
&__item-footer {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
||||
// &__item {
|
||||
// width: 100%;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
& > span {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&__product-composition {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 1.375;
|
||||
}
|
||||
}
|
||||
|
||||
// @media screen and (max-width: 1549px) {
|
||||
// .products-container {
|
||||
// &__items {
|
||||
// max-width: 1208px;
|
||||
// }
|
||||
// &__filters-container {
|
||||
// max-width: 1208px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@media screen and (max-width: 1243px) {
|
||||
.products-container {
|
||||
max-width: 902px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 937px) {
|
||||
.products-container {
|
||||
max-width: 596px;
|
||||
|
||||
&__filters-container {
|
||||
flex-direction: column-reverse;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 631px) {
|
||||
.products-container {
|
||||
max-width: 400px;
|
||||
|
||||
&__item {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// @media screen and (max-width: 631px) {
|
||||
// .products-container {
|
||||
// // max-width: none;
|
||||
|
||||
// &__item {
|
||||
// width: 100%;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
@ -130,20 +130,24 @@ export class ProductsComponent implements OnInit {
|
||||
if (event) {
|
||||
event.preventDefault()
|
||||
}
|
||||
const productModalWidth = product.modifiers_group.length ? '94vw' : '50vw'
|
||||
const productModalMaxWidth = product.modifiers_group.length ? '1400px' : '500px'
|
||||
const ref = this.dialogService.open(ProductModalComponent, {
|
||||
header: product.name,
|
||||
width: 'auto',
|
||||
width: 'fit-content',
|
||||
style: {
|
||||
'max-width': '90vw',
|
||||
'max-width': productModalMaxWidth,
|
||||
'min-width': '300px',
|
||||
'max-height': '90vh',
|
||||
'border-radius': '1.125rem'
|
||||
'border-radius': '1.125rem',
|
||||
width: productModalWidth
|
||||
},
|
||||
contentStyle: {
|
||||
'max-height': '90vh',
|
||||
height: 'auto',
|
||||
'max-width': '600px',
|
||||
overflow: 'auto',
|
||||
},
|
||||
styleClass: 'product-modal-view',
|
||||
data: {
|
||||
product: product,
|
||||
modifiersGroups: this.modifiersGroups,
|
||||
|
||||
@ -16,12 +16,14 @@ blockquote,q{quotes:none}
|
||||
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
|
||||
table{border-collapse:collapse;border-spacing:0}
|
||||
|
||||
:root {
|
||||
--orange-main: #C43F00;
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: 'Raleway', sans-serif;
|
||||
}
|
||||
|
||||
$base_color: red;
|
||||
|
||||
.p-inputtext {
|
||||
width: 100%;
|
||||
border: 1px solid #B8DEFF;
|
||||
@ -71,11 +73,11 @@ button {
|
||||
|
||||
.p-toast-message-custom {
|
||||
background-color: #fff;
|
||||
border: solid #09467F;
|
||||
border: solid var(--orange-main);
|
||||
border-width: 0 0 0 6px;
|
||||
color: #000;
|
||||
.p-toast-icon-close {
|
||||
color: #09467F;
|
||||
color: var(--orange-main);
|
||||
}
|
||||
}
|
||||
|
||||
@ -197,6 +199,31 @@ p-toast[key="c"] .p-toast {
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1070px) {
|
||||
.product-modal-view {
|
||||
width: 50vw !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.product-modal-view {
|
||||
width: 70vw !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.product-modal-view {
|
||||
width: 80vw !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
.product-modal-view {
|
||||
width: 94vw !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.p-calendar {
|
||||
width: 100%;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user