Summary: Fixes a bug (reported in https://community.getgrist.com/t/bug-toggle-column-in-linking-widget-not-triggering-default-value/1657) Test Plan: Added a test case that fails without this fix. Reviewers: georgegevoian Reviewed By: georgegevoian Differential Revision: https://phab.getgrist.com/D3699pull/352/head
Dmitry S
2 years ago
parent
46148aa125
commit
5c67e12aa5
@ -1,38 +0,0 @@
|
||||
var dom = require('../lib/dom');
|
||||
var dispose = require('../lib/dispose');
|
||||
var _ = require('underscore');
|
||||
var kd = require('../lib/koDom');
|
||||
var AbstractWidget = require('./AbstractWidget');
|
||||
|
||||
/**
|
||||
* CheckBox - A bi-state CheckBox widget
|
||||
*/
|
||||
function CheckBox(field) {
|
||||
AbstractWidget.call(this, field, {defaultTextColor: '#606060'});
|
||||
}
|
||||
dispose.makeDisposable(CheckBox);
|
||||
_.extend(CheckBox.prototype, AbstractWidget.prototype);
|
||||
|
||||
CheckBox.prototype.buildConfigDom = function() {
|
||||
return null;
|
||||
};
|
||||
|
||||
CheckBox.prototype.buildDom = function(row) {
|
||||
var value = row[this.field.colId()];
|
||||
return dom('div.field_clip',
|
||||
dom('div.widget_checkbox',
|
||||
dom.on('click', () => {
|
||||
if (!this.field.column().isRealFormula()) {
|
||||
value.setAndSave(!value.peek());
|
||||
}
|
||||
}),
|
||||
dom('div.widget_checkmark',
|
||||
kd.show(value),
|
||||
dom('div.checkmark_kick'),
|
||||
dom('div.checkmark_stem')
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
module.exports = CheckBox;
|
||||
@ -1,37 +0,0 @@
|
||||
var dom = require('../lib/dom');
|
||||
var dispose = require('../lib/dispose');
|
||||
var _ = require('underscore');
|
||||
var kd = require('../lib/koDom');
|
||||
var AbstractWidget = require('./AbstractWidget');
|
||||
|
||||
/**
|
||||
* Switch - A bi-state Switch widget
|
||||
*/
|
||||
function Switch(field) {
|
||||
AbstractWidget.call(this, field, {defaultTextColor: '#2CB0AF'});
|
||||
}
|
||||
dispose.makeDisposable(Switch);
|
||||
_.extend(Switch.prototype, AbstractWidget.prototype);
|
||||
|
||||
Switch.prototype.buildConfigDom = function() {
|
||||
return null;
|
||||
};
|
||||
|
||||
Switch.prototype.buildDom = function(row) {
|
||||
var value = row[this.field.colId()];
|
||||
return dom('div.field_clip',
|
||||
dom('div.widget_switch',
|
||||
kd.toggleClass('switch_on', value),
|
||||
kd.toggleClass('switch_transition', row._isRealChange),
|
||||
dom('div.switch_slider'),
|
||||
dom('div.switch_circle'),
|
||||
dom.on('click', () => {
|
||||
if (!this.field.column().isRealFormula()) {
|
||||
value.setAndSave(!value.peek());
|
||||
}
|
||||
})
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
module.exports = Switch;
|
||||
@ -0,0 +1,66 @@
|
||||
import * as commands from 'app/client/components/commands';
|
||||
import { DataRowModel } from 'app/client/models/DataRowModel';
|
||||
import { ViewFieldRec } from 'app/client/models/entities/ViewFieldRec';
|
||||
import { KoSaveableObservable } from 'app/client/models/modelUtil';
|
||||
import { NewAbstractWidget, Options } from 'app/client/widgets/NewAbstractWidget';
|
||||
import { dom } from 'grainjs';
|
||||
|
||||
/**
|
||||
* ToggleBase - The base class for toggle widgets, such as a checkbox or a switch.
|
||||
*/
|
||||
abstract class ToggleBase extends NewAbstractWidget {
|
||||
protected _addClickEventHandler(row: DataRowModel) {
|
||||
return dom.on('click', (event) => {
|
||||
if (event.shiftKey) {
|
||||
// Shift-click is for selection, don't also toggle the checkbox during it.
|
||||
return;
|
||||
}
|
||||
if (!this.field.column().isRealFormula()) {
|
||||
// Move the cursor here, and pretend that spacebar was pressed. This triggers an editing
|
||||
// flow which is handled by CheckBoxEditor.skipEditor(). This way the edit applies to
|
||||
// editRow, which handles setting default values based on widget linking.
|
||||
commands.allCommands.setCursor.run(row, this.field);
|
||||
commands.allCommands.input.run(' ');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export class ToggleCheckBox extends ToggleBase {
|
||||
constructor(field: ViewFieldRec, _options: Options = {}) {
|
||||
super(field, {defaultTextColor: '#606060'});
|
||||
}
|
||||
|
||||
public buildDom(row: DataRowModel) {
|
||||
const value = row.cells[this.field.colId.peek()] as KoSaveableObservable<boolean>;
|
||||
return dom('div.field_clip',
|
||||
dom('div.widget_checkbox',
|
||||
dom('div.widget_checkmark',
|
||||
dom.show(value),
|
||||
dom('div.checkmark_kick'),
|
||||
dom('div.checkmark_stem')
|
||||
),
|
||||
this._addClickEventHandler(row),
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export class ToggleSwitch extends ToggleBase {
|
||||
constructor(field: ViewFieldRec, _options: Options = {}) {
|
||||
super(field, {defaultTextColor: '#2CB0AF'});
|
||||
}
|
||||
|
||||
public buildDom(row: DataRowModel) {
|
||||
const value = row.cells[this.field.colId.peek()] as KoSaveableObservable<boolean>;
|
||||
return dom('div.field_clip',
|
||||
dom('div.widget_switch',
|
||||
dom.cls('switch_on', value),
|
||||
dom.cls('switch_transition', row._isRealChange),
|
||||
dom('div.switch_slider'),
|
||||
dom('div.switch_circle'),
|
||||
this._addClickEventHandler(row),
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,90 @@
|
||||
import {assert, driver} from 'mocha-webdriver';
|
||||
import * as gu from 'test/nbrowser/gristUtils';
|
||||
import {Session} from 'test/nbrowser/gristUtils';
|
||||
import {setupTestSuite} from 'test/nbrowser/testUtils';
|
||||
|
||||
describe('ToggleColumns', function() {
|
||||
this.timeout(20000);
|
||||
|
||||
const cleanup = setupTestSuite({team: true});
|
||||
|
||||
let session: Session;
|
||||
let docId: string;
|
||||
|
||||
before(async function() {
|
||||
session = await gu.session().teamSite.login();
|
||||
docId = await session.tempNewDoc(cleanup, 'ToggleColumns', {load: false});
|
||||
|
||||
// Set up a table Src, and table Items which links to Src and has a boolean column.
|
||||
const api = session.createHomeApi();
|
||||
await api.applyUserActions(docId, [
|
||||
['AddTable', 'Src', [{id: 'A', type: 'Text'}]],
|
||||
['BulkAddRecord', 'Src', [null, null, null], {A: ['a', 'b', 'c']}],
|
||||
['AddTable', 'Items', [
|
||||
{id: 'A', type: 'Ref:Src'},
|
||||
{id: 'Chk', type: 'Bool'},
|
||||
// An extra text column reflects the boolean for simpler checking of the values.
|
||||
{id: 'Chk2', isFormula: true, formula: '$Chk'},
|
||||
]],
|
||||
['BulkAddRecord', 'Items', [null, null, null], {A: [1, 1, 3]}],
|
||||
]);
|
||||
|
||||
await session.loadDoc(`/doc/${docId}`);
|
||||
|
||||
// Set up a page with linked widgets.
|
||||
await gu.addNewPage('Table', 'Src');
|
||||
await gu.addNewSection('Table', 'Items', {selectBy: /Src/i});
|
||||
});
|
||||
|
||||
it('should fill in values determined by linking when checkbox is clicked', async function() {
|
||||
// Test the behavior with a checkbox.
|
||||
await verifyToggleBehavior();
|
||||
});
|
||||
|
||||
it('should fill in values determined by linking when switch widget is clicked', async function() {
|
||||
// Now switch the widget to the "Switch" widget, and test again.
|
||||
await gu.toggleSidePanel('right', 'open');
|
||||
await driver.find('.test-right-tab-field').click();
|
||||
await gu.setFieldWidgetType("Switch");
|
||||
await verifyToggleBehavior();
|
||||
});
|
||||
|
||||
async function verifyToggleBehavior() {
|
||||
// Selecting a cell in Src should show only linked values in Items.
|
||||
await gu.getCell({section: 'Src', col: 'A', rowNum: 1}).click();
|
||||
assert.deepEqual(await gu.getVisibleGridCells({section: 'Items', cols: ['A', 'Chk2'], rowNums: [1, 2, 3]}), [
|
||||
'Src[1]', 'false',
|
||||
'Src[1]', 'false',
|
||||
'', '',
|
||||
]);
|
||||
// Click on the cell in the "Add Row" of Items. Because the checkbox is centered in the cell,
|
||||
// the click should toggle it.
|
||||
await gu.getCell({section: 'Items', col: 'Chk', rowNum: 3}).click();
|
||||
await gu.waitForServer();
|
||||
|
||||
// Check that there is a new row, properly linked.
|
||||
assert.deepEqual(await gu.getVisibleGridCells({section: 'Items', cols: ['A', 'Chk2'], rowNums: [1, 2, 3, 4]}), [
|
||||
'Src[1]', 'false',
|
||||
'Src[1]', 'false',
|
||||
'Src[1]', 'true',
|
||||
'', '',
|
||||
]);
|
||||
|
||||
// Try another row of table Src. It should have its own Items (initially none).
|
||||
await gu.getCell({section: 'Src', col: 'A', rowNum: 2}).click();
|
||||
assert.deepEqual(await gu.getVisibleGridCells({section: 'Items', cols: ['A', 'Chk2'], rowNums: [1]}),
|
||||
['', '']);
|
||||
|
||||
// Click checkbox in "Add Row" of Items again.
|
||||
await gu.getCell({section: 'Items', col: 'Chk', rowNum: 1}).click();
|
||||
await gu.waitForServer();
|
||||
|
||||
// Check that we see the new row, with the value determined by linking (column 'A') set correctly.
|
||||
assert.deepEqual(await gu.getVisibleGridCells({section: 'Items', cols: ['A', 'Chk2'], rowNums: [1, 2]}), [
|
||||
'Src[2]', 'true',
|
||||
'', '',
|
||||
]);
|
||||
|
||||
await gu.undo(2);
|
||||
}
|
||||
});
|
||||
Loading…
Reference in new issue