gofnnp/h-usersite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dev #12927

Browse Source 
доработки по карточке товара, поменял работу модификаторов
This commit is contained in:
gofnnp 2022-12-05 08:32:57 +04:00
parent 63fac5b48d
commit 801f33623b
10 changed files with 189 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
angular/src/app/components/change-quantity/change-quantity.component.html Normal file
View File

@ -0,0 +1,19 @@
<div class="change-quantity">
<button (click)="changeValue({type: 'minus', variableQuantity: variableQuantity})"
[disabled]="disabledButton.includes('minus')"
[ngClass]="{
'is-active': !disabledButton.includes('minus')
}">
-
</button>
<span>
{{value}}
</span>
<button (click)="changeValue({type: 'plus', variableQuantity: variableQuantity})"
[disabled]="disabledButton.includes('plus')"
[ngClass]="{
'is-active': !disabledButton.includes('plus')
}">
+
</button>
</div>

21
angular/src/app/components/change-quantity/change-quantity.component.scss Normal file
View File

@ -0,0 +1,21 @@
:host {
.change-quantity {
border: 1px solid #dfdee2;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: space-between;
height: 28px;
margin: 4px 16px 4px 0;
button {
background: #ffffff;
border: 0;
font-size: 28px;
font-weight: 300;
&:disabled {
opacity: 0.3;
}
}
}
}

23
angular/src/app/components/change-quantity/change-quantity.component.spec.ts Normal file
View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ChangeQuantityComponent } from './change-quantity.component';
describe('ChangeQuantityComponent', () => {
let component: ChangeQuantityComponent;
let fixture: ComponentFixture<ChangeQuantityComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ChangeQuantityComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(ChangeQuantityComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

28
angular/src/app/components/change-quantity/change-quantity.component.ts Normal file
View File

@ -0,0 +1,28 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
export interface ChangeValue {
type: 'plus' | 'minus',
variableQuantity: number
}
@Component({
selector: 'app-change-quantity',
templateUrl: './change-quantity.component.html',
styleUrls: ['./change-quantity.component.scss']
})
export class ChangeQuantityComponent implements OnInit {
@Output() onChangeValue = new EventEmitter<ChangeValue>();
@Input() variableQuantity: number = 1
@Input() value: number = 1
@Input() disabledButton: 'minus' | 'plus' | 'none' | string[] = 'none'
constructor() { }
ngOnInit(): void {
}
changeValue(changeValue: ChangeValue) {
this.onChangeValue.emit(changeValue)
}
}

15
angular/src/app/components/checkbox-group/checkbox-group.component.html
View File

@ -1,4 +1,4 @@
<div *ngFor="let option of options; let index = index;" class="extra_options_checkbox">
<!-- <div *ngFor="let option of options; let index = index;" class="extra_options_checkbox">
<div class="extra_options_label"><label>{{option.name}}</label></div>
<div class="extra_options_value">
<div class="woofood-cbx-wrapper">
@ -18,4 +18,17 @@
</label>
</div>
</div>
</div> -->
<span *ngIf="modifier.restrictions.minQuantity > allQuantity" class="validator-text">
Минимальное количество продуктов: {{modifier.restrictions.minQuantity}}
</span>
<div *ngFor="let option of options; let index = index;" class="extra_options_checkbox">
<div class="extra_options_label"><label>{{option.name}}</label></div>
<div class="extra_options_value">
<app-change-quantity (onChangeValue)="changeQuantity($event, option)"
[value]="(option.quantity || option.quantity === 0) ? option.quantity : option.restrictions.byDefault"
[disabledButton]="getDisabledButton(option)">
</app-change-quantity>
</div>
</div>

5
angular/src/app/components/checkbox-group/checkbox-group.component.scss
View File

@ -86,4 +86,9 @@
border-color: #dfdfdf !important;
}
}
.validator-text {
color: #cc0000;
font-size: 12px;
}
}

41
angular/src/app/components/checkbox-group/checkbox-group.component.ts
View File

