(core) Adding hide for multiple columns

Summary: New column menu option to hide multiple columns.

Test Plan: new test

Reviewers: georgegevoian

Reviewed By: georgegevoian

Differential Revision: https://phab.getgrist.com/D3581

app/client/components/GridView.js

@@ -305,7 +305,7 @@ GridView.gridCommands = {
   insertFieldBefore: function() { this.insertColumn(this.cursor.fieldIndex()); },
   insertFieldAfter: function() { this.insertColumn(this.cursor.fieldIndex() + 1); },
   renameField: function() { this.currentEditingColumnIndex(this.cursor.fieldIndex()); },
-  hideField: function() { this.hideField(this.cursor.fieldIndex()); },
+  hideFields: function() { this.hideFields(this.getSelection()); },
   deleteFields: function() { this.deleteColumns(this.getSelection()); },
   clearValues: function() { this.clearValues(this.getSelection()); },
   clearColumns: function() { this._clearColumns(this.getSelection()); },
@@ -723,10 +723,10 @@ GridView.prototype.deleteColumns = function(selection) {
   }
 };
 
-GridView.prototype.hideField = function(index) {
-  var field = this.viewSection.viewFields().at(index);
-  var action = ['RemoveRecord', field.id()];
-  return this.gristDoc.docModel.viewFields.sendTableAction(action);
+GridView.prototype.hideFields = function(selection) {
+  var actions = selection.fields.map(field => ['RemoveRecord', field.id()]);
+  return this.gristDoc.docModel.viewFields.sendTableActions(actions, `Hide columns ${actions.map(a => a[1]).join(', ')} ` +
+  `from ${this.tableModel.tableData.tableId}.`);
 };
 
 GridView.prototype.moveColumns = function(oldIndices, newIndex) {

app/client/components/commandList.js

@@ -348,9 +348,9 @@ exports.groups = [{
       keys: ['Ctrl+m'],
       desc: 'Rename the currently selected column'
     }, {
-      name: 'hideField',
+      name: 'hideFields',
       keys: ['Alt+Shift+-'],
-      desc: 'Hide the currently selected column'
+      desc: 'Hide currently selected columns'
     }, {
       name: 'toggleFreeze',
       keys: [],

app/client/ui/GridViewMenus.ts

@@ -112,7 +112,7 @@ export function ColumnContextMenu(options: IColumnContextMenu) {
     menuItem(allCommands.sortFilterTabOpen.run, 'More sort options ...', testId('more-sort-options')),
     menuDivider({style: 'margin-top: 0;'}),
     menuItemCmd(allCommands.renameField, 'Rename column', disableForReadonlyColumn),
-    menuItemCmd(allCommands.hideField, 'Hide column', dom.cls('disabled', isReadonly || isRaw)),
+    menuItemCmd(allCommands.hideFields, 'Hide column', dom.cls('disabled', isReadonly || isRaw)),
     freezeMenuItemCmd(options),
     menuDivider(),
     MultiColumnMenu((options.disableFrozenMenu = true, options)),
@@ -136,10 +136,9 @@ export function MultiColumnMenu(options: IMultiColumnContextMenu) {
     (num > 1 ? `Clear ${num} entire columns` : 'Clear entire column') :
     (num > 1 ? `Clear ${num} columns` : 'Clear column');
   const nameDeleteColumns = num > 1 ? `Delete ${num} columns` : 'Delete column';
+  const nameHideColumns = num > 1 ? `Hide ${num} columns` : 'Hide column';
   const frozenMenu = options.disableFrozenMenu ? null : freezeMenuItemCmd(options);
   return [
-    // TODO This should be made to work too for multiple columns.
-    // menuItemCmd(allCommands.hideField, 'Hide column', disableForReadonlyView),
     frozenMenu ? [frozenMenu, menuDivider()]: null,
     // Offered only when selection includes formula columns, and converts only those.
     (options.isFormula ?
@@ -150,6 +149,7 @@ export function MultiColumnMenu(options: IMultiColumnContextMenu) {
     (options.isFormula !== true ?
       menuItemCmd(allCommands.clearValues, 'Clear values', disableForReadonlyColumn) : null),
 
+    menuItemCmd(allCommands.hideFields, nameHideColumns, disableForReadonlyView),
     menuItemCmd(allCommands.clearColumns, nameClearColumns, disableForReadonlyColumn),
     menuItemCmd(allCommands.deleteFields, nameDeleteColumns, disableForReadonlyColumn),