IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: columns positions are saved correctly into local storage

Browse Source
This commit is contained in:
Vladimir Khvan 2023-06-05 20:04:29 +05:00
parent 8246466f7d
commit 5d02801e6c
6 changed files with 103 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/WebhookHistoryTable/HistoryTableView/HistoryTableHeader.js
View File

@ -3,9 +3,8 @@ import TableHeader from "@docspace/components/table-container/TableHeader";
import { inject, observer } from "mobx-react";
import { useTranslation } from "react-i18next";
const TABLE_VERSION = "6";
const TABLE_COLUMNS = `webhooksHistoryTableColumns_ver-${TABLE_VERSION}`;
const COLUMNS_SIZE = `webhooksHistoryColumnsSize_ver-${TABLE_VERSION}`;
const TABLE_VERSION = "5";
const TABLE_COLUMNS = `webhooksHistoryColumns_ver-${TABLE_VERSION}`;
const getColumns = (defaultColumns, userId) => {
const storageColumns = localStorage.getItem(`${TABLE_COLUMNS}=${userId}`);
@ -27,7 +26,14 @@ const getColumns = (defaultColumns, userId) => {
};
const HistoryTableHeader = (props) => {
const { userId, sectionWidth, tableRef } = props;
const {
userId,
sectionWidth,
tableRef,
columnStorageName,
columnInfoPanelStorageName,
setHideColumns,
} = props;
const { t, ready } = useTranslation(["Webhooks", "People"]);
const defaultColumns = [
@ -59,11 +65,7 @@ const HistoryTableHeader = (props) => {
const [columns, setColumns] = useState(getColumns(defaultColumns, userId));
useEffect(() => {
ready && setColumns(getColumns(defaultColumns, userId));
}, [ready]);
const onColumnChange = (key, e, userId) => {
function onColumnChange(key, e) {
const columnIndex = columns.findIndex((c) => c.key === key);
if (columnIndex === -1) return;
@ -76,19 +78,25 @@ const HistoryTableHeader = (props) => {
const tableColumns = columns.map((c) => c.enable && c.key);
localStorage.setItem(`${TABLE_COLUMNS}=${userId}`, tableColumns);
};
}
useEffect(() => {
ready && setColumns(getColumns(defaultColumns, userId));
}, [ready]);
return (
<TableHeader
columns={columns}
checkboxSize="32px"
containerRef={tableRef}
columns={columns}
columnStorageName={columnStorageName}
columnInfoPanelStorageName={columnInfoPanelStorageName}
sectionWidth={sectionWidth}
checkboxMargin="12px"
showSettings={false}
useReactWindow
setHideColumns={() => {}}
infoPanelVisible={true}
columnStorageName={`${COLUMNS_SIZE}=${userId}`}
setHideColumns={setHideColumns}
infoPanelVisible={false}
/>
);
};

4
packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/WebhookHistoryTable/HistoryTableView/HistoryTableRow.js
View File

@ -39,7 +39,7 @@ const StyledWrapper = styled.div`
`;
const HistoryTableRow = (props) => {
const { item, toggleEventId, isIdChecked, retryWebhookEvent } = props;
const { item, toggleEventId, isIdChecked, retryWebhookEvent, hideColumns } = props;
const { t } = useTranslation(["Webhooks", "Common"]);
const navigate = useNavigate();
@ -86,7 +86,7 @@ const HistoryTableRow = (props) => {
return (
<StyledWrapper className={isChecked ? "selected-table-row" : ""} onClick={onChange}>
<StyledTableRow contextOptions={contextOptions} checked={isChecked}>
<StyledTableRow contextOptions={contextOptions} checked={isChecked} hideColumns={hideColumns}>
<TableCell>
<TableCell checked={isChecked} className="noPadding">
<Checkbox onChange={onChange} isChecked={isChecked} />

35
packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/WebhookHistoryTable/HistoryTableView/index.js
View File

@ -1,4 +1,4 @@
import React, { useRef, useEffect } from "react";
import React, { useState, useRef, useEffect } from "react";
import styled from "styled-components";
@ -18,7 +18,7 @@ import { Base } from "@docspace/components/themes";
const TableWrapper = styled(TableContainer)`
margin-top: 0;
.table-container_header{
.table-container_header {
position: absolute;
}
@ -44,6 +44,10 @@ const TableWrapper = styled(TableContainer)`
TableWrapper.defaultProps = { theme: Base };
const TABLE_VERSION = "5";
const COLUMNS_SIZE = `webhooksHistoryColumnsSize_ver-${TABLE_VERSION}`;
const INFO_PANEL_COLUMNS_SIZE = `infoPanelWebhooksHistoryColumnsSize_ver-${TABLE_VERSION}`;
const HistoryTableView = (props) => {
const {
sectionWidth,
@ -55,9 +59,11 @@ const HistoryTableView = (props) => {
fetchMoreItems,
formatFilters,
historyFilters,
userId,
} = props;
const tableRef = useRef(null);
const [hideColumns, setHideColumns] = useState(false);
const { id } = useParams();
@ -75,6 +81,9 @@ const HistoryTableView = (props) => {
fetchMoreItems({ ...params, configId: id, count: 10 });
};
const columnStorageName = `${COLUMNS_SIZE}=${userId}`;
const columnInfoPanelStorageName = `${INFO_PANEL_COLUMNS_SIZE}=${userId}`;
return (
<TableWrapper
forwardedRef={tableRef}
@ -82,26 +91,41 @@ const HistoryTableView = (props) => {
gridTemplateColumns: "300px 100px 400px 24px",
}}
useReactWindow>
<HistoryTableHeader sectionWidth={sectionWidth} tableRef={tableRef} />
<HistoryTableHeader
sectionWidth={sectionWidth}
tableRef={tableRef}
columnStorageName={columnStorageName}
columnInfoPanelStorageName={columnInfoPanelStorageName}
setHideColumns={setHideColumns}
/>
<TableBody
itemHeight={49}
useReactWindow
infoPanelVisible={false}
columnStorageName={columnStorageName}
columnInfoPanelStorageName={columnInfoPanelStorageName}
filesLength={historyItems.length}
fetchMoreFiles={fetchMoreFiles}
hasMoreFiles={hasMoreItems}
itemCount={totalItems}>
{historyItems.map((item) => (
<HistoryTableRow key={item.id} item={{ ...item, title: item.id }} />
<HistoryTableRow
key={item.id}
item={{ ...item, title: item.id }}
hideColumns={hideColumns}
/>
))}
</TableBody>
</TableWrapper>
);
};
export default inject(({ setup, webhooksStore }) => {
export default inject(({ setup, webhooksStore, auth }) => {
const { viewAs, setViewAs } = setup;
const { historyItems, fetchMoreItems, hasMoreItems, totalItems, formatFilters, historyFilters } =
webhooksStore;
const { id: userId } = auth.userStore.user;
return {
viewAs,
setViewAs,
@ -111,5 +135,6 @@ export default inject(({ setup, webhooksStore }) => {
totalItems,
formatFilters,
historyFilters,
userId,
};
})(observer(HistoryTableView));

35
packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksTableView/WebhookTableHeader.js
View File

@ -1,12 +1,11 @@
import React, { useState, useRef } from "react";
import React, { useState } from "react";
import TableHeader from "@docspace/components/table-container/TableHeader";
import { useTranslation } from "react-i18next";
import { inject, observer } from "mobx-react";
const TABLE_VERSION = "5";
const TABLE_COLUMNS = `webhooksConfigTableColumns_ver-${TABLE_VERSION}`;
const COLUMNS_SIZE = `webhooksConfigColumnsSize_ver-${TABLE_VERSION}`;
const TABLE_COLUMNS = `webhooksConfigColumns_ver-${TABLE_VERSION}`;
const getColumns = (defaultColumns, userId) => {
const storageColumns = localStorage.getItem(`${TABLE_COLUMNS}=${userId}`);
@ -28,10 +27,17 @@ const getColumns = (defaultColumns, userId) => {
};
const WebhookTableHeader = (props) => {
const { userId, sectionWidth, tableRef } = props;
const {
userId,
sectionWidth,
tableRef,
columnStorageName,
columnInfoPanelStorageName,
setHideColumns,
} = props;
const { t } = useTranslation(["Webhooks", "Common"]);
const defaultColumns = useRef([
const defaultColumns = [
{
key: "Name",
title: t("Common:Name"),
@ -56,11 +62,11 @@ const WebhookTableHeader = (props) => {
resizable: true,
onChange: onColumnChange,
},
]);
];
const [columns, setColumns] = useState(getColumns(defaultColumns.current, userId));
const [columns, setColumns] = useState(getColumns(defaultColumns, userId));
const onColumnChange = (key, e) => {
function onColumnChange(key, e) {
const columnIndex = columns.findIndex((c) => c.key === key);
if (columnIndex === -1) return;
@ -73,18 +79,21 @@ const WebhookTableHeader = (props) => {
const tableColumns = columns.map((c) => c.enable && c.key);
localStorage.setItem(`${TABLE_COLUMNS}=${userId}`, tableColumns);
};
}
return (
<TableHeader
columns={columns}
checkboxSize="48px"
containerRef={tableRef}
columns={columns}
columnStorageName={columnStorageName}
columnInfoPanelStorageName={columnInfoPanelStorageName}
sectionWidth={sectionWidth}
checkboxMargin="12px"
showSettings={false}
useReactWindow
setHideColumns={() => {}}
infoPanelVisible={true}
columnStorageName={`${COLUMNS_SIZE}=${userId}`}
setHideColumns={setHideColumns}
infoPanelVisible={false}
/>
);
};

3
packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksTableView/WebhooksTableRow.js
View File

@ -43,6 +43,7 @@ const WebhooksTableRow = (props) => {
openSettingsModal,
openDeleteModal,
setCurrentWebhook,
hideColumns,
} = props;
const navigate = useNavigate();
@ -111,7 +112,7 @@ const WebhooksTableRow = (props) => {
return (
<>
<StyledWrapper onClick={handleRowClick}>
<StyledTableRow contextOptions={contextOptions}>
<StyledTableRow contextOptions={contextOptions} hideColumns={hideColumns}>
<TableCell>
<Text as="span" fontWeight={600} className="mr-8 textOverflow">
{webhook.name}{" "}

34
packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksTableView/index.js
View File

@ -1,4 +1,4 @@
import React, { useRef, useEffect } from "react";
import React, { useState, useRef, useEffect } from "react";
import { inject, observer } from "mobx-react";
import { isMobile } from "react-device-detect";
@ -30,6 +30,10 @@ const TableWrapper = styled(TableContainer)`
TableWrapper.defaultProps = { theme: Base };
const TABLE_VERSION = "5";
const COLUMNS_SIZE = `webhooksConfigColumnsSize_ver-${TABLE_VERSION}`;
const INFO_PANEL_COLUMNS_SIZE = `infoPanelWebhooksConfigColumnsSize_ver-${TABLE_VERSION}`;
const WebhooksTableView = (props) => {
const {
webhooks,
@ -39,9 +43,11 @@ const WebhooksTableView = (props) => {
setViewAs,
openSettingsModal,
openDeleteModal,
userId,
} = props;
const tableRef = useRef(null);
const [hideColumns, setHideColumns] = useState(false);
useEffect(() => {
if (!sectionWidth) return;
@ -52,17 +58,24 @@ const WebhooksTableView = (props) => {
}
}, [sectionWidth]);
const columnStorageName = `${COLUMNS_SIZE}=${userId}`;
const columnInfoPanelStorageName = `${INFO_PANEL_COLUMNS_SIZE}=${userId}`;
return (
<TableWrapper
forwardedRef={tableRef}
style={{
gridTemplateColumns: "200px 500px 110px 24px",
}}
useReactWindow>
<WebhookTableHeader sectionWidth={sectionWidth} tableRef={tableRef} />
<TableWrapper forwardedRef={tableRef} useReactWindow>
<WebhookTableHeader
sectionWidth={sectionWidth}
tableRef={tableRef}
columnStorageName={columnStorageName}
columnInfoPanelStorageName={columnInfoPanelStorageName}
setHideColumns={setHideColumns}
/>
<TableBody
itemHeight={49}
useReactWindow
infoPanelVisible={false}
columnStorageName={columnStorageName}
columnInfoPanelStorageName={columnInfoPanelStorageName}
filesLength={webhooks.length}
fetchMoreFiles={loadWebhooks}
hasMoreFiles={false}
@ -74,6 +87,7 @@ const WebhooksTableView = (props) => {
index={index}
openSettingsModal={openSettingsModal}
openDeleteModal={openDeleteModal}
hideColumns={hideColumns}
/>
))}
</TableBody>
@ -81,15 +95,17 @@ const WebhooksTableView = (props) => {
);
};
export default inject(({ webhooksStore, setup }) => {
export default inject(({ webhooksStore, setup, auth }) => {
const { webhooks, loadWebhooks } = webhooksStore;
const { viewAs, setViewAs } = setup;
const { id: userId } = auth.userStore.user;
return {
webhooks,
viewAs,
setViewAs,
loadWebhooks,
userId,
};
})(observer(WebhooksTableView));