dev #12927

доработки по карточке товара, поменял работу модификаторов

angular/src/app/components/change-quantity/change-quantity.component.html

@@ -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>

angular/src/app/components/change-quantity/change-quantity.component.scss

@@ -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;
+            }
+        }
+    }
+}

angular/src/app/components/change-quantity/change-quantity.component.spec.ts

@@ -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();
+  });
+});

angular/src/app/components/change-quantity/change-quantity.component.ts

@@ -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)
+  }
+
+}

angular/src/app/components/checkbox-group/checkbox-group.component.html

@@ -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>

angular/src/app/components/checkbox-group/checkbox-group.component.scss

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

angular/src/app/components/checkbox-group/checkbox-group.component.ts

@@ -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
+  }
 
 }

angular/src/app/components/product-modal/product-modal.component.html

@@ -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)"
+                    <app-checkbox-group [modifier]="modifierGroup" [options]="modifierGroup.options"
-                        currencySymbol="₽" [selectedOptions]="selectedOptions(modifierGroup)"
+                        currencySymbol="₽" (onChangeQuantity)="changeQuantity($event)">
-                        (toggle)="addOption(modifierGroup, $event)">
                     </app-checkbox-group>
                 </div>
             </div>

angular/src/app/components/product-modal/product-modal.component.scss

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

angular/src/app/components/product-modal/product-modal.component.ts

@@ -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();
   }