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

row selection was added

Browse Source
This commit is contained in:
Vladimir Khvan 2023-06-01 16:30:43 +05:00
parent c3c05cc362
commit d3cab1c774
3 changed files with 98 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,7 +33,9 @@ export const WebhookTableHeader = ({ sectionWidth, tableRef }) => {
containerRef={tableRef}
sectionWidth={sectionWidth}
showSettings={false}
style={{ position: "absolute" }}
useReactWindow
setHideColumns={true}
infoPanelVisible={true}
/>
);
};

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

@ -18,6 +18,10 @@ import StatusBadge from "../../StatusBadge";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
const StyledWrapper = styled.div`
display: contents;
`;
const StyledTableRow = styled(TableRow)`
.table-container_cell {
padding-right: 30px;
@ -32,7 +36,13 @@ const StyledTableRow = styled(TableRow)`
}
`;
export const WebhooksTableRow = ({ webhook, toggleEnabled, deleteWebhook, editWebhook }) => {
export const WebhooksTableRow = ({
webhook,
toggleEnabled,
deleteWebhook,
editWebhook,
setTitleHistory,
}) => {
const navigate = useNavigate();
const { t } = useTranslation(["Webhooks", "Common"]);
@ -45,8 +55,25 @@ export const WebhooksTableRow = ({ webhook, toggleEnabled, deleteWebhook, editWe
const openSettings = () => setIsSettingsOpened(true);
const onDeleteOpen = () => setIsDeleteOpened(true);
const onDeleteClose = () => setIsDeleteOpened(false);
const redirectToHistory = () => navigate(window.location.pathname + `/${webhook.id}`);
const redirectToHistory = () => {
setTitleHistory();
navigate(window.location.pathname + `/${webhook.id}`);
};
const handleRowClick = (e) => {
if (
e.target.closest(".checkbox") ||
e.target.closest(".table-container_row-checkbox") ||
e.target.closest(".type-combobox") ||
e.target.closest(".table-container_row-context-menu-wrapper") ||
e.target.closest(".toggleButton") ||
e.detail === 0
) {
return;
}
redirectToHistory();
};
const handleWebhookUpdate = async (webhookInfo) => {
await editWebhook(webhook, webhookInfo);
toastr.success(t("WebhookEditedSuccessfully"), <b>{t("Common:Done")}</b>);
@ -87,28 +114,31 @@ export const WebhooksTableRow = ({ webhook, toggleEnabled, deleteWebhook, editWe
return (
<>
<StyledTableRow contextOptions={contextOptions}>
<TableCell>
<Text as="span" fontWeight={600} className="mr-8 no-wrap">
{webhook.name}{" "}
</Text>
<StatusBadge status={webhook.status} />
<NoBoxShadowToast />
</TableCell>
<TableCell>
<Text as="span" fontSize="11px" color="#A3A9AE" fontWeight={600}>
{webhook.uri}
</Text>
</TableCell>
<TableCell>
<ToggleButton
className="toggle toggleButton"
id="toggle id"
isChecked={isChecked}
onChange={handleToggleEnabled}
/>
</TableCell>
</StyledTableRow>
<StyledWrapper onClick={handleRowClick}>
<StyledTableRow contextOptions={contextOptions}>
<TableCell>
<Text as="span" fontWeight={600} className="mr-8 no-wrap">
{webhook.name}{" "}
</Text>
<StatusBadge status={webhook.status} />
<NoBoxShadowToast />
</TableCell>
<TableCell>
<Text as="span" fontSize="11px" color="#A3A9AE" fontWeight={600}>
{webhook.uri}
</Text>
</TableCell>
<TableCell>
<ToggleButton
className="toggle toggleButton"
id="toggle id"
isChecked={isChecked}
onChange={handleToggleEnabled}
/>
</TableCell>
</StyledTableRow>
</StyledWrapper>
<WebhookDialog
visible={isSettingsOpened}
onClose={closeSettings}

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

@ -11,13 +11,38 @@ import { WebhooksTableRow } from "./WebhooksTableRow";
import { WebhookTableHeader } from "./WebhookTableHeader";
import { Base } from "@docspace/components/themes";
const TableWrapper = styled(TableContainer)`
margin-top: 16px;
.table-container_caption-header {
position: absolute;
}
.table-list-item {
margin-top: -1px;
&:hover {
cursor: pointer;
background-color: ${(props) => (props.theme.isBase ? "#F8F9F9" : "#282828")};
}
}
`;
TableWrapper.defaultProps = { theme: Base };
const WebhooksTableView = (props) => {
const { webhooks, toggleEnabled, deleteWebhook, editWebhook, sectionWidth, viewAs, setViewAs } =
props;
const {
webhooks,
loadWebhooks,
toggleEnabled,
deleteWebhook,
editWebhook,
sectionWidth,
viewAs,
setViewAs,
setTitleHistory,
} = props;
const tableRef = useRef(null);
@ -35,9 +60,16 @@ const WebhooksTableView = (props) => {
forwardedRef={tableRef}
style={{
gridTemplateColumns: "200px 500px 110px 24px",
}}>
}}
useReactWindow>
<WebhookTableHeader sectionWidth={sectionWidth} tableRef={tableRef} />
<TableBody>
<TableBody
itemHeight={49}
useReactWindow
filesLength={webhooks.length}
fetchMoreFiles={loadWebhooks}
hasMoreFiles={false}
itemCount={webhooks.length}>
{webhooks.map((webhook, index) => (
<WebhooksTableRow
key={webhook.id}
@ -46,6 +78,7 @@ const WebhooksTableView = (props) => {
toggleEnabled={toggleEnabled}
deleteWebhook={deleteWebhook}
editWebhook={editWebhook}
setTitleHistory={setTitleHistory}
/>
))}
</TableBody>
@ -54,7 +87,8 @@ const WebhooksTableView = (props) => {
};
export default inject(({ webhooksStore, setup }) => {
const { webhooks, toggleEnabled, deleteWebhook, editWebhook } = webhooksStore;
const { webhooks, toggleEnabled, deleteWebhook, editWebhook, loadWebhooks, setTitleHistory } =
webhooksStore;
const { viewAs, setViewAs } = setup;
@ -65,5 +99,7 @@ export default inject(({ webhooksStore, setup }) => {
editWebhook,
viewAs,
setViewAs,
loadWebhooks,
setTitleHistory,
};
})(observer(WebhooksTableView));