gristlabs_grist-core/app/client/ui/DuplicateTable.ts

123 lines
3.6 KiB
TypeScript
Raw Normal View History

import {GristDoc} from 'app/client/components/GristDoc';
import {cssInput} from 'app/client/ui/cssInput';
import {cssField} from 'app/client/ui/MakeCopyMenu';
import {labeledSquareCheckbox} from 'app/client/ui2018/checkbox';
import {colors} from 'app/client/ui2018/cssVars';
import {icon} from 'app/client/ui2018/icons';
import {cssLink} from 'app/client/ui2018/links';
import {saveModal} from 'app/client/ui2018/modals';
import {commonUrls} from 'app/common/gristUrls';
import {Computed, Disposable, dom, input, makeTestId, Observable, styled} from 'grainjs';
const testId = makeTestId('test-duplicate-table-');
/**
* Response returned by a DuplicateTable user action.
*/
export interface DuplicateTableResponse {
/** Row id of the new table. */
id: number;
/** Table id of the new table. */
table_id: string;
/** Row id of the new raw view section. */
raw_section_id: number;
}
export interface DuplicateTableOptions {
onSuccess?(response: DuplicateTableResponse): void;
}
/**
* Shows a modal with options for duplicating the table `tableId`.
*/
export function duplicateTable(
gristDoc: GristDoc,
tableId: string,
{onSuccess}: DuplicateTableOptions = {}
) {
saveModal((_ctl, owner) => {
const duplicateTableModal = DuplicateTableModal.create(owner, gristDoc, tableId);
return {
title: 'Duplicate Table',
body: duplicateTableModal.buildDom(),
saveFunc: async () => {
const response = await duplicateTableModal.save();
onSuccess?.(response);
},
saveDisabled: duplicateTableModal.saveDisabled,
width: 'normal',
};
});
}
class DuplicateTableModal extends Disposable {
private _newTableName = Observable.create<string>(this, '');
private _includeData = Observable.create<boolean>(this, false);
private _saveDisabled = Computed.create(this, this._newTableName, (_use, name) => !name.trim());
constructor(private _gristDoc: GristDoc, private _tableId: string) {
super();
}
public get saveDisabled() { return this._saveDisabled; }
public save() {
return this._duplicateTable();
}
public buildDom() {
return [
cssField(
input(
this._newTableName,
{onInput: true},
{placeholder: 'Name for new table'},
(elem) => { setTimeout(() => { elem.focus(); }, 20); },
dom.on('focus', (_ev, elem) => { elem.select(); }),
dom.cls(cssInput.className),
testId('name'),
),
),
cssWarning(
cssWarningIcon('Warning'),
dom('div',
"Instead of duplicating tables, it's usually better to segment data using linked views. ",
cssLink({href: commonUrls.helpLinkingWidgets, target: '_blank'}, 'Read More.')
),
),
cssField(
cssCheckbox(
this._includeData,
'Copy all data in addition to the table structure.',
testId('copy-all-data'),
),
),
dom.maybe(this._includeData, () => cssWarning(
cssWarningIcon('Warning'),
dom('div', 'Only the document default access rules will apply to the copy.'),
testId('acl-warning'),
)),
];
}
private _duplicateTable() {
const {docData} = this._gristDoc;
const [newTableName, includeData] = [this._newTableName.get(), this._includeData.get()];
return docData.sendAction(['DuplicateTable', this._tableId, newTableName, includeData]);
}
}
const cssCheckbox = styled(labeledSquareCheckbox, `
margin-top: 8px;
`);
const cssWarning = styled('div', `
display: flex;
column-gap: 8px;
`);
const cssWarningIcon = styled(icon, `
--icon-color: ${colors.orange};
flex-shrink: 0;
`);