feat: crowd lists frontend with list view, create/edit dialog and person management
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
363
apps/app/src/components/crowd-lists/CrowdListDetailPanel.vue
Normal file
363
apps/app/src/components/crowd-lists/CrowdListDetailPanel.vue
Normal file
@@ -0,0 +1,363 @@
|
||||
<script setup lang="ts">
|
||||
import { useCrowdListPersons, useRemovePersonFromCrowdList } from '@/composables/api/useCrowdLists'
|
||||
import { useCrowdTypeList } from '@/composables/api/useCrowdTypes'
|
||||
import { useCompanies } from '@/composables/api/useCompanies'
|
||||
import AddPersonToCrowdListDialog from '@/components/crowd-lists/AddPersonToCrowdListDialog.vue'
|
||||
import { CrowdListType } from '@/types/crowdList'
|
||||
import type { CrowdList } from '@/types/crowdList'
|
||||
import type { Person } from '@/types/person'
|
||||
|
||||
const props = defineProps<{
|
||||
eventId: string
|
||||
orgId: string
|
||||
crowdList: CrowdList | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
edit: [crowdList: CrowdList]
|
||||
}>()
|
||||
|
||||
const modelValue = defineModel<boolean>({ required: true })
|
||||
|
||||
const eventIdRef = computed(() => props.eventId)
|
||||
const orgIdRef = computed(() => props.orgId)
|
||||
const listIdRef = computed(() => props.crowdList?.id ?? '')
|
||||
|
||||
const { data: crowdTypes } = useCrowdTypeList(orgIdRef)
|
||||
const { data: companies } = useCompanies(orgIdRef)
|
||||
const { data: persons, isLoading: personsLoading, isError: personsError, refetch: refetchPersons } = useCrowdListPersons(eventIdRef, listIdRef)
|
||||
const { mutate: removePerson, isPending: isRemoving } = useRemovePersonFromCrowdList(eventIdRef)
|
||||
|
||||
const crowdTypeName = computed(() => {
|
||||
if (!props.crowdList) return '-'
|
||||
return crowdTypes.value?.find(ct => ct.id === props.crowdList!.crowd_type_id)?.name ?? '-'
|
||||
})
|
||||
|
||||
const companyName = computed(() => {
|
||||
if (!props.crowdList?.recipient_company_id) return null
|
||||
return companies.value?.find(c => c.id === props.crowdList!.recipient_company_id)?.name ?? '-'
|
||||
})
|
||||
|
||||
const capacityPercentage = computed(() => {
|
||||
if (!props.crowdList?.max_persons) return null
|
||||
return Math.round((props.crowdList.persons_count / props.crowdList.max_persons) * 100)
|
||||
})
|
||||
|
||||
const capacityColor = computed(() => {
|
||||
const pct = capacityPercentage.value
|
||||
if (pct === null) return 'primary'
|
||||
if (pct >= 80) return 'success'
|
||||
if (pct >= 50) return 'warning'
|
||||
return 'error'
|
||||
})
|
||||
|
||||
const existingPersonIds = computed(() =>
|
||||
(persons.value ?? []).map((p: Person) => p.id),
|
||||
)
|
||||
|
||||
const isAddPersonDialogOpen = ref(false)
|
||||
const isRemoveDialogOpen = ref(false)
|
||||
const removingPerson = ref<Person | null>(null)
|
||||
const showSuccess = ref(false)
|
||||
const successMessage = ref('')
|
||||
|
||||
function onRemoveConfirm(person: Person) {
|
||||
removingPerson.value = person
|
||||
isRemoveDialogOpen.value = true
|
||||
}
|
||||
|
||||
function onRemoveExecute() {
|
||||
if (!removingPerson.value || !props.crowdList) return
|
||||
const name = removingPerson.value.name
|
||||
|
||||
removePerson(
|
||||
{ listId: props.crowdList.id, personId: removingPerson.value.id },
|
||||
{
|
||||
onSuccess: () => {
|
||||
isRemoveDialogOpen.value = false
|
||||
removingPerson.value = null
|
||||
successMessage.value = `${name} verwijderd van lijst`
|
||||
showSuccess.value = true
|
||||
refetchPersons()
|
||||
},
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
function getInitials(name: string) {
|
||||
return name
|
||||
.split(' ')
|
||||
.map(p => p[0])
|
||||
.join('')
|
||||
.toUpperCase()
|
||||
.slice(0, 2)
|
||||
}
|
||||
|
||||
const dateFormatter = new Intl.DateTimeFormat('nl-NL', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
})
|
||||
|
||||
function formatDate(iso: string) {
|
||||
return dateFormatter.format(new Date(iso))
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VNavigationDrawer
|
||||
v-model="modelValue"
|
||||
location="end"
|
||||
temporary
|
||||
:width="520"
|
||||
>
|
||||
<template v-if="crowdList">
|
||||
<!-- Header -->
|
||||
<div class="pa-6">
|
||||
<div class="d-flex justify-space-between align-start mb-4">
|
||||
<div>
|
||||
<h5 class="text-h5 mb-1">
|
||||
{{ crowdList.name }}
|
||||
</h5>
|
||||
<div class="d-flex gap-x-2">
|
||||
<VChip
|
||||
:color="crowdList.type === CrowdListType.INTERNAL ? 'primary' : 'info'"
|
||||
size="small"
|
||||
>
|
||||
{{ crowdList.type === CrowdListType.INTERNAL ? 'Intern' : 'Extern' }}
|
||||
</VChip>
|
||||
<VChip
|
||||
v-if="crowdList.is_full"
|
||||
color="error"
|
||||
size="small"
|
||||
>
|
||||
Vol
|
||||
</VChip>
|
||||
<VChip
|
||||
v-if="crowdList.auto_approve"
|
||||
color="success"
|
||||
size="small"
|
||||
variant="tonal"
|
||||
>
|
||||
Auto-approve
|
||||
</VChip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex gap-x-1">
|
||||
<VBtn
|
||||
icon="tabler-edit"
|
||||
variant="text"
|
||||
size="small"
|
||||
title="Bewerken"
|
||||
@click="emit('edit', crowdList)"
|
||||
/>
|
||||
<VBtn
|
||||
icon="tabler-x"
|
||||
variant="text"
|
||||
size="small"
|
||||
title="Sluiten"
|
||||
@click="modelValue = false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<!-- Info section -->
|
||||
<div class="pa-6">
|
||||
<VList class="pa-0">
|
||||
<VListItem>
|
||||
<template #prepend>
|
||||
<VIcon
|
||||
icon="tabler-users-group"
|
||||
class="me-3"
|
||||
/>
|
||||
</template>
|
||||
<VListItemTitle>Crowd Type</VListItemTitle>
|
||||
<VListItemSubtitle>{{ crowdTypeName }}</VListItemSubtitle>
|
||||
</VListItem>
|
||||
|
||||
<VListItem v-if="companyName">
|
||||
<template #prepend>
|
||||
<VIcon
|
||||
icon="tabler-building"
|
||||
class="me-3"
|
||||
/>
|
||||
</template>
|
||||
<VListItemTitle>Ontvangende organisatie</VListItemTitle>
|
||||
<VListItemSubtitle>{{ companyName }}</VListItemSubtitle>
|
||||
</VListItem>
|
||||
|
||||
<VListItem>
|
||||
<template #prepend>
|
||||
<VIcon
|
||||
icon="tabler-calendar"
|
||||
class="me-3"
|
||||
/>
|
||||
</template>
|
||||
<VListItemTitle>Aangemaakt op</VListItemTitle>
|
||||
<VListItemSubtitle>{{ formatDate(crowdList.created_at) }}</VListItemSubtitle>
|
||||
</VListItem>
|
||||
</VList>
|
||||
|
||||
<!-- Capacity progress -->
|
||||
<template v-if="crowdList.max_persons">
|
||||
<VDivider class="my-4" />
|
||||
<div class="d-flex justify-space-between align-center mb-2">
|
||||
<span class="text-body-2 font-weight-medium">Capaciteit</span>
|
||||
<span class="text-body-2">
|
||||
{{ crowdList.persons_count }} / {{ crowdList.max_persons }} personen
|
||||
</span>
|
||||
</div>
|
||||
<VProgressLinear
|
||||
:model-value="capacityPercentage ?? 0"
|
||||
:color="capacityColor"
|
||||
rounded
|
||||
height="8"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<!-- Persons section -->
|
||||
<div class="pa-6">
|
||||
<div class="d-flex justify-space-between align-center mb-4">
|
||||
<h6 class="text-h6">
|
||||
Personen ({{ crowdList.persons_count }})
|
||||
</h6>
|
||||
<VBtn
|
||||
size="small"
|
||||
prepend-icon="tabler-plus"
|
||||
:disabled="crowdList.is_full"
|
||||
@click="isAddPersonDialogOpen = true"
|
||||
>
|
||||
Toevoegen
|
||||
</VBtn>
|
||||
</div>
|
||||
|
||||
<!-- Loading -->
|
||||
<VSkeletonLoader
|
||||
v-if="personsLoading"
|
||||
type="list-item-avatar@3"
|
||||
/>
|
||||
|
||||
<!-- Error -->
|
||||
<VAlert
|
||||
v-else-if="personsError"
|
||||
type="error"
|
||||
variant="tonal"
|
||||
class="mb-4"
|
||||
>
|
||||
Kon personen niet laden.
|
||||
<template #append>
|
||||
<VBtn
|
||||
variant="text"
|
||||
size="small"
|
||||
@click="refetchPersons()"
|
||||
>
|
||||
Opnieuw
|
||||
</VBtn>
|
||||
</template>
|
||||
</VAlert>
|
||||
|
||||
<!-- Empty -->
|
||||
<VCard
|
||||
v-else-if="!persons?.length"
|
||||
variant="outlined"
|
||||
class="text-center pa-6"
|
||||
>
|
||||
<VIcon
|
||||
icon="tabler-users"
|
||||
size="36"
|
||||
class="mb-2 text-disabled"
|
||||
/>
|
||||
<p class="text-body-2 text-disabled mb-0">
|
||||
Nog geen personen op deze lijst
|
||||
</p>
|
||||
</VCard>
|
||||
|
||||
<!-- Person list -->
|
||||
<VList
|
||||
v-else
|
||||
class="pa-0"
|
||||
>
|
||||
<VListItem
|
||||
v-for="person in persons"
|
||||
:key="person.id"
|
||||
>
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
size="32"
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
class="me-3"
|
||||
>
|
||||
<span class="text-caption">{{ getInitials(person.name) }}</span>
|
||||
</VAvatar>
|
||||
</template>
|
||||
<VListItemTitle>{{ person.name }}</VListItemTitle>
|
||||
<VListItemSubtitle>{{ person.email }}</VListItemSubtitle>
|
||||
<template #append>
|
||||
<VBtn
|
||||
icon="tabler-x"
|
||||
variant="text"
|
||||
size="small"
|
||||
color="error"
|
||||
title="Verwijderen van lijst"
|
||||
@click="onRemoveConfirm(person)"
|
||||
/>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Add person dialog -->
|
||||
<AddPersonToCrowdListDialog
|
||||
v-if="crowdList"
|
||||
v-model="isAddPersonDialogOpen"
|
||||
:event-id="eventId"
|
||||
:crowd-list="crowdList"
|
||||
:existing-person-ids="existingPersonIds"
|
||||
/>
|
||||
|
||||
<!-- Remove confirmation -->
|
||||
<VDialog
|
||||
v-model="isRemoveDialogOpen"
|
||||
max-width="400"
|
||||
>
|
||||
<VCard title="Persoon verwijderen van lijst">
|
||||
<VCardText>
|
||||
Weet je zeker dat je <strong>{{ removingPerson?.name }}</strong> wilt verwijderen van deze lijst?
|
||||
</VCardText>
|
||||
<VCardActions>
|
||||
<VSpacer />
|
||||
<VBtn
|
||||
variant="text"
|
||||
@click="isRemoveDialogOpen = false"
|
||||
>
|
||||
Annuleren
|
||||
</VBtn>
|
||||
<VBtn
|
||||
color="error"
|
||||
:loading="isRemoving"
|
||||
@click="onRemoveExecute"
|
||||
>
|
||||
Verwijderen
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
|
||||
<!-- Success snackbar -->
|
||||
<VSnackbar
|
||||
v-model="showSuccess"
|
||||
color="success"
|
||||
:timeout="3000"
|
||||
>
|
||||
{{ successMessage }}
|
||||
</VSnackbar>
|
||||
</VNavigationDrawer>
|
||||
</template>
|
||||
Reference in New Issue
Block a user