Mirrors/rowy
1
0
Fork 0
mirror of https://github.com/rowyio/rowy.git synced 2026-02-24 04:01:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1419 from nithinrdy/allow-for-disabling-save-popups-in-tables

Browse Source 
Allow for disabling save popups in tables
This commit is contained in:
Shams
2023-10-06 01:33:50 -07:00
committed by GitHub
parent 0099bd1dac c0b04884e6
commit 65ba9973f2
6 changed files with 166 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/atoms/projectScope/user.ts
View File

@@ -30,6 +30,12 @@ export const themeOverriddenAtom = atomWithStorage(
false
);
/** User's default table settings (affecting saving and popup behavior) */
export const defaultTableSettingsAtom = atom((get) => {
const userSettings = get(userSettingsAtom);
return userSettings.defaultTableSettings;
});
/** Customized base theme based on project and user settings */
export const customizedThemesAtom = atom((get) => {
const publicSettings = get(publicSettingsAtom);

103
src/components/Settings/UserSettings/TableSettings.tsx Normal file
View File

@@ -0,0 +1,103 @@
import { merge } from "lodash-es";
import { IUserSettingsChildProps } from "@src/pages/Settings/UserSettingsPage";
import {
FormControl,
FormControlLabel,
Divider,
Checkbox,
Collapse,
} from "@mui/material";
export default function TableSettings({
settings,
updateSettings,
}: IUserSettingsChildProps) {
return (
<>
<FormControl sx={{ my: -10 / 10, display: "flex" }}>
<FormControlLabel
control={
<Checkbox
checked={Boolean(
settings.defaultTableSettings?.saveSortsPopupDisabled
)}
onChange={(e) => {
updateSettings({
defaultTableSettings: merge(settings.defaultTableSettings, {
saveSortsPopupDisabled: e.target.checked,
}),
});
}}
/>
}
label="Disable popup - to save sorting changes to the team"
style={{ marginLeft: -11, marginBottom: 13 }}
/>
<Collapse in={settings.defaultTableSettings?.saveSortsPopupDisabled}>
<FormControlLabel
control={
<Checkbox
checked={Boolean(
settings.defaultTableSettings?.automaticallyApplySorts
)}
onChange={(e) => {
updateSettings({
defaultTableSettings: merge(settings.defaultTableSettings, {
automaticallyApplySorts: e.target.checked,
}),
});
}}
/>
}
label="Automatically apply sorting changes to all users"
style={{ marginLeft: 20, marginBottom: 10, marginTop: -13 }}
/>
</Collapse>
<Divider />
<FormControlLabel
control={
<Checkbox
checked={Boolean(
settings.defaultTableSettings?.saveColumnSizingPopupDisabled
)}
onChange={(e) => {
updateSettings({
defaultTableSettings: merge(settings.defaultTableSettings, {
saveColumnSizingPopupDisabled: e.target.checked,
}),
});
}}
/>
}
label="Disable popup - to save column width changes to the team"
style={{ marginLeft: -11, marginTop: 13 }}
/>
<Collapse
in={settings.defaultTableSettings?.saveColumnSizingPopupDisabled}
>
<FormControlLabel
control={
<Checkbox
checked={Boolean(
settings.defaultTableSettings?.automaticallyApplyColumnSizing
)}
onChange={(e) => {
updateSettings({
defaultTableSettings: merge(settings.defaultTableSettings, {
automaticallyApplyColumnSizing: e.target.checked,
}),
});
}}
/>
}
label="Automatically apply column width changes to all users"
style={{ marginLeft: 20 }}
/>
</Collapse>
</FormControl>
</>
);
}

26
src/components/Table/ColumnHeader/useSaveTableSorts.tsx
View File

@@ -1,5 +1,5 @@
import { useCallback, useState } from "react";
import { useAtom } from "jotai";
import { useAtom, useAtomValue } from "jotai";
import { SnackbarKey, useSnackbar } from "notistack";
import LoadingButton from "@mui/lab/LoadingButton";
@@ -11,17 +11,25 @@ import {
tableScope,
updateTableSchemaAtom,
} from "@src/atoms/tableScope";
import { projectScope, updateUserSettingsAtom } from "@src/atoms/projectScope";
import {
defaultTableSettingsAtom,
projectScope,
updateUserSettingsAtom,
} from "@src/atoms/projectScope";
import { TableSort } from "@src/types/table";
function useSaveTableSorts(canEditColumns: boolean) {
const [updateTableSchema] = useAtom(updateTableSchemaAtom, tableScope);
const [updateUserSettings] = useAtom(updateUserSettingsAtom, projectScope);
const [tableId] = useAtom(tableIdAtom, tableScope);
const defaultTableSettings = useAtomValue(
defaultTableSettingsAtom,
projectScope
);
const { enqueueSnackbar, closeSnackbar } = useSnackbar();
const [snackbarId, setSnackbarId] = useState<SnackbarKey | null>(null);
// Offer to save when table sorts changes
// Offer to save when table sorts changes, depending on user settings
const trigger = useCallback(
(sorts: TableSort[]) => {
if (!updateTableSchema) throw new Error("Cannot update table schema");
@@ -33,6 +41,15 @@ function useSaveTableSorts(canEditColumns: boolean) {
});
}
if (!canEditColumns) return;
// If the user has disabled the popup, return early
if (defaultTableSettings?.saveSortsPopupDisabled) {
// If the user has `automaticallyApplySorts` set to true, apply the sorting before returning
if (defaultTableSettings?.automaticallyApplySorts) {
const updateTable = async () => await updateTableSchema({ sorts });
updateTable();
}
return;
}
if (snackbarId) {
closeSnackbar(snackbarId);
}
@@ -43,7 +60,7 @@ function useSaveTableSorts(canEditColumns: boolean) {
updateTable={async () => await updateTableSchema({ sorts })}
/>
),
anchorOrigin: { horizontal: "center", vertical: "top" },
anchorOrigin: { horizontal: "left", vertical: "bottom" },
})
);
@@ -57,6 +74,7 @@ function useSaveTableSorts(canEditColumns: boolean) {
tableId,
closeSnackbar,
updateTableSchema,
defaultTableSettings,
]
);

