stuve-it
/
stuve-it-frontend
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(events): privileged users can now see entries
Build and Push Docker image / build-and-push (push) Successful in 1m53s Details

This commit is contained in:
Valentin Kolb 2024-05-29 14:00:10 +02:00
parent 594a7f42fd
commit 21edac4e43
15 changed files with 191 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/main.tsx
View File

@ -17,6 +17,7 @@ import "@fontsource/overpass"
import "@fontsource/fira-code"
import {Notifications} from "@mantine/notifications";
import {ModalsProvider} from "@mantine/modals";
import {ReactQueryDevtools} from "@tanstack/react-query-devtools";
export const queryClient = new QueryClient()
@ -45,8 +46,8 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
<PocketBaseProvider>
<Router/>
</PocketBaseProvider>
{/*
<ReactQueryDevtools initialIsOpen={false}/>
{/*
*/}
</QueryClientProvider>
</ModalsProvider>

6
src/pages/events/EventNavigate.tsx
View File

@ -19,11 +19,11 @@ export default function EventNavigate() {
const eventQuery = useQuery({
queryKey: ["event", eventId],
queryFn: async () => (await pb.collection("events").getOne(eventId, {
expand: "eventAdmins, privilegedLists"
expand: "eventAdmins, privilegedLists, privilegedLists.eventListSlots_via_eventList.eventListSlotEntries_via_eventListsSlot"
}))
})
const {canEditEventList, canEditEvent} = useEventRights(eventQuery.data)
const {isPrivilegedUser, canEditEvent} = useEventRights(eventQuery.data)
if (eventQuery.isLoading) {
return <LoadingOverlay/>
@ -37,7 +37,7 @@ export default function EventNavigate() {
return <Navigate to={`/events/e/${eventId}`} replace/>
}
if (canEditEventList) {
if (isPrivilegedUser) {
return <Navigate to={`/events/e/${eventId}/lists`} replace/>
}

12
src/pages/events/EventOverview/EventList.tsx
View File

@ -43,7 +43,7 @@ import {useEventRights} from "@/pages/events/util.ts";
*/
const EventRow = ({event}: { event: EventModel }) => {
const {canEditEventList, canEditEvent} = useEventRights(event)
const {isPrivilegedUser, canEditEvent} = useEventRights(event)
const [opened, handlers] = useDisclosure(false)
@ -108,12 +108,13 @@ const EventRow = ({event}: { event: EventModel }) => {
<IconUserStar/>
</ThemeIcon>
</Tooltip>
) : canEditEventList ?
<Tooltip label={"Du bist Listen Admin"} position={"left"} color={"green"} withArrow>
) : isPrivilegedUser ?
<Tooltip label={"Du kannst das Event einsehen"} position={"left"} color={"green"}
withArrow>
<ThemeIcon
color={"green"}
variant={"transparent"}
aria-label={"you are list admin"}
aria-label={"you are a privileged user"}
size={"xs"}
mr={"sm"}
>
@ -185,7 +186,8 @@ export const EventList = () => {
return await pb.collection("events").getList(activePage, 10, {
sort: sort,
filter: [`hideFromPublic = false`, ...filter].join(" && ")
filter: [`hideFromPublic = false`, ...filter].join(" && "),
expand: "privilegedLists.eventListSlots_via_eventList.eventListSlotEntries_via_eventListsSlot"
}
)
}

6
src/pages/events/e/:eventId/EditEventRouter.tsx
View File

@ -89,11 +89,11 @@ export default function EditEventRouter() {
const eventQuery = useQuery({
queryKey: ["event", eventId],
queryFn: async () => (await pb.collection("events").getOne(eventId, {
expand: "eventAdmins, privilegedLists"
expand: "eventAdmins, privilegedLists, privilegedLists.eventListSlots_via_eventList.eventListSlotEntries_via_eventListsSlot"
}))
})
const {canEditEventList, canEditEvent} = useEventRights(eventQuery.data)
const {isPrivilegedUser, canEditEvent} = useEventRights(eventQuery.data)
if (eventQuery.isLoading) {
return <LoadingOverlay/>
@ -103,7 +103,7 @@ export default function EditEventRouter() {
return <NotFound/>
}
if (!(canEditEvent || canEditEventList)) {
if (!(canEditEvent || isPrivilegedUser)) {
return <Navigate to={`/events/s/${eventId}`} replace/>
}

62
src/pages/events/e/:eventId/EventLists/:listId/EventListRouter.tsx
View File

@ -22,6 +22,8 @@ import ListEntryStatusSettings
from "@/pages/events/e/:eventId/EventLists/:listId/ListSettings/ListEntryStatusSettings.tsx";
import ShowDebug from "@/components/ShowDebug.tsx";
import {pprintDateTime} from "@/lib/datetime.ts";
import {useEventRights} from "@/pages/events/util.ts";
import NotFound from "@/pages/not-found/index.page.tsx";
export default function EventListRouter({event}: { event: EventModel }) {
@ -35,6 +37,8 @@ export default function EventListRouter({event}: { event: EventModel }) {
queryFn: async () => (await pb.collection("eventLists").getOne(listId))
})
const {canEditEvent} = useEventRights(event)
if (listQuery.isLoading) {
return <LoadingOverlay/>
}
@ -45,6 +49,34 @@ export default function EventListRouter({event}: { event: EventModel }) {
const list = listQuery.data
const nav = [
{
icon: <IconClockCog/>,
to: `/events/e/${event.id}/lists/overview/${list.id}/slots`,
title: "Zeitslots"
}
]
if (canEditEvent) {
nav.push(...[
{
icon: <IconSettings/>,
to: `/events/e/${event.id}/lists/overview/${list.id}/settings`,
title: "Einstellungen"
},
{
icon: <IconForms/>,
to: `/events/e/${event.id}/lists/overview/${list.id}/questions`,
title: "Formular"
},
{
icon: <IconCheckupList/>,
to: `/events/e/${event.id}/lists/overview/${list.id}/status`,
title: "Eintrag Status"
}
])
}
return <div className={"stack"}>
<Breadcrumbs>
<Link to={`/events/e/${event.id}/lists/overview`}>
@ -97,28 +129,7 @@ export default function EventListRouter({event}: { event: EventModel }) {
</div>
<Group>
{[
{
icon: <IconClockCog/>,
to: `/events/e/${event.id}/lists/overview/${list.id}/slots`,
title: "Zeitslots"
},
{
icon: <IconSettings/>,
to: `/events/e/${event.id}/lists/overview/${list.id}/settings`,
title: "Einstellungen"
},
{
icon: <IconForms/>,
to: `/events/e/${event.id}/lists/overview/${list.id}/questions`,
title: "Formular"
},
{
icon: <IconCheckupList/>,
to: `/events/e/${event.id}/lists/overview/${list.id}/status`,
title: "Eintrag Status"
}
].map(({icon, to, title}) => (
{nav.map(({icon, to, title}) => (
<NavLink to={to} key={title} end>
{({isActive}) =>
<Button
@ -134,10 +145,15 @@ export default function EventListRouter({event}: { event: EventModel }) {
<Routes>
<Route index element={<Navigate to={"slots"} replace/>}/>
<Route path={"slots"} element={<ListSlots list={list}/>}/>
<Route path={"slots"} element={<ListSlots event={event} list={list}/>}/>
{canEditEvent && <>
<Route path={"settings"} element={<ListSettings list={list} event={event}/>}/>
<Route path={"questions"} element={<ListEntryQuestionSettings list={list} event={event}/>}/>
<Route path={"status"} element={<ListEntryStatusSettings list={list} event={event}/>}/>
</>}
<Route path={"*"} element={<NotFound/>}/>
</Routes>
</div>
}

11
src/pages/events/e/:eventId/EventLists/:listId/ListSlots/ListSlotRow.tsx
View File

@ -1,4 +1,4 @@
import {EventListModel, EventListSlotsWithEntriesCountModel} from "@/models/EventTypes.ts";
import {EventListModel, EventListSlotsWithEntriesCountModel, EventModel} from "@/models/EventTypes.ts";
import {useDisclosure} from "@mantine/hooks";
import classes from "./ListSlotRow.module.css";
import {ActionIcon, Alert, Code, Group, Modal} from "@mantine/core";
@ -10,13 +10,16 @@ import ShowDebug from "@/components/ShowDebug.tsx";
import UpsertSlot from "@/pages/events/e/:eventId/EventLists/EventListComponents/UpsertSlot.tsx";
import SlotProgress from "@/pages/events/e/:eventId/EventLists/EventListComponents/SlotProgress.tsx";
import {pprintDateTime} from "@/lib/datetime.ts";
import {useEventRights} from "@/pages/events/util.ts";
export const ListSlotRow = ({slot, list, refetch}: {
export const ListSlotRow = ({slot, list, refetch, event}: {
slot: EventListSlotsWithEntriesCountModel,
list: EventListModel,
refetch: () => void
refetch: () => void,
event: EventModel
}) => {
const {canEditEvent} = useEventRights(event)
const [showEditModal, showEditModalHandler] = useDisclosure(false)
return (
@ -32,7 +35,6 @@ export const ListSlotRow = ({slot, list, refetch}: {
}} onAbort={showEditModalHandler.close}/>
</Modal>
<div className={classes.slotRow}>
<RenderDateRange start={new Date(slot.startDate)} end={new Date(slot.endDate)}/>
<SlotProgress slot={slot}/>
<Group gap={4} justify="right" wrap="nowrap">
@ -40,6 +42,7 @@ export const ListSlotRow = ({slot, list, refetch}: {
size="sm"
variant="subtle"
color="blue"
disabled={!canEditEvent}
onClick={(e) => {
e.stopPropagation()
showEditModalHandler.toggle()

5
src/pages/events/e/:eventId/EventLists/:listId/ListSlots/index.tsx
View File

@ -1,4 +1,4 @@
import {EventListModel} from "@/models/EventTypes.ts";
import {EventListModel, EventModel} from "@/models/EventTypes.ts";
import {PocketBaseErrorAlert, usePB} from "@/lib/pocketbase.tsx";
import {useQuery} from "@tanstack/react-query";
import {Box, Button, Center, Pagination, Title} from "@mantine/core";
@ -16,7 +16,7 @@ import UpsertSlot from "@/pages/events/e/:eventId/EventLists/EventListComponents
* @param event - event the list belongs to
* @constructor
*/
export default function ListSlots({list}: { list: EventListModel }) {
export default function ListSlots({list, event}: { list: EventListModel, event: EventModel }) {
const {pb} = usePB()
@ -40,6 +40,7 @@ export default function ListSlots({list}: { list: EventListModel }) {
<div className={classes.table}>
{query.data?.items.map(slot => (
<ListSlotRow
event={event}
key={slot.id} list={list} slot={slot}
refetch={query.refetch}
/>

12
src/pages/events/e/:eventId/EventLists/EventListComponents/EditSlotEntryMenu.tsx
View File

@ -1,4 +1,4 @@
import {EventListSlotEntriesWithUserModel} from "@/models/EventTypes.ts";
import {EventListSlotEntriesWithUserModel, EventModel} from "@/models/EventTypes.ts";
import {useMutation} from "@tanstack/react-query";
import {showSuccessNotification} from "@/components/util.tsx";
import {useConfirmModal} from "@/components/ConfirmModal.tsx";
@ -13,16 +13,19 @@ import {
} from "@/pages/events/e/:eventId/EventLists/EventListComponents/UpdateEntryStatusModal.tsx";
import {MoveEntryModal} from "@/pages/events/e/:eventId/EventLists/EventListComponents/MoveEntryModal.tsx";
import EntryStatusSpoiler from "@/pages/events/e/:eventId/EventLists/EventListComponents/EntryStatusSpoiler.tsx";
import {getListSchemas} from "@/pages/events/util.ts";
import {getListSchemas, useEventRights} from "@/pages/events/util.ts";
export default function EditSlotEntryMenu({entry, refetch}: {
export default function EditSlotEntryMenu({entry, refetch, event}: {
refetch: () => void,
entry: EventListSlotEntriesWithUserModel
entry: EventListSlotEntriesWithUserModel,
event: EventModel
}) {
const {pb} = usePB()
const {canEditEvent} = useEventRights(event)
const [showStatusEditModal, showStatusEditModalHandler] = useDisclosure(false)
const [showMoveEntryModal, showMoveEntryModalHandler] = useDisclosure(false)
@ -107,6 +110,7 @@ export default function EditSlotEntryMenu({entry, refetch}: {
<Menu.Item
color={"red"} leftSection={<IconTrash size={16}/>}
onClick={toggleConfirmModal}
disabled={!canEditEvent}
>
Löschen
</Menu.Item>

5
src/pages/events/e/:eventId/EventLists/EventListsOverview.tsx
View File

@ -26,6 +26,7 @@ import {IconArrowRight, IconListSearch, IconLock, IconLockOpen, IconPlus} from "
import {useRef, useState} from "react";
import {useDebouncedState} from "@mantine/hooks";
import {onlyUnique} from "@/lib/util.ts";
import {useEventRights} from "@/pages/events/util.ts";
/**
* Renders a single List as clickable row (link)
@ -124,8 +125,11 @@ export default function EventListsOverview({event}: { event: EventModel }) {
const newListNameRef = useRef<HTMLInputElement>(null)
const {canEditEvent} = useEventRights(event)
return (
<div className={"stack"}>
{canEditEvent &&
<form
className={"section stack"}
onSubmit={formValues.onSubmit(() => createListMutation.mutate())}
@ -171,6 +175,7 @@ export default function EventListsOverview({event}: { event: EventModel }) {
</Box>
</Collapse>
</form>
}
<Autocomplete
placeholder={"Nach einer Liste suchen ..."}

23
src/pages/events/e/:eventId/EventLists/EventListsRouter.tsx
View File

@ -11,9 +11,11 @@ import EditDefaultEntryStatusSchema
from "@/pages/events/e/:eventId/EventLists/GeneralListSettings/EditDefaultEntryStatusSchema.tsx";
import EditDefaultEntryQuestionSchema
from "@/pages/events/e/:eventId/EventLists/GeneralListSettings/EditDefaultEntryQuestionSchema.tsx";
import {useEventRights} from "@/pages/events/util.ts";
import NotFound from "@/pages/not-found/index.page.tsx";
const nav = [
const viewNav = [
{
label: "Listenaktionen",
children: [
@ -34,6 +36,10 @@ const nav = [
}
]
},
]
const editNav = [
{
label: "Einstellungen",
children: [
@ -48,7 +54,7 @@ const nav = [
to: "e/status"
}
]
},
}
]
/**
@ -58,6 +64,13 @@ const nav = [
*/
export const EventListsMenu = ({event, target}: { event: EventModel, target: ReactNode }) => {
const {canEditEvent} = useEventRights(event)
const nav = [...viewNav]
if (canEditEvent) {
nav.push(...editNav)
}
return <>
<Menu
withArrow shadow="md" width={200} trigger="click-hover" loop={false}
@ -89,6 +102,8 @@ export const EventListsMenu = ({event, target}: { event: EventModel, target: Rea
export default function EventListsRouter({event}: { event: EventModel }) {
const {canEditEvent} = useEventRights(event)
return <>
<Routes>
<Route index element={<Navigate to={"overview"} replace/>}/>
@ -96,11 +111,15 @@ export default function EventListsRouter({event}: { event: EventModel }) {
<Route path={"search"} element={<EventListSearch event={event}/>}/>
<Route path={"share"} element={<ShareEventLists event={event}/>}/>
{canEditEvent && <>
<Route path={"e/status"} element={<EditDefaultEntryStatusSchema event={event}/>}/>
<Route path={"e/questions"} element={<EditDefaultEntryQuestionSchema event={event}/>}/>
</>}
<Route path={"overview"} element={<EventListsOverview event={event}/>}/>
<Route path={"overview/:listId/*"} element={<EventListRouter event={event}/>}/>
<Route path={"*"} element={<NotFound/>}/>
</Routes>
</>
}

16
src/pages/events/e/:eventId/EventLists/Search/EventEntries.tsx
View File

@ -1,4 +1,4 @@
import {EventListSlotEntriesWithUserModel} from "@/models/EventTypes.ts";
import {EventListSlotEntriesWithUserModel, EventModel} from "@/models/EventTypes.ts";
import classes from "./EventEntries.module.css";
import {ActionIcon, Code, Collapse, ThemeIcon, Tooltip} from "@mantine/core";
import {IconEye, IconEyeOff, IconList, IconUser} from "@tabler/icons-react";
@ -16,9 +16,10 @@ import {RenderDateRange} from "@/pages/events/e/:eventId/EventLists/EventListCom
import EditSlotEntryMenu from "@/pages/events/e/:eventId/EventLists/EventListComponents/EditSlotEntryMenu.tsx";
import {Link} from "react-router-dom";
function EventEntry({entry, refetch}: {
function EventEntry({entry, refetch, event}: {
entry: EventListSlotEntriesWithUserModel,
refetch: () => void
refetch: () => void,
event: EventModel
}) {
const [expanded, expandedHandler] = useDisclosure(false)
@ -55,7 +56,7 @@ function EventEntry({entry, refetch}: {
{expanded ? <IconEyeOff/> : <IconEye/>}
</ActionIcon>
</Tooltip>
<EditSlotEntryMenu entry={entry} refetch={refetch}/>
<EditSlotEntryMenu event={event} entry={entry} refetch={refetch}/>
</div>
</div>
@ -81,11 +82,12 @@ function EventEntry({entry, refetch}: {
</>
}
export default function EventEntries({entries, refetch}: {
export default function EventEntries({entries, refetch, event}: {
entries: EventListSlotEntriesWithUserModel[],
refetch: () => void
refetch: () => void,
event: EventModel
}) {
return <div className={classes.mainGrid}>
{entries.map(entry => <EventEntry key={entry.id} entry={entry} refetch={refetch}/>)}
{entries.map(entry => <EventEntry event={event} key={entry.id} entry={entry} refetch={refetch}/>)}
</div>
}

16
src/pages/events/e/:eventId/EventLists/Search/index.tsx
View File

@ -12,7 +12,15 @@ import {
Title,
Tooltip
} from "@mantine/core";
import {IconArrowDown, IconFilter, IconFilterEdit, IconFilterOff, IconSend, IconUserSearch} from "@tabler/icons-react";
import {
IconArrowDown,
IconCsv,
IconFilter,
IconFilterEdit,
IconFilterOff,
IconSend,
IconUserSearch
} from "@tabler/icons-react";
import {useInfiniteQuery} from "@tanstack/react-query";
import {useDebouncedValue, useDisclosure} from "@mantine/hooks";
import {PocketBaseErrorAlert, usePB} from "@/lib/pocketbase.tsx";
@ -188,6 +196,10 @@ export default function ListSearch({event}: { event: EventModel }) {
<Button size={"xs"} leftSection={<IconSend size={16}/>} disabled>
{entriesCount} Personen benachrichtigen
</Button>
<Button size={"xs"} leftSection={<IconCsv size={16}/>} disabled>
Daten exportieren
</Button>
</Group>
</div>
</Collapse>
@ -206,7 +218,7 @@ export default function ListSearch({event}: { event: EventModel }) {
<PocketBaseErrorAlert error={query.error}/>
<EventEntries entries={entries} refetch={() => query.refetch()}/>
<EventEntries event={event} entries={entries} refetch={() => query.refetch()}/>
{query.hasNextPage && (
<Center p={"xs"}>

4
src/pages/events/s/EventView.tsx
View File

@ -41,7 +41,7 @@ export default function SharedEvent() {
enabled: !!eventId
})
const {canEditEventList, canEditEvent} = useEventRights(eventQuery.data)
const {isPrivilegedUser, canEditEvent} = useEventRights(eventQuery.data)
const {handler: loginHandler} = useLogin()
@ -112,7 +112,7 @@ export default function SharedEvent() {
</Alert>
</div>}
{canEditEventList && <div className={"section-transparent"}>
{isPrivilegedUser && <div className={"section-transparent"}>
<Alert color={"green"} title={"Du kannst dieses Event und alle Teilnehmenden ansehen"}>
<Button
component={"a"}

10
src/pages/events/util.ts
View File

@ -1,5 +1,7 @@
import {
EventListSlotEntriesWithUserModel,
EventListSlotEntryModel,
EventListSlotModel,
EventListSlotsWithEntriesCountModel,
EventModel
} from "@/models/EventTypes.ts";
@ -20,9 +22,15 @@ export const useEventRights = (event?: EventModel) => {
)
const isEventAdmin = !!(user && event && event.eventAdmins.includes(user.id))
// for this to work the query of the event must include this backrelation expand:
// 'privilegedLists.eventListSlots_via_eventList.eventListSlotEntries_via_eventListsSlot'
const privilegedUsers = event?.expand?.privilegedLists?.flatMap(pl =>
pl?.expand?.eventListSlots_via_eventList.flatMap((els: EventListSlotModel) =>
els?.expand?.eventListSlotEntries_via_eventListsSlot.flatMap((e: EventListSlotEntryModel) => e.user))) ?? []
return {
canEditEvent: isEventAdmin || isStex,
canEditEventList: false
isPrivilegedUser: privilegedUsers.includes(user?.id),
}
}

16
src/pages/test/DebugPage.tsx
View File

@ -1,5 +1,5 @@
import {useShowDebug} from "@/components/ShowDebug.tsx";
import {ActionIcon, Alert, Group, LoadingOverlay, Pagination, Text, TextInput, Title} from "@mantine/core";
import {ActionIcon, Alert, Divider, Group, LoadingOverlay, Pagination, Text, TextInput, Title} from "@mantine/core";
import {useForm} from "@mantine/form";
import {useQuery} from "@tanstack/react-query";
import {PocketBaseErrorAlert, usePB} from "@/lib/pocketbase.tsx";
@ -23,13 +23,13 @@ export default function DebugPage() {
filter: "",
sort: "",
expand: "",
select: ""
}
})
const debugQuery = useQuery({
queryKey: ["debug", formValues.values.collectionName, formValues.values.filter, formValues.values.sort, formValues.values.expand],
queryFn: async () => {
const options: RecordListOptions = {}
if (formValues.values.filter) options["filter"] = formValues.values.filter
@ -50,6 +50,8 @@ export default function DebugPage() {
</Alert>
</div>)
const result = formValues.values.select ? debugQuery.data?.items.map(i => i[formValues.values.select]) : debugQuery.data?.items
return <>
<div className={"section"}>
<Title c={"orange"} order={1}>Debug</Title>
@ -76,6 +78,14 @@ export default function DebugPage() {
placeholder={"expand"}
{...formValues.getInputProps("expand")}
/>
<Divider label={"client only"}/>
<TextInput
label={"Select"}
placeholder={"select"}
{...formValues.getInputProps("select")}
/>
</div>
<div className={"section stack"} style={{position: "relative"}}>
@ -102,7 +112,7 @@ export default function DebugPage() {
</ActionIcon>
</Group>
<CodeHighlight code={JSON.stringify(debugQuery.data.items, null, 2)} language="json"/>
<CodeHighlight code={JSON.stringify(result, null, 2)} language="json"/>
</div>}
</div>