github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-09-26 13:04:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

selectList supports array of objects instead of object

Browse Source
This commit is contained in:
Amit Fainholts
2022-01-27 11:40:38 +02:00
parent b73bb69491
commit 5aa16eaf56
2 changed files with 31 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
ui/src/components/Modals/AddUserModal/AddUserModal.tsx
View File

@@ -39,7 +39,7 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
useEffect(() => { useEffect(() => {
(async () => { (async () => {
try { try {
const workspacesList = {"default":true} //await api.getWorkspaces() const workspacesList = [{"default":true}] //await api.getWorkspaces()
setWorkspaces(workspacesList) setWorkspaces(workspacesList)
} catch (e) { } catch (e) {
@@ -76,6 +76,7 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
const generateLink = () => { const generateLink = () => {
try { try {
api.genareteInviteLink(userDataModel) api.genareteInviteLink(userDataModel)
console.log(workspaces);
} catch (e) { } catch (e) {
console.error(e); console.error(e);
} }

48
ui/src/components/UI/SelectList.tsx
View File

@@ -12,49 +12,55 @@ export interface Props {
tabelClassName tabelClassName
} }
const SelectList: React.FC<Props> = ({valuesListInput,tableName,multiSelect=true,searchValue="",setValues,tabelClassName}) => { export type ValuesListInput = {
const [valuesList, setValuesList] = useState(valuesListInput); key: string;
value: string;
isChecked: boolean;
}[]
const toggleValues = (value) => { const SelectList: React.FC<Props> = ({valuesListInput ,tableName,multiSelect=true,searchValue="",setValues,tabelClassName}) => {
const [valuesList, setValuesList] = useState(valuesListInput as ValuesListInput);
const toggleValues = (checkedKey) => {
if (!multiSelect){ if (!multiSelect){
unToggleAll(value); unToggleAll(checkedKey);
} }
else { else {
const newValues = {...valuesList}; const newValues: ValuesListInput = [...valuesList];
newValues[value] = !valuesList[value]; newValues[checkedKey].isChecked = !valuesList[checkedKey].isChecked;
setValuesList(newValues); setValuesList(newValues);
setValues(newValues); setValues(newValues);
} }
} }
const unToggleAll = (value) => { const unToggleAll = (checkedKey) => {
const newValues = {}; const newValues = [];
Object.keys(valuesList).forEach(key => { valuesList.forEach(valueList => {
if (key !== value) if (valueList.key !== checkedKey)
newValues[key] = false; newValues[checkedKey] = false;
else else
newValues[key] = true; newValues[checkedKey] = true;
}) })
setValuesList(newValues); setValuesList(newValues);
setValues(newValues); setValues(newValues);
} }
const toggleAll = () => { const toggleAll = () => {
const isChecked = Object.values(valuesList).every(tap => tap === true); const isChecked = valuesList.every(valueTap => valueTap.isChecked === true);
setAllCheckedValue(!isChecked); setAllCheckedValue(!isChecked);
} }
const setAllCheckedValue = (isTap: boolean) => { const setAllCheckedValue = (isTap: boolean) => {
const newValues = {}; const newValues = [];
Object.keys(valuesList).forEach(key => { valuesList.forEach(valueList => {
newValues[key] = isTap; newValues[valueList.key] = isTap;
}) })
setValuesList(newValues); setValuesList(newValues);
setValues(newValues); setValues(newValues);
} }
const tableHead = multiSelect ? <tr style={{borderBottomWidth: "2px"}}> const tableHead = multiSelect ? <tr style={{borderBottomWidth: "2px"}}>
<th style={{width: 50}}><Checkbox checked={Object.values(valuesList).every(tap => tap === true)} <th style={{width: 50}}><Checkbox checked={valuesList.every(valueTap => valueTap.isChecked === false)}
onToggle={toggleAll}/></th> onToggle={toggleAll}/></th>
<th>{tableName}</th> <th>{tableName}</th>
</tr> : </tr> :
@@ -63,7 +69,7 @@ const SelectList: React.FC<Props> = ({valuesListInput,tableName,multiSelect=true
</tr> </tr>
const filteredValues = useMemo(() => { const filteredValues = useMemo(() => {
return Object.keys(valuesList).filter((listValue) => listValue.includes(searchValue)); return valuesList.filter((listValue) => listValue.value.includes(searchValue));
},[valuesList, searchValue]) },[valuesList, searchValue])
return <div className={tabelClassName + " select-list-table"}> return <div className={tabelClassName + " select-list-table"}>
@@ -73,10 +79,10 @@ const SelectList: React.FC<Props> = ({valuesListInput,tableName,multiSelect=true
</thead> </thead>
<tbody> <tbody>
{filteredValues?.map(listValue => { {filteredValues?.map(listValue => {
return <tr key={listValue}> return <tr key={listValue.key}>
<td style={{width: 50}}> <td style={{width: 50}}>
{multiSelect && <Checkbox checked={valuesList[listValue]} onToggle={() => toggleValues(listValue)}/>} {multiSelect && <Checkbox checked={valuesList[listValue.key].isChecked} onToggle={() => toggleValues(listValue.key)}/>}
{!multiSelect && <Radio checked={valuesList[listValue]} onToggle={() => toggleValues(listValue)}/>} {!multiSelect && <Radio checked={valuesList[listValue.key].isChecked} onToggle={() => toggleValues(listValue.key)}/>}
</td> </td>
<td>{listValue}</td> <td>{listValue}</td>
</tr> </tr>