From e4f9acabe64f24bec1021da22f492059cb97b8a5 Mon Sep 17 00:00:00 2001 From: alex Date: Sat, 2 Sep 2023 22:42:10 +0200 Subject: [PATCH] update total pages pagination on new group task creation --- src/Contexts/GroupTasksContext.js | 15 +++ src/Handlers/WebSocketMessageHandler.js | 21 +++- .../Overview/GroupTasksViewModal.js | 103 +++++++++--------- src/Pages/GroupTasks/Overview/index.js | 35 +++--- src/utils.js | 2 + 5 files changed, 107 insertions(+), 69 deletions(-) diff --git a/src/Contexts/GroupTasksContext.js b/src/Contexts/GroupTasksContext.js index d57cbf1..afeefce 100644 --- a/src/Contexts/GroupTasksContext.js +++ b/src/Contexts/GroupTasksContext.js @@ -5,6 +5,10 @@ const preview = { groupTasks: [], groupTasksSteps: [], startGroupTasksOpenModalRememberIdRef: null, + paginationPage: 1, + totalPages: 0, + previousParamCategory: null, + paginationPageRef: null, }; const GroupTasksContext = createContext(preview); @@ -19,6 +23,11 @@ export function GroupTasksProvider({ children }) { // will be set on viewing the steps of a group task const [groupTasksSteps, setGroupTasksSteps] = useState([]); const startGroupTasksOpenModalRememberIdRef = useRef(null); + // pagination + const [paginationPage, setPaginationPage] = useState(1); + const paginationPageRef = useRef(paginationPage); + const [totalPages, setTotalPages] = useState(0); + const previousParamCategory = useRef(null); return ( {children} diff --git a/src/Handlers/WebSocketMessageHandler.js b/src/Handlers/WebSocketMessageHandler.js index 5f33af1..5f23bac 100644 --- a/src/Handlers/WebSocketMessageHandler.js +++ b/src/Handlers/WebSocketMessageHandler.js @@ -98,14 +98,29 @@ export function handleWebSocketMessage( sideBarContext.setConnectedUsers(body); break; case ReceivedMessagesCommands.NewGroupTaskStarted: - groupTasksContext.setGroupTasks((arr) => [...arr, body]); + // add new group task to list and remove latest group task if list length will be greater than 5 + if (groupTasksContext.paginationPageRef.current === 1) { + groupTasksContext.setGroupTasks((arr) => { + const newArr = [...arr]; + + if (newArr.length === 5) { + newArr.pop(); + } + + newArr.unshift(body.GroupTask); + + return newArr; + }); + } + + groupTasksContext.setTotalPages(body.TotalPages); if ( - body.RememberId === + body.GroupTask.RememberId === groupTasksContext.startGroupTasksOpenModalRememberIdRef.current ) { navigate( - `${Constants.ROUTE_PATHS.GROUP_TASKS}${body.Category}/view/${body.Id}` + `${Constants.ROUTE_PATHS.GROUP_TASKS}${body.GroupTask.Category}/view/${body.GroupTask.Id}` ); } break; diff --git a/src/Pages/GroupTasks/Overview/GroupTasksViewModal.js b/src/Pages/GroupTasks/Overview/GroupTasksViewModal.js index 0651420..c529a63 100644 --- a/src/Pages/GroupTasks/Overview/GroupTasksViewModal.js +++ b/src/Pages/GroupTasks/Overview/GroupTasksViewModal.js @@ -552,6 +552,57 @@ export default function GroupTasksViewModal({ isOpen }) { return stepItems; }; + const GlobalInputs = () => { + if ( + currentGroupTask.current.GlobalInputs === null || + currentGroupTask.current.GlobalInputs === "[]" + ) + return <>; + + return ( + <> +

+ {t("groupTasks.groupTasksViewModal.popover.specifiedGlobalInputs")} +

+ + + {JSON.parse(currentGroupTask.current.GlobalInputs).map( + (globalInput) => { + return ( + + + { + groupTasksContext.categoryGroup.groups + .find( + (group) => + group.id === currentGroupTask.current.GroupId + ) + .globalInputs.find( + (gI) => gI.parameterName === globalInput.parameterName + ).displayName + } + :{" "} + + + {globalInput.value !== "" + ? globalInput.value + : Constants.TEXT_EMPTY_PLACEHOLDER} + +
+ + ); + } + )} + + + ); + }; + return ( {notificationContextHolder} @@ -617,57 +668,7 @@ export default function GroupTasksViewModal({ isOpen }) { )}

