From 5850a250fe06645c59cc287ebb7fc4b22e583a93 Mon Sep 17 00:00:00 2001 From: Amit Fainholts Date: Tue, 25 Jan 2022 14:29:45 +0200 Subject: [PATCH 1/8] Radio buttons added to selectList with single select --- ui/src/components/UI/Radio.tsx | 17 +++++++++++++++++ ui/src/components/UI/SelectList.tsx | 6 ++++-- 2 files changed, 21 insertions(+), 2 deletions(-) create mode 100644 ui/src/components/UI/Radio.tsx diff --git a/ui/src/components/UI/Radio.tsx b/ui/src/components/UI/Radio.tsx new file mode 100644 index 000000000..23a71e1d9 --- /dev/null +++ b/ui/src/components/UI/Radio.tsx @@ -0,0 +1,17 @@ +import React from "react"; + +export interface Props { + checked: boolean; + onToggle: (checked:boolean) => any; +} + +const Radio: React.FC = ({checked, onToggle}) => { + + return ( +
+ onToggle(event.target.checked)}/> +
+ ); +}; + +export default Radio; diff --git a/ui/src/components/UI/SelectList.tsx b/ui/src/components/UI/SelectList.tsx index 0659de6b2..6acd376c1 100644 --- a/ui/src/components/UI/SelectList.tsx +++ b/ui/src/components/UI/SelectList.tsx @@ -1,5 +1,6 @@ import { useMemo, useState } from "react"; import Checkbox from "./Checkbox" +import Radio from "./Radio"; export interface Props { valuesListInput; @@ -73,10 +74,11 @@ const SelectList: React.FC = ({valuesListInput,tableName,multiSelect=true {filteredValues?.map(listValue => { return - toggleValues(listValue)}/> + {multiSelect && toggleValues(listValue)}/>} + {!multiSelect && toggleValues(listValue)}/>} {listValue} - + } )} From e108fb542c038d3c29fa0f3222c49d0c45f0ad9c Mon Sep 17 00:00:00 2001 From: Amit Fainholts Date: Wed, 26 Jan 2022 11:56:53 +0200 Subject: [PATCH 2/8] addworkspace modal added --- .../Modals/AddUserModal/AddUserModal.sass | 2 +- .../Modals/AddUserModal/AddUserModal.tsx | 2 +- ...orkspaceModal.ts => AddWorkspaceModal.tsx} | 8 ++++---- .../WorkspaceSettings/WorkspaceSettings.tsx | 20 ++++++++++++++----- 4 files changed, 21 insertions(+), 11 deletions(-) rename ui/src/components/Modals/AddWorkspaceModal/{AddWorkspaceModal.ts => AddWorkspaceModal.tsx} (76%) diff --git a/ui/src/components/Modals/AddUserModal/AddUserModal.sass b/ui/src/components/Modals/AddUserModal/AddUserModal.sass index 06dfc9e98..cc1bc8549 100644 --- a/ui/src/components/Modals/AddUserModal/AddUserModal.sass +++ b/ui/src/components/Modals/AddUserModal/AddUserModal.sass @@ -1 +1 @@ -.AddUserModal {} \ No newline at end of file +// .AddUserModal {} \ No newline at end of file diff --git a/ui/src/components/Modals/AddUserModal/AddUserModal.tsx b/ui/src/components/Modals/AddUserModal/AddUserModal.tsx index 7223d7560..1e63d9c46 100644 --- a/ui/src/components/Modals/AddUserModal/AddUserModal.tsx +++ b/ui/src/components/Modals/AddUserModal/AddUserModal.tsx @@ -1,6 +1,6 @@ import React, { FC, useEffect, useState } from 'react'; import ConfirmationModal from '../../UI/Modals/ConfirmationModal'; -import './AddUserModal.less'; +import './AddUserModal.sass'; interface AddUserModalProps { isOpen : boolean diff --git a/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.ts b/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx similarity index 76% rename from ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.ts rename to ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx index 9e5c18996..daef3e025 100644 --- a/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.ts +++ b/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx @@ -2,11 +2,11 @@ import React, { FC, useEffect, useState } from 'react'; import ConfirmationModal from '../../UI/Modals/ConfirmationModal'; // import './AddUserModal.sass'; -interface AddUserModalProps { +interface AddWorkspaceModal { isOpen : boolean } -const AddUserModal: FC = ({isOpen}) => { +const AddWorkspaceModal: FC = ({isOpen,children}) => { const [isOpenModal,setIsOpen] = useState(isOpen) @@ -20,9 +20,9 @@ const AddUserModal: FC = ({isOpen}) => { return (<> - + {children} ); }; -export default AddUserModal; +export default AddWorkspaceModal; diff --git a/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx b/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx index d279cfa26..ad6cefe3c 100644 --- a/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx +++ b/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx @@ -2,6 +2,8 @@ import "../UserSettings/UserSettings.sass" import {ColsType, FilterableTableAction} from "../UI/FilterableTableAction" // import Api from "../../helpers/api" import { useEffect, useState } from "react"; +import AddWorkspaceModal from "../Modals/AddWorkspaceModal/AddWorkspaceModal"; +import SelectList from "../UI/SelectList"; interface Props {} @@ -10,7 +12,10 @@ interface Props {} export const WorkspaceSettings : React.FC = ({}) => { const [workspacesRows, setWorkspaces] = useState([]); - const cols : ColsType[] = [{field : "id",header:"Id"},{field : "name",header:"Name"}] + const [isOpenModal,setIsOpen] = useState(false); + const cols : ColsType[] = [{field : "id",header:"Id"},{field : "name",header:"Name"}]; + + const namespaces = {"default": false, "blabla": false, "test":true}; useEffect(() => { @@ -25,10 +30,8 @@ export const WorkspaceSettings : React.FC = ({}) => { },[]) const filterFuncFactory = (searchQuery: string) => { - return (row) => { - return row.name.toLowerCase().includes(searchQuery.toLowerCase()) + return (row) => row.name.toLowerCase().includes(searchQuery.toLowerCase()) } - } const searchConfig = { searchPlaceholder: "Search Workspace",filterRows: filterFuncFactory} @@ -42,10 +45,17 @@ export const WorkspaceSettings : React.FC = ({}) => { } - const buttonConfig = {onClick: () => {}, text:"Add Workspace"} + const buttonConfig = {onClick: () => {setIsOpen(true)}, text:"Add Workspace"} return (<> + + + + ); } + From 557c77cd04a8859e6804bc0e8b113a7521a11954 Mon Sep 17 00:00:00 2001 From: Amit Fainholts Date: Wed, 26 Jan 2022 12:05:06 +0200 Subject: [PATCH 3/8] close function added to addworkspacemodal --- .../Modals/AddWorkspaceModal/AddWorkspaceModal.tsx | 5 +++-- ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx b/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx index daef3e025..a49d11765 100644 --- a/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx +++ b/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx @@ -3,10 +3,11 @@ import ConfirmationModal from '../../UI/Modals/ConfirmationModal'; // import './AddUserModal.sass'; interface AddWorkspaceModal { - isOpen : boolean + isOpen : boolean, + onCloseModal: () => void } -const AddWorkspaceModal: FC = ({isOpen,children}) => { +const AddWorkspaceModal: FC = ({isOpen,onCloseModal,children}) => { const [isOpenModal,setIsOpen] = useState(isOpen) diff --git a/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx b/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx index ad6cefe3c..0df387d8a 100644 --- a/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx +++ b/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx @@ -50,7 +50,7 @@ export const WorkspaceSettings : React.FC = ({}) => { - + { setIsOpen(false); } }> From eeda33ac5eaabb4c2c2226f6b4158e63ddde77e3 Mon Sep 17 00:00:00 2001 From: Amit Fainholts Date: Wed, 26 Jan 2022 14:49:21 +0200 Subject: [PATCH 4/8] styling added to addworkspacemodal --- .../AddWorkspaceModal/AddWorkspaceModal.sass | 10 ++++ .../AddWorkspaceModal/AddWorkspaceModal.tsx | 47 ++++++++++++++++--- .../WorkspaceSettings/WorkspaceSettings.tsx | 11 ++--- 3 files changed, 55 insertions(+), 13 deletions(-) create mode 100644 ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.sass diff --git a/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.sass b/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.sass new file mode 100644 index 000000000..d5ea7c2aa --- /dev/null +++ b/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.sass @@ -0,0 +1,10 @@ +@import '../../../variables.module.scss' + +.workspace__name + width: 58% + +.searchNamespace + width: 32% + +.headline + color: $font-color \ No newline at end of file diff --git a/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx b/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx index a49d11765..c960ac7d8 100644 --- a/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx +++ b/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx @@ -1,27 +1,62 @@ import React, { FC, useEffect, useState } from 'react'; +import { useCommonStyles } from '../../../helpers/commonStyle'; import ConfirmationModal from '../../UI/Modals/ConfirmationModal'; +import SelectList from '../../UI/SelectList'; +import './AddWorkspaceModal.sass' // import './AddUserModal.sass'; +export type WorkspaceData = { + name:string; + namespaces: string[]; + } + interface AddWorkspaceModal { isOpen : boolean, - onCloseModal: () => void + onCloseModal: () => void, + workspaceData: WorkspaceData } -const AddWorkspaceModal: FC = ({isOpen,onCloseModal,children}) => { +const AddWorkspaceModal: FC = ({isOpen,onCloseModal, workspaceData ={}}) => { - const [isOpenModal,setIsOpen] = useState(isOpen) + const [isOpenModal,setIsOpen] = useState(isOpen); + const [workspaceDataModel, setUserData] = useState(workspaceData as WorkspaceData); + const [searchValue, setSearchValue] = useState(""); + const classes = useCommonStyles() + const [namespaces, SetNamespaces] = useState({}) useEffect(() => { setIsOpen(isOpen) },[isOpen]) - const onClose = () => {} + useEffect(() => { + (async () => { + try { + const namespacesList = {"default": false, "blabla": false, "test":true}; + SetNamespaces(namespacesList) + + } catch (e) { + console.error(e); + } + })(); +},[]) const onConfirm = () => {} return (<> - - {children} + +

DETAILS

+
+ {}}> +
+

TAP SETTINGS

+
+
+ setSearchValue(event.target.value)}/> +
+ +
); }; diff --git a/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx b/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx index 0df387d8a..2cb8f3c1b 100644 --- a/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx +++ b/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx @@ -2,7 +2,7 @@ import "../UserSettings/UserSettings.sass" import {ColsType, FilterableTableAction} from "../UI/FilterableTableAction" // import Api from "../../helpers/api" import { useEffect, useState } from "react"; -import AddWorkspaceModal from "../Modals/AddWorkspaceModal/AddWorkspaceModal"; +import AddWorkspaceModal, { WorkspaceData } from "../Modals/AddWorkspaceModal/AddWorkspaceModal"; import SelectList from "../UI/SelectList"; interface Props {} @@ -12,11 +12,10 @@ interface Props {} export const WorkspaceSettings : React.FC = ({}) => { const [workspacesRows, setWorkspaces] = useState([]); + const [workspaceData,SetWorkspaceData] = useState({} as WorkspaceData); const [isOpenModal,setIsOpen] = useState(false); const cols : ColsType[] = [{field : "id",header:"Id"},{field : "name",header:"Name"}]; - const namespaces = {"default": false, "blabla": false, "test":true}; - useEffect(() => { (async () => { @@ -50,10 +49,8 @@ export const WorkspaceSettings : React.FC = ({}) => { - { setIsOpen(false); } }> - + { setIsOpen(false); } } > + ); From 83d8f2d23270d4cfce8f717d077a52fe9ca3efa7 Mon Sep 17 00:00:00 2001 From: Amit Fainholts Date: Wed, 26 Jan 2022 19:09:16 +0200 Subject: [PATCH 5/8] dealing with warnings --- .../Modals/AddUserModal/AddUserModal.sass | 5 --- .../Modals/AddUserModal/AddUserModal.tsx | 9 ++--- .../AddWorkspaceModal/AddWorkspaceModal.tsx | 40 +++++++++++-------- .../components/UI/FilterableTableAction.tsx | 2 +- .../UI/Modals/ConfirmationModal.sass | 2 +- .../components/UserSettings/UserSettings.tsx | 5 --- .../WorkspaceSettings/WorkspaceSettings.tsx | 1 - 7 files changed, 30 insertions(+), 34 deletions(-) diff --git a/ui/src/components/Modals/AddUserModal/AddUserModal.sass b/ui/src/components/Modals/AddUserModal/AddUserModal.sass index dc967b282..767a0a00e 100644 --- a/ui/src/components/Modals/AddUserModal/AddUserModal.sass +++ b/ui/src/components/Modals/AddUserModal/AddUserModal.sass @@ -1,9 +1,5 @@ @import '../../../variables.module' -<<<<<<< HEAD -.user__role - width : 186px -======= .user &__details display: flex; @@ -17,4 +13,3 @@ & .user__role width : 40% ->>>>>>> 1cfc896c105820df2713ea2c2d4e489f4c5c8731 diff --git a/ui/src/components/Modals/AddUserModal/AddUserModal.tsx b/ui/src/components/Modals/AddUserModal/AddUserModal.tsx index e92900fd6..acfd95a5c 100644 --- a/ui/src/components/Modals/AddUserModal/AddUserModal.tsx +++ b/ui/src/components/Modals/AddUserModal/AddUserModal.tsx @@ -1,6 +1,6 @@ -import { FormControl, InputLabel, MenuItem, Select, TextField } from '@material-ui/core'; -import React, { FC, useEffect, useState } from 'react'; -import Api from '../../../helpers/api'; +import { FormControl, InputLabel, MenuItem, Select } from '@material-ui/core'; +import { FC, useEffect, useState } from 'react'; +// import Api from '../../../helpers/api'; import { useCommonStyles } from '../../../helpers/commonStyle'; import ConfirmationModal from '../../UI/Modals/ConfirmationModal'; import SelectList from '../../UI/SelectList'; @@ -18,11 +18,10 @@ interface AddUserModalProps { userData : UserData; } -const api = Api.getInstance(); +// const api = Api.getInstance(); export const AddUserModal: FC = ({isOpen, onCloseModal, userData = {}}) => { - const [isOpenModal,setIsOpen] = useState(isOpen) //const [editUserData, setEditUserData] = useState(userData) const [searchValue, setSearchValue] = useState(""); //const [userRole,setUserRole] = useState("") diff --git a/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx b/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx index c960ac7d8..66c57692a 100644 --- a/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx +++ b/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx @@ -1,49 +1,57 @@ -import React, { FC, useEffect, useState } from 'react'; +import { FC, useEffect, useState } from 'react'; +import Api from '../../../helpers/api'; import { useCommonStyles } from '../../../helpers/commonStyle'; import ConfirmationModal from '../../UI/Modals/ConfirmationModal'; import SelectList from '../../UI/SelectList'; import './AddWorkspaceModal.sass' -// import './AddUserModal.sass'; export type WorkspaceData = { name:string; namespaces: string[]; } -interface AddWorkspaceModal { +interface AddWorkspaceModalProp { isOpen : boolean, onCloseModal: () => void, workspaceData: WorkspaceData } -const AddWorkspaceModal: FC = ({isOpen,onCloseModal, workspaceData ={}}) => { +const api = Api.getInstance(); + +const AddWorkspaceModal: FC = ({isOpen,onCloseModal, workspaceData ={}}) => { - const [isOpenModal,setIsOpen] = useState(isOpen); const [workspaceDataModel, setUserData] = useState(workspaceData as WorkspaceData); const [searchValue, setSearchValue] = useState(""); const classes = useCommonStyles() - const [namespaces, SetNamespaces] = useState({}) - - useEffect(() => { - setIsOpen(isOpen) - },[isOpen]) + const [namespaces, setNamespaces] = useState({}) useEffect(() => { + if(!isOpen) return; (async () => { try { - const namespacesList = {"default": false, "blabla": false, "test":true}; - SetNamespaces(namespacesList) - + setSearchValue(""); + const tapConfig = await api.getTapConfig(); + console.log(tapConfig); + // if(isFirstLogin) { + const namespacesObj = {...tapConfig?.tappedNamespaces} + Object.keys(tapConfig?.tappedNamespaces ?? {}).forEach(namespace => { + namespacesObj[namespace] = true; + }) + setNamespaces(namespacesObj); + // } else { + setNamespaces(tapConfig?.tappedNamespaces); + // } } catch (e) { console.error(e); + } finally { } - })(); -},[]) + })() +}, [isOpen]) const onConfirm = () => {} return (<> - +

DETAILS

= ({onRowDelete,onRowEdit, s const filteredValues = useMemo(() => { const searchFunc = searchConfig.filterRows(inputSearch) return tableRows.filter(searchFunc) - },[tableRows, inputSearch]) + },[tableRows, inputSearch,searchConfig]) return (<>
diff --git a/ui/src/components/UI/Modals/ConfirmationModal.sass b/ui/src/components/UI/Modals/ConfirmationModal.sass index bde9149f3..426bb25b7 100644 --- a/ui/src/components/UI/Modals/ConfirmationModal.sass +++ b/ui/src/components/UI/Modals/ConfirmationModal.sass @@ -52,4 +52,4 @@ width: 100%; width: -moz-available; width: -webkit-fill-available; - width: fill-available; \ No newline at end of file + width: strech; \ No newline at end of file diff --git a/ui/src/components/UserSettings/UserSettings.tsx b/ui/src/components/UserSettings/UserSettings.tsx index 98d73cfea..e6debaa5f 100644 --- a/ui/src/components/UserSettings/UserSettings.tsx +++ b/ui/src/components/UserSettings/UserSettings.tsx @@ -3,11 +3,6 @@ import {ColsType, FilterableTableAction} from "../UI/FilterableTableAction" // import Api from "../../helpers/api" import { useEffect, useState } from "react"; import AddUserModal, { UserData } from "../Modals/AddUserModal/AddUserModal"; -import { Select } from "../UI/Select"; -import { MenuItem } from "@material-ui/core"; -import { settings } from "cluster"; -import { SettingsModal } from "../SettingsModal/SettingModal"; -import OasModal from "../Modals/OasModal/OasModal"; interface Props { diff --git a/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx b/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx index 2cb8f3c1b..8e2030e02 100644 --- a/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx +++ b/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx @@ -3,7 +3,6 @@ import {ColsType, FilterableTableAction} from "../UI/FilterableTableAction" // import Api from "../../helpers/api" import { useEffect, useState } from "react"; import AddWorkspaceModal, { WorkspaceData } from "../Modals/AddWorkspaceModal/AddWorkspaceModal"; -import SelectList from "../UI/SelectList"; interface Props {} From b73bb69491afe3e54490d9e75235ced29d49c0ee Mon Sep 17 00:00:00 2001 From: Amit Fainholts Date: Wed, 26 Jan 2022 20:31:04 +0200 Subject: [PATCH 6/8] edit mode added --- .../Modals/AddUserModal/AddUserModal.tsx | 4 ++-- .../AddWorkspaceModal/AddWorkspaceModal.tsx | 14 +++++++++----- .../WorkspaceSettings/WorkspaceSettings.tsx | 17 +++++++++++------ 3 files changed, 22 insertions(+), 13 deletions(-) diff --git a/ui/src/components/Modals/AddUserModal/AddUserModal.tsx b/ui/src/components/Modals/AddUserModal/AddUserModal.tsx index 7b5e24d32..2e80baf98 100644 --- a/ui/src/components/Modals/AddUserModal/AddUserModal.tsx +++ b/ui/src/components/Modals/AddUserModal/AddUserModal.tsx @@ -1,6 +1,6 @@ import { Button, FormControl, InputLabel, MenuItem, Select } from '@material-ui/core'; import { FC, useEffect, useState } from 'react'; -// import Api from '../../../helpers/api'; +import Api from '../../../helpers/api'; import { useCommonStyles } from '../../../helpers/commonStyle'; import ConfirmationModal from '../../UI/Modals/ConfirmationModal'; import SelectList from '../../UI/SelectList'; @@ -19,7 +19,7 @@ interface AddUserModalProps { userData : UserData; } -// const api = Api.getInstance(); +const api = Api.getInstance(); export const AddUserModal: FC = ({isOpen, onCloseModal, userData = {}}) => { diff --git a/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx b/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx index 66c57692a..d88d150d4 100644 --- a/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx +++ b/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx @@ -13,17 +13,21 @@ export type WorkspaceData = { interface AddWorkspaceModalProp { isOpen : boolean, onCloseModal: () => void, - workspaceData: WorkspaceData + workspaceData: WorkspaceData, + onEdit: boolean } const api = Api.getInstance(); -const AddWorkspaceModal: FC = ({isOpen,onCloseModal, workspaceData ={}}) => { +const AddWorkspaceModal: FC = ({isOpen,onCloseModal, workspaceData ={}, onEdit}) => { const [workspaceDataModel, setUserData] = useState(workspaceData as WorkspaceData); const [searchValue, setSearchValue] = useState(""); const classes = useCommonStyles() - const [namespaces, setNamespaces] = useState({}) + const [namespaces, setNamespaces] = useState({}); + + const title = onEdit ? "Edit Workspace" : "Add Workspace"; + useEffect(() => { if(!isOpen) return; @@ -51,10 +55,10 @@ const AddWorkspaceModal: FC = ({isOpen,onCloseModal, work const onConfirm = () => {} return (<> - +

DETAILS

- {}}>