28
src/components/Table/useSaveColumnSizing.tsx
View File

@@ -1,5 +1,5 @@
import { useEffect, useState } from "react";
import { useSetAtom } from "jotai";
import { useAtomValue, useSetAtom } from "jotai";
import { useSnackbar } from "notistack";
import { useDebounce } from "use-debounce";
import { isEqual, isEmpty } from "lodash-es";
@@ -13,6 +13,10 @@ import {
updateColumnAtom,
IUpdateColumnOptions,
} from "@src/atoms/tableScope";
import {
defaultTableSettingsAtom,
projectScope,
} from "@src/atoms/projectScope";
import { DEBOUNCE_DELAY } from "./Table";
import { ColumnSizingState } from "@tanstack/react-table";
@@ -26,14 +30,31 @@ export function useSaveColumnSizing(
) {
const { enqueueSnackbar, closeSnackbar } = useSnackbar();
const updateColumn = useSetAtom(updateColumnAtom, tableScope);
const defaultTableSettings = useAtomValue(
defaultTableSettingsAtom,
projectScope
);
// Debounce for saving to schema
const [debouncedColumnSizing] = useDebounce(columnSizing, DEBOUNCE_DELAY, {
equalityFn: isEqual,
});
// Offer to save when column sizing changes
// Offer to save when column sizing changes, depending on user settings
useEffect(() => {
if (!canEditColumns || isEmpty(debouncedColumnSizing)) return;
// If the user has disabled the popup, return early
if (defaultTableSettings?.saveColumnSizingPopupDisabled) {
// If the user has `automaticallyApplyColumnSizing` set to true, apply the column width before returning
if (defaultTableSettings?.automaticallyApplyColumnSizing) {
const updateTable = async () => {
for (const [key, value] of Object.entries(debouncedColumnSizing)) {
await updateColumn({ key, config: { width: value } });
}
};
updateTable();
}
return;
}
const snackbarId = enqueueSnackbar("Save column sizes for all users?", {
action: (
@@ -42,7 +63,7 @@ export function useSaveColumnSizing(
updateColumn={updateColumn}
/>
),
anchorOrigin: { horizontal: "center", vertical: "top" },
anchorOrigin: { horizontal: "left", vertical: "bottom" },
});
return () => closeSnackbar(snackbarId);
@@ -52,6 +73,7 @@ export function useSaveColumnSizing(
enqueueSnackbar,
closeSnackbar,
updateColumn,
defaultTableSettings,
]);
return null;

2
src/pages/Settings/UserSettingsPage.tsx
View File

@@ -9,6 +9,7 @@ import SettingsSkeleton from "@src/components/Settings/SettingsSkeleton";
import SettingsSection from "@src/components/Settings/SettingsSection";
import Account from "@src/components/Settings/UserSettings/Account";
import Theme from "@src/components/Settings/UserSettings/Theme";
import TableSettings from "@src/components/Settings/UserSettings/TableSettings";
import Personalization from "@src/components/Settings/UserSettings/Personalization";
import {
@@ -57,6 +58,7 @@ export default function UserSettingsPage() {
const sections = [
{ title: "Account", Component: Account, props: childProps },
{ title: "Theme", Component: Theme, props: childProps },
{ title: "Table Settings", Component: TableSettings, props: childProps },
{ title: "Personalization", Component: Personalization, props: childProps },
];

9
src/types/settings.d.ts vendored
View File

@@ -50,7 +50,14 @@ export type UserSettings = Partial<{
theme: Record<"base" | "light" | "dark", ThemeOptions>;
favoriteTables: string[];
/** Stores user overrides */
/** Stores default user settings for all tables */
defaultTableSettings: Partial<{
saveSortsPopupDisabled: boolean;
automaticallyApplySorts: boolean;
saveColumnSizingPopupDisabled: boolean;
automaticallyApplyColumnSizing: boolean;
}>;
/** Stores table-specific user overrides */
tables: Record<
string,
Partial<{