- {currentGroupTask.current.GlobalInputs !== "[]" ? ( - <> -

- {t( - "groupTasks.groupTasksViewModal.popover.specifiedGlobalInputs" - )} -

- - - {JSON.parse(currentGroupTask.current.GlobalInputs).map( - (globalInput) => { - return ( - - - { - groupTasksContext.categoryGroup.groups - .find( - (group) => - group.id === - currentGroupTask.current.GroupId - ) - .globalInputs.find( - (gI) => - gI.parameterName === - globalInput.parameterName - ).displayName - } - :{" "} - - - {globalInput.value !== "" - ? globalInput.value - : Constants.TEXT_EMPTY_PLACEHOLDER} - -
- - ); - } - )} - - - ) : null} + } > diff --git a/src/Pages/GroupTasks/Overview/index.js b/src/Pages/GroupTasks/Overview/index.js index 69752a8..bff8419 100644 --- a/src/Pages/GroupTasks/Overview/index.js +++ b/src/Pages/GroupTasks/Overview/index.js @@ -25,9 +25,6 @@ export default function GroupTasks({ isGroupTasksViewModalOpen }) { const [currentSelectedModalGroupType, setCurrentSelectedModalGroupType] = useState(); const { t } = useTranslation(); - const [paginationPage, setPaginationPage] = useState(1); - const totalPages = useRef(0); - const previousParamCategory = useRef(null); const showGroupTypeSelectionModal = (categoryGroup) => { setCurrentCategoryGroup(categoryGroup); @@ -51,36 +48,44 @@ export default function GroupTasks({ isGroupTasksViewModalOpen }) { const fetchGroupTasks = (page) => { myFetch(`/grouptasks/${paramCategory}?page=${page}`, "GET").then((data) => { - totalPages.current = data.TotalPages; + groupTasksContext.setTotalPages(data.TotalPages); groupTasksContext.setCategoryGroup(data.CategoryGroup); groupTasksContext.setGroupTasks(data.GroupTasks); }); }; + const onPaginationChange = (page) => { + groupTasksContext.setPaginationPage(page); + groupTasksContext.paginationPageRef.current = page; + }; + useEffect(() => { // initially previousParamCategory.current is null on first render - if (previousParamCategory.current === null) { - previousParamCategory.current = paramCategory; + if (groupTasksContext.previousParamCategory.current === null) { + groupTasksContext.previousParamCategory.current = paramCategory; return; } - if (paramCategory !== previousParamCategory.current) { - previousParamCategory.current = paramCategory; + if (paramCategory !== groupTasksContext.previousParamCategory.current) { + groupTasksContext.previousParamCategory.current = paramCategory; - if (paginationPage === 1) { + if (groupTasksContext.paginationPage === 1) { // if we are on page 1, we need to fetch the new category group fetchGroupTasks(1); } else { // if we are not on page 1, we need to reset the page to 1 and this will trigger the useEffect below - setPaginationPage(1); + onPaginationChange(1); } } else { - fetchGroupTasks(paginationPage); + fetchGroupTasks(groupTasksContext.paginationPage); } }, [paramCategory]); - useEffect(() => fetchGroupTasks(paginationPage), [paginationPage]); + useEffect( + () => fetchGroupTasks(groupTasksContext.paginationPage), + [groupTasksContext.paginationPage] + ); return ( <> @@ -127,9 +132,9 @@ export default function GroupTasks({ isGroupTasksViewModalOpen }) { /> setPaginationPage(page)} - totalPages={totalPages.current} + paginationPage={groupTasksContext.paginationPage} + setPaginationPage={(page) => onPaginationChange(page)} + totalPages={groupTasksContext.totalPages} /> {hasPermission( diff --git a/src/utils.js b/src/utils.js index 3ea5e37..29c324e 100644 --- a/src/utils.js +++ b/src/utils.js @@ -74,6 +74,8 @@ export const Constants = { MAX_ROLE_DESCRIPTION: 80, MAX_EQUIPMENT_DOCUMENTATION_TITLE_LENGTH: 60, MAX_EQUIPMENT_DOCUMENTATION_NOTE_LENGTH: 2000, + EQUIPMENT_DOCUMENTATIONS_PAGINATION_LIMIT: 3, + GROUP_TASKS_PAGINATION_LIMIT: 5, }, MAX_AVATAR_SIZE: 5 * 1024 * 1024, ACCEPTED_AVATAR_FILE_TYPES: [