Skip to content

Commit 8c65025

Browse files
dmitry-kurmanovdmitry-kurmanov
authored
PR: Feature/creator presets dnd matrices expand (#10541)
* work for the surveyjs/survey-creator#7004
1 parent d150bda commit 8c65025

File tree

2 files changed

+168
-18
lines changed

2 files changed

+168
-18
lines changed

‎packages/survey-core/src/dragdrop/matrix-rows.ts‎

Lines changed: 54 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -39,27 +39,30 @@ export class DragDropMatrixRows extends DragDropCore<QuestionMatrixDynamicModel>
3939
}
4040

4141
const matrices = [];
42-
function fillMatricies(questions: Question[]) {
43-
const ms = questions.filter(q => q.isDescendantOf("matrixdynamic") && (q as QuestionMatrixDynamicModel).allowRowReorder);
44-
ms.forEach((m: QuestionMatrixDynamicModel) => {
45-
matrices.push(m);
46-
if (m.detailPanelMode !== "none") {
47-
m.visibleRows.forEach(r => {
48-
if (r.isDetailPanelShowing) {
49-
fillMatricies(r.questions);
50-
}
51-
});
52-
}
53-
});
54-
}
55-
5642
if (this.survey.onMatrixRowDragOver.isEmpty) {
5743
matrices.push(this.parentElement);
5844
} else {
59-
fillMatricies(this.survey.getAllQuestions());
45+
this.fillMatricies(this.survey.getAllQuestions(), matrices);
6046
}
47+
this.fillMatrixRowMap(matrices);
48+
this.fromIndex = this.parentElement.visibleRows.indexOf(this.draggedElement);
49+
}
6150

62-
this.matrixRowMap = {};
51+
private fillMatricies(questions: Question[], matrices: QuestionMatrixDynamicModel[]) {
52+
const ms = questions.filter(q => q.isDescendantOf("matrixdynamic") && (q as QuestionMatrixDynamicModel).allowRowReorder);
53+
ms.forEach((m: QuestionMatrixDynamicModel) => {
54+
matrices.push(m);
55+
if (m.detailPanelMode !== "none") {
56+
m.visibleRows.forEach(r => {
57+
if (r.isDetailPanelShowing) {
58+
this.fillMatricies(r.questions, matrices);
59+
}
60+
});
61+
}
62+
});
63+
}
64+
65+
private fillMatrixRowMap(matrices: QuestionMatrixDynamicModel[]) {
6366
matrices.forEach(matrix => {
6467
matrix.visibleRows.forEach(row => {
6568
this.matrixRowMap[row.id] = { row, matrix };
@@ -68,8 +71,6 @@ export class DragDropMatrixRows extends DragDropCore<QuestionMatrixDynamicModel>
6871
this.matrixRowMap[matrix.id] = { row: matrix, matrix };
6972
}
7073
});
71-
72-
this.fromIndex = this.parentElement.visibleRows.indexOf(this.draggedElement);
7374
}
7475

7576
private get shortcutClass(): string {
@@ -140,6 +141,34 @@ export class DragDropMatrixRows extends DragDropCore<QuestionMatrixDynamicModel>
140141
return clientY >= rect.y + rect.height / 2;
141142
}
142143

144+
private expandCollapseTimer = null;
145+
private expandCollapseHandlingRow = null;
146+
protected doDragOver() {
147+
if (this.dropTarget && typeof this.dropTarget.isDetailPanelShowing !== "undefined" && this.dropTarget.isDetailPanelShowing === false) {
148+
const row = this.dropTarget;
149+
const matrix = row.data;
150+
const renderedRow = matrix.renderedTable.rows.filter(r => r.row == row)[0];
151+
const startAction = renderedRow?.cells[1]?.item?.value?.actions?.filter(a => a.id == "show-detail")[0];
152+
const endAction = renderedRow?.cells[renderedRow.cells.length - 1]?.item?.value?.actions?.filter(a => a.id == "show-detail")[0];
153+
154+
if ((startAction?.visible || endAction?.visible)) {
155+
156+
if (this.expandCollapseHandlingRow !== row.id) {
157+
this.expandCollapseHandlingRow = row.id;
158+
this.clearExpandCollapseTimeout();
159+
this.expandCollapseTimer = setTimeout(()=>{
160+
const matrices = [];
161+
row.showDetailPanel();
162+
this.fillMatricies([matrix], matrices);
163+
this.fillMatrixRowMap(matrices);
164+
}, 500);
165+
}
166+
} else {
167+
this.clearExpandCollapseTimeout();
168+
}
169+
}
170+
}
171+
143172
private removeGhost() {
144173
const lastRenderedRows = this.lastDropTargetParentElement.renderedTable.rows;
145174
const draggedRenderedRowIndex = lastRenderedRows.indexOf(this.draggedRenderedRow);
@@ -221,5 +250,12 @@ export class DragDropMatrixRows extends DragDropCore<QuestionMatrixDynamicModel>
221250
_body.style.userSelect = this.restoreUserSelectValue || "initial";
222251
}
223252
super.clear();
253+
this.clearExpandCollapseTimeout();
254+
}
255+
256+
private clearExpandCollapseTimeout() {
257+
clearTimeout(this.expandCollapseTimer);
258+
this.expandCollapseTimer = null;
259+
this.expandCollapseHandlingRow = null;
224260
}
225261
}