@ -1,6 +1,7 @@
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {Modifier, ModifiersGroup, Option} from 'src/app/interface/data';
import {CartModifier, Modifier, ModifiersGroup, Option} from 'src/app/interface/data';
import { cloneDeep } from 'lodash/fp';
import { ChangeValue } from '../change-quantity/change-quantity.component';
@Component({
selector: 'app-checkbox-group',
@ -11,15 +12,23 @@ export class CheckboxGroupComponent implements OnInit {
constructor() { }
@Input() modifier!: ModifiersGroup;
@Input() modifier!: CartModifier;
@Input() options!: Modifier[];
@Input() currencySymbol!: string;
@Output() toggle = new EventEmitter<Modifier>();
@Input() selectedOptions: Modifier[] = [];
@Output() toggle = new EventEmitter<Modifier>();
@Output() onChangeQuantity = new EventEmitter<any>();
public allQuantity!: number
ngOnInit() {
this.allQuantity = this.getAllQuantity(this.options, 'quantity')
}
getAllQuantity(array: Array<any>, key: string) {
return array.reduce((a, b) => a + (b[key] || 0), 0);
}
optionIsSelected(option: Modifier): boolean{
@ -30,5 +39,27 @@ export class CheckboxGroupComponent implements OnInit {
this.toggle.emit(option);
}
changeQuantity(value: ChangeValue, option: Modifier) {
this.onChangeQuantity.emit({
value,
option,
modifierGroup: this.modifier
})
this.allQuantity = this.getAllQuantity(this.options, 'quantity')
}
getDisabledButton(option: Modifier) {
if (!option.quantity && option.quantity !== 0) option.quantity = option.restrictions.byDefault
const minusCondition = option.quantity === 0 || option.quantity === option.restrictions.minQuantity
const plusCondition = option.quantity === option.restrictions.maxQuantity && option.restrictions.maxQuantity !== 0
const maxQuantityCondition = this.allQuantity === this.modifier.restrictions.maxQuantity && this.modifier.restrictions.maxQuantity !== 0
const minQuantityCondition = this.allQuantity === this.modifier.restrictions.minQuantity
let result: any = 'none'
if (minusCondition || (minQuantityCondition && !minusCondition)) result = 'minus'
if (plusCondition || (maxQuantityCondition && !minusCondition)) result = 'plus'
if ((maxQuantityCondition && minusCondition) || (minQuantityCondition && plusCondition)) result = ['plus', 'minus']
return result
}
}

8
angular/src/app/components/product-modal/product-modal.component.html
View File

@ -4,7 +4,8 @@
<div class="product-modal__modifiers-container">
<ng-container *ngIf="product.modifiers_group.length">
<div *ngFor="let modifierGroup of modifiersFilter()" [attr.isShow]="false" class="product-modal__modifier" #modifierContainer>
<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}}
<span [ngClass]="{
@ -16,9 +17,8 @@
'options-container': true,
'isShow': getIsShow(modifierContainer)
}">
<app-checkbox-group [modifier]="modifierGroup" [options]="optionsFilter(modifierGroup)"
currencySymbol="₽" [selectedOptions]="selectedOptions(modifierGroup)"
(toggle)="addOption(modifierGroup, $event)">
<app-checkbox-group [modifier]="modifierGroup" [options]="modifierGroup.options"
currencySymbol="₽" (onChangeQuantity)="changeQuantity($event)">
</app-checkbox-group>
</div>
</div>

3
angular/src/app/components/product-modal/product-modal.component.scss
View File

@ -54,6 +54,9 @@
opacity: 1;
}
}
&.no-valid {
border-color: #cc0000;
}
}
&__modifier-icon {

38
angular/src/app/components/product-modal/product-modal.component.ts
View File

@ -1,9 +1,11 @@
import { Component, OnInit } from '@angular/core';
import { MessageService } from 'primeng/api';
import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
import { AllData, Modifier, ModifiersGroup, Option, Product } from 'src/app/interface/data';
import { AllData, CartModifier, Modifier, ModifiersGroup, Option, Product } from 'src/app/interface/data';
import { CartProduct } from 'src/app/models/cart-product';
import { CartService } from 'src/app/services/cart.service';
import { WpJsonService } from 'src/app/services/wp-json.service';
import { ChangeValue } from '../change-quantity/change-quantity.component';
@Component({
selector: 'app-product-modal',
@ -16,12 +18,14 @@ export class ProductModalComponent implements OnInit {
public modifiersGroups!: ModifiersGroup[];
public modifiers!: Modifier[];
public cartProduct!: CartProduct;
public isValidate: boolean = false
constructor(
public dialogRef: DynamicDialogRef,
public config: DynamicDialogConfig,
private wpJsonService: WpJsonService,
private cartService: CartService,
private messageService: MessageService,
) { }
ngOnInit(): void {
@ -39,6 +43,25 @@ 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) {
@ -62,7 +85,7 @@ export class ProductModalComponent implements OnInit {
}
modif?.options.push(option)
}
getIsShow(element: HTMLDivElement) {
const isShow = Object.values(element.attributes).find((value) => value.name === 'isshow')?.value
return isShow === 'true'
@ -84,6 +107,17 @@ export class ProductModalComponent implements OnInit {
if (event) {
event.preventDefault()
}
for (let modifiersGroup of this.cartProduct.modifiers) {
const isValidModifier = modifiersGroup.allQuantity < modifiersGroup.restrictions.minQuantity
if (isValidModifier) {
this.messageService.add({
severity: 'error',
summary: 'Заполните все модификаторы!'
});
this.isValidate = true
return
}
}
this.cartService.addToCart(this.cartProduct);
this.dialogRef.close();
}