dev #12926

доработал каталог товаров, добавил работу с терминалами

angular/src/app/pages/products/products.component.html

@@ -1,7 +1,13 @@
+<p-toast position="top-center"></p-toast>
 <div class="products-container">
     <div class="products-container__filters-container">
-        <p-treeSelect [(ngModel)]="selectedGroup" [options]="groups" placeholder="Группа"></p-treeSelect>
+        <label>Категория</label>
-
+        <p-treeSelect *ngIf="groups" [(ngModel)]="selectedGroup" [options]="groups"
+            (onNodeUnselect)="onGroupUnselect($event)" placeholder="Группа"></p-treeSelect>
+        <label>Пункт выдачи</label>
+        <p-treeSelect *ngIf="terminalList" [(ngModel)]="selectedTerminal" [options]="terminalList"
+            (onNodeSelect)="changeTerminal()" (onNodeUnselect)="onTerminalUnselect($event)"
+            placeholder="Пункт самовывоза" [disabled]="!!cartService.cartCount"></p-treeSelect>
     </div>
     <div class="products-container__items">
         <div *ngFor="let product of filterByGroup()" class="products-container__item">
@@ -14,4 +20,25 @@
             <button class="products-container__add-to-cart" (click)="addToCart($event, product)">В корзину</button>
         </div>
     </div>
-</div>
+    <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>

angular/src/app/pages/products/products.component.scss

@@ -12,7 +12,12 @@
             display: flex;
             flex-wrap: nowrap;
             justify-content: space-between;
-            flex-direction: row;
+            flex-direction: column;
+
+            label {
+                margin: 8px;
+                font-size: 14px;
+            }
         }
 
         &__items {
@@ -66,4 +71,17 @@
             bottom: 0;
         }
     }
-}
+}
+
+// :host ::ng-deep {
+//     .p-toast-message-custom {
+//         background-color: #E1CFE7;
+//         border: solid #8A427A;
+//         border-width: 0 0 0 6px;
+//         color: #2c1e30;
+
+//         .p-toast-icon-close {
+//             color: #2c1e30;
+//         }
+//     }
+// }

angular/src/app/pages/products/products.component.ts

@@ -4,45 +4,100 @@ import { v4 as uuidv4 } from 'uuid';
 import { DialogService } from 'primeng/dynamicdialog';
 import { ProductModalComponent } from 'src/app/components/product-modal/product-modal.component';
 import { WpJsonService } from 'src/app/services/wp-json.service';