‎packages/survey-core/tests/dragDropMatrixTests.ts‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,3 +51,117 @@ QUnit.test("matrix.lockedRowCount", function (assert) {
5151
assert.equal(dd.canInsertIntoThisRow(<any>rows[0]), false, "row0");
5252
assert.equal(dd.canInsertIntoThisRow(<any>rows[1]), true, "row1");
5353
});
54+
55+
QUnit.test("doDragOver", function (assert) {
56+
const done = assert.async();
57+
58+
const json = {
59+
"pages": [
60+
{
61+
"name": "page1",
62+
"elements": [
63+
{
64+
"type": "matrixdynamic",
65+
"name": "question0",
66+
"columns": [
67+
{
68+
"name": "Column 1"
69+
},
70+
{
71+
"name": "Column 2"
72+
},
73+
{
74+
"name": "Column 3"
75+
}
76+
],
77+
"choices": [
78+
1,
79+
2,
80+
3,
81+
4,
82+
5
83+
],
84+
"allowRowReorder": true
85+
},
86+
{
87+
"type": "matrixdynamic",
88+
"name": "question1",
89+
"columns": [
90+
{
91+
"name": "Column 1"
92+
},
93+
{
94+
"name": "Column 2"
95+
},
96+
{
97+
"name": "Column 3"
98+
}
99+
],
100+
"detailElements": [
101+
{
102+
"type": "matrixdynamic",
103+
"name": "question2",
104+
"columns": [
105+
{
106+
"name": "Column 1"
107+
},
108+
{
109+
"name": "Column 2"
110+
},
111+
{
112+
"name": "Column 3"
113+
}
114+
],
115+
"choices": [
116+
1,
117+
2,
118+
3,
119+
4,
120+
5
121+
],
122+
"allowRowReorder": true
123+
}
124+
],
125+
"detailPanelMode": "underRow",
126+
"choices": [
127+
1,
128+
2,
129+
3,
130+
4,
131+
5
132+
],
133+
"allowRowReorder": true
134+
}
135+
]
136+
}
137+
],
138+
"headerView": "advanced"
139+
};
140+
const survey = new SurveyModel(json);
141+
const ddHelper = new DragDropMatrixRows(survey);
142+
assert.equal(Object.keys(ddHelper["matrixRowMap"]).length, 0, "initial state");
143+
144+
const question0: QuestionMatrixDynamicModel = <QuestionMatrixDynamicModel>(
145+
survey.getQuestionByName("question0")
146+
);
147+
const question1: QuestionMatrixDynamicModel = <QuestionMatrixDynamicModel>(
148+
survey.getQuestionByName("question1")
149+
);
150+
// need to add show-detail action to every row
151+
let draggedRow = question0.visibleRows[0];
152+
153+
const innerRow = question1.visibleRows[0];
154+
// innerRow.showDetailPanel();
155+
//let dropRow = innerRow["detailPanelValue"].questions[0].visibleRows[0];
156+
let dropRow = innerRow;
157+
158+
ddHelper["parentElement"] = question1;
159+
ddHelper.draggedElement = draggedRow;
160+
ddHelper.dropTarget = dropRow;
161+
ddHelper["doDragOver"]();
162+
163+
setTimeout(() => {
164+
assert.equal(Object.keys(ddHelper["matrixRowMap"]).length, 4, "matrices prepared for drag");
165+
done();
166+
}, 2000);
167+
});

0 commit comments

Comments
 (0)