Skip to content

feat(ZMSKVR-1377): improve ui of opening hours#2592

Open
matthilo96 wants to merge 6 commits into
nextfrom
feature-zmskvr-1377-user-interface-improvements-for-new-business-hours
Open

feat(ZMSKVR-1377): improve ui of opening hours#2592
matthilo96 wants to merge 6 commits into
nextfrom
feature-zmskvr-1377-user-interface-improvements-for-new-business-hours

Conversation

@matthilo96

@matthilo96 matthilo96 commented Jun 15, 2026

Copy link
Copy Markdown
Contributor

Pull Request Checklist (Feature Branch to next):

  • Ich habe die neuesten Änderungen aus dem next Branch in meinen Feature-Branch gemergt.
  • Relevante Tests wurden mit zmsautomation ausgeführt.
  • Das Code-Review wurde abgeschlossen.
  • Fachliche Tests wurden durchgeführt und sind abgeschlossen.
  • Ich habe erforderliche Dokumentation im Ordner docs hinzugefügt.

Summary by CodeRabbit

  • Improvements
    • Simplified when action buttons are enabled/disabled during availability editing to reduce unnecessary blocking.
    • Streamlined the publish/validation flow to more reliably identify blocking issues and scroll you to the first problem.
    • Improved post-save behavior by refreshing results, showing the first conflict (when available), and clearing outdated validation messages.
  • UI Updates
    • Refined accordion expand/collapse so the opened section matches the currently selected availability and date.
    • Updated the save bar layout to display it above and below the accordion for clearer feedback.

@coderabbitai

coderabbitai Bot commented Jun 15, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Important

Review skipped

Review was skipped due to path filters

⛔ Files ignored due to path filters (3)
  • docs/package-lock.json is excluded by !**/package-lock.json
  • zmsadmin/package-lock.json is excluded by !**/package-lock.json
  • zmsstatistic/package-lock.json is excluded by !**/package-lock.json

CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including **/dist/** will override the default block on the dist directory, by removing the pattern from both the lists.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 1eea430f-1ac8-4746-af6f-3a0e98059ccc

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

The availability day page's validation and conflict-checking logic is refactored to use Promise-based flows with immediate state updates on mutations. getConflictList and getValidationList now return Promises, support scroll-to-error behavior, and throw on failure. Save/publish operations chain through refreshData then getConflictList, with scrolling to the success message. Mutating actions (delete, revert, edit, new, exclusion) clear conflictList eagerly without debounce. handleChange immediately updates state and clears per-item validation errors. Button disabled predicates drop error/conflict checks. The Accordion shifts expansion tracking from internal state to props, and the layout splits success messaging into top and bottom bar slots.

Changes

AvailabilityDay validation, conflict, and UI flow refactor

Layer / File(s) Summary
Validation and conflict list helpers with Promise flow
zmsadmin/js/page/availabilityDay/index.js
Imports validate alongside hasBlockingErrors; adds sortAvailabilities, findFirstConflictedAvailability, and clearValidationErrorsForAvailability utilities; rewrites getValidationList to accept { scrollToErrors } and resolve with the error list, scrolling only when requested and blocking errors exist; reimplements getConflictList using fetch POST with JSON body, optional scroll-on-conflict behavior, and throws on failure instead of resolving empty lists.
Publish, save, and refreshData Promise chain
zmsadmin/js/page/availabilityDay/index.js
Adds componentWillUnmount for beforeunload cleanup; rewrites onPublishAvailability to call getValidationList({ scrollToErrors: true }), derive and select the first invalid availability from errors, and gate saving on hasBlockingErrors false; converts refreshData to return a Promise resolving after state merge or null on failure; chains post-save through refreshDatagetConflictList, derives first conflicted availability, clears errorList, sets selectedAvailability and save metadata, scrolls success into view via scrollToSuccessMessage, and hides spinner.
Action handlers with eager conflictList clearing and handleChange optimization
zmsadmin/js/page/availabilityDay/index.js
onRevertUpdates clears errorList and calls refreshData; delete/exclusion creation/future-edit callbacks reset conflictList to empty in state instead of re-fetching; onSelectAvailability directly sets selectedAvailability via setState; onNewAvailability initializes full state including empty errorList/conflictList and scrolls to top; handleChange immediately updates availability state, clears validation errors for the changed item, resets conflictList to empty, and recalculates slots without debounce timer; accordion rendering defaults conflictIdList to array shape.
Accordion props-driven expansion and selectedDate wiring
zmsadmin/js/page/availabilityDay/layouts/accordion.js
Derives selectedEventId from this.props.data (using id or tempId, or null), removing internal isExpanded state tracking; per-item accordionExpanded is computed by comparing eventId to selectedEventId; onToggle calls onSelect with availability or null based on expansion state; passes selectedDate from this.props.timestamp to FooterButtons and Board.
Button disabled predicate simplification
zmsadmin/js/page/availabilityDay/form/footerButtons.js, zmsadmin/js/page/availabilityDay/form/formButtons.js
Removes hasNewAvailabilitiesWithEmptyTimes from footerButtons; narrows Neue Öffnungszeit disabled to conflicts or past date only (dropping data dependency); strips hasSlotCountError/hasErrors from Alle Änderungen aktivieren disabled condition; removes hasConflicts/hasErrors/hasSlotCountError from Aktualisieren disabled predicate in formButtons.
PageLayout saveBar split into top and bottom slots
zmsadmin/js/page/availabilityDay/layouts/page.js, zmsadmin/js/page/availabilityDay/index.js
Layout JSX updated to use saveBarTop (above accordion) and saveBarBottom (below accordion) props instead of single saveBar; propTypes changed to declare both as PropTypes.node; index.js render switches to calling saveBarTop and saveBarBottom separately, with setSuccessRef callback wired to the top instance for scroll-to-success messaging.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant onPublishAvailability
  participant getValidationList
  participant SaveHandler as Save Handler
  participant refreshData
  participant getConflictList
  participant API as Backend API

  User->>onPublishAvailability: click publish button
  onPublishAvailability->>getValidationList: { scrollToErrors: true }
  getValidationList-->>onPublishAvailability: errorList (scrolls if blocking)
  alt blocking errors exist
    onPublishAvailability->>onPublishAvailability: select first invalid availability
    onPublishAvailability-->>User: abort, validation errors visible
  else no blocking errors
    onPublishAvailability->>SaveHandler: proceed to onSaveUpdates
    SaveHandler->>API: POST availability updates
    API-->>SaveHandler: success response
    SaveHandler->>refreshData: await Promise
    refreshData->>API: fetch day and conflicts
    API-->>refreshData: merged state
    refreshData-->>SaveHandler: resolved
    SaveHandler->>getConflictList: { scrollToErrors: false }
    getConflictList->>API: fetch POST conflict check
    API-->>getConflictList: conflictList
    getConflictList-->>SaveHandler: resolved
    SaveHandler->>SaveHandler: derive first conflicted availability
    SaveHandler->>SaveHandler: scrollToSuccessMessage
    SaveHandler-->>User: success shown, spinner hidden
  end
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Suggested reviewers

  • MoDaae

Poem

🐇 Promises hop through validation's way,
No debounce delays, state updates today!
Errors scroll gracefully into sight,
Split save bars frame success just right.
Props drive the accordion, buttons simplified bright—
AvailabilityDay blooms with refactored delight! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name Status Explanation Resolution
Title check ❓ Inconclusive The title 'feat(ZMSKVR-1377): improve ui of opening hours' is overly broad and vague. It uses non-descriptive terms like 'improve ui' without conveying the specific changes made. Revise the title to be more specific about the actual changes, such as 'refactor opening hours validation logic' or 'simplify availability button disabled states', to better describe the substantive code modifications.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature-zmskvr-1377-user-interface-improvements-for-new-business-hours

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
zmsadmin/js/page/availabilityDay/form/footerButtons.js (1)

6-17: 🛠️ Refactor suggestion | 🟠 Major | ⚡ Quick win

Remove unused props hasErrors, hasSlotCountError, and data.

These props are destructured but never used in the component body after the disabled-predicate simplification. The corresponding PropTypes declarations should also be removed to complete the cleanup.

♻️ Proposed fix to remove unused props
 const FooterButtons = (props) => {
     const { 
         hasConflicts, 
-        hasErrors, 
         stateChanged, 
-        data, 
         onNew, 
         onPublish, 
         onAbort, 
-        hasSlotCountError, 
         availabilitylist,
         selectedDate 
     } = props;
 FooterButtons.propTypes = {
-    data: PropTypes.object,
     hasConflicts: PropTypes.bool,
-    hasErrors: PropTypes.bool,
     stateChanged: PropTypes.bool,
     onNew: PropTypes.func,
     onPublish: PropTypes.func,
     onAbort: PropTypes.func,
-    hasSlotCountError: PropTypes.bool,
     availabilitylist: PropTypes.array,
     selectedDate: PropTypes.number.isRequired
 }

Note: After removing these props from FooterButtons, the parent component (accordion.js around line 200-210) should also stop computing and passing them to avoid unnecessary work.

Also applies to: 58-69

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@zmsadmin/js/page/availabilityDay/form/footerButtons.js` around lines 6 - 17,
Remove the unused props hasErrors, hasSlotCountError, and data from the
destructuring of props in the footerButtons component. These props are extracted
but never referenced in the component body. Additionally, remove the
corresponding PropTypes declarations for these three props from the component's
PropTypes definition. After making these changes to FooterButtons, also update
the parent component accordion.js (around lines 200-210) to stop computing and
passing these unused props to FooterButtons to eliminate unnecessary work.

Source: Coding guidelines

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@zmsadmin/js/page/availabilityDay/index.js`:
- Line 123: Replace the console.log call used for error logging in the
refreshData error handler with console.error instead. Since this is in an
error/catch path, console.error is the appropriate standard logging method per
coding guidelines. The same change should be applied wherever console.log is
used for logging errors in failure paths throughout the file.
- Around line 678-719: The fetch promise chain does not validate the HTTP
response status before calling .json(), which allows error responses to silently
resolve as empty conflict lists. After the fetch response is received, check
res.ok before processing the JSON; if the response status indicates an error,
read the response text and throw an error object with status and message
properties so the catch block can handle it properly. This ensures validation
failures are not silently masked. Additionally, replace the console.log call on
line 710 with console.error to properly log the error condition.
- Around line 68-70: The lifecycle method `componentDidUnMount` is not a valid
React class component hook, so React never calls it and the `beforeunload` event
listener registered in `componentDidMount` is never removed. Rename the method
from `componentDidUnMount` to `componentWillUnmount` (the correct React
lifecycle method name) so that the event listener cleanup code properly executes
when the component unmounts.

---

Outside diff comments:
In `@zmsadmin/js/page/availabilityDay/form/footerButtons.js`:
- Around line 6-17: Remove the unused props hasErrors, hasSlotCountError, and
data from the destructuring of props in the footerButtons component. These props
are extracted but never referenced in the component body. Additionally, remove
the corresponding PropTypes declarations for these three props from the
component's PropTypes definition. After making these changes to FooterButtons,
also update the parent component accordion.js (around lines 200-210) to stop
computing and passing these unused props to FooterButtons to eliminate
unnecessary work.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 434728c6-5c14-458c-9580-4998be2741bd

📥 Commits

Reviewing files that changed from the base of the PR and between 94ea06c and 05aa346.

⛔ Files ignored due to path filters (2)
  • zmsadmin/package-lock.json is excluded by !**/package-lock.json
  • zmsstatistic/package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (4)
  • zmsadmin/js/page/availabilityDay/form/footerButtons.js
  • zmsadmin/js/page/availabilityDay/form/formButtons.js
  • zmsadmin/js/page/availabilityDay/index.js
  • zmsadmin/js/page/availabilityDay/layouts/accordion.js
