✨(front) add CalendarList subcomponents
Add modular subcomponents for CalendarList including item menu, list item, create/edit modal, delete confirmation and subscription URL display modals. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Nathan Panchout
@@ -0,0 +1,68 @@
|
||||
/**
|
||||
* CalendarItemMenu component.
|
||||
* Context menu for calendar item actions (edit, delete).
|
||||
*/
|
||||
|
||||
import { useRef, useEffect } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import type { CalendarItemMenuProps } from "./types";
|
||||
|
||||
export const CalendarItemMenu = ({
|
||||
onEdit,
|
||||
onDelete,
|
||||
onSubscription,
|
||||
onClose,
|
||||
}: CalendarItemMenuProps) => {
|
||||
const { t } = useTranslation();
|
||||
const menuRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||
}, [onClose]);
|
||||
|
||||
const handleEdit = () => {
|
||||
onEdit();
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
onDelete();
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleSubscription = () => {
|
||||
if (onSubscription) {
|
||||
onSubscription();
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div ref={menuRef} className="calendar-list__menu">
|
||||
<button className="calendar-list__menu-item" onClick={handleEdit}>
|
||||
<span className="material-icons">edit</span>
|
||||
{t('calendar.list.edit')}
|
||||
</button>
|
||||
{onSubscription && (
|
||||
<button className="calendar-list__menu-item" onClick={handleSubscription}>
|
||||
<span className="material-icons">link</span>
|
||||
{t('calendar.list.subscription')}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
className="calendar-list__menu-item calendar-list__menu-item--danger"
|
||||
onClick={handleDelete}
|
||||
>
|
||||
<span className="material-icons">delete</span>
|
||||
{t('calendar.list.delete')}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,98 @@
|
||||
/**
|
||||
* CalendarListItem components.
|
||||
* Display individual calendar items in the list.
|
||||
*/
|
||||
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Checkbox } from "@gouvfr-lasuite/cunningham-react";
|
||||
|
||||
import { CalendarItemMenu } from "./CalendarItemMenu";
|
||||
import type { CalendarListItemProps, SharedCalendarListItemProps } from "./types";
|
||||
|
||||
/**
|
||||
* CalendarListItem - Displays a user-owned calendar.
|
||||
*/
|
||||
export const CalendarListItem = ({
|
||||
calendar,
|
||||
isVisible,
|
||||
isMenuOpen,
|
||||
onToggleVisibility,
|
||||
onMenuToggle,
|
||||
onEdit,
|
||||
onDelete,
|
||||
onSubscription,
|
||||
onCloseMenu,
|
||||
}: CalendarListItemProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="calendar-list__item">
|
||||
<div className="calendar-list__item-checkbox">
|
||||
<Checkbox
|
||||
checked={isVisible}
|
||||
onChange={() => onToggleVisibility(calendar.url)}
|
||||
label=""
|
||||
aria-label={`${t('calendar.list.showCalendar')} ${calendar.displayName || ''}`}
|
||||
/>
|
||||
<span
|
||||
className="calendar-list__color"
|
||||
style={{ backgroundColor: calendar.color }}
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
className="calendar-list__name"
|
||||
title={calendar.displayName || undefined}
|
||||
>
|
||||
{calendar.displayName || 'Sans nom'}
|
||||
</span>
|
||||
<div className="calendar-list__item-actions">
|
||||
<button
|
||||
className="calendar-list__options-btn"
|
||||
onClick={(e) => onMenuToggle(calendar.url, e)}
|
||||
aria-label="Options"
|
||||
>
|
||||
<span className="material-icons">more_horiz</span>
|
||||
</button>
|
||||
{isMenuOpen && (
|
||||
<CalendarItemMenu
|
||||
onEdit={() => onEdit(calendar)}
|
||||
onDelete={() => onDelete(calendar)}
|
||||
onSubscription={onSubscription ? () => onSubscription(calendar) : undefined}
|
||||
onClose={onCloseMenu}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* SharedCalendarListItem - Displays a shared calendar.
|
||||
*/
|
||||
export const SharedCalendarListItem = ({
|
||||
calendar,
|
||||
isVisible,
|
||||
onToggleVisibility,
|
||||
}: SharedCalendarListItemProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="calendar-list__item">
|
||||
<div className="calendar-list__item-checkbox">
|
||||
<Checkbox
|
||||
checked={isVisible}
|
||||
onChange={() => onToggleVisibility(String(calendar.id))}
|
||||
label=""
|
||||
aria-label={`${t('calendar.list.showCalendar')} ${calendar.name}`}
|
||||
/>
|
||||
<span
|
||||
className="calendar-list__color"
|
||||
style={{ backgroundColor: calendar.color }}
|
||||
/>
|
||||
</div>
|
||||
<span className="calendar-list__name" title={calendar.name}>
|
||||
{calendar.name}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,236 @@
|
||||
/**
|
||||
* CalendarModal component.
|
||||
* Handles creation and editing of calendars, including sharing.
|
||||
*/
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
Modal,
|
||||
ModalSize,
|
||||
TextArea,
|
||||
} from "@gouvfr-lasuite/cunningham-react";
|
||||
|
||||
import { DEFAULT_COLORS } from "./constants";
|
||||
import type { CalendarModalProps } from "./types";
|
||||
|
||||
export const CalendarModal = ({
|
||||
isOpen,
|
||||
mode,
|
||||
calendar,
|
||||
onClose,
|
||||
onSave,
|
||||
onShare,
|
||||
}: CalendarModalProps) => {
|
||||
const { t } = useTranslation();
|
||||
const [name, setName] = useState("");
|
||||
const [color, setColor] = useState(DEFAULT_COLORS[0]);
|
||||
const [description, setDescription] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Share state
|
||||
const [shareEmail, setShareEmail] = useState("");
|
||||
const [isSharing, setIsSharing] = useState(false);
|
||||
const [shareSuccess, setShareSuccess] = useState<string | null>(null);
|
||||
const [shareError, setShareError] = useState<string | null>(null);
|
||||
|
||||
// Reset form when modal opens or calendar changes
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
if (mode === "edit" && calendar) {
|
||||
setName(calendar.displayName || "");
|
||||
setColor(calendar.color || DEFAULT_COLORS[0]);
|
||||
setDescription(calendar.description || "");
|
||||
} else {
|
||||
setName("");
|
||||
setColor(DEFAULT_COLORS[0]);
|
||||
setDescription("");
|
||||
}
|
||||
setError(null);
|
||||
setShareEmail("");
|
||||
setShareSuccess(null);
|
||||
setShareError(null);
|
||||
}
|
||||
}, [isOpen, mode, calendar]);
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!name.trim()) {
|
||||
setError(t('calendar.createCalendar.nameRequired'));
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
await onSave(name.trim(), color, description.trim() || undefined);
|
||||
onClose();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : t('api.error.unexpected'));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleShare = async () => {
|
||||
if (!shareEmail.trim() || !onShare) return;
|
||||
|
||||
// Basic email validation
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(shareEmail.trim())) {
|
||||
setShareError(t('calendar.shareCalendar.invalidEmail'));
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSharing(true);
|
||||
setShareError(null);
|
||||
setShareSuccess(null);
|
||||
|
||||
try {
|
||||
const result = await onShare(shareEmail.trim());
|
||||
if (result.success) {
|
||||
setShareSuccess(
|
||||
t('calendar.shareCalendar.success', { email: shareEmail.trim() })
|
||||
);
|
||||
setShareEmail("");
|
||||
} else {
|
||||
setShareError(result.error || t('calendar.shareCalendar.error'));
|
||||
}
|
||||
} catch (err) {
|
||||
setShareError(
|
||||
err instanceof Error ? err.message : t('calendar.shareCalendar.error')
|
||||
);
|
||||
} finally {
|
||||
setIsSharing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setName("");
|
||||
setColor(DEFAULT_COLORS[0]);
|
||||
setDescription("");
|
||||
setError(null);
|
||||
setShareEmail("");
|
||||
setShareSuccess(null);
|
||||
setShareError(null);
|
||||
onClose();
|
||||
};
|
||||
|
||||
const title =
|
||||
mode === "create"
|
||||
? t('calendar.createCalendar.title')
|
||||
: t('calendar.editCalendar.title');
|
||||
|
||||
const saveLabel =
|
||||
mode === "create"
|
||||
? t('calendar.createCalendar.create')
|
||||
: t('calendar.editCalendar.save');
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={handleClose}
|
||||
size={ModalSize.MEDIUM}
|
||||
title={title}
|
||||
rightActions={
|
||||
<>
|
||||
<Button color="neutral" onClick={handleClose} disabled={isLoading}>
|
||||
{t('calendar.event.cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
color="brand"
|
||||
onClick={handleSave}
|
||||
disabled={isLoading || !name.trim()}
|
||||
>
|
||||
{isLoading ? "..." : saveLabel}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="calendar-modal__content">
|
||||
{error && <div className="calendar-modal__error">{error}</div>}
|
||||
|
||||
<Input
|
||||
label={t('calendar.createCalendar.name')}
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
fullWidth
|
||||
/>
|
||||
|
||||
<div className="calendar-modal__field">
|
||||
<label className="calendar-modal__label">
|
||||
{t('calendar.createCalendar.color')}
|
||||
</label>
|
||||
<div className="calendar-modal__colors">
|
||||
{DEFAULT_COLORS.map((c) => (
|
||||
<button
|
||||
key={c}
|
||||
type="button"
|
||||
className={`calendar-modal__color-btn ${
|
||||
color === c ? 'calendar-modal__color-btn--selected' : ''
|
||||
}`}
|
||||
style={{ backgroundColor: c }}
|
||||
onClick={() => setColor(c)}
|
||||
aria-label={c}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TextArea
|
||||
label={t('calendar.createCalendar.description')}
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
rows={2}
|
||||
fullWidth
|
||||
/>
|
||||
|
||||
{/* Share section - only visible in edit mode */}
|
||||
{mode === "edit" && onShare && (
|
||||
<div className="calendar-modal__share-section">
|
||||
<div className="calendar-modal__share-divider" />
|
||||
<label className="calendar-modal__label">
|
||||
<span className="material-icons">person_add</span>
|
||||
{t('calendar.shareCalendar.title')}
|
||||
</label>
|
||||
|
||||
{shareSuccess && (
|
||||
<div className="calendar-modal__success">{shareSuccess}</div>
|
||||
)}
|
||||
{shareError && (
|
||||
<div className="calendar-modal__error">{shareError}</div>
|
||||
)}
|
||||
|
||||
<div className="calendar-modal__share-input-row">
|
||||
<Input
|
||||
label=""
|
||||
value={shareEmail}
|
||||
onChange={(e) => setShareEmail(e.target.value)}
|
||||
placeholder={t('calendar.shareCalendar.emailPlaceholder')}
|
||||
fullWidth
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
handleShare();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
color="brand"
|
||||
onClick={handleShare}
|
||||
disabled={isSharing || !shareEmail.trim()}
|
||||
>
|
||||
{isSharing ? "..." : t('calendar.shareCalendar.share')}
|
||||
</Button>
|
||||
</div>
|
||||
<p className="calendar-modal__share-hint">
|
||||
{t('calendar.shareCalendar.hint')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,40 @@
|
||||
/**
|
||||
* DeleteConfirmModal component.
|
||||
* Confirms calendar deletion.
|
||||
*/
|
||||
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button, Modal, ModalSize } from "@gouvfr-lasuite/cunningham-react";
|
||||
|
||||
import type { DeleteConfirmModalProps } from "./types";
|
||||
|
||||
export const DeleteConfirmModal = ({
|
||||
isOpen,
|
||||
calendarName,
|
||||
onConfirm,
|
||||
onCancel,
|
||||
isLoading,
|
||||
}: DeleteConfirmModalProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={onCancel}
|
||||
size={ModalSize.SMALL}
|
||||
title={t('calendar.deleteCalendar.title')}
|
||||
rightActions={
|
||||
<>
|
||||
<Button color="neutral" onClick={onCancel} disabled={isLoading}>
|
||||
{t('calendar.event.cancel')}
|
||||
</Button>
|
||||
<Button color="error" onClick={onConfirm} disabled={isLoading}>
|
||||
{isLoading ? "..." : t('calendar.deleteCalendar.confirm')}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<p>{t('calendar.deleteCalendar.message', { name: calendarName })}</p>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,210 @@
|
||||
/**
|
||||
* SubscriptionUrlModal component.
|
||||
* Displays the subscription URL for iCal export with copy and regenerate options.
|
||||
*/
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button, Modal, ModalSize } from "@gouvfr-lasuite/cunningham-react";
|
||||
|
||||
import {
|
||||
useCreateSubscriptionToken,
|
||||
useDeleteSubscriptionToken,
|
||||
useSubscriptionToken,
|
||||
} from "../../hooks/useCalendars";
|
||||
|
||||
interface SubscriptionUrlModalProps {
|
||||
isOpen: boolean;
|
||||
caldavPath: string;
|
||||
calendarName: string;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export const SubscriptionUrlModal = ({
|
||||
isOpen,
|
||||
caldavPath,
|
||||
calendarName,
|
||||
onClose,
|
||||
}: SubscriptionUrlModalProps) => {
|
||||
const { t } = useTranslation();
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [showRegenerateConfirm, setShowRegenerateConfirm] = useState(false);
|
||||
const [hasTriedCreate, setHasTriedCreate] = useState(false);
|
||||
|
||||
const { token, tokenError, isLoading } = useSubscriptionToken(caldavPath);
|
||||
const createToken = useCreateSubscriptionToken();
|
||||
const deleteToken = useDeleteSubscriptionToken();
|
||||
|
||||
// Use token from query or from mutation result (whichever is available)
|
||||
const displayToken = token || createToken.data;
|
||||
// Show error from token fetch or from creation failure
|
||||
const hasRealError = tokenError || (createToken.error && hasTriedCreate);
|
||||
const isRegenerating = deleteToken.isPending || createToken.isPending;
|
||||
const showLoading = isLoading || createToken.isPending;
|
||||
|
||||
// Get appropriate error message based on error type
|
||||
const getErrorMessage = (): string => {
|
||||
if (tokenError) {
|
||||
switch (tokenError.type) {
|
||||
case "permission_denied":
|
||||
return t("calendar.subscription.errorPermission");
|
||||
case "network_error":
|
||||
return t("calendar.subscription.errorNetwork");
|
||||
case "server_error":
|
||||
return t("calendar.subscription.errorServer");
|
||||
default:
|
||||
return t("calendar.subscription.error");
|
||||
}
|
||||
}
|
||||
return t("calendar.subscription.error");
|
||||
};
|
||||
|
||||
// Reset hasTriedCreate when modal closes
|
||||
useEffect(() => {
|
||||
if (!isOpen) {
|
||||
setHasTriedCreate(false);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
// Create token on first open if none exists (only try once)
|
||||
// We also try to create if there was an error (404 means no token exists)
|
||||
useEffect(() => {
|
||||
if (
|
||||
isOpen &&
|
||||
!token &&
|
||||
!isLoading &&
|
||||
!createToken.isPending &&
|
||||
!hasTriedCreate
|
||||
) {
|
||||
setHasTriedCreate(true);
|
||||
createToken.mutate({ caldavPath, calendarName });
|
||||
}
|
||||
}, [isOpen, token, isLoading, createToken, caldavPath, calendarName, hasTriedCreate]);
|
||||
|
||||
const handleCopy = async () => {
|
||||
const url = displayToken?.url;
|
||||
if (!url) return;
|
||||
|
||||
try {
|
||||
await navigator.clipboard.writeText(url);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
} catch {
|
||||
// Fallback for older browsers
|
||||
const textArea = document.createElement("textarea");
|
||||
textArea.value = url;
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
document.execCommand("copy");
|
||||
document.body.removeChild(textArea);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRegenerate = async () => {
|
||||
setShowRegenerateConfirm(false);
|
||||
await deleteToken.mutateAsync(caldavPath);
|
||||
await createToken.mutateAsync({ caldavPath, calendarName });
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
isOpen={isOpen && !showRegenerateConfirm}
|
||||
onClose={onClose}
|
||||
size={ModalSize.MEDIUM}
|
||||
title={t("calendar.subscription.title")}
|
||||
rightActions={
|
||||
<Button color="brand" onClick={onClose}>
|
||||
{t("calendar.subscription.close")}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<div className="subscription-modal">
|
||||
<p className="subscription-modal__description">
|
||||
{t("calendar.subscription.description", { name: calendarName })}
|
||||
</p>
|
||||
|
||||
{showLoading ? (
|
||||
<div className="subscription-modal__loading">
|
||||
{t("calendar.subscription.loading")}
|
||||
</div>
|
||||
) : hasRealError && !displayToken ? (
|
||||
<div className="subscription-modal__error">
|
||||
{getErrorMessage()}
|
||||
</div>
|
||||
) : displayToken?.url ? (
|
||||
<>
|
||||
<div className="subscription-modal__url-container">
|
||||
<input
|
||||
type="text"
|
||||
readOnly
|
||||
value={displayToken.url}
|
||||
className="subscription-modal__url-input"
|
||||
onClick={(e) => (e.target as HTMLInputElement).select()}
|
||||
/>
|
||||
<Button
|
||||
color="brand"
|
||||
onClick={handleCopy}
|
||||
disabled={isRegenerating}
|
||||
>
|
||||
{copied
|
||||
? t("calendar.subscription.copied")
|
||||
: t("calendar.subscription.copy")}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="subscription-modal__warning">
|
||||
<span className="material-icons subscription-modal__warning-icon">
|
||||
warning
|
||||
</span>
|
||||
<p>{t("calendar.subscription.warning")}</p>
|
||||
</div>
|
||||
|
||||
<div className="subscription-modal__actions">
|
||||
<Button
|
||||
color="neutral"
|
||||
onClick={() => setShowRegenerateConfirm(true)}
|
||||
disabled={isRegenerating}
|
||||
>
|
||||
{t("calendar.subscription.regenerate")}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
{/* Regenerate confirmation modal */}
|
||||
<Modal
|
||||
isOpen={showRegenerateConfirm}
|
||||
onClose={() => setShowRegenerateConfirm(false)}
|
||||
size={ModalSize.SMALL}
|
||||
title={t("calendar.subscription.regenerateConfirm.title")}
|
||||
rightActions={
|
||||
<>
|
||||
<Button
|
||||
color="neutral"
|
||||
onClick={() => setShowRegenerateConfirm(false)}
|
||||
disabled={isRegenerating}
|
||||
>
|
||||
{t("calendar.event.cancel")}
|
||||
</Button>
|
||||
<Button
|
||||
color="error"
|
||||
onClick={handleRegenerate}
|
||||
disabled={isRegenerating}
|
||||
>
|
||||
{isRegenerating
|
||||
? "..."
|
||||
: t("calendar.subscription.regenerateConfirm.confirm")}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<p>{t("calendar.subscription.regenerateConfirm.message")}</p>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user