mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-09-28 17:00:47 +00:00
5b352211c4
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
108 lines
3.3 KiB
JavaScript
108 lines
3.3 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} = require('app/client/ui2018/buttonSelect');
|
|
const {cssRow, cssLabel} = require('app/client/ui/RightPanel');
|
|
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');
|
|
this.dateFormat = this.options.prop('dateFormat');
|
|
this.isCustomDateFormat = this.options.prop('isCustomDateFormat');
|
|
|
|
// 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.isCustomDateFormat() ? 'Custom' : this.dateFormat(); },
|
|
write: function(val) {
|
|
if (val === 'Custom') { this.isCustomDateFormat.setAndSave(true); }
|
|
else {
|
|
this.options.update({isCustomDateFormat: false, dateFormat: val});
|
|
this.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() {
|
|
var self = this;
|
|
return dom('div',
|
|
cssLabel("Date Format"),
|
|
cssRow(dom(select(fromKo(self.standardDateFormat), [...dateFormatOptions, "Custom"]), dom.testId("Widget_dateFormat"))),
|
|
kd.maybe(self.isCustomDateFormat, function() {
|
|
return cssRow(dom(textbox(self.dateFormat), dom.testId("Widget_dateCustomFormat")));
|
|
})
|
|
);
|
|
};
|
|
|
|
DateTextBox.prototype.buildConfigDom = function() {
|
|
return dom('div',
|
|
this.buildDateConfigDom(),
|
|
cssRow(
|
|
alignmentSelect(fromKoSave(this.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) {
|
|
const textDom = kf.text(value);
|
|
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;
|