-
-
-
-
-
-
- {{ ::'SHOW_SAVE_BUTTON' | translate }}
-
-
-
-
- {{ ::'SHOW_SUBMIT_BUTTON' | translate }}
-
-
-
-
- {{ ::'SHOW_ADD_TO_NOTEBOOK_BUTTON' | translate }}
-
-
-
-
-
-
-
-
-
-
{{ ::'table.dataExplorer' | translate }}
-
-
- {{ ::'table.enableDataExplorer' | translate }}
-
-
-
-
-
{{ ::'table.allowedGraphTypes' | translate }}
-
- {{ ::'table.scatterPlot' | translate }}
-
-
- {{ ::'table.lineGraph' | translate }}
-
-
- {{ ::'table.barGraph' | translate }}
-
-
-
-
- {{ ::'table.showScatterPlotRegressionLine' | translate }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ ::'table.yAxis' | translate }} {{ $index + 1 }}
-
-
-
-
-
-
-
-
- {{ ::'table.canStudentEditAxisLabels' | translate }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- add
-
- {{ ::'ADD_CONNECTED_COMPONENT' | translate }}
-
-
-
-
-
-
-
-
-
- {{tableController.getNodePositionAndTitleByNodeId(item.$key)}}
-
-
-
-
-
-
-
- {{ componentIndex + 1 }}. {{component.type}}
-
- ({{ ::'thisComponent' | translate }})
-
-
-
-
-
-
-
-
- {{ ::'importWork' | translate }}
-
-
- {{ ::'showWork' | translate }}
-
-
-
-
-
-
-
- {{ ::'merge' | translate }}
-
-
- {{ ::'append' | translate }}
-
-
-
-
-
-
- delete
-
- {{ ::'DELETE' | translate }}
-
-
-
-
-
- {{ ::'table.onlyShowDataAtMouseXPosition' | translate }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ ::'table.makeAllCellsEditable' | translate }}
-
-
- {{ ::'table.makeAllCellsUneditable' | translate }}
-
-
-
-
-
diff --git a/src/main/webapp/wise5/components/table/table-authoring/table-authoring.component.html b/src/main/webapp/wise5/components/table/table-authoring/table-authoring.component.html
new file mode 100644
index 0000000000..9fcbfba3af
--- /dev/null
+++ b/src/main/webapp/wise5/components/table/table-authoring/table-authoring.component.html
@@ -0,0 +1,181 @@
+
+ Prompt
+
+
+
+
+ Columns
+
+
+
+ Rows
+
+
+
+ Global Cell Size
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+ |
+
+
+ |
+
+
+
+ |
+
+
+
+
+
+
+ Editable
+
+
+ |
+
+
+ |
+
+ |
+
+
+ |
+
+ Optional
+
+ |
+
+
+
+ Column Cell Size
+
+
+
+ |
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/main/webapp/wise5/components/table/table-authoring/table-authoring.component.scss b/src/main/webapp/wise5/components/table/table-authoring/table-authoring.component.scss
new file mode 100644
index 0000000000..cdd97d67ff
--- /dev/null
+++ b/src/main/webapp/wise5/components/table/table-authoring/table-authoring.component.scss
@@ -0,0 +1,62 @@
+.prompt {
+ width: 100%;
+}
+
+.size-input {
+ width: 120px;
+ margin-right: 20px;
+}
+
+.table {
+ width: 100%;
+}
+
+.rotate90 {
+ -webkit-transform: rotate(90deg);
+ transform: rotate(90deg);
+}
+
+.rotate270 {
+ -webkit-transform: rotate(270deg);
+ transform: rotate(270deg);
+}
+
+.column-buttons {
+ margin: 5px;
+}
+
+.row-buttons {
+ margin-top: 5px;
+ margin-bottom: 5px;
+}
+
+.spacer {
+ width: 56px;
+}
+
+.outer-cell-container {
+ border: 1px solid black;
+ padding: 5px;
+ width: auto;
+}
+
+.inner-cell-container {
+ border: 1px solid black;
+ padding: 10px;
+}
+
+.cell-text {
+ width: 100%;
+}
+
+.blank-row-cell {
+ height: 20px;
+}
+
+::ng-deep .mat-form-field-infix {
+ width: auto !important;
+}
+
+.make-all-cells-editable-buttons {
+ margin: 10px;
+}
\ No newline at end of file
diff --git a/src/main/webapp/wise5/components/table/table-authoring/table-authoring.component.ts b/src/main/webapp/wise5/components/table/table-authoring/table-authoring.component.ts
new file mode 100644
index 0000000000..0d4cfa8f31
--- /dev/null
+++ b/src/main/webapp/wise5/components/table/table-authoring/table-authoring.component.ts
@@ -0,0 +1,361 @@
+'use strict';
+
+import { Component } from '@angular/core';
+import { Subject, Subscription } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { ProjectAssetService } from '../../../../site/src/app/services/projectAssetService';
+import { ComponentAuthoring } from '../../../authoringTool/components/component-authoring.component';
+import { ConfigService } from '../../../services/configService';
+import { NodeService } from '../../../services/nodeService';
+import { TeacherProjectService } from '../../../services/teacherProjectService';
+
+@Component({
+ selector: 'table-authoring',
+ templateUrl: 'table-authoring.component.html',
+ styleUrls: ['table-authoring.component.scss']
+})
+export class TableAuthoring extends ComponentAuthoring {
+ columnCellSizes: any;
+
+ numColumnsChange: Subject
= new Subject();
+ numRowsChange: Subject = new Subject();
+ globalCellSizeChange: Subject = new Subject();
+ inputChange: Subject = new Subject();
+
+ numColumnsChangeSubscription: Subscription;
+ numRowsChangeSubscription: Subscription;
+ globalCellSizeChangeSubscription: Subscription;
+ inputChangeSubscription: Subscription;
+
+ constructor(
+ protected ConfigService: ConfigService,
+ protected NodeService: NodeService,
+ protected ProjectAssetService: ProjectAssetService,
+ protected ProjectService: TeacherProjectService
+ ) {
+ super(ConfigService, NodeService, ProjectAssetService, ProjectService);
+ this.numColumnsChangeSubscription = this.numColumnsChange
+ .pipe(debounceTime(1000), distinctUntilChanged())
+ .subscribe(() => {
+ this.tableNumColumnsChanged();
+ });
+ this.numRowsChangeSubscription = this.numRowsChange
+ .pipe(debounceTime(1000), distinctUntilChanged())
+ .subscribe(() => {
+ this.tableNumRowsChanged();
+ });
+ this.globalCellSizeChangeSubscription = this.globalCellSizeChange
+ .pipe(debounceTime(1000), distinctUntilChanged())
+ .subscribe(() => {
+ this.componentChanged();
+ });
+ this.inputChangeSubscription = this.inputChange
+ .pipe(debounceTime(1000), distinctUntilChanged())
+ .subscribe(() => {
+ this.componentChanged();
+ });
+ }
+
+ ngOnInit() {
+ super.ngOnInit();
+ this.columnCellSizes = this.parseColumnCellSizes(this.componentContent);
+ }
+
+ ngOnDestroy() {
+ super.ngOnDestroy();
+ this.unsubscribeAll();
+ }
+
+ unsubscribeAll() {
+ this.numColumnsChangeSubscription.unsubscribe();
+ this.numRowsChangeSubscription.unsubscribe();
+ this.globalCellSizeChangeSubscription.unsubscribe();
+ this.inputChangeSubscription.unsubscribe();
+ }
+
+ tableNumRowsChanged(): void {
+ const oldValue = this.getNumRowsInTableData();
+ const newValue = this.authoringComponentContent.numRows;
+ if (newValue < oldValue) {
+ if (this.areRowsAfterEmpty(newValue)) {
+ this.tableSizeChanged();
+ } else {
+ if (confirm($localize`Are you sure you want to decrease the number of rows?`)) {
+ this.tableSizeChanged();
+ } else {
+ this.authoringComponentContent.numRows = oldValue;
+ }
+ }
+ } else {
+ this.tableSizeChanged();
+ }
+ }
+
+ areRowsAfterEmpty(rowIndex: number): boolean {
+ const oldNumRows = this.getNumRowsInTableData();
+ for (let r = rowIndex; r < oldNumRows; r++) {
+ if (!this.isRowEmpty(r)) {
+ return false;
+ }
+ }
+ return true;
+ }
+
+ isRowEmpty(rowIndex: number): boolean {
+ const tableData = this.authoringComponentContent.tableData;
+ for (const cell of tableData[rowIndex]) {
+ if (!this.isEmpty(cell.text)) {
+ return false;
+ }
+ }
+ return true;
+ }
+
+ tableNumColumnsChanged(): void {
+ const oldValue = this.getNumColumnsInTableData();
+ const newValue = this.authoringComponentContent.numColumns;
+ if (newValue < oldValue) {
+ if (this.areColumnsAfterEmpty(newValue)) {
+ this.tableSizeChanged();
+ } else {
+ if (confirm($localize`Are you sure you want to decrease the number of columns?`)) {
+ this.tableSizeChanged();
+ } else {
+ this.authoringComponentContent.numColumns = oldValue;
+ }
+ }
+ } else {
+ this.tableSizeChanged();
+ }
+ }
+
+ areColumnsAfterEmpty(columnIndex: number): boolean {
+ const oldNumColumns = this.getNumColumnsInTableData();
+ for (let c = columnIndex; c < oldNumColumns; c++) {
+ if (!this.isColumnEmpty(c)) {
+ return false;
+ }
+ }
+ return true;
+ }
+
+ isColumnEmpty(columnIndex: number): boolean {
+ for (const row of this.authoringComponentContent.tableData) {
+ const cell = row[columnIndex];
+ if (!this.isEmpty(cell.text)) {
+ return false;
+ }
+ }
+ return true;
+ }
+
+ isEmpty(txt: string): boolean {
+ return txt == null || txt == '';
+ }
+
+ tableSizeChanged(): void {
+ this.authoringComponentContent.tableData = this.getUpdatedTable(
+ this.authoringComponentContent.numRows,
+ this.authoringComponentContent.numColumns
+ );
+ this.componentChanged();
+ }
+
+ /**
+ * Create a table with the given dimensions. Populate the cells with the cells from the old table.
+ * @param newNumRows the number of rows in the new table
+ * @param newNumColumns the number of columns in the new table
+ * @returns a new table
+ */
+ getUpdatedTable(newNumRows: number, newNumColumns: number): any {
+ const newTable = [];
+ for (let r = 0; r < newNumRows; r++) {
+ const newRow = [];
+ for (let c = 0; c < newNumColumns; c++) {
+ let cell = this.getCellObjectFromTableData(c, r);
+ if (cell == null) {
+ cell = this.createEmptyCell();
+ }
+ newRow.push(cell);
+ }
+ newTable.push(newRow);
+ }
+ return newTable;
+ }
+
+ /**
+ * Get the cell object at the given x, y location
+ * @param x the column number (zero indexed)
+ * @param y the row number (zero indexed)
+ * @returns the cell at the given x, y location or null if there is none
+ */
+ getCellObjectFromTableData(x: number, y: number): any {
+ let cellObject = null;
+ const tableData = this.authoringComponentContent.tableData;
+ if (tableData != null) {
+ const row = tableData[y];
+ if (row != null) {
+ cellObject = row[x];
+ }
+ }
+ return cellObject;
+ }
+
+ createEmptyCell(): any {
+ return {
+ text: '',
+ editable: true,
+ size: null
+ };
+ }
+
+ insertRow(rowIndex: number): void {
+ const tableData = this.authoringComponentContent.tableData;
+ const newRow = [];
+ const numColumns = this.authoringComponentContent.numColumns;
+ for (let c = 0; c < numColumns; c++) {
+ const newCell = this.createEmptyCell();
+ const cellSize = this.columnCellSizes[c];
+ if (cellSize != null) {
+ newCell.size = cellSize;
+ }
+ newRow.push(newCell);
+ }
+ tableData.splice(rowIndex, 0, newRow);
+ this.authoringComponentContent.numRows++;
+ this.componentChanged();
+ }
+
+ deleteRow(rowIndex: number): void {
+ if (confirm($localize`Are you sure you want to delete this row?`)) {
+ const tableData = this.authoringComponentContent.tableData;
+ if (tableData != null) {
+ tableData.splice(rowIndex, 1);
+ this.authoringComponentContent.numRows--;
+ }
+ this.componentChanged();
+ }
+ }
+
+ insertColumn(columnIndex: number): void {
+ const tableData = this.authoringComponentContent.tableData;
+ const numRows = this.authoringComponentContent.numRows;
+ for (let r = 0; r < numRows; r++) {
+ const row = tableData[r];
+ const newCell = this.createEmptyCell();
+ row.splice(columnIndex, 0, newCell);
+ }
+ this.authoringComponentContent.numColumns++;
+ this.parseColumnCellSizes(this.authoringComponentContent);
+ this.componentChanged();
+ }
+
+ deleteColumn(columnIndex: number): void {
+ if (confirm($localize`Are you sure you want to delete this column?`)) {
+ const tableData = this.authoringComponentContent.tableData;
+ const numRows = this.authoringComponentContent.numRows;
+ for (let r = 0; r < numRows; r++) {
+ const row = tableData[r];
+ row.splice(columnIndex, 1);
+ }
+ this.authoringComponentContent.numColumns--;
+ this.parseColumnCellSizes(this.authoringComponentContent);
+ this.componentChanged();
+ }
+ }
+
+ /**
+ * Get the number of rows in the table data. This is slightly different from just getting the
+ * numRows field in the component content. Usually the number of rows will be the same. In some
+ * cases it can be different such as during authoring immediately after the author changes the
+ * number of rows using the number of rows input.
+ * @return {number} The number of rows in the table data.
+ */
+ getNumRowsInTableData(): number {
+ return this.authoringComponentContent.tableData.length;
+ }
+
+ /**
+ * Get the number of columns in the table data. This is slightly different from just getting the
+ * numColumns field in the component content. Usually the number of columns will be the same. In
+ * some cases it can be different such as during authoring immediately after the author changes
+ * the number of columns using the number of columns input.
+ * @return {number} The number of columns in the table data.
+ */
+ getNumColumnsInTableData(): number {
+ const tableData = this.authoringComponentContent.tableData;
+ if (tableData.length > 0) {
+ return tableData[0].length;
+ }
+ return 0;
+ }
+
+ setAllCellsUneditable(): void {
+ this.setAllCellsIsEditable(false);
+ this.componentChanged();
+ }
+
+ setAllCellsEditable(): void {
+ this.setAllCellsIsEditable(true);
+ this.componentChanged();
+ }
+
+ setAllCellsIsEditable(isEditable: boolean): void {
+ for (const row of this.authoringComponentContent.tableData) {
+ for (const cell of row) {
+ cell.editable = isEditable;
+ }
+ }
+ }
+
+ /**
+ * Parse the column cell sizes. We will get the column cell sizes by looking at the size value of
+ * each cell in the first row.
+ * @param componentContent the component content
+ */
+ parseColumnCellSizes(componentContent: any): any {
+ const columnCellSizes = {};
+ const tableData = componentContent.tableData;
+ const firstRow = tableData[0];
+ if (firstRow != null) {
+ for (let x = 0; x < firstRow.length; x++) {
+ const cell = firstRow[x];
+ columnCellSizes[x] = cell.size;
+ }
+ }
+ return columnCellSizes;
+ }
+
+ columnSizeChanged(index: number): void {
+ let cellSize = this.columnCellSizes[index];
+ if (cellSize == '') {
+ cellSize = null;
+ }
+ this.setColumnCellSizes(index, cellSize);
+ }
+
+ setColumnCellSizes(column: number, size: number): void {
+ const tableData = this.authoringComponentContent.tableData;
+ for (let r = 0; r < tableData.length; r++) {
+ const row = tableData[r];
+ const cell = row[column];
+ if (cell != null) {
+ cell.size = size;
+ }
+ }
+ this.componentChanged();
+ }
+
+ automaticallySetConnectedComponentFieldsIfPossible(connectedComponent) {
+ if (connectedComponent.type === 'importWork' && connectedComponent.action == null) {
+ connectedComponent.action = 'merge';
+ } else if (connectedComponent.type === 'showWork') {
+ connectedComponent.action = null;
+ }
+ }
+
+ connectedComponentTypeChanged(connectedComponent) {
+ this.automaticallySetConnectedComponentFieldsIfPossible(connectedComponent);
+ this.componentChanged();
+ }
+}
diff --git a/src/main/webapp/wise5/components/table/tableAuthoring.ts b/src/main/webapp/wise5/components/table/tableAuthoring.ts
deleted file mode 100644
index beef4e7fef..0000000000
--- a/src/main/webapp/wise5/components/table/tableAuthoring.ts
+++ /dev/null
@@ -1,428 +0,0 @@
-'use strict';
-
-import { Directive } from '@angular/core';
-import { EditComponentController } from '../../authoringTool/components/editComponentController';
-
-@Directive()
-class TableAuthoringController extends EditComponentController {
- columnCellSizes: any;
-
- static $inject = [
- '$filter',
- 'ConfigService',
- 'NodeService',
- 'NotificationService',
- 'ProjectAssetService',
- 'ProjectService',
- 'UtilService'
- ];
-
- constructor(
- $filter,
- ConfigService,
- NodeService,
- NotificationService,
- ProjectAssetService,
- ProjectService,
- UtilService
- ) {
- super(
- $filter,
- ConfigService,
- NodeService,
- NotificationService,
- ProjectAssetService,
- ProjectService,
- UtilService
- );
- }
-
- $onInit() {
- super.$onInit();
- this.columnCellSizes = this.parseColumnCellSizes(this.componentContent);
- }
-
- tableNumRowsChanged(oldValue: number): void {
- if (this.authoringComponentContent.numRows < oldValue) {
- if (this.areRowsAfterEmpty(this.authoringComponentContent.numRows)) {
- this.tableSizeChanged();
- } else {
- if (confirm(this.$translate('table.areYouSureYouWantToDecreaseTheNumberOfRows'))) {
- this.tableSizeChanged();
- } else {
- this.authoringComponentContent.numRows = oldValue;
- }
- }
- } else {
- this.tableSizeChanged();
- }
- }
-
- /**
- * Determine if the rows after the given index are empty.
- * @param rowIndex The index of the row to start checking at. This value is zero indexed.
- * @return {boolean} True if the row at the given index and all the rows after are empty.
- * False if the row at the given index or any row after the row index is not empty.
- */
- areRowsAfterEmpty(rowIndex: number): boolean {
- const oldNumRows = this.getNumRowsInTableData();
- for (let r = rowIndex; r < oldNumRows; r++) {
- if (!this.isRowEmpty(r)) {
- return false;
- }
- }
- return true;
- }
-
- /**
- * Determine if a row has cells that are all empty string.
- * @param rowIndex The row index. This value is zero indexed.
- * @returns {boolean} True if the text in all the cells in the row are empty string.
- * False if the text in any cell in the row is not empty string.
- */
- isRowEmpty(rowIndex: number): boolean {
- const tableData = this.authoringComponentContent.tableData;
- for (const cell of tableData[rowIndex]) {
- if (cell.text != null && cell.text != '') {
- return false;
- }
- }
- return true;
- }
-
- /**
- * The author has changed the number of columns.
- * @param oldValue The previous number of columns.
- */
- tableNumColumnsChanged(oldValue: number): void {
- if (this.authoringComponentContent.numColumns < oldValue) {
- // the author is reducing the number of columns
- if (this.areColumnsAfterEmpty(this.authoringComponentContent.numColumns)) {
- // the columns that we will delete are empty so we will remove the columns
- this.tableSizeChanged();
- } else {
- if (confirm(this.$translate('table.areYouSureYouWantToDecreaseTheNumberOfColumns'))) {
- this.tableSizeChanged();
- } else {
- this.authoringComponentContent.numColumns = oldValue;
- }
- }
- } else {
- // the author is increasing the number of columns
- this.tableSizeChanged();
- }
- }
-
- /**
- * Determine if the columns after the given index are empty.
- * @param columnIndex The index of the column to start checking at. This value is zero indexed.
- * @return {boolean} True if the column at the given index and all the columns after are empty.
- * False if the column at the given index or any column after the column index is not empty.
- */
- areColumnsAfterEmpty(columnIndex: number): boolean {
- const oldNumColumns = this.getNumColumnsInTableData();
- for (let c = columnIndex; c < oldNumColumns; c++) {
- if (!this.isColumnEmpty(c)) {
- return false;
- }
- }
- return true;
- }
-
- /**
- * Determine if a column has cells that are all empty string.
- * @param columnIndex The column index. This value is zero indexed.
- * @returns {boolean} True if the text in all the cells in the column are empty string.
- * False if the text in any cell in the column is not empty string.
- */
- isColumnEmpty(columnIndex: number): boolean {
- for (const row of this.authoringComponentContent.tableData) {
- const cell = row[columnIndex];
- if (cell.text != null && cell.text != '') {
- return false;
- }
- }
- return true;
- }
-
- /**
- * The table size has changed in the authoring view so we will update it
- */
- tableSizeChanged(): void {
- this.authoringComponentContent.tableData = this.getUpdatedTableSize(
- this.authoringComponentContent.numRows,
- this.authoringComponentContent.numColumns
- );
- this.componentChanged();
- }
-
- /**
- * Create a table with the given dimensions. Populate the cells with
- * the cells from the old table.
- * @param newNumRows the number of rows in the new table
- * @param newNumColumns the number of columns in the new table
- * @returns a new table
- */
- getUpdatedTableSize(newNumRows: number, newNumColumns: number): any {
- const newTable = [];
- for (let r = 0; r < newNumRows; r++) {
- const newRow = [];
- for (let c = 0; c < newNumColumns; c++) {
- let cell = this.getCellObjectFromComponentContent(c, r);
- if (cell == null) {
- cell = this.createEmptyCell();
- }
- newRow.push(cell);
- }
- newTable.push(newRow);
- }
- return newTable;
- }
-
- /**
- * Get the cell object at the given x, y location
- * @param x the column number (zero indexed)
- * @param y the row number (zero indexed)
- * @returns the cell at the given x, y location or null if there is none
- */
- getCellObjectFromComponentContent(x: number, y: number): any {
- let cellObject = null;
- const tableData = this.authoringComponentContent.tableData;
- if (tableData != null) {
- const row = tableData[y];
- if (row != null) {
- cellObject = row[x];
- }
- }
- return cellObject;
- }
-
- createEmptyCell(): any {
- return {
- text: '',
- editable: true,
- size: null
- };
- }
-
- /**
- * Insert a row into the table from the authoring view
- * @param y the row number to insert at
- */
- insertRow(y: number): void {
- const tableData = this.authoringComponentContent.tableData;
- if (tableData != null) {
- const newRow = [];
- const numColumns = this.authoringComponentContent.numColumns;
- for (let c = 0; c < numColumns; c++) {
- const newCell = this.createEmptyCell();
- const cellSize = this.columnCellSizes[c];
- if (cellSize != null) {
- newCell.size = cellSize;
- }
- newRow.push(newCell);
- }
- tableData.splice(y, 0, newRow);
- this.authoringComponentContent.numRows++;
- }
- this.componentChanged();
- }
-
- /**
- * Delete a row in the table from the authoring view
- * @param y the row number to delete
- */
- deleteRow(y: number): void {
- if (confirm(this.$translate('table.areYouSureYouWantToDeleteThisRow'))) {
- const tableData = this.authoringComponentContent.tableData;
- if (tableData != null) {
- tableData.splice(y, 1);
- this.authoringComponentContent.numRows--;
- }
- this.componentChanged();
- }
- }
-
- /**
- * Insert a column into the table from the authoring view
- * @param x the column number to insert at
- */
- insertColumn(x: number): void {
- const tableData = this.authoringComponentContent.tableData;
- if (tableData != null) {
- const numRows = this.authoringComponentContent.numRows;
- for (let r = 0; r < numRows; r++) {
- const tempRow = tableData[r];
- if (tempRow != null) {
- const newCell = this.createEmptyCell();
- tempRow.splice(x, 0, newCell);
- }
- }
- this.authoringComponentContent.numColumns++;
- this.parseColumnCellSizes(this.authoringComponentContent);
- }
- this.componentChanged();
- }
-
- /**
- * Delete a column in the table from the authoring view
- * @param x the column number to delete
- */
- deleteColumn(x: number): void {
- if (confirm(this.$translate('table.areYouSureYouWantToDeleteThisColumn'))) {
- const tableData = this.authoringComponentContent.tableData;
- if (tableData != null) {
- const numRows = this.authoringComponentContent.numRows;
- for (let r = 0; r < numRows; r++) {
- const tempRow = tableData[r];
- if (tempRow != null) {
- tempRow.splice(x, 1);
- }
- }
- this.authoringComponentContent.numColumns--;
- this.parseColumnCellSizes(this.authoringComponentContent);
- }
- this.componentChanged();
- }
- }
-
- /**
- * Get the number of rows in the table data. This is slightly different from
- * just getting the numRows field in the component content. Usually the
- * number of rows will be the same. In some cases it can be different
- * such as during authoring immediately after the author changes the number
- * of rows using the number of rows input.
- * @return {number} The number of rows in the table data.
- */
- getNumRowsInTableData(): number {
- return this.authoringComponentContent.tableData.length;
- }
-
- /**
- * Get the number of columns in the table data. This is slightly different from
- * just getting the numColumns field in the component content. Usually the
- * number of columns will be the same. In some cases it can be different
- * such as during authoring immediately after the author changes the number
- * of columns using the number of columns input.
- * @return {number} The number of columns in the table data.
- */
- getNumColumnsInTableData(): number {
- const tableData = this.authoringComponentContent.tableData;
- if (tableData.length > 0) {
- return tableData[0].length;
- }
- return 0;
- }
-
- makeAllCellsUneditable(): void {
- const tableData = this.authoringComponentContent.tableData;
- if (tableData != null) {
- for (let r = 0; r < tableData.length; r++) {
- const row = tableData[r];
- if (row != null) {
- for (let c = 0; c < row.length; c++) {
- const cell = row[c];
- if (cell != null) {
- cell.editable = false;
- }
- }
- }
- }
- }
- this.componentChanged();
- }
-
- makeAllCellsEditable(): void {
- const tableData = this.authoringComponentContent.tableData;
- if (tableData != null) {
- for (let r = 0; r < tableData.length; r++) {
- const row = tableData[r];
- if (row != null) {
- for (let c = 0; c < row.length; c++) {
- const cell = row[c];
- if (cell != null) {
- cell.editable = true;
- }
- }
- }
- }
- }
- this.componentChanged();
- }
-
- /**
- * Parse the column cell sizes. We will get the column cell sizes by looking
- * at size value of each column in the first row.
- * @param componentContent the component content
- */
- parseColumnCellSizes(componentContent: any): any {
- const columnCellSizes = {};
- const tableData = componentContent.tableData;
- if (tableData != null) {
- const firstRow = tableData[0];
- if (firstRow != null) {
- for (let x = 0; x < firstRow.length; x++) {
- const cell = firstRow[x];
- columnCellSizes[x] = cell.size;
- }
- }
- }
- return columnCellSizes;
- }
-
- columnSizeChanged(index: number): void {
- if (index != null) {
- let cellSize = this.columnCellSizes[index];
- if (cellSize == '') {
- cellSize = null;
- }
- this.setColumnCellSizes(index, cellSize);
- }
- }
-
- /**
- * Set the cell sizes for all the cells in a column
- * @param column the column number
- * @param size the cell size
- */
- setColumnCellSizes(column: number, size: number): void {
- const tableData = this.authoringComponentContent.tableData;
- if (tableData != null) {
- for (let r = 0; r < tableData.length; r++) {
- const row = tableData[r];
- if (row != null) {
- const cell = row[column];
- if (cell != null) {
- cell.size = size;
- }
- }
- }
- }
- this.componentChanged();
- }
-
- automaticallySetConnectedComponentFieldsIfPossible(connectedComponent) {
- if (connectedComponent.type === 'importWork' && connectedComponent.action == null) {
- connectedComponent.action = 'merge';
- } else if (connectedComponent.type === 'showWork') {
- connectedComponent.action = null;
- }
- }
-
- connectedComponentTypeChanged(connectedComponent) {
- this.automaticallySetConnectedComponentFieldsIfPossible(connectedComponent);
- this.componentChanged();
- }
-}
-
-const TableAuthoring = {
- bindings: {
- nodeId: '@',
- componentId: '@'
- },
- controller: TableAuthoringController,
- controllerAs: 'tableController',
- templateUrl: 'wise5/components/table/authoring.html'
-};
-
-export default TableAuthoring;
diff --git a/src/main/webapp/wise5/components/table/tableAuthoringComponentModule.ts b/src/main/webapp/wise5/components/table/tableAuthoringComponentModule.ts
index 60f9c96360..c202b806cd 100644
--- a/src/main/webapp/wise5/components/table/tableAuthoringComponentModule.ts
+++ b/src/main/webapp/wise5/components/table/tableAuthoringComponentModule.ts
@@ -2,14 +2,17 @@
import * as angular from 'angular';
import { TableService } from './tableService';
-import { downgradeInjectable } from '@angular/upgrade/static';
-import TableAuthoring from './tableAuthoring';
+import { downgradeComponent, downgradeInjectable } from '@angular/upgrade/static';
import { EditTableAdvancedComponent } from './edit-table-advanced/edit-table-advanced.component';
+import { TableAuthoring } from './table-authoring/table-authoring.component';
const tableAuthoringComponentModule = angular
.module('tableAuthoringComponentModule', ['pascalprecht.translate'])
.service('TableService', downgradeInjectable(TableService))
- .component('tableAuthoring', TableAuthoring)
+ .directive(
+ 'tableAuthoring',
+ downgradeComponent({ component: TableAuthoring }) as angular.IDirectiveFactory
+ )
.component('editTableAdvanced', EditTableAdvancedComponent)
.config([
'$translatePartialLoaderProvider',