2022-02-07 14:02:26 +00:00
|
|
|
import {GristDoc} from 'app/client/components/GristDoc';
|
2022-03-11 10:48:36 +00:00
|
|
|
import {copyToClipboard} from 'app/client/lib/copyToClipboard';
|
|
|
|
import {localStorageObs} from 'app/client/lib/localStorageObs';
|
|
|
|
import {setTestState} from 'app/client/lib/testState';
|
|
|
|
import {TableRec} from 'app/client/models/DocModel';
|
2022-04-01 18:17:06 +00:00
|
|
|
import {docListHeader, docMenuTrigger} from 'app/client/ui/DocMenuCss';
|
2022-03-11 10:48:36 +00:00
|
|
|
import {showTransientTooltip} from 'app/client/ui/tooltips';
|
|
|
|
import {buttonSelect, cssButtonSelect} from 'app/client/ui2018/buttonSelect';
|
|
|
|
import * as css from 'app/client/ui2018/cssVars';
|
|
|
|
import {icon} from 'app/client/ui2018/icons';
|
|
|
|
import {menu, menuItem, menuText} from 'app/client/ui2018/menus';
|
|
|
|
import {confirmModal} from 'app/client/ui2018/modals';
|
2022-04-01 18:17:06 +00:00
|
|
|
import {Disposable, dom, fromKo, makeTestId, MultiHolder, styled} from 'grainjs';
|
2022-03-11 10:48:36 +00:00
|
|
|
|
|
|
|
const testId = makeTestId('test-raw-data-');
|
2022-02-07 14:02:26 +00:00
|
|
|
|
|
|
|
export class DataTables extends Disposable {
|
|
|
|
constructor(private _gristDoc: GristDoc) {
|
|
|
|
super();
|
|
|
|
}
|
|
|
|
|
|
|
|
public buildDom() {
|
2022-03-11 10:48:36 +00:00
|
|
|
const holder = new MultiHolder();
|
|
|
|
// Get the user id, to remember selected layout on the next visit.
|
|
|
|
const userId = this._gristDoc.app.topAppModel.appObs.get()?.currentUser?.id ?? 0;
|
|
|
|
const view = holder.autoDispose(localStorageObs(`u=${userId}:raw:viewType`, "list"));
|
|
|
|
return container(
|
|
|
|
dom.autoDispose(holder),
|
2022-04-01 18:17:06 +00:00
|
|
|
cssTableList(
|
2022-03-11 10:48:36 +00:00
|
|
|
/*************** List section **********/
|
|
|
|
testId('list'),
|
|
|
|
cssBetween(
|
|
|
|
docListHeader('Raw data tables'),
|
|
|
|
cssSwitch(
|
|
|
|
buttonSelect<any>(
|
|
|
|
view,
|
|
|
|
[
|
|
|
|
{value: 'card', icon: 'TypeTable'},
|
|
|
|
{value: 'list', icon: 'TypeCardList'},
|
|
|
|
],
|
|
|
|
css.testId('view-mode'),
|
|
|
|
cssButtonSelect.cls("-light")
|
|
|
|
)
|
|
|
|
)
|
|
|
|
),
|
|
|
|
cssList(
|
|
|
|
cssList.cls(use => `-${use(view)}`),
|
|
|
|
dom.forEach(fromKo(this._gristDoc.docModel.allTables.getObservable()), tableRec =>
|
|
|
|
cssItem(
|
|
|
|
testId('table'),
|
|
|
|
cssItemContent(
|
2022-04-13 17:26:59 +00:00
|
|
|
cssIcon('TypeTable',
|
|
|
|
// Element to click in tests.
|
|
|
|
dom.domComputed(use => `table-id-${use(tableRec.tableId)}`)
|
|
|
|
),
|
2022-03-11 10:48:36 +00:00
|
|
|
cssLabels(
|
|
|
|
cssTitleLine(
|
|
|
|
cssLine(
|
|
|
|
dom.text(use2 => use2(use2(tableRec.rawViewSection).title) || use2(tableRec.tableId)),
|
|
|
|
testId('table-title'),
|
|
|
|
)
|
|
|
|
),
|
|
|
|
cssIdLine(
|
|
|
|
cssIdLineContent(
|
|
|
|
cssUpperCase("Table id: "),
|
|
|
|
cssTableId(
|
|
|
|
testId('table-id'),
|
|
|
|
dom.text(tableRec.tableId),
|
|
|
|
),
|
|
|
|
{ title : 'Click to copy' },
|
|
|
|
dom.on('click', async (e, t) => {
|
|
|
|
e.stopImmediatePropagation();
|
|
|
|
e.preventDefault();
|
|
|
|
showTransientTooltip(t, 'Table id copied to clipboard', {
|
|
|
|
key: 'copy-table-id'
|
|
|
|
});
|
|
|
|
await copyToClipboard(tableRec.tableId.peek());
|
|
|
|
setTestState({clipboard: tableRec.tableId.peek()});
|
|
|
|
})
|
|
|
|
)
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
cssDots(docMenuTrigger(
|
|
|
|
testId('table-dots'),
|
|
|
|
icon('Dots'),
|
|
|
|
menu(() => this._menuItems(tableRec), {placement: 'bottom-start'}),
|
|
|
|
dom.on('click', (ev) => { ev.stopPropagation(); ev.preventDefault(); }),
|
|
|
|
)),
|
|
|
|
dom.on('click', () => {
|
|
|
|
const sectionId = tableRec.rawViewSection.peek().getRowId();
|
|
|
|
if (!sectionId) {
|
|
|
|
throw new Error(`Table ${tableRec.tableId.peek()} doesn't have a raw view section.`);
|
|
|
|
}
|
|
|
|
this._gristDoc.viewModel.activeSectionId(sectionId);
|
|
|
|
})
|
|
|
|
)
|
|
|
|
)
|
|
|
|
),
|
2022-02-07 14:02:26 +00:00
|
|
|
),
|
2022-03-11 10:48:36 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
private _menuItems(t: TableRec) {
|
|
|
|
const {isReadonly, docModel} = this._gristDoc;
|
|
|
|
return [
|
|
|
|
// TODO: in the upcoming diff
|
|
|
|
// menuItem(() => this._renameTable(t), "Rename", testId('rename'),
|
|
|
|
// dom.cls('disabled', isReadonly)),
|
|
|
|
menuItem(
|
|
|
|
() => this._removeTable(t),
|
|
|
|
'Remove',
|
|
|
|
testId('menu-remove'),
|
|
|
|
dom.cls('disabled', use => use(isReadonly) || use(docModel.allTables.getObservable()).length <= 1 )
|
|
|
|
),
|
|
|
|
dom.maybe(isReadonly, () => menuText('You do not have edit access to this document')),
|
2022-02-07 14:02:26 +00:00
|
|
|
];
|
|
|
|
}
|
2022-03-11 10:48:36 +00:00
|
|
|
|
|
|
|
private _removeTable(t: TableRec) {
|
|
|
|
const {docModel} = this._gristDoc;
|
|
|
|
function doRemove() {
|
|
|
|
return docModel.docData.sendAction(['RemoveTable', t.tableId.peek()]);
|
|
|
|
}
|
|
|
|
confirmModal(`Delete ${t.tableId()} data, and remove it from all pages?`, 'Delete', doRemove);
|
|
|
|
}
|
|
|
|
|
|
|
|
// private async _renameTable(t: TableRec) {
|
|
|
|
// // TODO:
|
|
|
|
// }
|
2022-02-07 14:02:26 +00:00
|
|
|
}
|
2022-03-11 10:48:36 +00:00
|
|
|
|
|
|
|
const container = styled('div', `
|
2022-04-01 18:17:06 +00:00
|
|
|
overflow-y: auto;
|
2022-03-11 10:48:36 +00:00
|
|
|
position: relative;
|
|
|
|
`);
|
|
|
|
|
|
|
|
const cssBetween = styled('div', `
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
`);
|
|
|
|
|
|
|
|
// Below styles makes the list view look like a card view
|
|
|
|
// on smaller screens.
|
|
|
|
|
|
|
|
const cssSwitch = styled('div', `
|
|
|
|
@media ${css.mediaXSmall} {
|
|
|
|
& {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
|
|
|
const cssList = styled('div', `
|
|
|
|
display: flex;
|
|
|
|
&-list {
|
|
|
|
flex-direction: column;
|
|
|
|
gap: 8px;
|
|
|
|
}
|
|
|
|
&-card {
|
|
|
|
flex-direction: row;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
gap: 24px;
|
|
|
|
}
|
|
|
|
@media ${css.mediaSmall} {
|
|
|
|
& {
|
|
|
|
gap: 12px !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
|
|
|
const cssItemContent = styled('div', `
|
|
|
|
display: flex;
|
|
|
|
flex: 1;
|
|
|
|
overflow: hidden;
|
|
|
|
.${cssList.className}-list & {
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.${cssList.className}-card & {
|
|
|
|
align-items: flex-start;
|
|
|
|
}
|
|
|
|
@media ${css.mediaXSmall} {
|
|
|
|
& {
|
|
|
|
align-items: flex-start !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
|
|
|
const cssItem = styled('div', `
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
cursor: pointer;
|
|
|
|
border-radius: 3px;
|
|
|
|
max-width: 750px;
|
|
|
|
border: 1px solid ${css.colors.mediumGrey};
|
|
|
|
&:hover {
|
|
|
|
border-color: ${css.colors.slate};
|
|
|
|
}
|
|
|
|
.${cssList.className}-list & {
|
|
|
|
height: calc(1em * 40/13); /* 40px for 13px font */
|
|
|
|
}
|
|
|
|
.${cssList.className}-card & {
|
|
|
|
width: 300px;
|
|
|
|
height: calc(1em * 56/13); /* 56px for 13px font */
|
|
|
|
}
|
|
|
|
@media ${css.mediaSmall} {
|
|
|
|
.${cssList.className}-card & {
|
|
|
|
width: calc(50% - 12px);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@media ${css.mediaXSmall} {
|
|
|
|
& {
|
|
|
|
width: 100% !important;
|
|
|
|
height: calc(1em * 56/13) !important; /* 56px for 13px font */
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
|
|
|
const cssIcon = styled(icon, `
|
|
|
|
--icon-color: ${css.colors.lightGreen};
|
|
|
|
margin-left: 12px;
|
|
|
|
margin-right: 8px;
|
|
|
|
flex: none;
|
|
|
|
.${cssList.className}-card & {
|
|
|
|
margin-top: 1px;
|
|
|
|
}
|
|
|
|
@media ${css.mediaXSmall} {
|
|
|
|
& {
|
|
|
|
margin-top: 1px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
|
|
|
const cssOverflow = styled('div', `
|
|
|
|
overflow: hidden;
|
|
|
|
`);
|
|
|
|
|
|
|
|
const cssLabels = styled(cssOverflow, `
|
|
|
|
overflow: hidden;
|
|
|
|
display: flex;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
align-items: center;
|
|
|
|
flex: 1;
|
|
|
|
`);
|
|
|
|
|
|
|
|
const cssLine = styled('span', `
|
|
|
|
white-space: nowrap;
|
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
`);
|
|
|
|
|
|
|
|
const cssTitleLine = styled(cssOverflow, `
|
|
|
|
display: flex;
|
|
|
|
min-width: 50%;
|
|
|
|
.${cssList.className}-card & {
|
|
|
|
flex-basis: 100%;
|
|
|
|
}
|
|
|
|
@media ${css.mediaXSmall} {
|
|
|
|
& {
|
|
|
|
flex-basis: 100% !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
|
|
|
const cssIdLine = styled(cssOverflow, `
|
|
|
|
display: flex;
|
|
|
|
min-width: 40%;
|
|
|
|
.${cssList.className}-card & {
|
|
|
|
flex-basis: 100%;
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
|
|
|
const cssIdLineContent = styled(cssOverflow, `
|
|
|
|
display: flex;
|
|
|
|
cursor: default;
|
|
|
|
align-items: baseline;
|
|
|
|
color: ${css.colors.slate};
|
|
|
|
transition: background 0.05s;
|
|
|
|
padding: 1px 2px;
|
|
|
|
&:hover {
|
|
|
|
background: ${css.colors.lightGrey};
|
|
|
|
}
|
|
|
|
@media ${css.mediaSmall} {
|
|
|
|
& {
|
|
|
|
padding: 0px 2px !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
|
|
|
const cssTableId = styled(cssLine, `
|
|
|
|
font-size: ${css.vars.smallFontSize};
|
|
|
|
`);
|
|
|
|
|
|
|
|
const cssUpperCase = styled('span', `
|
|
|
|
text-transform: uppercase;
|
|
|
|
letter-spacing: 0.81px;
|
|
|
|
font-weight: 500;
|
|
|
|
font-size: 9px; /* xxsmallFontSize is to small */
|
|
|
|
margin-right: 2px;
|
|
|
|
flex: 0;
|
|
|
|
white-space: nowrap;
|
|
|
|
`);
|
|
|
|
|
|
|
|
const cssDots = styled('div', `
|
|
|
|
flex: none;
|
|
|
|
margin-right: 8px;
|
|
|
|
`);
|
|
|
|
|
2022-04-01 18:17:06 +00:00
|
|
|
const cssTableList = styled('div', `
|
|
|
|
overflow-y: auto;
|
|
|
|
position: relative;
|
|
|
|
margin-bottom: 56px;
|
2022-03-11 10:48:36 +00:00
|
|
|
`);
|