+import { MessageService } from 'primeng/api';
+import { lastValueFrom } from 'rxjs';
+import { CartService } from 'src/app/services/cart.service';
+import { CookiesService } from 'src/app/services/cookies.service';
 
 @Component({
   selector: 'app-products',
   templateUrl: './products.component.html',
-  styleUrls: ['./products.component.scss']
+  styleUrls: ['./products.component.scss'],
+  providers: [MessageService]
 })
 export class ProductsComponent implements OnInit {
   public products!: Product[];
-  public groups: Group[] = [
+  public groups: Group[] = [];
-    {
-      id: uuidv4(),
-      label: 'Все'
-    }
-  ];
   public modifiersGroups!: ModifiersGroup[];
   public modifiers!: Modifier[];
-  public selectedGroup: Group = this.groups[0];
+  public selectedGroup!: Group;
+  public terminalList!: any;
+  public selectedTerminal!: any;
 
   constructor(
     public dialogService: DialogService,
-    private wpJsonService: WpJsonService
+    private wpJsonService: WpJsonService,
+    private messageService: MessageService,
+    public cartService: CartService,
+    private cookiesService: CookiesService,
   ) { }
 
-  ngOnInit(): void {
+  async ngOnInit() {
+    await this.getTerminalList()
     this.getData()
+    this.messageService.add({
+      severity:'info',
+      summary: 'В одном заказе могут быть товары только из выбранного пункта выдачи',
+      life: 5000
+    });
+    setTimeout(() => {
+      this.confirmTerminalList()
+    }, 0)
+  }
+
+  async getTerminalList() {
+    const terminalList = (await lastValueFrom(
+      this.wpJsonService.getTerminalList()
+    ))
+    this.terminalList = this.toTreeJson(this.keyValue(terminalList), terminalList)
+    this.selectedTerminal = JSON.parse(this.cookiesService.getItem('selectedTerminal') || 'null') || this.terminalList[0]
+    this.cartService.changeTerminal(this.selectedTerminal)
+  }
+
+  confirmTerminalList() {
+    if (this.cartService.cartCount) return
+    this.messageService.clear();
+    this.messageService.add({ key: 'c', sticky: true, severity: 'warn', summary: 'Вам подходит пункт выдачи?', detail: this.selectedTerminal.label });
+  }
+
+  onConfirm() {
+    this.messageService.add({
+      severity:'info',
+      summary: 'В одном заказе могут быть товары только из выбранного пункта выдачи',
+      life: 5000
+    });
+    this.messageService.clear('c');
+  }
+
+  onReject() {
+    this.messageService.clear('c');
+    this.messageService.add({
+      severity:'info',
+      summary: 'Выберите пункт выдачи. В одном заказе могут быть товары только из выбранного пункта.',
+      life: 6000
+    });
   }
 
   getData() {
-    this.wpJsonService.getAllData().subscribe({
+    this.wpJsonService.getAllData(`${this.selectedTerminal.label}${this.selectedTerminal.id}`).subscribe({
       next: (value) => {
         this.products = value.products
-        this.groups = [...this.groups, ...value.groups]
+        this.groups = value.groups
+        this.groups.unshift(
+          {
+            id: uuidv4(),
+            label: 'Все'
+          }
+        )
+        this.selectedGroup = this.groups[0]
         this.modifiersGroups = value.modifiers_groups
         this.modifiers = value.modifiers
-      } 
+      }
     })
   }
 
-  filterByGroup() {
+  filterByGroup() {    
+    if (!this.selectedGroup) return []
     if (this.selectedGroup.label === 'Все') return this.products
     return this.products.filter((product) => product.groupId === this.selectedGroup.id)
   }
@@ -77,4 +132,41 @@ export class ProductsComponent implements OnInit {
 
   }
 
+  changeTerminal() {
+    setTimeout(() => {
+      this.getData()
+      this.cartService.changeTerminal(this.selectedTerminal)
+    }, 0);
+  }
+
+  onGroupUnselect(event: any) {    
+    setTimeout(() => {
+      this.selectedGroup = event.node      
+    }, 0);
+  }
+
+  onTerminalUnselect(event: any) {    
+    setTimeout(() => {
+      this.selectedTerminal = event.node
+      this.cartService.changeTerminal(this.selectedTerminal)
+    }, 0);
+  }
+
+  keyValue(obj: Object) {
+    return Object.keys(obj)
+  }
+
+  toTreeJson(array: Array<string>, terminalList: any) {
+    let treeJson: Object[] = []
+    for (const key of array) {
+      treeJson.push(
+        {
+          label: key,
+          id: terminalList[key]
+        }
+      )
+    }
+    return treeJson
+  }
+
 }

angular/src/styles.scss

@@ -100,3 +100,52 @@ input::-webkit-date-and-time-value {
 .p-tree .p-tree-container .p-treenode .p-treenode-content {
     padding: 0;
 }
+
+.text-center {
+    text-align: center;
+}
+
+.grid.p-fluid {
+    display: flex;
+    justify-content: space-between;
+}
+
+.grid.p-fluid {
+    .col-6 {
+        flex: 0 0 auto;
+        padding: 0.5rem;
+        width: 50%;
+    }
+
+    button {
+        margin: 0;
+        cursor: pointer;
+        -webkit-user-select: none;
+        user-select: none;
+        align-items: center;
+        vertical-align: bottom;
+        text-align: center;
+        overflow: hidden;
+        position: relative;
+        border-radius: 5px;
+        border: none;
+        padding: 8px 0;
+        color: #fff;
+        font-weight: 600;
+
+        &.p-button-success {
+            background: #22C55E;
+        }
+
+        &.p-button-secondary {
+            background: #64748B;
+        }
+    }
+}
+
+@media screen and (max-width: 960px) {
+    .grid.p-fluid button {
+        width: 100%;
+        margin-bottom: .5rem;
+    }
+}