Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2026-03-02 04:09:24 +00:00
Code Issues Projects Releases Wiki Activity

feat: forms inhibited when summary selected and vice versa (#1037)

Browse Source
This commit is contained in:
Grégoire Cutzach
2024-08-14 16:59:06 +02:00
committed by GitHub
parent dfb816888e
commit 93ed1bec5e
2 changed files with 85 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
app/client/ui/PageWidgetPicker.ts
View File

@@ -95,25 +95,46 @@ export interface IOptions extends ISelectOptions {
placement?: Popper.Placement;
}
export interface ICompatibleTypes {
// true if "New Page" is selected in Page Picker
isNewPage: Boolean | undefined;
// true if can be summarized
summarize: Boolean;
}
const testId = makeTestId('test-wselect-');
// The picker disables some choices that do not make much sense. This function return the list of
// compatible types given the tableId and whether user is creating a new page or not.
function getCompatibleTypes(tableId: TableRef, isNewPage: boolean|undefined): IWidgetType[] {
function getCompatibleTypes(tableId: TableRef,
{isNewPage, summarize}: ICompatibleTypes): IWidgetType[] {
let compatibleTypes: Array<IWidgetType> = [];
if (tableId !== 'New Table') {
return ['record', 'single', 'detail', 'chart', 'custom', 'custom.calendar', 'form'];
compatibleTypes = ['record', 'single', 'detail', 'chart', 'custom', 'custom.calendar', 'form'];
} else if (isNewPage) {
// New view + new table means we'll be switching to the primary view.
return ['record', 'form'];
compatibleTypes = ['record', 'form'];
} else {
// The type 'chart' makes little sense when creating a new table.
return ['record', 'single', 'detail', 'form'];
compatibleTypes = ['record', 'single', 'detail', 'form'];
}
return summarize ? compatibleTypes.filter((el) => isSummaryCompatible(el)) : compatibleTypes;
}
// The Picker disables some choices that do not make much sense.
// This function return a boolean telling if summary can be used with this type.
function isSummaryCompatible(widgetType: IWidgetType): boolean {
const incompatibleTypes: Array<IWidgetType> = ['form'];
return !incompatibleTypes.includes(widgetType);
}
// Whether table and type make for a valid selection whether the user is creating a new page or not.
function isValidSelection(table: TableRef, type: IWidgetType, isNewPage: boolean|undefined) {
return table !== null && getCompatibleTypes(table, isNewPage).includes(type);
function isValidSelection(table: TableRef,
type: IWidgetType,
{isNewPage, summarize}: ICompatibleTypes) {
return table !== null && getCompatibleTypes(table, {isNewPage, summarize}).includes(type);
}
export type ISaveFunc = (val: IPageWidget) => Promise<any>;
@@ -213,7 +234,13 @@ export function buildPageWidgetPicker(
// whether the current selection is valid
function isValid() {
return isValidSelection(value.table.get(), value.type.get(), options.isNewPage);
return isValidSelection(
value.table.get(),
value.type.get(),
{
isNewPage: options.isNewPage,
summarize: value.summarize.get()
});
}
// Summarizing a table causes the 'Group By' panel to expand on the right. To prevent it from
@@ -299,7 +326,7 @@ export class PageWidgetSelect extends Disposable {
null;
private _isNewTableDisabled = Computed.create(this, this._value.type, (use, type) => !isValidSelection(
'New Table', type, this._options.isNewPage));
'New Table', type, {isNewPage: this._options.isNewPage, summarize: use(this._value.summarize)}));
constructor(
private _value: IWidgetValueObs,
@@ -318,7 +345,9 @@ export class PageWidgetSelect extends Disposable {
header(t("Select Widget")),
sectionTypes.map((value) => {
const widgetInfo = getWidgetTypes(value);
const disabled = computed(this._value.table, (use, tid) => this._isTypeDisabled(value, tid));
const disabled = computed(this._value.table,
(use, tid) => this._isTypeDisabled(value, tid, use(this._value.summarize))
);
return cssEntry(
dom.autoDispose(disabled),
cssTypeIcon(widgetInfo.icon),
@@ -355,11 +384,14 @@ export class PageWidgetSelect extends Disposable {
cssEntry.cls('-selected', (use) => use(this._value.table) === table.id()),
testId('table-label')
),
cssPivot(
cssBigIcon('Pivot'),
cssEntry.cls('-selected', (use) => use(this._value.summarize) && use(this._value.table) === table.id()),
dom.on('click', (ev, el) => this._selectPivot(table.id(), el as HTMLElement)),
testId('pivot'),
cssPivot(
cssBigIcon('Pivot'),
cssEntry.cls('-selected', (use) => use(this._value.summarize) &&
use(this._value.table) === table.id()
),
cssEntry.cls('-disabled', (use) => !isSummaryCompatible(use(this._value.type))),
dom.on('click', (ev, el) => this._selectPivot(table.id(), el as HTMLElement)),
testId('pivot'),
),
testId('table'),
)
@@ -410,7 +442,12 @@ export class PageWidgetSelect extends Disposable {
// there are no changes.
this._options.buttonLabel || t("Add to Page"),
dom.prop('disabled', (use) => !isValidSelection(
use(this._value.table), use(this._value.type), this._options.isNewPage)
use(this._value.table),
use(this._value.type),
{
isNewPage: this._options.isNewPage,
summarize: use(this._value.summarize)
})
),
dom.on('click', () => this._onSave().catch(reportError)),
testId('addBtn'),
@@ -464,11 +501,11 @@ export class PageWidgetSelect extends Disposable {
this._value.columns.set(newIds);
}
private _isTypeDisabled(type: IWidgetType, table: TableRef) {
private _isTypeDisabled(type: IWidgetType, table: TableRef, isSummaryOn: boolean) {
if (table === null) {
return false;
}
return !getCompatibleTypes(table, this._options.isNewPage).includes(type);
return !getCompatibleTypes(table, {isNewPage: this._options.isNewPage, summarize: isSummaryOn}).includes(type);
}
}
@@ -535,6 +572,7 @@ const cssEntry = styled('div', `
&-disabled {
color: ${theme.widgetPickerItemDisabledBg};
cursor: default;
pointer-events: none;
}
&-disabled&-selected {
background-color: inherit;
@@ -578,6 +616,10 @@ const cssBigIcon = styled(icon, `
width: 24px;
height: 24px;
background-color: ${theme.widgetPickerSummaryIcon};
.${cssEntry.className}-disabled > & {
opacity: 0.25;
filter: saturate(0);
}
`);
const cssFooter = styled('div', `