Feature/totals redesign (#7789)

* Resolved #7687 - Add an option to align matrix column totals * Resolved #7768 - Matrix Total Row * Work for #7687 - Add an option to align matrix column totals - added some smartness * Fixed lint * Work for #7687 Add an option to align matrix column totals - added u-test * Work for #7768 - Matrix Total Row - added vr-test * Fixed u-test * Work for #7768 - Matrix Total Row - fixed etalons * Work for #7687 - Add an option to align matrix column totals - fixed markup test * Updated etalons * Work for #7768 - Matrix Total Row - fixed angular + fixed total row top padding * Updated etalons --------- Co-authored-by: tsv2013 <tsv2013@noreply.github.com>
surveyjs · Feb 3, 2024 · 8928a4e · 8928a4e
1 parent ff86d68
commit 8928a4e
Show file tree

Hide file tree

Showing 15 changed files with 345 additions and 72 deletions.
diff --git a/packages/survey-angular-ui/src/questions/matrixdropdowncell.component.html b/packages/survey-angular-ui/src/questions/matrixdropdowncell.component.html
@@ -8,7 +8,7 @@
       <ng-template [component]="{ name: panelComponentName, data: panelComponentData }"></ng-template>
     </ng-container>
     <div *ngIf="cell.isErrorsCell && cell.question?.hasVisibleErrors" [element]="cell.question" sv-ng-errors></div>
-    <div *ngIf="cell.hasQuestion" [class]="question.cssClasses.cellQuestionWrapper"
+    <div *ngIf="cell.hasQuestion" [class]="cell.cellQuestionWrapperClassName"
       [visible]="cell.question.isVisible">
       <ng-container *ngIf="!cell.isChoice && cell.question.isDefaultRendering()">
         <ng-template

diff --git a/packages/survey-vue3-ui/src/MatrixDropdownCellComp.vue b/packages/survey-vue3-ui/src/MatrixDropdownCellComp.vue
@@ -25,7 +25,7 @@
     ></component>
     <div
       v-if="cell.hasQuestion"
-      :class="question.cssClasses.cellQuestionWrapper"
+      :class="cell.cellQuestionWrapperClassName"
       v-show="isVisible"
     >
       <component

diff --git a/src/defaultV2-theme/blocks/sd-table.scss b/src/defaultV2-theme/blocks/sd-table.scss
@@ -161,6 +161,7 @@
   &:not(.sd-table__cell--empty):not(.sd-table__cell--actions):not(:empty) {
     min-width: calcSize(15);
   }
+
   .sd-item {
     text-align: initial;
   }
@@ -253,6 +254,7 @@
 
 .sd-table__cell--footer {
   text-align: right;
+  padding-top: calcSize(1);
 }
 
 .sd-table__cell--footer-total {
@@ -719,6 +721,30 @@
   }
 }
 
+.sd-table__cell--footer {
+  .sd-table__question-wrapper--expression {
+    .sd-expression {
+      padding: calcSize(1.5) calcSize(2);
+      border-bottom: 1px solid $border-light;
+      font-size: calcFontSize(1);
+      font-weight: 600;
+      line-height: calcSize(3);
+    }
+  }
+
+  .sd-table__question-wrapper--left {
+    text-align: start;
+  }
+
+  .sd-table__question-wrapper--center {
+    text-align: center;
+  }
+
+  .sd-table__question-wrapper--right {
+    text-align: end;
+  }
+}
+
 .sd-table.sd-matrixdynamic {
   table-layout: auto;
 }
diff --git a/src/knockout/templates/question-matrixdynamic.html b/src/knockout/templates/question-matrixdynamic.html
@@ -51,7 +51,7 @@
     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">
+    <div data-bind="visible: question.isVisible, css: cellQuestionWrapperClassName">
       <!-- ko if: $data.isOtherChoice -->
         <div data-bind="css: question.getCommentAreaCss(true), template: { name: 'survey-other', data: {'question': question, 'visible': true } }"></div>
       <!-- /ko -->

