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

Client:PortalSettings: fix table and row view

Browse Source
This commit is contained in:
Timofey Boyko 2023-11-02 15:52:47 +03:00
parent 9f576f112c
commit fe29d4f897
10 changed files with 107 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/Row.tsx
View File

@ -53,7 +53,9 @@ export const OAuthRow = (props: RowProps) => {
const contextOptions = getContextMenuItems && getContextMenuItems(t, item);
const element = <img src={item.logoUrl} alt={"App logo"} />;
const element = (
<img style={{ borderRadius: "3px" }} src={item.logo} alt={"App logo"} />
);
return (
<>

14
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/RowView.types.ts
View File

@ -1,10 +1,10 @@
import { ClientProps } from "@docspace/common/utils/oauth/interfaces";
import { IClientProps } from "@docspace/common/utils/oauth/interfaces";
//@ts-ignore
import { ViewAsType } from "SRC_DIR/store/OAuthStore";
export interface RowViewProps {
items: ClientProps[];
items: IClientProps[];
sectionWidth: number;
viewAs?: ViewAsType;
setViewAs?: (value: ViewAsType) => void;
@ -12,25 +12,25 @@ export interface RowViewProps {
setSelection?: (clientId: string) => void;
getContextMenuItems?: (
t: any,
item: ClientProps
item: IClientProps
) => {
[key: string]: any | string | boolean | ((clientId: string) => void);
}[];
activeClients?: string[];
hasNextPage?: boolean;
totalElements?: number;
itemCount?: number;
fetchNextClients?: (startIndex: number) => Promise<void>;
changeClientStatus?: (clientId: string, status: boolean) => Promise<void>;
}
export interface RowProps {
item: ClientProps;
item: IClientProps;
isChecked: boolean;
inProgress: boolean;
sectionWidth: number;
getContextMenuItems?: (
t: any,
item: ClientProps
item: IClientProps
) => {
[key: string]: any | string | boolean | ((clientId: string) => void);
}[];
@ -40,7 +40,7 @@ export interface RowProps {
export interface RowContentProps {
sectionWidth: number;
item: ClientProps;
item: IClientProps;
isChecked: boolean;
inProgress: boolean;
handleToggleEnabled: () => void;

18
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/index.tsx
View File

@ -24,20 +24,10 @@ const RowView = (props: RowViewProps) => {
activeClients,
getContextMenuItems,
hasNextPage,
totalElements,
itemCount,
fetchNextClients,
} = props;
React.useEffect(() => {
if (viewAs !== "table" && viewAs !== "row") return;
if (sectionWidth < 1025 || isMobile) {
viewAs !== "row" && setViewAs && setViewAs("row");
} else {
viewAs !== "table" && setViewAs && setViewAs("table");
}
}, [viewAs, setViewAs, sectionWidth]);
return (
<StyledRowContainer
itemHeight={59}
@ -49,7 +39,7 @@ const RowView = (props: RowViewProps) => {
stopIndex: number;
}) => fetchNextClients && fetchNextClients(startIndex)}
hasMoreFiles={hasNextPage}
itemCount={totalElements}
itemCount={itemCount}
useReactWindow={true}
>
{items.map((item) => (
@ -79,7 +69,7 @@ export default inject(
getContextMenuItems,
activeClients,
hasNextPage,
totalElements,
itemCount,
fetchNextClients,
} = oauthStore;
@ -92,7 +82,7 @@ export default inject(
activeClients,
getContextMenuItems,
hasNextPage,
totalElements,
itemCount,
fetchNextClients,
};
}

10
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Header.tsx
View File

@ -6,8 +6,8 @@ import TableHeader from "@docspace/components/table-container/TableHeader";
import { HeaderProps } from "./TableView.types";
const Header = (props: HeaderProps) => {
const { sectionWidth, tableRef, columnStorageName } = props;
const { t } = useTranslation(["Webhooks", "Common"]);
const { sectionWidth, tableRef, columnStorageName, tagRef } = props;
const { t } = useTranslation(["Common"]);
const defaultColumns: {
[key: string]:
@ -44,11 +44,12 @@ const Header = (props: HeaderProps) => {
title: "Scopes",
resizable: true,
enable: true,
withTagRef: true,
minWidth: 150,
},
{
key: "Enable",
title: "Enable",
key: "State",
title: "State",
enable: true,
resizable: false,
defaultSize: 64,
@ -66,6 +67,7 @@ const Header = (props: HeaderProps) => {
showSettings={false}
useReactWindow
infoPanelVisible={false}
tagRef={tagRef}
/>
);
};

36
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Row.tsx
View File

@ -3,14 +3,20 @@ import { useTranslation } from "react-i18next";
//@ts-ignore
import TableCell from "@docspace/components/table-container/TableCell";
//@ts-ignore
import Tags from "@docspace/components/tags";
import Text from "@docspace/components/text";
import ToggleButton from "@docspace/components/toggle-button";
//@ts-ignore
import getCorrectDate from "@docspace/components/utils/getCorrectDate";
//@ts-ignore
import { getCookie } from "@docspace/components/utils/cookie";
import NameCell from "./columns/name";
import CreatorCell from "./columns/creator";
import { StyledRowWrapper, StyledTableRow } from "./TableView.styled";
import { RowProps } from "./TableView.types";
import CreatorCell from "./columns/creator";
const Row = (props: RowProps) => {
const {
@ -20,6 +26,7 @@ const Row = (props: RowProps) => {
inProgress,
getContextMenuItems,
setSelection,
tagCount,
} = props;
const navigate = useNavigate();
@ -38,6 +45,8 @@ const Row = (props: RowProps) => {
if (
e.target.closest(".checkbox") ||
e.target.closest(".table-container_row-checkbox") ||
e.target.closest(".advanced-tag") ||
e.target.closest(".tag") ||
e.detail === 0
) {
return;
@ -56,6 +65,9 @@ const Row = (props: RowProps) => {
const contextOptions = getContextMenuItems && getContextMenuItems(t, item);
const local = getCookie("asc_language");
const modifiedDate = getCorrectDate(local, item.modifiedOn);
return (
<>
<StyledRowWrapper className="handle">
@ -81,8 +93,26 @@ const Row = (props: RowProps) => {
</TableCell>
<TableCell>
{/* @ts-ignore */}
<Text as="span" fontWeight={400} className="mr-8 textOverflow">
{item.description}
<Text
as="span"
fontWeight={400}
className="mr-8 textOverflow description-text"
>
{modifiedDate}
</Text>
</TableCell>
<TableCell>
{/* @ts-ignore */}
<Text
as="span"
fontWeight={400}
className="mr-8 textOverflow description-text"
>
<Tags
tags={item.scopes}
columnCount={tagCount}
onSelectTag={() => {}}
/>
</Text>
</TableCell>
<TableCell>

4
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/TableView.styled.ts
View File

@ -39,6 +39,10 @@ const StyledTableRow = styled(TableRow)`
text-overflow: ellipsis;
}
.description-text {
color: #858585;
}
.toggleButton {
display: contents;

2
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/TableView.types.ts
View File

@ -25,12 +25,14 @@ export interface HeaderProps {
sectionWidth: number;
tableRef: HTMLDivElement;
columnStorageName: string;
tagRef: (node: HTMLDivElement) => void;
}
export interface RowProps {
item: IClientProps;
isChecked: boolean;
inProgress: boolean;
tagCount: number;
getContextMenuItems?: (
t: any,
item: IClientProps

16
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/columns/creator.tsx
View File

@ -2,22 +2,8 @@ import React from "react";
import styled from "styled-components";
import Text from "@docspace/components/text";
import Checkbox from "@docspace/components/checkbox";
//@ts-ignore
import TableCell from "@docspace/components/table-container/TableCell";
import Loader from "@docspace/components/loader";
import Avatar from "@docspace/components/avatar";
const StyledContainer = styled.div`
.table-container_row-checkbox {
margin-left: -8px;
width: 16px;
padding: 16px 8px 16px 16px;
}
`;
const StyledAvatar = styled(Avatar)`
width: 16px;
min-width: 16px;
@ -39,8 +25,8 @@ const CreatorCell = ({ avatar, displayName }: CreatorCellProps) => {
{/* @ts-ignore */}
<Text
className={"description-text"}
type="page"
title={name}
fontWeight="600"
fontSize="13px"
isTextOverflow

2
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/columns/name.tsx
View File

@ -20,6 +20,8 @@ const StyledContainer = styled.div`
const StyledImage = styled.img`
width: 32px;
height: 32px;
border-radius: 3px;
`;
interface NameCellProps {

48
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/index.tsx
View File

@ -1,5 +1,7 @@
import React from "react";
import { inject, observer } from "mobx-react";
//@ts-ignore
import elementResizeDetectorMaker from "element-resize-detector";
//@ts-ignore
import TableBody from "@docspace/components/table-container/TableBody";
@ -15,6 +17,11 @@ import { TableWrapper } from "./TableView.styled";
const TABLE_VERSION = "1";
const COLUMNS_SIZE = `oauthConfigColumnsSize_ver-${TABLE_VERSION}`;
const elementResizeDetector = elementResizeDetectorMaker({
strategy: "scroll",
callOnAdd: false,
});
const TableView = ({
items,
sectionWidth,
@ -29,6 +36,42 @@ const TableView = ({
fetchNextClients,
}: TableViewProps) => {
const tableRef = React.useRef<HTMLDivElement>(null);
const tagRef = React.useRef<HTMLDivElement>(null);
const [tagCount, setTagCount] = React.useState(0);
React.useEffect(() => {
return () => {
if (!tagRef?.current) return;
elementResizeDetector.uninstall(tagRef.current);
};
}, []);
const onResize = React.useCallback(
(node: HTMLDivElement) => {
const element = tagRef?.current ? tagRef?.current : node;
if (element) {
const { width } = element.getBoundingClientRect();
const columns = Math.floor(width / 100);
if (columns != tagCount) setTagCount(columns);
}
},
[tagCount]
);
const onSetTagRef = React.useCallback((node: HTMLDivElement) => {
if (node) {
//@ts-ignore
tagRef.current = node;
onResize(node);
elementResizeDetector.listenTo(node, onResize);
}
}, []);
const clickOutside = React.useCallback(
(e: any) => {
@ -62,6 +105,7 @@ const TableView = ({
//@ts-ignore
tableRef={tableRef}
columnStorageName={columnStorageName}
tagRef={onSetTagRef}
/>
<TableBody
itemHeight={49}
@ -86,6 +130,7 @@ const TableView = ({
setSelection={setSelection}
changeClientStatus={changeClientStatus}
getContextMenuItems={getContextMenuItems}
tagCount={tagCount}
/>
))}
</TableBody>
@ -97,8 +142,6 @@ export default inject(
({ auth, oauthStore }: { auth: any; oauthStore: OAuthStoreProps }) => {
const { id: userId } = auth.userStore.user;
const { currentDeviceType } = auth.settingsStore;
const {
viewAs,
setViewAs,
@ -126,7 +169,6 @@ export default inject(
hasNextPage,
itemCount,
fetchNextClients,
currentDeviceType,
};
}
)(observer(TableView));