diff --git a/angular/src/app/pages/products/products.component.html b/angular/src/app/pages/products/products.component.html
index 3d92d4d..4683a93 100644
--- a/angular/src/app/pages/products/products.component.html
+++ b/angular/src/app/pages/products/products.component.html
@@ -1,7 +1,13 @@
+
-
-
+
+
+
+
@@ -14,4 +20,25 @@
-
+
+
+
+
+
+
{{message.summary}}
+
{{message.detail}}
+
+
+
+
+
+
\ No newline at end of file
diff --git a/angular/src/app/pages/products/products.component.scss b/angular/src/app/pages/products/products.component.scss
index 83aa922..c2f72e8 100644
--- a/angular/src/app/pages/products/products.component.scss
+++ b/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;
}
}
-}
\ No newline at end of file
+}
+
+// :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;
+// }
+// }
+// }
\ No newline at end of file
diff --git a/angular/src/app/pages/products/products.component.ts b/angular/src/app/pages/products/products.component.ts
index bdb6934..2a86031 100644
--- a/angular/src/app/pages/products/products.component.ts
+++ b/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[] = [
- {
- id: uuidv4(),
- label: 'Все'
- }
- ];
+ public groups: Group[] = [];
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, terminalList: any) {
+ let treeJson: Object[] = []
+ for (const key of array) {
+ treeJson.push(
+ {
+ label: key,
+ id: terminalList[key]
+ }
+ )
+ }
+ return treeJson
+ }
+
}
diff --git a/angular/src/styles.scss b/angular/src/styles.scss
index 32163cf..f08a98f 100644
--- a/angular/src/styles.scss
+++ b/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;
+ }
+}
\ No newline at end of file