Skip to content

feat(app): new compact date range view option for UI and Print for upcoming events #5321

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.

Sign up for GitHub

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
ux-git wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat(app): new compact date range view option for UI and Print for upcoming events #5321

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8bacb8b
fix(icons): let the cart icon recolour on hover
ux-git Jul 27, 2026
705f280
feat(time-picker): support error and helper text
ux-git Jul 27, 2026
216415f
feat(upcoming-events): flexible event dates and PDF output
ux-git Jul 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
145 changes: 72 additions & 73 deletions src/components/icons/IconCart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,79 +27,78 @@ const IconCart = ({
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M8.93961 0.419434H17.3821L14.5923 21.4325H13.7167L13.5189 22.8929C13.4547 23.2879 13.0709 23.5813 12.6182 23.5813H7.49166C6.94388 23.5813 6.5203 23.1577 6.58902 22.6787L6.71984 21.3887H6.09913L8.93961 0.419434ZM7.94538 19.9889H8.57171L8.31735 22.1376H11.9871L12.2966 19.9889H13.1407L15.5345 1.8631H10.3876L7.94538 19.9889Z"
fill={color}
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M13.0066 13.1265L12.6977 15.2998L11.1689 15.3L11.4982 13.1266L13.0066 13.1265Z"
fill={color}
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M13.5784 8.83398L13.2695 11.0073L11.7407 11.0075L12.07 8.83414L13.5784 8.83398Z"
fill={color}
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12.3787 17.8076L12.0698 19.981L10.541 19.9811L10.8703 17.8078L12.3787 17.8076Z"
fill={color}
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M10.946 13.1265L10.6372 15.2998L9.1084 15.3L9.43765 13.1266L10.946 13.1265Z"
fill={color}
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M11.5061 8.83398L11.1972 11.0073L9.66846 11.0075L9.99771 8.83414L11.5061 8.83398Z"
fill={color}
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M10.3757 17.8076L10.0669 19.981L8.53809 19.9811L8.86734 17.8078L10.3757 17.8076Z"
fill={color}
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M5.22607 19.981L14.3227 19.981L14.3227 21.4102L5.22607 21.4102L5.22607 19.981Z"
fill={color}
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M5.83887 15.2998L14.9116 15.2998L14.9116 16.7435L5.83887 16.7435L5.83887 15.2998Z"
fill={color}
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M6.40137 10.8486L15.9369 10.8486L15.9369 12.2923L6.40137 12.2923L6.40137 10.8486Z"
fill={color}
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M15.8472 10.8096L17.0453 18.2612L15.8607 18.4093L14.6626 10.9576L15.8472 10.8096Z"
fill={color}
/>
<ellipse
cx="17.0453"
cy="21.1449"
rx="1.7284"
ry="2.25088"
fill={color}
/>
<g>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M8.93961 0.419434H17.3821L14.5923 21.4325H13.7167L13.5189 22.8929C13.4547 23.2879 13.0709 23.5813 12.6182 23.5813H7.49166C6.94388 23.5813 6.5203 23.1577 6.58902 22.6787L6.71984 21.3887H6.09913L8.93961 0.419434ZM7.94538 19.9889H8.57171L8.31735 22.1376H11.9871L12.2966 19.9889H13.1407L15.5345 1.8631H10.3876L7.94538 19.9889Z"
fill={color}
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M13.0066 13.1265L12.6977 15.2998L11.1689 15.3L11.4982 13.1266L13.0066 13.1265Z"
fill={color}
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M13.5784 8.83398L13.2695 11.0073L11.7407 11.0075L12.07 8.83414L13.5784 8.83398Z"
fill={color}
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12.3787 17.8076L12.0698 19.981L10.541 19.9811L10.8703 17.8078L12.3787 17.8076Z"
fill={color}
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M10.946 13.1265L10.6372 15.2998L9.1084 15.3L9.43765 13.1266L10.946 13.1265Z"
fill={color}
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M11.5061 8.83398L11.1972 11.0073L9.66846 11.0075L9.99771 8.83414L11.5061 8.83398Z"
fill={color}
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M10.3757 17.8076L10.0669 19.981L8.53809 19.9811L8.86734 17.8078L10.3757 17.8076Z"
fill={color}
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M5.22607 19.981L14.3227 19.981L14.3227 21.4102L5.22607 21.4102L5.22607 19.981Z"
fill={color}
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M5.83887 15.2998L14.9116 15.2998L14.9116 16.7435L5.83887 16.7435L5.83887 15.2998Z"
fill={color}
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M6.40137 10.8486L15.9369 10.8486L15.9369 12.2923L6.40137 12.2923L6.40137 10.8486Z"
fill={color}
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M15.8472 10.8096L17.0453 18.2612L15.8607 18.4093L14.6626 10.9576L15.8472 10.8096Z"
fill={color}
/>
<path
d="M15.3169 21.1449A1.7284 2.25088 0 1 0 18.7737 21.1449A1.7284 2.25088 0 1 0 15.3169 21.1449Z"
fill={color}
/>
</g>
</svg>
</SvgIcon>
);
Expand Down
4 changes: 4 additions & 0 deletions src/components/time_picker/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ const TimePicker = ({
onChange,
sx,
readOnly = false,
error,
helperText,
}: CustomTimePickerProps) => {
const divRef = useRef<HTMLDivElement>(null);

Expand Down Expand Up @@ -91,6 +93,8 @@ const TimePicker = ({
label: label,
value: valueTmp,
onClick: () => setOpen(!open),
error,
helperText,
},
toolbar: {
hidden: false,
Expand Down
2 changes: 2 additions & 0 deletions src/components/time_picker/index.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,6 @@ export interface CustomTimePickerProps {
onChange?: (value: Date) => void;
sx?: SxProps<Theme>;
readOnly?: boolean;
error?: boolean;
helperText?: string;
}
1 change: 1 addition & 0 deletions src/constants/table_encryption_map.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ export const TABLE_ENCRYPTION_MAP = {
circuit_overseer: 'shared',
language_groups: 'shared',
format_24h_enabled: 'shared',
events_multiday_display: 'shared',
week_start_sunday: 'shared',
attendance_online_record: 'shared',
data_sync: 'public',
Expand Down
7 changes: 7 additions & 0 deletions src/definition/settings.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { AppRoleType } from './app';
import { AssignmentFieldType } from './assignment';
import { UpcomingEventDisplayType } from './upcoming_events';

export enum FullnameOption {
FIRST_BEFORE_LAST = 1,
Expand Down Expand Up @@ -156,6 +157,12 @@ export type SettingsType = {
updatedAt: string;
_deleted: boolean;
}[];
events_multiday_display: {
type: string;
value: UpcomingEventDisplayType;
updatedAt: string;
_deleted: boolean;
}[];
week_start_sunday: {
type: string;
value: boolean;
Expand Down
11 changes: 10 additions & 1 deletion src/definition/upcoming_events.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ export enum UpcomingEventCategory {
AssemblyWeek,
InternationalConventionWeek,
SpecialCampaignWeek,
TheocraticTrainingWeek,
HallMaintenanceTrainingWeek,
TheocraticTrainingWeek,
BethelTour,
SpecialProgram,
PublicWitnessing,
Expand All @@ -22,6 +22,12 @@ export enum UpcomingEventDuration {
MultipleDays,
}

export type UpcomingEventDisplayType = 'byDay' | 'range';

export const UPCOMING_EVENT_MAX_LIST_DAYS = 7;

export const DEFAULT_EVENT_START_HOUR = 9;

export type UpcomingEventType = {
event_uid: string;
_deleted?: boolean;
Expand All @@ -36,6 +42,7 @@ export type UpcomingEventType = {
duration: UpcomingEventDuration;
description: string;
custom?: string;
wholeDay?: boolean;
};
};

Expand All @@ -48,6 +55,8 @@ export type UpcomingEventDataType = {
description: string;
category: UpcomingEventCategory;
duration: UpcomingEventDuration;
wholeDay: boolean;
showAsRange: boolean;
start: string;
date: string;
day: string;
Expand Down
62 changes: 30 additions & 32 deletions src/features/activities/upcoming_events/add_to_calendar/useAddToCalendar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import { useState } from 'react';
import { createEvent, EventAttributes } from 'ics';
import { AddToCalendarProps } from './index.types';
import {
UpcomingEventCategory,
UpcomingEventDuration,
} from '@definition/upcoming_events';
import { UpcomingEventCategory } from '@definition/upcoming_events';
import { isWholeDayEvent } from '@services/app/upcoming_events';
import { useAppTranslation } from '@hooks/index';
import { decorationsForEvent } from '../decorations_for_event';
import { displaySnackNotification } from '@services/states/app';
Expand All @@ -28,6 +26,7 @@ const useAddToCalendar = ({ event }: AddToCalendarProps) => {

const startDate = new Date(event.event_data.start);
const endDate = new Date(event.event_data.end);
const wholeDay = isWholeDayEvent(event);

const eventTitle =
event.event_data.category !== UpcomingEventCategory.Custom
Expand All @@ -37,34 +36,33 @@ const useAddToCalendar = ({ event }: AddToCalendarProps) => {
const eventDetails: EventAttributes = {
title: eventTitle,
description: event.event_data.description,
start:
event.event_data.duration === UpcomingEventDuration.SingleDay
? [
startDate.getFullYear(),
startDate.getMonth() + 1,
startDate.getDate(),
startDate.getHours(),
startDate.getMinutes(),
]
: [
startDate.getFullYear(),
startDate.getMonth() + 1,
startDate.getDate(),
],
end:
event.event_data.duration === UpcomingEventDuration.SingleDay
? [
endDate.getFullYear(),
endDate.getMonth() + 1,
endDate.getDate(),
endDate.getHours(),
endDate.getMinutes(),
]
: [
endDate.getFullYear(),
endDate.getMonth() + 1,
endDate.getDate() + 1,
],
start: wholeDay
? [
startDate.getFullYear(),
startDate.getMonth() + 1,
startDate.getDate(),
]
: [
startDate.getFullYear(),
startDate.getMonth() + 1,
startDate.getDate(),
startDate.getHours(),
startDate.getMinutes(),
],
end: wholeDay
? [
endDate.getFullYear(),
endDate.getMonth() + 1,
// all-day ranges are exclusive of the end date
endDate.getDate() + 1,
]
: [
endDate.getFullYear(),
endDate.getMonth() + 1,
endDate.getDate(),
endDate.getHours(),
endDate.getMinutes(),
],
};

createEvent(eventDetails, (error, value) => {
Expand Down
Loading
Loading