Skip to content

Commit

Permalink
Merge pull request #7256 from surveyjs/issue/7243-Dynamic-Matrix---No…
Browse files Browse the repository at this point in the history 
…-space-between-the-last-and-total-rows

#7243 Dynamic Matrix - No space between the last and total rows
  • Loading branch information
@andrewtelnov
andrewtelnov authored Oct 30, 2023
2 parents 61ba14c + d6d366d commit 9cf269a
Show file tree
Hide file tree
Showing 7 changed files with 199 additions and 11 deletions.
13 changes: 5 additions & 8 deletions src/knockout/templates/question-matrixdynamic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@
<td
data-bind="css: $data.className, style: { minWidth: $data.minWidth, width: $data.width }, attr: { 'data-responsive-title': headers, title: $data.getTitle(), colspan: $data.colSpans }, event: {focusin: $data.focusIn }"
>
<!-- ko if: $data.matrix -->
<div data-bind="visible: question.isVisible, css: $parentContext.question.cssClasses.cellQuestionWrapper">
<!-- ko if: $data.isOtherChoice -->
<div data-bind="css: question.getCommentAreaCss(true), template: { name: 'survey-other', data: {'question': question, 'visible': true } }"></div>
Expand Down Expand Up @@ -79,6 +80,7 @@
<!-- /ko -->
<!-- /ko -->
</div>
<!-- /ko -->
</td>
</script>
<script type="text/html" id="survey-matrixtable">
Expand Down Expand Up @@ -170,14 +172,9 @@
<tfoot>
<tr>
<!-- ko foreach: question.koTable().footerRow.cells -->
<!-- ko if: $data.hasQuestion -->
<!-- ko template: { name: 'survey-matrixcell', afterRender: function(els) { $data.matrix.koCellAfterRender(els, $data); } } --><!-- /ko -->
<!-- /ko -->
<!-- ko if: $data.hasTitle -->
<td>
<!-- ko template: { name: 'survey-string', data: $data.locTitle } --><!-- /ko -->
</td>
<!-- /ko -->

<!-- ko template: { name: 'survey-matrixcell', afterRender: function(els) { $data.matrix && $data.matrix.koCellAfterRender(els, $data); } } --><!-- /ko -->

