Skip to content

Commit

Permalink
Site registry icon bulk update on table working
Browse files Browse the repository at this point in the history
  • Loading branch information
acoard-aot committed Oct 10, 2023
1 parent 4d918e9 commit 45d4662
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 12 deletions.
19 changes: 14 additions & 5 deletions frontend/site-search-frontend/src/components/SiteRegistryIcon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,32 @@ import { useState } from 'react';
import { Button } from 'react-bootstrap';
import { Eye, EyeSlash } from 'react-bootstrap-icons';

export default function SiteRegistryIcon({siteRegistry}: {siteRegistry: boolean}) {
export default function SiteRegistryIcon({ siteRegistry }: { siteRegistry: boolean }) {
if (siteRegistry) {
return (
<Eye size='20' className='text-body' />
<Eye size='20' className='text-body' data-sr={siteRegistry} />
)
}
else {
return (
<EyeSlash size='20' className='text-body' />
<EyeSlash size='20' className='text-body' data-sr={siteRegistry} />
)
}
}

export function SiteRegistryIconButton({siteRegistry}: {siteRegistry: boolean}) {
export function SiteRegistryIconButton({ siteRegistry }: { siteRegistry: boolean }) {
const [dummySRState, setDummySRState] = useState<boolean>(siteRegistry)

return (
<Button variant='link' onClick={() => setDummySRState(!dummySRState)}><SiteRegistryIcon siteRegistry={dummySRState} /></Button>
<>
<Button variant='link' onClick={() => setDummySRState(!dummySRState)}>
{/* For some reason need to do this ternary in here, couldn't just include <SiteRegistryIcon /> or wouldn't update on state changes
eg Make Selected Visible To Public */}
{siteRegistry ?
<Eye size='20' className='text-body' data-sr={siteRegistry} />
: <EyeSlash size='20' className='text-body' data-sr={siteRegistry} />
}
</Button>
</>
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,21 @@ interface SiteDetailsTableProps {
export default function SiteDetailsTable({ onClickAdd, headers, data, label }: SiteDetailsTableProps) {
const editMode = useSelector((state: RootState) => state.edit.editMode);
const [checked, setChecked] = useState<{ [key: string]: boolean }>(initializeCheckedObject(false));
const [SRCheck, setSRChecks] = useState(copySiteRegistryToState());


/**
* Clones a prop to a state so we can modify it. Only works in prototype.
* In final result, would need to properly update state.
* See also onChangeSiteRegistry.
* @returns
*/
function copySiteRegistryToState() {
// get all data siteRegistry map values
return data.map(row => {
return row.siteRegistry
})
}

// checked = {
// 1: true,
Expand All @@ -36,13 +51,13 @@ export default function SiteDetailsTable({ onClickAdd, headers, data, label }: S
// }

function handleCheck({ index, event }) {
console.log('handleCheck', {index, event, checked})
console.log('handleCheck', { index, event, checked })
const newCheck = { ...checked }
newCheck[index] = event.target.checked
setChecked(newCheck)
}

function checkAll(value: boolean) {
function checkAll(value: boolean) {
const newChecked = initializeCheckedObject(value);
setChecked(newChecked)
}
Expand All @@ -57,11 +72,25 @@ export default function SiteDetailsTable({ onClickAdd, headers, data, label }: S
return newChecked;
}

function setVisibleOnSiteRegistry(){
alert('todo');
function onChangeSiteRegistry() {
// alert('todo');
// const idsToSetTrue = getSelection();
// console.log({idsToSetTrue, checked, SRCheck })
console.log({ checked, SRCheck })

// what are we updating here, site? no, only the props passed in? but can't update props...
// idea: clone the props, set that as state, show that state, and modify that stae.
// e.g. <SiteRegistryIconButton siteRegistry={row.siteRegistry} should be
// <SiteRegistryIconButton siteRegistry={siteRegisty[someIndex]}
// could even be same data structure as checked, just a series of bools

// goal - make checked write to SR check
const checkedAsArray = [...Object.keys(checked).map(key => checked[key])];
setSRChecks(checkedAsArray)

}

function getSelection(): string[]{
function getSelection(): string[] {
return Object.keys(checked).filter(key => checked[key] === true);
}

Expand All @@ -72,7 +101,7 @@ export default function SiteDetailsTable({ onClickAdd, headers, data, label }: S
{editMode && <div className="my-4 d-flex justify-content between">
<div className="d-inline-flex w-100">
<Button variant='secondary' onClick={() => { onClickAdd() }}>+ Add</Button>
<Button disabled={getSelection().length === 0} variant='secondary' onClick={setVisibleOnSiteRegistry} className='ms-3'>Make Selected Visible to Public</Button>
<Button disabled={getSelection().length === 0} variant='secondary' onClick={onChangeSiteRegistry} className='ms-3'>Make Selected Visible to Public</Button>
<Button disabled={getSelection().length === 0} variant='secondary' className='ms-auto'>Remove Selected</Button>
</div>
</div>}
Expand All @@ -95,7 +124,7 @@ export default function SiteDetailsTable({ onClickAdd, headers, data, label }: S
<Form.Check aria-label="Select this {label}" checked={checked[index]} onChange={(event) => handleCheck({ index, event })} />
</td>}
{headers?.map((header, index) => <td key={index}><TableEditItem value={row[header.accessor]} /></td>)}
{editMode && <td> <SiteRegistryIconButton siteRegistry={row.siteRegistry} /></td>}
{editMode && <td> <SiteRegistryIconButton siteRegistry={SRCheck[index]} /></td>}
</tr>
)
})}
Expand Down

0 comments on commit 45d4662

Please sign in to comment.