<div class="table" id="table">
<div class="presenter-btn-cont">
<button *ngIf="!isPresenter" class="presenter-btn" mat-raised-button (click)="addPresenter()">Add presenter</button>
<button *ngIf="isPresenter" class="presenter-btn" mat-raised-button (click)="removePresenter()">Remove presenter</button>
</div>
<div *ngFor="let shelf of layout; let i = index;" class="shelf" id="shelf_{{i}}">
<div *ngFor="let ind of shelf; let j = index;" class="cell" id="cell_{{i}}_{{j}}">
<div *ngIf="ind !== null" cdkDropList cdkDropListOrientation="vertical" id="_r{{i}}c{{ind}}"
class="cell-list" (cdkDropListDropped)="selectedBrand === posm_structure[j][i] ? drop($event, i, ind, posm_structure[j][i]) : null"
[cdkDropListData]="container[selectedCabinet][i][ind]" (change)="fixHeight()">
{{selectedBrand}}{{posm_structure[j][i]}}
<div *ngIf="container[selectedCabinet][i][ind].length === 0">
<div class="pic-wrap example-box cell-box">
<div class="title-pic">{{posm_structure[j][i] | titlecase}}</div>
<img class="empty-posm-pic"
[ngStyle]="{
'width': isPresenter && i === 0 ? '70px' : '260px',
'height': isPresenter && i === 0 ? '90px' : null
}"
[src]="isPresenter && i === 0 ? '../../../static/images/empty.png' : '../../../static/images/empty-posm.png'" alt="Empty position" title="Empty position">
</div>
<div class="delete empty-delete">
<span>-</span>
<span>{{i}}{{layout.length}}</span>
</div>
</div>
<div *ngIf="container[selectedCabinet][i][ind].length === 1" cdkDrag>
<div class="pic-wrap example-box cell-box">
<div class="title-pic">{{posm_structure[j][i] | titlecase}}</div>
<img class="posm-pic"
[ngStyle]="{
'width': isPresenter && i === 0 ? '70px' : '260px',
'height': isPresenter && i === 0 ? '90px' : null
}"
src="{{container[selectedCabinet][i][ind][0].pictureSmall}}"
alt="{{container[selectedCabinet][i][ind][0].title}}"
title="{{container[selectedCabinet][i][ind][0].title}}">
</div>
<div class="delete full-delete">
<span (click)="deleteCell(i, ind, posm_structure[j][i])">Delete</span>
<span>{{i}}{{layout.length}}</span>
</div>
</div>
<div *ngIf="container[selectedCabinet][i][ind].length > 1" cdkDrag>
<div class="example-box cell-box multiple-sku" (click)="callCellModal(i, ind)">
<img
[ngStyle]="{
'width': isPresenter && i === 0 ? '70px' : '260px',
'height': isPresenter && i === 0 ? '90px' : null
}"
src="{{container[selectedCabinet][i][ind][0].pictureSmall}}"
alt="{{container[selectedCabinet][i][ind][0].title}}"
title="{{container[selectedCabinet][i][ind][0].title}}" class="transparent">
<div class="centered-text">+{{container[selectedCabinet][i][ind].length}}</div>
</div>
<div class="delete full-delete">
<span (click)="deleteCell(i, ind, posm_structure[j][i])">Delete</span>
<span>{{i}}{{layout.length}}</span>
</div>
</div>
</div>
<div *ngIf="ind === null" cdkDropList cdkDropListOrientation="vertical" id="_r{{i}}c{{ind}}"
class="cell-list blocked-list" (change)="fixHeight()" (cdkDropListDropped)="drop($event)"></div>
</div>
</div>
</div>
public addPresenter() {
this.layout.push([0])
this.container[this.selectedCabinet].unshift([[]])
this.posm_structure[0].unshift('presenter')
this.isPresenter = true
}
public removePresenter() {
this.deleteCell(0, 0, 'presenter')
this.layout.shift()
this.container[this.selectedCabinet].shift()
this.posm_structure[0].shift()
this.isPresenter = false
}
drop(event, row = -1, col = -1, structure = '') {
debugger
if (row !== -1) {
if (structure === 'presenter') {
this.arrOfPosm[0][0] = event.previousContainer.data[1].title
} else {
if (this.arrOfPosm[0][1].length >= 2) {
this.arrOfPosm[0][1][col][(this.isPresenter ? row - 1 : row)] = event.previousContainer.data[1].title
} else {
debugger
this.arrOfPosm[0][1][col].splice((this.isPresenter ? row - 1 : row), 1, event.previousContainer.data[1].title)
}
}
}
if (structure.toLowerCase() === this.presenterTitle.toLowerCase()) {
this.showPresenterTitle = false
}
if (row > -1) {
this.addedRows.push(row)
}
event.previousIndex = event.item.data ;
if (row === -1 && col === -1) {
return;
}
if (this.selectedCabinet in this.historyUndo && this.historyUndo[this.selectedCabinet].length) {
this.historyUndo[this.selectedCabinet].push(cloneDeep(this.container[this.selectedCabinet]));
}
else {
this.historyUndo[this.selectedCabinet] = [cloneDeep(this.container[this.selectedCabinet])];
}
if (event.previousContainer === event.container && event.item.data !== undefined) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else if (event.previousContainer.id === 'sku_list') {
const itemToMove = event.previousContainer.data[event.previousIndex];
const currentTitle = itemToMove.title;
if (currentTitle === 'Any BAT') {
this.fillCellWithAllSKU(row, col);
} else {
let num = 0;
for (const item of event.container.data) {
if (item.title === currentTitle) {
num++;
}
}
if (num === 0) {
debugger
const brandInfo = this.getBrandSubbrandBySKU(this.posmTitle);
this.container[this.selectedCabinet][row][col][0] = this.getFormattedSKU(brandInfo[0], brandInfo[1], this.posmTitle);
}
}
}
}
}
Когда добавляю новый элемент в массив (unshift, важно добавлять элемент в начало массива), и после этого делаю drop в последнюю ячейку, картинка становится в предпоследнюю т.к row в методе drop приходит 9 как на предпоследний элемент так и на последний, почему так происходит?
Средний
Средний
Средний
Простой
