From 7a4e7346997a7f3ed6d0ac005b99310e958ba884 Mon Sep 17 00:00:00 2001 From: Elyor Djalilov Date: Tue, 26 Sep 2023 13:40:12 +0500 Subject: [PATCH] added empty screen --- packages/client/public/locales/en/People.json | 3 +- packages/client/public/locales/ru/People.json | 3 +- .../AccountsTable/RowView/index.js | 100 ++++++++++---- .../AccountsTable/TableView/index.js | 126 +++++++++++------ .../SelectUsersStep/AccountsTable/index.js | 3 +- .../Stepper/SelectUsersStep/index.js | 30 ++-- .../AccountsTable/RowView/index.js | 86 ++++++++---- .../AccountsTable/TableView/index.js | 128 ++++++++++++------ .../AccountsTable/index.js | 7 +- .../Stepper/SelectUsersTypeStep/index.js | 28 ++-- public/images/empty_screen_user.react.svg | 26 ++++ 11 files changed, 378 insertions(+), 162 deletions(-) create mode 100644 public/images/empty_screen_user.react.svg diff --git a/packages/client/public/locales/en/People.json b/packages/client/public/locales/en/People.json index f3c782f400..e24fbeaaee 100644 --- a/packages/client/public/locales/en/People.json +++ b/packages/client/public/locales/en/People.json @@ -3,5 +3,6 @@ "MessageEmailActivationInstuctionsSentOnEmail": "The email activation instructions have been sent to the <1>{{email}} 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." } diff --git a/packages/client/public/locales/ru/People.json b/packages/client/public/locales/ru/People.json index 8c003f882a..9e899c36ae 100644 --- a/packages/client/public/locales/ru/People.json +++ b/packages/client/public/locales/ru/People.json @@ -3,5 +3,6 @@ "MessageEmailActivationInstuctionsSentOnEmail": "Инструкции по активации электронной почты были отправлены на адрес <1>{{email}}.", "NotFoundUsers": "Пользователи не найдены", "NotFoundUsersDescription": "Невозможно отобразить людей, соответствующих вашему фильтру. Выберите другие параметры фильтра или очистите фильтр, чтобы просмотреть всех людей в этом разделе.", - "UserStatus": "Статус" + "UserStatus": "Статус", + "NotFoundUsersDesc": "Ни один пользователь не соответствует вашему запросу. Пожалуйста, измените параметры поиска или очистите поле поиска, чтобы просмотреть полный список пользователей." } diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersStep/AccountsTable/RowView/index.js b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersStep/AccountsTable/RowView/index.js index 0b50d7d090..3ae632e118 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersStep/AccountsTable/RowView/index.js +++ b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersStep/AccountsTable/RowView/index.js @@ -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 ( - -
- {checkedAccounts.length > 0 && ( - 0 ? ( + <> + +
+ {checkedAccounts.length > 0 && ( + + )} + {t("Common:Name")} +
+ + {accountsData.map((data) => ( + handleToggle(data.key)} /> - )} - {t("Common:Name")} -
- - {filteredAccounts.map((data) => ( - handleToggle(data.key)} + ))} + + ) : ( + + + + {t("Common:ClearFilter")} + + + } /> - ))} + )} ); }; @@ -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)); diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersStep/AccountsTable/TableView/index.js b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersStep/AccountsTable/TableView/index.js index aa6197b09b..cd293648e7 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersStep/AccountsTable/TableView/index.js +++ b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersStep/AccountsTable/TableView/index.js @@ -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 ( - - - {filteredAccounts.map((data) => ( - 0 ? ( + <> + handleToggle(e, data.key)} + sectionWidth={sectionWidth} + tableRef={tableRef} + userId={userId} + columnStorageName={columnStorageName} + columnInfoPanelStorageName={columnInfoPanelStorageName} + isIndeterminate={isIndeterminate} + isChecked={checkedAccounts.length === users.length} + toggleAll={toggleAll} /> - ))} - + + {accountsData.map((data) => ( + handleToggle(e, data.key)} + /> + ))} + + + ) : ( + + + + {t("Common:ClearFilter")} + + + } + /> + )} ); }; @@ -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)); diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersStep/AccountsTable/index.js b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersStep/AccountsTable/index.js index f12c5b8c56..5cfb33843a 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersStep/AccountsTable/index.js +++ b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersStep/AccountsTable/index.js @@ -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))); diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersStep/index.js b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersStep/index.js index f988670322..9db6d25100 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersStep/index.js +++ b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersStep/index.js @@ -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 ( <> - + {users.length > 25 && ( )} - LICENSE_LIMIT} - /> + {filteredAccounts.length > 0 && ( + LICENSE_LIMIT} + /> + )} ); }; diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/index.js b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/index.js index ddcc702bd9..387e866da7 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/index.js +++ b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/index.js @@ -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 ( {checkedAccounts.length > 0 && ( @@ -133,21 +144,50 @@ const RowView = ({ /> )} + {accountsData.length > 0 ? ( + <> + + {t("Common:Name")} + - - {t("Common:Name")} - - - {filteredAccounts.map((data) => ( - toggleAccount(data.key)} + {accountsData.map((data) => ( + toggleAccount(data.key)} + /> + ))} + + ) : ( + + + + {t("Common:ClearFilter")} + + + } /> - ))} + )} ); }; @@ -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)); diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/index.js b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/index.js index 61016128f9..46bd9c6084 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/index.js +++ b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/index.js @@ -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 ( {checkedAccounts.length > 0 && ( @@ -139,39 +150,70 @@ const TableView = ({ /> )} - - - {filteredAccounts.map((data) => ( - handleToggle(e, data.key)} + + {accountsData.length > 0 ? ( + <> + - ))} - + + {accountsData.map((data) => ( + handleToggle(e, data.key)} + /> + ))} + + + ) : ( + + + + {t("Common:ClearFilter")} + + + } + /> + )} ); }; @@ -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)); diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/index.js b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/index.js index 75d9b7f1df..d99c2c4c5e 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/index.js +++ b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/index.js @@ -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)) +); diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/index.js b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/index.js index 3921e8652e..a4cd5e4d0c 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/index.js +++ b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/index.js @@ -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 ( <> )} - + {users.length > 25 && ( )} - + {filteredAccounts.length > 0 && ( + + )} ); }; diff --git a/public/images/empty_screen_user.react.svg b/public/images/empty_screen_user.react.svg new file mode 100644 index 0000000000..10ccd1532a --- /dev/null +++ b/public/images/empty_screen_user.react.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + +