diff --git a/ui/src/components/Modals/AddUserModal/AddUserModal.tsx b/ui/src/components/Modals/AddUserModal/AddUserModal.tsx index c7793bc0a..f8da350fd 100644 --- a/ui/src/components/Modals/AddUserModal/AddUserModal.tsx +++ b/ui/src/components/Modals/AddUserModal/AddUserModal.tsx @@ -32,7 +32,8 @@ export const AddUserModal: FC = ({isOpen, onCloseModal, userD //const [editUserData, setEditUserData] = useState(userData) const [searchValue, setSearchValue] = useState(""); - const [workspaces, setWorkspaces] = useState([]) + const [workspaces, setWorkspaces] = useState([]); + const [checkedWorkspaceKeys, setCheckedWorkspaceKeys] = useState([]); //const { control, handleSubmit,register } = useForm(); const [disable, setDisable] = useState(true); const [editMode, setEditMode] = useState(isEditMode); @@ -59,7 +60,7 @@ export const AddUserModal: FC = ({isOpen, onCloseModal, userD "id": "c7ad9158-d840-46c0-b5ce-2487c013723f", "name": "test" } - ].map((obj) => {return {key:obj.id, value:obj.name,isChecked:false}}) + ].map((obj) => {return {key:obj.id, value:obj.name}}) //await api.getWorkspaces() setWorkspaces(workspacesList) @@ -224,8 +225,8 @@ export const AddUserModal: FC = ({isOpen, onCloseModal, userD setSearchValue(event.target.value)}/> - + diff --git a/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx b/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx index 9930f2ecc..559518656 100644 --- a/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx +++ b/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx @@ -1,11 +1,14 @@ import { FC, useEffect, useMemo, useState } from 'react'; +import { workerData } from 'worker_threads'; 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 { toast } from "react-toastify"; export type WorkspaceData = { + id:string; name:string; namespaces: string[]; } @@ -13,42 +16,35 @@ export type WorkspaceData = { interface AddWorkspaceModalProp { isOpen : boolean, onCloseModal: () => void, - workspaceDataInput: WorkspaceData, + workspaceId: string, onEdit: boolean } - +export const workspacesDemo = [{id:"1", name:"Worksapce1" , namespaces: [{key:"namespace1", value:"namespace1"},{key:"namespace2", value:"namespace2"}]}]; const api = Api.getInstance(); -const AddWorkspaceModal: FC = ({isOpen,onCloseModal, workspaceDataInput ={}, onEdit}) => { +const AddWorkspaceModal: FC = ({isOpen,onCloseModal, workspaceId, onEdit}) => { - const [workspaceDataModal, setWorkspaceData] = useState({} as WorkspaceData); const [searchValue, setSearchValue] = useState(""); - const [namespaces, setNamespaces] = useState([]); - const [namespacesNames, setNamespaceNames] = useState([]); - const [workspaceName, setWorkspaceName] = useState(""); - const [disable, setDisable] = useState(true); - console.log(workspaceDataInput); - console.log(workspaceDataModal); + const [workspaceName, setWorkspaceName] = useState(""); + const [checkedNamespacesKeys, setCheckedNamespacesKeys] = useState([]); + const [namespaces, setNamespaces] = useState([]); const classes = useCommonStyles(); const title = onEdit ? "Edit Workspace" : "Add Workspace"; - useEffect(() => { - setWorkspaceData(workspaceDataInput as WorkspaceData); - },[workspaceDataInput]) - useEffect(() => { if(!isOpen) return; (async () => { try { + if(onEdit){ + const workspace = workspacesDemo.find(obj => obj.id = workspaceId); + setWorkspaceName(workspace.name); + setCheckedNamespacesKeys(workspace.namespaces); + } setSearchValue(""); - const namespaces = [{key:"1", value:"namespace1",isChecked:false},{key:"2", value:"namespace2",isChecked:false}]; - const list = namespaces.map(obj => { - const isValueChecked = workspaceDataModal.namespaces.some(checkedValueKey => obj.key === checkedValueKey) - return {...obj, isChecked: isValueChecked} - }) + const namespaces = [{key:"namespace1", value:"namespace1"},{key:"namespace2", value:"namespace2"},{key:"namespace3",value:"namespace3"}]; setNamespaces(namespaces); } catch (e) { console.error(e); @@ -58,49 +54,39 @@ const AddWorkspaceModal: FC = ({isOpen,onCloseModal, work }, [isOpen]) const onWorkspaceNameChange = (event) => { - // const data = {...workspaceData, name: event.target.value}; - //setWorkspaceData(data); setWorkspaceName(event.target.value); - setGenarateDisabledState(); } - - const onNamespaceChange = (newVal) => { - var filteredValues = newVal.filter(obj => obj.isChecked); - var namespaceNames = filteredValues.map(obj => obj.value); - setNamespaceNames(namespaceNames); - - // var filteredValues = newVal.filter(obj => obj.isChecked); - // var namespaceNames = filteredValues.map(obj => obj.value); - // const data = {...workspaceData, namespaces: namespaceNames}; - // setWorkspaceData(data); - setGenarateDisabledState(); - } - - const isFormValid = () : boolean => { - return (Object.values(workspaceDataModal).length === 2) && Object.values(workspaceDataModal).every(val => val !== null) - } - - const setGenarateDisabledState = () => { - const isValid = isFormValid() - setDisable(!isValid) - } + // const isFormValid = () : boolean => { + // return (Object.values(workspaceDataModal).length === 2) && Object.values(workspaceDataModal).every(val => val !== null) + // } const onConfirm = () => { - const data = {name: workspaceName, namespaces: namespacesNames}; - setWorkspaceData(data); + try{ + const workspaceData = { + name: workspaceName, + namespaces: checkedNamespacesKeys + } + console.log(workspaceData); + onCloseModal(); + toast.success("Workspace Succesesfully Created "); + } catch{ + toast.error("Couldn't Creat The Worksapce"); + } } const onClose = () => { onCloseModal(); - setWorkspaceData({} as WorkspaceData); + setWorkspaceName(""); + setCheckedNamespacesKeys([]); + setNamespaces([]); } return (<>

DETAILS

-

TAP SETTINGS

@@ -109,12 +95,12 @@ const AddWorkspaceModal: FC = ({isOpen,onCloseModal, work setSearchValue(event.target.value)}/> - diff --git a/ui/src/components/SettingsModal/SettingModal.tsx b/ui/src/components/SettingsModal/SettingModal.tsx index e795f6946..5641fb712 100644 --- a/ui/src/components/SettingsModal/SettingModal.tsx +++ b/ui/src/components/SettingsModal/SettingModal.tsx @@ -87,7 +87,7 @@ export const SettingsModal: React.FC = ({isOpen, onClose, is
setSearchValue(event.target.value)}/>
- + } diff --git a/ui/src/components/UI/SelectList.tsx b/ui/src/components/UI/SelectList.tsx index e24ce3a82..53b992761 100644 --- a/ui/src/components/UI/SelectList.tsx +++ b/ui/src/components/UI/SelectList.tsx @@ -1,72 +1,54 @@ -import { useEffect, useMemo, useState } from "react"; +import { useEffect, useMemo } from "react"; import Checkbox from "./Checkbox" import Radio from "./Radio"; import './style/SelectList.sass'; +export type ValuesListInput = { + key: string; + value: string; +}[] export interface Props { - valuesListInput; + items; tableName:string; checkedValues?:string[]; multiSelect:boolean; searchValue?:string; - setValues: (newValues)=> void; + setCheckedValues: (newValues)=> void; tabelClassName } -export type ValuesListInput = { - key: string; - value: string; - isChecked: boolean; -}[] - -const SelectList: React.FC = ({valuesListInput ,tableName,checkedValues=[],multiSelect=true,searchValue="",setValues,tabelClassName}) => { - const [valuesList, setValuesList] = useState(valuesListInput as ValuesListInput); +const SelectList: React.FC = ({items ,tableName,checkedValues=[],multiSelect=true,searchValue="",setCheckedValues,tabelClassName}) => { const filteredValues = useMemo(() => { - return valuesList.filter((listValue) => listValue?.value?.includes(searchValue)); - },[valuesList, searchValue]) + return items.filter((listValue) => listValue?.value?.includes(searchValue)); + },[items, searchValue,checkedValues]) - useEffect(() => { - const list = valuesList.map(obj => { - const isValueChecked = checkedValues.some(checkedValueKey => obj.key === checkedValueKey) - return {...obj, isChecked: isValueChecked} - }) - setValuesList(list); - },[valuesListInput,checkedValues]); - - const toggleValues = (checkedKey) => { + const toggleValue = (checkedKey) => { if (!multiSelect){ - unToggleAll(checkedKey); - } - else { - const newValues: ValuesListInput = [...valuesList]; - newValues.map(item => item.key === checkedKey ? item.isChecked = !item.isChecked : item.isChecked); - setValuesList(newValues); - setValues(newValues); + unToggleAll(); } + let index = checkedValues.indexOf(checkedKey); + if(index > -1) checkedValues.splice(index,1); + else checkedValues.push(checkedKey); + setCheckedValues(checkedValues); + console.log(checkedValues); } - const unToggleAll = (checkedKey) => { - const list = valuesList.map((obj) => { - return {...obj, isChecked:checkedKey === obj.key} - }) - setValuesList(list); - setValues(list); + const unToggleAll = () => { + checkedValues = []; + setCheckedValues([]); } - const toggleAll = () => { - const isChecked = valuesList.every(valueTap => valueTap.isChecked === true); - const list = valuesList.map((obj) => { - return {...obj, isChecked: !isChecked} + if(checkedValues.length > 0) checkedValues = []; + else filteredValues.forEach((obj) => { + checkedValues.push(obj.key); }) - setValuesList(list); - setValues(list); + setCheckedValues(checkedValues); } - const tableHead = multiSelect ? - valueTap.isChecked === true)} + {tableName} : @@ -74,8 +56,6 @@ const SelectList: React.FC = ({valuesListInput ,tableName,checkedValues=[ {tableName} - - return
@@ -85,8 +65,8 @@ const SelectList: React.FC = ({valuesListInput ,tableName,checkedValues=[ {filteredValues?.map(listValue => { return diff --git a/ui/src/components/UserSettings/UserSettings.tsx b/ui/src/components/UserSettings/UserSettings.tsx index ab591be60..09297c0eb 100644 --- a/ui/src/components/UserSettings/UserSettings.tsx +++ b/ui/src/components/UserSettings/UserSettings.tsx @@ -4,15 +4,6 @@ import {ColsType, FilterableTableAction} from "../UI/FilterableTableAction" import { useEffect, useState } from "react"; import { UserData,AddUserModal } from "../Modals/AddUserModal/AddUserModal"; import Api from '../../helpers/api'; - -import {Snackbar} from "@material-ui/core"; -import MuiAlert from "@material-ui/lab/Alert"; -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"; -import { apiDefineProperty } from "mobx/dist/internal"; import { toast } from "react-toastify"; import ConfirmationModal from "../UI/Modals/ConfirmationModal"; diff --git a/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx b/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx index a23cadc31..4bad1e4de 100644 --- a/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx +++ b/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx @@ -13,12 +13,12 @@ interface Props {} export const WorkspaceSettings : React.FC = ({}) => { const [workspacesRows, setWorkspacesRows] = useState([]); + const cols : ColsType[] = [{field : "id",header:"Id"},{field : "name",header:"Name"}]; + const [workspaceData,SetWorkspaceData] = useState({} as WorkspaceData); const [isOpenModal,setIsOpen] = useState(false); const [isEditMode,setIsEditMode] = useState(false); - const [isOpenDeleteModal, setIsOpenDeleteModal] = useState(false); - - const cols : ColsType[] = [{field : "id",header:"Id"},{field : "name",header:"Name"}]; + const [isOpenDeleteModal, setIsOpenDeleteModal] = useState(false); const buttonConfig = {onClick: () => {setIsOpen(true); setIsEditMode(false);SetWorkspaceData({} as WorkspaceData)}, text:"Add Workspace"} @@ -34,28 +34,39 @@ export const WorkspaceSettings : React.FC = ({}) => { },[]) const filterFuncFactory = (searchQuery: string) => { - return (row) => row.name.toLowerCase().includes(searchQuery.toLowerCase()) + return (row) => { + return row.name.toLowerCase().includes(searchQuery.toLowerCase()); } - - const searchConfig = { searchPlaceholder: "Search Workspace",filterRows: filterFuncFactory} - - const onRowDelete = (row) => { - setIsOpenDeleteModal(true); - const findFunc = filterFuncFactory(row.id) - const newWorkspaceList = workspacesRows.find(findFunc) - setWorkspacesRows(newWorkspaceList); - (async() => { - try { - //await api.deleteUser(user) - const usersLeft = workspacesRows.filter(e => !findFunc(e)) - setWorkspacesRows(usersLeft) - toast.success("Workspace Succesesfully Deleted") - } catch (error) { - toast.error("Unable To Delete") - } - })() } + const searchConfig = { searchPlaceholder: "Search Workspace",filterRows: filterFuncFactory}; + + const findWorkspace = (workspaceId) => { + const findFunc = filterFuncFactory(workspaceId); + return workspacesRows.find(findFunc); + } + + const onRowDelete = (workspace) => { + setIsOpenDeleteModal(true); + const workspaceForDel = findWorkspace(workspace.id); + SetWorkspaceData(workspaceForDel); + } + + const onDeleteConfirmation = () => { + (async() => { + try{ + const findFunc = filterFuncFactory(workspaceData.id); + const workspaceLeft = workspacesRows.filter(ws => !findFunc(ws)); + setWorkspacesRows(workspaceLeft); + setIsOpenDeleteModal(false); + toast.success("Workspace Succesesfully Deleted "); + } catch { + toast.error("Workspace hasn't deleted"); + } + })(); + } + + const onRowEdit = (row) => { setIsOpen(true); setIsEditMode(true); @@ -67,13 +78,13 @@ export const WorkspaceSettings : React.FC = ({}) => { - { setIsOpen(false);} } > + { setIsOpen(false);} } > - + setIsOpenDeleteModal(false)} + onConfirm={onDeleteConfirmation} confirmButtonText="Delete Workspace" title="Delete Workspace" + confirmButtonColor="#DB2156"> +

Are you sure you want to delete this workspace?

+ ); }
- {multiSelect && item.key === listValue.key)?.isChecked} onToggle={() => toggleValues(listValue.key)}/>} - {!multiSelect && item.key === listValue.key)?.isChecked} onToggle={() => toggleValues(listValue.key)}/>} + {multiSelect && toggleValue(listValue.key)}/>} + {!multiSelect && toggleValue(listValue.key)}/>} {listValue.value}