💤 Files with no reviewable changes (1)
  • zmsadmin/js/page/availabilityDay/form/formButtons.js

Comment thread zmsadmin/js/page/availabilityDay/index.js Outdated
Comment thread zmsadmin/js/page/availabilityDay/index.js Outdated
Comment thread zmsadmin/js/page/availabilityDay/index.js

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

♻️ Duplicate comments (1)
zmsadmin/js/page/availabilityDay/index.js (1)

68-70: ⚠️ Potential issue | 🔴 Critical | ⚡ Quick win

The lifecycle method name is still misspelled—React won't call it.

The method was renamed from componentDidUnMount to componentWillUnMount, but React's lifecycle method is componentWillUnmount (lowercase 'm' in 'unmount'). Since JavaScript method names are case-sensitive, React will never invoke this method, leaving the beforeunload listener attached after the component unmounts. This causes memory leaks and stale "unsaved changes" prompts.

🔧 Proposed fix
-    componentWillUnMount() {
+    componentWillUnmount() {
         window.removeEventListener('beforeunload', this.unloadHandler)
     }
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@zmsadmin/js/page/availabilityDay/index.js` around lines 68 - 70, The
lifecycle method name is misspelled as componentWillUnMount, but React's correct
lifecycle method is componentWillUnmount with a lowercase 'm' in 'unmount'.
Since React uses case-sensitive method names and will never invoke the
misspelled version, the beforeunload event listener will not be removed when the
component unmounts. Rename the method from componentWillUnMount to
componentWillUnmount so React properly calls it and the event listener cleanup
occurs, preventing memory leaks.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Duplicate comments:
In `@zmsadmin/js/page/availabilityDay/index.js`:
- Around line 68-70: The lifecycle method name is misspelled as
componentWillUnMount, but React's correct lifecycle method is
componentWillUnmount with a lowercase 'm' in 'unmount'. Since React uses
case-sensitive method names and will never invoke the misspelled version, the
beforeunload event listener will not be removed when the component unmounts.
Rename the method from componentWillUnMount to componentWillUnmount so React
properly calls it and the event listener cleanup occurs, preventing memory
leaks.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 1c4926bd-d093-4efb-873b-c340ef88e88b

📥 Commits

Reviewing files that changed from the base of the PR and between 05aa346 and de12583.

⛔ Files ignored due to path filters (1)
  • docs/package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (1)
  • zmsadmin/js/page/availabilityDay/index.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant