parent
5a5acb53fd
commit
266601e59b
@ -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>
|
||||
@ -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;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@ -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<string>, terminalList: any) {
|
||||
let treeJson: Object[] = []
|
||||
for (const key of array) {
|
||||
treeJson.push(
|
||||
{
|
||||
label: key,
|
||||
id: terminalList[key]
|
||||
}
|
||||
)
|
||||
}
|
||||
return treeJson
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user