From fe29d4f897f06dc5f05f038722193571c6fe1c04 Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Thu, 2 Nov 2023 15:52:47 +0300 Subject: [PATCH] Client:PortalSettings: fix table and row view --- .../OAuth/sub-components/List/RowView/Row.tsx | 4 +- .../List/RowView/RowView.types.ts | 14 +++--- .../sub-components/List/RowView/index.tsx | 18 ++----- .../sub-components/List/TableView/Header.tsx | 10 ++-- .../sub-components/List/TableView/Row.tsx | 36 ++++++++++++-- .../List/TableView/TableView.styled.ts | 4 ++ .../List/TableView/TableView.types.ts | 2 + .../List/TableView/columns/creator.tsx | 16 +------ .../List/TableView/columns/name.tsx | 2 + .../sub-components/List/TableView/index.tsx | 48 +++++++++++++++++-- 10 files changed, 107 insertions(+), 47 deletions(-) diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/Row.tsx b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/Row.tsx index 62328b4895..908a313c7e 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/Row.tsx +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/Row.tsx @@ -53,7 +53,9 @@ export const OAuthRow = (props: RowProps) => { const contextOptions = getContextMenuItems && getContextMenuItems(t, item); - const element = {"App; + const element = ( + {"App + ); return ( <> diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/RowView.types.ts b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/RowView.types.ts index fc3ab07033..0736053b47 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/RowView.types.ts +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/RowView.types.ts @@ -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; changeClientStatus?: (clientId: string, status: boolean) => Promise; } 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; diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/index.tsx b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/index.tsx index d4e2a1d166..698e5f315d 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/index.tsx +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/index.tsx @@ -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 ( { 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, }; } diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Header.tsx b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Header.tsx index 8e6c147be7..d14aede963 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Header.tsx +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Header.tsx @@ -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} /> ); }; diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Row.tsx b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Row.tsx index 7b1f9ad2a7..c1ebc5c537 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Row.tsx +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Row.tsx @@ -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 ( <> @@ -81,8 +93,26 @@ const Row = (props: RowProps) => { {/* @ts-ignore */} - - {item.description} + + {modifiedDate} + + + + {/* @ts-ignore */} + + {}} + /> diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/TableView.styled.ts b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/TableView.styled.ts index b9d53df1b0..6fe25c6f9b 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/TableView.styled.ts +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/TableView.styled.ts @@ -39,6 +39,10 @@ const StyledTableRow = styled(TableRow)` text-overflow: ellipsis; } + .description-text { + color: #858585; + } + .toggleButton { display: contents; diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/TableView.types.ts b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/TableView.types.ts index 2038da98cc..2a0cfa6f94 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/TableView.types.ts +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/TableView.types.ts @@ -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 diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/columns/creator.tsx b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/columns/creator.tsx index c9ffef4b99..3306b5d60e 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/columns/creator.tsx +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/columns/creator.tsx @@ -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 */} { const tableRef = React.useRef(null); + const tagRef = React.useRef(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} /> ))} @@ -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));