Skip to content

Add lending calendar #5586

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.

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

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Add lending calendar #5586

wants to merge 4 commits into from

Conversation

Bestem0r
Copy link
Contributor

@Bestem0r Bestem0r commented May 19, 2025

Description

Adds a calendar to show unavailable time slots given a lendable object, as well the time slots chosen for the current lending request. The calendar is added to both the new lending request and lending request detail pages.

Next step will be to make the calendar function as the date and time picker for new lending requests.

Backend PR

Result

  • Changes look good on both light and dark theme.
  • Changes look good with different viewports (mobile, tablet, etc.).
  • Changes look good with slower Internet connections.
Screencast.From.2025-05-20.00-06-10.online-video-cutter.com.mp4

Testing

  • I have thoroughly tested my changes.

Create and approve a lending request. Verify that the calendar displays unavailable and selected time slots correctly.

Resolves ABA-1438

@Bestem0r Bestem0r requested review from jonasdeluna and a team May 19, 2025 20:29
Copy link

linear bot commented May 19, 2025

@github-actions github-actions bot added the review-needed Pull requests that need review label May 19, 2025
@Bestem0r Bestem0r force-pushed the add-lending-calendar branch from 674950c to 90cce6b Compare May 19, 2025 20:33
Copy link
Member

@jonasdeluna jonasdeluna left a comment

Choose a reason for hiding this comment

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

Awesome!

@coolify-webkom
Copy link

coolify-webkom bot commented May 22, 2025

The preview deployment is ready. 🟢

Open Preview | Open Build Logs

Last updated at: 2025-05-22 14:26:13 CET

@Bestem0r Bestem0r requested a review from eikhr May 27, 2025 18:21
Copy link
Contributor

@Arashfa0301 Arashfa0301 left a comment

Choose a reason for hiding this comment

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

Looks good

Comment on lines +105 to +110
<Card>
<Flex column gap="var(--spacing-md)">
<h3>Ny forespørsel</h3>
<LendingRequestEditor onRangeChange={setRange} />
</Flex>
</Card>
Copy link
Member

Choose a reason for hiding this comment

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

Why is this in a card?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I think it looks better when the new request form is inside it's own container, separate from the calendar

Comment on lines +76 to +80
onChange={(value: [Dateish, Dateish]) => {
if (onRangeChange && value && value.length === 2) {
onRangeChange(value);
}
}}
Copy link
Member

Choose a reason for hiding this comment

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

what is this? Should this logic not be added to the date picker itself?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah the plan is to use the calendar as the actual date picker in the next iteration if that's what you mean

lendableObjectId,
selectedRange,
}: LendingCalendarProps) => {
const [currentMonth, setCurrentMonth] = useState(moment());
Copy link
Member

Choose a reason for hiding this comment

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

it says current month but it stores the current day? not sure if intentional?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The stored day is only used to track which month (and year) the calendar should display, that's why I called it month and not day. Can change it though


.dayCell {
vertical-align: top;
padding: 0 !important;
Copy link
Member

Choose a reason for hiding this comment

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

😢

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
review-needed Pull requests that need review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants