gristlabs_grist-core/app/client/ui/DocumentSettings.ts
Dmitry S 8d68c1c567 (core) Replace time zone selector with one based on the newer autocomplete.
Summary:
Flaky Dates test failures related to the use of JQuery autocomplete for time
zones, which wasn't working well.

This diff replaces that autocomplete (as well as a similar select box in
DocumentSettings) with our newer autocomplete, adding some select-box like
behavior.

Most of the behavior is factored out into ACSelect, which could be more
generally useful.

Adds an option to autocomplete to keep options ordered according to their
initial order.

Unrelated: fix up usage of MultiHolder in Drafts to avoid 'already disposed'
warnings.

Test Plan: Fixed several affected tests.

Reviewers: jarek

Reviewed By: jarek

Differential Revision: https://phab.getgrist.com/D2919
2021-07-23 08:02:05 -04:00

43 lines
1.7 KiB
TypeScript

/**
* This module export a component for editing some document settings consisting of the timezone,
* (new settings to be added here ...).
*/
import { dom, styled } from 'grainjs';
import { Computed, Observable } from 'grainjs';
import { loadMomentTimezone } from 'app/client/lib/imports';
import { DocInfoRec } from 'app/client/models/DocModel';
import { DocPageModel } from 'app/client/models/DocPageModel';
import { vars } from 'app/client/ui2018/cssVars';
import { saveModal } from 'app/client/ui2018/modals';
import { buildTZAutocomplete } from 'app/client/widgets/TZAutocomplete';
/**
* Builds a simple saveModal for saving settings.
*/
export async function showDocSettingsModal(docInfo: DocInfoRec, docPageModel: DocPageModel): Promise<void> {
const moment = await loadMomentTimezone();
return saveModal((ctl, owner) => {
const timezone = Observable.create(owner, docInfo.timezone.peek());
return {
title: 'Document Settings',
body: [
cssDataRow("This document's ID (for API use):"),
cssDataRow(dom('tt', docPageModel.currentDocId.get())),
cssDataRow('Time Zone:'),
cssDataRow(dom.create(buildTZAutocomplete, moment, timezone, (val) => timezone.set(val))),
],
// At this point, we only need to worry about saving this one setting.
saveFunc: () => docInfo.timezone.saveOnly(timezone.get()),
// If timezone hasn't changed, there is nothing to save, so disable the Save button.
saveDisabled: Computed.create(owner, (use) => use(timezone) === docInfo.timezone.peek()),
};
});
}
// This matches the style used in showProfileModal in app/client/ui/AccountWidget.
const cssDataRow = styled('div', `
margin: 16px 0px;
font-size: ${vars.largeFontSize};
`);