TAP SETTINGS

diff --git a/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx b/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx index 8e2030e02..8c3a0ff9c 100644 --- a/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx +++ b/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx @@ -10,17 +10,20 @@ interface Props {} export const WorkspaceSettings : React.FC = ({}) => { - const [workspacesRows, setWorkspaces] = useState([]); + const [workspacesRows, setWorkspacesRows] = useState([]); const [workspaceData,SetWorkspaceData] = useState({} as WorkspaceData); const [isOpenModal,setIsOpen] = useState(false); + const [isEditMode,setIsEditMode] = useState(false); + const cols : ColsType[] = [{field : "id",header:"Id"},{field : "name",header:"Name"}]; + const buttonConfig = {onClick: () => {setIsOpen(true); setIsEditMode(false);SetWorkspaceData({} as WorkspaceData)}, text:"Add Workspace"} useEffect(() => { (async () => { try { const workspacesDemo = [{id:"1", name:"Worksapce1"}] - setWorkspaces(workspacesDemo) + setWorkspacesRows(workspacesDemo) } catch (e) { console.error(e); } @@ -36,19 +39,21 @@ export const WorkspaceSettings : React.FC = ({}) => { const onRowDelete = (row) => { const filterFunc = filterFuncFactory(row.name) const newWorkspaceList = workspacesRows.filter(filterFunc) - setWorkspaces(newWorkspaceList) + setWorkspacesRows(newWorkspaceList) } const onRowEdit = (row) => { - + setIsOpen(true); + setIsEditMode(true); + SetWorkspaceData(row); } - const buttonConfig = {onClick: () => {setIsOpen(true)}, text:"Add Workspace"} + return (<> - { setIsOpen(false); } } > + { setIsOpen(false);} } > From 5aa16eaf5665a1a89d2b373e4b6b944f9f42216f Mon Sep 17 00:00:00 2001 From: Amit Fainholts Date: Thu, 27 Jan 2022 11:40:38 +0200 Subject: [PATCH 7/8] selectList supports array of objects instead of object --- .../Modals/AddUserModal/AddUserModal.tsx | 5 +- ui/src/components/UI/SelectList.tsx | 50 +++++++++++-------- 2 files changed, 31 insertions(+), 24 deletions(-) diff --git a/ui/src/components/Modals/AddUserModal/AddUserModal.tsx b/ui/src/components/Modals/AddUserModal/AddUserModal.tsx index 2e80baf98..d66ff38ae 100644 --- a/ui/src/components/Modals/AddUserModal/AddUserModal.tsx +++ b/ui/src/components/Modals/AddUserModal/AddUserModal.tsx @@ -39,7 +39,7 @@ export const AddUserModal: FC = ({isOpen, onCloseModal, userD useEffect(() => { (async () => { try { - const workspacesList = {"default":true} //await api.getWorkspaces() + const workspacesList = [{"default":true}] //await api.getWorkspaces() setWorkspaces(workspacesList) } catch (e) { @@ -75,7 +75,8 @@ export const AddUserModal: FC = ({isOpen, onCloseModal, userD const generateLink = () => { try { - api.genareteInviteLink(userDataModel) + api.genareteInviteLink(userDataModel) + console.log(workspaces); } catch (e) { console.error(e); } diff --git a/ui/src/components/UI/SelectList.tsx b/ui/src/components/UI/SelectList.tsx index 298f984c4..c73bcd04b 100644 --- a/ui/src/components/UI/SelectList.tsx +++ b/ui/src/components/UI/SelectList.tsx @@ -12,58 +12,64 @@ export interface Props { tabelClassName } -const SelectList: React.FC = ({valuesListInput,tableName,multiSelect=true,searchValue="",setValues,tabelClassName}) => { - const [valuesList, setValuesList] = useState(valuesListInput); +export type ValuesListInput = { + key: string; + value: string; + isChecked: boolean; +}[] - const toggleValues = (value) => { +const SelectList: React.FC = ({valuesListInput ,tableName,multiSelect=true,searchValue="",setValues,tabelClassName}) => { + const [valuesList, setValuesList] = useState(valuesListInput as ValuesListInput); + + const toggleValues = (checkedKey) => { if (!multiSelect){ - unToggleAll(value); + unToggleAll(checkedKey); } else { - const newValues = {...valuesList}; - newValues[value] = !valuesList[value]; + const newValues: ValuesListInput = [...valuesList]; + newValues[checkedKey].isChecked = !valuesList[checkedKey].isChecked; setValuesList(newValues); setValues(newValues); } } - const unToggleAll = (value) => { - const newValues = {}; - Object.keys(valuesList).forEach(key => { - if (key !== value) - newValues[key] = false; + const unToggleAll = (checkedKey) => { + const newValues = []; + valuesList.forEach(valueList => { + if (valueList.key !== checkedKey) + newValues[checkedKey] = false; else - newValues[key] = true; + newValues[checkedKey] = true; }) setValuesList(newValues); setValues(newValues); } const toggleAll = () => { - const isChecked = Object.values(valuesList).every(tap => tap === true); + const isChecked = valuesList.every(valueTap => valueTap.isChecked === true); setAllCheckedValue(!isChecked); } const setAllCheckedValue = (isTap: boolean) => { - const newValues = {}; - Object.keys(valuesList).forEach(key => { - newValues[key] = isTap; + const newValues = []; + valuesList.forEach(valueList => { + newValues[valueList.key] = isTap; }) setValuesList(newValues); setValues(newValues); } const tableHead = multiSelect ? - tap === true)} + valueTap.isChecked === false)} onToggle={toggleAll}/> {tableName} : - {tableName} + {tableName} const filteredValues = useMemo(() => { - return Object.keys(valuesList).filter((listValue) => listValue.includes(searchValue)); + return valuesList.filter((listValue) => listValue.value.includes(searchValue)); },[valuesList, searchValue]) return
@@ -73,10 +79,10 @@ const SelectList: React.FC = ({valuesListInput,tableName,multiSelect=true {filteredValues?.map(listValue => { - return + return - {multiSelect && toggleValues(listValue)}/>} - {!multiSelect && toggleValues(listValue)}/>} + {multiSelect && toggleValues(listValue.key)}/>} + {!multiSelect && toggleValues(listValue.key)}/>} {listValue} From 462bf72632a7f809d09035ef053a4e790b43cc3f Mon Sep 17 00:00:00 2001 From: Amit Fainholts Date: Thu, 27 Jan 2022 11:47:26 +0200 Subject: [PATCH 8/8] merge fixes --- ui/src/components/Modals/AddUserModal/AddUserModal.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/src/components/Modals/AddUserModal/AddUserModal.tsx b/ui/src/components/Modals/AddUserModal/AddUserModal.tsx index 6af79df75..afa688db9 100644 --- a/ui/src/components/Modals/AddUserModal/AddUserModal.tsx +++ b/ui/src/components/Modals/AddUserModal/AddUserModal.tsx @@ -6,7 +6,6 @@ import ConfirmationModal from '../../UI/Modals/ConfirmationModal'; import SelectList from '../../UI/SelectList'; import './AddUserModal.sass'; import spinner from "../../assets/spinner.svg"; -import { useForm,Controller } from "react-hook-form"; export type UserData = { role:string;