mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-10-27 20:44:07 +00:00
8be920dd25
Summary: Creator panel allows now to edit multiple columns at once for some options that are common for them. Options that are not common are disabled. List of options that can be edited for multiple columns: - Column behavior (but limited to empty/formula columns) - Alignment and wrapping - Default style - Number options (for numeric columns) - Column types (but only for empty/formula columns) If multiple columns of the same type are selected, most of the options are available to change, except formula, trigger formula and conditional styles. Editing column label or column id is disabled by default for multiple selection. Not related: some tests were fixed due to the change in the column label and id widget in grist-core (disabled attribute was replaced by readonly). Test Plan: Updated and new tests. Reviewers: georgegevoian Reviewed By: georgegevoian Differential Revision: https://phab.getgrist.com/D3598
120 lines
3.9 KiB
JavaScript
120 lines
3.9 KiB
JavaScript
var _ = require('underscore');
|
|
var ko = require('knockout');
|
|
var dom = require('../lib/dom');
|
|
var dispose = require('../lib/dispose');
|
|
var kd = require('../lib/koDom');
|
|
var kf = require('../lib/koForm');
|
|
var AbstractWidget = require('./AbstractWidget');
|
|
|
|
const {fromKoSave} = require('app/client/lib/fromKoSave');
|
|
const {alignmentSelect, cssButtonSelect} = require('app/client/ui2018/buttonSelect');
|
|
const {cssRow, cssLabel} = require('app/client/ui/RightPanelStyles');
|
|
const {cssTextInput} = require("app/client/ui2018/editableLabel");
|
|
const {styled, fromKo} = require('grainjs');
|
|
const {select} = require('app/client/ui2018/menus');
|
|
const {dateFormatOptions} = require('app/common/parseDate');
|
|
|
|
/**
|
|
* DateTextBox - The most basic widget for displaying simple date information.
|
|
*/
|
|
function DateTextBox(field) {
|
|
AbstractWidget.call(this, field);
|
|
|
|
this.alignment = this.options.prop('alignment');
|
|
|
|
// These properties are only used in configuration.
|
|
this.dateFormat = this.field.config.options.prop('dateFormat');
|
|
this.isCustomDateFormat = this.field.config.options.prop('isCustomDateFormat');
|
|
this.mixedDateFormat = ko.pureComputed(() => this.dateFormat() === null || this.isCustomDateFormat() === null);
|
|
|
|
// Helper to set 'dateFormat' and 'isCustomDateFormat' from the set of default date format strings.
|
|
this.standardDateFormat = this.autoDispose(ko.computed({
|
|
owner: this,
|
|
read: function() { return this.mixedDateFormat() ? null : this.isCustomDateFormat() ? 'Custom' : this.dateFormat(); },
|
|
write: function(val) {
|
|
if (val === 'Custom') { this.isCustomDateFormat.setAndSave(true); }
|
|
else {
|
|
this.field.config.options.update({isCustomDateFormat: false, dateFormat: val});
|
|
this.field.config.options.save();
|
|
}
|
|
}
|
|
}));
|
|
|
|
// An observable that always returns `UTC`, eases DateTimeEditor inheritance.
|
|
this.timezone = ko.observable('UTC');
|
|
}
|
|
dispose.makeDisposable(DateTextBox);
|
|
_.extend(DateTextBox.prototype, AbstractWidget.prototype);
|
|
|
|
DateTextBox.prototype.buildDateConfigDom = function() {
|
|
const disabled = this.field.config.options.disabled('dateFormat');
|
|
return dom('div',
|
|
cssLabel("Date Format"),
|
|
cssRow(dom(select(
|
|
fromKo(this.standardDateFormat),
|
|
[...dateFormatOptions, "Custom"],
|
|
{ disabled, defaultLabel: "Mixed format" },
|
|
), dom.testId("Widget_dateFormat"))),
|
|
kd.maybe(() => !this.mixedDateFormat() && this.isCustomDateFormat(), () => {
|
|
return cssRow(dom(
|
|
textbox(this.dateFormat, { disabled }),
|
|
dom.testId("Widget_dateCustomFormat")));
|
|
})
|
|
);
|
|
};
|
|
|
|
DateTextBox.prototype.buildConfigDom = function() {
|
|
return dom('div',
|
|
this.buildDateConfigDom(),
|
|
cssRow(
|
|
alignmentSelect(
|
|
fromKoSave(this.field.config.options.prop('alignment')),
|
|
cssButtonSelect.cls('-disabled', this.field.config.options.disabled('alignment')),
|
|
),
|
|
)
|
|
);
|
|
};
|
|
|
|
DateTextBox.prototype.buildTransformConfigDom = function() {
|
|
return this.buildDateConfigDom();
|
|
};
|
|
|
|
DateTextBox.prototype.buildDom = function(row) {
|
|
let value = row[this.field.colId()];
|
|
return dom('div.field_clip',
|
|
kd.style('text-align', this.alignment),
|
|
kd.text(() => row._isAddRow() ? '' : this.valueFormatter().format(value()))
|
|
);
|
|
};
|
|
|
|
// clean up old koform styles
|
|
const cssClean = styled('div', `
|
|
flex: 1;
|
|
margin: 0px;
|
|
`)
|
|
|
|
// override focus - to look like modern ui
|
|
const cssFocus = styled('div', `
|
|
&:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 3px 2px var(--grist-color-cursor);
|
|
border: 1px solid transparent;
|
|
}
|
|
`)
|
|
|
|
// helper method to create old style textbox that looks like a new one
|
|
function textbox(value, options) {
|
|
const textDom = kf.text(value, options ?? {});
|
|
const tzInput = textDom.querySelector('input');
|
|
dom(tzInput,
|
|
kd.cssClass(cssTextInput.className),
|
|
kd.cssClass(cssFocus.className)
|
|
);
|
|
dom(textDom,
|
|
kd.cssClass(cssClean.className)
|
|
);
|
|
return textDom;
|
|
}
|
|
|
|
module.exports = DateTextBox;
|