Compare commits
1 Commits
main
...
invitation
Author | SHA1 | Date | |
---|---|---|---|
faf0ee4dbd |
12
.github/workflows/playwright.yml
vendored
12
.github/workflows/playwright.yml
vendored
@ -9,6 +9,7 @@ concurrency:
|
||||
cancel-in-progress: true
|
||||
jobs:
|
||||
test:
|
||||
if: false
|
||||
timeout-minutes: 60
|
||||
runs-on: ubuntu-latest
|
||||
container:
|
||||
@ -17,19 +18,14 @@ jobs:
|
||||
- uses: actions/checkout@v4
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version-file: .nvmrc
|
||||
node-version: lts/*
|
||||
- name: Install dependencies
|
||||
run: npm install -g pnpm && pnpm install
|
||||
- name: Build the service that will be tested
|
||||
run: |
|
||||
pnpm run build
|
||||
cp -r public .next/standalone/
|
||||
cp -r .next/static .next/standalone/.next/
|
||||
run: npm run build
|
||||
- name: Install Playwright Browsers
|
||||
run: pnpm exec playwright install --with-deps
|
||||
- name: Run the service that will be tested
|
||||
run: HOSTNAME=127.0.0.1 node .next/standalone/server.js &
|
||||
- name: Wait for the service to be ready
|
||||
run: npx wait-on http://127.0.0.1:3000/default/ --timeout 30000
|
||||
run: npm run start &
|
||||
- name: Run Playwright tests
|
||||
run: pnpm exec playwright test
|
||||
|
@ -1,6 +1,6 @@
|
||||
# Based on https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile
|
||||
|
||||
FROM node:24-alpine AS base
|
||||
FROM node:23-alpine AS base
|
||||
|
||||
# Install dependencies only when needed
|
||||
FROM base AS deps
|
||||
|
@ -1,6 +1,6 @@
|
||||
# Based on https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile
|
||||
|
||||
FROM node:24-alpine AS base
|
||||
FROM node:23-alpine AS base
|
||||
|
||||
# Install dependencies only when needed
|
||||
FROM base AS deps
|
||||
|
@ -14,97 +14,46 @@ import GroupsTable from '@/app/ui/groups/table';
|
||||
import SkeletonTable from '@/app/ui/guests/skeleton-row';
|
||||
import GuestsTable from '@/app/ui/guests/table';
|
||||
import { TabPanel, TabView } from 'primereact/tabview';
|
||||
import { Toast } from 'primereact/toast';
|
||||
import { Suspense, useEffect, useRef, useState } from 'react';
|
||||
import InvitationsBoard from '@/app/ui/invitations/board';
|
||||
import { Invitation, InvitationSerializer } from '@/app/lib/invitation';
|
||||
import { Entity } from '@/app/lib/definitions';
|
||||
import { Suspense, useState } from 'react';
|
||||
|
||||
|
||||
export default function Page() {
|
||||
const [slug, setSlug] = useState<string>("default");
|
||||
|
||||
useEffect(() => {
|
||||
setSlug(getSlug());
|
||||
refreshGroups();
|
||||
refreshGuests();
|
||||
refreshInvitations();
|
||||
}, []);
|
||||
|
||||
const toast = useRef<Toast>(null);
|
||||
|
||||
function refreshGuests() {
|
||||
new AbstractApi<Guest>().getAll(new GuestSerializer(), (objects: Guest[]) => {
|
||||
setGuests(objects);
|
||||
setGuestsLoaded(true);
|
||||
});
|
||||
}
|
||||
|
||||
function refreshGroups() {
|
||||
new AbstractApi<Group>().getAll(new GroupSerializer(), (objects: Group[]) => {
|
||||
setGroups(objects);
|
||||
});
|
||||
}
|
||||
|
||||
function refreshInvitations() {
|
||||
new AbstractApi<Invitation>().getAll(new InvitationSerializer(), (objects: Invitation[]) => {
|
||||
setInvitations(objects);
|
||||
setGroupsLoaded(true);
|
||||
});
|
||||
}
|
||||
|
||||
function resetAffinities() {
|
||||
fetch(`/api/${slug}/groups/affinities/reset`, {
|
||||
fetch(`/api/${getSlug()}/groups/affinities/reset`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'X-CSRF-TOKEN': getCsrfToken(),
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
showAffinitiesResetSuccess();
|
||||
} else {
|
||||
console.error('Failed to reset affinities');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error resetting affinities:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function showAffinitiesResetSuccess() {
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Affinities reset',
|
||||
detail: 'All affinities have been reset to default values.'
|
||||
});
|
||||
}
|
||||
|
||||
const [groupsLoaded, setGroupsLoaded] = useState(false);
|
||||
const [groups, setGroups] = useState<Array<Group>>([]);
|
||||
const [groupBeingEdited, setGroupBeingEdited] = useState<Group | undefined>(undefined);
|
||||
|
||||
const [groupAffinitiesBeingEditted, setGroupAffinitiesBeingEditted] = useState<Group | undefined>(undefined);
|
||||
|
||||
const [guestsLoaded, setGuestsLoaded] = useState(false);
|
||||
const [guests, setGuests] = useState<Array<Guest>>([]);
|
||||
const [guestBeingEdited, setGuestBeingEdited] = useState<Guest | undefined>(undefined);
|
||||
|
||||
const [invitations, setInvitations] = useState<Array<Invitation>>([]);
|
||||
|
||||
function updateList<T extends Entity>(originalList: T[], element: T): T[] {
|
||||
{
|
||||
const index = originalList.findIndex(g => g.id === element?.id);
|
||||
if (index !== -1) {
|
||||
// Replace existing element
|
||||
return [
|
||||
element!,
|
||||
...originalList.slice(0, index),
|
||||
...originalList.slice(index + 1)
|
||||
];
|
||||
} else {
|
||||
// Add new element at the start
|
||||
return [element!, ...originalList];
|
||||
}
|
||||
}
|
||||
}
|
||||
!groupsLoaded && refreshGroups();
|
||||
!guestsLoaded && refreshGuests();
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
@ -115,10 +64,7 @@ export default function Page() {
|
||||
<GuestFormDialog
|
||||
key={guestBeingEdited?.id}
|
||||
groups={groups}
|
||||
onCreate={(newGuest) => {
|
||||
setGuests(guests => updateList(guests, newGuest));
|
||||
setGuestBeingEdited(undefined);
|
||||
}}
|
||||
onCreate={() => { refreshGuests(); setGuestBeingEdited(undefined) }}
|
||||
guest={guestBeingEdited}
|
||||
visible={guestBeingEdited !== undefined}
|
||||
onHide={() => { setGuestBeingEdited(undefined) }}
|
||||
@ -136,7 +82,6 @@ export default function Page() {
|
||||
<div className="flex flex-col w-full items-center justify-between">
|
||||
|
||||
<div>
|
||||
<Toast ref={toast} />
|
||||
<button onClick={() => setGroupBeingEdited({})} className={classNames('primary')}>Add new</button>
|
||||
<button onClick={resetAffinities} className={classNames('yellow')}>Reset affinities</button>
|
||||
</div>
|
||||
@ -144,10 +89,7 @@ export default function Page() {
|
||||
<GroupFormDialog
|
||||
key={groupBeingEdited?.id}
|
||||
groups={groups}
|
||||
onCreate={(newGroup) => {
|
||||
setGroups(groups => updateList(groups, newGroup));
|
||||
setGroupBeingEdited(undefined)
|
||||
}}
|
||||
onCreate={() => { refreshGroups(); setGroupBeingEdited(undefined) }}
|
||||
group={groupBeingEdited}
|
||||
visible={groupBeingEdited !== undefined}
|
||||
onHide={() => { setGroupBeingEdited(undefined) }}
|
||||
@ -170,9 +112,6 @@ export default function Page() {
|
||||
</Suspense>
|
||||
</div>
|
||||
</ TabPanel>
|
||||
<TabPanel header="Invitations" leftIcon="pi pi-envelope mx-2">
|
||||
<InvitationsBoard guests={guests} invitations={invitations} />
|
||||
</TabPanel>
|
||||
</ TabView>
|
||||
</div>
|
||||
|
||||
|
@ -2,41 +2,15 @@
|
||||
|
||||
'use client';
|
||||
|
||||
import { AbstractApi } from '@/app/api/abstract-api';
|
||||
import { TableSimulation, TableSimulationSerializer } from '@/app/lib/tableSimulation';
|
||||
import Arrangement from '@/app/ui/arrangements/arrangement';
|
||||
import React, { useState } from 'react';
|
||||
import ArrangementsTable from '@/app/ui/arrangements/arrangements-table';
|
||||
import { classNames } from '@/app/ui/components/button';
|
||||
import { Toast } from 'primereact/toast';
|
||||
import React, { useRef, useState } from 'react';
|
||||
|
||||
export default function Page() {
|
||||
const toast = useRef<Toast>(null);
|
||||
|
||||
const show = () => {
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Simulation created',
|
||||
detail: 'Table distributions will be calculated shortly, please come back in some minutes'
|
||||
});
|
||||
};
|
||||
|
||||
const [currentArrangement, setCurrentArrangement] = useState<string | null>(null);
|
||||
|
||||
function createSimulation() {
|
||||
const api = new AbstractApi<TableSimulation>();
|
||||
const serializer = new TableSimulationSerializer();
|
||||
api.create(serializer, new TableSimulation(), show);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<div className="flex flex-col w-full items-center justify-between">
|
||||
<Toast ref={toast} />
|
||||
<button onClick={createSimulation} className={classNames('primary')}>Add new</button>
|
||||
</div>
|
||||
|
||||
<ArrangementsTable onArrangementSelected={setCurrentArrangement} />
|
||||
{currentArrangement && <Arrangement key={currentArrangement} id={currentArrangement} />}
|
||||
</>
|
||||
|
@ -1,65 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
'use client'
|
||||
|
||||
import { AbstractApi } from '@/app/api/abstract-api';
|
||||
import { getSlug } from '@/app/lib/utils';
|
||||
import { Website, WebsiteSerializer } from '@/app/lib/website';
|
||||
import { useEffect, useState } from 'react';
|
||||
import Tiptap from '../../../components/Tiptap';
|
||||
|
||||
|
||||
export default function Page() {
|
||||
|
||||
const [website, setWebsite] = useState<Website>()
|
||||
const api = new AbstractApi<Website>();
|
||||
const serializer = new WebsiteSerializer();
|
||||
|
||||
const [slug, setSlug] = useState<string>("default");
|
||||
useEffect(() => { setSlug(getSlug()) }, []);
|
||||
|
||||
const [iframeKey, setIframeKey] = useState<number>(Math.random());
|
||||
|
||||
const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
api.get(serializer, undefined, (loadedWebsite) => {
|
||||
setWebsite(loadedWebsite);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const updateWebsite = (newContent: string) => {
|
||||
// Debounce API update: send after 500ms of no further changes
|
||||
if (timeoutId) {
|
||||
clearTimeout(timeoutId);
|
||||
}
|
||||
|
||||
setTimeoutId(
|
||||
setTimeout(() => {
|
||||
api.update(serializer, new Website('', newContent), () => {
|
||||
setIframeKey(Math.random()); // Change key to force iframe reload
|
||||
});
|
||||
}, 500)
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex">
|
||||
<div className="w-1/2 border rounded-lg p-4">
|
||||
<Tiptap
|
||||
key={website?.content ?? 'empty'}
|
||||
content={website?.content || ''}
|
||||
onUpdate={updateWebsite}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-1/2 border rounded-lg p-4 ml-4">
|
||||
<iframe
|
||||
key={iframeKey}
|
||||
src={`/${slug}/site`}
|
||||
title="Website Preview"
|
||||
className="w-full h-[80vh] rounded"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
@ -16,12 +16,12 @@ export default async function Page() {
|
||||
if (getCsrfToken() == 'unknown') {
|
||||
retrieveCSRFToken();
|
||||
}
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
localStorage.setItem('slug', params.slug);
|
||||
}
|
||||
}, []);
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
localStorage.setItem('slug', await params.slug);
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="flex min-h-screen flex-col p-6">
|
||||
<div className="flex flex-row">
|
||||
|
@ -1,119 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
'use client'
|
||||
|
||||
import { AbstractApi } from "@/app/api/abstract-api";
|
||||
import { Invitation, InvitationSerializer } from "@/app/lib/invitation";
|
||||
import { useParams } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import { FloatLabel } from "primereact/floatlabel";
|
||||
import { Dropdown } from "primereact/dropdown";
|
||||
import { Guest, GuestSerializer, GuestStatus } from "@/app/lib/guest";
|
||||
import { Button } from "primereact/button";
|
||||
|
||||
type FormResponse = {
|
||||
attendance: GuestStatus;
|
||||
};
|
||||
|
||||
function GuestForm({ guest, idx }: { guest: Guest, idx: number }) {
|
||||
const [response, setResponse] = useState<FormResponse>({
|
||||
attendance: guest.status!
|
||||
});
|
||||
|
||||
const [pendingChanges, setPendingChanges] = useState(false);
|
||||
const [sending, setSending] = useState(false);
|
||||
|
||||
console.log('GuestForm response', response.attendance);
|
||||
|
||||
const attendanceOptions: { name: string, code: GuestStatus }[] = [
|
||||
{
|
||||
name: 'Attending',
|
||||
code: 'confirmed'
|
||||
},
|
||||
{
|
||||
name: 'Declined',
|
||||
code: 'declined'
|
||||
},
|
||||
{
|
||||
name: 'Tentative',
|
||||
code: 'tentative'
|
||||
}
|
||||
];
|
||||
|
||||
const api = new AbstractApi<Guest>();
|
||||
const serializer = new GuestSerializer();
|
||||
|
||||
const submitForm = () => {
|
||||
setSending(true);
|
||||
setPendingChanges(false);
|
||||
api.update(serializer, {
|
||||
id: guest.id!,
|
||||
status: response.attendance,
|
||||
}, () => setSending(false));
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={guest.id}
|
||||
className={`px-2 py-6 flex flex-col items-center ${idx !== 0 ? 'border-t border-gray-300' : ''}`}
|
||||
>
|
||||
<h2 className="m-2 text-xl font-semibold">{guest.name}</h2>
|
||||
|
||||
<Dropdown
|
||||
value={response.attendance}
|
||||
options={attendanceOptions}
|
||||
optionLabel="name"
|
||||
optionValue="code"
|
||||
className="rounded-md w-full max-w-xs border border-gray-300"
|
||||
checkmark={true}
|
||||
highlightOnSelect={false}
|
||||
onChange={(e) => {
|
||||
setPendingChanges(true);
|
||||
setResponse({ ...response, attendance: e.value })
|
||||
}}
|
||||
/>
|
||||
|
||||
<Button
|
||||
label="Save"
|
||||
icon="pi pi-save"
|
||||
loading={sending}
|
||||
onClick={submitForm}
|
||||
disabled={!pendingChanges || sending}
|
||||
className="mt-4 max-w-xs"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Page() {
|
||||
const params = useParams<{ slug: string, id: string }>()
|
||||
|
||||
const [invitation, setInvitation] = useState<Invitation>();
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem('slug', params.slug);
|
||||
|
||||
const api = new AbstractApi<Invitation>();
|
||||
const serializer = new InvitationSerializer();
|
||||
|
||||
api.get(serializer, params.id, (invitation: Invitation) => {
|
||||
setInvitation(invitation);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center">
|
||||
<h1 className="text-2xl font-bold mb-4">Invitation</h1>
|
||||
{invitation ? (
|
||||
<div>
|
||||
<p>We have reserved {invitation.guests.length} seats in your honor. Please, confirm attendance submitting the following form:</p>
|
||||
{invitation.guests.map((guest, idx) => (
|
||||
<GuestForm key={guest.id} guest={guest} idx={idx} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p>Loading...</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
@ -1,41 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
import SideNav from '@/app/ui/dashboard/sidenav';
|
||||
import Image from 'next/image';
|
||||
|
||||
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="flex h-screen flex-col">
|
||||
<div className="w-full lg:h-72 h-36 relative">
|
||||
<Image
|
||||
src="/header.png"
|
||||
alt="Header"
|
||||
fill
|
||||
style={{ objectFit: 'cover', objectPosition: 'center', zIndex: 0 }}
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-grow flex items-center justify-center lg:p-24 py-8 bg-[#e1d5c7] relative">
|
||||
<div className="absolute left-1/2 lg:top-24 top-8 z-10 -translate-x-1/2 -translate-y-1/2 flex justify-center w-full pointer-events-none w-12 h-12 lg:w-24 lg:h-24">
|
||||
<Image
|
||||
src="/stamp.png"
|
||||
alt="Stamp"
|
||||
width={120}
|
||||
height={120}
|
||||
className="object-contain"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="max-w-4xl w-full h-full bg-[#f9f9f7] shadow-lg">
|
||||
<div
|
||||
className="max-w-4xl lg:m-6 m-3 lg:px-6 px-3 lg:py-24 py-2 border-2 border-[#d3d3d1] rounded-xl text-[#958971] flex justify-center"
|
||||
style={{ height: 'calc(100% - 3rem)' }}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
@ -1,34 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
'use client'
|
||||
|
||||
import { AbstractApi } from '@/app/api/abstract-api';
|
||||
import { Website, WebsiteSerializer } from '@/app/lib/website';
|
||||
import { useState, useEffect } from 'react';
|
||||
import DOMPurify from "dompurify";
|
||||
import { useParams } from 'next/navigation';
|
||||
|
||||
export default function Page() {
|
||||
const params = useParams<{ slug: string }>()
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window !== 'undefined') {
|
||||
localStorage.setItem('slug', params.slug);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const [websiteContent, setWebsiteContent] = useState<string>("");
|
||||
|
||||
const api = new AbstractApi<Website>();
|
||||
const serializer = new WebsiteSerializer();
|
||||
|
||||
useEffect(() => {
|
||||
api.get(serializer, undefined, (loadedWebsite) => {
|
||||
setWebsiteContent(loadedWebsite.content || "");
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(websiteContent) }} />
|
||||
);
|
||||
}
|
@ -4,9 +4,9 @@ import { Entity } from '@/app/lib/definitions';
|
||||
import { getCsrfToken, getSlug } from '@/app/lib/utils';
|
||||
|
||||
export interface Api<T extends Entity> {
|
||||
getAll(serializable: Serializable<T>, callback: (objets: T[]) => void): void;
|
||||
getAll(serializable: Serializable<T> ,callback: (objets: T[]) => void): void;
|
||||
get(serializable: Serializable<T>, id: string, callback: (object: T) => void): void;
|
||||
create(serializable: Serializable<T>, object: T, callback: (object: T) => void): void;
|
||||
create(serializable: Serializable<T>, object: T, callback: () => void): void;
|
||||
update(serializable: Serializable<T>, object: T, callback: () => void): void;
|
||||
destroy(serializable: Serializable<T>, object: T, callback: () => void): void;
|
||||
}
|
||||
@ -30,9 +30,8 @@ export class AbstractApi<T extends Entity> implements Api<T> {
|
||||
});
|
||||
}
|
||||
|
||||
get(serializable: Serializable<T>, id: (string | undefined), callback: (object: T) => void): void {
|
||||
const endpoint = id ? `/api/${getSlug()}/${serializable.apiPath()}/${id}` : `/api/${getSlug()}/${serializable.apiPath()}`;
|
||||
fetch(endpoint)
|
||||
get(serializable: Serializable<T>, id: string, callback: (object: T) => void): void {
|
||||
fetch(`/api/${getSlug()}/${serializable.apiPath()}/${id}`)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
callback(serializable.fromJson(data));
|
||||
@ -41,38 +40,27 @@ export class AbstractApi<T extends Entity> implements Api<T> {
|
||||
});
|
||||
}
|
||||
|
||||
update(serializable: Serializable<T>, object: T, callback: (updatedObject: T) => void): void {
|
||||
const endpoint = object.id ? `/api/${getSlug()}/${serializable.apiPath()}/${object.id}` : `/api/${getSlug()}/${serializable.apiPath()}`;
|
||||
|
||||
fetch(endpoint, {
|
||||
update(serializable: Serializable<T>, object: T, callback: () => void): void {
|
||||
fetch(`/api/${getSlug()}/${serializable.apiPath()}/${object.id}`, {
|
||||
method: 'PUT',
|
||||
body: serializable.toJson(object),
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
'X-CSRF-TOKEN': getCsrfToken(),
|
||||
}
|
||||
}).then((response) => response.json())
|
||||
.then((data) => {
|
||||
callback(serializable.fromJson(data));
|
||||
})
|
||||
}).then(callback)
|
||||
.catch((error) => console.error(error));
|
||||
}
|
||||
|
||||
create(serializable: Serializable<T>, object: T, callback: (createdObject: T) => void): void {
|
||||
create(serializable: Serializable<T>, object: T, callback: () => void): void {
|
||||
fetch(`/api/${getSlug()}/${serializable.apiPath()}`, {
|
||||
method: 'POST',
|
||||
body: serializable.toJson(object),
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
'X-CSRF-TOKEN': getCsrfToken(),
|
||||
}
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
callback(serializable.fromJson(data));
|
||||
})
|
||||
}).then(callback)
|
||||
.catch((error) => console.error(error));
|
||||
}
|
||||
|
||||
|
@ -12,7 +12,6 @@ export function loadTableSimulations(onLoad?: (tableSimulations: TableArrangemen
|
||||
id: record.id,
|
||||
name: record.name,
|
||||
discomfort: record.discomfort,
|
||||
valid: record.valid,
|
||||
});
|
||||
}));
|
||||
}, (error) => {
|
||||
|
@ -1,22 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
'use client'
|
||||
|
||||
import { useEditor, EditorContent } from '@tiptap/react'
|
||||
import StarterKit from '@tiptap/starter-kit'
|
||||
|
||||
const Tiptap = ({ content, onUpdate }: { content: string, onUpdate: (newContent:string) => void }) => {
|
||||
|
||||
const editor = useEditor({
|
||||
extensions: [StarterKit],
|
||||
content: content || '<p>Type something here...</p>',
|
||||
onUpdate({ editor }) {
|
||||
onUpdate(editor.getHTML());
|
||||
},
|
||||
immediatelyRender: false,
|
||||
})
|
||||
|
||||
return <EditorContent editor={editor} />
|
||||
}
|
||||
|
||||
export default Tiptap
|
@ -12,8 +12,7 @@ export type TableArrangement = {
|
||||
number: number;
|
||||
name: string;
|
||||
guests?: Guest[];
|
||||
discomfort?: number;
|
||||
valid?: boolean;
|
||||
discomfort?: number
|
||||
}
|
||||
|
||||
export type User = {
|
||||
|
@ -2,7 +2,6 @@
|
||||
|
||||
import { Serializable } from "../api/abstract-api";
|
||||
import { Entity } from "./definitions";
|
||||
import { Group } from "./group";
|
||||
|
||||
export const guestStatuses = ['considered', 'invited', 'confirmed', 'declined', 'tentative'] as const;
|
||||
export type GuestStatus = typeof guestStatuses[number];
|
||||
@ -10,28 +9,32 @@ export type GuestStatus = typeof guestStatuses[number];
|
||||
export class Guest implements Entity {
|
||||
id?: string;
|
||||
name?: string;
|
||||
group_name?: string;
|
||||
groupId?: string;
|
||||
color?: string;
|
||||
status?: GuestStatus;
|
||||
children?: Guest[];
|
||||
group?: Group;
|
||||
invitationId?: string;
|
||||
|
||||
constructor(id?: string, name?: string, color?: string, status?: GuestStatus, children?: Guest[], Group?: Group) {
|
||||
constructor(id?: string, name?: string, group_name?: string, groupId?: string, color?: string, status?: GuestStatus, children?: Guest[], invitationId?: string) {
|
||||
this.id = id;
|
||||
this.name = name;
|
||||
this.group_name = group_name;
|
||||
this.groupId = groupId;
|
||||
this.color = color;
|
||||
this.status = status;
|
||||
this.children = children;
|
||||
this.group = Group;
|
||||
this.invitationId = invitationId;
|
||||
}
|
||||
}
|
||||
|
||||
export class GuestSerializer implements Serializable<Guest> {
|
||||
fromJson(data: any): Guest {
|
||||
return new Guest(data.id, data.name, data.color, data.status, data.children, new Group(data.group?.id, data.group?.name));
|
||||
return new Guest(data.id, data.name, data.group?.name, data.group?.id, data.color, data.status, data.children, data.invitation_id);
|
||||
}
|
||||
|
||||
toJson(guest: Guest): string {
|
||||
return JSON.stringify({ guest: { name: guest.name, status: guest.status, group_id: guest.group?.id } });
|
||||
return JSON.stringify({ guest: { name: guest.name, status: guest.status, group_id: guest.groupId } });
|
||||
}
|
||||
|
||||
apiPath(): string {
|
||||
|
@ -1,28 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
import { Entity } from "./definitions";
|
||||
import { Guest } from "./guest";
|
||||
|
||||
export class Invitation implements Entity {
|
||||
id?: string;
|
||||
guests: Array<Guest>;
|
||||
|
||||
constructor(id?: string, guests: Array<Guest> = []) {
|
||||
this.id = id;
|
||||
this.guests = guests;
|
||||
}
|
||||
}
|
||||
|
||||
export class InvitationSerializer {
|
||||
fromJson(data: any): Invitation {
|
||||
return new Invitation(data.id, (data.guests || []).map((guest: any) => new Guest(guest.id, guest.name, guest.color, guest.status, guest.children)));
|
||||
}
|
||||
|
||||
toJson(invitation: Invitation): string {
|
||||
return JSON.stringify({ invitation: { guest_ids: invitation.guests.map(guest => guest.id) } });
|
||||
}
|
||||
|
||||
apiPath(): string {
|
||||
return 'invitations';
|
||||
}
|
||||
}
|
@ -2,7 +2,6 @@
|
||||
|
||||
import { Serializable } from "../api/abstract-api";
|
||||
import { Entity } from "./definitions";
|
||||
import { Group } from "./group";
|
||||
import { Guest } from "./guest";
|
||||
|
||||
export type Discomfort = {
|
||||
@ -20,12 +19,12 @@ export type Table = {
|
||||
}
|
||||
|
||||
export class TableSimulation implements Entity {
|
||||
id?: string;
|
||||
id: string;
|
||||
tables: Table[];
|
||||
|
||||
constructor(id?: string, tables?: Table[]) {
|
||||
constructor(id: string, tables: Table[]) {
|
||||
this.id = id;
|
||||
this.tables = tables || [];
|
||||
this.tables = tables;
|
||||
}
|
||||
}
|
||||
|
||||
@ -34,7 +33,7 @@ export class TableSimulationSerializer implements Serializable<TableSimulation>
|
||||
return new TableSimulation(data.id, data.tables.map((table: any) => {
|
||||
return {
|
||||
number: table.number,
|
||||
guests: table.guests.map((guest: any) => new Guest(guest.id, guest.name, guest.color, guest.status, [], guest.group)),
|
||||
guests: table.guests.map((guest: any) => new Guest(guest.id, guest.name, guest.group?.name, guest.group?.id, guest.color)),
|
||||
discomfort: {
|
||||
discomfort: table.discomfort.discomfort,
|
||||
breakdown: {
|
||||
@ -54,10 +53,10 @@ export class TableSimulationSerializer implements Serializable<TableSimulation>
|
||||
return {
|
||||
id: guest.id,
|
||||
name: guest.name,
|
||||
group_id: guest.groupId,
|
||||
color: guest.color,
|
||||
status: guest.status,
|
||||
children: guest.children,
|
||||
group: new Group(guest.group?.id, guest.group?.name)
|
||||
}
|
||||
}),
|
||||
discomfort: table.discomfort,
|
||||
|
@ -1,30 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
import { Serializable } from "../api/abstract-api";
|
||||
import { Entity } from "./definitions";
|
||||
|
||||
|
||||
export class Website implements Entity {
|
||||
id?: string;
|
||||
content?: string;
|
||||
|
||||
constructor(id: string, content: string) {
|
||||
this.id = id;
|
||||
this.content = content;
|
||||
}
|
||||
}
|
||||
|
||||
export class WebsiteSerializer implements Serializable<Website> {
|
||||
fromJson(data: any): Website {
|
||||
return new Website("", data.content);
|
||||
}
|
||||
|
||||
toJson(website: Website): string {
|
||||
return JSON.stringify({ website: { content: website.content } });
|
||||
}
|
||||
|
||||
apiPath(): string {
|
||||
return 'website';
|
||||
}
|
||||
}
|
||||
|
@ -5,6 +5,7 @@
|
||||
import { AbstractApi } from '@/app/api/abstract-api';
|
||||
import { TableArrangement } from '@/app/lib/definitions';
|
||||
import { TableSimulation, TableSimulationSerializer } from '@/app/lib/tableSimulation';
|
||||
import { getSlug } from '@/app/lib/utils';
|
||||
import { Table } from '@/app/ui/components/table';
|
||||
import { lusitana } from '@/app/ui/fonts';
|
||||
import { useState, useEffect } from 'react';
|
||||
|
@ -7,57 +7,42 @@ import { TableArrangement } from '@/app/lib/definitions';
|
||||
import { classNames } from "../components/button";
|
||||
import TableOfContents from "../components/table-of-contents";
|
||||
import { loadTableSimulations } from "@/app/api/tableSimulations";
|
||||
import { ArchiveBoxXMarkIcon, CheckBadgeIcon } from "@heroicons/react/24/outline";
|
||||
import { Tooltip } from "primereact/tooltip";
|
||||
import clsx from "clsx";
|
||||
|
||||
export default function ArrangementsTable({ onArrangementSelected }: { onArrangementSelected: (arrangementId: string) => void }) {
|
||||
const [arrangements, setArrangements] = useState<Array<TableArrangement>>([]);
|
||||
const [arrangementsLoaded, setArrangementsLoaded] = useState(false);
|
||||
export default function ArrangementsTable ({onArrangementSelected}: {onArrangementSelected: (arrangementId: string) => void}) {
|
||||
const [arrangements, setArrangements] = useState<Array<TableArrangement>>([]);
|
||||
const [arrangementsLoaded, setArrangementsLoaded] = useState(false);
|
||||
|
||||
function refreshSimulations() {
|
||||
loadTableSimulations((arrangements) => {
|
||||
setArrangements(arrangements);
|
||||
setArrangementsLoaded(true);
|
||||
});
|
||||
}
|
||||
function refreshSimulations() {
|
||||
loadTableSimulations((arrangements) => {
|
||||
setArrangements(arrangements);
|
||||
setArrangementsLoaded(true);
|
||||
});
|
||||
}
|
||||
|
||||
function arrangementClicked(e: React.MouseEvent<HTMLElement>) {
|
||||
onArrangementSelected(e.currentTarget.getAttribute('data-arrangement-id') || '');
|
||||
}
|
||||
function arrangementClicked(e: React.MouseEvent<HTMLElement>) {
|
||||
onArrangementSelected(e.currentTarget.getAttribute('data-arrangement-id') || '');
|
||||
}
|
||||
|
||||
!arrangementsLoaded && refreshSimulations();
|
||||
!arrangementsLoaded && refreshSimulations();
|
||||
|
||||
return (
|
||||
<TableOfContents
|
||||
headers={['Name', 'Discomfort', 'Actions', 'Status']}
|
||||
caption='Simulations'
|
||||
elements={arrangements}
|
||||
rowRender={(arrangement) => (
|
||||
<tr key={arrangement.id} className={clsx("border-b", {
|
||||
"bg-white odd:bg-white even:bg-gray-50": arrangement.valid,
|
||||
"bg-red-50 odd:bg-red-50 even:bg-red-100": !arrangement.valid
|
||||
})}>
|
||||
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
|
||||
{arrangement.name}
|
||||
</th>
|
||||
<td className="px-6 py-4">
|
||||
{arrangement.discomfort}
|
||||
</td>
|
||||
<td>
|
||||
<button data-arrangement-id={arrangement.id} onClick={arrangementClicked} className={classNames('primary')}>Load</button>
|
||||
</td>
|
||||
<td>
|
||||
<Tooltip target=".tooltip-status" />
|
||||
|
||||
{
|
||||
arrangement.valid ?
|
||||
<CheckBadgeIcon className='size-6 tooltip-status' data-pr-position="right" data-pr-tooltip="Simulation is valid" /> :
|
||||
<ArchiveBoxXMarkIcon className='size-6 tooltip-status' data-pr-position="right" data-pr-tooltip="Simulation is expired due to attendance or affinity changes" />
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
return(
|
||||
<TableOfContents
|
||||
headers={['Name', 'Discomfort', 'Actions']}
|
||||
caption='Simulations'
|
||||
elements={arrangements}
|
||||
rowRender={(arrangement) => (
|
||||
<tr key={arrangement.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
|
||||
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
{arrangement.name}
|
||||
</th>
|
||||
<td className="px-6 py-4">
|
||||
{arrangement.discomfort}
|
||||
</td>
|
||||
<td>
|
||||
<button data-arrangement-id={arrangement.id} onClick={arrangementClicked} className={classNames('primary')}>Load</button>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
@ -14,7 +14,7 @@ import { useState } from 'react';
|
||||
|
||||
export default function GroupFormDialog({ groups, onCreate, onHide, group, visible }: {
|
||||
groups: Group[],
|
||||
onCreate?: (newGroup: Group) => void,
|
||||
onCreate?: () => void,
|
||||
onHide: () => void,
|
||||
group?: Group,
|
||||
visible: boolean,
|
||||
@ -46,15 +46,15 @@ export default function GroupFormDialog({ groups, onCreate, onHide, group, visib
|
||||
group.color = color;
|
||||
group.parentId = parentId;
|
||||
|
||||
api.update(serializer, group, (newGroup) => {
|
||||
api.update(serializer, group, () => {
|
||||
resetForm();
|
||||
onCreate && onCreate(newGroup);
|
||||
onCreate && onCreate();
|
||||
});
|
||||
} else {
|
||||
|
||||
api.create(serializer, new Group(undefined, name, undefined, icon, undefined, parentId, color), (newGroup) => {
|
||||
api.create(serializer, new Group(undefined, name, undefined, icon, undefined, parentId, color), () => {
|
||||
resetForm();
|
||||
onCreate && onCreate(newGroup);
|
||||
onCreate && onCreate();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -15,14 +15,14 @@ import { useState } from 'react';
|
||||
|
||||
export default function GuestFormDialog({ groups, onCreate, onHide, guest, visible }: {
|
||||
groups: Group[],
|
||||
onCreate?: (guest: Guest) => void,
|
||||
onCreate?: () => void,
|
||||
onHide: () => void,
|
||||
guest?: Guest,
|
||||
visible: boolean,
|
||||
}) {
|
||||
|
||||
const [name, setName] = useState(guest?.name || '');
|
||||
const [group, setGroup] = useState(guest?.group?.id || null);
|
||||
const [group, setGroup] = useState(guest?.groupId || null);
|
||||
const [status, setStatus] = useState<GuestStatus | null>(guest?.status || null);
|
||||
|
||||
const api = new AbstractApi<Guest>();
|
||||
@ -41,17 +41,17 @@ export default function GuestFormDialog({ groups, onCreate, onHide, guest, visib
|
||||
|
||||
if (guest?.id !== undefined) {
|
||||
guest.name = name;
|
||||
guest.group!.id = group;
|
||||
guest.groupId = group;
|
||||
guest.status = status;
|
||||
|
||||
api.update(serializer, guest, (updatedGuest) => {
|
||||
api.update(serializer, guest, () => {
|
||||
resetForm();
|
||||
onCreate && onCreate(updatedGuest);
|
||||
onCreate && onCreate();
|
||||
});
|
||||
} else {
|
||||
api.create(serializer, new Guest(undefined, name, undefined, status, [], groups.find((g) => g.id === group)), (newGuest)=> {
|
||||
api.create(serializer, new Guest(undefined, name, undefined, group, undefined, status), ()=> {
|
||||
resetForm();
|
||||
onCreate && onCreate(newGuest);
|
||||
onCreate && onCreate();
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -62,8 +62,8 @@ export default function GuestFormDialog({ groups, onCreate, onHide, guest, visib
|
||||
<Dialog header="Add guest" visible={visible} style={{ width: '60vw' }} onHide={onHide}>
|
||||
<div className="card flex justify-evenly py-5">
|
||||
<FloatLabel>
|
||||
<InputText id="name" className='rounded-sm' value={name} onChange={(e) => setName(e.target.value)} />
|
||||
<label htmlFor="name">Name</label>
|
||||
<InputText id="username" className='rounded-sm' value={name} onChange={(e) => setName(e.target.value)} />
|
||||
<label htmlFor="username">Username</label>
|
||||
</FloatLabel>
|
||||
<FloatLabel>
|
||||
<Dropdown id="group" className='rounded-sm min-w-32' value={group} onChange={(e) => setGroup(e.target.value)} options={
|
||||
|
@ -15,9 +15,6 @@ export default function LoginForm() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
|
||||
const [slug, setSlug] = useState<string>("default");
|
||||
useEffect(() => {setSlug(getSlug())}, []);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const [currentUser, setCurrentUser] = useState<User | null>(null);
|
||||
@ -44,7 +41,7 @@ export default function LoginForm() {
|
||||
password: password,
|
||||
onLogin: (user) => {
|
||||
setCurrentUser(user);
|
||||
router.push(`${slug}/dashboard`)
|
||||
router.push(`${getSlug()}/dashboard`)
|
||||
}
|
||||
})}>
|
||||
Sign in
|
||||
|
@ -17,9 +17,7 @@ export default function RegistrationForm() {
|
||||
const [email, setEmail] = useState<string>("");
|
||||
const [password, setPassword] = useState<string>("");
|
||||
const [passwordConfirmation, setPasswordConfirmation] = useState<string>("");
|
||||
|
||||
const [slug, setSlug] = useState<string>("default");
|
||||
useEffect(() => { setSlug(getSlug()) }, []);
|
||||
const [slug, setSlug] = useState<string>(getSlug());
|
||||
|
||||
const [captchaId, setCaptchaId] = useState<string>("");
|
||||
const [captchaUrl, setCaptchaUrl] = useState<string>("");
|
||||
|
@ -6,30 +6,24 @@ import {
|
||||
UserGroupIcon,
|
||||
RectangleGroupIcon,
|
||||
BanknotesIcon,
|
||||
GlobeAltIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import clsx from 'clsx';
|
||||
import { getSlug } from '@/app/lib/utils';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
// Map of links to display in the side navigation.
|
||||
// Depending on the size of the application, this would be stored in a database.
|
||||
const links = [
|
||||
{ name: 'Guests', href: `/${getSlug()}/dashboard/guests`, icon: UserGroupIcon },
|
||||
{ name: 'Expenses', href: `/${getSlug()}/dashboard/expenses`, icon: BanknotesIcon },
|
||||
{ name: 'Table distributions', href: `/${getSlug()}/dashboard/tables`, icon: RectangleGroupIcon },
|
||||
];
|
||||
|
||||
|
||||
export default function NavLinks() {
|
||||
const pathname = usePathname();
|
||||
|
||||
const [slug, setSlug] = useState<string>("default");
|
||||
useEffect(() => { setSlug(getSlug()) }, []);
|
||||
|
||||
const links = [
|
||||
{ name: 'Guests', href: `/${slug}/dashboard/guests`, icon: UserGroupIcon },
|
||||
{ name: 'Expenses', href: `/${slug}/dashboard/expenses`, icon: BanknotesIcon },
|
||||
{ name: 'Table distributions', href: `/${slug}/dashboard/tables`, icon: RectangleGroupIcon },
|
||||
{ name: 'Website builder', href: `/${slug}/dashboard/website`, icon: GlobeAltIcon },
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
{links.map((link) => {
|
||||
|
@ -9,23 +9,15 @@ import { gloriaHallelujah } from '@/app/ui/fonts';
|
||||
import { logout } from '@/app/api/authentication';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { getSlug } from '@/app/lib/utils';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export default function SideNav() {
|
||||
const router = useRouter();
|
||||
|
||||
const [slug, setSlug] = useState<string>("default");
|
||||
useEffect(() => { setSlug(getSlug()) }, []);
|
||||
|
||||
const [currentUser, setCurrentUser] = useState<{ email: string } | null>(null);
|
||||
useEffect(() => { setCurrentUser(JSON.parse(localStorage.getItem('currentUser') || '{}')) }, []);
|
||||
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col px-3 py-4 md:px-2">
|
||||
<Link
|
||||
className="mb-2 flex h-20 items-center justify-start rounded-md bg-blue-600 p-4 md:h-20"
|
||||
href={`/${slug}/dashboard`}
|
||||
href={`/${getSlug()}/dashboard`}
|
||||
>
|
||||
<div className={`${gloriaHallelujah.className} "w-32 text-white md:w-40 antialiased`}>
|
||||
<h1>Wedding Planner</h1>
|
||||
@ -34,14 +26,14 @@ export default function SideNav() {
|
||||
<div className="flex grow flex-row justify-between space-x-2 md:flex-col md:space-x-0 md:space-y-2">
|
||||
<NavLinks />
|
||||
<div className="hidden h-auto w-full grow rounded-md bg-gray-50 md:block"></div>
|
||||
<span>Logged in as {currentUser?.email}</span>
|
||||
<span>Logged in as {JSON.parse(localStorage.getItem('currentUser') || '{}').email}</span>
|
||||
<button
|
||||
className="flex h-[48px] w-full grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3"
|
||||
onClick={() => {
|
||||
logout({
|
||||
onLogout: () => {
|
||||
localStorage.clear();
|
||||
router.push(`/${slug}`);
|
||||
router.push(`/${getSlug()}`);
|
||||
}
|
||||
});
|
||||
}}
|
||||
|
@ -21,12 +21,7 @@ export default function GroupsTable({ groups, onUpdate, onEdit, onEditAffinities
|
||||
|
||||
const actions = (group: Group) => (
|
||||
<div className="flex flex-row items-center">
|
||||
<TrashIcon className='size-6 cursor-pointer' onClick={() => {
|
||||
if (window.confirm(`Are you sure you want to delete guest "${group.name}"?`)) {
|
||||
api.destroy(serializer, group, onUpdate)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<TrashIcon className='size-6 cursor-pointer' onClick={() => { api.destroy(serializer, group, onUpdate) }} />
|
||||
<PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(group)} />
|
||||
<AdjustmentsHorizontalIcon className='size-6 cursor-pointer' onClick={() => onEditAffinities(group)} />
|
||||
</div>
|
||||
|
@ -4,8 +4,9 @@
|
||||
|
||||
import { AbstractApi } from '@/app/api/abstract-api';
|
||||
import { Guest, GuestSerializer } from '@/app/lib/guest';
|
||||
import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
|
||||
import { EnvelopeIcon, FunnelIcon, PencilIcon, TrashIcon, UserPlusIcon } from '@heroicons/react/24/outline';
|
||||
import clsx from 'clsx';
|
||||
import { useState } from 'react';
|
||||
import TableOfContents from '../components/table-of-contents';
|
||||
|
||||
export default function guestsTable({ guests, onUpdate, onEdit }: {
|
||||
@ -16,22 +17,40 @@ export default function guestsTable({ guests, onUpdate, onEdit }: {
|
||||
|
||||
const api = new AbstractApi<Guest>();
|
||||
const serializer = new GuestSerializer();
|
||||
const [invitationId, setInvitationId] = useState<string | undefined>(undefined);
|
||||
const [selecting, setSelecting] = useState<boolean>(false);
|
||||
|
||||
function toggleInvitationId(id: string | undefined) {
|
||||
console.log('toggleInvitationId', id, invitationId);
|
||||
|
||||
if (id === invitationId) {
|
||||
setInvitationId(undefined);
|
||||
} else {
|
||||
setInvitationId(id);
|
||||
}
|
||||
|
||||
console.log('invitationId', invitationId);
|
||||
}
|
||||
|
||||
return (
|
||||
<TableOfContents
|
||||
headers={['Name', 'Group', 'Status', 'Actions']}
|
||||
headers={['Name', 'Group', 'Status', 'Invitation', 'Actions']}
|
||||
caption='Guests'
|
||||
elements={guests}
|
||||
rowRender={(guest) => (
|
||||
<tr key={guest.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
|
||||
<td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
<tr key={guest.id} className={clsx("bg-white odd:bg-white even:bg-gray-50 border-b", {
|
||||
"opacity-25": invitationId && !selecting && guest.invitationId !== invitationId,
|
||||
"hover:bg-emerald-100" : selecting && guest.invitationId !== invitationId && guest.status !== 'considered',
|
||||
"opacity-25 hover:cursor-not-allowed" : selecting && (guest.invitationId === invitationId || guest.status === 'considered')
|
||||
})} >
|
||||
<td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
|
||||
{guest.name}
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
{guest.group?.name}
|
||||
{guest.group_name}
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className="flex items-center text-sm dark:text-white me-3">
|
||||
<span className="flex items-center text-sm me-3">
|
||||
<span className={clsx(
|
||||
'flex w-2.5 h-2.5 rounded-full me-1.5 flex-shrink-0',
|
||||
{
|
||||
@ -46,15 +65,21 @@ export default function guestsTable({ guests, onUpdate, onEdit }: {
|
||||
{guest.status}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
{
|
||||
guest.invitationId &&
|
||||
<div className="flex">
|
||||
{!selecting && <FunnelIcon className='size-6 cursor-pointer' onClick={() => toggleInvitationId(guest?.invitationId)} />}
|
||||
{ invitationId === guest.invitationId && !selecting && <UserPlusIcon className='size-6 cursor-pointer' onClick={() => setSelecting(!selecting)}/>}
|
||||
{ selecting && invitationId !== guest.invitationId && <UserPlusIcon className='size-6 cursor-pointer' />}
|
||||
</div>
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
<div className="flex flex-row items-center">
|
||||
<TrashIcon className='size-6 cursor-pointer' onClick={() => {
|
||||
if (window.confirm(`Are you sure you want to delete guest "${guest.name}"?`)) {
|
||||
api.destroy(serializer, guest, onUpdate)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<TrashIcon className='size-6 cursor-pointer' onClick={() => { api.destroy(serializer, guest, onUpdate) }} />
|
||||
<PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(guest)} />
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -1,197 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { AbstractApi } from "@/app/api/abstract-api";
|
||||
import { Guest } from "@/app/lib/guest";
|
||||
import { Invitation, InvitationSerializer } from "@/app/lib/invitation";
|
||||
import { getSlug } from "@/app/lib/utils";
|
||||
import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
||||
import { LinkIcon, TrashIcon } from "@heroicons/react/24/outline";
|
||||
import { useEffect, useRef } from "react";
|
||||
import { useState } from "react";
|
||||
|
||||
function InvitationCard({ invitation, allGuests, onGuestAdded, onDestroy }: {
|
||||
invitation: Invitation,
|
||||
allGuests: Guest[],
|
||||
onGuestAdded: (guest: Guest) => void,
|
||||
onDestroy: (invitation: Invitation) => void
|
||||
}
|
||||
) {
|
||||
const [guests, setGuests] = useState<Guest[]>(invitation.guests);
|
||||
|
||||
const ref = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
const api = new AbstractApi<Invitation>();
|
||||
const serializer = new InvitationSerializer();
|
||||
|
||||
const iconClassName = "w-5 h-5 text-white absolute top-2 opacity-0 group-hover:opacity-100 cursor-pointer";
|
||||
|
||||
useEffect(() => {
|
||||
if (ref.current) {
|
||||
return dropTargetForElements({
|
||||
element: ref.current,
|
||||
onDrop: (data) => {
|
||||
const guestId = data.source.element.dataset.guestId;
|
||||
if (guestId) {
|
||||
const guestToAdd = allGuests.find((guest) => guest.id === guestId);
|
||||
if (guestToAdd) {
|
||||
setGuests((prevGuests) => [...prevGuests, guestToAdd]);
|
||||
invitation.guests.push(guestToAdd);
|
||||
|
||||
api.update(serializer, invitation, () => {
|
||||
onGuestAdded(guestToAdd);
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={invitation.id}
|
||||
ref={ref}
|
||||
className="relative flex items-center justify-center w-full bg-green-800 border border-green-900 group"
|
||||
style={{ aspectRatio: "1.618 / 1" }}
|
||||
>
|
||||
<LinkIcon
|
||||
className={`${iconClassName} right-8`}
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(`https://${window.location.host}/${getSlug()}/site/invitation/${invitation.id}`);
|
||||
}}
|
||||
/>
|
||||
<TrashIcon
|
||||
className={`${iconClassName} right-2`}
|
||||
onClick={() => {
|
||||
if (window.confirm("Are you sure you want to delete this invitation?")) {
|
||||
api.destroy(serializer, invitation, () => {
|
||||
onDestroy(invitation);
|
||||
});
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
{guests.length === 0 ? (
|
||||
<p className="text-center text-yellow-500 text-lg italic">
|
||||
(empty invitation)
|
||||
</p>
|
||||
) : (
|
||||
<ul className="text-center text-yellow-500 text-lg">
|
||||
{guests.map((guest) => (
|
||||
<li key={guest.id}>{guest.name}</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function GuestCard(guest: Guest) {
|
||||
const ref = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (ref.current) {
|
||||
return draggable({
|
||||
element: ref.current,
|
||||
});
|
||||
}
|
||||
}, [guest.id]);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={guest.id}
|
||||
ref={ref}
|
||||
className="mb-4 p-4 border border-gray-300 rounded-lg shadow-sm bg-white cursor-move"
|
||||
draggable="true"
|
||||
data-guest-id={guest.id}>
|
||||
<h3 className="text-md font-medium">{guest.name}</h3>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function InvitationsBoard({ guests, invitations: originalInvitations }: {
|
||||
guests: Array<Guest>,
|
||||
invitations: Array<Invitation>
|
||||
}) {
|
||||
const api = new AbstractApi<Invitation>();
|
||||
const serializer = new InvitationSerializer();
|
||||
|
||||
const [invitations, setInvitations] = useState<Invitation[]>(originalInvitations);
|
||||
const [unassignedGuests, setUnassignedGuests] = useState<Guest[]>(
|
||||
guests.filter(
|
||||
(guest) =>
|
||||
guest.status !== 'considered' &&
|
||||
!invitations.some((invitation) =>
|
||||
invitation.guests.some((invitedGuest) => invitedGuest.id === guest.id)
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
|
||||
// Sort invitations to display those without guests at the top
|
||||
const sortedInvitations = [...invitations].sort((a, b) => {
|
||||
if (a.guests.length === 0 && b.guests.length > 0) return -1;
|
||||
if (a.guests.length > 0 && b.guests.length === 0) return 1;
|
||||
return 0;
|
||||
});
|
||||
|
||||
function handleCreateInvitation() {
|
||||
api.create(serializer, new Invitation(), (createdInvitation) => {
|
||||
setInvitations((prevInvitations) => [createdInvitation, ...prevInvitations]);
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-screen">
|
||||
{/* Left Column: Guests */}
|
||||
<div className="w-1/4 h-full overflow-auto border-r border-gray-300 p-4">
|
||||
<h2 className="text-lg font-semibold mb-4">{unassignedGuests.length} guests without invitation</h2>
|
||||
<div>
|
||||
{unassignedGuests.map((guest) => (
|
||||
<GuestCard key={guest.id} {...guest} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Invitations */}
|
||||
<div className="w-3/4 h-full overflow-auto p-4">
|
||||
<h2 className="text-lg font-semibold mb-4">
|
||||
{invitations.length} invitations
|
||||
</h2>
|
||||
|
||||
<button
|
||||
onClick={handleCreateInvitation}
|
||||
className="mb-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
|
||||
>
|
||||
Create New Invitation
|
||||
</button>
|
||||
|
||||
|
||||
<div className="grid grid-cols-4 gap-6">
|
||||
|
||||
{sortedInvitations.map((invitation) => (
|
||||
<InvitationCard
|
||||
key={invitation.id}
|
||||
invitation={invitation}
|
||||
allGuests={guests}
|
||||
onGuestAdded={(guestAdded: Guest) => {
|
||||
setUnassignedGuests((prevUnassignedGuests) => prevUnassignedGuests.filter(g => g.id !== guestAdded.id));
|
||||
}}
|
||||
onDestroy={(invitationToDestroy: Invitation) => {
|
||||
setInvitations((prevInvitations) => prevInvitations.filter(i => i.id !== invitationToDestroy.id));
|
||||
setUnassignedGuests((prevUnassignedGuests) => [
|
||||
...prevUnassignedGuests,
|
||||
...invitationToDestroy.guests
|
||||
]);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
30
package.json
30
package.json
@ -6,39 +6,33 @@
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
|
||||
"@heroicons/react": "^2.1.4",
|
||||
"@tailwindcss/forms": "^0.5.7",
|
||||
"@tiptap/pm": "^2.14.0",
|
||||
"@tiptap/react": "^2.14.0",
|
||||
"@tiptap/starter-kit": "^2.14.0",
|
||||
"autoprefixer": "10.4.21",
|
||||
"bcrypt": "^6.0.0",
|
||||
"autoprefixer": "10.4.20",
|
||||
"bcrypt": "^5.1.1",
|
||||
"clsx": "^2.1.1",
|
||||
"dompurify": "^3.2.6",
|
||||
"next": "15.3.4",
|
||||
"next-auth": "5.0.0-beta.29",
|
||||
"postcss": "8.5.6",
|
||||
"next": "15.1.6",
|
||||
"next-auth": "5.0.0-beta.25",
|
||||
"postcss": "8.5.1",
|
||||
"primeicons": "^7.0.0",
|
||||
"primereact": "^10.8.2",
|
||||
"react": "19.0.0-rc-f38c22b244-20240704",
|
||||
"react-dom": "19.0.0-rc-f38c22b244-20240704",
|
||||
"tailwindcss": "3.4.17",
|
||||
"typescript": "5.8.3",
|
||||
"typescript": "5.7.3",
|
||||
"use-debounce": "^10.0.1",
|
||||
"uuid": "11.1.0",
|
||||
"uuid": "11.0.5",
|
||||
"zod": "^3.23.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.52.0",
|
||||
"@playwright/test": "^1.46.0",
|
||||
"@types/bcrypt": "^5.0.2",
|
||||
"@types/node": "24.0.7",
|
||||
"@types/react": "18.3.23",
|
||||
"@types/react-dom": "18.3.7",
|
||||
"wait-on": "^8.0.3"
|
||||
"@types/node": "22.10.10",
|
||||
"@types/react": "18.3.18",
|
||||
"@types/react-dom": "18.3.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=23.0.0"
|
||||
},
|
||||
"packageManager": "pnpm@10.12.3+sha512.467df2c586056165580ad6dfb54ceaad94c5a30f80893ebdec5a44c5aa73c205ae4a5bb9d5ed6bb84ea7c249ece786642bbb49d06a307df218d03da41c317417"
|
||||
"packageManager": "pnpm@9.15.4+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0"
|
||||
}
|
||||
|
@ -43,6 +43,11 @@ export default defineConfig({
|
||||
use: { ...devices['Desktop Firefox'] },
|
||||
},
|
||||
|
||||
{
|
||||
name: 'webkit',
|
||||
use: { ...devices['Desktop Safari'] },
|
||||
},
|
||||
|
||||
/* Test against mobile viewports. */
|
||||
// {
|
||||
// name: 'Mobile Chrome',
|
||||
|
1812
pnpm-lock.yaml
generated
1812
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Before Width: | Height: | Size: 506 KiB |
BIN
public/stamp.png
BIN
public/stamp.png
Binary file not shown.
Before Width: | Height: | Size: 45 KiB |
@ -1,82 +0,0 @@
|
||||
import { test, expect, Page } from '@playwright/test'
|
||||
import mockGroupsAPI from './mocks/groups';
|
||||
import mockGuestsAPI from './mocks/guests';
|
||||
|
||||
test('should allow CRUD on groups', async ({ page }) => {
|
||||
await mockGuestsAPI({ page });
|
||||
await mockGroupsAPI({ page });
|
||||
|
||||
await page.goto('/default/dashboard/guests');
|
||||
await page.getByRole('tab', { name: 'Groups' }).click();
|
||||
|
||||
await expect(page.getByRole('button', { name: 'Add new' })).toBeVisible();
|
||||
await expect(page.getByRole('button', { name: 'Reset affinities' })).toBeVisible();
|
||||
|
||||
|
||||
// List all groups
|
||||
await expect(page.getByRole('row')).toHaveCount(3); // 1 header row + 2 data rows
|
||||
|
||||
await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(0)).toHaveText('Name');
|
||||
await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(1)).toHaveText('Color');
|
||||
await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(2)).toHaveText('Confirmed');
|
||||
await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(3)).toHaveText('Tentative');
|
||||
await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(4)).toHaveText('Pending');
|
||||
await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(5)).toHaveText('Declined');
|
||||
await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(6)).toHaveText('Considered');
|
||||
await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(7)).toHaveText('Total');
|
||||
await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(8)).toHaveText('Actions');
|
||||
|
||||
await expect(page.getByRole('row').nth(1).getByRole('cell').nth(0)).toContainText('Pam\'s family');
|
||||
await expect(page.getByRole('row').nth(1).getByRole('cell').nth(2)).toHaveText('0');
|
||||
await expect(page.getByRole('row').nth(1).getByRole('cell').nth(3)).toHaveText('0');
|
||||
await expect(page.getByRole('row').nth(1).getByRole('cell').nth(4)).toHaveText('1');
|
||||
await expect(page.getByRole('row').nth(1).getByRole('cell').nth(5)).toHaveText('0');
|
||||
await expect(page.getByRole('row').nth(1).getByRole('cell').nth(6)).toHaveText('2');
|
||||
await expect(page.getByRole('row').nth(1).getByRole('cell').nth(7)).toHaveText('3');
|
||||
await expect(page.getByRole('row').nth(1).locator('svg:visible')).toHaveCount(3);
|
||||
|
||||
await expect(page.getByRole('row').nth(2).getByRole('cell').nth(0)).toContainText('Pam\'s work');
|
||||
await expect(page.getByRole('row').nth(2).getByRole('cell').nth(2)).toHaveText('0');
|
||||
await expect(page.getByRole('row').nth(2).getByRole('cell').nth(3)).toHaveText('2');
|
||||
await expect(page.getByRole('row').nth(2).getByRole('cell').nth(4)).toHaveText('0');
|
||||
await expect(page.getByRole('row').nth(2).getByRole('cell').nth(5)).toHaveText('0');
|
||||
await expect(page.getByRole('row').nth(2).getByRole('cell').nth(6)).toHaveText('0');
|
||||
await expect(page.getByRole('row').nth(2).getByRole('cell').nth(7)).toHaveText('2');
|
||||
await expect(page.getByRole('row').nth(2).locator('svg:visible')).toHaveCount(3);
|
||||
|
||||
// Add a new group
|
||||
await page.getByRole('button', { name: 'Add new' }).click();
|
||||
const dialog = page.getByRole('dialog');
|
||||
await expect(dialog).toBeVisible();
|
||||
|
||||
await dialog.getByLabel('Name').fill("Pam's friends");
|
||||
await dialog.getByRole('button', { name: 'Create' }).click();
|
||||
|
||||
await expect(page.getByRole('row')).toHaveCount(4); // 1 header row + 3 data rows
|
||||
|
||||
await expect(dialog).not.toBeVisible();
|
||||
|
||||
await expect(page.getByRole('row').nth(1).getByRole('cell').nth(0)).toContainText('Pam\'s friends');
|
||||
await expect(page.getByRole('row').nth(1).getByRole('cell').nth(2)).toHaveText('0');
|
||||
await expect(page.getByRole('row').nth(1).getByRole('cell').nth(3)).toHaveText('0');
|
||||
await expect(page.getByRole('row').nth(1).getByRole('cell').nth(4)).toHaveText('0');
|
||||
await expect(page.getByRole('row').nth(1).getByRole('cell').nth(5)).toHaveText('0');
|
||||
await expect(page.getByRole('row').nth(1).getByRole('cell').nth(6)).toHaveText('0');
|
||||
await expect(page.getByRole('row').nth(1).getByRole('cell').nth(7)).toHaveText('0');
|
||||
await expect(page.getByRole('row').nth(1).locator('svg:visible')).toHaveCount(3);
|
||||
|
||||
// Modify the newly added group
|
||||
await page.getByRole('row').nth(1).locator('svg').nth(2).click(); // Click edit icon
|
||||
await expect(dialog).toBeVisible();
|
||||
await expect(dialog.getByLabel('Name')).toHaveValue("Pam's friends");
|
||||
await dialog.getByLabel('Name').fill('Pam\'s best friends');
|
||||
await dialog.getByRole('button', { name: 'Update' }).click();
|
||||
|
||||
await expect(page.getByRole('row').nth(1).getByRole('cell').nth(0)).toContainText('Pam\'s best friends');
|
||||
|
||||
// Delete the newly added group
|
||||
page.on('dialog', dialog => dialog.accept());
|
||||
|
||||
await page.getByRole('row').nth(1).locator('svg').nth(1).click(); // Click delete icon
|
||||
await expect(page.getByRole('row')).toHaveCount(3); // 1 header row + 2 data rows
|
||||
});
|
@ -1,76 +1,100 @@
|
||||
import { expect, test } from '@playwright/test';
|
||||
import mockGroupsAPI from './mocks/groups';
|
||||
import mockGuestsAPI from './mocks/guests';
|
||||
import { test, expect, Page } from '@playwright/test'
|
||||
|
||||
test('should allow CRUD on guests', async ({ page }) => {
|
||||
const mockGuestsAPI = ({ page }: { page: Page }) => {
|
||||
page.route('*/**/api/default/guests', async route => {
|
||||
const json = [
|
||||
{
|
||||
"id": "f4a09c28-40ea-4553-90a5-96935a59cac6",
|
||||
"status": "tentative",
|
||||
"name": "Kristofer Rohan DVM",
|
||||
"group": {
|
||||
"id": "2fcb8b22-6b07-4c34-92e3-a2535dbc5b14",
|
||||
"name": "Childhood friends",
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "bd585c40-0937-4cde-960a-bb23acfd6f18",
|
||||
"status": "invited",
|
||||
"name": "Olevia Quigley Jr.",
|
||||
"group": {
|
||||
"id": "da8edf26-3e1e-4cbb-b985-450c49fffe01",
|
||||
"name": "Work",
|
||||
}
|
||||
},
|
||||
];
|
||||
|
||||
await route.fulfill({ json })
|
||||
})
|
||||
}
|
||||
|
||||
const mockGroupsAPI = ({ page }: { page: Page }) => {
|
||||
page.route('*/**/api/default/groups', async route => {
|
||||
const json = [
|
||||
{
|
||||
"id": "ee44ffb9-1147-4842-a378-9eaeb0f0871a",
|
||||
"name": "Pam's family",
|
||||
"icon": "pi pi-users",
|
||||
"parent_id": "cd9645e1-02c6-4fb9-bba6-1a960754b01c",
|
||||
"color": "#ff0000",
|
||||
"total": 3,
|
||||
"considered": 2,
|
||||
"invited": 1,
|
||||
"confirmed": 0,
|
||||
"declined": 0,
|
||||
"tentative": 0
|
||||
},
|
||||
{
|
||||
"id": "c8bda6ca-d8af-4bb8-b2bf-e6ec1c21b1e6",
|
||||
"name": "Pam's work",
|
||||
"icon": "pi pi-desktop",
|
||||
"parent_id": "cd9645e1-02c6-4fb9-bba6-1a960754b01c",
|
||||
"color": "#00ff00",
|
||||
"total": 2,
|
||||
"considered": 0,
|
||||
"invited": 0,
|
||||
"confirmed": 0,
|
||||
"declined": 0,
|
||||
"tentative": 2
|
||||
},
|
||||
];
|
||||
|
||||
await route.fulfill({ json })
|
||||
})
|
||||
}
|
||||
|
||||
test('should display the list of guests', async ({ page }) => {
|
||||
await mockGuestsAPI({ page });
|
||||
await mockGroupsAPI({ page });
|
||||
|
||||
await page.goto('/default/dashboard/guests');
|
||||
|
||||
await expect(page.getByRole('button', { name: 'Add new' })).toBeVisible();
|
||||
|
||||
await expect(page.getByRole('tab', { name: 'Guests' })).toBeVisible();
|
||||
await expect(page.getByRole('tab', { name: 'Groups' })).toBeVisible();
|
||||
await expect(page.getByRole('tab', { name: 'Invitations' })).toBeVisible();
|
||||
await expect(page.getByRole('tab', { name: 'Guests' })).toBeVisible();
|
||||
|
||||
// List all guests
|
||||
await expect(page.getByText('There are 2 elements in the list')).toBeVisible();
|
||||
await expect(page.getByRole('row')).toHaveCount(3); // 1 header row + 2 data rows
|
||||
|
||||
await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'Kristofer Rohan DVM' })).toBeVisible();
|
||||
await expect(page.getByRole('row').nth(1).getByRole('cell', { name: "Pam's family" })).toBeVisible();
|
||||
await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'Childhood friends' })).toBeVisible();
|
||||
await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'Tentative' })).toBeVisible();
|
||||
await expect(page.getByRole('row').nth(1).locator('svg')).toHaveCount(2);
|
||||
await expect(page.getByRole('row').nth(1).getByRole('button', { name: 'Confirm' })).toBeVisible();
|
||||
await expect(page.getByRole('row').nth(1).getByRole('button', { name: 'Decline' })).toBeVisible();
|
||||
|
||||
|
||||
await expect(page.getByRole('row').nth(2).getByRole('cell', { name: 'Olevia Quigley Jr.' })).toBeVisible();
|
||||
await expect(page.getByRole('row').nth(2).getByRole('cell', { name: "Pam's work" })).toBeVisible();
|
||||
await expect(page.getByRole('row').nth(2).getByRole('cell', { name: 'Work' })).toBeVisible();
|
||||
await expect(page.getByRole('row').nth(2).getByRole('cell', { name: 'Invited' })).toBeVisible();
|
||||
await expect(page.getByRole('row').nth(2).locator('svg')).toHaveCount(2);
|
||||
|
||||
// Add a new guest
|
||||
await page.getByRole('button', { name: 'Add new' }).click();
|
||||
|
||||
await page.getByRole('dialog').getByLabel('Name').fill('John Snow');
|
||||
|
||||
await page.locator('#group').click();
|
||||
await page.getByRole('option', { name: "Pam's work" }).click();
|
||||
|
||||
await page.locator('#status').click();
|
||||
await page.getByRole('option', { name: 'Invited' }).click();
|
||||
|
||||
await page.getByRole('dialog').getByRole('button', { name: 'Create' }).click();
|
||||
|
||||
await expect(page.getByText('There are 3 elements in the list')).toBeVisible();
|
||||
|
||||
await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'John Snow' })).toBeVisible();
|
||||
await expect(page.getByRole('row').nth(1).getByRole('cell', { name: "Pam\'s work" })).toBeVisible();
|
||||
await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'Invited' })).toBeVisible();
|
||||
await expect(page.getByRole('row').nth(1).locator('svg')).toHaveCount(2);
|
||||
|
||||
// Edit the just-added John Snow
|
||||
await page.getByRole('row').nth(1).locator('svg').nth(1).click(); // Click edit icon
|
||||
|
||||
const dialog = page.getByRole('dialog');
|
||||
await expect(dialog.getByLabel('Name')).toHaveValue('John Snow');
|
||||
await dialog.getByLabel('Name').fill('John Fire');
|
||||
|
||||
await dialog.locator('#group').click();
|
||||
await page.getByRole('option', { name: "Pam's family" }).click();
|
||||
|
||||
await dialog.locator('#status').click();
|
||||
await page.getByRole('option', { name: 'Declined' }).click();
|
||||
|
||||
await dialog.getByRole('button', { name: 'Update' }).click();
|
||||
|
||||
await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'John Fire' })).toBeVisible();
|
||||
await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'Pam\'s Family' })).toBeVisible();
|
||||
await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'Declined' })).toBeVisible();
|
||||
|
||||
await expect(page.getByText('There are 3 elements in the list')).toBeVisible();
|
||||
|
||||
// Delete John Fire
|
||||
page.on('dialog', dialog => dialog.accept());
|
||||
await page.getByRole('row').nth(1).locator('svg').nth(0).click(); // Click delete icon
|
||||
await expect(page.getByText('There are 2 elements in the list')).toBeVisible();
|
||||
await expect(page.getByRole('row').nth(2).getByRole('button', { name: 'Confirm' })).toBeVisible();
|
||||
await expect(page.getByRole('row').nth(2).getByRole('button', { name: 'Tentative' })).toBeVisible();
|
||||
await expect(page.getByRole('row').nth(2).getByRole('button', { name: 'Decline' })).toBeVisible();
|
||||
});
|
||||
|
||||
test('should display the list of groups', async ({ page }) => {
|
||||
await mockGroupsAPI({ page });
|
||||
|
||||
await page.goto('/default/dashboard/guests');
|
||||
await page.getByRole('tab', { name: 'Groups' }).click();
|
||||
|
||||
await expect(page.getByText('There are 2 elements in the list')).toBeVisible();
|
||||
|
||||
await expect(page.getByRole('row').nth(1).getByRole('cell', { name: "Pam's family" })).toBeVisible();
|
||||
await expect(page.getByRole('row').nth(2).getByRole('cell', { name: "Pam's work" })).toBeVisible();
|
||||
});
|
@ -1,86 +0,0 @@
|
||||
import { Page } from "@playwright/test";
|
||||
|
||||
export default async function mockGroupsAPI({ page }: { page: Page }): Promise<void> {
|
||||
page.route('*/**/api/default/groups', async route => {
|
||||
if (route.request().method() === 'GET') {
|
||||
const json = [
|
||||
{
|
||||
"id": "ee44ffb9-1147-4842-a378-9eaeb0f0871a",
|
||||
"name": "Pam's family",
|
||||
"icon": "pi pi-users",
|
||||
"parent_id": null,
|
||||
"color": "#ff0000",
|
||||
"attendance": {
|
||||
"total": 3,
|
||||
"considered": 2,
|
||||
"invited": 1,
|
||||
"confirmed": 0,
|
||||
"declined": 0,
|
||||
"tentative": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "c8bda6ca-d8af-4bb8-b2bf-e6ec1c21b1e6",
|
||||
"name": "Pam's work",
|
||||
"icon": "pi pi-desktop",
|
||||
"parent_id": null,
|
||||
"color": "#00ff00",
|
||||
"attendance": {
|
||||
"total": 2,
|
||||
"considered": 0,
|
||||
"invited": 0,
|
||||
"confirmed": 0,
|
||||
"declined": 0,
|
||||
"tentative": 2
|
||||
}
|
||||
},
|
||||
];
|
||||
|
||||
await route.fulfill({ json })
|
||||
} else if (route.request().method() === 'POST') {
|
||||
const json = {
|
||||
"id": "4d55bc34-6f42-4e2e-82a1-71ae32da2466",
|
||||
"name": "Pam's friends",
|
||||
"icon": "pi pi-desktop",
|
||||
"parent_id": null,
|
||||
"color": "#0000ff",
|
||||
"attendance": {
|
||||
"total": 0,
|
||||
"considered": 0,
|
||||
"invited": 0,
|
||||
"confirmed": 0,
|
||||
"declined": 0,
|
||||
"tentative": 0
|
||||
}
|
||||
}
|
||||
|
||||
await route.fulfill({ json })
|
||||
}
|
||||
})
|
||||
|
||||
page.route("*/**/api/default/groups/*", async route => {
|
||||
if (route.request().method() === 'PUT') {
|
||||
const json = {
|
||||
"id": "4d55bc34-6f42-4e2e-82a1-71ae32da2466",
|
||||
"name": "Pam's best friends",
|
||||
"icon": "pi pi-desktop",
|
||||
"parent_id": null,
|
||||
"color": "#0000ff",
|
||||
"attendance": {
|
||||
"total": 0,
|
||||
"considered": 0,
|
||||
"invited": 0,
|
||||
"confirmed": 0,
|
||||
"declined": 0,
|
||||
"tentative": 0
|
||||
}
|
||||
}
|
||||
|
||||
await route.fulfill({ json });
|
||||
} else if (route.request().method() === 'DELETE') {
|
||||
const json = {}
|
||||
|
||||
await route.fulfill({ json });
|
||||
}
|
||||
});
|
||||
}
|
@ -1,61 +0,0 @@
|
||||
import { Page } from "@playwright/test";
|
||||
|
||||
export default async function mockGuestsAPI({ page }: { page: Page }): Promise<void> {
|
||||
page.route('*/**/api/default/guests', async route => {
|
||||
if (route.request().method() === 'GET') {
|
||||
const json = [
|
||||
{
|
||||
"id": "f4a09c28-40ea-4553-90a5-96935a59cac6",
|
||||
"status": "tentative",
|
||||
"name": "Kristofer Rohan DVM",
|
||||
"group": {
|
||||
"id": "ee44ffb9-1147-4842-a378-9eaeb0f0871a",
|
||||
"name": "Pam's family",
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "bd585c40-0937-4cde-960a-bb23acfd6f18",
|
||||
"status": "invited",
|
||||
"name": "Olevia Quigley Jr.",
|
||||
"group": {
|
||||
"id": "c8bda6ca-d8af-4bb8-b2bf-e6ec1c21b1e6",
|
||||
"name": "Pam's work",
|
||||
}
|
||||
},
|
||||
];
|
||||
|
||||
await route.fulfill({ json })
|
||||
} else if (route.request().method() === 'POST') {
|
||||
const json = {
|
||||
"id": "ff58aa2d-643d-4c29-be9c-50e10ae6853c",
|
||||
"name": "John Snow",
|
||||
"status": "invited",
|
||||
"group": {
|
||||
"id": "c8bda6ca-d8af-4bb8-b2bf-e6ec1c21b1e6",
|
||||
"name": "Pam's work",
|
||||
}
|
||||
};
|
||||
|
||||
await route.fulfill({ json });
|
||||
}
|
||||
})
|
||||
|
||||
page.route("*/**/api/default/guests/*", async route => {
|
||||
if (route.request().method() === 'PUT') {
|
||||
const json = {
|
||||
"id": "ff58aa2d-643d-4c29-be9c-50e10ae6853c",
|
||||
"name": "John Fire",
|
||||
"status": "declined",
|
||||
"group": {
|
||||
"id": "ee44ffb9-1147-4842-a378-9eaeb0f0871a",
|
||||
"name": "Pam's family",
|
||||
}
|
||||
}
|
||||
await route.fulfill({ json });
|
||||
|
||||
} else if (route.request().method() === 'DELETE') {
|
||||
const json = {}
|
||||
await route.fulfill({ json });
|
||||
}
|
||||
});
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user