From c697359c38b450d35f3ca76ea1bb47cd109fff90 Mon Sep 17 00:00:00 2001 From: Eugen Ciur Date: Sat, 24 Aug 2024 08:19:07 +0200 Subject: [PATCH] reset order - works! --- .../ThumbnailsToggle/ThumbnailsToggle.tsx | 106 ++++++++++++++++-- ui2/src/slices/dualPanel/dualPanel.ts | 60 +++++++++- ui2/src/slices/dualPanel/helpers.ts | 41 ++++++- ui2/src/slices/dualPanel/types.ts | 4 +- 4 files changed, 194 insertions(+), 17 deletions(-) diff --git a/ui2/src/components/Viewer/ThumbnailsToggle/ThumbnailsToggle.tsx b/ui2/src/components/Viewer/ThumbnailsToggle/ThumbnailsToggle.tsx index ab82f13cf..c8e3e1f4e 100644 --- a/ui2/src/components/Viewer/ThumbnailsToggle/ThumbnailsToggle.tsx +++ b/ui2/src/components/Viewer/ThumbnailsToggle/ThumbnailsToggle.tsx @@ -1,6 +1,7 @@ -import {useContext} from "react" +import {useContext, useState} from "react" import {useDispatch, useSelector} from "react-redux" import {UnstyledButton, Flex} from "@mantine/core" +import {Popover, Stack, Group, Button, Tooltip} from "@mantine/core" import { IconLayoutSidebarRightExpand, IconLayoutSidebarRightCollapse @@ -8,38 +9,125 @@ import { import classes from "./ThumbnailsToggle.module.css" import { toggleThumbnailsPanel, - selectThumbnailsPanelOpen + selectThumbnailsPanelOpen, + selectPagesHaveChanged, + resetPageChanges } from "@/slices/dualPanel/dualPanel" import PanelContext from "@/contexts/PanelContext" import {PanelMode} from "@/types" import {RootState} from "@/app/types" export default function ThumbnailsToggle() { + const [dontBotherMe, setDontBotherMe] = useState(false) const dispatch = useDispatch() const mode: PanelMode = useContext(PanelContext) const isOpen = useSelector((state: RootState) => selectThumbnailsPanelOpen(state, mode) ) + const pagesHaveChanged = useSelector((state: RootState) => + selectPagesHaveChanged(state, mode) + ) const onClick = () => { dispatch(toggleThumbnailsPanel(mode)) } - if (isOpen) { + const onSave = () => { + // dispatch((state: RootState) => savePageChanges(state, mode)) + } + + const onReset = () => { + dispatch(resetPageChanges(mode)) + } + + const onClosePopover = () => { + setDontBotherMe(true) + } + + const toggleElement = ( + onClick()}> + {isOpen ? ( + + ) : ( + + )} + + ) + + if (pagesHaveChanged && !dontBotherMe) { return ( - onClick()}> - - + {}} + position="right" + withArrow + shadow="md" + > + {toggleElement} + + + + ) } return ( - onClick()}> - - + {toggleElement} ) } + +type Args = { + onSave: () => void + onReset: () => void + onClose: () => void +} + +function PopoverBody({onSave, onReset, onClose}: Args) { + return ( + + Changes are not yet saved on the server + + + + + + + + + + + + + ) +} diff --git a/ui2/src/slices/dualPanel/dualPanel.ts b/ui2/src/slices/dualPanel/dualPanel.ts index d825e8538..042edffa8 100644 --- a/ui2/src/slices/dualPanel/dualPanel.ts +++ b/ui2/src/slices/dualPanel/dualPanel.ts @@ -24,7 +24,9 @@ import { setCurrentNodeHelper, nodeAddedHelper, nodeUpdatedHelper, - dropThumbnailPageHelper + dropThumbnailPageHelper, + resetPageChangesHelper, + getLatestVersionPages } from "./helpers" import type { @@ -222,6 +224,10 @@ const dualPanelSlice = createSlice({ name: "dualPanel", initialState, reducers: { + resetPageChanges: (state, action: PayloadAction) => { + const mode = action.payload + resetPageChangesHelper(state, mode) + }, selectionAddPage: (state, action: PayloadAction) => { const pageId = action.payload.selectionId const mode = action.payload.mode @@ -527,7 +533,8 @@ const dualPanelSlice = createSlice({ currentPage: action.meta.arg.page || 1, thumbnailsPanelOpen: mainThumbnailsPanelInitialState(), zoomFactor: 100, - selectedIds: [] + selectedIds: [], + initialPages: getLatestVersionPages(action.payload.versions) } return } @@ -544,7 +551,8 @@ const dualPanelSlice = createSlice({ currentPage: action.meta.arg.page || 1, thumbnailsPanelOpen: secondaryThumbnailsPanelInitialState(), zoomFactor: 100, - selectedIds: [] + selectedIds: [], + initialPages: getLatestVersionPages(action.payload.versions) } } return @@ -593,7 +601,8 @@ export const { storeInboxNode, nodeAdded, setCurrentPage, - dropThumbnailPage + dropThumbnailPage, + resetPageChanges } = dualPanelSlice.actions export default dualPanelSlice.reducer @@ -821,6 +830,17 @@ export const selectSelectedPageIds = (state: RootState, mode: PanelMode) => { return state.dualPanel.secondaryPanel?.viewer?.selectedIds } +export const selectInitialPages = ( + state: RootState, + mode: PanelMode +): Array | undefined => { + if (mode == "main") { + return state.dualPanel.mainPanel.viewer?.initialPages + } + + return state.dualPanel.secondaryPanel?.viewer?.initialPages +} + export const selectPagesRaw = ( state: RootState, mode: PanelMode @@ -871,6 +891,38 @@ export const selectSelectedPages = createSelector( } ) +export const selectPagesHaveChanged = createSelector( + [selectInitialPages, selectPagesRaw], + ( + initialPages: Array | undefined, + currentPages: Array | undefined + ): boolean => { + if (!initialPages) { + return false + } + + if (!currentPages) { + return false + } + + if (initialPages?.length != currentPages?.length) { + return true + } + + for (let i = 0; i < (initialPages?.length || 0); i++) { + if (initialPages[i].id != currentPages[i].id) { + return true + } + + if (initialPages[i].number != currentPages[i].number) { + return true + } + } + + return false + } +) + export const selectSelectedNodes = createSelector( [selectSelectedNodeIds, selectNodesRaw], ( diff --git a/ui2/src/slices/dualPanel/helpers.ts b/ui2/src/slices/dualPanel/helpers.ts index b64cd258a..f26f1955c 100644 --- a/ui2/src/slices/dualPanel/helpers.ts +++ b/ui2/src/slices/dualPanel/helpers.ts @@ -3,7 +3,8 @@ import type { NodeType, PanelMode, PageType, - DroppedThumbnailPosition + DroppedThumbnailPosition, + DocumentVersion } from "@/types" import {DualPanelState, NodeWithSpinner, Commander} from "./types" import {INITIAL_PAGE_SIZE} from "@/cconstants" @@ -179,7 +180,8 @@ export function setCurrentNodeHelper({ currentPage: 1, thumbnailsPanelOpen: false, zoomFactor: 100, - selectedIds: [] + selectedIds: [], + initialPages: [] } } } @@ -220,7 +222,8 @@ export function setCurrentNodeHelper({ currentPage: 1, thumbnailsPanelOpen: false, zoomFactor: 100, - selectedIds: [] + selectedIds: [], + initialPages: [] }, searchResults: null } @@ -371,6 +374,28 @@ export function dropThumbnailPageHelper({ } } +export function resetPageChangesHelper(state: DualPanelState, mode: PanelMode) { + let curVer + + if (mode == "main") { + if (state.mainPanel.viewer) { + curVer = state.mainPanel.viewer?.currentVersion + if (curVer && curVer > 1) { + state.mainPanel.viewer.versions[curVer - 1].pages = + state.mainPanel.viewer.initialPages + } + } + } else { + if (state.secondaryPanel && state.secondaryPanel.viewer) { + curVer = state.secondaryPanel.viewer.currentVersion + if (curVer && curVer > 1) { + state.secondaryPanel.viewer.versions[curVer - 1].pages = + state.secondaryPanel.viewer.initialPages + } + } + } +} + function _removePanelNodes( state: DualPanelState, idsToRemove: string[], @@ -409,3 +434,13 @@ function _removeNodes( } return state.nodes } + +export function getLatestVersionPages(vers: DocumentVersion[]): PageType[] { + const lastVer = vers.reduce((maxVer, v) => { + if (maxVer.number > v.number) { + return maxVer + } + return v + }, vers[0]) + return lastVer.pages +} diff --git a/ui2/src/slices/dualPanel/types.ts b/ui2/src/slices/dualPanel/types.ts index 12b62ba74..8fdf180dc 100644 --- a/ui2/src/slices/dualPanel/types.ts +++ b/ui2/src/slices/dualPanel/types.ts @@ -7,7 +7,8 @@ import type { CurrentNodeType, PaginationType, BreadcrumbItemType, - DocumentVersion + DocumentVersion, + PageType } from "@/types" export type NodeWithSpinner = { @@ -61,6 +62,7 @@ export interface Viewer { zoomFactor: number // selected page IDs selectedIds: Array + initialPages: Array } export interface SearchResults {