<!-- /ko -->
</tr>
</tfoot>
Expand Down
4 changes: 2 additions & 2 deletions src/question_matrixdropdownrendered.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -449,7 +449,7 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
this.footerRow.cells.push(this.createHeaderCell(null));
}
if (this.hasActionCellInRows("start")) {
this.footerRow.cells.push(this.createHeaderCell(null));
this.footerRow.cells.push(this.createHeaderCell(null, "action"));
}
if (this.matrix.hasRowText) {
this.footerRow.cells.push(
Expand All @@ -471,7 +471,7 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
}
}
if (this.hasActionCellInRows("end")) {
this.footerRow.cells.push(this.createHeaderCell(null));
this.footerRow.cells.push(this.createHeaderCell(null, "action"));
}
}
protected buildRows() {
Expand Down
2 changes: 1 addition & 1 deletion src/react/reactquestion_matrixdropdownbase.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ export class SurveyQuestionMatrixDropdownBase extends SurveyQuestionElementBase

return (
<React.Fragment key={key}>
<MatrixRow model={row} parentMatrix={this.question}>{matrixrow}</MatrixRow>
{(reason == "row-footer") ? <tr>{matrixrow}</tr> : <MatrixRow model={row} parentMatrix={this.question}>{matrixrow}</MatrixRow>}
</React.Fragment>
);
}
Expand Down
21 changes: 21 additions & 0 deletions tests/markup/etalon_matrixdynamic.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,27 @@ registerMarkupTests(
before: () => StylesManager.applyTheme("defaultV2"),
after: () => StylesManager.applyTheme("default"),
snapshot: "matrixdynamic-defaultV2"
},
{
name: "Test matrixdynamic question (defaultV2) markup with totals",
json: {
"elements": [
{
"type": "matrixdynamic",
"titleLocation": "hidden",
"name": "question1",
"columns": [
{
"name": "Column 1",
"totalType": "count",
"totalFormat": "Count: {0}",
}
]
}
]
},
removeIds: true,
snapshot: "matrixdynamic-totals"
}
]
);
Expand Down
143 changes: 143 additions & 0 deletions tests/markup/snapshots/matrixdynamic-totals.snap.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
<div>
<div>
<table class="sv_q_matrix_dynamic">
<thead>
<tr>
<th class="sv_matrix_cell_header sv_matrix_cell--dropdown">
<span class="sv-string-viewer">Column 1</span>
</th>
<td class="sv_matrix_cell_header sv_matrix_cell--action">
</td>
</tr>
</thead>
<tbody>
<tr class="sv_matrix_row" data-sv-drop-target-matrix-row="testid0row1">
<td class="sv_matrix_cell" colspan="1" data-responsive-title="Column 1" title="Column 1">
<div>
<div>
<div class="sv_select_wrapper">
<div aria-controls="testid0row1cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="Column 1" aria-required="false" class="sv_q_dropdown_control" role="combobox">
<div class="sv_q_dropdown__value">
<input aria-controls="testid0row1cell0i_list" aria-expanded="false" aria-label="Column 1" autocomplete="off" class="sv_q_dropdown__filter-string-input" inputmode="text" placeholder="Select..." role="combobox" type="text">
</div>
<div class="sv_q_dropdown_clean-button" style="display:none;">
<svg aria-label="Clear" class="sv_q_dropdown_clean-button-svg sv-svg-icon" role="img">
<use xlink:href="#icon-clear_16x16" class="">
</use>
<title class="">Clear</title>
</svg>
</div>
</div>
<div>
<div class="sv-dropdown-popup sv-popup sv-popup--dropdown sv-single-select-list" style="display:none;" tabindex="-1">
<div class="sv-popup__container">
<div class="sv-popup__shadow">
<div class="sv-popup__body-content">
<div class="sv-popup__scrolling-content">
<div class="sv-popup__content">
<div class="sv-list__container">
<div class="sv-list__empty-container">
<div aria-label="No data to display" class="sv-list__empty-text">No data to display</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="sv_matrix_cell sv_matrix_cell_actions" colspan="1" data-responsive-title="" title="">
<div class="sv-action-bar sv-action-bar--default-size-mode">
<div class="sv-action">
<div class="sv-action__content">
<button class="sv_matrix_dynamic_button" type="button">
<span class="sv-string-viewer">Remove</span>
<span>
</span>
</button>
</div>
</div>
</div>
</td>
</tr>
<tr class="sv_matrix_row" data-sv-drop-target-matrix-row="testid0row3">
<td class="sv_matrix_cell" colspan="1" data-responsive-title="Column 1" title="Column 1">
<div>
<div>
<div class="sv_select_wrapper">
<div aria-controls="testid0row3cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="Column 1" aria-required="false" class="sv_q_dropdown_control" role="combobox">
<div class="sv_q_dropdown__value">
<input aria-controls="testid0row3cell0i_list" aria-expanded="false" aria-label="Column 1" autocomplete="off" class="sv_q_dropdown__filter-string-input" inputmode="text" placeholder="Select..." role="combobox" type="text">
</div>
<div class="sv_q_dropdown_clean-button" style="display:none;">
<svg aria-label="Clear" class="sv_q_dropdown_clean-button-svg sv-svg-icon" role="img">
<use xlink:href="#icon-clear_16x16" class="">
</use>
<title class="">Clear</title>
</svg>
</div>
</div>
<div>
<div class="sv-dropdown-popup sv-popup sv-popup--dropdown sv-single-select-list" style="display:none;" tabindex="-1">
<div class="sv-popup__container">
<div class="sv-popup__shadow">
<div class="sv-popup__body-content">
<div class="sv-popup__scrolling-content">
<div class="sv-popup__content">
<div class="sv-list__container">
<div class="sv-list__empty-container">
<div aria-label="No data to display" class="sv-list__empty-text">No data to display</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="sv_matrix_cell sv_matrix_cell_actions" colspan="1" data-responsive-title="" title="">
<div class="sv-action-bar sv-action-bar--default-size-mode">
<div class="sv-action">
<div class="sv-action__content">
<button class="sv_matrix_dynamic_button" type="button">
<span class="sv-string-viewer">Remove</span>
<span>
</span>
</button>
</div>
</div>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="sv_matrix_cell" colspan="1" data-responsive-title="Column 1" title="Column 1">
<div>
<div>Count: 0</div>
</div>
</td>
<td class="sv_matrix_cell_header sv_matrix_cell--action" colspan="1" data-responsive-title="" title="">
</td>
</tr>
</tfoot>
</table>
</div>
<div class="sv_q_footer">
<button class="sv_matrix_dynamic_button" type="button">
<span class="sv-string-viewer">Add Row</span>
<span>
</span>
</button>
</div>
</div>
Binary file added visualRegressionTests/tests/defaultV2/etalons/matrixdynamic-with-totals.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
27 changes: 27 additions & 0 deletions visualRegressionTests/tests/defaultV2/matrixdynamic.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -275,4 +275,31 @@ frameworks.forEach(framework => {
await takeElementScreenshot("matrixdynamic-show-in-multiple-columns.png", matrixdynamicRoot, t, comparer);
});
});
test("Check Matrixdynamic with totals", async (t) => {
await wrapVisualTest(t, async (t, comparer) => {
await t.resizeWindow(1280, 1100);
await initSurvey(framework, {
showQuestionNumbers: "off",
elements: [
{
type: "matrixdynamic",
name: "orderList",
addRowText: "Add new item",
columns: [
{
name: "phone_model",
title: "Phone model",
totalType: "count",
totalFormat: "Items count: {0}",
}
]
}
]
});

const matrixdynamicRoot = Selector(".sd-question");
await resetFocusToBody();
await takeElementScreenshot("matrixdynamic-with-totals.png", matrixdynamicRoot, t, comparer);
});
});
});

0 comments on commit 9cf269a

Please sign in to comment.