Web: Client: Data Import: translate SelectUsersTypeStep to ts
This commit is contained in:
parent
77b8f4f024
commit
36fa51e531
@ -30,9 +30,9 @@ import { Text } from "@docspace/shared/components/text";
|
|||||||
import { HelpButton } from "@docspace/shared/components/help-button";
|
import { HelpButton } from "@docspace/shared/components/help-button";
|
||||||
|
|
||||||
import SelectFileStep from "../../components/SelectFileStep";
|
import SelectFileStep from "../../components/SelectFileStep";
|
||||||
|
|
||||||
import SelectUsersStep from "../../components/SelectUsersStep";
|
import SelectUsersStep from "../../components/SelectUsersStep";
|
||||||
import SelectUsersTypeStep from "./SelectUsersTypeStep";
|
import SelectUsersTypeStep from "../../components/SelectUsersTypeStep";
|
||||||
|
|
||||||
import ImportStep from "./ImportStep";
|
import ImportStep from "./ImportStep";
|
||||||
import ImportProcessingStep from "./ImportProcessingStep";
|
import ImportProcessingStep from "./ImportProcessingStep";
|
||||||
import ImportCompleteStep from "./ImportCompleteStep";
|
import ImportCompleteStep from "./ImportCompleteStep";
|
||||||
|
@ -32,8 +32,8 @@ import { HelpButton } from "@docspace/shared/components/help-button";
|
|||||||
import SelectFileStep from "../../components/SelectFileStep";
|
import SelectFileStep from "../../components/SelectFileStep";
|
||||||
import SelectUsersStep from "../../components/SelectUsersStep";
|
import SelectUsersStep from "../../components/SelectUsersStep";
|
||||||
import AddEmailsStep from "../../components/AddEmailsStep";
|
import AddEmailsStep from "../../components/AddEmailsStep";
|
||||||
|
import SelectUsersTypeStep from "../../components/SelectUsersTypeStep";
|
||||||
|
|
||||||
import SelectUsersTypeStep from "./SelectUsersTypeStep";
|
|
||||||
import ImportStep from "./ImportStep";
|
import ImportStep from "./ImportStep";
|
||||||
import ImportProcessingStep from "./ImportProcessingStep";
|
import ImportProcessingStep from "./ImportProcessingStep";
|
||||||
import ImportCompleteStep from "./ImportCompleteStep";
|
import ImportCompleteStep from "./ImportCompleteStep";
|
||||||
@ -113,13 +113,7 @@ export const getStepsData = (
|
|||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
),
|
),
|
||||||
component: (
|
component: <SelectUsersTypeStep t={t} />,
|
||||||
<SelectUsersTypeStep
|
|
||||||
t={t}
|
|
||||||
incrementStep={incrementStep}
|
|
||||||
decrementStep={decrementStep}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: t("Settings:DataImport"),
|
title: t("Settings:DataImport"),
|
||||||
|
@ -31,8 +31,8 @@ import { HelpButton } from "@docspace/shared/components/help-button";
|
|||||||
|
|
||||||
import SelectFileStep from "../../components/SelectFileStep";
|
import SelectFileStep from "../../components/SelectFileStep";
|
||||||
import SelectUsersStep from "../../components/SelectUsersStep";
|
import SelectUsersStep from "../../components/SelectUsersStep";
|
||||||
|
import SelectUsersTypeStep from "../../components/SelectUsersTypeStep";
|
||||||
|
|
||||||
import SelectUsersTypeStep from "./SelectUsersTypeStep";
|
|
||||||
import ImportStep from "./ImportStep";
|
import ImportStep from "./ImportStep";
|
||||||
import ImportProcessingStep from "./ImportProcessingStep";
|
import ImportProcessingStep from "./ImportProcessingStep";
|
||||||
import ImportCompleteStep from "./ImportCompleteStep";
|
import ImportCompleteStep from "./ImportCompleteStep";
|
||||||
|
@ -119,6 +119,10 @@ export const Wrapper = styled.div`
|
|||||||
|
|
||||||
.save-cancel-buttons {
|
.save-cancel-buttons {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
@media ${mobile} {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mt-8 {
|
.mt-8 {
|
||||||
|
@ -45,6 +45,7 @@ import { parseQuota } from "../../utils";
|
|||||||
import { AddEmailsStepProps, InjectedAddEmailsStepProps } from "../../types";
|
import { AddEmailsStepProps, InjectedAddEmailsStepProps } from "../../types";
|
||||||
|
|
||||||
const PAGE_SIZE = 25;
|
const PAGE_SIZE = 25;
|
||||||
|
const REFRESH_TIMEOUT = 100;
|
||||||
|
|
||||||
const AddEmailsStep = (props: AddEmailsStepProps) => {
|
const AddEmailsStep = (props: AddEmailsStepProps) => {
|
||||||
const {
|
const {
|
||||||
@ -85,6 +86,7 @@ const AddEmailsStep = (props: AddEmailsStepProps) => {
|
|||||||
|
|
||||||
const filteredAccounts = dataPortion.filter(
|
const filteredAccounts = dataPortion.filter(
|
||||||
(data) =>
|
(data) =>
|
||||||
|
data.firstName?.toLowerCase().startsWith(searchValue.toLowerCase()) ||
|
||||||
data.displayName.toLowerCase().startsWith(searchValue.toLowerCase()) ||
|
data.displayName.toLowerCase().startsWith(searchValue.toLowerCase()) ||
|
||||||
data.email.toLowerCase().startsWith(searchValue.toLowerCase()),
|
data.email.toLowerCase().startsWith(searchValue.toLowerCase()),
|
||||||
);
|
);
|
||||||
@ -151,7 +153,7 @@ const AddEmailsStep = (props: AddEmailsStepProps) => {
|
|||||||
placeholder={t("Common:Search")}
|
placeholder={t("Common:Search")}
|
||||||
value={searchValue}
|
value={searchValue}
|
||||||
onChange={onChangeInput}
|
onChange={onChangeInput}
|
||||||
refreshTimeout={100}
|
refreshTimeout={REFRESH_TIMEOUT}
|
||||||
onClearSearch={onClearSearchInput}
|
onClearSearch={onClearSearchInput}
|
||||||
size={InputSize.base}
|
size={InputSize.base}
|
||||||
/>
|
/>
|
||||||
@ -179,6 +181,8 @@ const AddEmailsStep = (props: AddEmailsStepProps) => {
|
|||||||
|
|
||||||
export default inject<TStore>(({ importAccountsStore, currentQuotaStore }) => {
|
export default inject<TStore>(({ importAccountsStore, currentQuotaStore }) => {
|
||||||
const {
|
const {
|
||||||
|
incrementStep,
|
||||||
|
decrementStep,
|
||||||
searchValue,
|
searchValue,
|
||||||
setSearchValue,
|
setSearchValue,
|
||||||
users,
|
users,
|
||||||
@ -190,6 +194,8 @@ export default inject<TStore>(({ importAccountsStore, currentQuotaStore }) => {
|
|||||||
const { quotaCharacteristics } = currentQuotaStore;
|
const { quotaCharacteristics } = currentQuotaStore;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
incrementStep,
|
||||||
|
decrementStep,
|
||||||
searchValue,
|
searchValue,
|
||||||
setSearchValue,
|
setSearchValue,
|
||||||
users,
|
users,
|
||||||
|
@ -0,0 +1,65 @@
|
|||||||
|
// (c) Copyright Ascensio System SIA 2009-2024
|
||||||
|
//
|
||||||
|
// This program is a free software product.
|
||||||
|
// You can redistribute it and/or modify it under the terms
|
||||||
|
// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
|
||||||
|
// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
|
||||||
|
// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
|
||||||
|
// any third-party rights.
|
||||||
|
//
|
||||||
|
// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
|
||||||
|
// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
|
||||||
|
// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
|
||||||
|
//
|
||||||
|
// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
|
||||||
|
//
|
||||||
|
// The interactive user interfaces in modified source and object code versions of the Program must
|
||||||
|
// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
|
||||||
|
//
|
||||||
|
// Pursuant to Section 7(b) of the License you must retain the original Product logo when
|
||||||
|
// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
|
||||||
|
// trademark law for use of our trademarks.
|
||||||
|
//
|
||||||
|
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
|
||||||
|
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
|
||||||
|
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||||
|
|
||||||
|
import { useRef } from "react";
|
||||||
|
import { Row } from "@docspace/shared/components/row";
|
||||||
|
import UsersRowContent from "./UsersRowContent";
|
||||||
|
import { TypeSelectUsersRowProps } from "../../../../types";
|
||||||
|
|
||||||
|
const UsersRow = (props: TypeSelectUsersRowProps) => {
|
||||||
|
const { data, sectionWidth, typeOptions, isChecked, toggleAccount } = props;
|
||||||
|
|
||||||
|
const roleSelectorRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
const handleAccountToggle = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
if (!roleSelectorRef.current?.contains(e.target)) {
|
||||||
|
toggleAccount();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Row
|
||||||
|
sectionWidth={sectionWidth}
|
||||||
|
key={data.key}
|
||||||
|
checked={isChecked}
|
||||||
|
contextButtonSpacerWidth="0"
|
||||||
|
onRowClick={handleAccountToggle}
|
||||||
|
onSelect={handleAccountToggle}
|
||||||
|
>
|
||||||
|
<UsersRowContent
|
||||||
|
id={data.key}
|
||||||
|
sectionWidth={sectionWidth}
|
||||||
|
displayName={data.displayName}
|
||||||
|
email={data.email}
|
||||||
|
type={data.userType}
|
||||||
|
typeOptions={typeOptions}
|
||||||
|
roleSelectorRef={roleSelectorRef}
|
||||||
|
/>
|
||||||
|
</Row>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default UsersRow;
|
@ -0,0 +1,165 @@
|
|||||||
|
// (c) Copyright Ascensio System SIA 2009-2024
|
||||||
|
//
|
||||||
|
// This program is a free software product.
|
||||||
|
// You can redistribute it and/or modify it under the terms
|
||||||
|
// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
|
||||||
|
// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
|
||||||
|
// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
|
||||||
|
// any third-party rights.
|
||||||
|
//
|
||||||
|
// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
|
||||||
|
// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
|
||||||
|
// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
|
||||||
|
//
|
||||||
|
// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
|
||||||
|
//
|
||||||
|
// The interactive user interfaces in modified source and object code versions of the Program must
|
||||||
|
// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
|
||||||
|
//
|
||||||
|
// Pursuant to Section 7(b) of the License you must retain the original Product logo when
|
||||||
|
// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
|
||||||
|
// trademark law for use of our trademarks.
|
||||||
|
//
|
||||||
|
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
|
||||||
|
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
|
||||||
|
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||||
|
|
||||||
|
import { inject, observer } from "mobx-react";
|
||||||
|
import styled, { css } from "styled-components";
|
||||||
|
|
||||||
|
import { Text } from "@docspace/shared/components/text";
|
||||||
|
import { Box } from "@docspace/shared/components/box";
|
||||||
|
import { RowContent } from "@docspace/shared/components/row-content";
|
||||||
|
import {
|
||||||
|
ComboBox,
|
||||||
|
ComboBoxSize,
|
||||||
|
TOption,
|
||||||
|
} from "@docspace/shared/components/combobox";
|
||||||
|
import {
|
||||||
|
TypeSelectRowContentProps,
|
||||||
|
InjectedTypeSelectRowContentProps,
|
||||||
|
} from "../../../../types";
|
||||||
|
|
||||||
|
const StyledRowContent = styled(RowContent)`
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.row-main-container-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
${(props) =>
|
||||||
|
props.theme.interfaceDirection === "rtl"
|
||||||
|
? css`
|
||||||
|
margin-left: 0px;
|
||||||
|
`
|
||||||
|
: css`
|
||||||
|
margin-right: 0px;
|
||||||
|
`}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rowMainContainer {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.username {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: ${(props) => props.theme.client.settings.migration.subtitleColor};
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-email {
|
||||||
|
margin-right: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: ${(props) =>
|
||||||
|
props.theme.client.settings.migration.tableRowTextColor};
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-type {
|
||||||
|
.combo-button {
|
||||||
|
border: none;
|
||||||
|
padding: 4px 8px;
|
||||||
|
justify-content: flex-end;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.combo-button-label {
|
||||||
|
color: ${(props) =>
|
||||||
|
props.theme.client.settings.migration.tableRowTextColor};
|
||||||
|
}
|
||||||
|
|
||||||
|
.combo-buttons_arrow-icon {
|
||||||
|
flex: initial;
|
||||||
|
margin-right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
path {
|
||||||
|
fill: ${(props) =>
|
||||||
|
props.theme.client.settings.migration.tableRowTextColor};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const UsersRowContent = (props: TypeSelectRowContentProps) => {
|
||||||
|
const {
|
||||||
|
id,
|
||||||
|
sectionWidth,
|
||||||
|
displayName,
|
||||||
|
email,
|
||||||
|
typeOptions,
|
||||||
|
roleSelectorRef,
|
||||||
|
type,
|
||||||
|
changeUserType,
|
||||||
|
} = props as InjectedTypeSelectRowContentProps;
|
||||||
|
|
||||||
|
const onSelectUser = (option: TOption) => {
|
||||||
|
changeUserType(id, String(option.key));
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectedOption: TOption = typeOptions.find(
|
||||||
|
(option) => option.key === type,
|
||||||
|
) || { key: "", label: "" };
|
||||||
|
|
||||||
|
const contentData = [
|
||||||
|
<Box
|
||||||
|
key={id}
|
||||||
|
displayProp="flex"
|
||||||
|
justifyContent="space-between"
|
||||||
|
alignItems="center"
|
||||||
|
>
|
||||||
|
<Box>
|
||||||
|
<Text className="username">{displayName}</Text>
|
||||||
|
<Text className="user-email">{email}</Text>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<div ref={roleSelectorRef}>
|
||||||
|
<ComboBox
|
||||||
|
className="user-type"
|
||||||
|
selectedOption={selectedOption}
|
||||||
|
options={typeOptions}
|
||||||
|
onSelect={onSelectUser}
|
||||||
|
scaled
|
||||||
|
size={ComboBoxSize.content}
|
||||||
|
displaySelectedOption
|
||||||
|
modernView
|
||||||
|
manualWidth="fit-content"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Box>,
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<StyledRowContent sectionWidth={sectionWidth}>
|
||||||
|
{contentData}
|
||||||
|
</StyledRowContent>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default inject<TStore>(({ importAccountsStore }) => {
|
||||||
|
const { changeUserType } = importAccountsStore;
|
||||||
|
|
||||||
|
return {
|
||||||
|
changeUserType,
|
||||||
|
};
|
||||||
|
})(observer(UsersRowContent));
|
@ -0,0 +1,246 @@
|
|||||||
|
// (c) Copyright Ascensio System SIA 2009-2024
|
||||||
|
//
|
||||||
|
// This program is a free software product.
|
||||||
|
// You can redistribute it and/or modify it under the terms
|
||||||
|
// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
|
||||||
|
// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
|
||||||
|
// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
|
||||||
|
// any third-party rights.
|
||||||
|
//
|
||||||
|
// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
|
||||||
|
// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
|
||||||
|
// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
|
||||||
|
//
|
||||||
|
// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
|
||||||
|
//
|
||||||
|
// The interactive user interfaces in modified source and object code versions of the Program must
|
||||||
|
// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
|
||||||
|
//
|
||||||
|
// Pursuant to Section 7(b) of the License you must retain the original Product logo when
|
||||||
|
// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
|
||||||
|
// trademark law for use of our trademarks.
|
||||||
|
//
|
||||||
|
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
|
||||||
|
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
|
||||||
|
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||||
|
|
||||||
|
import { inject, observer } from "mobx-react";
|
||||||
|
import { tablet } from "@docspace/shared/utils/device";
|
||||||
|
import styled, { css } from "styled-components";
|
||||||
|
|
||||||
|
import { EmptyScreenContainer } from "@docspace/shared/components/empty-screen-container";
|
||||||
|
import { IconButton } from "@docspace/shared/components/icon-button";
|
||||||
|
import { Link, LinkType } from "@docspace/shared/components/link";
|
||||||
|
import { Box } from "@docspace/shared/components/box";
|
||||||
|
import { TableGroupMenu } from "@docspace/shared/components/table";
|
||||||
|
import { RowContainer } from "@docspace/shared/components/row-container";
|
||||||
|
import { Row } from "@docspace/shared/components/row";
|
||||||
|
import { Text } from "@docspace/shared/components/text";
|
||||||
|
import ChangeTypeReactSvgUrl from "PUBLIC_DIR/images/change.type.react.svg?url";
|
||||||
|
import EmptyScreenUserReactSvgUrl from "PUBLIC_DIR/images/empty_screen_user.react.svg?url";
|
||||||
|
import ClearEmptyFilterSvgUrl from "PUBLIC_DIR/images/clear.empty.filter.svg?url";
|
||||||
|
import UsersRow from "./UsersRow";
|
||||||
|
import {
|
||||||
|
InjectedTypeSelectRowViewProps,
|
||||||
|
TypeSelectRowViewProps,
|
||||||
|
} from "../../../../types";
|
||||||
|
|
||||||
|
const StyledRowContainer = styled(RowContainer)`
|
||||||
|
margin: 0 0 20px;
|
||||||
|
|
||||||
|
.table-group-menu {
|
||||||
|
height: 61px;
|
||||||
|
position: sticky;
|
||||||
|
z-index: 201;
|
||||||
|
${(props) =>
|
||||||
|
props.theme.interfaceDirection === "rtl"
|
||||||
|
? css`
|
||||||
|
margin-right: -16px;
|
||||||
|
`
|
||||||
|
: css`
|
||||||
|
margin-left: -16px;
|
||||||
|
`}
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
margin-top: -31.5px;
|
||||||
|
top: 53px;
|
||||||
|
margin-bottom: -29.5px;
|
||||||
|
|
||||||
|
.table-container_group-menu {
|
||||||
|
padding: 0px 16px;
|
||||||
|
border-image-slice: 0;
|
||||||
|
box-shadow: rgba(4, 15, 27, 0.07) 0px 15px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container_group-menu-checkbox {
|
||||||
|
${(props) =>
|
||||||
|
props.theme.interfaceDirection === "rtl"
|
||||||
|
? css`
|
||||||
|
margin-right: 8px;
|
||||||
|
`
|
||||||
|
: css`
|
||||||
|
margin-left: 8px;
|
||||||
|
`}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container_group-menu-separator {
|
||||||
|
margin: 0 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-container-text {
|
||||||
|
font-size: 12px;
|
||||||
|
color: ${(props) =>
|
||||||
|
props.theme.client.settings.migration.tableRowTextColor};
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container_header {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear-icon {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ec-desc {
|
||||||
|
max-width: 348px;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const StyledRow = styled(Row)`
|
||||||
|
box-sizing: border-box;
|
||||||
|
min-height: 40px;
|
||||||
|
|
||||||
|
.row-header-title {
|
||||||
|
color: ${(props) => props.theme.client.settings.migration.tableHeaderText};
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media ${tablet} {
|
||||||
|
.row_content {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const checkedAccountType = "result";
|
||||||
|
|
||||||
|
const RowView = (props: TypeSelectRowViewProps) => {
|
||||||
|
const {
|
||||||
|
t,
|
||||||
|
sectionWidth,
|
||||||
|
accountsData,
|
||||||
|
typeOptions,
|
||||||
|
|
||||||
|
filteredUsers,
|
||||||
|
checkedUsers,
|
||||||
|
toggleAccount,
|
||||||
|
toggleAllAccounts,
|
||||||
|
isAccountChecked,
|
||||||
|
setSearchValue,
|
||||||
|
} = props as InjectedTypeSelectRowViewProps;
|
||||||
|
|
||||||
|
const isIndeterminate =
|
||||||
|
checkedUsers.result.length > 0 &&
|
||||||
|
checkedUsers.result.length !== filteredUsers.length;
|
||||||
|
|
||||||
|
const toggleAll = (isChecked: boolean) =>
|
||||||
|
toggleAllAccounts(isChecked, filteredUsers, checkedAccountType);
|
||||||
|
|
||||||
|
const onClearFilter = () => setSearchValue("");
|
||||||
|
|
||||||
|
const headerMenu = [
|
||||||
|
{
|
||||||
|
id: "change-type",
|
||||||
|
label: t("ChangeUserTypeDialog:ChangeUserTypeButton"),
|
||||||
|
disabled: false,
|
||||||
|
withDropDown: true,
|
||||||
|
options: typeOptions,
|
||||||
|
iconUrl: ChangeTypeReactSvgUrl,
|
||||||
|
onClick: () => {},
|
||||||
|
title: t("ChangeUserTypeDialog:ChangeUserTypeButton"),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<StyledRowContainer useReactWindow={false}>
|
||||||
|
{checkedUsers.result.length > 0 && (
|
||||||
|
<div className="table-group-menu">
|
||||||
|
<TableGroupMenu
|
||||||
|
headerMenu={headerMenu}
|
||||||
|
withoutInfoPanelToggler
|
||||||
|
withComboBox={false}
|
||||||
|
isIndeterminate={isIndeterminate}
|
||||||
|
isChecked={checkedUsers.result.length === filteredUsers.length}
|
||||||
|
onChange={toggleAll}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{accountsData.length > 0 ? (
|
||||||
|
<>
|
||||||
|
<StyledRow key="Name">
|
||||||
|
<Text className="row-header-title">{t("Common:Name")}</Text>
|
||||||
|
</StyledRow>
|
||||||
|
|
||||||
|
{accountsData.map((data) => (
|
||||||
|
<UsersRow
|
||||||
|
key={data.key}
|
||||||
|
data={data}
|
||||||
|
sectionWidth={sectionWidth}
|
||||||
|
typeOptions={typeOptions}
|
||||||
|
isChecked={isAccountChecked(data.key, checkedAccountType)}
|
||||||
|
toggleAccount={() => toggleAccount(data, checkedAccountType)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<EmptyScreenContainer
|
||||||
|
imageSrc={EmptyScreenUserReactSvgUrl}
|
||||||
|
imageAlt="Empty Screen user image"
|
||||||
|
headerText={t("Common:NotFoundUsers")}
|
||||||
|
descriptionText={t("Common:NotFoundUsersDescription")}
|
||||||
|
buttons={
|
||||||
|
<Box displayProp="flex" alignItems="center">
|
||||||
|
<IconButton
|
||||||
|
className="clear-icon"
|
||||||
|
isFill
|
||||||
|
size={12}
|
||||||
|
onClick={onClearFilter}
|
||||||
|
iconName={ClearEmptyFilterSvgUrl}
|
||||||
|
/>
|
||||||
|
<Link
|
||||||
|
type={LinkType.action}
|
||||||
|
isHovered
|
||||||
|
fontWeight="600"
|
||||||
|
onClick={onClearFilter}
|
||||||
|
>
|
||||||
|
{t("Common:ClearFilter")}
|
||||||
|
</Link>
|
||||||
|
</Box>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</StyledRowContainer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default inject<TStore>(({ importAccountsStore }) => {
|
||||||
|
const {
|
||||||
|
checkedUsers,
|
||||||
|
toggleAccount,
|
||||||
|
toggleAllAccounts,
|
||||||
|
isAccountChecked,
|
||||||
|
setSearchValue,
|
||||||
|
filteredUsers,
|
||||||
|
} = importAccountsStore;
|
||||||
|
|
||||||
|
return {
|
||||||
|
checkedUsers,
|
||||||
|
toggleAccount,
|
||||||
|
toggleAllAccounts,
|
||||||
|
isAccountChecked,
|
||||||
|
setSearchValue,
|
||||||
|
filteredUsers,
|
||||||
|
};
|
||||||
|
})(observer(RowView));
|
@ -0,0 +1,137 @@
|
|||||||
|
// (c) Copyright Ascensio System SIA 2009-2024
|
||||||
|
//
|
||||||
|
// This program is a free software product.
|
||||||
|
// You can redistribute it and/or modify it under the terms
|
||||||
|
// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
|
||||||
|
// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
|
||||||
|
// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
|
||||||
|
// any third-party rights.
|
||||||
|
//
|
||||||
|
// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
|
||||||
|
// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
|
||||||
|
// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
|
||||||
|
//
|
||||||
|
// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
|
||||||
|
//
|
||||||
|
// The interactive user interfaces in modified source and object code versions of the Program must
|
||||||
|
// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
|
||||||
|
//
|
||||||
|
// Pursuant to Section 7(b) of the License you must retain the original Product logo when
|
||||||
|
// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
|
||||||
|
// trademark law for use of our trademarks.
|
||||||
|
//
|
||||||
|
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
|
||||||
|
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
|
||||||
|
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||||
|
|
||||||
|
import { useState, useEffect } from "react";
|
||||||
|
|
||||||
|
import { TableHeader, TTableColumn } from "@docspace/shared/components/table";
|
||||||
|
import { UsersTableHeaderProps } from "../../../../types";
|
||||||
|
|
||||||
|
const TABLE_VERSION = "6";
|
||||||
|
const TABLE_COLUMNS = `nextcloudFourthColumns_ver-${TABLE_VERSION}`;
|
||||||
|
|
||||||
|
const getColumns = (defaultColumns: TTableColumn[], userId?: string) => {
|
||||||
|
const storageColumns = localStorage.getItem(`${TABLE_COLUMNS}=${userId}`);
|
||||||
|
|
||||||
|
if (storageColumns) {
|
||||||
|
const splitColumns = storageColumns?.split(",");
|
||||||
|
|
||||||
|
return defaultColumns.map((col) => ({
|
||||||
|
...col,
|
||||||
|
enable: splitColumns.includes(col.key),
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
return defaultColumns;
|
||||||
|
};
|
||||||
|
|
||||||
|
const UsersTableHeader = (props: UsersTableHeaderProps) => {
|
||||||
|
const {
|
||||||
|
t,
|
||||||
|
sectionWidth,
|
||||||
|
userId,
|
||||||
|
tableRef,
|
||||||
|
columnStorageName,
|
||||||
|
columnInfoPanelStorageName,
|
||||||
|
isIndeterminate,
|
||||||
|
isChecked,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
const [columns, setColumns] = useState<TTableColumn[]>([
|
||||||
|
{
|
||||||
|
key: "Name",
|
||||||
|
title: t("Common:Name"),
|
||||||
|
resizable: true,
|
||||||
|
enable: true,
|
||||||
|
default: true,
|
||||||
|
active: true,
|
||||||
|
minWidth: 180,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
function onColumnChange(key: string) {
|
||||||
|
const columnIndex = columns.findIndex((c) => c.key === key);
|
||||||
|
|
||||||
|
if (columnIndex === -1) return;
|
||||||
|
|
||||||
|
setColumns((prevColumns: TTableColumn[]) =>
|
||||||
|
prevColumns.map((item, index) =>
|
||||||
|
index === columnIndex ? { ...item, enable: !item.enable } : item,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
const tableColumns = columns.map((c) => c.enable && c.key);
|
||||||
|
localStorage.setItem(`${TABLE_COLUMNS}=${userId}`, tableColumns.toString());
|
||||||
|
}
|
||||||
|
|
||||||
|
const defaultColumns = [
|
||||||
|
{
|
||||||
|
key: "Name",
|
||||||
|
title: t("Common:Name"),
|
||||||
|
resizable: true,
|
||||||
|
enable: true,
|
||||||
|
default: true,
|
||||||
|
active: true,
|
||||||
|
minWidth: 180,
|
||||||
|
onChange: onColumnChange,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "Type",
|
||||||
|
title: t("Common:Type"),
|
||||||
|
enable: true,
|
||||||
|
resizable: true,
|
||||||
|
minWidth: 100,
|
||||||
|
onChange: onColumnChange,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "Email",
|
||||||
|
title: t("Common:Email"),
|
||||||
|
enable: true,
|
||||||
|
resizable: true,
|
||||||
|
onChange: onColumnChange,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setColumns(getColumns(defaultColumns));
|
||||||
|
}, [isIndeterminate, isChecked]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TableHeader
|
||||||
|
checkboxSize="48px"
|
||||||
|
containerRef={tableRef as { current: HTMLDivElement }}
|
||||||
|
columns={columns}
|
||||||
|
columnStorageName={columnStorageName}
|
||||||
|
columnInfoPanelStorageName={columnInfoPanelStorageName}
|
||||||
|
sectionWidth={sectionWidth}
|
||||||
|
checkboxMargin="12px"
|
||||||
|
showSettings={false}
|
||||||
|
useReactWindow
|
||||||
|
infoPanelVisible={false}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default UsersTableHeader;
|
@ -0,0 +1,161 @@
|
|||||||
|
// (c) Copyright Ascensio System SIA 2009-2024
|
||||||
|
//
|
||||||
|
// This program is a free software product.
|
||||||
|
// You can redistribute it and/or modify it under the terms
|
||||||
|
// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
|
||||||
|
// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
|
||||||
|
// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
|
||||||
|
// any third-party rights.
|
||||||
|
//
|
||||||
|
// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
|
||||||
|
// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
|
||||||
|
// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
|
||||||
|
//
|
||||||
|
// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
|
||||||
|
//
|
||||||
|
// The interactive user interfaces in modified source and object code versions of the Program must
|
||||||
|
// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
|
||||||
|
//
|
||||||
|
// Pursuant to Section 7(b) of the License you must retain the original Product logo when
|
||||||
|
// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
|
||||||
|
// trademark law for use of our trademarks.
|
||||||
|
//
|
||||||
|
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
|
||||||
|
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
|
||||||
|
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||||
|
|
||||||
|
import { useRef } from "react";
|
||||||
|
import { inject, observer } from "mobx-react";
|
||||||
|
import styled from "styled-components";
|
||||||
|
|
||||||
|
import { TableRow, TableCell } from "@docspace/shared/components/table";
|
||||||
|
|
||||||
|
import { Text } from "@docspace/shared/components/text";
|
||||||
|
import { Checkbox } from "@docspace/shared/components/checkbox";
|
||||||
|
import {
|
||||||
|
ComboBox,
|
||||||
|
ComboBoxSize,
|
||||||
|
TOption,
|
||||||
|
} from "@docspace/shared/components/combobox";
|
||||||
|
import {
|
||||||
|
InjectedTypeSelectTableRowProps,
|
||||||
|
TypeSelectTableRowProps,
|
||||||
|
} from "../../../../types";
|
||||||
|
|
||||||
|
const StyledTableRow = styled(TableRow)`
|
||||||
|
.table-container_cell {
|
||||||
|
padding-right: 30px;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.username {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: ${(props) => props.theme.client.settings.migration.subtitleColor};
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-email {
|
||||||
|
margin-right: 5px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: ${(props) =>
|
||||||
|
props.theme.client.settings.migration.tableRowTextColor};
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-type {
|
||||||
|
.combo-button {
|
||||||
|
border: none;
|
||||||
|
padding: 4px 8px;
|
||||||
|
justify-content: flex-start;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.combo-button-label {
|
||||||
|
color: ${(props) =>
|
||||||
|
props.theme.client.settings.migration.comboBoxLabelColor};
|
||||||
|
}
|
||||||
|
|
||||||
|
.combo-buttons_arrow-icon {
|
||||||
|
flex: initial;
|
||||||
|
margin-right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
path {
|
||||||
|
fill: ${(props) =>
|
||||||
|
props.theme.client.settings.migration.comboBoxLabelColor};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const UsersTableRow = (props: TypeSelectTableRowProps) => {
|
||||||
|
const {
|
||||||
|
id,
|
||||||
|
displayName,
|
||||||
|
email,
|
||||||
|
typeOptions,
|
||||||
|
isChecked,
|
||||||
|
toggleAccount,
|
||||||
|
type,
|
||||||
|
changeUserType,
|
||||||
|
} = props as InjectedTypeSelectTableRowProps;
|
||||||
|
const userTypeRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
const onSelectUser = (option: TOption) => {
|
||||||
|
changeUserType(id, String(option.key));
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectedOption: TOption = typeOptions.find(
|
||||||
|
(option) => option.key === type,
|
||||||
|
) || { key: "", label: "" };
|
||||||
|
|
||||||
|
const handleAccountToggle = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
|
||||||
|
if (
|
||||||
|
!e.target.closest(".dropdown-container") &&
|
||||||
|
!userTypeRef.current?.contains(e.target)
|
||||||
|
) {
|
||||||
|
toggleAccount();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<StyledTableRow checked={isChecked} onClick={handleAccountToggle}>
|
||||||
|
<TableCell className="checkboxWrapper">
|
||||||
|
<Checkbox isChecked={isChecked} onChange={handleAccountToggle} />
|
||||||
|
<Text className="username">{displayName}</Text>
|
||||||
|
</TableCell>
|
||||||
|
|
||||||
|
<TableCell>
|
||||||
|
<div ref={userTypeRef}>
|
||||||
|
<ComboBox
|
||||||
|
className="user-type"
|
||||||
|
selectedOption={selectedOption}
|
||||||
|
options={typeOptions}
|
||||||
|
onSelect={onSelectUser}
|
||||||
|
scaled
|
||||||
|
size={ComboBoxSize.content}
|
||||||
|
displaySelectedOption
|
||||||
|
modernView
|
||||||
|
manualWidth="fit-content"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
|
||||||
|
<TableCell>
|
||||||
|
<Text className="user-email">{email}</Text>
|
||||||
|
</TableCell>
|
||||||
|
</StyledTableRow>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default inject<TStore>(({ importAccountsStore }) => {
|
||||||
|
const { changeUserType } = importAccountsStore;
|
||||||
|
|
||||||
|
return {
|
||||||
|
changeUserType,
|
||||||
|
};
|
||||||
|
})(observer(UsersTableRow));
|
@ -0,0 +1,246 @@
|
|||||||
|
// (c) Copyright Ascensio System SIA 2009-2024
|
||||||
|
//
|
||||||
|
// This program is a free software product.
|
||||||
|
// You can redistribute it and/or modify it under the terms
|
||||||
|
// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
|
||||||
|
// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
|
||||||
|
// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
|
||||||
|
// any third-party rights.
|
||||||
|
//
|
||||||
|
// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
|
||||||
|
// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
|
||||||
|
// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
|
||||||
|
//
|
||||||
|
// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
|
||||||
|
//
|
||||||
|
// The interactive user interfaces in modified source and object code versions of the Program must
|
||||||
|
// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
|
||||||
|
//
|
||||||
|
// Pursuant to Section 7(b) of the License you must retain the original Product logo when
|
||||||
|
// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
|
||||||
|
// trademark law for use of our trademarks.
|
||||||
|
//
|
||||||
|
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
|
||||||
|
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
|
||||||
|
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||||
|
|
||||||
|
import { useRef } from "react";
|
||||||
|
import { inject, observer } from "mobx-react";
|
||||||
|
import { Base } from "@docspace/shared/themes";
|
||||||
|
import styled, { css } from "styled-components";
|
||||||
|
|
||||||
|
import { EmptyScreenContainer } from "@docspace/shared/components/empty-screen-container";
|
||||||
|
import { IconButton } from "@docspace/shared/components/icon-button";
|
||||||
|
import { Link, LinkType } from "@docspace/shared/components/link";
|
||||||
|
import { Box } from "@docspace/shared/components/box";
|
||||||
|
import {
|
||||||
|
TableGroupMenu,
|
||||||
|
TableBody,
|
||||||
|
TGroupMenuItem,
|
||||||
|
} from "@docspace/shared/components/table";
|
||||||
|
|
||||||
|
import ChangeTypeReactSvgUrl from "PUBLIC_DIR/images/change.type.react.svg?url";
|
||||||
|
import EmptyScreenUserReactSvgUrl from "PUBLIC_DIR/images/empty_screen_user.react.svg?url";
|
||||||
|
import ClearEmptyFilterSvgUrl from "PUBLIC_DIR/images/clear.empty.filter.svg?url";
|
||||||
|
import { StyledTableContainer } from "../../../../StyledDataImport";
|
||||||
|
import UsersTableRow from "./UsersTableRow";
|
||||||
|
import UsersTableHeader from "./UsersTableHeader";
|
||||||
|
import {
|
||||||
|
TypeSelectTableViewProps,
|
||||||
|
InjectedTypeSelectTableViewProps,
|
||||||
|
} from "../../../../types";
|
||||||
|
|
||||||
|
const UserSelectTableContainer = styled(StyledTableContainer)`
|
||||||
|
.table-group-menu {
|
||||||
|
height: 69px;
|
||||||
|
position: sticky;
|
||||||
|
z-index: 201;
|
||||||
|
width: calc(100% + 40px);
|
||||||
|
margin-top: -33px;
|
||||||
|
margin-left: -20px;
|
||||||
|
top: 0;
|
||||||
|
|
||||||
|
margin-bottom: -36px;
|
||||||
|
|
||||||
|
.table-container_group-menu {
|
||||||
|
border-image-slice: 0;
|
||||||
|
border-image-source: none;
|
||||||
|
border-bottom: ${(props) =>
|
||||||
|
props.theme.client.settings.migration.workspaceBorder};
|
||||||
|
box-shadow: rgba(4, 15, 27, 0.07) 0px 15px 20px;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container_group-menu-separator {
|
||||||
|
margin: 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container_header {
|
||||||
|
position: absolute;
|
||||||
|
${(props) =>
|
||||||
|
props.theme.interfaceDirection === "rtl"
|
||||||
|
? css`
|
||||||
|
padding: 0px 28px 0 15px;
|
||||||
|
`
|
||||||
|
: css`
|
||||||
|
padding: 0px 15px 0 28px;
|
||||||
|
`}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
UserSelectTableContainer.defaultProps = { theme: Base };
|
||||||
|
|
||||||
|
const TABLE_VERSION = "6";
|
||||||
|
const COLUMNS_SIZE = `nextcloudFourthColumnsSize_ver-${TABLE_VERSION}`;
|
||||||
|
const INFO_PANEL_COLUMNS_SIZE = `infoPanelNextcloudFourthColumnsSize_ver-${TABLE_VERSION}`;
|
||||||
|
|
||||||
|
const checkedAccountType = "result";
|
||||||
|
|
||||||
|
const TableView = (props: TypeSelectTableViewProps) => {
|
||||||
|
const {
|
||||||
|
t,
|
||||||
|
sectionWidth,
|
||||||
|
accountsData,
|
||||||
|
typeOptions,
|
||||||
|
|
||||||
|
userId,
|
||||||
|
checkedUsers,
|
||||||
|
toggleAccount,
|
||||||
|
toggleAllAccounts,
|
||||||
|
isAccountChecked,
|
||||||
|
setSearchValue,
|
||||||
|
filteredUsers,
|
||||||
|
} = props as InjectedTypeSelectTableViewProps;
|
||||||
|
const tableRef = useRef(null);
|
||||||
|
const columnStorageName = `${COLUMNS_SIZE}=${userId}`;
|
||||||
|
const columnInfoPanelStorageName = `${INFO_PANEL_COLUMNS_SIZE}=${userId}`;
|
||||||
|
|
||||||
|
const isIndeterminate =
|
||||||
|
checkedUsers.result.length > 0 &&
|
||||||
|
checkedUsers.result.length !== filteredUsers.length;
|
||||||
|
|
||||||
|
const toggleAll = (isChecked: boolean) =>
|
||||||
|
toggleAllAccounts(isChecked, filteredUsers, checkedAccountType);
|
||||||
|
|
||||||
|
const onClearFilter = () => {
|
||||||
|
setSearchValue("");
|
||||||
|
};
|
||||||
|
|
||||||
|
const headerMenu: TGroupMenuItem[] = [
|
||||||
|
{
|
||||||
|
id: "change-type",
|
||||||
|
label: t("ChangeUserTypeDialog:ChangeUserTypeButton"),
|
||||||
|
disabled: false,
|
||||||
|
withDropDown: true,
|
||||||
|
options: typeOptions,
|
||||||
|
iconUrl: ChangeTypeReactSvgUrl,
|
||||||
|
onClick: () => {},
|
||||||
|
title: t("ChangeUserTypeDialog:ChangeUserTypeButton"),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<UserSelectTableContainer forwardedRef={tableRef} useReactWindow>
|
||||||
|
{checkedUsers.result.length > 0 && (
|
||||||
|
<div className="table-group-menu">
|
||||||
|
<TableGroupMenu
|
||||||
|
checkboxOptions={[]}
|
||||||
|
headerMenu={headerMenu}
|
||||||
|
withoutInfoPanelToggler
|
||||||
|
withComboBox={false}
|
||||||
|
isIndeterminate={isIndeterminate}
|
||||||
|
isChecked={checkedUsers.result.length === filteredUsers.length}
|
||||||
|
onChange={toggleAll}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{accountsData.length > 0 ? (
|
||||||
|
<>
|
||||||
|
<UsersTableHeader
|
||||||
|
t={t}
|
||||||
|
sectionWidth={sectionWidth}
|
||||||
|
userId={userId}
|
||||||
|
tableRef={tableRef}
|
||||||
|
columnStorageName={columnStorageName}
|
||||||
|
columnInfoPanelStorageName={columnInfoPanelStorageName}
|
||||||
|
isIndeterminate={isIndeterminate}
|
||||||
|
isChecked={checkedUsers.result.length === filteredUsers.length}
|
||||||
|
/>
|
||||||
|
<TableBody
|
||||||
|
itemHeight={49}
|
||||||
|
useReactWindow
|
||||||
|
infoPanelVisible={false}
|
||||||
|
columnStorageName={columnStorageName}
|
||||||
|
columnInfoPanelStorageName={columnInfoPanelStorageName}
|
||||||
|
filesLength={accountsData.length}
|
||||||
|
hasMoreFiles={false}
|
||||||
|
itemCount={accountsData.length}
|
||||||
|
fetchMoreFiles={() => {}}
|
||||||
|
>
|
||||||
|
{accountsData.map((data) => (
|
||||||
|
<UsersTableRow
|
||||||
|
key={data.key}
|
||||||
|
id={data.key}
|
||||||
|
type={data.userType}
|
||||||
|
displayName={data.displayName}
|
||||||
|
email={data.email}
|
||||||
|
typeOptions={typeOptions}
|
||||||
|
isChecked={isAccountChecked(data.key, checkedAccountType)}
|
||||||
|
toggleAccount={() => toggleAccount(data, checkedAccountType)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<EmptyScreenContainer
|
||||||
|
imageSrc={EmptyScreenUserReactSvgUrl}
|
||||||
|
imageAlt="Empty Screen user image"
|
||||||
|
headerText={t("Common:NotFoundUsers")}
|
||||||
|
descriptionText={t("Common:NotFoundUsersDescription")}
|
||||||
|
buttons={
|
||||||
|
<Box displayProp="flex" alignItems="center">
|
||||||
|
<IconButton
|
||||||
|
className="clear-icon"
|
||||||
|
isFill
|
||||||
|
size={12}
|
||||||
|
onClick={onClearFilter}
|
||||||
|
iconName={ClearEmptyFilterSvgUrl}
|
||||||
|
/>
|
||||||
|
<Link
|
||||||
|
type={LinkType.action}
|
||||||
|
isHovered
|
||||||
|
fontWeight="600"
|
||||||
|
onClick={onClearFilter}
|
||||||
|
>
|
||||||
|
{t("Common:ClearFilter")}
|
||||||
|
</Link>
|
||||||
|
</Box>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</UserSelectTableContainer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default inject<TStore>(({ userStore, importAccountsStore }) => {
|
||||||
|
const userId = userStore.user?.id;
|
||||||
|
const {
|
||||||
|
checkedUsers,
|
||||||
|
toggleAccount,
|
||||||
|
toggleAllAccounts,
|
||||||
|
isAccountChecked,
|
||||||
|
setSearchValue,
|
||||||
|
filteredUsers,
|
||||||
|
} = importAccountsStore;
|
||||||
|
|
||||||
|
return {
|
||||||
|
userId,
|
||||||
|
checkedUsers,
|
||||||
|
toggleAccount,
|
||||||
|
toggleAllAccounts,
|
||||||
|
isAccountChecked,
|
||||||
|
setSearchValue,
|
||||||
|
filteredUsers,
|
||||||
|
};
|
||||||
|
})(observer(TableView));
|
@ -0,0 +1,115 @@
|
|||||||
|
// (c) Copyright Ascensio System SIA 2009-2024
|
||||||
|
//
|
||||||
|
// This program is a free software product.
|
||||||
|
// You can redistribute it and/or modify it under the terms
|
||||||
|
// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
|
||||||
|
// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
|
||||||
|
// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
|
||||||
|
// any third-party rights.
|
||||||
|
//
|
||||||
|
// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
|
||||||
|
// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
|
||||||
|
// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
|
||||||
|
//
|
||||||
|
// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
|
||||||
|
//
|
||||||
|
// The interactive user interfaces in modified source and object code versions of the Program must
|
||||||
|
// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
|
||||||
|
//
|
||||||
|
// Pursuant to Section 7(b) of the License you must retain the original Product logo when
|
||||||
|
// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
|
||||||
|
// trademark law for use of our trademarks.
|
||||||
|
//
|
||||||
|
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
|
||||||
|
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
|
||||||
|
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||||
|
|
||||||
|
import { inject, observer } from "mobx-react";
|
||||||
|
import { withTranslation } from "react-i18next";
|
||||||
|
import { Consumer } from "@docspace/shared/utils/context";
|
||||||
|
|
||||||
|
import TableView from "./TableView";
|
||||||
|
import RowView from "./RowView";
|
||||||
|
import {
|
||||||
|
AccountsTableProps,
|
||||||
|
InjectedTypeSelectTableProps,
|
||||||
|
} from "../../../types";
|
||||||
|
|
||||||
|
const checkedAccountType = "result";
|
||||||
|
|
||||||
|
const AccountsTable = (props: AccountsTableProps) => {
|
||||||
|
const {
|
||||||
|
t,
|
||||||
|
accountsData,
|
||||||
|
viewAs,
|
||||||
|
changeGroupType,
|
||||||
|
UserTypes,
|
||||||
|
toggleAllAccounts,
|
||||||
|
} = props as InjectedTypeSelectTableProps;
|
||||||
|
|
||||||
|
const setTypeDocspaceAdmin = () => {
|
||||||
|
changeGroupType(UserTypes.DocSpaceAdmin);
|
||||||
|
toggleAllAccounts(false, [], checkedAccountType);
|
||||||
|
};
|
||||||
|
const setTypeRoomAdmin = () => {
|
||||||
|
changeGroupType(UserTypes.RoomAdmin);
|
||||||
|
toggleAllAccounts(false, [], checkedAccountType);
|
||||||
|
};
|
||||||
|
const setTypeUser = () => {
|
||||||
|
changeGroupType(UserTypes.User);
|
||||||
|
toggleAllAccounts(false, [], checkedAccountType);
|
||||||
|
};
|
||||||
|
|
||||||
|
const typeOptions = [
|
||||||
|
{
|
||||||
|
key: UserTypes.DocSpaceAdmin,
|
||||||
|
label: t(`Common:${UserTypes.DocSpaceAdmin}`),
|
||||||
|
onClick: setTypeDocspaceAdmin,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: UserTypes.RoomAdmin,
|
||||||
|
label: t(`Common:${UserTypes.RoomAdmin}`),
|
||||||
|
onClick: setTypeRoomAdmin,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: UserTypes.User,
|
||||||
|
label: t(`Common:PowerUser`),
|
||||||
|
onClick: setTypeUser,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Consumer>
|
||||||
|
{(context) =>
|
||||||
|
viewAs === "table" ? (
|
||||||
|
<TableView
|
||||||
|
t={t}
|
||||||
|
sectionWidth={context.sectionWidth}
|
||||||
|
accountsData={accountsData}
|
||||||
|
typeOptions={typeOptions}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<RowView
|
||||||
|
t={t}
|
||||||
|
sectionWidth={context.sectionWidth}
|
||||||
|
accountsData={accountsData}
|
||||||
|
typeOptions={typeOptions}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</Consumer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default inject<TStore>(({ setup, importAccountsStore }) => {
|
||||||
|
const { viewAs } = setup;
|
||||||
|
const { changeGroupType, UserTypes, toggleAllAccounts } = importAccountsStore;
|
||||||
|
|
||||||
|
return {
|
||||||
|
viewAs,
|
||||||
|
changeGroupType,
|
||||||
|
UserTypes,
|
||||||
|
toggleAllAccounts,
|
||||||
|
};
|
||||||
|
})(
|
||||||
|
withTranslation(["ChangeUserTypeDialog", "People"])(observer(AccountsTable)),
|
||||||
|
);
|
@ -0,0 +1,153 @@
|
|||||||
|
// (c) Copyright Ascensio System SIA 2009-2024
|
||||||
|
//
|
||||||
|
// This program is a free software product.
|
||||||
|
// You can redistribute it and/or modify it under the terms
|
||||||
|
// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
|
||||||
|
// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
|
||||||
|
// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
|
||||||
|
// any third-party rights.
|
||||||
|
//
|
||||||
|
// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
|
||||||
|
// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
|
||||||
|
// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
|
||||||
|
//
|
||||||
|
// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
|
||||||
|
//
|
||||||
|
// The interactive user interfaces in modified source and object code versions of the Program must
|
||||||
|
// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
|
||||||
|
//
|
||||||
|
// Pursuant to Section 7(b) of the License you must retain the original Product logo when
|
||||||
|
// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
|
||||||
|
// trademark law for use of our trademarks.
|
||||||
|
//
|
||||||
|
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
|
||||||
|
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
|
||||||
|
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||||
|
|
||||||
|
import { useState, useEffect } from "react";
|
||||||
|
import { inject, observer } from "mobx-react";
|
||||||
|
|
||||||
|
import { SaveCancelButtons } from "@docspace/shared/components/save-cancel-buttons";
|
||||||
|
import { SearchInput } from "@docspace/shared/components/search-input";
|
||||||
|
import { InputSize } from "@docspace/shared/components/text-input";
|
||||||
|
import AccountsTable from "./AccountsTable";
|
||||||
|
import AccountsPaging from "../../sub-components/AccountsPaging";
|
||||||
|
|
||||||
|
import { Wrapper } from "../../StyledDataImport";
|
||||||
|
import { InjectedTypeSelectProps, TypeSelectProps } from "../../types";
|
||||||
|
|
||||||
|
const PAGE_SIZE = 25;
|
||||||
|
const REFRESH_TIMEOUT = 100;
|
||||||
|
|
||||||
|
const SelectUsersTypeStep = (props: TypeSelectProps) => {
|
||||||
|
const {
|
||||||
|
t,
|
||||||
|
|
||||||
|
incrementStep,
|
||||||
|
decrementStep,
|
||||||
|
users,
|
||||||
|
searchValue,
|
||||||
|
setSearchValue,
|
||||||
|
filteredUsers,
|
||||||
|
} = props as InjectedTypeSelectProps;
|
||||||
|
|
||||||
|
const [boundaries, setBoundaries] = useState([0, PAGE_SIZE]);
|
||||||
|
const [dataPortion, setDataPortion] = useState(
|
||||||
|
filteredUsers.slice(...boundaries),
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleDataChange = (leftBoundary: number, rightBoundary: number) => {
|
||||||
|
setBoundaries([leftBoundary, rightBoundary]);
|
||||||
|
setDataPortion(filteredUsers.slice(leftBoundary, rightBoundary));
|
||||||
|
};
|
||||||
|
|
||||||
|
const onChangeInput = (value: string) => {
|
||||||
|
setSearchValue(value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onClearSearchInput = () => {
|
||||||
|
setSearchValue("");
|
||||||
|
};
|
||||||
|
|
||||||
|
const filteredAccounts = dataPortion.filter(
|
||||||
|
(data) =>
|
||||||
|
data.firstName?.toLowerCase().startsWith(searchValue.toLowerCase()) ||
|
||||||
|
data.displayName?.toLowerCase().startsWith(searchValue.toLowerCase()) ||
|
||||||
|
data.email?.toLowerCase().startsWith(searchValue.toLowerCase()),
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setDataPortion(filteredUsers.slice(...boundaries));
|
||||||
|
}, [users]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Wrapper>
|
||||||
|
<SaveCancelButtons
|
||||||
|
className="save-cancel-buttons upper-buttons"
|
||||||
|
onSaveClick={incrementStep}
|
||||||
|
onCancelClick={decrementStep}
|
||||||
|
showReminder
|
||||||
|
saveButtonLabel={t("Settings:NextStep")}
|
||||||
|
cancelButtonLabel={t("Common:Back")}
|
||||||
|
displaySettings
|
||||||
|
/>
|
||||||
|
|
||||||
|
{filteredUsers.length > 0 && (
|
||||||
|
<>
|
||||||
|
<SearchInput
|
||||||
|
id="search-checkedUsers-type-input"
|
||||||
|
className="importUsersSearch"
|
||||||
|
placeholder={t("Common:Search")}
|
||||||
|
value={searchValue}
|
||||||
|
onChange={onChangeInput}
|
||||||
|
refreshTimeout={REFRESH_TIMEOUT}
|
||||||
|
onClearSearch={onClearSearchInput}
|
||||||
|
size={InputSize.base}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<AccountsTable t={t} accountsData={filteredAccounts} />
|
||||||
|
|
||||||
|
{filteredUsers.length > PAGE_SIZE && filteredAccounts.length > 0 && (
|
||||||
|
<AccountsPaging
|
||||||
|
t={t}
|
||||||
|
numberOfItems={filteredUsers.length}
|
||||||
|
setDataPortion={handleDataChange}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{filteredAccounts.length > 0 && (
|
||||||
|
<SaveCancelButtons
|
||||||
|
className="save-cancel-buttons"
|
||||||
|
onSaveClick={incrementStep}
|
||||||
|
onCancelClick={decrementStep}
|
||||||
|
showReminder
|
||||||
|
saveButtonLabel={t("Settings:NextStep")}
|
||||||
|
cancelButtonLabel={t("Common:Back")}
|
||||||
|
displaySettings
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Wrapper>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default inject<TStore>(({ importAccountsStore }) => {
|
||||||
|
const {
|
||||||
|
users,
|
||||||
|
incrementStep,
|
||||||
|
decrementStep,
|
||||||
|
searchValue,
|
||||||
|
setSearchValue,
|
||||||
|
filteredUsers,
|
||||||
|
} = importAccountsStore;
|
||||||
|
|
||||||
|
return {
|
||||||
|
users,
|
||||||
|
incrementStep,
|
||||||
|
decrementStep,
|
||||||
|
searchValue,
|
||||||
|
setSearchValue,
|
||||||
|
filteredUsers,
|
||||||
|
};
|
||||||
|
})(observer(SelectUsersTypeStep));
|
@ -32,6 +32,8 @@ import {
|
|||||||
} from "@docspace/shared/api/settings/types";
|
} from "@docspace/shared/api/settings/types";
|
||||||
import { TPaymentFeature } from "@docspace/shared/api/portal/types";
|
import { TPaymentFeature } from "@docspace/shared/api/portal/types";
|
||||||
|
|
||||||
|
import { TOption } from "@docspace/shared/components/combobox";
|
||||||
|
|
||||||
export type TFunciton = ReturnType<typeof useTranslation>["t"];
|
export type TFunciton = ReturnType<typeof useTranslation>["t"];
|
||||||
|
|
||||||
export interface ProvidersProps {}
|
export interface ProvidersProps {}
|
||||||
@ -174,7 +176,7 @@ export interface UsersTableHeaderProps {
|
|||||||
columnInfoPanelStorageName: string;
|
columnInfoPanelStorageName: string;
|
||||||
isIndeterminate: boolean;
|
isIndeterminate: boolean;
|
||||||
isChecked: boolean;
|
isChecked: boolean;
|
||||||
toggleAll: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
toggleAll?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface UsersTableRowProps {
|
export interface UsersTableRowProps {
|
||||||
@ -283,3 +285,94 @@ export interface InjectedAddEmailRowContentProps
|
|||||||
extends AddEmailRowContentProps {
|
extends AddEmailRowContentProps {
|
||||||
changeEmail: TStore["importAccountsStore"]["changeEmail"];
|
changeEmail: TStore["importAccountsStore"]["changeEmail"];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface TypeSelectProps {
|
||||||
|
t: TFunciton;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface InjectedTypeSelectProps extends TypeSelectProps {
|
||||||
|
incrementStep: TStore["importAccountsStore"]["incrementStep"];
|
||||||
|
decrementStep: TStore["importAccountsStore"]["decrementStep"];
|
||||||
|
users: TStore["importAccountsStore"]["users"];
|
||||||
|
searchValue: TStore["importAccountsStore"]["searchValue"];
|
||||||
|
setSearchValue: TStore["importAccountsStore"]["setSearchValue"];
|
||||||
|
filteredUsers: TStore["importAccountsStore"]["filteredUsers"];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface InjectedTypeSelectTableProps extends AccountsTableProps {
|
||||||
|
viewAs: TStore["setup"]["viewAs"];
|
||||||
|
changeGroupType: TStore["importAccountsStore"]["changeGroupType"];
|
||||||
|
UserTypes: TStore["importAccountsStore"]["UserTypes"];
|
||||||
|
toggleAllAccounts: TStore["importAccountsStore"]["toggleAllAccounts"];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TypeSelectTableViewProps {
|
||||||
|
t: TFunciton;
|
||||||
|
sectionWidth?: number;
|
||||||
|
accountsData: TEnhancedMigrationUser[];
|
||||||
|
typeOptions: TOption[];
|
||||||
|
}
|
||||||
|
export interface InjectedTypeSelectTableViewProps
|
||||||
|
extends TypeSelectTableViewProps {
|
||||||
|
userId?: string;
|
||||||
|
checkedUsers: TStore["importAccountsStore"]["checkedUsers"];
|
||||||
|
toggleAccount: TStore["importAccountsStore"]["toggleAccount"];
|
||||||
|
toggleAllAccounts: TStore["importAccountsStore"]["toggleAllAccounts"];
|
||||||
|
isAccountChecked: TStore["importAccountsStore"]["isAccountChecked"];
|
||||||
|
setSearchValue: TStore["importAccountsStore"]["setSearchValue"];
|
||||||
|
filteredUsers: TStore["importAccountsStore"]["filteredUsers"];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TypeSelectTableRowProps {
|
||||||
|
id: string;
|
||||||
|
displayName: string;
|
||||||
|
email: string;
|
||||||
|
typeOptions: TOption[];
|
||||||
|
isChecked: boolean;
|
||||||
|
type: string;
|
||||||
|
toggleAccount: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface InjectedTypeSelectTableRowProps
|
||||||
|
extends TypeSelectTableRowProps {
|
||||||
|
changeUserType: TStore["importAccountsStore"]["changeUserType"];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TypeSelectRowViewProps {
|
||||||
|
t: TFunciton;
|
||||||
|
sectionWidth?: number;
|
||||||
|
accountsData: TEnhancedMigrationUser[];
|
||||||
|
typeOptions: TOption[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface InjectedTypeSelectRowViewProps extends TypeSelectRowViewProps {
|
||||||
|
filteredUsers: TStore["importAccountsStore"]["filteredUsers"];
|
||||||
|
checkedUsers: TStore["importAccountsStore"]["checkedUsers"];
|
||||||
|
toggleAccount: TStore["importAccountsStore"]["toggleAccount"];
|
||||||
|
toggleAllAccounts: TStore["importAccountsStore"]["toggleAllAccounts"];
|
||||||
|
isAccountChecked: TStore["importAccountsStore"]["isAccountChecked"];
|
||||||
|
setSearchValue: TStore["importAccountsStore"]["setSearchValue"];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TypeSelectUsersRowProps {
|
||||||
|
data: TEnhancedMigrationUser;
|
||||||
|
sectionWidth?: number;
|
||||||
|
typeOptions: TOption[];
|
||||||
|
isChecked: boolean;
|
||||||
|
toggleAccount: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TypeSelectRowContentProps {
|
||||||
|
id: string;
|
||||||
|
sectionWidth?: number;
|
||||||
|
displayName: string;
|
||||||
|
email: string;
|
||||||
|
typeOptions: TOption[];
|
||||||
|
roleSelectorRef: React.RefObject<HTMLDivElement>;
|
||||||
|
type: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface InjectedTypeSelectRowContentProps
|
||||||
|
extends TypeSelectRowContentProps {
|
||||||
|
changeUserType: TStore["importAccountsStore"]["changeUserType"];
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user