GovOPlaN/govoplan-scheduling
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(scheduling): use central people picker

Browse Source
This commit is contained in:
Albrecht Degering
2026-07-22 03:17:13 +02:00
parent 2cb86c90dc
commit ea2f721377
13 changed files with 529 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
webui/src/features/scheduling/SchedulingPage.tsx
View File

@@ -1,4 +1,4 @@
import { useEffect, useMemo, useRef, useState, type FormEvent } from "react";
import { useCallback, useEffect, useMemo, useRef, useState, type FormEvent } from "react";
import { useSearchParams } from "react-router-dom";
import {
Bell,
@@ -16,7 +16,6 @@ import {
Button,
Card,
DataGrid,
DataGridEmptyAction,
DataGridRowActions,
DateTimeField,
DismissibleAlert,
@@ -25,6 +24,7 @@ import {
IconButton,
PageTitle,
PasswordField,
PeoplePicker,
formatDateTime,
SelectionList,
SelectionListItem,
@@ -41,7 +41,9 @@ import {
type AuthInfo,
type CalendarPickerUiCapability,
type DataGridColumn,
type FormatDateTimeOptions
type FormatDateTimeOptions,
type PeoplePickerItem,
type PeoplePickerSearch
} from "@govoplan/core-webui";
import {
closeSchedulingRequest,
@@ -55,6 +57,7 @@ import {
listSchedulingNotifications,
listSchedulingRequests,
openSchedulingRequest,
searchSchedulingPeople,
schedulingSummary,
submitSchedulingAvailability,
updateSchedulingRequest,
@@ -70,10 +73,14 @@ import {
applySchedulingAvailabilityChoice,
groupSchedulingRequests,
schedulingParticipantForActor,
participantDraftFromResponse,
participantDraftsFromPicker,
participantPayload,
schedulingRelevantTimestamp,
schedulingRequestIsOwned,
schedulingSortPhase,
type SchedulingActor,
type SchedulingParticipantDraft,
type SchedulingRequestGroups
} from "./schedulingViewModel";
@@ -89,17 +96,7 @@ type SlotDraft = {
timezone: string;
metadata?: Record<string, unknown>;
};
type ParticipantDraft = {
draftId: string;
sourceId?: string;
respondent_id?: string | null;
display_name: string;
email: string;
participant_type: "internal" | "external" | "resource";
required: boolean;
metadata?: Record<string, unknown>;
identityLocked?: boolean;
};
type ParticipantDraft = SchedulingParticipantDraft;
const I18N = {
actions: "i18n:govoplan-core.actions.c3cd636a",
@@ -174,6 +171,9 @@ const I18N = {
participantRosterVisibility: "i18n:govoplan-scheduling.share_participant_names_and_response_statuses.df0bf9e0",
participantRosterVisibilityHelp: "i18n:govoplan-scheduling.when_enabled_participants_can_see_other_participants_names.3ac78361",
participants: "i18n:govoplan-scheduling.participants.cd56e083",
participantPickerHelp: "i18n:govoplan-scheduling.search_visible_accounts_and_contacts_or_add_an_external_perso.877f6b44",
allowExternalParticipants: "i18n:govoplan-scheduling.allow_external_participants.a9efcb52",
allowExternalParticipantsHelp: "i18n:govoplan-scheduling.when_enabled_people_outside_the_configured_accounts_and.78829735",
participation: "i18n:govoplan-scheduling.participation.9ad70cc4",
participationRate: "i18n:govoplan-scheduling.participation_rate.46bc5504",
responses: "i18n:govoplan-scheduling.responses.3427e3ab",
@@ -235,7 +235,8 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
const [calendarId, setCalendarId] = useState("");
const [calendarEnabled, setCalendarEnabled] = useState(false);
const [slots, setSlots] = useState<SlotDraft[]>(() => initialSlots(translateText));
const [participants, setParticipants] = useState<ParticipantDraft[]>(() => [emptyParticipant()]);
const [participants, setParticipants] = useState<ParticipantDraft[]>([]);
const [allowExternalParticipants, setAllowExternalParticipants] = useState(true);
const [participantRosterVisible, setParticipantRosterVisible] = useState(false);
const [notifyOnAnswers, setNotifyOnAnswers] = useState(true);
const [singleChoice, setSingleChoice] = useState(false);
@@ -323,6 +324,10 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
const participationPolicyLocked = Boolean(
editorOriginal?.participants.some((participant) => participant.poll_invitation_id)
);
const participantSearch = useCallback<PeoplePickerSearch>(
(query, options) => searchSchedulingPeople(settings, query, options.limit, options.signal),
[settings]
);
useEffect(() => {
void loadRequests();
@@ -482,17 +487,10 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
timezone: slot.timezone,
metadata: slot.metadata
})));
setParticipants(request.participants.map((participant) => ({
draftId: nextDraftId("participant"),
sourceId: participant.id,
respondent_id: participant.respondent_id,
display_name: participant.display_name ?? "",
email: participant.email ?? "",
participant_type: normalizeParticipantType(participant.participant_type),
required: participant.required ?? true,
metadata: participant.metadata,
identityLocked: Boolean(participant.poll_invitation_id)
})));
setParticipants(request.participants.map((participant) => (
participantDraftFromResponse(participant, nextDraftId("participant"))
)));
setAllowExternalParticipants(request.allow_external_participants);
setParticipantRosterVisible(request.participant_visibility === "names_and_statuses");
setNotifyOnAnswers(request.notify_on_answers);
setSingleChoice(request.single_choice);
@@ -555,6 +553,7 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
title: title.trim(),
description: description.trim() || null,
location: location.trim() || null,
allow_external_participants: allowExternalParticipants,
participant_visibility: participantRosterVisible ? "names_and_statuses" : "aggregates_only",
notify_on_answers: notifyOnAnswers,
single_choice: singleChoice,
@@ -587,16 +586,7 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
location: location.trim() || null,
metadata: slot.metadata ?? {}
})),
participants: participants
.filter((participant) => participant.email.trim() || participant.display_name.trim())
.map((participant) => ({
respondent_id: participant.respondent_id ?? null,
display_name: participant.display_name.trim() || null,
email: participant.email.trim() || null,
required: participant.required,
participant_type: participant.participant_type,
metadata: participant.metadata ?? {}
})),
participants: participants.map(participantPayload),
create_participant_invitations: true
});
setRequests((items) => [request, ...items]);
@@ -617,17 +607,7 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
location: location.trim() || null,
metadata: slot.metadata ?? {}
})),
participants: participants
.filter((participant) => participant.sourceId || participant.email.trim() || participant.display_name.trim())
.map((participant) => ({
...(participant.sourceId ? { id: participant.sourceId } : {}),
respondent_id: participant.respondent_id ?? null,
display_name: participant.display_name.trim() || null,
email: participant.email.trim() || null,
participant_type: participant.participant_type,
required: participant.required,
metadata: participant.metadata ?? {}
})),
participants: participants.map(participantPayload),
create_participant_invitations: true
});
replaceRequest(request);
@@ -851,16 +831,18 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
<EditableParticipants
participants={participants}
disabled={!canCreateOrWrite}
onAddBelow={(index) => {
setParticipants((items) => insertAfter(items, index, emptyParticipant()));
allowExternalParticipants={allowExternalParticipants}
search={participantSearch}
onAllowExternalParticipantsChange={(value) => {
setAllowExternalParticipants(value);
setDraftDirty(true);
}}
onChange={(index, patch) => {
setParticipants((items) => items.map((item, itemIndex) => itemIndex === index ? { ...item, ...patch } : item));
setDraftDirty(true);
}}
onRemove={(index) => {
setParticipants((items) => items.filter((_item, itemIndex) => itemIndex !== index));
onChange={(value) => {
setParticipants((current) => participantDraftsFromPicker(
value,
current,
() => nextDraftId("participant")
));
setDraftDirty(true);
}} />
@@ -1174,7 +1156,8 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
setCalendarId("");
setCalendarEnabled(false);
setSlots(initialSlots(translateText));
setParticipants([emptyParticipant()]);
setParticipants([]);
setAllowExternalParticipants(true);
setParticipantRosterVisible(false);
setNotifyOnAnswers(true);
setSingleChoice(false);
@@ -1518,82 +1501,40 @@ function EditableSlots({
function EditableParticipants({
participants,
disabled,
onAddBelow,
onChange,
onRemove
allowExternalParticipants,
search,
onAllowExternalParticipantsChange,
onChange
}: {
participants: ParticipantDraft[];
disabled: boolean;
onAddBelow: (index: number) => void;
onChange: (index: number, patch: Partial<ParticipantDraft>) => void;
onRemove: (index: number) => void;
allowExternalParticipants: boolean;
search: PeoplePickerSearch;
onAllowExternalParticipantsChange: (value: boolean) => void;
onChange: (participants: PeoplePickerItem[]) => void;
}) {
const lockedIdentityHelpId = "scheduling-invited-participant-identity-help";
const columns: DataGridColumn<ParticipantDraft>[] = [
{
id: "name",
header: I18N.name,
minWidth: 180,
resizable: true,
value: (participant) => participant.display_name,
render: (participant, index) => (
<input
disabled={disabled || participant.identityLocked}
maxLength={500}
aria-describedby={participant.identityLocked ? lockedIdentityHelpId : undefined}
aria-label={I18N.name}
value={participant.display_name}
onChange={(event) => onChange(index, { display_name: event.target.value })} />
)
},
{
id: "email",
header: I18N.participantEmail,
minWidth: 260,
resizable: true,
value: (participant) => participant.email,
render: (participant, index) => (
<input
disabled={disabled || participant.identityLocked}
type="email"
maxLength={320}
aria-describedby={participant.identityLocked ? lockedIdentityHelpId : undefined}
aria-label={I18N.participantEmail}
value={participant.email}
onChange={(event) => onChange(index, { email: event.target.value })} />
)
},
{
id: "actions",
header: I18N.actions,
width: 112,
sticky: "end",
render: (_participant, index) => (
<DataGridRowActions
disabled={disabled}
reorderable={false}
onAddBelow={() => onAddBelow(index)}
onRemove={() => onRemove(index)}
addLabel={I18N.addParticipant}
removeLabel={i18nMessage("i18n:govoplan-scheduling.remove_participant_value.e55f2b70", { value0: index + 1 })} />
)
}
];
return (
<Card title={I18N.participants}>
{participants.some((participant) => participant.identityLocked) ? (
<p id={lockedIdentityHelpId} className="scheduling-capability-note">{I18N.invitedIdentityLocked}</p>
<p className="scheduling-capability-note">{I18N.invitedIdentityLocked}</p>
) : null}
<DataGrid
id="scheduling-create-participants-grid"
rows={participants}
columns={columns}
getRowKey={(participant) => participant.draftId}
initialFit="container"
emptyText={I18N.noParticipants}
emptyActionColumnId="actions"
emptyAction={<DataGridEmptyAction disabled={disabled} reorderable={false} onAdd={() => onAddBelow(-1)} label={I18N.addParticipant} />} />
<ToggleSwitch
label={I18N.allowExternalParticipants}
help={I18N.allowExternalParticipantsHelp}
checked={allowExternalParticipants}
disabled={disabled}
onChange={onAllowExternalParticipantsChange} />
<PeoplePicker
id="scheduling-participant-picker"
label={I18N.addParticipant}
help={I18N.participantPickerHelp}
selectedLabel={I18N.participants}
value={participants}
search={search}
disabled={disabled}
allowManualExternal={allowExternalParticipants}
manualEmailRequired
onChange={onChange} />
</Card>
);
}
@@ -1792,21 +1733,6 @@ function newSlot(position: number, translateText: (value: string) => string): Sl
};
}
function emptyParticipant(): ParticipantDraft {
return {
draftId: nextDraftId("participant"),
display_name: "",
email: "",
participant_type: "external",
required: true,
metadata: {}
};
}
function normalizeParticipantType(value: string | null): ParticipantDraft["participant_type"] {
return value === "internal" || value === "resource" ? value : "external";
}
let draftIdSequence = 0;
function nextDraftId(prefix: string): string {