From f542baeae32030cc3eaaa036544ce437473663b2 Mon Sep 17 00:00:00 2001 From: Elyor Djalilov Date: Fri, 11 Aug 2023 17:10:56 +0500 Subject: [PATCH] added group menu items --- .../Stepper/ThirdStep/RowView/index.js | 95 ++++++++++++++++++- .../Stepper/ThirdStep/TableView/index.js | 80 +++++++++++++++- .../table-container/TableGroupMenu.js | 30 +++--- public/images/change.type.react.svg | 3 + 4 files changed, 190 insertions(+), 18 deletions(-) create mode 100644 public/images/change.type.react.svg diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/ThirdStep/RowView/index.js b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/ThirdStep/RowView/index.js index 120e3ccf7a..7635676dbe 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/ThirdStep/RowView/index.js +++ b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/ThirdStep/RowView/index.js @@ -1,20 +1,85 @@ -import { useState, useEffect } from "react"; +import { useState, useEffect, useRef } from "react"; import { inject, observer } from "mobx-react"; import { isMobile } from "react-device-detect"; import styled from "styled-components"; import SearchInput from "@docspace/components/search-input"; import RowContainer from "@docspace/components/row-container"; +import TableGroupMenu from "@docspace/components/table-container/TableGroupMenu"; +import ChangeTypeReactSvgUrl from "PUBLIC_DIR/images/change.type.react.svg?url"; import UsersTypeRow from "./UsersTypeRow"; import { mockData } from "../../mockData.js"; const StyledRowContainer = styled(RowContainer)` margin: 20px 0; + + .table-group-menu { + height: 60px; + position: absolute; + z-index: 201; + left: -20px; + top: 0; + width: 100%; + + .table-container_group-menu { + padding: 0px 20px; + border-image-slice: 0; + box-shadow: rgba(0, 0, 0, 0.07) 0px 4px 4px; + } + + .table-container_group-menu-checkbox { + margin-left: 7px; + } + + .table-container_group-menu-separator { + margin: 0 16px; + } + } + + .header-container-text { + font-size: 12px; + } + + .table-container_header { + position: absolute; + } `; +const data = [ + { + key: "docspace-admin", + label: "DocSpace admin", + onClick: () => console.log("changed-type"), + }, + { + key: "room-admin", + label: "Room admin", + onClick: () => console.log("changed-type"), + }, + { + key: "power-user", + label: "Power user", + onClick: () => console.log("changed-type"), + }, +]; + const RowView = (props) => { const { sectionWidth, viewAs, setViewAs } = props; const [isChecked, setIsChecked] = useState(false); const [checkbox, setCheckbox] = useState([]); + const rowRef = useRef(null); + + const onCheck = (checked) => { + setIsChecked(checked); + if (checked) { + setCheckbox(mockData.map((data) => data.id)); + } else { + setCheckbox([]); + } + }; + + const onChangeAllCheckbox = (e) => { + onCheck(e.target.checked); + }; const onChangeCheckbox = (id, checked) => { if (checked) { @@ -34,8 +99,34 @@ const RowView = (props) => { } }, [sectionWidth]); + const headerMenu = [ + { + id: "change-type", + key: "change-type", + label: "Change type", + disabled: false, + onClick: () => console.log("open-menu"), + withDropDown: true, + options: data, + iconUrl: ChangeTypeReactSvgUrl, + }, + ]; + return ( - + +
+ {checkbox.length > 0 && ( + + )} +
console.log("changed")} diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/ThirdStep/TableView/index.js b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/ThirdStep/TableView/index.js index 32a4a371ba..f577be7d4b 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/ThirdStep/TableView/index.js +++ b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/ThirdStep/TableView/index.js @@ -6,15 +6,40 @@ import styled from "styled-components"; import UsersTypeTableHeader from "./UsersTypeTableHeader"; import UsersTypeTableRow from "./UsersTypeTableRow"; + +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 SearchInput from "@docspace/components/search-input"; +import ChangeTypeReactSvgUrl from "PUBLIC_DIR/images/change.type.react.svg?url"; import { mockData } from "../../mockData.js"; const StyledTableContainer = styled(TableContainer)` margin: 20px 0; + .table-group-menu { + height: 69px; + position: absolute; + z-index: 201; + left: 0; + top: 214px; + width: 100%; + + .table-container_group-menu { + border-image-slice: 0; + box-shadow: rgba(0, 0, 0, 0.07) 0px 4px 4px; + } + + .table-container_group-menu-checkbox { + margin-left: 0; + } + + .table-container_group-menu-separator { + margin: 0 16px; + } + } + .header-container-text { font-size: 12px; } @@ -35,6 +60,24 @@ const StyledTableContainer = styled(TableContainer)` StyledTableContainer.defaultProps = { theme: Base }; +const data = [ + { + key: "docspace-admin", + label: "DocSpace admin", + onClick: () => console.log("changed-type"), + }, + { + key: "room-admin", + label: "Room admin", + onClick: () => console.log("changed-type"), + }, + { + key: "power-user", + label: "Power user", + onClick: () => console.log("changed-type"), + }, +]; + const TABLE_VERSION = "6"; const COLUMNS_SIZE = `googleWorkspaceColumnsSize_ver-${TABLE_VERSION}`; const INFO_PANEL_COLUMNS_SIZE = `infoPanelGoogleWorkspaceColumnsSize_ver-${TABLE_VERSION}`; @@ -45,15 +88,19 @@ const TableView = (props) => { const [checkbox, setCheckbox] = useState([]); const tableRef = useRef(null); - const onChangeAllCheckbox = (e) => { - setIsChecked(e.target.checked); - if (e.target.checked) { + const onCheck = (checked) => { + setIsChecked(checked); + if (checked) { setCheckbox(mockData.map((data) => data.id)); } else { setCheckbox([]); } }; + const onChangeAllCheckbox = (e) => { + onCheck(e.target.checked); + }; + const onChangeCheckbox = (id, checked) => { if (checked) { setCheckbox([...checkbox, id]); @@ -74,8 +121,35 @@ const TableView = (props) => { const columnStorageName = `${COLUMNS_SIZE}=${userId}`; const columnInfoPanelStorageName = `${INFO_PANEL_COLUMNS_SIZE}=${userId}`; + const headerMenu = [ + { + id: "change-type", + key: "change-type", + label: "Change type", + disabled: false, + onClick: () => console.log("open-menu"), + withDropDown: true, + options: data, + iconUrl: ChangeTypeReactSvgUrl, + }, + ]; + return ( +
+ {checkbox.length > 0 && ( + + )} +
+ console.log("changed")} diff --git a/packages/components/table-container/TableGroupMenu.js b/packages/components/table-container/TableGroupMenu.js index 6bd1bab083..07af516273 100644 --- a/packages/components/table-container/TableGroupMenu.js +++ b/packages/components/table-container/TableGroupMenu.js @@ -27,6 +27,7 @@ const TableGroupMenu = (props) => { withoutInfoPanelToggler, isMobileView, isBlocked, + withComboBox, ...rest } = props; const onCheckboxChange = (e) => { @@ -48,19 +49,22 @@ const TableGroupMenu = (props) => { isIndeterminate={isIndeterminate} title={t("Common:MainHeaderSelectAll")} /> - + {withComboBox && ( + + )} +
{headerMenu.map((item, index) => ( diff --git a/public/images/change.type.react.svg b/public/images/change.type.react.svg new file mode 100644 index 0000000000..da1b92ec62 --- /dev/null +++ b/public/images/change.type.react.svg @@ -0,0 +1,3 @@ + + +