feat(fe): improved reset isolations/hidden button
This commit is contained in:
@@ -124,7 +124,9 @@
|
||||
:class="showFollowerMessage ? 'top-24' : 'top-14'"
|
||||
>
|
||||
<ViewerGlobalFilterReset v-if="hasAnyFiltersApplied" />
|
||||
<ViewerGlobalIsolationReset v-else-if="hasAnyIsolationsApplied" />
|
||||
<ViewerGlobalIsolationHiddenReset
|
||||
v-else-if="hasAnyIsolationsApplied || hasAnyHiddenApplied"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -163,7 +165,8 @@ const { users } = useViewerUserActivityTracking({ anchoredPointsParentEl: parent
|
||||
const { isOpenThread, open, closeAllThreads } = useThreadUtilities()
|
||||
const {
|
||||
filters: { hasAnyFiltersApplied },
|
||||
hasAnyIsolationsApplied
|
||||
hasAnyIsolationsApplied,
|
||||
hasAnyHiddenApplied
|
||||
} = useFilterUtilities({ state: viewerState })
|
||||
const canPostComment = useCheckViewerCommentingAccess()
|
||||
const breakpoints = useBreakpoints(TailwindBreakpoints)
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<FormButton
|
||||
size="sm"
|
||||
color="outline"
|
||||
class="pointer-events-auto"
|
||||
@click="trackAndReset"
|
||||
>
|
||||
{{ buttonText }}
|
||||
</FormButton>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { useMixpanel } from '~~/lib/core/composables/mp'
|
||||
import { useFilterUtilities } from '~/lib/viewer/composables/filtering/filtering'
|
||||
import { useInjectedViewerState } from '~/lib/viewer/composables/setup'
|
||||
|
||||
const viewerState = useInjectedViewerState()
|
||||
const { resetHiddenAndIsolations, hasAnyIsolationsApplied, hasAnyHiddenApplied } =
|
||||
useFilterUtilities({ state: viewerState })
|
||||
|
||||
const buttonText = computed(() => {
|
||||
const hasIsolations = hasAnyIsolationsApplied.value
|
||||
const hasHidden = hasAnyHiddenApplied.value
|
||||
|
||||
if (hasIsolations && hasHidden) {
|
||||
return 'Reset isolations/hidden'
|
||||
} else if (hasIsolations) {
|
||||
return 'Reset isolations'
|
||||
} else if (hasHidden) {
|
||||
return 'Reset hidden'
|
||||
}
|
||||
return 'Reset'
|
||||
})
|
||||
|
||||
const mp = useMixpanel()
|
||||
const trackAndReset = () => {
|
||||
const hasIsolations = hasAnyIsolationsApplied.value
|
||||
const hasHidden = hasAnyHiddenApplied.value
|
||||
|
||||
resetHiddenAndIsolations()
|
||||
|
||||
if (hasIsolations && hasHidden) {
|
||||
mp.track('Viewer Action', {
|
||||
type: 'action',
|
||||
name: 'isolations-hidden',
|
||||
action: 'reset'
|
||||
})
|
||||
} else if (hasIsolations) {
|
||||
mp.track('Viewer Action', { type: 'action', name: 'isolations', action: 'reset' })
|
||||
} else if (hasHidden) {
|
||||
mp.track('Viewer Action', { type: 'action', name: 'hidden', action: 'reset' })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,22 +0,0 @@
|
||||
<template>
|
||||
<FormButton
|
||||
size="sm"
|
||||
color="outline"
|
||||
class="pointer-events-auto"
|
||||
@click="trackAndResetIsolations"
|
||||
>
|
||||
Reset isolations
|
||||
</FormButton>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { useMixpanel } from '~~/lib/core/composables/mp'
|
||||
import { useFilterUtilities } from '~/lib/viewer/composables/filtering/filtering'
|
||||
|
||||
const { resetIsolations } = useFilterUtilities()
|
||||
|
||||
const mp = useMixpanel()
|
||||
const trackAndResetIsolations = () => {
|
||||
resetIsolations()
|
||||
mp.track('Viewer Action', { type: 'action', name: 'isolations', action: 'reset' })
|
||||
}
|
||||
</script>
|
||||
@@ -86,6 +86,13 @@ export function useFilterUtilities(
|
||||
filters.isolatedObjectIds.value = []
|
||||
}
|
||||
|
||||
const resetHiddenAndIsolations = () => {
|
||||
clearHighlightedObjects()
|
||||
clearSelection()
|
||||
filters.isolatedObjectIds.value = []
|
||||
filters.hiddenObjectIds.value = []
|
||||
}
|
||||
|
||||
const hasAnyIsolationsApplied = computed(() => {
|
||||
return filters.isolatedObjectIds.value.length > 0
|
||||
})
|
||||
@@ -111,6 +118,16 @@ export function useFilterUtilities(
|
||||
filters.hiddenObjectIds.value = difference(filters.hiddenObjectIds.value, objectIds)
|
||||
}
|
||||
|
||||
const resetHidden = () => {
|
||||
clearHighlightedObjects()
|
||||
clearSelection()
|
||||
filters.hiddenObjectIds.value = []
|
||||
}
|
||||
|
||||
const hasAnyHiddenApplied = computed(() => {
|
||||
return filters.hiddenObjectIds.value.length > 0
|
||||
})
|
||||
|
||||
/**
|
||||
* Gets ALL values for a property using pre-computed data (used for filtering logic)
|
||||
*/
|
||||
@@ -928,9 +945,12 @@ export function useFilterUtilities(
|
||||
isolateObjects,
|
||||
unIsolateObjects,
|
||||
resetIsolations,
|
||||
resetHiddenAndIsolations,
|
||||
hideObjects,
|
||||
showObjects,
|
||||
resetHidden,
|
||||
hasAnyIsolationsApplied,
|
||||
hasAnyHiddenApplied,
|
||||
filters,
|
||||
addActiveFilter,
|
||||
updateFilterProperty,
|
||||
|
||||
Reference in New Issue
Block a user