gristlabs_grist-core/app/client/widgets/DateTimeTextBox.js
Paul Fitzpatrick 1654a2681f (core) move client code to core
Summary:
This moves all client code to core, and makes minimal fix-ups to
get grist and grist-core to compile correctly.  The client works
in core, but I'm leaving clean-up around the build and bundles to
follow-up.

Test Plan: existing tests pass; server-dev bundle looks sane

Reviewers: dsagal

Reviewed By: dsagal

Differential Revision: https://phab.getgrist.com/D2627
2020-10-02 13:24:21 -04:00

121 lines
3.6 KiB
JavaScript

/* globals $ */
var _ = require('underscore');
var ko = require('knockout');
var moment = require('moment-timezone');
var dom = require('../lib/dom');
var dispose = require('../lib/dispose');
var kd = require('../lib/koDom');
var kf = require('../lib/koForm');
var DateTextBox = require('./DateTextBox');
var gutil = require('app/common/gutil');
const {fromKoSave} = require('app/client/lib/fromKoSave');
const {alignmentSelect} = require('app/client/ui2018/buttonSelect');
const {testId} = require('app/client/ui2018/cssVars');
const {cssRow} = require('app/client/ui/RightPanel');
/**
* DateTimeTextBox - The most basic widget for displaying date and time information.
*/
function DateTimeTextBox(field) {
DateTextBox.call(this, field);
this.timezoneOptions = moment.tz.names();
this.isInvalidTimezone = ko.observable(false);
// Returns the timezone from the end of the type string
this.timezone = this.autoDispose(ko.computed({
owner: this,
read: function() {
return gutil.removePrefix(field.column().type(), "DateTime:");
},
write: function(val) {
if (_.contains(this.timezoneOptions, val)) {
field.column().type.setAndSave('DateTime:' + val);
this.isInvalidTimezone(false);
} else {
this.isInvalidTimezone(true);
}
}
}));
this.timeFormat = this.options.prop('timeFormat');
this.isCustomTimeFormat = this.options.prop('isCustomTimeFormat');
this.timeFormatOptions = [
'h:mma',
'h:mma z',
'HH:mm',
'HH:mm z',
'HH:mm:ss',
'HH:mm:ss z',
'Custom'
];
// Helper to set 'timeFormat' and 'isCustomTimeFormat' from the set of default time format strings.
this.standardTimeFormat = this.autoDispose(ko.computed({
owner: this,
read: function() { return this.isCustomTimeFormat() ? 'Custom' : this.timeFormat(); },
write: function(val) {
if (val === 'Custom') { this.isCustomTimeFormat.setAndSave(true); }
else {
this.isCustomTimeFormat.setAndSave(false);
this.timeFormat.setAndSave(val);
}
}
}));
}
dispose.makeDisposable(DateTimeTextBox);
_.extend(DateTimeTextBox.prototype, DateTextBox.prototype);
/**
* Builds the config dom for the DateTime TextBox. If isTransformConfig is true,
* builds only the necessary dom for the transform config menu.
*/
DateTimeTextBox.prototype.buildConfigDom = function(isTransformConfig) {
var self = this;
// Set up autocomplete for the timezone entry.
var textDom = kf.text(self.timezone);
var tzInput = textDom.querySelector('input');
$(tzInput).autocomplete({
source: self.timezoneOptions,
minLength: 1,
delay: 10,
select: function(event, ui) {
self.timezone(ui.item.value);
return false;
}
});
return dom('div',
kf.row(
1, dom('div.glyphicon.glyphicon-globe.config_icon'),
8, kf.label('Timezone'),
9, dom(textDom,
kd.toggleClass('invalid-text', this.isInvalidTimezone),
dom.testId("Widget_tz"),
testId('widget-tz'))
),
self.buildDateConfigDom(),
kf.row(
1, dom('div.glyphicon.glyphicon-dashboard.config_icon'),
8, kf.label('Time Format'),
9, dom(kf.select(self.standardTimeFormat, self.timeFormatOptions), dom.testId("Widget_timeFormat"))
),
kd.maybe(self.isCustomTimeFormat, function() {
return dom(kf.text(self.timeFormat), dom.testId("Widget_timeCustomFormat"));
}),
isTransformConfig ? null : cssRow(
alignmentSelect(fromKoSave(this.alignment))
)
);
};
DateTimeTextBox.prototype.buildTransformConfigDom = function() {
return this.buildConfigDom(true);
};
module.exports = DateTimeTextBox;