diff --git a/src/question_matrixdropdownbase.ts b/src/question_matrixdropdownbase.ts
@@ -119,6 +119,9 @@ export class MatrixDropdownCell {
   public set value(value: any) {
     this.question.value = value;
   }
+  public getQuestionWrapperClassName(className: string): string {
+    return className;
+  }
   public runCondition(values: HashTable<any>, properties: HashTable<any>) {
     this.question.runCondition(values, properties);
   }
@@ -160,6 +163,22 @@ export class MatrixDropdownTotalCell extends MatrixDropdownCell {
     this.question.unlocCalculation();
     this.question.runIfReadOnly = true;
   }
+  public getQuestionWrapperClassName(className: string): string {
+    let result = super.getQuestionWrapperClassName(className);
+    if (!result) {
+      return result;
+    }
+    if (this.question.expression && this.question.expression != "''") {
+      result += " " + className + "--expression";
+    }
+    let alignment = this.column.totalAlignment;
+    if (alignment === "auto") {
+      if (this.column.cellType === "dropdown") {
+        alignment = "left";
+      }
+    }
+    return result + " " + className + "--" + alignment;
+  }
   public getTotalExpression(): string {
     if (!!this.column.totalExpression) return this.column.totalExpression;
     if (this.column.totalType == "none") return "''";

diff --git a/src/question_matrixdropdowncolumn.ts b/src/question_matrixdropdowncolumn.ts
@@ -31,7 +31,7 @@ export interface IMatrixColumnOwner extends ILocalizableOwner {
   getCellType(): string;
   getCustomCellType(column: MatrixDropdownColumn, row: MatrixDropdownRowModelBase, cellType: string): string;
   onColumnCellTypeChanged(column: MatrixDropdownColumn): void;
-  getCellAriaLabel(rowTitle:string, columnTitle:string):string;
+  getCellAriaLabel(rowTitle: string, columnTitle: string): string;
 }
 
 function onUpdateSelectBaseCellQuestion(
@@ -223,7 +223,7 @@ export class MatrixDropdownColumn extends Base
     return true;
   }
   public get isColumnVisible(): boolean {
-    if(this.isDesignMode) return true;
+    if (this.isDesignMode) return true;
     return this.visible && this.hasVisibleCell;
   }
   /**
@@ -245,29 +245,29 @@ export class MatrixDropdownColumn extends Base
   }
   public getVisibleMultipleChoices(): Array<ItemValue> {
     const choices = this.templateQuestion.visibleChoices;
-    if(!Array.isArray(choices)) return [];
-    if(!Array.isArray(this._visiblechoices)) return choices;
+    if (!Array.isArray(choices)) return [];
+    if (!Array.isArray(this._visiblechoices)) return choices;
     const res = new Array<ItemValue>();
-    for(let i = 0; i < choices.length; i ++) {
+    for (let i = 0; i < choices.length; i++) {
       const item = choices[i];
-      if(this._visiblechoices.indexOf(item.value) > -1) res.push(item);
+      if (this._visiblechoices.indexOf(item.value) > -1) res.push(item);
     }
     return res;
   }
   public get getVisibleChoicesInCell(): Array<any> {
-    if(Array.isArray(this._visiblechoices)) return this._visiblechoices;
+    if (Array.isArray(this._visiblechoices)) return this._visiblechoices;
     const res = this.templateQuestion.visibleChoices;
     return Array.isArray(res) ? res : [];
   }
   public setVisibleChoicesInCell(val: Array<any>): void {
     this._visiblechoices = val;
   }
   public get isFilteredMultipleColumns(): boolean {
-    if(!this.showInMultipleColumns) return false;
+    if (!this.showInMultipleColumns) return false;
     const choices = this.templateQuestion.choices;
-    if(!Array.isArray(choices)) return false;
-    for(let i = 0; i < choices.length; i ++) {
-      if(choices[i].visibleIf) return true;
+    if (!Array.isArray(choices)) return false;
+    for (let i = 0; i < choices.length; i++) {
+      if (choices[i].visibleIf) return true;
     }
     return false;
   }
@@ -586,6 +586,28 @@ export class MatrixDropdownColumn extends Base
   public set totalDisplayStyle(val: string) {
     this.setPropertyValue("totalDisplayStyle", val);
   }
+  /**
+   * An alignment for calculated total values.
+   *
+   * Possible values:
+   *
+   * - `"auto"` (default)
+   * - `"left"`
+   * - `"center"`
+   * - `"right"`
+   *
+   * [View Demo](https://surveyjs.io/form-library/examples/aggregate-data-within-form/ (linkStyle))
+   * @see totalType
+   * @see totalFormat
+   * @see totalCurrency
+   * @see totalDisplayStyle
+   */
+  public get totalAlignment(): string {
+    return this.getPropertyValue("totalAlignment");
+  }
+  public set totalAlignment(val: string) {
+    this.setPropertyValue("totalAlignment", val);
+  }
   /**
    * Specifies a currency used to display calculated total values. Applies only if [`totalDisplayStyle`](#totalDisplayStyle) is set to `"currency"`.
    * @see totalType
@@ -913,6 +935,11 @@ Serializer.addClass(
       default: "none",
       choices: ["none", "decimal", "currency", "percent"],
     },
+    {
+      name: "totalAlignment",
+      default: "auto",
+      choices: ["auto", "left", "center", "right"],
+    },
     {
       name: "totalCurrency",
       choices: () => {