Compare commits
No commits in common. "main" and "disable-playwright" have entirely different histories.
main
...
disable-pl
31
.github/workflows/build.yml
vendored
31
.github/workflows/build.yml
vendored
@ -1,6 +1,8 @@
|
|||||||
name: Build Nginx-based docker image
|
name: Build Nginx-based docker image
|
||||||
on:
|
on:
|
||||||
push:
|
push:
|
||||||
|
branches:
|
||||||
|
- main
|
||||||
concurrency:
|
concurrency:
|
||||||
group: ${{ github.ref }}
|
group: ${{ github.ref }}
|
||||||
cancel-in-progress: true
|
cancel-in-progress: true
|
||||||
@ -23,31 +25,12 @@ jobs:
|
|||||||
username: ${{ secrets.PRIVATE_REGISTRY_USERNAME }}
|
username: ${{ secrets.PRIVATE_REGISTRY_USERNAME }}
|
||||||
password: ${{ secrets.PRIVATE_REGISTRY_TOKEN }}
|
password: ${{ secrets.PRIVATE_REGISTRY_TOKEN }}
|
||||||
|
|
||||||
- name: Build and push intermediate stages (deps)
|
- name: Build and push
|
||||||
uses: docker/build-push-action@v6
|
uses: docker/build-push-action@v6
|
||||||
with:
|
with:
|
||||||
context: .
|
context: .
|
||||||
target: deps
|
push: ${{ github.event_name != 'pull_request' }}
|
||||||
push: ${{ github.ref == 'refs/heads/main' }}
|
tags: |
|
||||||
tags: ${{ secrets.PRIVATE_REGISTRY_HOST }}/${{ env.GITHUB_REPOSITORY }}:deps
|
${{ secrets.PRIVATE_REGISTRY_HOST }}/${{ env.GITHUB_REPOSITORY }}:latest
|
||||||
cache-from: type=registry,ref=${{ secrets.PRIVATE_REGISTRY_HOST }}/${{ env.GITHUB_REPOSITORY }}:deps
|
cache-from: type=registry,ref=user/app:latest
|
||||||
cache-to: type=inline
|
|
||||||
|
|
||||||
- name: Build and push intermediate stages (builder)
|
|
||||||
uses: docker/build-push-action@v6
|
|
||||||
with:
|
|
||||||
context: .
|
|
||||||
target: builder
|
|
||||||
push: ${{ github.ref == 'refs/heads/main' }}
|
|
||||||
tags: ${{ secrets.PRIVATE_REGISTRY_HOST }}/${{ env.GITHUB_REPOSITORY }}:builder
|
|
||||||
cache-from: type=registry,ref=${{ secrets.PRIVATE_REGISTRY_HOST }}/${{ env.GITHUB_REPOSITORY }}:builder
|
|
||||||
cache-to: type=inline
|
|
||||||
|
|
||||||
- name: Build and push (final)
|
|
||||||
uses: docker/build-push-action@v6
|
|
||||||
with:
|
|
||||||
context: .
|
|
||||||
push: ${{ github.ref == 'refs/heads/main' }}
|
|
||||||
tags: ${{ secrets.PRIVATE_REGISTRY_HOST }}/${{ env.GITHUB_REPOSITORY }}:latest
|
|
||||||
cache-from: type=registry,ref=${{ secrets.PRIVATE_REGISTRY_HOST }}/${{ env.GITHUB_REPOSITORY }}:latest
|
|
||||||
cache-to: type=inline
|
cache-to: type=inline
|
||||||
2
.github/workflows/copyright_notice.yml
vendored
2
.github/workflows/copyright_notice.yml
vendored
@ -16,7 +16,7 @@ jobs:
|
|||||||
ref: ${{ github.head_ref }}
|
ref: ${{ github.head_ref }}
|
||||||
- uses: VinnyBabuManjaly/copyright-action@v1.0.0
|
- uses: VinnyBabuManjaly/copyright-action@v1.0.0
|
||||||
with:
|
with:
|
||||||
CopyrightString: '/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/\n\n'
|
CopyrightString: '/* Copyright (C) 2024 Manuel Bustillo*/\n\n'
|
||||||
FileType: '.tsx, .jsx, .ts'
|
FileType: '.tsx, .jsx, .ts'
|
||||||
Path: 'app/, config/, db/'
|
Path: 'app/, config/, db/'
|
||||||
IgnorePath: 'testfolder1/a/, testfolder3'
|
IgnorePath: 'testfolder1/a/, testfolder3'
|
||||||
|
|||||||
12
.github/workflows/playwright.yml
vendored
12
.github/workflows/playwright.yml
vendored
@ -9,6 +9,7 @@ concurrency:
|
|||||||
cancel-in-progress: true
|
cancel-in-progress: true
|
||||||
jobs:
|
jobs:
|
||||||
test:
|
test:
|
||||||
|
if: false
|
||||||
timeout-minutes: 60
|
timeout-minutes: 60
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
container:
|
container:
|
||||||
@ -17,19 +18,14 @@ jobs:
|
|||||||
- uses: actions/checkout@v4
|
- uses: actions/checkout@v4
|
||||||
- uses: actions/setup-node@v4
|
- uses: actions/setup-node@v4
|
||||||
with:
|
with:
|
||||||
node-version-file: .nvmrc
|
node-version: lts/*
|
||||||
- name: Install dependencies
|
- name: Install dependencies
|
||||||
run: npm install -g pnpm && pnpm install
|
run: npm install -g pnpm && pnpm install
|
||||||
- name: Build the service that will be tested
|
- name: Build the service that will be tested
|
||||||
run: |
|
run: npm run build
|
||||||
pnpm run build
|
|
||||||
cp -r public .next/standalone/
|
|
||||||
cp -r .next/static .next/standalone/.next/
|
|
||||||
- name: Install Playwright Browsers
|
- name: Install Playwright Browsers
|
||||||
run: pnpm exec playwright install --with-deps
|
run: pnpm exec playwright install --with-deps
|
||||||
- name: Run the service that will be tested
|
- name: Run the service that will be tested
|
||||||
run: HOSTNAME=127.0.0.1 node .next/standalone/server.js &
|
run: npm run start &
|
||||||
- name: Wait for the service to be ready
|
|
||||||
run: npx wait-on http://127.0.0.1:3000/default/ --timeout 30000
|
|
||||||
- name: Run Playwright tests
|
- name: Run Playwright tests
|
||||||
run: pnpm exec playwright test
|
run: pnpm exec playwright test
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
# Based on https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile
|
# 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
|
# Install dependencies only when needed
|
||||||
FROM base AS deps
|
FROM base AS deps
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
# Based on https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile
|
# 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
|
# Install dependencies only when needed
|
||||||
FROM base AS deps
|
FROM base AS deps
|
||||||
|
|||||||
@ -1,45 +0,0 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
|
||||||
|
|
||||||
'use client'
|
|
||||||
|
|
||||||
import { AbstractApi } from '@/app/api/abstract-api';
|
|
||||||
import { Expense, ExpenseSerializer } from '@/app/lib/expense';
|
|
||||||
import { classNames } from '@/app/ui/components/button';
|
|
||||||
import ExpenseFormDialog from '@/app/ui/components/expense-form-dialog';
|
|
||||||
import ExpensesTable from '@/app/ui/expenses/table';
|
|
||||||
import SkeletonTable from '@/app/ui/guests/skeleton-row';
|
|
||||||
import { Suspense, useEffect, useState } from 'react';
|
|
||||||
|
|
||||||
export default function Page() {
|
|
||||||
const refreshExpenses = () => {
|
|
||||||
new AbstractApi<Expense>().getAll(new ExpenseSerializer(), (expenses: Expense[]) => {
|
|
||||||
setExpenses(expenses);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const [expenses, setExpenses] = useState<Expense[]>([]);
|
|
||||||
const [expenseBeingEdited, setExpenseBeingEdited] = useState<Expense | undefined>(undefined);
|
|
||||||
useEffect(() => { refreshExpenses() }, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="w-full">
|
|
||||||
<div className="flex flex-col w-full items-center justify-between">
|
|
||||||
<button onClick={() => setExpenseBeingEdited({})} className={classNames('primary')}>Add new</button>
|
|
||||||
<ExpenseFormDialog
|
|
||||||
key={expenseBeingEdited?.id}
|
|
||||||
onCreate={() => { refreshExpenses(); setExpenseBeingEdited(undefined) }}
|
|
||||||
expense={expenseBeingEdited}
|
|
||||||
visible={expenseBeingEdited !== undefined}
|
|
||||||
onHide={() => { setExpenseBeingEdited(undefined) }}
|
|
||||||
/>
|
|
||||||
<Suspense fallback={<SkeletonTable />}>
|
|
||||||
<ExpensesTable
|
|
||||||
expenses={expenses}
|
|
||||||
onUpdate={refreshExpenses}
|
|
||||||
onEdit={(expense) => setExpenseBeingEdited(expense)}
|
|
||||||
/>
|
|
||||||
</Suspense>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,180 +0,0 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
|
||||||
|
|
||||||
'use client';
|
|
||||||
|
|
||||||
import { AbstractApi, } from '@/app/api/abstract-api';
|
|
||||||
import { Group, GroupSerializer } from '@/app/lib/group';
|
|
||||||
import { Guest, GuestSerializer } from '@/app/lib/guest';
|
|
||||||
import { getCsrfToken, getSlug } from '@/app/lib/utils';
|
|
||||||
import AffinitiesFormDialog from '@/app/ui/components/affinities-form-dialog';
|
|
||||||
import { classNames } from '@/app/ui/components/button';
|
|
||||||
import GroupFormDialog from '@/app/ui/components/group-form-dialog';
|
|
||||||
import GuestFormDialog from '@/app/ui/components/guest-form-dialog';
|
|
||||||
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';
|
|
||||||
|
|
||||||
|
|
||||||
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);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function refreshGroups() {
|
|
||||||
new AbstractApi<Group>().getAll(new GroupSerializer(), (objects: Group[]) => {
|
|
||||||
setGroups(objects);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function refreshInvitations() {
|
|
||||||
new AbstractApi<Invitation>().getAll(new InvitationSerializer(), (objects: Invitation[]) => {
|
|
||||||
setInvitations(objects);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function resetAffinities() {
|
|
||||||
fetch(`/api/${slug}/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 [groups, setGroups] = useState<Array<Group>>([]);
|
|
||||||
const [groupBeingEdited, setGroupBeingEdited] = useState<Group | undefined>(undefined);
|
|
||||||
|
|
||||||
const [groupAffinitiesBeingEditted, setGroupAffinitiesBeingEditted] = useState<Group | undefined>(undefined);
|
|
||||||
|
|
||||||
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];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="w-full">
|
|
||||||
<TabView>
|
|
||||||
<TabPanel header="Guests" leftIcon="pi pi-users mx-2">
|
|
||||||
<div className="flex flex-col w-full items-center justify-between">
|
|
||||||
<button onClick={() => setGuestBeingEdited({})} className={classNames('primary')}>Add new</button>
|
|
||||||
<GuestFormDialog
|
|
||||||
key={guestBeingEdited?.id}
|
|
||||||
groups={groups}
|
|
||||||
onCreate={(newGuest) => {
|
|
||||||
setGuests(guests => updateList(guests, newGuest));
|
|
||||||
setGuestBeingEdited(undefined);
|
|
||||||
}}
|
|
||||||
guest={guestBeingEdited}
|
|
||||||
visible={guestBeingEdited !== undefined}
|
|
||||||
onHide={() => { setGuestBeingEdited(undefined) }}
|
|
||||||
/>
|
|
||||||
<Suspense fallback={<SkeletonTable />}>
|
|
||||||
<GuestsTable
|
|
||||||
guests={guests}
|
|
||||||
onUpdate={refreshGuests}
|
|
||||||
onEdit={(guest) => setGuestBeingEdited(guest)}
|
|
||||||
/>
|
|
||||||
</Suspense>
|
|
||||||
</div>
|
|
||||||
</ TabPanel>
|
|
||||||
<TabPanel header="Groups" leftIcon="pi pi-sitemap mx-2">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<GroupFormDialog
|
|
||||||
key={groupBeingEdited?.id}
|
|
||||||
groups={groups}
|
|
||||||
onCreate={(newGroup) => {
|
|
||||||
setGroups(groups => updateList(groups, newGroup));
|
|
||||||
setGroupBeingEdited(undefined)
|
|
||||||
}}
|
|
||||||
group={groupBeingEdited}
|
|
||||||
visible={groupBeingEdited !== undefined}
|
|
||||||
onHide={() => { setGroupBeingEdited(undefined) }}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<AffinitiesFormDialog
|
|
||||||
groups={groups}
|
|
||||||
group={groupAffinitiesBeingEditted}
|
|
||||||
visible={groupAffinitiesBeingEditted !== undefined}
|
|
||||||
onHide={() => { setGroupAffinitiesBeingEditted(undefined) }}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Suspense fallback={<SkeletonTable />}>
|
|
||||||
<GroupsTable
|
|
||||||
groups={groups}
|
|
||||||
onUpdate={refreshGroups}
|
|
||||||
onEdit={(group) => setGroupBeingEdited(group)}
|
|
||||||
onEditAffinities={(group) => setGroupAffinitiesBeingEditted(group)}
|
|
||||||
/>
|
|
||||||
</Suspense>
|
|
||||||
</div>
|
|
||||||
</ TabPanel>
|
|
||||||
<TabPanel header="Invitations" leftIcon="pi pi-envelope mx-2">
|
|
||||||
<InvitationsBoard guests={guests} invitations={invitations} />
|
|
||||||
</TabPanel>
|
|
||||||
</ TabView>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
|
||||||
|
|
||||||
'use client'
|
|
||||||
|
|
||||||
import { GlobalSummary as Summary } from '@/app/lib/definitions';
|
|
||||||
import { getSlug } from '@/app/lib/utils';
|
|
||||||
import GlobalSummary from '@/app/ui/dashboard/global-summary';
|
|
||||||
import { useEffect, useState } from 'react';
|
|
||||||
|
|
||||||
export default function Page() {
|
|
||||||
const [globalSummary, setGlobalSummary] = useState<Summary | undefined>(undefined);
|
|
||||||
|
|
||||||
function refreshSummary() {
|
|
||||||
fetch(`/api/${getSlug()}/summary`)
|
|
||||||
.then((response) => response.json())
|
|
||||||
.then((data) => {
|
|
||||||
setGlobalSummary(data);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(refreshSummary, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
globalSummary && <GlobalSummary summary={globalSummary} />
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,44 +0,0 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
|
||||||
|
|
||||||
'use client';
|
|
||||||
|
|
||||||
import { AbstractApi } from '@/app/api/abstract-api';
|
|
||||||
import { TableSimulation, TableSimulationSerializer } from '@/app/lib/tableSimulation';
|
|
||||||
import Arrangement from '@/app/ui/arrangements/arrangement';
|
|
||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
|
||||||
|
|
||||||
'use client';
|
|
||||||
|
|
||||||
import LoginForm from '@/app/ui/components/login-form';
|
|
||||||
import RegistrationForm from '@/app/ui/components/registration-form';
|
|
||||||
import { useParams } from 'next/navigation'
|
|
||||||
import { useEffect } from 'react';
|
|
||||||
import { retrieveCSRFToken } from '../api/authentication';
|
|
||||||
import { getCsrfToken } from '../lib/utils';
|
|
||||||
|
|
||||||
export default async function Page() {
|
|
||||||
const params = useParams<{ slug: string }>()
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (getCsrfToken() == 'unknown') {
|
|
||||||
retrieveCSRFToken();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof window !== 'undefined') {
|
|
||||||
localStorage.setItem('slug', params.slug);
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<main className="flex min-h-screen flex-col p-6">
|
|
||||||
<div className="flex flex-row">
|
|
||||||
<div className="w-1/2">
|
|
||||||
Already have an account? Sign in
|
|
||||||
<LoginForm />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-1/2">
|
|
||||||
Don't have an account? Register now!
|
|
||||||
<RegistrationForm />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -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) }} />
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,101 +0,0 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
|
||||||
|
|
||||||
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;
|
|
||||||
get(serializable: Serializable<T>, id: string, callback: (object: T) => void): void;
|
|
||||||
create(serializable: Serializable<T>, object: T, callback: (object: T) => void): void;
|
|
||||||
update(serializable: Serializable<T>, object: T, callback: () => void): void;
|
|
||||||
destroy(serializable: Serializable<T>, object: T, callback: () => void): void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Serializable<T> {
|
|
||||||
fromJson(json: any): T;
|
|
||||||
toJson(object: T): string;
|
|
||||||
apiPath(): string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export class AbstractApi<T extends Entity> implements Api<T> {
|
|
||||||
getAll(serializable: Serializable<T>, callback: (objets: T[]) => void): void {
|
|
||||||
fetch(`/api/${getSlug()}/${serializable.apiPath()}`)
|
|
||||||
.then((response) => response.json())
|
|
||||||
.then((data) => {
|
|
||||||
callback(data.map((record: any) => {
|
|
||||||
return serializable.fromJson(record);
|
|
||||||
}));
|
|
||||||
}, (error) => {
|
|
||||||
return [];
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
getAllPdf(serializable: Serializable<T>, callback: () => void): void {
|
|
||||||
fetch(`/api/${getSlug()}/${serializable.apiPath()}`, {
|
|
||||||
headers: {
|
|
||||||
'Accept': 'application/pdf',
|
|
||||||
}
|
|
||||||
}).then(res => res.blob())
|
|
||||||
.then(blob => {
|
|
||||||
var file = window.URL.createObjectURL(blob);
|
|
||||||
window.location.assign(file);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
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)
|
|
||||||
.then((response) => response.json())
|
|
||||||
.then((data) => {
|
|
||||||
callback(serializable.fromJson(data));
|
|
||||||
}, (error) => {
|
|
||||||
return [];
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
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, {
|
|
||||||
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));
|
|
||||||
})
|
|
||||||
.catch((error) => console.error(error));
|
|
||||||
}
|
|
||||||
|
|
||||||
create(serializable: Serializable<T>, object: T, callback: (createdObject: T) => 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));
|
|
||||||
})
|
|
||||||
.catch((error) => console.error(error));
|
|
||||||
}
|
|
||||||
|
|
||||||
destroy(serializable: Serializable<T>, object: T, callback: () => void): void {
|
|
||||||
fetch(`/api/${getSlug()}/${serializable.apiPath()}/${object.id}`, {
|
|
||||||
method: 'DELETE',
|
|
||||||
headers: {
|
|
||||||
'X-CSRF-TOKEN': getCsrfToken(),
|
|
||||||
}
|
|
||||||
}).then(callback)
|
|
||||||
.catch((error) => console.error(error));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,86 +0,0 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
|
||||||
|
|
||||||
import { asArray, getCsrfToken, getSlug } from '@/app/lib/utils';
|
|
||||||
import { Captcha, StructuredErrors, User } from '@/app/lib/definitions';
|
|
||||||
|
|
||||||
export function login({ email, password, onLogin }: { email: string, password: string, onLogin: (user: User) => void }) {
|
|
||||||
return fetch(`/api/${getSlug()}/users/sign_in`, {
|
|
||||||
method: 'POST',
|
|
||||||
body: JSON.stringify({ user: { email, password } }),
|
|
||||||
headers: {
|
|
||||||
'Accept': 'application/json',
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'X-CSRF-TOKEN': getCsrfToken(),
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.then((response) => response.json())
|
|
||||||
.then((data: any) => {
|
|
||||||
console.log(data);
|
|
||||||
onLogin({
|
|
||||||
id: data.id || '',
|
|
||||||
email: data.email || '',
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch((error) => console.error(error));
|
|
||||||
}
|
|
||||||
|
|
||||||
export function logout({ onLogout }: { onLogout: () => void }) {
|
|
||||||
fetch(`/api/${getSlug()}/users/sign_out`, {
|
|
||||||
method: 'DELETE',
|
|
||||||
headers: {
|
|
||||||
'X-CSRF-TOKEN': getCsrfToken(),
|
|
||||||
}
|
|
||||||
}).then(onLogout)
|
|
||||||
.catch((error) => console.error(error));
|
|
||||||
}
|
|
||||||
|
|
||||||
function flattenErrors(errors: StructuredErrors): string[] {
|
|
||||||
if (errors instanceof Array) {
|
|
||||||
return errors;
|
|
||||||
}
|
|
||||||
return Object.keys(errors).map((key) => {
|
|
||||||
return `${key}: ${asArray(errors[key]).join(', ')}`;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// At this moment we're making an initial request to get a valid CSRF token
|
|
||||||
export function retrieveCSRFToken() {
|
|
||||||
return fetch(`/api/token`, {
|
|
||||||
headers: {
|
|
||||||
'Accept': 'application/json',
|
|
||||||
}
|
|
||||||
}).then((response) => { return null });
|
|
||||||
}
|
|
||||||
|
|
||||||
export function register({ slug, email, password, passwordConfirmation, captcha, onRegister, onError }: {
|
|
||||||
slug: string,
|
|
||||||
email: string,
|
|
||||||
password: string,
|
|
||||||
passwordConfirmation: string,
|
|
||||||
captcha: Captcha,
|
|
||||||
onRegister: () => void,
|
|
||||||
onError: (errors: string[]) => void
|
|
||||||
}) {
|
|
||||||
fetch(`/api/${slug}/users`, {
|
|
||||||
method: 'POST',
|
|
||||||
body: JSON.stringify(
|
|
||||||
{
|
|
||||||
user: { email, password, password_confirmation: passwordConfirmation },
|
|
||||||
captcha: { id: captcha.id, answer: captcha.answer }
|
|
||||||
}
|
|
||||||
),
|
|
||||||
headers: {
|
|
||||||
'Accept': 'application/json',
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'X-CSRF-TOKEN': getCsrfToken(),
|
|
||||||
}
|
|
||||||
}).then((response) => {
|
|
||||||
if (response.ok) {
|
|
||||||
response.json().then(onRegister);
|
|
||||||
} else {
|
|
||||||
response.json().then((data: any) => {
|
|
||||||
onError(data.errors && flattenErrors(data.errors) || [data.error]);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
|
||||||
|
|
||||||
import { data } from "autoprefixer";
|
|
||||||
import { getCsrfToken } from "../lib/utils";
|
|
||||||
|
|
||||||
export function getCaptchaChallenge({onRetrieve}: {onRetrieve: (id: string, url: string) => void}){
|
|
||||||
return fetch('/api/captcha', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Accept': 'application/json',
|
|
||||||
'X-CSRF-TOKEN': getCsrfToken(),
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.then((response) => response.json())
|
|
||||||
.then((data: any) => {
|
|
||||||
onRetrieve(data.id, data.media_url)
|
|
||||||
})
|
|
||||||
.catch((error) => console.error(error));
|
|
||||||
}
|
|
||||||
40
app/api/expenses.tsx
Normal file
40
app/api/expenses.tsx
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
|
import { Expense } from '@/app/lib/definitions';
|
||||||
|
import { getCsrfToken } from '@/app/lib/utils';
|
||||||
|
|
||||||
|
export function loadExpenses(onLoad?: (expenses: Expense[]) => void) {
|
||||||
|
fetch("/api/default/expenses")
|
||||||
|
.then((response) => response.json())
|
||||||
|
.then((data) => {
|
||||||
|
onLoad && onLoad(data.map((record: any) => {
|
||||||
|
return ({
|
||||||
|
id: record.id,
|
||||||
|
name: record.name,
|
||||||
|
amount: record.amount,
|
||||||
|
pricingType: record.pricing_type
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
}, (error) => {
|
||||||
|
return [];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function updateExpense(expense: Expense) {
|
||||||
|
fetch(`/api/default/expenses/${expense.id}`,
|
||||||
|
{
|
||||||
|
method: 'PUT',
|
||||||
|
body: JSON.stringify({
|
||||||
|
expense: {
|
||||||
|
name: expense.name,
|
||||||
|
amount: expense.amount,
|
||||||
|
pricing_type: expense.pricingType,
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'X-CSRF-TOKEN': getCsrfToken(),
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => console.error(error));
|
||||||
|
}
|
||||||
27
app/api/groups.tsx
Normal file
27
app/api/groups.tsx
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
|
import { Group } from '@/app/lib/definitions';
|
||||||
|
|
||||||
|
export function loadGroups(onLoad?: (groups: Group[]) => void) {
|
||||||
|
fetch("/api/default/groups")
|
||||||
|
.then((response) => response.json())
|
||||||
|
.then((data) => {
|
||||||
|
onLoad && onLoad(data.map((record: any) => {
|
||||||
|
return ({
|
||||||
|
id: record.id,
|
||||||
|
name: record.name,
|
||||||
|
color: record.color,
|
||||||
|
attendance: {
|
||||||
|
considered: record.considered,
|
||||||
|
invited: record.invited,
|
||||||
|
confirmed: record.confirmed,
|
||||||
|
tentative: record.tentative,
|
||||||
|
declined: record.declined,
|
||||||
|
total: record.total,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
}, (error) => {
|
||||||
|
return [];
|
||||||
|
});
|
||||||
|
}
|
||||||
65
app/api/guests.tsx
Normal file
65
app/api/guests.tsx
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
|
import { Guest } from '@/app/lib/definitions';
|
||||||
|
import { getCsrfToken } from '@/app/lib/utils';
|
||||||
|
|
||||||
|
export function loadGuests(onLoad?: (guests: Guest[]) => void) {
|
||||||
|
fetch("/api/default/guests")
|
||||||
|
.then((response) => response.json())
|
||||||
|
.then((data) => {
|
||||||
|
onLoad && onLoad(data.map((record: any) => {
|
||||||
|
return ({
|
||||||
|
id: record.id,
|
||||||
|
name: record.name,
|
||||||
|
status: record.status,
|
||||||
|
group_name: record.group.name,
|
||||||
|
groupId: record.group.id,
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
}, (error) => {
|
||||||
|
return [];
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export function updateGuest(guest: Guest) {
|
||||||
|
return fetch(`/api/default/guests/${guest.id}`,
|
||||||
|
{
|
||||||
|
method: 'PUT',
|
||||||
|
body: JSON.stringify({ guest: { name: guest.name, status: guest.status } }),
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'X-CSRF-TOKEN': getCsrfToken(),
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => console.error(error));
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createGuest(name: string, group_id: string, onCreate?: () => void) {
|
||||||
|
fetch("/api/default/guests", {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify({ name: name, group_id: group_id }),
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'X-CSRF-TOKEN': getCsrfToken(),
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then((response) => response.json())
|
||||||
|
.then((data) => {
|
||||||
|
onCreate && onCreate();
|
||||||
|
})
|
||||||
|
.catch((error) => console.error(error));
|
||||||
|
}
|
||||||
|
|
||||||
|
export function destroyGuest(guest: Guest, onDestroy?: () => void) {
|
||||||
|
fetch(`/api/default/guests/${guest.id}`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
headers: {
|
||||||
|
'X-CSRF-TOKEN': getCsrfToken(),
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then((response) => response.json())
|
||||||
|
.then((data) => {
|
||||||
|
onDestroy && onDestroy();
|
||||||
|
})
|
||||||
|
.catch((error) => console.error(error));
|
||||||
|
}
|
||||||
@ -1,7 +0,0 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
|
||||||
|
|
||||||
import { NextResponse } from "next/server";
|
|
||||||
|
|
||||||
export function GET() {
|
|
||||||
return NextResponse.json({});
|
|
||||||
}
|
|
||||||
@ -1,10 +1,9 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
import { TableArrangement } from '@/app/lib/definitions';
|
import { TableArrangement } from '@/app/lib/definitions';
|
||||||
import { getSlug } from '../lib/utils';
|
|
||||||
|
|
||||||
export function loadTableSimulations(onLoad?: (tableSimulations: TableArrangement[]) => void) {
|
export function loadTableSimulations(onLoad?: (tableSimulations: TableArrangement[]) => void) {
|
||||||
fetch(`/api/${getSlug()}/tables_arrangements`)
|
fetch('/api/default/tables_arrangements')
|
||||||
.then((response) => response.json())
|
.then((response) => response.json())
|
||||||
.then((data) => {
|
.then((data) => {
|
||||||
onLoad && onLoad(data.map((record: any) => {
|
onLoad && onLoad(data.map((record: any) => {
|
||||||
@ -12,7 +11,6 @@ export function loadTableSimulations(onLoad?: (tableSimulations: TableArrangemen
|
|||||||
id: record.id,
|
id: record.id,
|
||||||
name: record.name,
|
name: record.name,
|
||||||
discomfort: record.discomfort,
|
discomfort: record.discomfort,
|
||||||
valid: record.valid,
|
|
||||||
});
|
});
|
||||||
}));
|
}));
|
||||||
}, (error) => {
|
}, (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
|
|
||||||
16
app/dashboard/expenses/page.tsx
Normal file
16
app/dashboard/expenses/page.tsx
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
|
import { lusitana } from '@/app/ui/fonts';
|
||||||
|
import ExpensesTable from '@/app/ui/expenses/table';
|
||||||
|
|
||||||
|
export default function Page () {
|
||||||
|
return (
|
||||||
|
<div className="w-full">
|
||||||
|
<div className="w-full items-center justify-between">
|
||||||
|
<h1 className={`${lusitana.className} text-2xl`}>Expenses</h1>
|
||||||
|
<h2 className={`${lusitana.className} text-xl`}>Summary</h2>
|
||||||
|
<ExpensesTable />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
72
app/dashboard/guests/page.tsx
Normal file
72
app/dashboard/guests/page.tsx
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { loadGroups } from '@/app/api/groups';
|
||||||
|
import { loadGuests } from '@/app/api/guests';
|
||||||
|
import { Group, Guest } from '@/app/lib/definitions';
|
||||||
|
import { classNames } from '@/app/ui/components/button';
|
||||||
|
import GuestFormDialog from '@/app/ui/components/guest-form-dialog';
|
||||||
|
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 { Suspense, useState } from 'react';
|
||||||
|
|
||||||
|
|
||||||
|
export default function Page() {
|
||||||
|
function refreshGuests() {
|
||||||
|
loadGuests((guests) => {
|
||||||
|
setGuests(guests);
|
||||||
|
setGuestsLoaded(true);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function refreshGroups() {
|
||||||
|
loadGroups((groups) => {
|
||||||
|
setGroups(groups);
|
||||||
|
setGroupsLoaded(true);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const [groupsLoaded, setGroupsLoaded] = useState(false);
|
||||||
|
const [groups, setGroups] = useState<Array<Group>>([]);
|
||||||
|
|
||||||
|
const [guestsLoaded, setGuestsLoaded] = useState(false);
|
||||||
|
const [guests, setGuests] = useState<Array<Guest>>([]);
|
||||||
|
const [guestBeingEdited, setGuestBeingEdited] = useState<Guest | undefined>(undefined);
|
||||||
|
|
||||||
|
!groupsLoaded && refreshGroups();
|
||||||
|
!guestsLoaded && refreshGuests();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full">
|
||||||
|
<TabView>
|
||||||
|
<TabPanel header="Guests" leftIcon="pi pi-users mx-2">
|
||||||
|
<div className="flex flex-col w-full items-center justify-between">
|
||||||
|
<button onClick={() => setGuestBeingEdited({})} className={classNames('primary')}>Add new</button>
|
||||||
|
<GuestFormDialog
|
||||||
|
key={guestBeingEdited?.id}
|
||||||
|
groups={groups}
|
||||||
|
onCreate={() => { refreshGuests(); setGuestBeingEdited(undefined) }}
|
||||||
|
guest={guestBeingEdited}
|
||||||
|
visible={guestBeingEdited !== undefined}
|
||||||
|
onHide={() => { setGuestBeingEdited(undefined) }}
|
||||||
|
/>
|
||||||
|
<Suspense fallback={<SkeletonTable />}>
|
||||||
|
<GuestsTable guests={guests} onUpdate={refreshGuests} onEdit={(guest) => setGuestBeingEdited(guest)} />
|
||||||
|
</Suspense>
|
||||||
|
</div>
|
||||||
|
</ TabPanel>
|
||||||
|
<TabPanel header="Groups" leftIcon="pi pi-sitemap mx-2">
|
||||||
|
<div className="flex w-full items-center justify-between">
|
||||||
|
<Suspense fallback={<SkeletonTable />}>
|
||||||
|
<GroupsTable groups={groups} />
|
||||||
|
</Suspense>
|
||||||
|
</div>
|
||||||
|
</ TabPanel>
|
||||||
|
</ TabView>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,4 +1,4 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
import SideNav from '@/app/ui/dashboard/sidenav';
|
import SideNav from '@/app/ui/dashboard/sidenav';
|
||||||
|
|
||||||
9
app/dashboard/page.tsx
Normal file
9
app/dashboard/page.tsx
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
|
import GlobalSummary from '@/app/ui/dashboard/global-summary';
|
||||||
|
|
||||||
|
export default function Page() {
|
||||||
|
return(
|
||||||
|
<GlobalSummary />
|
||||||
|
);
|
||||||
|
}
|
||||||
18
app/dashboard/tables/page.tsx
Normal file
18
app/dashboard/tables/page.tsx
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import Arrangement from '@/app/ui/arrangements/arrangement';
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import ArrangementsTable from '@/app/ui/arrangements/arrangements-table';
|
||||||
|
|
||||||
|
export default function Page() {
|
||||||
|
const [currentArrangement, setCurrentArrangement] = useState<string | null>(null);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ArrangementsTable onArrangementSelected={setCurrentArrangement} />
|
||||||
|
{currentArrangement && <Arrangement key={currentArrangement} id={currentArrangement} />}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -1,4 +1,4 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
import '@/app/ui/global.css'
|
import '@/app/ui/global.css'
|
||||||
|
|
||||||
|
|||||||
@ -1,5 +0,0 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
|
||||||
|
|
||||||
export class Affinities {
|
|
||||||
[key:string]: number;
|
|
||||||
}
|
|
||||||
@ -1,50 +1,56 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
import { AttendanceSummary } from "./group";
|
export type GuestStatus = 'considered' | 'invited' | 'confirmed' | 'declined' | 'tentative';
|
||||||
import { Guest } from "./guest";
|
export type Guest = {
|
||||||
|
|
||||||
export interface Entity {
|
|
||||||
id?: string;
|
id?: string;
|
||||||
|
name?: string;
|
||||||
|
group_name?: string;
|
||||||
|
groupId?: string;
|
||||||
|
color?: string;
|
||||||
|
status?: GuestStatus
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export type Expense = {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
amount: number;
|
||||||
|
pricingType: 'fixed' | 'per person';
|
||||||
|
};
|
||||||
|
|
||||||
export type TableArrangement = {
|
export type TableArrangement = {
|
||||||
id: string;
|
id: string;
|
||||||
number: number;
|
number: number;
|
||||||
name: string;
|
name: string;
|
||||||
guests?: Guest[];
|
guests?: Guest[];
|
||||||
discomfort?: number;
|
discomfort?: number
|
||||||
valid?: boolean;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export type User = {
|
export type Group = {
|
||||||
id: string;
|
id: string;
|
||||||
email: string;
|
name: string;
|
||||||
}
|
guest_count: number;
|
||||||
|
icon: string;
|
||||||
export type Captcha = {
|
children: Group[];
|
||||||
id: string;
|
color?: string;
|
||||||
answer: string;
|
attendance?: AttendanceSummary
|
||||||
}
|
|
||||||
|
|
||||||
export type StructuredErrors = {
|
|
||||||
[key: string]: string[] | string;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export type GlobalSummary = {
|
export type AttendanceSummary = {
|
||||||
expenses: ExpenseSummary;
|
considered: number;
|
||||||
guests: AttendanceSummary
|
invited: number;
|
||||||
}
|
confirmed: number;
|
||||||
|
declined: number;
|
||||||
export type ExpenseSummary = {
|
tentative: number;
|
||||||
projected: ExpensePossibleSummary;
|
|
||||||
confirmed: ExpensePossibleSummary;
|
|
||||||
status: StatusSummary;
|
|
||||||
}
|
|
||||||
|
|
||||||
export type ExpensePossibleSummary = {
|
|
||||||
total: number;
|
total: number;
|
||||||
guests: number;
|
|
||||||
}
|
|
||||||
export type StatusSummary = {
|
|
||||||
paid: number;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export type guestsTable = {
|
||||||
|
id: string;
|
||||||
|
customer_id: string;
|
||||||
|
name: string;
|
||||||
|
email: string;
|
||||||
|
image_url: string;
|
||||||
|
date: string;
|
||||||
|
amount: number;
|
||||||
|
status: 'pending' | 'paid';
|
||||||
|
};
|
||||||
|
|||||||
@ -1,41 +0,0 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
|
||||||
|
|
||||||
import { Serializable } from "../api/abstract-api";
|
|
||||||
import { Entity } from "./definitions";
|
|
||||||
|
|
||||||
export const pricingTypes = ['fixed', 'per_person'] as const;
|
|
||||||
export type PricingType = typeof pricingTypes[number];
|
|
||||||
|
|
||||||
export class Expense implements Entity {
|
|
||||||
id?: string;
|
|
||||||
name?: string;
|
|
||||||
amount?: number;
|
|
||||||
pricingType?: PricingType;
|
|
||||||
|
|
||||||
constructor(id?: string, name?: string, amount?: number, pricingType?: PricingType) {
|
|
||||||
this.id = id;
|
|
||||||
this.name = name || '';
|
|
||||||
this.amount = amount || 0;
|
|
||||||
this.pricingType = pricingType || 'fixed';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export class ExpenseSerializer implements Serializable<Expense>{
|
|
||||||
fromJson(data: any): Expense {
|
|
||||||
return new Expense(data.id, data.name, data.amount, data.pricing_type);
|
|
||||||
}
|
|
||||||
|
|
||||||
toJson(expense: Expense): string {
|
|
||||||
return JSON.stringify({
|
|
||||||
expense: {
|
|
||||||
name: expense.name,
|
|
||||||
amount: expense.amount,
|
|
||||||
pricing_type: expense.pricingType
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
apiPath(): string {
|
|
||||||
return 'expenses';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,64 +0,0 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
|
||||||
|
|
||||||
import { Entity } from "./definitions";
|
|
||||||
|
|
||||||
export type AttendanceSummary = {
|
|
||||||
considered: number;
|
|
||||||
invited: number;
|
|
||||||
confirmed: number;
|
|
||||||
declined: number;
|
|
||||||
tentative: number;
|
|
||||||
total: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export class Group implements Entity {
|
|
||||||
id?: string;
|
|
||||||
name?: string;
|
|
||||||
guest_count?: number;
|
|
||||||
icon?: string;
|
|
||||||
children?: Group[];
|
|
||||||
parentId?: string;
|
|
||||||
color?: string;
|
|
||||||
attendance?: AttendanceSummary
|
|
||||||
|
|
||||||
constructor(id?: string, name?: string, guest_count?: number, icon?: string, children?: Group[], parentId?: string, color?: string, attendance?: AttendanceSummary) {
|
|
||||||
this.id = id;
|
|
||||||
this.name = name;
|
|
||||||
this.guest_count = guest_count;
|
|
||||||
this.icon = icon;
|
|
||||||
this.children = children;
|
|
||||||
this.parentId = parentId;
|
|
||||||
this.color = color;
|
|
||||||
this.attendance = attendance;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export class GroupSerializer {
|
|
||||||
fromJson(data: any): Group {
|
|
||||||
return new Group(
|
|
||||||
data.id,
|
|
||||||
data.name,
|
|
||||||
data.guest_count,
|
|
||||||
data.icon,
|
|
||||||
data.children,
|
|
||||||
data.parent_id,
|
|
||||||
data.color,
|
|
||||||
data.attendance
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
toJson(group: Group): string {
|
|
||||||
return JSON.stringify({
|
|
||||||
group: {
|
|
||||||
name: group.name,
|
|
||||||
color: group.color,
|
|
||||||
icon: group.icon,
|
|
||||||
parent_id: group.parentId
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
apiPath(): string {
|
|
||||||
return 'groups';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
|
||||||
|
|
||||||
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];
|
|
||||||
|
|
||||||
export class Guest implements Entity {
|
|
||||||
id?: string;
|
|
||||||
name?: string;
|
|
||||||
color?: string;
|
|
||||||
status?: GuestStatus;
|
|
||||||
children?: Guest[];
|
|
||||||
group?: Group;
|
|
||||||
|
|
||||||
constructor(id?: string, name?: string, color?: string, status?: GuestStatus, children?: Guest[], Group?: Group) {
|
|
||||||
this.id = id;
|
|
||||||
this.name = name;
|
|
||||||
this.color = color;
|
|
||||||
this.status = status;
|
|
||||||
this.children = children;
|
|
||||||
this.group = Group;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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));
|
|
||||||
}
|
|
||||||
|
|
||||||
toJson(guest: Guest): string {
|
|
||||||
return JSON.stringify({ guest: { name: guest.name, status: guest.status, group_id: guest.group?.id } });
|
|
||||||
}
|
|
||||||
|
|
||||||
apiPath(): string {
|
|
||||||
return 'guests';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -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';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,72 +0,0 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
|
||||||
|
|
||||||
import { Serializable } from "../api/abstract-api";
|
|
||||||
import { Entity } from "./definitions";
|
|
||||||
import { Group } from "./group";
|
|
||||||
import { Guest } from "./guest";
|
|
||||||
|
|
||||||
export type Discomfort = {
|
|
||||||
discomfort: number;
|
|
||||||
breakdown: {
|
|
||||||
tableSizePenalty: number;
|
|
||||||
cohesionPenalty: number;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export type Table = {
|
|
||||||
number: number;
|
|
||||||
guests: Guest[];
|
|
||||||
discomfort: Discomfort;
|
|
||||||
}
|
|
||||||
|
|
||||||
export class TableSimulation implements Entity {
|
|
||||||
id?: string;
|
|
||||||
tables: Table[];
|
|
||||||
|
|
||||||
constructor(id?: string, tables?: Table[]) {
|
|
||||||
this.id = id;
|
|
||||||
this.tables = tables || [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export class TableSimulationSerializer implements Serializable<TableSimulation> {
|
|
||||||
fromJson(data: any): 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)),
|
|
||||||
discomfort: {
|
|
||||||
discomfort: table.discomfort.discomfort,
|
|
||||||
breakdown: {
|
|
||||||
tableSizePenalty: table.discomfort.breakdown.table_size_penalty,
|
|
||||||
cohesionPenalty: table.discomfort.breakdown.cohesion_penalty,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
toJson(simulation: TableSimulation): string {
|
|
||||||
return JSON.stringify({ simulation: { tables: simulation.tables.map((table) => {
|
|
||||||
return {
|
|
||||||
number: table.number,
|
|
||||||
guests: table.guests.map((guest) => {
|
|
||||||
return {
|
|
||||||
id: guest.id,
|
|
||||||
name: guest.name,
|
|
||||||
color: guest.color,
|
|
||||||
status: guest.status,
|
|
||||||
children: guest.children,
|
|
||||||
group: new Group(guest.group?.id, guest.group?.name)
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
discomfort: table.discomfort,
|
|
||||||
}
|
|
||||||
}) } });
|
|
||||||
}
|
|
||||||
|
|
||||||
apiPath(): string {
|
|
||||||
return 'tables_arrangements';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -1,4 +1,4 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
export const getCsrfToken = () => {
|
export const getCsrfToken = () => {
|
||||||
return document.cookie
|
return document.cookie
|
||||||
@ -6,15 +6,3 @@ export const getCsrfToken = () => {
|
|||||||
.find((row) => row.startsWith("csrf-token"))
|
.find((row) => row.startsWith("csrf-token"))
|
||||||
?.split("=")[1] || 'unknown';
|
?.split("=")[1] || 'unknown';
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getSlug = () => localStorage.getItem('slug') || 'default';
|
|
||||||
|
|
||||||
// From https://stackoverflow.com/a/1026087/3607039
|
|
||||||
export const capitalize = (val:string) => {
|
|
||||||
return String(val).charAt(0).toUpperCase() + String(val).slice(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
// From https://stackoverflow.com/a/62118163/3607039
|
|
||||||
export function asArray<T>(value: T | T[]): T[] {
|
|
||||||
return ([] as T[]).concat(value)
|
|
||||||
}
|
|
||||||
@ -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';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
12
app/page.tsx
Normal file
12
app/page.tsx
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
|
import Link from 'next/link';
|
||||||
|
import styles from '@/app/ui/home.module.css';
|
||||||
|
|
||||||
|
export default function Page() {
|
||||||
|
return (
|
||||||
|
<main className="flex min-h-screen flex-col p-6">
|
||||||
|
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,4 +1,4 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
import * as HeroIcon from '@heroicons/react/24/outline'
|
import * as HeroIcon from '@heroicons/react/24/outline'
|
||||||
import { ComponentProps } from 'react'
|
import { ComponentProps } from 'react'
|
||||||
|
|||||||
@ -1,33 +1,40 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { AbstractApi } from '@/app/api/abstract-api';
|
import React, { useState } from 'react';
|
||||||
import { TableArrangement } from '@/app/lib/definitions';
|
import { TableArrangement, Guest } from '@/app/lib/definitions';
|
||||||
import { TableSimulation, TableSimulationSerializer } from '@/app/lib/tableSimulation';
|
|
||||||
import { Table } from '@/app/ui/components/table';
|
|
||||||
import { lusitana } from '@/app/ui/fonts';
|
import { lusitana } from '@/app/ui/fonts';
|
||||||
import { useState, useEffect } from 'react';
|
import { Table } from '@/app/ui/components/table';
|
||||||
|
|
||||||
export default function Arrangement({ id }: { id: string }) {
|
export default function Arrangement({ id }: { id: string }) {
|
||||||
|
|
||||||
const [simulation, setSimulation] = useState<TableSimulation | undefined>(undefined);
|
const [tables, setTables] = useState<Array<TableArrangement>>([]);
|
||||||
|
|
||||||
function loadSimulation() {
|
function loadTables() {
|
||||||
new AbstractApi<TableSimulation>().get(new TableSimulationSerializer(), id, (object: TableSimulation) => {
|
fetch(`/api/tables_arrangements/${id}`)
|
||||||
setSimulation(object);
|
.then((response) => response.json())
|
||||||
|
.then((data) => {
|
||||||
|
setTables(data.map((record: any) => {
|
||||||
|
return ({
|
||||||
|
id: record.number,
|
||||||
|
guests: record.guests
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
}, (error) => {
|
||||||
|
return [];
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
useEffect(loadSimulation, []);
|
tables.length === 0 && loadTables();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<div className="w-full items-center justify-between">
|
<div className="w-full items-center justify-between">
|
||||||
<h1 className={`${lusitana.className} text-2xl my-5`}>Table distributions</h1>
|
<h1 className={`${lusitana.className} text-2xl my-5`}>Table distributions</h1>
|
||||||
<div className="flex flex-row flex-wrap justify-around">
|
<div className="flex flex-row flex-wrap justify-around">
|
||||||
{simulation && simulation.tables.map((table) => (
|
{tables.map((table) => (
|
||||||
<Table key={table.number} table={table} style="rounded" />
|
<Table key={table.number} guests={table.guests || []} style="rounded" />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
@ -7,11 +7,8 @@ import { TableArrangement } from '@/app/lib/definitions';
|
|||||||
import { classNames } from "../components/button";
|
import { classNames } from "../components/button";
|
||||||
import TableOfContents from "../components/table-of-contents";
|
import TableOfContents from "../components/table-of-contents";
|
||||||
import { loadTableSimulations } from "@/app/api/tableSimulations";
|
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 }) {
|
export default function ArrangementsTable ({onArrangementSelected}: {onArrangementSelected: (arrangementId: string) => void}) {
|
||||||
const [arrangements, setArrangements] = useState<Array<TableArrangement>>([]);
|
const [arrangements, setArrangements] = useState<Array<TableArrangement>>([]);
|
||||||
const [arrangementsLoaded, setArrangementsLoaded] = useState(false);
|
const [arrangementsLoaded, setArrangementsLoaded] = useState(false);
|
||||||
|
|
||||||
@ -28,17 +25,14 @@ export default function ArrangementsTable({ onArrangementSelected }: { onArrange
|
|||||||
|
|
||||||
!arrangementsLoaded && refreshSimulations();
|
!arrangementsLoaded && refreshSimulations();
|
||||||
|
|
||||||
return (
|
return(
|
||||||
<TableOfContents
|
<TableOfContents
|
||||||
headers={['Name', 'Discomfort', 'Actions', 'Status']}
|
headers={['Name', 'Discomfort', 'Actions']}
|
||||||
caption='Simulations'
|
caption='Simulations'
|
||||||
elements={arrangements}
|
elements={arrangements}
|
||||||
rowRender={(arrangement) => (
|
rowRender={(arrangement) => (
|
||||||
<tr key={arrangement.id} className={clsx("border-b", {
|
<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">
|
||||||
"bg-white odd:bg-white even:bg-gray-50": arrangement.valid,
|
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||||
"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}
|
{arrangement.name}
|
||||||
</th>
|
</th>
|
||||||
<td className="px-6 py-4">
|
<td className="px-6 py-4">
|
||||||
@ -47,15 +41,6 @@ export default function ArrangementsTable({ onArrangementSelected }: { onArrange
|
|||||||
<td>
|
<td>
|
||||||
<button data-arrangement-id={arrangement.id} onClick={arrangementClicked} className={classNames('primary')}>Load</button>
|
<button data-arrangement-id={arrangement.id} onClick={arrangementClicked} className={classNames('primary')}>Load</button>
|
||||||
</td>
|
</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>
|
</tr>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
import clsx from 'clsx';
|
import clsx from 'clsx';
|
||||||
|
|
||||||
|
|||||||
@ -1,82 +0,0 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
|
||||||
|
|
||||||
'use client';
|
|
||||||
|
|
||||||
import { Affinities } from '@/app/lib/affinities';
|
|
||||||
import { Group } from '@/app/lib/group';
|
|
||||||
import { getCsrfToken, getSlug } from '@/app/lib/utils';
|
|
||||||
import { classNames } from '@/app/ui/components/button';
|
|
||||||
import { Dialog } from 'primereact/dialog';
|
|
||||||
import { useEffect, useState } from 'react';
|
|
||||||
import AffinitySlider from './form/affinitySlider';
|
|
||||||
|
|
||||||
export default function AffinitiesFormDialog({ groups, group, visible, onHide }: {
|
|
||||||
groups: Group[],
|
|
||||||
group?: Group,
|
|
||||||
visible: boolean,
|
|
||||||
onHide: () => void,
|
|
||||||
}) {
|
|
||||||
const [affinities, setAffinities] = useState<Affinities>({});
|
|
||||||
const [isLoadingAffinities, setIsLoadingAffinities] = useState(true);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setIsLoadingAffinities(true);
|
|
||||||
if (group?.id === undefined) {
|
|
||||||
setAffinities({});
|
|
||||||
setIsLoadingAffinities(false)
|
|
||||||
} else {
|
|
||||||
fetch(`/api/${getSlug()}/groups/${group?.id}/affinities`)
|
|
||||||
.then((response) => response.json())
|
|
||||||
.then((data) => {
|
|
||||||
setAffinities(data);
|
|
||||||
setIsLoadingAffinities(false)
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, [group]);
|
|
||||||
|
|
||||||
function submitAffinities() {
|
|
||||||
const formattedAffinities = Object.entries(affinities).map(([groupId, affinity]) => ({ group_id: groupId, affinity: affinity }));
|
|
||||||
fetch(`/api/${getSlug()}/groups/${group?.id}/affinities/bulk_update`, {
|
|
||||||
method: 'PUT',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'X-CSRF-TOKEN': getCsrfToken(),
|
|
||||||
},
|
|
||||||
body: JSON.stringify({ affinities: formattedAffinities })
|
|
||||||
}).then(() => {
|
|
||||||
onHide();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function resetAffinities() {
|
|
||||||
fetch(`/api/${getSlug()}/groups/${group?.id}/affinities/default`, {
|
|
||||||
method: 'GET',
|
|
||||||
headers: {
|
|
||||||
'Accept': 'application/json',
|
|
||||||
}
|
|
||||||
}).then((response) => response.json())
|
|
||||||
.then(setAffinities);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog header="Update affinities" visible={visible} style={{ width: '60vw' }} onHide={onHide}>
|
|
||||||
{!isLoadingAffinities && <div className="card justify-evenly py-5 bg-gray-200 flex flex-col">
|
|
||||||
<span className="text-center p-4">Describe the affinity with the rest of the groups</span>
|
|
||||||
|
|
||||||
{
|
|
||||||
groups.filter((currentGroup) => currentGroup.id !== group?.id).map((group) =>
|
|
||||||
<div key={group.id} className="flex flex-row hover:bg-gray-300 px-3 py-2 items-center">
|
|
||||||
<span className="w-1/3 text-right px-4">{group.name}</span>
|
|
||||||
<AffinitySlider value={group.id && affinities[group.id] || 1} onChange={(value) => setAffinities({ ...affinities, [group.id || "default"]: value })} />
|
|
||||||
</div>)
|
|
||||||
}
|
|
||||||
|
|
||||||
<div className="flex justify-center">
|
|
||||||
<button className={classNames('gray')} onClick={resetAffinities} >Reset</button>
|
|
||||||
<button className={classNames('primary')} onClick={submitAffinities} >Update</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</Dialog>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,15 +1,14 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
import clsx from "clsx";
|
import clsx from "clsx";
|
||||||
|
|
||||||
type ButtonColor = 'primary' | 'blue' | 'green' | 'red' | 'yellow' | 'gray';
|
type ButtonColor = 'primary' | 'blue' | 'green' | 'red' | 'yellow';
|
||||||
|
|
||||||
export function classNames(type: ButtonColor) {
|
export function classNames(type: ButtonColor) {
|
||||||
return (clsx("text-white py-1 px-2 m-2 rounded disabled:opacity-50 disabled:cursor-not-allowed", {
|
return (clsx("text-white py-1 px-2 mx-1 rounded disabled:opacity-50 disabled:cursor-not-allowed", {
|
||||||
'bg-blue-400 hover:bg-blue-600': type === 'primary' || type === 'blue',
|
'bg-blue-400 hover:bg-blue-600': type === 'primary' || type === 'blue',
|
||||||
'bg-green-500 hover:bg-green-600': type === 'green',
|
'bg-green-500 hover:bg-green-600': type === 'green',
|
||||||
'bg-red-500 hover:bg-red-600': type === 'red',
|
'bg-red-500 hover:bg-red-600': type === 'red',
|
||||||
'bg-yellow-500 hover:bg-yellow-700': type === 'yellow',
|
'bg-yellow-500 hover:bg-yellow-700': type === 'yellow'
|
||||||
'bg-gray-500 hover:bg-gray-700': type === 'gray'
|
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
@ -1,4 +1,4 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
import clsx from "clsx"
|
import clsx from "clsx"
|
||||||
import { Icon } from "../../types";
|
import { Icon } from "../../types";
|
||||||
@ -21,7 +21,7 @@ const colorClasses = (style: Style) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function MainCard({ amount, title, subtitle, style, iconName }:
|
export async function MainCard({ amount, title, subtitle, style, iconName }:
|
||||||
{
|
{
|
||||||
amount: string,
|
amount: string,
|
||||||
title: string,
|
title: string,
|
||||||
@ -42,7 +42,7 @@ export function MainCard({ amount, title, subtitle, style, iconName }:
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function SecondaryCard({ amount, title, iconName, style }: { amount: string, title: string, iconName: keyof typeof HeroIcon, style: Style }) {
|
export async function SecondaryCard({ amount, title, iconName, style }: { amount: string, title: string, iconName: keyof typeof HeroIcon, style: Style }) {
|
||||||
return (
|
return (
|
||||||
<div className={`h-12 w-80 m-1 p-2 text-white flex flex-row items-center ${colorClasses(style)}`}>
|
<div className={`h-12 w-80 m-1 p-2 text-white flex flex-row items-center ${colorClasses(style)}`}>
|
||||||
<Icon className="m-3 h-7 w-7" name={iconName} />
|
<Icon className="m-3 h-7 w-7" name={iconName} />
|
||||||
|
|||||||
@ -1,83 +0,0 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
|
||||||
|
|
||||||
'use client';
|
|
||||||
|
|
||||||
import { AbstractApi } from '@/app/api/abstract-api';
|
|
||||||
import { Expense, ExpenseSerializer, PricingType, pricingTypes } from '@/app/lib/expense';
|
|
||||||
import { capitalize } from '@/app/lib/utils';
|
|
||||||
import { classNames } from '@/app/ui/components/button';
|
|
||||||
import { Dialog } from 'primereact/dialog';
|
|
||||||
import { Dropdown } from 'primereact/dropdown';
|
|
||||||
import { FloatLabel } from 'primereact/floatlabel';
|
|
||||||
import { InputText } from 'primereact/inputtext';
|
|
||||||
import { useState } from 'react';
|
|
||||||
|
|
||||||
export default function ExpenseFormDialog({ onCreate, onHide, expense, visible }: {
|
|
||||||
onCreate?: () => void,
|
|
||||||
onHide: () => void,
|
|
||||||
expense?: Expense,
|
|
||||||
visible: boolean,
|
|
||||||
}) {
|
|
||||||
|
|
||||||
const [name, setName] = useState<string>(expense?.name || '');
|
|
||||||
const [amount, setAmount] = useState<number>(expense?.amount || 0);
|
|
||||||
const [pricingType, setPricingType] = useState<PricingType>(expense?.pricingType || 'fixed');
|
|
||||||
|
|
||||||
const api = new AbstractApi<Expense>();
|
|
||||||
const serializer = new ExpenseSerializer();
|
|
||||||
|
|
||||||
function resetForm() {
|
|
||||||
setName('');
|
|
||||||
setAmount(0);
|
|
||||||
setPricingType('fixed');
|
|
||||||
}
|
|
||||||
|
|
||||||
function submitGroup() {
|
|
||||||
if (expense?.id !== undefined) {
|
|
||||||
expense.name = name;
|
|
||||||
expense.amount = amount;
|
|
||||||
expense.pricingType = pricingType;
|
|
||||||
|
|
||||||
api.update(serializer, expense, () => {
|
|
||||||
resetForm();
|
|
||||||
onCreate && onCreate();
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
|
|
||||||
api.create(serializer, new Expense(undefined, name, amount, pricingType), () => {
|
|
||||||
resetForm();
|
|
||||||
onCreate && onCreate();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
|
|
||||||
<Dialog header="Add/edit expense" 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>
|
|
||||||
</FloatLabel>
|
|
||||||
<FloatLabel>
|
|
||||||
<InputText id="amount" className='rounded-sm' value={amount.toString()} onChange={(e) => setAmount(parseFloat(e.target.value))} />
|
|
||||||
<label htmlFor="amount">Amount</label>
|
|
||||||
</FloatLabel>
|
|
||||||
<FloatLabel>
|
|
||||||
<Dropdown id="pricingType" className='rounded-sm min-w-32' value={pricingType} onChange={(e) => setPricingType(e.target.value)} options={
|
|
||||||
pricingTypes.map((type) => {
|
|
||||||
return { label: capitalize(type), value: type };
|
|
||||||
})
|
|
||||||
} />
|
|
||||||
<label htmlFor="pricingType">Pricing type</label>
|
|
||||||
</FloatLabel>
|
|
||||||
|
|
||||||
<button className={classNames('primary')} onClick={submitGroup} disabled={!(name.length > 0)}>
|
|
||||||
{expense?.id !== undefined ? 'Update' : 'Create'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</Dialog>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
|
||||||
|
|
||||||
import { Slider } from 'primereact/slider';
|
|
||||||
|
|
||||||
export default function AffinitySlider({ value, onChange }: { value: number, onChange: (value: number) => void }) {
|
|
||||||
|
|
||||||
const toNumber = (value : number | [number, number]) => {
|
|
||||||
if(value instanceof Array) {
|
|
||||||
return value[0];
|
|
||||||
}
|
|
||||||
return value;
|
|
||||||
}
|
|
||||||
|
|
||||||
const label = (value: number) => {
|
|
||||||
if (value < 0.2) {
|
|
||||||
return 'Nemesis';
|
|
||||||
} else if (value < 0.5) {
|
|
||||||
return 'Enemies';
|
|
||||||
} else if (value < 0.9) {
|
|
||||||
return 'Bad vibes';
|
|
||||||
} else if (value < 1.1) {
|
|
||||||
return 'Neutral';
|
|
||||||
} else if (value < 1.5) {
|
|
||||||
return 'Good vibes';
|
|
||||||
} else if (value < 1.8) {
|
|
||||||
return 'Good friends';
|
|
||||||
} else {
|
|
||||||
return 'Besties';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Slider value={value} min={0} max={2} step={.1} onChange={(e) => onChange(toNumber(e.value))} className='w-80 bg-gray-400' />
|
|
||||||
<span className="px-4 w-1/5">
|
|
||||||
{label(value)}
|
|
||||||
</span>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,4 +1,4 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
|
|||||||
@ -1,95 +0,0 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
|
||||||
|
|
||||||
'use client';
|
|
||||||
|
|
||||||
import { AbstractApi } from '@/app/api/abstract-api';
|
|
||||||
import { Group, GroupSerializer } from '@/app/lib/group';
|
|
||||||
import { classNames } from '@/app/ui/components/button';
|
|
||||||
import { ColorPicker } from 'primereact/colorpicker';
|
|
||||||
import { Dialog } from 'primereact/dialog';
|
|
||||||
import { Dropdown } from 'primereact/dropdown';
|
|
||||||
import { FloatLabel } from 'primereact/floatlabel';
|
|
||||||
import { InputText } from 'primereact/inputtext';
|
|
||||||
import { useState } from 'react';
|
|
||||||
|
|
||||||
export default function GroupFormDialog({ groups, onCreate, onHide, group, visible }: {
|
|
||||||
groups: Group[],
|
|
||||||
onCreate?: (newGroup: Group) => void,
|
|
||||||
onHide: () => void,
|
|
||||||
group?: Group,
|
|
||||||
visible: boolean,
|
|
||||||
}) {
|
|
||||||
|
|
||||||
const [name, setName] = useState(group?.name || '');
|
|
||||||
const [icon, setIcon] = useState(group?.icon || '');
|
|
||||||
const [color, setColor] = useState<string>(group?.color || '');
|
|
||||||
const [parentId, setParentId] = useState(group?.parentId || '');
|
|
||||||
|
|
||||||
const api = new AbstractApi<Group>();
|
|
||||||
const serializer = new GroupSerializer();
|
|
||||||
|
|
||||||
function resetForm() {
|
|
||||||
setName('');
|
|
||||||
setIcon('');
|
|
||||||
setColor('');
|
|
||||||
setParentId('');
|
|
||||||
}
|
|
||||||
|
|
||||||
function submitGroup() {
|
|
||||||
if (!(name)) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (group?.id !== undefined) {
|
|
||||||
group.name = name;
|
|
||||||
group.icon = icon;
|
|
||||||
group.color = color;
|
|
||||||
group.parentId = parentId;
|
|
||||||
|
|
||||||
api.update(serializer, group, (newGroup) => {
|
|
||||||
resetForm();
|
|
||||||
onCreate && onCreate(newGroup);
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
|
|
||||||
api.create(serializer, new Group(undefined, name, undefined, icon, undefined, parentId, color), (newGroup) => {
|
|
||||||
resetForm();
|
|
||||||
onCreate && onCreate(newGroup);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
|
|
||||||
<Dialog header="Add group" 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>
|
|
||||||
</FloatLabel>
|
|
||||||
<FloatLabel>
|
|
||||||
<InputText id="icon" className='rounded-sm' value={icon} onChange={(e) => setIcon(e.target.value)} />
|
|
||||||
<label htmlFor="icon">Icon</label>
|
|
||||||
</FloatLabel>
|
|
||||||
<FloatLabel>
|
|
||||||
<ColorPicker value={color} format='hex' onChange={(e) => setColor(`#${e.value}`)} />
|
|
||||||
<label htmlFor="color" />
|
|
||||||
</FloatLabel>
|
|
||||||
<FloatLabel>
|
|
||||||
<Dropdown id="parentId" className='rounded-sm min-w-32' value={parentId} onChange={(e) => setParentId(e.target.value)} options={
|
|
||||||
groups.map((group) => {
|
|
||||||
return { label: group.name, value: group.id };
|
|
||||||
})
|
|
||||||
} />
|
|
||||||
<label htmlFor="parentId">Parent</label>
|
|
||||||
</FloatLabel>
|
|
||||||
|
|
||||||
<button className={classNames('primary')} onClick={submitGroup} disabled={!(name.length > 0)}>
|
|
||||||
{group?.id !== undefined ? 'Update' : 'Create'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</Dialog>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,11 +1,9 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { AbstractApi } from '@/app/api/abstract-api';
|
import { createGuest, updateGuest } from '@/app/api/guests';
|
||||||
import { Group } from '@/app/lib/group';
|
import { Group, Guest } from '@/app/lib/definitions';
|
||||||
import { Guest, GuestSerializer, GuestStatus, guestStatuses } from '@/app/lib/guest';
|
|
||||||
import { capitalize } from '@/app/lib/utils';
|
|
||||||
import { classNames } from '@/app/ui/components/button';
|
import { classNames } from '@/app/ui/components/button';
|
||||||
import { Dialog } from 'primereact/dialog';
|
import { Dialog } from 'primereact/dialog';
|
||||||
import { Dropdown } from 'primereact/dropdown';
|
import { Dropdown } from 'primereact/dropdown';
|
||||||
@ -13,45 +11,38 @@ import { FloatLabel } from 'primereact/floatlabel';
|
|||||||
import { InputText } from 'primereact/inputtext';
|
import { InputText } from 'primereact/inputtext';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
|
|
||||||
export default function GuestFormDialog({ groups, onCreate, onHide, guest, visible }: {
|
export default function GuestFormDialog({ groups, onCreate, onHide, guest, visible}: {
|
||||||
groups: Group[],
|
groups: Group[],
|
||||||
onCreate?: (guest: Guest) => void,
|
onCreate?: () => void,
|
||||||
onHide: () => void,
|
onHide: () => void,
|
||||||
guest?: Guest,
|
guest?: Guest,
|
||||||
visible: boolean,
|
visible: boolean,
|
||||||
}) {
|
}) {
|
||||||
|
|
||||||
const [name, setName] = useState(guest?.name || '');
|
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>();
|
|
||||||
const serializer = new GuestSerializer();
|
|
||||||
|
|
||||||
function resetForm() {
|
function resetForm() {
|
||||||
setName('');
|
setName('');
|
||||||
setGroup(null);
|
setGroup(null);
|
||||||
setStatus(null);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function submitGuest() {
|
function submitGuest() {
|
||||||
if (!(name && group && status)) {
|
if (!(name && group)) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (guest?.id !== undefined) {
|
if (guest?.id !== undefined) {
|
||||||
guest.name = name;
|
guest.name = name;
|
||||||
guest.group!.id = group;
|
guest.groupId = group;
|
||||||
guest.status = status;
|
updateGuest(guest).then(() => {
|
||||||
|
|
||||||
api.update(serializer, guest, (updatedGuest) => {
|
|
||||||
resetForm();
|
resetForm();
|
||||||
onCreate && onCreate(updatedGuest);
|
onCreate && onCreate();
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
api.create(serializer, new Guest(undefined, name, undefined, status, [], groups.find((g) => g.id === group)), (newGuest)=> {
|
createGuest(name, group, () => {
|
||||||
resetForm();
|
resetForm();
|
||||||
onCreate && onCreate(newGuest);
|
onCreate && onCreate();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -59,11 +50,11 @@ export default function GuestFormDialog({ groups, onCreate, onHide, guest, visib
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|
||||||
<Dialog header="Add guest" visible={visible} style={{ width: '60vw' }} onHide={onHide}>
|
<Dialog header="Add guest" visible={visible} style={{ width: '50vw' }} onHide={onHide}>
|
||||||
<div className="card flex justify-evenly py-5">
|
<div className="card flex justify-evenly py-5">
|
||||||
<FloatLabel>
|
<FloatLabel>
|
||||||
<InputText id="name" className='rounded-sm' value={name} onChange={(e) => setName(e.target.value)} />
|
<InputText id="username" className='rounded-sm' value={name} onChange={(e) => setName(e.target.value)} />
|
||||||
<label htmlFor="name">Name</label>
|
<label htmlFor="username">Username</label>
|
||||||
</FloatLabel>
|
</FloatLabel>
|
||||||
<FloatLabel>
|
<FloatLabel>
|
||||||
<Dropdown id="group" className='rounded-sm min-w-32' value={group} onChange={(e) => setGroup(e.target.value)} options={
|
<Dropdown id="group" className='rounded-sm min-w-32' value={group} onChange={(e) => setGroup(e.target.value)} options={
|
||||||
@ -73,15 +64,7 @@ export default function GuestFormDialog({ groups, onCreate, onHide, guest, visib
|
|||||||
} />
|
} />
|
||||||
<label htmlFor="group">Group</label>
|
<label htmlFor="group">Group</label>
|
||||||
</FloatLabel>
|
</FloatLabel>
|
||||||
<FloatLabel>
|
<button className={classNames('primary')} onClick={submitGuest} disabled={!(name.length > 0 && group)}>
|
||||||
<Dropdown id="status" className='rounded-sm min-w-32' value={status} onChange={(e) => setStatus(e.target.value)} options={
|
|
||||||
guestStatuses.map((status) => {
|
|
||||||
return { label: capitalize(status), value: status };
|
|
||||||
})
|
|
||||||
} />
|
|
||||||
<label htmlFor="status">Status</label>
|
|
||||||
</FloatLabel>
|
|
||||||
<button className={classNames('primary')} onClick={submitGuest} disabled={!(name.length > 0 && group && status)}>
|
|
||||||
{guest?.id !== undefined ? 'Update' : 'Create'}
|
{guest?.id !== undefined ? 'Update' : 'Create'}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,54 +0,0 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
|
||||||
|
|
||||||
'use client';
|
|
||||||
|
|
||||||
import { FloatLabel } from 'primereact/floatlabel';
|
|
||||||
import { InputText } from 'primereact/inputtext';
|
|
||||||
import { login } from '../../api/authentication';
|
|
||||||
import { useState, useEffect } from 'react';
|
|
||||||
import { classNames } from './button';
|
|
||||||
import { useRouter } from 'next/navigation'
|
|
||||||
import { User } from '../../lib/definitions';
|
|
||||||
import { getSlug } from '@/app/lib/utils';
|
|
||||||
|
|
||||||
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);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
localStorage.setItem('currentUser', JSON.stringify(currentUser));
|
|
||||||
}, [currentUser]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="card flex justify-evenly py-5">
|
|
||||||
<FloatLabel>
|
|
||||||
<InputText id="email" type="email" className='rounded-sm' onChange={(e) => setEmail(e.target.value)} />
|
|
||||||
<label htmlFor="email">Email</label>
|
|
||||||
</FloatLabel>
|
|
||||||
<FloatLabel>
|
|
||||||
<InputText id="password" type="password" className='rounded-sm' onChange={(e) => setPassword(e.target.value)} />
|
|
||||||
<label htmlFor="password">Password</label>
|
|
||||||
</FloatLabel>
|
|
||||||
<button
|
|
||||||
className={classNames('primary')}
|
|
||||||
disabled={email.length == 0 || password.length == 0}
|
|
||||||
onClick={() => login({
|
|
||||||
email: email,
|
|
||||||
password: password,
|
|
||||||
onLogin: (user) => {
|
|
||||||
setCurrentUser(user);
|
|
||||||
router.push(`${slug}/dashboard`)
|
|
||||||
}
|
|
||||||
})}>
|
|
||||||
Sign in
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,100 +0,0 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
|
||||||
|
|
||||||
'use client';
|
|
||||||
|
|
||||||
import { FloatLabel } from 'primereact/floatlabel';
|
|
||||||
import { InputText } from 'primereact/inputtext';
|
|
||||||
import { useState, useEffect } from 'react';
|
|
||||||
import { classNames } from './button';
|
|
||||||
import { getSlug } from '@/app/lib/utils';
|
|
||||||
import { register } from '@/app/api/authentication';
|
|
||||||
import { getCaptchaChallenge } from '@/app/api/captcha';
|
|
||||||
|
|
||||||
export default function RegistrationForm() {
|
|
||||||
const [submitted, setSubmitted] = useState<boolean>(false);
|
|
||||||
const [errors, setErrors] = useState<string[]>([]);
|
|
||||||
|
|
||||||
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 [captchaId, setCaptchaId] = useState<string>("");
|
|
||||||
const [captchaUrl, setCaptchaUrl] = useState<string>("");
|
|
||||||
const [captchaAnswer, setCaptchaAnswer] = useState<string>("");
|
|
||||||
|
|
||||||
const refreshCaptcha = () => {
|
|
||||||
getCaptchaChallenge({
|
|
||||||
onRetrieve: (id, url) => {
|
|
||||||
console.log(id, url);
|
|
||||||
setCaptchaId(id);
|
|
||||||
setCaptchaUrl(url);
|
|
||||||
setCaptchaAnswer("");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(refreshCaptcha, [])
|
|
||||||
|
|
||||||
return (
|
|
||||||
submitted ? (
|
|
||||||
<div className="card flex justify-evenly py-5 flex-col">
|
|
||||||
<div className="text-green-500">Registration successful. Check your email for a confirmation link.</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
|
|
||||||
<div className="card flex justify-evenly py-5 flex-col">
|
|
||||||
<FloatLabel className="my-4">
|
|
||||||
<InputText id="email" type="email" className='rounded-sm' onChange={(e) => setEmail(e.target.value)} />
|
|
||||||
<label htmlFor="email">Email</label>
|
|
||||||
</FloatLabel>
|
|
||||||
<FloatLabel className="my-4">
|
|
||||||
<InputText id="password" type="password" className='rounded-sm' onChange={(e) => setPassword(e.target.value)} />
|
|
||||||
<label htmlFor="password">Password</label>
|
|
||||||
</FloatLabel>
|
|
||||||
<FloatLabel className="my-4">
|
|
||||||
<InputText id="passwordConfirmation" type="password" className='rounded-sm' onChange={(e) => setPasswordConfirmation(e.target.value)} />
|
|
||||||
<label htmlFor="passwordConfirmation">Confirm Password</label>
|
|
||||||
</FloatLabel>
|
|
||||||
<FloatLabel className="my-4">
|
|
||||||
<InputText id="slug" type="text" className='rounded-sm' onChange={(e) => setSlug(e.target.value)} />
|
|
||||||
<label htmlFor="slug">Slug</label>
|
|
||||||
</FloatLabel>
|
|
||||||
<img className="w-96" src={captchaUrl} alt="captcha" />
|
|
||||||
<FloatLabel className="my-4">
|
|
||||||
<InputText id="captcha" type="text" className='rounded-sm' value={captchaAnswer} onChange={(e) => setCaptchaAnswer(e.target.value)} />
|
|
||||||
<label htmlFor="captcha">Captcha</label>
|
|
||||||
</FloatLabel>
|
|
||||||
|
|
||||||
{errors.map((error, index) => (
|
|
||||||
<div key={index} className="text-red-500">{error}</div>
|
|
||||||
))}
|
|
||||||
|
|
||||||
|
|
||||||
<button
|
|
||||||
className={classNames('primary')}
|
|
||||||
disabled={!(email && password && passwordConfirmation && slug && captchaAnswer)}
|
|
||||||
onClick={() => register(
|
|
||||||
{
|
|
||||||
slug: slug,
|
|
||||||
email: email,
|
|
||||||
password: password,
|
|
||||||
passwordConfirmation: passwordConfirmation,
|
|
||||||
captcha: {
|
|
||||||
id: captchaId,
|
|
||||||
answer: captchaAnswer
|
|
||||||
},
|
|
||||||
onRegister: () => { setErrors([]); setSubmitted(true) },
|
|
||||||
onError: (errors) => { refreshCaptcha(); setErrors(errors) }
|
|
||||||
}
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
Register
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,4 +1,4 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
export default function TableOfContents<Type>({ headers, caption, elements, rowRender }: { headers: string[], caption: string, elements: Type[], rowRender: (element: Type) => JSX.Element }) {
|
export default function TableOfContents<Type>({ headers, caption, elements, rowRender }: { headers: string[], caption: string, elements: Type[], rowRender: (element: Type) => JSX.Element }) {
|
||||||
return (
|
return (
|
||||||
|
|||||||
@ -1,12 +1,6 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
import { Guest } from "@/app/lib/guest";
|
|
||||||
import { Table as TableType } from "@/app/lib/tableSimulation";
|
|
||||||
import { RectangleGroupIcon, UserGroupIcon } from "@heroicons/react/24/outline";
|
|
||||||
import { v4 as uuidv4 } from 'uuid';
|
|
||||||
import { Tooltip } from "primereact/tooltip";
|
|
||||||
import clsx from "clsx";
|
|
||||||
|
|
||||||
|
import { Guest } from "@/app/lib/definitions";
|
||||||
|
|
||||||
function Dish({ guest, rotation }: { guest: Guest, rotation?: number }) {
|
function Dish({ guest, rotation }: { guest: Guest, rotation?: number }) {
|
||||||
rotation = rotation || 0
|
rotation = rotation || 0
|
||||||
@ -20,6 +14,7 @@ function Dish({ guest, rotation }: { guest: Guest, rotation?: number }) {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function GuestRow({ guests }: { guests: Guest[] }) {
|
function GuestRow({ guests }: { guests: Guest[] }) {
|
||||||
return (
|
return (
|
||||||
<div className="justify-around flex flex-row">
|
<div className="justify-around flex flex-row">
|
||||||
@ -28,8 +23,7 @@ function GuestRow({ guests }: { guests: Guest[] }) {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function RectangularTable({ table }: { table: TableType }) {
|
function RectangularTable({ guests }: { guests: Guest[] }) {
|
||||||
const guests = table.guests;
|
|
||||||
const halfwayThrough = Math.floor(guests.length / 2)
|
const halfwayThrough = Math.floor(guests.length / 2)
|
||||||
const arrayFirstHalf = guests.slice(0, halfwayThrough);
|
const arrayFirstHalf = guests.slice(0, halfwayThrough);
|
||||||
const arraySecondHalf = guests.slice(halfwayThrough, guests.length);
|
const arraySecondHalf = guests.slice(halfwayThrough, guests.length);
|
||||||
@ -42,24 +36,11 @@ function RectangularTable({ table }: { table: TableType }) {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function RoundedTable({ table }: { table: TableType }) {
|
function RoundedTable({ guests }: { guests: Guest[] }) {
|
||||||
const guests = table.guests;
|
|
||||||
const size = 500
|
const size = 500
|
||||||
const rotation = 360 / guests.length
|
const rotation = 360 / guests.length
|
||||||
|
|
||||||
const className = (penalty: number) => {
|
|
||||||
return clsx("px-2 tooltip-cohesion", {
|
|
||||||
"hidden": penalty === 0,
|
|
||||||
"text-orange-300": penalty <= 5,
|
|
||||||
"text-orange-500": penalty > 5 && penalty <= 10,
|
|
||||||
"text-orange-700": penalty > 10,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`m-12 rounded-full bg-cyan-800 relative z-0 grid flex items-center justify-items-center`} style={{ width: `${size}px`, height: `${size}px` }}>
|
<div className={`m-12 rounded-full bg-cyan-800 relative z-0`} style={{ width: `${size}px`, height: `${size}px` }}>
|
||||||
|
|
||||||
{
|
{
|
||||||
guests.map((guest, index) => {
|
guests.map((guest, index) => {
|
||||||
return (
|
return (
|
||||||
@ -73,35 +54,15 @@ function RoundedTable({ table }: { table: TableType }) {
|
|||||||
)
|
)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
<div className="bg-zinc-200 w-48 h-12 p-3 flex flex-row rounded z-10">
|
|
||||||
<div className="px-2 text-slate-800">{`Table #${table.number}`}</div>
|
|
||||||
|
|
||||||
|
|
||||||
<Tooltip target=".tooltip-cohesion" />
|
|
||||||
<Tooltip target=".tooltip-size" />
|
|
||||||
|
|
||||||
<RectangleGroupIcon
|
|
||||||
className={className(table.discomfort.breakdown.cohesionPenalty)}
|
|
||||||
data-pr-tooltip={`Cohesion penalty: ${Math.round(table.discomfort.breakdown.cohesionPenalty)}`}
|
|
||||||
data-pr-position="top"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<UserGroupIcon
|
|
||||||
className={className(table.discomfort.breakdown.tableSizePenalty)}
|
|
||||||
data-pr-tooltip={`Table size penalty: ${Math.round(table.discomfort.breakdown.tableSizePenalty)}`}
|
|
||||||
data-pr-position="top"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export function Table({ table, style }: { table: TableType, style: "rectangular" | "rounded" }) {
|
export function Table({ guests, style }: { guests: Guest[], style: "rectangular" | "rounded" }) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{style === "rectangular" && <RectangularTable table={table} />}
|
{style === "rectangular" && <RectangularTable guests={guests} />}
|
||||||
{style === "rounded" && <RoundedTable table={table} />}
|
{style === "rounded" && <RoundedTable guests={guests} />}
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -1,41 +1,45 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
import { GlobalSummary as Summary} from '@/app/lib/definitions';
|
|
||||||
import { MainCard, SecondaryCard } from '../components/dashboard-cards';
|
import { MainCard, SecondaryCard } from '../components/dashboard-cards';
|
||||||
|
|
||||||
export default function GlobalSummary({ summary }: { summary: Summary }) {
|
export default async function GlobalSummary() {
|
||||||
return (
|
return (
|
||||||
<div className="my-4">
|
<div className="my-4">
|
||||||
<div className="flex flex-row w-full my-2">
|
|
||||||
<div className="flex flex-col">
|
|
||||||
<MainCard amount={`${summary.expenses.projected.total}€`} title="Projected" subtitle={`${summary.expenses.projected.guests} guests`} style="blue" iconName="ArrowTrendingUpIcon" />
|
|
||||||
<MainCard amount={`${Math.round(summary.expenses.projected.total / summary.expenses.projected.guests)}€`} title="/ guest" iconName="UserIcon" style='blue' />
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col">
|
|
||||||
<MainCard amount={`${summary.expenses.confirmed.total}€`} title="Min." subtitle={`${summary.expenses.confirmed.guests} guests`} iconName="ChevronDoubleDownIcon" style="green" />
|
|
||||||
<MainCard amount={`${Math.round(summary.expenses.confirmed.total / summary.expenses.confirmed.guests)}€`} title="/ guest" iconName="UserIcon" style='green' />
|
|
||||||
|
|
||||||
|
<div className="flex flex-row w-full my-2">
|
||||||
|
<MainCard style="green" amount="65000€" title="Projected" subtitle="150 guests" iconName="ArrowTrendingUpIcon" />
|
||||||
|
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<MainCard amount="10000€" title="Paid already" iconName="Square3Stack3DIcon" style='blue' />
|
||||||
|
<MainCard amount="198€" title="/ guest" iconName="UserIcon" style='blue' />
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<MainCard amount={`${summary.expenses.status.paid}€`} title="Paid already" subtitle={`${Math.round(summary.expenses.status.paid / summary.expenses.projected.total * 100)}% of projected`} iconName="CheckIcon" style='blue' />
|
<MainCard amount="78000€" title="Max." subtitle='200 guests' iconName="ChevronDoubleUpIcon" style="orange" />
|
||||||
<MainCard amount={`${summary.expenses.projected.total - summary.expenses.status.paid}€`} title="To pay" subtitle={`${100 - Math.round(summary.expenses.status.paid / summary.expenses.projected.total * 100)}% of projected`} iconName="BanknotesIcon" style="orange" />
|
<MainCard amount="45000€" title="Min." subtitle="125 guests" iconName="ChevronDoubleDownIcon" style="green" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-row w-full my-2">
|
<div className="flex flex-row w-full my-2">
|
||||||
<MainCard style="blue" amount={summary.guests.total.toString()} title="Invites sent" iconName="UsersIcon" />
|
<MainCard style="blue" amount="150" title="Invites sent" iconName="UsersIcon" />
|
||||||
|
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<SecondaryCard amount={`${Math.round(summary.guests.confirmed / summary.guests.total * 100)}%`} title={`confirmed (${summary.guests.confirmed} guests)`} iconName="CheckIcon" style='green' />
|
<SecondaryCard amount="31%" title="confirmed (27 guests)" iconName="CheckIcon" style='green' />
|
||||||
<SecondaryCard amount={`${Math.round(summary.guests.declined / summary.guests.total * 100)}%`} title={`declined (${summary.guests.declined} guests)`} iconName="XMarkIcon" style='red' />
|
<SecondaryCard amount="5%" title="declined (8 guests)" iconName="XMarkIcon" style='red' />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<SecondaryCard amount={`${Math.round(summary.guests.tentative / summary.guests.total * 100)}%`} title={`tentative (${summary.guests.tentative} guests)`} iconName="QuestionMarkCircleIcon" style='orange' />
|
<SecondaryCard amount="17%" title="tentative (14 guests)" iconName="QuestionMarkCircleIcon" style='orange' />
|
||||||
<SecondaryCard amount={`${Math.round(summary.guests.invited / summary.guests.total * 100)}%`} title={`awaiting (${summary.guests.invited} guests)`} iconName="EllipsisHorizontalIcon" style='gray' />
|
<SecondaryCard amount="65%" title="awaiting (72 guests)" iconName="EllipsisHorizontalIcon" style='gray' />
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-row w-full my-2">
|
||||||
|
<MainCard style="blue" amount="5" title="Table simulations" iconName="ServerStackIcon" />
|
||||||
|
<MainCard style="blue" amount="9" title="Bus simulations" iconName="TruckIcon" />
|
||||||
|
<MainCard style="blue" amount="98" title="QR codes" iconName="QrCodeIcon" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -1,4 +1,4 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
export default function Loading() {
|
export default function Loading() {
|
||||||
return <div>Loading...</div>;
|
return <div>Loading...</div>;
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
@ -6,30 +6,23 @@ import {
|
|||||||
UserGroupIcon,
|
UserGroupIcon,
|
||||||
RectangleGroupIcon,
|
RectangleGroupIcon,
|
||||||
BanknotesIcon,
|
BanknotesIcon,
|
||||||
GlobeAltIcon,
|
|
||||||
} from '@heroicons/react/24/outline';
|
} from '@heroicons/react/24/outline';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { usePathname } from 'next/navigation';
|
import { usePathname } from 'next/navigation';
|
||||||
import clsx from 'clsx';
|
import clsx from 'clsx';
|
||||||
import { getSlug } from '@/app/lib/utils';
|
|
||||||
import { useEffect, useState } from 'react';
|
|
||||||
|
|
||||||
// Map of links to display in the side navigation.
|
// Map of links to display in the side navigation.
|
||||||
// Depending on the size of the application, this would be stored in a database.
|
// Depending on the size of the application, this would be stored in a database.
|
||||||
|
const links = [
|
||||||
|
{ name: 'Guests', href: '/dashboard/guests', icon: UserGroupIcon },
|
||||||
|
{ name: 'Expenses', href: '/dashboard/expenses', icon: BanknotesIcon },
|
||||||
|
{ name: 'Table distributions', href: '/dashboard/tables', icon: RectangleGroupIcon },
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
export default function NavLinks() {
|
export default function NavLinks() {
|
||||||
const pathname = usePathname();
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
{links.map((link) => {
|
{links.map((link) => {
|
||||||
|
|||||||
@ -1,54 +1,30 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
'use client';
|
|
||||||
|
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import NavLinks from '@/app/ui/dashboard/nav-links';
|
import NavLinks from '@/app/ui/dashboard/nav-links';
|
||||||
import { PowerIcon } from '@heroicons/react/24/outline';
|
import { PowerIcon } from '@heroicons/react/24/outline';
|
||||||
import { gloriaHallelujah } from '@/app/ui/fonts';
|
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() {
|
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 (
|
return (
|
||||||
<div className="flex h-full flex-col px-3 py-4 md:px-2">
|
<div className="flex h-full flex-col px-3 py-4 md:px-2">
|
||||||
<Link
|
<Link
|
||||||
className="mb-2 flex h-20 items-center justify-start rounded-md bg-blue-600 p-4 md:h-20"
|
className="mb-2 flex h-20 items-center justify-start rounded-md bg-blue-600 p-4 md:h-20"
|
||||||
href={`/${slug}/dashboard`}
|
href="/dashboard/guests"
|
||||||
>
|
>
|
||||||
<div className={`${gloriaHallelujah.className} "w-32 text-white md:w-40 antialiased`}>
|
<div className={`${gloriaHallelujah.className} "w-32 text-white md:w-40 antialiased` }>
|
||||||
<h1>Wedding Planner</h1>
|
<h1>Wedding Planner</h1>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
<div className="flex grow flex-row justify-between space-x-2 md:flex-col md:space-x-0 md:space-y-2">
|
<div className="flex grow flex-row justify-between space-x-2 md:flex-col md:space-x-0 md:space-y-2">
|
||||||
<NavLinks />
|
<NavLinks />
|
||||||
<div className="hidden h-auto w-full grow rounded-md bg-gray-50 md:block"></div>
|
<div className="hidden h-auto w-full grow rounded-md bg-gray-50 md:block"></div>
|
||||||
<span>Logged in as {currentUser?.email}</span>
|
<form>
|
||||||
<button
|
<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">
|
||||||
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}`);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<PowerIcon className="w-6" />
|
<PowerIcon className="w-6" />
|
||||||
<div className="hidden md:block">Sign Out</div>
|
<div className="hidden md:block">Sign Out</div>
|
||||||
</button>
|
</button>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,44 +1,42 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import { AbstractApi } from '@/app/api/abstract-api';
|
import { loadExpenses, updateExpense } from '@/app/api/expenses';
|
||||||
import { Expense, ExpenseSerializer } from '@/app/lib/expense';
|
import { Expense } from '@/app/lib/definitions';
|
||||||
import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
|
import { useState } from "react";
|
||||||
|
import InlineTextField from "../components/form/inlineTextField";
|
||||||
import TableOfContents from "../components/table-of-contents";
|
import TableOfContents from "../components/table-of-contents";
|
||||||
|
|
||||||
|
export default function ExpensesTable() {
|
||||||
|
const [expenses, setExpenses] = useState<Array<Expense>>([]);
|
||||||
|
const [expensesLoaded, setExpensesLoaded] = useState(false);
|
||||||
|
|
||||||
export default function ExpensesTable({ expenses, onUpdate, onEdit }: {
|
function refreshExpenses() {
|
||||||
expenses: Expense[],
|
loadExpenses((expenses) => {
|
||||||
onUpdate: () => void,
|
setExpenses(expenses);
|
||||||
onEdit: (expense: Expense) => void,
|
setExpensesLoaded(true);
|
||||||
}) {
|
});
|
||||||
|
}
|
||||||
|
|
||||||
const api = new AbstractApi<Expense>();
|
!expensesLoaded && refreshExpenses();
|
||||||
const serializer = new ExpenseSerializer();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TableOfContents
|
<TableOfContents
|
||||||
headers={['Name', 'Amount (€)', 'Pricing Type', 'Actions']}
|
headers={['Name', 'Amount (€)', 'Pricing Type']}
|
||||||
caption='Expenses'
|
caption='Expenses'
|
||||||
elements={expenses}
|
elements={expenses}
|
||||||
rowRender={(expense) => (
|
rowRender={(expense) => (
|
||||||
<tr key={expense.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
|
<tr key={expense.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">
|
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||||
{expense.name}
|
<InlineTextField initialValue={expense.name} onChange={(value) => { expense.name = value; updateExpense(expense) }} />
|
||||||
</th>
|
</th>
|
||||||
<td className="px-6 py-4">
|
<td className="px-6 py-4">
|
||||||
{expense.amount}
|
<InlineTextField initialValue={expense.amount.toString()} onChange={(value) => { expense.amount = parseFloat(value); updateExpense(expense) }} />
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
{expense.pricingType}
|
{expense.pricingType}
|
||||||
</td>
|
</td>
|
||||||
<td>
|
|
||||||
<div className="flex flex-row items-center">
|
|
||||||
<TrashIcon className='size-6 cursor-pointer' onClick={() => { api.destroy(serializer, expense, onUpdate) }} />
|
|
||||||
<PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(expense)} />
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
import { Inter, Lusitana, Gloria_Hallelujah} from 'next/font/google';
|
import { Inter, Lusitana, Gloria_Hallelujah} from 'next/font/google';
|
||||||
|
|
||||||
|
|||||||
@ -1,110 +1,45 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { AbstractApi } from '@/app/api/abstract-api';
|
import { Group } from '@/app/lib/definitions';
|
||||||
import { Group, GroupSerializer } from '@/app/lib/group';
|
import TableOfContents from '../components/table-of-contents';
|
||||||
import { AdjustmentsHorizontalIcon, PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
|
|
||||||
import { Column } from 'primereact/column';
|
|
||||||
import { TreeNode } from 'primereact/treenode';
|
|
||||||
import { TreeTable } from 'primereact/treetable';
|
|
||||||
|
|
||||||
export default function GroupsTable({ groups, onUpdate, onEdit, onEditAffinities }: {
|
export default function GroupsTable({ groups }: { groups: Group[] }) {
|
||||||
groups: Group[],
|
|
||||||
onUpdate: () => void,
|
|
||||||
onEdit: (group: Group) => void,
|
|
||||||
onEditAffinities: (group: Group) => void,
|
|
||||||
}) {
|
|
||||||
|
|
||||||
const api = new AbstractApi<Group>();
|
|
||||||
const serializer = new GroupSerializer();
|
|
||||||
|
|
||||||
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)
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(group)} />
|
|
||||||
<AdjustmentsHorizontalIcon className='size-6 cursor-pointer' onClick={() => onEditAffinities(group)} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const index = groups.reduce((acc, group) => {
|
|
||||||
if (group.id) {
|
|
||||||
acc.set(group.id, group)
|
|
||||||
}
|
|
||||||
|
|
||||||
return acc;
|
|
||||||
}, new Map());
|
|
||||||
|
|
||||||
groups.forEach(group => group.children = []);
|
|
||||||
groups.forEach(group => {
|
|
||||||
if (group.parentId) {
|
|
||||||
const parent = index.get(group.parentId);
|
|
||||||
if (parent) {
|
|
||||||
if (!parent.children) {
|
|
||||||
parent.children = [];
|
|
||||||
}
|
|
||||||
parent.children.push(group);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const renderTree = (group: Group): TreeNode => {
|
|
||||||
const childrenAttendance = (group.children || []).reduce((acc, child) => {
|
|
||||||
acc.confirmed += child.attendance?.confirmed || 0;
|
|
||||||
acc.tentative += child.attendance?.tentative || 0;
|
|
||||||
acc.invited += child.attendance?.invited || 0;
|
|
||||||
acc.declined += child.attendance?.declined || 0;
|
|
||||||
acc.considered += child.attendance?.considered || 0;
|
|
||||||
acc.total += child.attendance?.total || 0;
|
|
||||||
return acc;
|
|
||||||
}, { confirmed: 0, tentative: 0, invited: 0, declined: 0, considered: 0, total: 0 });
|
|
||||||
|
|
||||||
return {
|
|
||||||
id: group.id,
|
|
||||||
key: group.id,
|
|
||||||
label: group.name,
|
|
||||||
data: {
|
|
||||||
name: group.name,
|
|
||||||
color: <div className="w-8 h-8 rounded-full" style={{ backgroundColor: group.color }} />,
|
|
||||||
confirmed: childrenAttendance.confirmed + (group.attendance?.confirmed || 0),
|
|
||||||
tentative: childrenAttendance.tentative + (group.attendance?.tentative || 0),
|
|
||||||
pending: childrenAttendance.invited + (group.attendance?.invited || 0),
|
|
||||||
declined: childrenAttendance.declined + (group.attendance?.declined || 0),
|
|
||||||
considered: childrenAttendance.considered + (group.attendance?.considered || 0),
|
|
||||||
total: childrenAttendance.total + (group.attendance?.total || 0),
|
|
||||||
actions: actions(group),
|
|
||||||
},
|
|
||||||
children: group.children?.map(renderTree),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const nodes: TreeNode[] = groups
|
|
||||||
.filter(group => !group.parentId)
|
|
||||||
.map(renderTree)
|
|
||||||
|
|
||||||
const headers = ['Name', 'Color', 'Confirmed', 'Tentative', 'Pending', 'Declined', 'Considered', 'Total', 'Actions'];
|
|
||||||
const rowClassName = () => {
|
|
||||||
return { 'border-b odd:bg-white even:bg-gray-50 hover:bg-gray-100': true };
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<TableOfContents
|
||||||
<TreeTable value={nodes} rowClassName={rowClassName} className='py-4'>
|
headers={['Name', 'Color', 'Confirmed', 'Tentative', 'Pending', 'Declined', 'Considered', 'Total']}
|
||||||
<Column expander field="name" header="Name" className='w-2/5' />
|
caption='Groups'
|
||||||
<Column field="color" header="Color" bodyClassName="text-sm" />
|
elements={groups}
|
||||||
<Column field="confirmed" header="Confirmed" bodyClassName="text-sm" />
|
rowRender={(group) => (
|
||||||
<Column field="tentative" header="Tentative" bodyClassName="text-sm" />
|
<tr key={group.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
|
||||||
<Column field="pending" header="Pending" bodyClassName="text-sm" />
|
<td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||||
<Column field="declined" header="Declined" bodyClassName="text-sm" />
|
{group.name}
|
||||||
<Column field="considered" header="Considered" bodyClassName="text-sm" />
|
</td>
|
||||||
<Column field="total" header="Total" bodyClassName="text-sm" />
|
<td className="px-6">
|
||||||
<Column field="actions" header="Actions" />
|
<div className="w-8 h-8 rounded-full" style={{ backgroundColor: group.color }}></div>
|
||||||
</TreeTable>
|
</td>
|
||||||
</>
|
<td className="px-6 text-lg">
|
||||||
|
{group.attendance?.confirmed}
|
||||||
|
</td>
|
||||||
|
<td className="px-6 text-sm">
|
||||||
|
{group.attendance?.tentative}
|
||||||
|
</td>
|
||||||
|
<td className="px-6 text-sm">
|
||||||
|
{group.attendance?.invited}
|
||||||
|
</td>
|
||||||
|
<td className="px-6 text-sm">
|
||||||
|
{group.attendance?.declined}
|
||||||
|
</td>
|
||||||
|
<td className="px-6 text-sm">
|
||||||
|
{group.attendance?.considered}
|
||||||
|
</td>
|
||||||
|
<td className="px-6 text-sm">
|
||||||
|
{group.attendance?.total}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
import Skeleton from '@/app/ui/skeleton';
|
import Skeleton from '@/app/ui/skeleton';
|
||||||
|
|
||||||
|
|||||||
@ -1,9 +1,10 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { AbstractApi } from '@/app/api/abstract-api';
|
import { destroyGuest, updateGuest } from '@/app/api/guests';
|
||||||
import { Guest, GuestSerializer } from '@/app/lib/guest';
|
import { Guest, GuestStatus } from '@/app/lib/definitions';
|
||||||
|
import { classNames } from '@/app/ui/components/button';
|
||||||
import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
|
import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
|
||||||
import clsx from 'clsx';
|
import clsx from 'clsx';
|
||||||
import TableOfContents from '../components/table-of-contents';
|
import TableOfContents from '../components/table-of-contents';
|
||||||
@ -13,9 +14,10 @@ export default function guestsTable({ guests, onUpdate, onEdit }: {
|
|||||||
onUpdate: () => void,
|
onUpdate: () => void,
|
||||||
onEdit: (guest: Guest) => void
|
onEdit: (guest: Guest) => void
|
||||||
}) {
|
}) {
|
||||||
|
const handleGuestChange = (guest: Guest, status: GuestStatus) => {
|
||||||
const api = new AbstractApi<Guest>();
|
guest.status = status;
|
||||||
const serializer = new GuestSerializer();
|
updateGuest(guest).then(() => onUpdate());
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TableOfContents
|
<TableOfContents
|
||||||
@ -28,7 +30,7 @@ export default function guestsTable({ guests, onUpdate, onEdit }: {
|
|||||||
{guest.name}
|
{guest.name}
|
||||||
</td>
|
</td>
|
||||||
<td className="px-6 py-4">
|
<td className="px-6 py-4">
|
||||||
{guest.group?.name}
|
{guest.group_name}
|
||||||
</td>
|
</td>
|
||||||
<td className="px-6 py-4">
|
<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 dark:text-white me-3">
|
||||||
@ -48,12 +50,17 @@ export default function guestsTable({ guests, onUpdate, onEdit }: {
|
|||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="flex flex-row items-center">
|
<div className="flex flex-row items-center">
|
||||||
<TrashIcon className='size-6 cursor-pointer' onClick={() => {
|
{guest.status === 'considered' && (<button data-guest-id={guest.id} onClick={() => handleGuestChange(guest, 'invited')} className={classNames('blue')}>
|
||||||
if (window.confirm(`Are you sure you want to delete guest "${guest.name}"?`)) {
|
Invite
|
||||||
api.destroy(serializer, guest, onUpdate)
|
</button>)}
|
||||||
}
|
{(guest.status === 'invited' || guest.status === 'tentative') && (
|
||||||
}}
|
<>
|
||||||
/>
|
<button data-guest-id={guest.id} onClick={() => handleGuestChange(guest, 'confirmed')} className={classNames('green')}>Confirm</button>
|
||||||
|
{guest.status != 'tentative' && <button data-guest-id={guest.id} onClick={() => handleGuestChange(guest, 'tentative')} className={classNames('yellow')}>Tentative</button>}
|
||||||
|
<button data-guest-id={guest.id} onClick={() => handleGuestChange(guest, 'declined')} className={classNames('red')}>Decline</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<TrashIcon className='size-6 cursor-pointer' onClick={() => { destroyGuest(guest, () => onUpdate()) }} />
|
||||||
<PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(guest)} />
|
<PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(guest)} />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
|
|||||||
@ -1,211 +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";
|
|
||||||
import { classNames } from "../components/button";
|
|
||||||
|
|
||||||
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]);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleDownloadQrCodes() {
|
|
||||||
api.getAllPdf(serializer, () => {
|
|
||||||
console.log("QR codes downloaded");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
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={classNames('primary')}
|
|
||||||
>
|
|
||||||
Create New Invitation
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={handleDownloadQrCodes}
|
|
||||||
className={classNames('primary')}
|
|
||||||
>
|
|
||||||
Download QR codes
|
|
||||||
</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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,4 +1,4 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
export default function Skeleton({ className }: { className: string }) {
|
export default function Skeleton({ className }: { className: string }) {
|
||||||
return <div className={`bg-slate-200 motion-safe:animate-pulse rounded ${className}`} />;
|
return <div className={`bg-slate-200 motion-safe:animate-pulse rounded ${className}`} />;
|
||||||
|
|||||||
31
package.json
31
package.json
@ -6,39 +6,32 @@
|
|||||||
"start": "next start"
|
"start": "next start"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
|
|
||||||
"@heroicons/react": "^2.1.4",
|
"@heroicons/react": "^2.1.4",
|
||||||
"@tailwindcss/forms": "^0.5.7",
|
"@tailwindcss/forms": "^0.5.7",
|
||||||
"@tiptap/pm": "^2.14.0",
|
"autoprefixer": "10.4.20",
|
||||||
"@tiptap/react": "^2.14.0",
|
"bcrypt": "^5.1.1",
|
||||||
"@tiptap/starter-kit": "^2.14.0",
|
|
||||||
"autoprefixer": "10.4.21",
|
|
||||||
"bcrypt": "^6.0.0",
|
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"dompurify": "^3.2.6",
|
"next": "15.0.3",
|
||||||
"next": "15.3.4",
|
"next-auth": "5.0.0-beta.25",
|
||||||
"next-auth": "5.0.0-beta.29",
|
"postcss": "8.4.49",
|
||||||
"postcss": "8.5.6",
|
|
||||||
"primeicons": "^7.0.0",
|
"primeicons": "^7.0.0",
|
||||||
"primereact": "^10.8.2",
|
"primereact": "^10.8.2",
|
||||||
"react": "19.0.0-rc-f38c22b244-20240704",
|
"react": "19.0.0-rc-f38c22b244-20240704",
|
||||||
"react-dom": "19.0.0-rc-f38c22b244-20240704",
|
"react-dom": "19.0.0-rc-f38c22b244-20240704",
|
||||||
"tailwindcss": "3.4.17",
|
"tailwindcss": "3.4.15",
|
||||||
"typescript": "5.8.3",
|
"typescript": "5.7.2",
|
||||||
"use-debounce": "^10.0.1",
|
"use-debounce": "^10.0.1",
|
||||||
"uuid": "11.1.0",
|
|
||||||
"zod": "^3.23.8"
|
"zod": "^3.23.8"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@playwright/test": "^1.52.0",
|
"@playwright/test": "^1.46.0",
|
||||||
"@types/bcrypt": "^5.0.2",
|
"@types/bcrypt": "^5.0.2",
|
||||||
"@types/node": "24.0.7",
|
"@types/node": "22.10.1",
|
||||||
"@types/react": "18.3.23",
|
"@types/react": "18.3.12",
|
||||||
"@types/react-dom": "18.3.7",
|
"@types/react-dom": "18.3.1"
|
||||||
"wait-on": "^8.0.3"
|
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=23.0.0"
|
"node": ">=23.0.0"
|
||||||
},
|
},
|
||||||
"packageManager": "pnpm@10.12.3+sha512.467df2c586056165580ad6dfb54ceaad94c5a30f80893ebdec5a44c5aa73c205ae4a5bb9d5ed6bb84ea7c249ece786642bbb49d06a307df218d03da41c317417"
|
"packageManager": "pnpm@9.14.2+sha512.6e2baf77d06b9362294152c851c4f278ede37ab1eba3a55fda317a4a17b209f4dbb973fb250a77abc463a341fcb1f17f17cfa24091c4eb319cda0d9b84278387"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -43,6 +43,11 @@ export default defineConfig({
|
|||||||
use: { ...devices['Desktop Firefox'] },
|
use: { ...devices['Desktop Firefox'] },
|
||||||
},
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
name: 'webkit',
|
||||||
|
use: { ...devices['Desktop Safari'] },
|
||||||
|
},
|
||||||
|
|
||||||
/* Test against mobile viewports. */
|
/* Test against mobile viewports. */
|
||||||
// {
|
// {
|
||||||
// name: 'Mobile Chrome',
|
// name: 'Mobile Chrome',
|
||||||
|
|||||||
1881
pnpm-lock.yaml
generated
1881
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 { test, expect, Page } from '@playwright/test'
|
||||||
import mockGroupsAPI from './mocks/groups';
|
|
||||||
import mockGuestsAPI from './mocks/guests';
|
|
||||||
|
|
||||||
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 mockGuestsAPI({ page });
|
||||||
await mockGroupsAPI({ page });
|
|
||||||
|
|
||||||
await page.goto('/default/dashboard/guests');
|
await page.goto('/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: '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.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: '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).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: '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).getByRole('cell', { name: 'Invited' })).toBeVisible();
|
||||||
await expect(page.getByRole('row').nth(2).locator('svg')).toHaveCount(2);
|
await expect(page.getByRole('row').nth(2).getByRole('button', { name: 'Confirm' })).toBeVisible();
|
||||||
|
await expect(page.getByRole('row').nth(2).getByRole('button', { name: 'Tentative' })).toBeVisible();
|
||||||
// Add a new guest
|
await expect(page.getByRole('row').nth(2).getByRole('button', { name: 'Decline' })).toBeVisible();
|
||||||
await page.getByRole('button', { name: 'Add new' }).click();
|
});
|
||||||
|
|
||||||
await page.getByRole('dialog').getByLabel('Name').fill('John Snow');
|
test('should display the list of groups', async ({ page }) => {
|
||||||
|
await mockGroupsAPI({ page });
|
||||||
await page.locator('#group').click();
|
|
||||||
await page.getByRole('option', { name: "Pam's work" }).click();
|
await page.goto('/dashboard/guests');
|
||||||
|
await page.getByRole('tab', { name: 'Groups' }).click();
|
||||||
await page.locator('#status').click();
|
|
||||||
await page.getByRole('option', { name: 'Invited' }).click();
|
await expect(page.getByText('There are 2 elements in the list')).toBeVisible();
|
||||||
|
|
||||||
await page.getByRole('dialog').getByRole('button', { name: 'Create' }).click();
|
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();
|
||||||
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();
|
|
||||||
});
|
});
|
||||||
@ -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