Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bulk edit option #1335

Merged
merged 3 commits into from
Nov 26, 2024
Merged

Bulk edit option #1335

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2d938a8
add bulk edit button
matthias-luger Nov 18, 2024
a6b811a
change icon
matthias-luger Nov 20, 2024
0e74461
finish bulk edit options
matthias-luger Nov 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 71 additions & 16 deletions components/Flipper/FlipRestrictionList/FlipRestrictionList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,20 +18,22 @@ import FlipRestrictionListEntry from './RestrictionListEntry/FlipRestrictionList
import { Item, Menu, useContextMenu } from 'react-contexify'
import BlockIcon from '@mui/icons-material/Block'
import CheckIcon from '@mui/icons-material/CheckCircle'
import ListIcon from '@mui/icons-material/ListAlt'
import { Check } from '@mui/icons-material'

interface Props {
onRestrictionsChange(restrictions: FlipRestriction[], type: 'whitelist' | 'blacklist'): void
prefillRestriction?: RestrictionCreateState
}

const RESTRICTION_CONTEXT_MENU_ID = 'restriction-entry-context-menu'
const RESTRICTION_CONTEXT_CURRENT_SHOING_MENU_ID = 'restriction-entry-context-menu-current-showing'

function FlipRestrictionList(props: Props) {
let [isAddNewFlipperExtended, setIsNewFlipperExtended] = useState(props.prefillRestriction !== undefined)
let [restrictions, setRestrictions] = useState<FlipRestriction[]>(getInitialFlipRestrictions())
let [restrictions, setRestrictions] = useState<FlipRestriction[]>(() => getInitialFlipRestrictions())
let [restrictionInEditMode, setRestrictionsInEditMode] = useState<FlipRestriction[]>([])
let [showDeleteRestrictionsDialog, setShowDeleteRestrictionsDialog] = useState(false)
let [isRefreshingItemNames, setIsRefreshingItemNames] = useState(false)
let [searchText, setSearchText] = useState('')
let [sortByName, setSortByName] = useState(false)
let [isSSR, setIsSSR] = useState(true)
Expand All @@ -41,6 +43,9 @@ function FlipRestrictionList(props: Props) {
const { show } = useContextMenu({
id: RESTRICTION_CONTEXT_MENU_ID
})
const { show: showEditShowingRestrictionsMenu } = useContextMenu({
id: RESTRICTION_CONTEXT_CURRENT_SHOING_MENU_ID
})

useEffect(() => {
function onControlF(event: KeyboardEvent) {
Expand All @@ -67,6 +72,7 @@ function FlipRestrictionList(props: Props) {
}
restriction.itemKey = generateUUID()
})
console.log(restrictions)
return restrictions
}

Expand Down Expand Up @@ -155,8 +161,7 @@ function FlipRestrictionList(props: Props) {
newRestrictions[index].tags = updateState.tags
newRestrictions[index].isEdited = false
newRestrictions[index].type = restriction.type
if (updateState.selectedItem)
newRestrictions[index].item = updateState.selectedItem
if (updateState.selectedItem) newRestrictions[index].item = updateState.selectedItem
})

setSetting(RESTRICTIONS_SETTINGS_KEY, JSON.stringify(getCleanRestrictionsForApi(newRestrictions)))
Expand Down Expand Up @@ -265,7 +270,6 @@ function FlipRestrictionList(props: Props) {

function refreshItemNames() {
let newRestrictions = [...restrictions]
setIsRefreshingItemNames(true)
let items: Item[] = []
newRestrictions.forEach(restriction => {
if (restriction.item && restriction.item.tag) {
Expand All @@ -280,7 +284,6 @@ function FlipRestrictionList(props: Props) {
}
})
toast.success('Reloaded all item names')
setIsRefreshingItemNames(false)
setRestrictions(newRestrictions)
setSetting(RESTRICTIONS_SETTINGS_KEY, JSON.stringify(getCleanRestrictionsForApi(newRestrictions)))
if (props.onRestrictionsChange) {
Expand All @@ -294,7 +297,7 @@ function FlipRestrictionList(props: Props) {
}

function recalculateListHeight() {
; (listRef.current as any).resetAfterRowIndex(0, false)
;(listRef.current as any).resetAfterRowIndex(0, false)
}

function handleContextMenuForRestriction(event) {
Expand Down Expand Up @@ -351,6 +354,23 @@ function FlipRestrictionList(props: Props) {
}
}

function changeRestrictionDisableStateForAllCurrentShowing(newValue: boolean) {
let newRestrictions = [...restrictions]
let shownRestrictions = getRestrictionsFilteredBySearch(restrictions)
newRestrictions.forEach(r => {
if (r.itemKey && shownRestrictions.find(sr => sr.itemKey === r.itemKey)) {
r.disabled = newValue
}
})
setRestrictions(newRestrictions)

setSetting(RESTRICTIONS_SETTINGS_KEY, JSON.stringify(getCleanRestrictionsForApi(newRestrictions)))
if (props.onRestrictionsChange) {
props.onRestrictionsChange(getCleanRestrictionsForApi(newRestrictions), 'blacklist')
props.onRestrictionsChange(getCleanRestrictionsForApi(newRestrictions), 'whitelist')
}
}

let clearListDialog = (
<Modal
show={showDeleteRestrictionsDialog}
Expand Down Expand Up @@ -415,6 +435,41 @@ function FlipRestrictionList(props: Props) {
</div>
)

let currentShowingItemOptionsContextMenuElement = (
<div>
<Menu id={RESTRICTION_CONTEXT_CURRENT_SHOING_MENU_ID} theme={'dark'}>
<Item
onClick={() => {
setShowDeleteRestrictionsDialog(true)
}}
>
<DeleteIcon color="error" style={{ marginRight: 5 }} />
Delete all current showing
</Item>
<Item
onClick={() => {
changeRestrictionDisableStateForAllCurrentShowing(true)
}}
>
<BlockIcon color="error" style={{ marginRight: 5 }} />
Disable all current showing
</Item>
<Item
onClick={() => {
changeRestrictionDisableStateForAllCurrentShowing(false)
}}
>
<Check color="success" style={{ marginRight: 5 }} />
Enable all current showing
</Item>
<Item onClick={refreshItemNames}>
<Refresh style={{ marginRight: 5 }} />
Refresh item names
</Item>
</Menu>
</div>
)

let windowWidth = isSSR ? 1920 : window.innerWidth
let singleColumn = windowWidth < 1024

Expand Down Expand Up @@ -480,17 +535,16 @@ function FlipRestrictionList(props: Props) {
{addIcon}
<span> Add new restriction</span>
</div>
<Button variant="info" style={{ marginRight: '10px' }} onClick={refreshItemNames} disabled={isRefreshingItemNames}>
<Refresh /> Refresh item names
</Button>
<Button
variant="danger"
onClick={() => {
setShowDeleteRestrictionsDialog(true)
<div
onClick={e => {
showEditShowingRestrictionsMenu({
event: e
})
}}
>
<DeleteIcon /> Delete restrictions
</Button>
<label style={{ cursor: 'pointer' }}>Act on all {getRestrictionsFilteredBySearch(restrictions)?.length || 0} elements</label>
<ListIcon id="currentShowingOptions" style={{ cursor: 'pointer', marginLeft: 5 }}></ListIcon>
</div>
</div>
)}
<hr />
Expand Down Expand Up @@ -602,6 +656,7 @@ function FlipRestrictionList(props: Props) {
</div>
{clearListDialog}
{currentItemContextMenuElement}
{currentShowingItemOptionsContextMenuElement}
</>
)
}
Expand Down
9 changes: 6 additions & 3 deletions utils/SettingsUtils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,8 @@ export function setSettingsFromServerSide(
newRestrictions.push({
type: type,
itemFilter: item.filter,
tags: item.tags
tags: item.tags,
disabled: item.disabled
})
} else if (itemName && item.tag) {
newRestrictions.push({
Expand All @@ -134,7 +135,8 @@ export function setSettingsFromServerSide(
iconUrl: api.getItemImageUrl(item)
},
itemFilter: item.filter,
tags: item.tags
tags: item.tags,
disabled: item.disabled
})
} else {
tagsToFindNamesFor.add(item.tag)
Expand All @@ -146,7 +148,8 @@ export function setSettingsFromServerSide(
iconUrl: api.getItemImageUrl(item)
},
itemFilter: item.filter,
tags: item.tags
tags: item.tags,
disabled: item.disabled
})
}
})
Expand Down
Loading