added empty screen
This commit is contained in:
parent
9372eb3012
commit
7a4e734699
@ -3,5 +3,6 @@
|
||||
"MessageEmailActivationInstuctionsSentOnEmail": "The email activation instructions have been sent to the <1>{{email}}</1> email address.",
|
||||
"NotFoundUsers": "No users found",
|
||||
"NotFoundUsersDescription": "No people matching your filter can be displayed. Please select other filter options or clear filter to view all the people in this section.",
|
||||
"UserStatus": "Status"
|
||||
"UserStatus": "Status",
|
||||
"NotFoundUsersDesc": "No users match your search. Please adjust your search parameters or clear the search field to view the full list of users."
|
||||
}
|
||||
|
@ -3,5 +3,6 @@
|
||||
"MessageEmailActivationInstuctionsSentOnEmail": "Инструкции по активации электронной почты были отправлены на адрес <1>{{email}}</1>.",
|
||||
"NotFoundUsers": "Пользователи не найдены",
|
||||
"NotFoundUsersDescription": "Невозможно отобразить людей, соответствующих вашему фильтру. Выберите другие параметры фильтра или очистите фильтр, чтобы просмотреть всех людей в этом разделе.",
|
||||
"UserStatus": "Статус"
|
||||
"UserStatus": "Статус",
|
||||
"NotFoundUsersDesc": "Ни один пользователь не соответствует вашему запросу. Пожалуйста, измените параметры поиска или очистите поле поиска, чтобы просмотреть полный список пользователей."
|
||||
}
|
||||
|
@ -4,14 +4,28 @@ import { isMobile } from "react-device-detect";
|
||||
import { tablet } from "@docspace/components/utils/device";
|
||||
import styled from "styled-components";
|
||||
|
||||
import EmptyScreenContainer from "@docspace/components/empty-screen-container";
|
||||
import IconButton from "@docspace/components/icon-button";
|
||||
import Link from "@docspace/components/link";
|
||||
import Box from "@docspace/components/box";
|
||||
import RowContainer from "@docspace/components/row-container";
|
||||
import Row from "@docspace/components/row";
|
||||
import Checkbox from "@docspace/components/checkbox";
|
||||
import Text from "@docspace/components/text";
|
||||
import UsersRow from "./UsersRow";
|
||||
import EmptyScreenUserReactSvgUrl from "PUBLIC_DIR/images/empty_screen_user.react.svg?url";
|
||||
import ClearEmptyFilterSvgUrl from "PUBLIC_DIR/images/clear.empty.filter.svg?url";
|
||||
|
||||
const StyledRowContainer = styled(RowContainer)`
|
||||
margin: 0 0 20px;
|
||||
|
||||
.clear-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.ec-desc {
|
||||
max-width: 348px;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledRow = styled(Row)`
|
||||
@ -50,7 +64,7 @@ const RowView = (props) => {
|
||||
toggleAccount,
|
||||
toggleAllAccounts,
|
||||
isAccountChecked,
|
||||
searchValue,
|
||||
setSearchValue,
|
||||
} = props;
|
||||
const rowRef = useRef(null);
|
||||
|
||||
@ -58,6 +72,10 @@ const RowView = (props) => {
|
||||
|
||||
const handleToggle = (id) => toggleAccount(id);
|
||||
|
||||
const onClearFilter = () => {
|
||||
setSearchValue("");
|
||||
};
|
||||
|
||||
const isIndeterminate =
|
||||
checkedAccounts.length > 0 && checkedAccounts.length !== users.length;
|
||||
|
||||
@ -71,36 +89,60 @@ const RowView = (props) => {
|
||||
}
|
||||
}, [sectionWidth]);
|
||||
|
||||
const filteredAccounts = accountsData.filter(
|
||||
(data) =>
|
||||
data.displayName.toLowerCase().startsWith(searchValue.toLowerCase()) ||
|
||||
data.email.toLowerCase().startsWith(searchValue.toLowerCase())
|
||||
);
|
||||
|
||||
return (
|
||||
<StyledRowContainer forwardedRef={rowRef} useReactWindow={false}>
|
||||
<StyledRow sectionWidth={sectionWidth}>
|
||||
<div className="row-header-item">
|
||||
{checkedAccounts.length > 0 && (
|
||||
<Checkbox
|
||||
isChecked={checkedAccounts.length === users.length}
|
||||
isIndeterminate={isIndeterminate}
|
||||
onChange={toggleAll}
|
||||
{accountsData.length > 0 ? (
|
||||
<>
|
||||
<StyledRow sectionWidth={sectionWidth}>
|
||||
<div className="row-header-item">
|
||||
{checkedAccounts.length > 0 && (
|
||||
<Checkbox
|
||||
isChecked={checkedAccounts.length === users.length}
|
||||
isIndeterminate={isIndeterminate}
|
||||
onChange={toggleAll}
|
||||
/>
|
||||
)}
|
||||
<Text className="row-header-title">{t("Common:Name")}</Text>
|
||||
</div>
|
||||
</StyledRow>
|
||||
{accountsData.map((data) => (
|
||||
<UsersRow
|
||||
t={t}
|
||||
key={data.key}
|
||||
data={data}
|
||||
sectionWidth={sectionWidth}
|
||||
isChecked={isAccountChecked(data.key)}
|
||||
toggleAccount={() => handleToggle(data.key)}
|
||||
/>
|
||||
)}
|
||||
<Text className="row-header-title">{t("Common:Name")}</Text>
|
||||
</div>
|
||||
</StyledRow>
|
||||
{filteredAccounts.map((data) => (
|
||||
<UsersRow
|
||||
t={t}
|
||||
key={data.key}
|
||||
data={data}
|
||||
sectionWidth={sectionWidth}
|
||||
isChecked={isAccountChecked(data.key)}
|
||||
toggleAccount={() => handleToggle(data.key)}
|
||||
))}
|
||||
</>
|
||||
) : (
|
||||
<EmptyScreenContainer
|
||||
imageSrc={EmptyScreenUserReactSvgUrl}
|
||||
imageAlt="Empty Screen user image"
|
||||
headerText={t("People:NotFoundUsers")}
|
||||
descriptionText={t("People:NotFoundUsersDesc")}
|
||||
buttons={
|
||||
<Box displayProp="flex" alignItems="center">
|
||||
<IconButton
|
||||
className="clear-icon"
|
||||
isFill
|
||||
size="12"
|
||||
onClick={onClearFilter}
|
||||
iconName={ClearEmptyFilterSvgUrl}
|
||||
/>
|
||||
<Link
|
||||
type="action"
|
||||
isHovered={true}
|
||||
fontWeight="600"
|
||||
onClick={onClearFilter}
|
||||
>
|
||||
{t("Common:ClearFilter")}
|
||||
</Link>
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
))}
|
||||
)}
|
||||
</StyledRowContainer>
|
||||
);
|
||||
};
|
||||
@ -113,7 +155,7 @@ export default inject(({ setup, importAccountsStore }) => {
|
||||
toggleAccount,
|
||||
toggleAllAccounts,
|
||||
isAccountChecked,
|
||||
searchValue,
|
||||
setSearchValue,
|
||||
} = importAccountsStore;
|
||||
|
||||
return {
|
||||
@ -124,6 +166,6 @@ export default inject(({ setup, importAccountsStore }) => {
|
||||
toggleAccount,
|
||||
toggleAllAccounts,
|
||||
isAccountChecked,
|
||||
searchValue,
|
||||
setSearchValue,
|
||||
};
|
||||
})(observer(RowView));
|
||||
|
@ -4,10 +4,16 @@ import { isMobile } from "react-device-detect";
|
||||
import { Base } from "@docspace/components/themes";
|
||||
import styled from "styled-components";
|
||||
|
||||
import EmptyScreenContainer from "@docspace/components/empty-screen-container";
|
||||
import IconButton from "@docspace/components/icon-button";
|
||||
import Link from "@docspace/components/link";
|
||||
import Box from "@docspace/components/box";
|
||||
import UsersTableHeader from "./UsersTableHeader";
|
||||
import UsersTableRow from "./UsersTableRow";
|
||||
import TableContainer from "@docspace/components/table-container/TableContainer";
|
||||
import TableBody from "@docspace/components/table-container/TableBody";
|
||||
import EmptyScreenUserReactSvgUrl from "PUBLIC_DIR/images/empty_screen_user.react.svg?url";
|
||||
import ClearEmptyFilterSvgUrl from "PUBLIC_DIR/images/clear.empty.filter.svg?url";
|
||||
|
||||
const StyledTableContainer = styled(TableContainer)`
|
||||
margin: 0 0 20px;
|
||||
@ -29,6 +35,14 @@ const StyledTableContainer = styled(TableContainer)`
|
||||
props.theme.client.settings.migration.tableRowHoverColor};
|
||||
}
|
||||
}
|
||||
.clear-icon {
|
||||
margin-right: 8px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.ec-desc {
|
||||
max-width: 618px;
|
||||
}
|
||||
`;
|
||||
|
||||
StyledTableContainer.defaultProps = { theme: Base };
|
||||
@ -40,6 +54,7 @@ const INFO_PANEL_COLUMNS_SIZE = `infoPanelGoogleWorkspaceColumnsSize_ver-${TABLE
|
||||
const TableView = (props) => {
|
||||
const {
|
||||
t,
|
||||
users,
|
||||
userId,
|
||||
viewAs,
|
||||
setViewAs,
|
||||
@ -49,8 +64,7 @@ const TableView = (props) => {
|
||||
toggleAccount,
|
||||
toggleAllAccounts,
|
||||
isAccountChecked,
|
||||
users,
|
||||
searchValue,
|
||||
setSearchValue,
|
||||
} = props;
|
||||
const tableRef = useRef(null);
|
||||
|
||||
@ -61,6 +75,10 @@ const TableView = (props) => {
|
||||
toggleAccount(id);
|
||||
};
|
||||
|
||||
const onClearFilter = () => {
|
||||
setSearchValue("");
|
||||
};
|
||||
|
||||
const isIndeterminate =
|
||||
checkedAccounts.length > 0 && checkedAccounts.length !== users.length;
|
||||
|
||||
@ -76,47 +94,71 @@ const TableView = (props) => {
|
||||
const columnStorageName = `${COLUMNS_SIZE}=${userId}`;
|
||||
const columnInfoPanelStorageName = `${INFO_PANEL_COLUMNS_SIZE}=${userId}`;
|
||||
|
||||
const filteredAccounts = accountsData.filter(
|
||||
(data) =>
|
||||
data.displayName.toLowerCase().startsWith(searchValue.toLowerCase()) ||
|
||||
data.email.toLowerCase().startsWith(searchValue.toLowerCase())
|
||||
);
|
||||
|
||||
return (
|
||||
<StyledTableContainer forwardedRef={tableRef} useReactWindow>
|
||||
<UsersTableHeader
|
||||
t={t}
|
||||
sectionWidth={sectionWidth}
|
||||
tableRef={tableRef}
|
||||
userId={userId}
|
||||
columnStorageName={columnStorageName}
|
||||
columnInfoPanelStorageName={columnInfoPanelStorageName}
|
||||
isIndeterminate={isIndeterminate}
|
||||
isChecked={checkedAccounts.length === users.length}
|
||||
toggleAll={toggleAll}
|
||||
/>
|
||||
<TableBody
|
||||
itemHeight={49}
|
||||
useReactWindow
|
||||
infoPanelVisible={false}
|
||||
columnStorageName={columnStorageName}
|
||||
columnInfoPanelStorageName={columnInfoPanelStorageName}
|
||||
filesLength={accountsData.length}
|
||||
hasMoreFiles={false}
|
||||
itemCount={accountsData.length}
|
||||
>
|
||||
{filteredAccounts.map((data) => (
|
||||
<UsersTableRow
|
||||
{accountsData.length > 0 ? (
|
||||
<>
|
||||
<UsersTableHeader
|
||||
t={t}
|
||||
key={data.key}
|
||||
displayName={data.displayName}
|
||||
email={data.email}
|
||||
isDublicate={data.isDublicate}
|
||||
isChecked={isAccountChecked(data.key)}
|
||||
toggleAccount={(e) => handleToggle(e, data.key)}
|
||||
sectionWidth={sectionWidth}
|
||||
tableRef={tableRef}
|
||||
userId={userId}
|
||||
columnStorageName={columnStorageName}
|
||||
columnInfoPanelStorageName={columnInfoPanelStorageName}
|
||||
isIndeterminate={isIndeterminate}
|
||||
isChecked={checkedAccounts.length === users.length}
|
||||
toggleAll={toggleAll}
|
||||
/>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableBody
|
||||
itemHeight={49}
|
||||
useReactWindow
|
||||
infoPanelVisible={false}
|
||||
columnStorageName={columnStorageName}
|
||||
columnInfoPanelStorageName={columnInfoPanelStorageName}
|
||||
filesLength={accountsData.length}
|
||||
hasMoreFiles={false}
|
||||
itemCount={accountsData.length}
|
||||
>
|
||||
{accountsData.map((data) => (
|
||||
<UsersTableRow
|
||||
t={t}
|
||||
key={data.key}
|
||||
displayName={data.displayName}
|
||||
email={data.email}
|
||||
isDublicate={data.isDublicate}
|
||||
isChecked={isAccountChecked(data.key)}
|
||||
toggleAccount={(e) => handleToggle(e, data.key)}
|
||||
/>
|
||||
))}
|
||||
</TableBody>
|
||||
</>
|
||||
) : (
|
||||
<EmptyScreenContainer
|
||||
imageSrc={EmptyScreenUserReactSvgUrl}
|
||||
imageAlt="Empty Screen user image"
|
||||
headerText={t("People:NotFoundUsers")}
|
||||
descriptionText={t("People:NotFoundUsersDesc")}
|
||||
buttons={
|
||||
<Box displayProp="flex" alignItems="center">
|
||||
<IconButton
|
||||
className="clear-icon"
|
||||
isFill
|
||||
size="12"
|
||||
onClick={onClearFilter}
|
||||
iconName={ClearEmptyFilterSvgUrl}
|
||||
/>
|
||||
<Link
|
||||
type="action"
|
||||
isHovered={true}
|
||||
fontWeight="600"
|
||||
onClick={onClearFilter}
|
||||
>
|
||||
{t("Common:ClearFilter")}
|
||||
</Link>
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</StyledTableContainer>
|
||||
);
|
||||
};
|
||||
@ -125,12 +167,12 @@ export default inject(({ setup, auth, importAccountsStore }) => {
|
||||
const { viewAs, setViewAs } = setup;
|
||||
const { id: userId } = auth.userStore.user;
|
||||
const {
|
||||
users,
|
||||
checkedAccounts,
|
||||
toggleAccount,
|
||||
toggleAllAccounts,
|
||||
isAccountChecked,
|
||||
users,
|
||||
searchValue,
|
||||
setSearchValue,
|
||||
} = importAccountsStore;
|
||||
|
||||
return {
|
||||
@ -142,6 +184,6 @@ export default inject(({ setup, auth, importAccountsStore }) => {
|
||||
toggleAccount,
|
||||
toggleAllAccounts,
|
||||
isAccountChecked,
|
||||
searchValue,
|
||||
setSearchValue,
|
||||
};
|
||||
})(observer(TableView));
|
||||
|
@ -1,4 +1,5 @@
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import { Consumer } from "@docspace/components/utils/context";
|
||||
|
||||
import TableView from "./TableView";
|
||||
@ -32,4 +33,4 @@ export default inject(({ setup }) => {
|
||||
return {
|
||||
viewAs,
|
||||
};
|
||||
})(observer(AccountsTable));
|
||||
})(withTranslation(["People"])(observer(AccountsTable)));
|
||||
|
@ -34,6 +34,12 @@ const SelectUsersStep = ({
|
||||
setSearchValue("");
|
||||
};
|
||||
|
||||
const filteredAccounts = dataPortion.filter(
|
||||
(data) =>
|
||||
data.displayName.toLowerCase().startsWith(searchValue.toLowerCase()) ||
|
||||
data.email.toLowerCase().startsWith(searchValue.toLowerCase())
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SaveCancelButtons
|
||||
@ -63,7 +69,7 @@ const SelectUsersStep = ({
|
||||
onClearSearch={onClearSearchInput}
|
||||
/>
|
||||
|
||||
<AccountsTable t={t} accountsData={dataPortion} />
|
||||
<AccountsTable t={t} accountsData={filteredAccounts} />
|
||||
|
||||
{users.length > 25 && (
|
||||
<AccountsPaging
|
||||
@ -73,16 +79,18 @@ const SelectUsersStep = ({
|
||||
/>
|
||||
)}
|
||||
|
||||
<SaveCancelButtons
|
||||
className="save-cancel-buttons"
|
||||
onSaveClick={onNextStep}
|
||||
onCancelClick={onPrevStep}
|
||||
showReminder={showReminder}
|
||||
saveButtonLabel={t("Settings:NextStep")}
|
||||
cancelButtonLabel={t("Common:Back")}
|
||||
displaySettings={true}
|
||||
saveButtonDisabled={numberOfCheckedAccounts > LICENSE_LIMIT}
|
||||
/>
|
||||
{filteredAccounts.length > 0 && (
|
||||
<SaveCancelButtons
|
||||
className="save-cancel-buttons"
|
||||
onSaveClick={onNextStep}
|
||||
onCancelClick={onPrevStep}
|
||||
showReminder={showReminder}
|
||||
saveButtonLabel={t("Settings:NextStep")}
|
||||
cancelButtonLabel={t("Common:Back")}
|
||||
displaySettings={true}
|
||||
saveButtonDisabled={numberOfCheckedAccounts > LICENSE_LIMIT}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
@ -6,11 +6,17 @@ import styled from "styled-components";
|
||||
|
||||
import UsersTypeRow from "./UsersTypeRow";
|
||||
|
||||
import EmptyScreenContainer from "@docspace/components/empty-screen-container";
|
||||
import IconButton from "@docspace/components/icon-button";
|
||||
import Link from "@docspace/components/link";
|
||||
import Box from "@docspace/components/box";
|
||||
import TableGroupMenu from "@docspace/components/table-container/TableGroupMenu";
|
||||
import RowContainer from "@docspace/components/row-container";
|
||||
import Row from "@docspace/components/row";
|
||||
import Text from "@docspace/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";
|
||||
|
||||
const StyledRowContainer = styled(RowContainer)`
|
||||
margin: 0 0 20px;
|
||||
@ -47,6 +53,14 @@ const StyledRowContainer = styled(RowContainer)`
|
||||
.table-container_header {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.clear-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.ec-desc {
|
||||
max-width: 348px;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledRow = styled(Row)`
|
||||
@ -78,7 +92,7 @@ const RowView = ({
|
||||
toggleAccount,
|
||||
isAccountChecked,
|
||||
onCheckAccounts,
|
||||
searchValue,
|
||||
setSearchValue,
|
||||
}) => {
|
||||
const rowRef = useRef(null);
|
||||
|
||||
@ -86,6 +100,10 @@ const RowView = ({
|
||||
onCheckAccounts(checked, users);
|
||||
};
|
||||
|
||||
const onClearFilter = () => {
|
||||
setSearchValue("");
|
||||
};
|
||||
|
||||
const isIndeterminate =
|
||||
checkedAccounts.length > 0 && checkedAccounts.length !== users.length;
|
||||
|
||||
@ -105,19 +123,12 @@ const RowView = ({
|
||||
key: "change-type",
|
||||
label: t("ChangeUserTypeDialog:ChangeUserTypeButton"),
|
||||
disabled: false,
|
||||
onClick: () => console.log("open-menu"),
|
||||
withDropDown: true,
|
||||
options: typeOptions,
|
||||
iconUrl: ChangeTypeReactSvgUrl,
|
||||
},
|
||||
];
|
||||
|
||||
const filteredAccounts = accountsData.filter(
|
||||
(data) =>
|
||||
data.displayName.toLowerCase().startsWith(searchValue.toLowerCase()) ||
|
||||
data.email.toLowerCase().startsWith(searchValue.toLowerCase())
|
||||
);
|
||||
|
||||
return (
|
||||
<StyledRowContainer forwardedRef={rowRef} useReactWindow={false}>
|
||||
{checkedAccounts.length > 0 && (
|
||||
@ -133,21 +144,50 @@ const RowView = ({
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{accountsData.length > 0 ? (
|
||||
<>
|
||||
<StyledRow key="Name" sectionWidth={sectionWidth} onClick={toggleAll}>
|
||||
<Text className="row-header-title">{t("Common:Name")}</Text>
|
||||
</StyledRow>
|
||||
|
||||
<StyledRow key="Name" sectionWidth={sectionWidth} onClick={toggleAll}>
|
||||
<Text className="row-header-title">{t("Common:Name")}</Text>
|
||||
</StyledRow>
|
||||
|
||||
{filteredAccounts.map((data) => (
|
||||
<UsersTypeRow
|
||||
key={data.key}
|
||||
data={data}
|
||||
sectionWidth={sectionWidth}
|
||||
typeOptions={typeOptions}
|
||||
isChecked={isAccountChecked(data.key)}
|
||||
toggleAccount={() => toggleAccount(data.key)}
|
||||
{accountsData.map((data) => (
|
||||
<UsersTypeRow
|
||||
key={data.key}
|
||||
data={data}
|
||||
sectionWidth={sectionWidth}
|
||||
typeOptions={typeOptions}
|
||||
isChecked={isAccountChecked(data.key)}
|
||||
toggleAccount={() => toggleAccount(data.key)}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
) : (
|
||||
<EmptyScreenContainer
|
||||
imageSrc={EmptyScreenUserReactSvgUrl}
|
||||
imageAlt="Empty Screen user image"
|
||||
headerText={t("People:NotFoundUsers")}
|
||||
descriptionText={t("People:NotFoundUsersDesc")}
|
||||
buttons={
|
||||
<Box displayProp="flex" alignItems="center">
|
||||
<IconButton
|
||||
className="clear-icon"
|
||||
isFill
|
||||
size="12"
|
||||
onClick={onClearFilter}
|
||||
iconName={ClearEmptyFilterSvgUrl}
|
||||
/>
|
||||
<Link
|
||||
type="action"
|
||||
isHovered={true}
|
||||
fontWeight="600"
|
||||
onClick={onClearFilter}
|
||||
>
|
||||
{t("Common:ClearFilter")}
|
||||
</Link>
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
))}
|
||||
)}
|
||||
</StyledRowContainer>
|
||||
);
|
||||
};
|
||||
@ -161,7 +201,7 @@ export default inject(({ setup, importAccountsStore }) => {
|
||||
toggleAllAccounts,
|
||||
isAccountChecked,
|
||||
onCheckAccounts,
|
||||
searchValue,
|
||||
setSearchValue,
|
||||
} = importAccountsStore;
|
||||
|
||||
return {
|
||||
@ -173,6 +213,6 @@ export default inject(({ setup, importAccountsStore }) => {
|
||||
toggleAllAccounts,
|
||||
isAccountChecked,
|
||||
onCheckAccounts,
|
||||
searchValue,
|
||||
setSearchValue,
|
||||
};
|
||||
})(observer(RowView));
|
||||
|
@ -3,14 +3,19 @@ import { inject, observer } from "mobx-react";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import { Base } from "@docspace/components/themes";
|
||||
import styled from "styled-components";
|
||||
|
||||
import UsersTypeTableHeader from "./UsersTypeTableHeader";
|
||||
import UsersTypeTableRow from "./UsersTypeTableRow";
|
||||
|
||||
import EmptyScreenContainer from "@docspace/components/empty-screen-container";
|
||||
import IconButton from "@docspace/components/icon-button";
|
||||
import Link from "@docspace/components/link";
|
||||
import Box from "@docspace/components/box";
|
||||
import TableGroupMenu from "@docspace/components/table-container/TableGroupMenu";
|
||||
import TableContainer from "@docspace/components/table-container/TableContainer";
|
||||
import TableBody from "@docspace/components/table-container/TableBody";
|
||||
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";
|
||||
|
||||
const StyledTableContainer = styled(TableContainer)`
|
||||
margin: 0 0 20px;
|
||||
@ -57,6 +62,15 @@ const StyledTableContainer = styled(TableContainer)`
|
||||
props.theme.client.settings.migration.tableRowHoverColor};
|
||||
}
|
||||
}
|
||||
|
||||
.clear-icon {
|
||||
margin-right: 8px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.ec-desc {
|
||||
max-width: 618px;
|
||||
}
|
||||
`;
|
||||
|
||||
StyledTableContainer.defaultProps = { theme: Base };
|
||||
@ -78,7 +92,7 @@ const TableView = ({
|
||||
toggleAccount,
|
||||
onCheckAccounts,
|
||||
isAccountChecked,
|
||||
searchValue,
|
||||
setSearchValue,
|
||||
}) => {
|
||||
const tableRef = useRef(null);
|
||||
const columnStorageName = `${COLUMNS_SIZE}=${userId}`;
|
||||
@ -96,6 +110,10 @@ const TableView = ({
|
||||
toggleAccount(id);
|
||||
};
|
||||
|
||||
const onClearFilter = () => {
|
||||
setSearchValue("");
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!sectionWidth) return;
|
||||
if (sectionWidth < 1025 || isMobile) {
|
||||
@ -111,19 +129,12 @@ const TableView = ({
|
||||
key: "change-type",
|
||||
label: t("ChangeUserTypeDialog:ChangeUserTypeButton"),
|
||||
disabled: false,
|
||||
onClick: () => console.log("open-menu"),
|
||||
withDropDown: true,
|
||||
options: typeOptions,
|
||||
iconUrl: ChangeTypeReactSvgUrl,
|
||||
},
|
||||
];
|
||||
|
||||
const filteredAccounts = accountsData.filter(
|
||||
(data) =>
|
||||
data.displayName.toLowerCase().startsWith(searchValue.toLowerCase()) ||
|
||||
data.email.toLowerCase().startsWith(searchValue.toLowerCase())
|
||||
);
|
||||
|
||||
return (
|
||||
<StyledTableContainer forwardedRef={tableRef} useReactWindow>
|
||||
{checkedAccounts.length > 0 && (
|
||||
@ -139,39 +150,70 @@ const TableView = ({
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<UsersTypeTableHeader
|
||||
t={t}
|
||||
sectionWidth={sectionWidth}
|
||||
tableRef={tableRef}
|
||||
columnStorageName={columnStorageName}
|
||||
columnInfoPanelStorageName={columnInfoPanelStorageName}
|
||||
isIndeterminate={isIndeterminate}
|
||||
isChecked={checkedAccounts.length === users.length}
|
||||
toggleAll={toggleAll}
|
||||
/>
|
||||
<TableBody
|
||||
itemHeight={49}
|
||||
useReactWindow
|
||||
infoPanelVisible={false}
|
||||
columnStorageName={columnStorageName}
|
||||
columnInfoPanelStorageName={columnInfoPanelStorageName}
|
||||
filesLength={accountsData.length}
|
||||
hasMoreFiles={false}
|
||||
itemCount={accountsData.length}
|
||||
>
|
||||
{filteredAccounts.map((data) => (
|
||||
<UsersTypeTableRow
|
||||
key={data.key}
|
||||
id={data.key}
|
||||
type={data.userType}
|
||||
displayName={data.displayName}
|
||||
email={data.email}
|
||||
typeOptions={typeOptions}
|
||||
isChecked={isAccountChecked(data.key)}
|
||||
toggleAccount={(e) => handleToggle(e, data.key)}
|
||||
|
||||
{accountsData.length > 0 ? (
|
||||
<>
|
||||
<UsersTypeTableHeader
|
||||
t={t}
|
||||
sectionWidth={sectionWidth}
|
||||
tableRef={tableRef}
|
||||
columnStorageName={columnStorageName}
|
||||
columnInfoPanelStorageName={columnInfoPanelStorageName}
|
||||
isIndeterminate={isIndeterminate}
|
||||
isChecked={checkedAccounts.length === users.length}
|
||||
toggleAll={toggleAll}
|
||||
/>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableBody
|
||||
itemHeight={49}
|
||||
useReactWindow
|
||||
infoPanelVisible={false}
|
||||
columnStorageName={columnStorageName}
|
||||
columnInfoPanelStorageName={columnInfoPanelStorageName}
|
||||
filesLength={accountsData.length}
|
||||
hasMoreFiles={false}
|
||||
itemCount={accountsData.length}
|
||||
>
|
||||
{accountsData.map((data) => (
|
||||
<UsersTypeTableRow
|
||||
key={data.key}
|
||||
id={data.key}
|
||||
type={data.userType}
|
||||
displayName={data.displayName}
|
||||
email={data.email}
|
||||
typeOptions={typeOptions}
|
||||
isChecked={isAccountChecked(data.key)}
|
||||
toggleAccount={(e) => handleToggle(e, data.key)}
|
||||
/>
|
||||
))}
|
||||
</TableBody>
|
||||
</>
|
||||
) : (
|
||||
<EmptyScreenContainer
|
||||
imageSrc={EmptyScreenUserReactSvgUrl}
|
||||
imageAlt="Empty Screen user image"
|
||||
headerText={t("People:NotFoundUsers")}
|
||||
descriptionText={t("People:NotFoundUsersDesc")}
|
||||
buttons={
|
||||
<Box displayProp="flex" alignItems="center">
|
||||
<IconButton
|
||||
className="clear-icon"
|
||||
isFill
|
||||
size="12"
|
||||
onClick={onClearFilter}
|
||||
iconName={ClearEmptyFilterSvgUrl}
|
||||
/>
|
||||
<Link
|
||||
type="action"
|
||||
isHovered={true}
|
||||
fontWeight="600"
|
||||
onClick={onClearFilter}
|
||||
>
|
||||
{t("Common:ClearFilter")}
|
||||
</Link>
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</StyledTableContainer>
|
||||
);
|
||||
};
|
||||
@ -186,7 +228,7 @@ export default inject(({ setup, auth, importAccountsStore }) => {
|
||||
toggleAllAccounts,
|
||||
isAccountChecked,
|
||||
onCheckAccounts,
|
||||
searchValue,
|
||||
setSearchValue,
|
||||
} = importAccountsStore;
|
||||
|
||||
return {
|
||||
@ -199,6 +241,6 @@ export default inject(({ setup, auth, importAccountsStore }) => {
|
||||
toggleAllAccounts,
|
||||
isAccountChecked,
|
||||
onCheckAccounts,
|
||||
searchValue,
|
||||
setSearchValue,
|
||||
};
|
||||
})(observer(TableView));
|
||||
|
@ -10,14 +10,17 @@ const AccountsTable = ({ t, viewAs, accountsData }) => {
|
||||
{
|
||||
key: "DocSpaceAdmin",
|
||||
label: t("Common:DocSpaceAdmin"),
|
||||
onClick: (e) => console.log(e),
|
||||
},
|
||||
{
|
||||
key: "RoomAdmin",
|
||||
label: t("Common:RoomAdmin"),
|
||||
onClick: (e) => console.log(e),
|
||||
},
|
||||
{
|
||||
key: "User",
|
||||
label: t("Common:PowerUser"),
|
||||
onClick: (e) => console.log(e),
|
||||
},
|
||||
];
|
||||
|
||||
@ -50,4 +53,6 @@ export default inject(({ setup }) => {
|
||||
return {
|
||||
viewAs,
|
||||
};
|
||||
})(withTranslation(["ChangeUserTypeDialog"])(observer(AccountsTable)));
|
||||
})(
|
||||
withTranslation(["ChangeUserTypeDialog", "People"])(observer(AccountsTable))
|
||||
);
|
||||
|
@ -35,6 +35,12 @@ const SelectUsersTypeStep = ({
|
||||
setSearchValue("");
|
||||
};
|
||||
|
||||
const filteredAccounts = dataPortion.filter(
|
||||
(data) =>
|
||||
data.displayName.toLowerCase().startsWith(searchValue.toLowerCase()) ||
|
||||
data.email.toLowerCase().startsWith(searchValue.toLowerCase())
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SaveCancelButtons
|
||||
@ -58,7 +64,7 @@ const SelectUsersTypeStep = ({
|
||||
/>
|
||||
)}
|
||||
|
||||
<AccountsTable t={t} accountsData={dataPortion} />
|
||||
<AccountsTable t={t} accountsData={filteredAccounts} />
|
||||
|
||||
{users.length > 25 && (
|
||||
<AccountsPaging
|
||||
@ -68,15 +74,17 @@ const SelectUsersTypeStep = ({
|
||||
/>
|
||||
)}
|
||||
|
||||
<SaveCancelButtons
|
||||
className="save-cancel-buttons"
|
||||
onSaveClick={onNextStep}
|
||||
onCancelClick={onPrevStep}
|
||||
showReminder={showReminder}
|
||||
saveButtonLabel={t("Settings:NextStep")}
|
||||
cancelButtonLabel={t("Common:Back")}
|
||||
displaySettings={true}
|
||||
/>
|
||||
{filteredAccounts.length > 0 && (
|
||||
<SaveCancelButtons
|
||||
className="save-cancel-buttons"
|
||||
onSaveClick={onNextStep}
|
||||
onCancelClick={onPrevStep}
|
||||
showReminder={showReminder}
|
||||
saveButtonLabel={t("Settings:NextStep")}
|
||||
cancelButtonLabel={t("Common:Back")}
|
||||
displaySettings={true}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
26
public/images/empty_screen_user.react.svg
Normal file
26
public/images/empty_screen_user.react.svg
Normal file
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 26 KiB |
Loading…
Reference in New Issue
Block a user