gristlabs_grist-core/app/client/widgets/DateTextBox.js

127 lines
4.1 KiB
JavaScript
Raw Normal View History

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 {FieldRulesConfig} = require('app/client/components/Forms/FormConfig');
const {fromKoSave} = require('app/client/lib/fromKoSave');
const {alignmentSelect, cssButtonSelect} = require('app/client/ui2018/buttonSelect');
const {cssLabel, cssRow} = require('app/client/ui/RightPanelStyles');
const {cssTextInput} = require("app/client/ui2018/editableLabel");
const {dom: gdom, styled, fromKo} = require('grainjs');
const {select} = require('app/client/ui2018/menus');
(core) Guess date format during type conversion Summary: - Adds a dependency moment-guess (https://github.com/apoorv-mishra/moment-guess) to guess date formats from strings. However the npm package is missing source maps which leads to an ugly warning, so currently using a fork until https://github.com/apoorv-mishra/moment-guess/pull/22 is resolved. - Adds guessDateFormat using moment-guess to determine the best candidate date format. The logic may be refined for e.g. lossless imports where the stakes are higher, but for now we're just trying to make type conversions smoother. - Uses guessDateFormat to guess widget options when changing column type to date or datetime. - Uses the date format of the original column when possible instead of guessing. - Fixes a bug where choices were guessed based on the display column instead of the visible column, which made the guessed choices influenced by which values were referenced as well as completely broken when converting from reflist. - @dsagal @georgegevoian This builds on https://phab.getgrist.com/D3265, currently unmerged. That diff was created first to alert to the change. Without it there would still be similar test failures/changes here as the date format would often be concretely guessed and saved as YYYY-MM-DD instead of being left as the default `undefined` which is shows as YYYY-MM-DD in the dropdown. Test Plan: Added a unit test to `parseDate.ts`. Updated several browser tests which show the guessing in action during type conversion quite nicely. Reviewers: georgegevoian Reviewed By: georgegevoian Subscribers: dsagal, georgegevoian Differential Revision: https://phab.getgrist.com/D3264
2022-02-21 14:45:17 +00:00
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.buildFormConfigDom = function() {
return [
gdom.create(FieldRulesConfig, this.field),
];
};
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.isDisposed() ? '' : 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;