bert.hausmans/crewli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(portal): shift claiming and my-shifts for volunteer portal

Browse Source 
Backend: PortalShiftController with 4 endpoints (available-shifts,
my-shifts, claim, cancel) delegating to ShiftAssignmentService.
24 PHPUnit tests covering happy paths, auth, conflicts, and edge cases.

Frontend: claim-shifts and my-shifts pages with TanStack Query
composable, conflict detection, confirmation dialogs, and cancel flow.
Navigation and dashboard cards wired up for approved volunteers.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
bert.hausmans
2026-04-13 08:47:12 +02:00
parent 0d5523dbfe
commit 5173f7297f
10 changed files with 1790 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

259
api/app/Http/Controllers/Api/V1/Portal/PortalShiftController.php Normal file
View File

@@ -0,0 +1,259 @@
<?php
declare(strict_types=1);
namespace App\Http\Controllers\Api\V1\Portal;
use App\Enums\CancellationSource;
use App\Enums\ShiftAssignmentStatus;
use App\Http\Controllers\Controller;
use App\Models\Event;
use App\Models\Person;
use App\Models\Shift;
use App\Models\ShiftAssignment;
use App\Services\ShiftAssignmentService;
use Carbon\Carbon;
use Illuminate\Http\JsonResponse;
use Illuminate\Http\Request;
use Illuminate\Validation\ValidationException;
final class PortalShiftController extends Controller
{
public function __construct(
private readonly ShiftAssignmentService $shiftAssignmentService,
) {}
public function availableShifts(Request $request, Event $event): JsonResponse
{
$person = $this->resolvePerson($event);
if ($person->status !== 'approved') {
return $this->forbidden('Je moet eerst goedgekeurd zijn om diensten te claimen.');
}
$shifts = Shift::query()
->where('status', 'open')
->where('slots_open_for_claiming', '>', 0)
->whereHas('timeSlot', fn ($q) => $q->where('event_id', $event->id)->where('person_type', 'VOLUNTEER'))
->with(['festivalSection', 'timeSlot', 'location'])
->withCount([
'shiftAssignments as active_assignments_count' => fn ($q) => $q->whereNotIn('status', [
ShiftAssignmentStatus::REJECTED,
ShiftAssignmentStatus::CANCELLED,
]),
])
->get()
->filter(fn (Shift $s) => $s->active_assignments_count < $s->slots_open_for_claiming);
// Get person's active assignments for conflict detection
$personActiveTimeSlots = ShiftAssignment::where('person_id', $person->id)
->active()
->pluck('time_slot_id')
->toArray();
// Group by date, then time slot
$grouped = $shifts
->groupBy(fn (Shift $s) => $s->timeSlot->date->format('Y-m-d'))
->sortKeys()
->map(function ($dateShifts, string $date) use ($personActiveTimeSlots) {
$carbonDate = Carbon::parse($date);
$timeSlots = $dateShifts
->groupBy(fn (Shift $s) => $s->time_slot_id)
->map(function ($slotShifts) use ($personActiveTimeSlots) {
$timeSlot = $slotShifts->first()->timeSlot;
$hasConflict = in_array($timeSlot->id, $personActiveTimeSlots);
return [
'time_slot_id' => $timeSlot->id,
'name' => $timeSlot->name,
'start_time' => Carbon::parse($timeSlot->start_time)->format('H:i'),
'end_time' => Carbon::parse($timeSlot->end_time)->format('H:i'),
'shifts' => $slotShifts->map(function (Shift $shift) use ($hasConflict) {
$slotsAvailable = $shift->slots_open_for_claiming - $shift->active_assignments_count;
return [
'id' => $shift->id,
'title' => $shift->title,
'section_name' => $shift->festivalSection->name,
'section_icon' => $shift->festivalSection->icon,
'location_name' => $shift->location?->name,
'slots_total' => $shift->slots_total,
'slots_open_for_claiming' => $shift->slots_open_for_claiming,
'slots_claimed' => $shift->active_assignments_count,
'slots_available' => max(0, $slotsAvailable),
'has_conflict' => $hasConflict && !$shift->allow_overlap,
'conflict_reason' => ($hasConflict && !$shift->allow_overlap)
? 'Je hebt al een dienst op dit tijdslot.'
: null,
'report_time' => $shift->report_time
? Carbon::parse($shift->report_time)->format('H:i')
: null,
'description' => $shift->description,
];
})->values()->all(),
];
})
->values()
->all();
return [
'date' => $date,
'date_label' => ucfirst($carbonDate->translatedFormat('l j F')),
'time_slots' => $timeSlots,
];
})
->values()
->all();
return $this->success($grouped);
}
public function myShifts(Request $request, Event $event): JsonResponse
{
$person = $this->resolvePerson($event);
$assignments = ShiftAssignment::where('person_id', $person->id)
->whereHas('shift.timeSlot', fn ($q) => $q->where('event_id', $event->id))
->with(['shift.festivalSection', 'shift.timeSlot', 'shift.location'])
->get();
$today = now()->format('Y-m-d');
$formatted = $assignments->map(function (ShiftAssignment $a) use ($today) {
$shift = $a->shift;
$timeSlot = $shift->timeSlot;
$isFuture = $timeSlot->date->format('Y-m-d') >= $today;
$canCancel = $isFuture && in_array($a->status, [
ShiftAssignmentStatus::PENDING_APPROVAL,
ShiftAssignmentStatus::APPROVED,
]);
return [
'assignment_id' => $a->id,
'status' => $a->status->value,
'shift_title' => $shift->title,
'section_name' => $shift->festivalSection->name,
'section_icon' => $shift->festivalSection->icon,
'location_name' => $shift->location?->name,
'date' => $timeSlot->date->format('Y-m-d'),
'date_label' => ucfirst($timeSlot->date->translatedFormat('l j F')),
'start_time' => Carbon::parse($timeSlot->start_time)->format('H:i'),
'end_time' => Carbon::parse($timeSlot->end_time)->format('H:i'),
'report_time' => $shift->report_time
? Carbon::parse($shift->report_time)->format('H:i')
: null,
'can_cancel' => $canCancel,
];
});
$upcoming = $formatted->filter(
fn ($a) => $a['date'] >= $today && in_array($a['status'], ['pending_approval', 'approved']),
)->sortBy('date')->values()->all();
$past = $formatted->filter(
fn ($a) => $a['date'] < $today && in_array($a['status'], ['approved', 'completed']),
)->sortByDesc('date')->values()->all();
$cancelled = $formatted->filter(
fn ($a) => in_array($a['status'], ['cancelled', 'rejected']),
)->sortByDesc('date')->values()->all();
return $this->success([
'upcoming' => $upcoming,
'past' => $past,
'cancelled' => $cancelled,
]);
}
public function claim(Request $request, Event $event, Shift $shift): JsonResponse
{
$person = $this->resolvePerson($event);
if ($person->status !== 'approved') {
return $this->forbidden('Je moet eerst goedgekeurd zijn om diensten te claimen.');
}
try {
$assignment = $this->shiftAssignmentService->claim($shift, $person);
} catch (ValidationException $e) {
$messages = collect($e->errors())->flatten();
$message = $messages->first() ?? 'Er is een fout opgetreden.';
// Map internal messages to portal-friendly messages
$portalMessage = $this->mapClaimErrorMessage($message);
return $this->error($portalMessage, 422);
}
$isApproved = $assignment->status === ShiftAssignmentStatus::APPROVED;
return $this->success([
'assignment_id' => $assignment->id,
'status' => $assignment->status->value,
'message' => $isApproved
? 'Je bent ingepland!'
: 'Je claim is ingediend en wacht op goedkeuring.',
]);
}
public function cancel(Request $request, Event $event, ShiftAssignment $shiftAssignment): JsonResponse
{
$person = $this->resolvePerson($event);
// Must be the person's own assignment
if ($shiftAssignment->person_id !== $person->id) {
return $this->forbidden('Je kunt alleen je eigen diensten annuleren.');
}
// Must be cancellable status
if (!in_array($shiftAssignment->status, [ShiftAssignmentStatus::PENDING_APPROVAL, ShiftAssignmentStatus::APPROVED])) {
return $this->error('Deze dienst kan niet meer worden geannuleerd.', 422);
}
// Must be a future shift
$timeSlot = $shiftAssignment->shift->timeSlot;
if ($timeSlot->date->format('Y-m-d') < now()->format('Y-m-d')) {
return $this->error('Je kunt geen diensten in het verleden annuleren.', 422);
}
try {
$this->shiftAssignmentService->cancel(
$shiftAssignment,
$request->user(),
CancellationSource::VOLUNTEER,
);
} catch (ValidationException $e) {
$messages = collect($e->errors())->flatten();
return $this->error($messages->first() ?? 'Er is een fout opgetreden.', 422);
}
return $this->success(['message' => 'Je dienst is geannuleerd.']);
}
private function resolvePerson(Event $event): Person
{
return Person::where('user_id', auth()->id())
->where('event_id', $event->id)
->firstOrFail();
}
private function mapClaimErrorMessage(string $message): string
{
if (str_contains($message, 'niet open')) {
return 'Deze dienst is niet beschikbaar voor inschrijving.';
}
if (str_contains($message, 'niet goedgekeurd') || str_contains($message, 'Persoon is nog niet')) {
return 'Je moet eerst goedgekeurd zijn om diensten te claimen.';
}
if (str_contains($message, 'claimbare slots') || str_contains($message, 'Geen claimbare')) {
return 'Deze dienst is helaas al vol.';
}
if (str_contains($message, 'al ingepland')) {
return 'Je hebt al een dienst op dit tijdslot.';
}
return $message;
}
}

5
api/routes/api.php
View File

@@ -31,6 +31,7 @@ use App\Http\Controllers\Api\V1\PublicRegistrationDataController;
use App\Http\Controllers\Api\V1\PortalTokenController;
use App\Http\Controllers\Api\V1\PasswordResetController;
use App\Http\Controllers\Api\V1\PortalMeController;
use App\Http\Controllers\Api\V1\Portal\PortalShiftController;
use App\Http\Controllers\Api\V1\UserOrganisationTagController;
use App\Models\FestivalSection;
use App\Models\Organisation;
@@ -79,6 +80,10 @@ Route::middleware('auth:sanctum')->group(function () {
// Portal (authenticated)
Route::get('portal/me', [PortalMeController::class, 'index']);
Route::get('portal/events/{event}/available-shifts', [PortalShiftController::class, 'availableShifts']);
Route::get('portal/events/{event}/my-shifts', [PortalShiftController::class, 'myShifts']);
Route::post('portal/events/{event}/shifts/{shift}/claim', [PortalShiftController::class, 'claim']);
Route::post('portal/events/{event}/assignments/{shiftAssignment}/cancel', [PortalShiftController::class, 'cancel']);
// Organisations
Route::apiResource('organisations', OrganisationController::class)

627
api/tests/Feature/Api/V1/Portal/PortalShiftClaimingTest.php Normal file
View File

@@ -0,0 +1,627 @@
<?php
declare(strict_types=1);
namespace Tests\Feature\Api\V1\Portal;
use App\Enums\ShiftAssignmentStatus;
use App\Models\CrowdType;
use App\Models\Event;
use App\Models\FestivalSection;
use App\Models\Location;
use App\Models\Organisation;
use App\Models\Person;
use App\Models\Shift;
use App\Models\ShiftAssignment;
use App\Models\TimeSlot;
use App\Models\User;
use Database\Seeders\RoleSeeder;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Laravel\Sanctum\Sanctum;
use Tests\TestCase;
class PortalShiftClaimingTest extends TestCase
{
use RefreshDatabase;
private User $volunteer;
private Organisation $organisation;
private Event $event;
private FestivalSection $section;
private TimeSlot $timeSlot;
private CrowdType $crowdType;
private Person $person;
protected function setUp(): void
{
parent::setUp();
$this->seed(RoleSeeder::class);
$this->organisation = Organisation::factory()->create();
$this->volunteer = User::factory()->create();
$this->organisation->users()->attach($this->volunteer, ['role' => 'org_member']);
$this->event = Event::factory()->create(['organisation_id' => $this->organisation->id]);
$this->section = FestivalSection::factory()->create([
'event_id' => $this->event->id,
'crew_auto_accepts' => false,
]);
$this->timeSlot = TimeSlot::factory()->create([
'event_id' => $this->event->id,
'person_type' => 'VOLUNTEER',
'date' => now()->addMonth(),
]);
$this->crowdType = CrowdType::factory()->systemType('VOLUNTEER')->create([
'organisation_id' => $this->organisation->id,
]);
$this->person = Person::factory()->approved()->create([
'event_id' => $this->event->id,
'crowd_type_id' => $this->crowdType->id,
'user_id' => $this->volunteer->id,
]);
}
private function createOpenShift(array $overrides = []): Shift
{
return Shift::factory()->open()->create(array_merge([
'festival_section_id' => $this->section->id,
'time_slot_id' => $this->timeSlot->id,
'slots_total' => 4,
'slots_open_for_claiming' => 3,
], $overrides));
}
// =========================================================================
// Available shifts
// =========================================================================
public function test_available_shifts_returns_grouped_by_date_and_time_slot(): void
{
$shift = $this->createOpenShift(['title' => 'Tapper']);
Sanctum::actingAs($this->volunteer);
$response = $this->getJson("/api/v1/portal/events/{$this->event->id}/available-shifts");
$response->assertOk()
->assertJsonStructure([
'data' => [
'*' => [
'date',
'date_label',
'time_slots' => [
'*' => [
'time_slot_id',
'name',
'start_time',
'end_time',
'shifts' => [
'*' => [
'id',
'title',
'section_name',
'section_icon',
'location_name',
'slots_total',
'slots_open_for_claiming',
'slots_claimed',
'slots_available',
'has_conflict',
'conflict_reason',
'report_time',
'description',
],
],
],
],
],
],
]);
$this->assertCount(1, $response->json('data'));
$this->assertEquals('Tapper', $response->json('data.0.time_slots.0.shifts.0.title'));
}
public function test_available_shifts_only_shows_volunteer_time_slots(): void
{
// Create a CREW time slot with a shift — should not appear
$crewSlot = TimeSlot::factory()->create([
'event_id' => $this->event->id,
'person_type' => 'CREW',
'date' => now()->addMonth(),
]);
$this->createOpenShift(['time_slot_id' => $crewSlot->id]);
// Create a VOLUNTEER shift — should appear
$this->createOpenShift(['title' => 'Volunteer Shift']);
Sanctum::actingAs($this->volunteer);
$response = $this->getJson("/api/v1/portal/events/{$this->event->id}/available-shifts");
$response->assertOk();
$allShifts = collect($response->json('data'))
->flatMap(fn ($day) => collect($day['time_slots']))
->flatMap(fn ($ts) => $ts['shifts']);
$this->assertCount(1, $allShifts);
$this->assertEquals('Volunteer Shift', $allShifts->first()['title']);
}
public function test_available_shifts_excludes_full_shifts(): void
{
$shift = $this->createOpenShift(['slots_open_for_claiming' => 1]);
// Fill the claimable slot
ShiftAssignment::factory()->create([
'shift_id' => $shift->id,
'person_id' => Person::factory()->approved()->create([
'event_id' => $this->event->id,
'crowd_type_id' => $this->crowdType->id,
])->id,
'time_slot_id' => $this->timeSlot->id,
'status' => ShiftAssignmentStatus::PENDING_APPROVAL,
]);
Sanctum::actingAs($this->volunteer);
$response = $this->getJson("/api/v1/portal/events/{$this->event->id}/available-shifts");
$response->assertOk();
$allShifts = collect($response->json('data'))
->flatMap(fn ($day) => collect($day['time_slots']))
->flatMap(fn ($ts) => $ts['shifts']);
$this->assertCount(0, $allShifts);
}
public function test_available_shifts_marks_conflicting_shifts(): void
{
$shift = $this->createOpenShift();
// Create existing assignment on same time slot
ShiftAssignment::factory()->approved()->create([
'shift_id' => Shift::factory()->open()->create([
'festival_section_id' => $this->section->id,
'time_slot_id' => $this->timeSlot->id,
])->id,
'person_id' => $this->person->id,
'time_slot_id' => $this->timeSlot->id,
]);
Sanctum::actingAs($this->volunteer);
$response = $this->getJson("/api/v1/portal/events/{$this->event->id}/available-shifts");
$response->assertOk();
$shiftData = $response->json('data.0.time_slots.0.shifts.0');
$this->assertTrue($shiftData['has_conflict']);
$this->assertNotNull($shiftData['conflict_reason']);
}
public function test_available_shifts_pending_person_gets_403(): void
{
$pendingUser = User::factory()->create();
$this->organisation->users()->attach($pendingUser, ['role' => 'org_member']);
Person::factory()->create([
'event_id' => $this->event->id,
'crowd_type_id' => $this->crowdType->id,
'user_id' => $pendingUser->id,
'status' => 'pending',
]);
Sanctum::actingAs($pendingUser);
$response = $this->getJson("/api/v1/portal/events/{$this->event->id}/available-shifts");
$response->assertForbidden();
}
public function test_available_shifts_unauthenticated_returns_401(): void
{
$response = $this->getJson("/api/v1/portal/events/{$this->event->id}/available-shifts");
$response->assertUnauthorized();
}
public function test_available_shifts_only_shows_open_status_shifts(): void
{
// Draft shift — should not appear
Shift::factory()->create([
'festival_section_id' => $this->section->id,
'time_slot_id' => $this->timeSlot->id,
'slots_total' => 4,
'slots_open_for_claiming' => 3,
'status' => 'draft',
]);
// Open shift — should appear
$this->createOpenShift(['title' => 'Open Shift']);
Sanctum::actingAs($this->volunteer);
$response = $this->getJson("/api/v1/portal/events/{$this->event->id}/available-shifts");
$response->assertOk();
$allShifts = collect($response->json('data'))
->flatMap(fn ($day) => collect($day['time_slots']))
->flatMap(fn ($ts) => $ts['shifts']);
$this->assertCount(1, $allShifts);
$this->assertEquals('Open Shift', $allShifts->first()['title']);
}
// =========================================================================
// My shifts
// =========================================================================
public function test_my_shifts_returns_sections(): void
{
$futureSlot = $this->timeSlot; // Already future
$pastSlot = TimeSlot::factory()->create([
'event_id' => $this->event->id,
'person_type' => 'VOLUNTEER',
'date' => now()->subMonth(),
]);
$futureShift = $this->createOpenShift();
$pastShift = $this->createOpenShift(['time_slot_id' => $pastSlot->id]);
// Upcoming approved
ShiftAssignment::factory()->approved()->create([
'shift_id' => $futureShift->id,
'person_id' => $this->person->id,
'time_slot_id' => $futureSlot->id,
]);
// Past approved
ShiftAssignment::factory()->approved()->create([
'shift_id' => $pastShift->id,
'person_id' => $this->person->id,
'time_slot_id' => $pastSlot->id,
]);
// Cancelled
ShiftAssignment::factory()->create([
'shift_id' => Shift::factory()->open()->create([
'festival_section_id' => $this->section->id,
'time_slot_id' => $futureSlot->id,
'slots_total' => 4,
'slots_open_for_claiming' => 3,
])->id,
'person_id' => $this->person->id,
'time_slot_id' => $futureSlot->id,
'status' => ShiftAssignmentStatus::CANCELLED,
]);
Sanctum::actingAs($this->volunteer);
$response = $this->getJson("/api/v1/portal/events/{$this->event->id}/my-shifts");
$response->assertOk()
->assertJsonStructure([
'data' => [
'upcoming',
'past',
'cancelled',
],
]);
$this->assertCount(1, $response->json('data.upcoming'));
$this->assertCount(1, $response->json('data.past'));
$this->assertCount(1, $response->json('data.cancelled'));
}
public function test_my_shifts_can_cancel_future_pending(): void
{
$shift = $this->createOpenShift();
ShiftAssignment::factory()->create([
'shift_id' => $shift->id,
'person_id' => $this->person->id,
'time_slot_id' => $this->timeSlot->id,
'status' => ShiftAssignmentStatus::PENDING_APPROVAL,
]);
Sanctum::actingAs($this->volunteer);
$response = $this->getJson("/api/v1/portal/events/{$this->event->id}/my-shifts");
$response->assertOk();
$this->assertTrue($response->json('data.upcoming.0.can_cancel'));
}
public function test_my_shifts_cannot_cancel_past_shifts(): void
{
$pastSlot = TimeSlot::factory()->create([
'event_id' => $this->event->id,
'person_type' => 'VOLUNTEER',
'date' => now()->subMonth(),
]);
$pastShift = $this->createOpenShift(['time_slot_id' => $pastSlot->id]);
ShiftAssignment::factory()->approved()->create([
'shift_id' => $pastShift->id,
'person_id' => $this->person->id,
'time_slot_id' => $pastSlot->id,
]);
Sanctum::actingAs($this->volunteer);
$response = $this->getJson("/api/v1/portal/events/{$this->event->id}/my-shifts");
$response->assertOk();
$this->assertFalse($response->json('data.past.0.can_cancel'));
}
public function test_my_shifts_only_returns_own_assignments(): void
{
$shift = $this->createOpenShift();
// Other person's assignment
$otherPerson = Person::factory()->approved()->create([
'event_id' => $this->event->id,
'crowd_type_id' => $this->crowdType->id,
]);
ShiftAssignment::factory()->approved()->create([
'shift_id' => $shift->id,
'person_id' => $otherPerson->id,
'time_slot_id' => $this->timeSlot->id,
]);
Sanctum::actingAs($this->volunteer);
$response = $this->getJson("/api/v1/portal/events/{$this->event->id}/my-shifts");
$response->assertOk();
$this->assertCount(0, $response->json('data.upcoming'));
$this->assertCount(0, $response->json('data.past'));
$this->assertCount(0, $response->json('data.cancelled'));
}
public function test_my_shifts_unauthenticated_returns_401(): void
{
$response = $this->getJson("/api/v1/portal/events/{$this->event->id}/my-shifts");
$response->assertUnauthorized();
}
// =========================================================================
// Claim
// =========================================================================
public function test_successful_claim_returns_assignment(): void
{
$shift = $this->createOpenShift();
Sanctum::actingAs($this->volunteer);
$response = $this->postJson("/api/v1/portal/events/{$this->event->id}/shifts/{$shift->id}/claim");
$response->assertOk()
->assertJsonPath('data.status', 'pending_approval')
->assertJsonPath('data.message', 'Je claim is ingediend en wacht op goedkeuring.');
$this->assertDatabaseHas('shift_assignments', [
'shift_id' => $shift->id,
'person_id' => $this->person->id,
'status' => ShiftAssignmentStatus::PENDING_APPROVAL->value,
]);
}
public function test_auto_approve_claim_returns_approved_status(): void
{
$autoSection = FestivalSection::factory()->create([
'event_id' => $this->event->id,
'crew_auto_accepts' => true,
]);
$shift = $this->createOpenShift(['festival_section_id' => $autoSection->id]);
Sanctum::actingAs($this->volunteer);
$response = $this->postJson("/api/v1/portal/events/{$this->event->id}/shifts/{$shift->id}/claim");
$response->assertOk()
->assertJsonPath('data.status', 'approved')
->assertJsonPath('data.message', 'Je bent ingepland!');
}
public function test_claim_full_shift_returns_422(): void
{
$shift = $this->createOpenShift(['slots_open_for_claiming' => 1]);
// Fill the claimable slot
ShiftAssignment::factory()->create([
'shift_id' => $shift->id,
'person_id' => Person::factory()->approved()->create([
'event_id' => $this->event->id,
'crowd_type_id' => $this->crowdType->id,
])->id,
'time_slot_id' => $this->timeSlot->id,
'status' => ShiftAssignmentStatus::PENDING_APPROVAL,
]);
Sanctum::actingAs($this->volunteer);
$response = $this->postJson("/api/v1/portal/events/{$this->event->id}/shifts/{$shift->id}/claim");
$response->assertUnprocessable()
->assertJsonFragment(['message' => 'Deze dienst is helaas al vol.']);
}
public function test_claim_conflict_returns_422(): void
{
$shift1 = $this->createOpenShift();
$shift2 = $this->createOpenShift();
ShiftAssignment::factory()->approved()->create([
'shift_id' => $shift1->id,
'person_id' => $this->person->id,
'time_slot_id' => $this->timeSlot->id,
]);
Sanctum::actingAs($this->volunteer);
$response = $this->postJson("/api/v1/portal/events/{$this->event->id}/shifts/{$shift2->id}/claim");
$response->assertUnprocessable()
->assertJsonFragment(['message' => 'Je hebt al een dienst op dit tijdslot.']);
}
public function test_claim_pending_person_returns_403(): void
{
$pendingUser = User::factory()->create();
$this->organisation->users()->attach($pendingUser, ['role' => 'org_member']);
Person::factory()->create([
'event_id' => $this->event->id,
'crowd_type_id' => $this->crowdType->id,
'user_id' => $pendingUser->id,
'status' => 'pending',
]);
$shift = $this->createOpenShift();
Sanctum::actingAs($pendingUser);
$response = $this->postJson("/api/v1/portal/events/{$this->event->id}/shifts/{$shift->id}/claim");
$response->assertForbidden();
}
public function test_claim_draft_shift_returns_422(): void
{
$shift = Shift::factory()->create([
'festival_section_id' => $this->section->id,
'time_slot_id' => $this->timeSlot->id,
'slots_total' => 4,
'slots_open_for_claiming' => 3,
'status' => 'draft',
]);
Sanctum::actingAs($this->volunteer);
$response = $this->postJson("/api/v1/portal/events/{$this->event->id}/shifts/{$shift->id}/claim");
$response->assertUnprocessable();
}
public function test_claim_unauthenticated_returns_401(): void
{
$shift = $this->createOpenShift();
$response = $this->postJson("/api/v1/portal/events/{$this->event->id}/shifts/{$shift->id}/claim");
$response->assertUnauthorized();
}
// =========================================================================
// Cancel
// =========================================================================
public function test_successful_cancel(): void
{
$shift = $this->createOpenShift();
$assignment = ShiftAssignment::factory()->approved()->create([
'shift_id' => $shift->id,
'person_id' => $this->person->id,
'time_slot_id' => $this->timeSlot->id,
]);
Sanctum::actingAs($this->volunteer);
$response = $this->postJson(
"/api/v1/portal/events/{$this->event->id}/assignments/{$assignment->id}/cancel",
);
$response->assertOk()
->assertJsonPath('data.message', 'Je dienst is geannuleerd.');
$this->assertDatabaseHas('shift_assignments', [
'id' => $assignment->id,
'status' => ShiftAssignmentStatus::CANCELLED->value,
'cancellation_source' => 'volunteer',
]);
}
public function test_cannot_cancel_someone_elses_assignment(): void
{
$otherPerson = Person::factory()->approved()->create([
'event_id' => $this->event->id,
'crowd_type_id' => $this->crowdType->id,
]);
$shift = $this->createOpenShift();
$assignment = ShiftAssignment::factory()->approved()->create([
'shift_id' => $shift->id,
'person_id' => $otherPerson->id,
'time_slot_id' => $this->timeSlot->id,
]);
Sanctum::actingAs($this->volunteer);
$response = $this->postJson(
"/api/v1/portal/events/{$this->event->id}/assignments/{$assignment->id}/cancel",
);
$response->assertForbidden();
}
public function test_cannot_cancel_completed_assignment(): void
{
$shift = $this->createOpenShift();
$assignment = ShiftAssignment::factory()->create([
'shift_id' => $shift->id,
'person_id' => $this->person->id,
'time_slot_id' => $this->timeSlot->id,
'status' => ShiftAssignmentStatus::COMPLETED,
]);
Sanctum::actingAs($this->volunteer);
$response = $this->postJson(
"/api/v1/portal/events/{$this->event->id}/assignments/{$assignment->id}/cancel",
);
$response->assertUnprocessable();
}
public function test_cannot_cancel_past_assignment(): void
{
$pastSlot = TimeSlot::factory()->create([
'event_id' => $this->event->id,
'person_type' => 'VOLUNTEER',
'date' => now()->subMonth(),
]);
$shift = $this->createOpenShift(['time_slot_id' => $pastSlot->id]);
$assignment = ShiftAssignment::factory()->approved()->create([
'shift_id' => $shift->id,
'person_id' => $this->person->id,
'time_slot_id' => $pastSlot->id,
]);
Sanctum::actingAs($this->volunteer);
$response = $this->postJson(
"/api/v1/portal/events/{$this->event->id}/assignments/{$assignment->id}/cancel",
);
$response->assertUnprocessable();
}
public function test_cancel_unauthenticated_returns_401(): void
{
$shift = $this->createOpenShift();
$assignment = ShiftAssignment::factory()->approved()->create([
'shift_id' => $shift->id,
'person_id' => $this->person->id,
'time_slot_id' => $this->timeSlot->id,
]);
$response = $this->postJson(
"/api/v1/portal/events/{$this->event->id}/assignments/{$assignment->id}/cancel",
);
$response->assertUnauthorized();
}
}

13
apps/portal/src/components/portal/StatusCard.vue
View File

@@ -94,12 +94,12 @@ const registeredLabel = computed(() => {
sm="4"
>
<VCard
:to="{ name: 'portal-shifts' }"
:to="{ name: 'portal-my-shifts' }"
variant="outlined"
class="pa-4 h-100 text-decoration-none"
>
<div class="text-subtitle-2 text-medium-emphasis mb-1">
Mijn Shifts
Mijn Diensten
</div>
<div class="text-body-2">
Rooster bekijken
@@ -111,14 +111,15 @@ const registeredLabel = computed(() => {
sm="4"
>
<VCard
:to="{ name: 'portal-claim-shifts' }"
variant="outlined"
class="pa-4 h-100 text-medium-emphasis"
class="pa-4 h-100 text-decoration-none"
>
<div class="text-subtitle-2 mb-1">
Shifts claimen
<div class="text-subtitle-2 text-medium-emphasis mb-1">
Diensten claimen
</div>
<div class="text-body-2">
Binnenkort beschikbaar
Schrijf je in voor diensten
</div>
</VCard>
</VCol>

73
apps/portal/src/composables/api/usePortalShifts.ts Normal file
View File

@@ -0,0 +1,73 @@
import { useQuery, useMutation, useQueryClient } from '@tanstack/vue-query'
import type { Ref } from 'vue'
import { apiClient } from '@/lib/axios'
import type { AvailableShiftsDay, MyShiftsResponse } from '@/types/portal-shift'
interface ApiResponse<T> {
data: T
}
export function useAvailableShifts(eventId: Ref<string | null>) {
return useQuery({
queryKey: ['available-shifts', eventId],
queryFn: async () => {
const { data } = await apiClient.get<ApiResponse<AvailableShiftsDay[]>>(
`/portal/events/${eventId.value}/available-shifts`,
)
return data.data
},
enabled: () => !!eventId.value,
})
}
export function useMyShifts(eventId: Ref<string | null>) {
return useQuery({
queryKey: ['my-shifts', eventId],
queryFn: async () => {
const { data } = await apiClient.get<ApiResponse<MyShiftsResponse>>(
`/portal/events/${eventId.value}/my-shifts`,
)
return data.data
},
enabled: () => !!eventId.value,
})
}
export function useClaimShift(eventId: Ref<string | null>) {
const queryClient = useQueryClient()
return useMutation({
mutationFn: async (shiftId: string) => {
const { data } = await apiClient.post<ApiResponse<{ assignment_id: string; status: string; message: string }>>(
`/portal/events/${eventId.value}/shifts/${shiftId}/claim`,
)
return data.data
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['available-shifts', eventId] })
queryClient.invalidateQueries({ queryKey: ['my-shifts', eventId] })
},
})
}
export function useCancelAssignment(eventId: Ref<string | null>) {
const queryClient = useQueryClient()
return useMutation({
mutationFn: async ({ assignmentId, reason }: { assignmentId: string; reason?: string }) => {
const { data } = await apiClient.post<ApiResponse<{ message: string }>>(
`/portal/events/${eventId.value}/assignments/${assignmentId}/cancel`,
reason ? { reason } : {},
)
return data.data
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['available-shifts', eventId] })
queryClient.invalidateQueries({ queryKey: ['my-shifts', eventId] })
},
})
}

19
apps/portal/src/layouts/portal.vue
View File

@@ -1,24 +1,37 @@
<script lang="ts" setup>
import EventSwitcher from '@/components/portal/EventSwitcher.vue'
import { useAuthStore } from '@/stores/useAuthStore'
import { usePortalStore } from '@/stores/usePortalStore'
const { injectSkinClasses } = useSkins()
injectSkinClasses()
const authStore = useAuthStore()
const portal = usePortalStore()
const router = useRouter()
const isMobileMenuOpen = ref(false)
const isApproved = computed(() => portal.currentPerson?.status === 'approved')
const navItems = computed(() => {
if (!authStore.isAuthenticated) return []
return [
const items = [
{ title: 'Dashboard', to: '/dashboard', icon: 'tabler-dashboard' },
{ title: 'Mijn Shifts', to: '/shifts', icon: 'tabler-calendar-event' },
{ title: 'Mijn Profiel', to: '/profile', icon: 'tabler-user' },
]
if (isApproved.value) {
items.push(
{ title: 'Mijn Diensten', to: '/dashboard/my-shifts', icon: 'tabler-calendar-check' },
{ title: 'Diensten Claimen', to: '/dashboard/claim-shifts', icon: 'tabler-calendar-plus' },
)
}
items.push({ title: 'Mijn Profiel', to: '/profile', icon: 'tabler-user' })
return items
})
const isFallbackStateActive = ref(false)

330
apps/portal/src/pages/dashboard/claim-shifts.vue Normal file
View File

@@ -0,0 +1,330 @@
<script setup lang="ts">
import { usePortalStore } from '@/stores/usePortalStore'
import { useAvailableShifts, useClaimShift } from '@/composables/api/usePortalShifts'
import type { AvailableShift } from '@/types/portal-shift'
definePage({
name: 'portal-claim-shifts',
meta: {
layout: 'portal',
requiresAuth: true,
},
})
const portal = usePortalStore()
const eventId = computed(() => portal.activeEventId)
const { data: days, isLoading, isError, refetch } = useAvailableShifts(eventId)
const claimMutation = useClaimShift(eventId)
const showConfirmDialog = ref(false)
const selectedShift = ref<AvailableShift | null>(null)
const selectedDayLabel = ref('')
const selectedTimeLabel = ref('')
const claimError = ref<string | null>(null)
const snackbar = ref(false)
const snackbarMessage = ref('')
const snackbarColor = ref('success')
const expandedDescriptions = ref<Set<string>>(new Set())
function openClaimDialog(shift: AvailableShift, dayLabel: string, startTime: string, endTime: string) {
selectedShift.value = shift
selectedDayLabel.value = dayLabel
selectedTimeLabel.value = `${startTime} - ${endTime}`
claimError.value = null
showConfirmDialog.value = true
}
async function confirmClaim() {
if (!selectedShift.value) return
claimError.value = null
try {
const result = await claimMutation.mutateAsync(selectedShift.value.id)
showConfirmDialog.value = false
snackbarMessage.value = result.message
snackbarColor.value = 'success'
snackbar.value = true
}
catch (err: any) {
const message = err?.response?.data?.message ?? 'Er is een fout opgetreden.'
claimError.value = message
}
}
function toggleDescription(shiftId: string) {
if (expandedDescriptions.value.has(shiftId))
expandedDescriptions.value.delete(shiftId)
else
expandedDescriptions.value.add(shiftId)
}
function availabilityColor(slotsAvailable: number): string {
if (slotsAvailable >= 3) return 'success'
return 'warning'
}
onMounted(async () => {
if (!portal.activeEventId) {
await portal.hydrateAfterAuth()
}
})
</script>
<template>
<VRow justify="center">
<VCol
cols="12"
lg="10"
>
<div class="d-flex align-center justify-space-between mb-4">
<h4 class="text-h4">
Diensten claimen
</h4>
<VBtn
variant="text"
size="small"
:to="{ name: 'portal-my-shifts' }"
>
<VIcon
start
icon="tabler-calendar-check"
size="18"
/>
Mijn diensten
</VBtn>
</div>
<!-- Loading -->
<template v-if="isLoading">
<VSkeletonLoader
v-for="n in 3"
:key="n"
type="card"
class="mb-4"
/>
</template>
<!-- Error -->
<VAlert
v-else-if="isError"
type="error"
variant="tonal"
class="mb-4"
>
Er ging iets mis bij het ophalen van de diensten.
<template #append>
<VBtn
variant="text"
size="small"
@click="refetch()"
>
Opnieuw proberen
</VBtn>
</template>
</VAlert>
<!-- Empty -->
<VAlert
v-else-if="!days?.length"
type="info"
variant="tonal"
>
Er zijn momenteel geen diensten beschikbaar.
</VAlert>
<!-- Shift list grouped by date -->
<template v-else>
<div
v-for="day in days"
:key="day.date"
class="mb-6"
>
<h5 class="text-h5 mb-3">
{{ day.date_label }}
</h5>
<div
v-for="slot in day.time_slots"
:key="slot.time_slot_id"
class="mb-4"
>
<div class="text-subtitle-1 font-weight-medium text-medium-emphasis mb-2">
{{ slot.name }} ({{ slot.start_time }} - {{ slot.end_time }})
</div>
<VRow>
<VCol
v-for="shift in slot.shifts"
:key="shift.id"
cols="12"
sm="6"
md="4"
>
<VCard
variant="outlined"
class="h-100"
>
<VCardItem>
<template #prepend>
<VIcon
v-if="shift.section_icon"
:icon="shift.section_icon"
size="24"
color="primary"
/>
</template>
<VCardTitle class="text-subtitle-1 font-weight-bold">
{{ shift.title }}
</VCardTitle>
<VCardSubtitle>{{ shift.section_name }}</VCardSubtitle>
</VCardItem>
<VCardText class="pt-0">
<div
v-if="shift.location_name"
class="text-body-2 mb-1"
>
<VIcon
icon="tabler-map-pin"
size="14"
class="me-1"
/>
{{ shift.location_name }}
</div>
<div
v-if="shift.report_time"
class="text-body-2 mb-1"
>
<VIcon
icon="tabler-clock"
size="14"
class="me-1"
/>
Aanwezig: {{ shift.report_time }}
</div>
<VChip
:color="availabilityColor(shift.slots_available)"
size="small"
variant="tonal"
class="mt-2 mb-2"
>
{{ shift.slots_available }} van {{ shift.slots_open_for_claiming }} plekken beschikbaar
</VChip>
<div
v-if="shift.description"
class="mt-2"
>
<p
v-if="!expandedDescriptions.has(shift.id)"
class="text-body-2 text-medium-emphasis mb-0"
>
{{ shift.description.length > 80 ? shift.description.slice(0, 80) + '...' : shift.description }}
<a
v-if="shift.description.length > 80"
href="#"
class="text-primary text-decoration-none"
@click.prevent="toggleDescription(shift.id)"
>meer</a>
</p>
<p
v-else
class="text-body-2 text-medium-emphasis mb-0"
>
{{ shift.description }}
<a
href="#"
class="text-primary text-decoration-none"
@click.prevent="toggleDescription(shift.id)"
>minder</a>
</p>
</div>
<VAlert
v-if="shift.has_conflict"
type="warning"
variant="tonal"
density="compact"
class="mt-3"
>
{{ shift.conflict_reason }}
</VAlert>
</VCardText>
<VCardActions>
<VBtn
color="primary"
variant="elevated"
block
:disabled="shift.has_conflict || claimMutation.isPending.value"
:loading="claimMutation.isPending.value && selectedShift?.id === shift.id"
@click="openClaimDialog(shift, day.date_label, slot.start_time, slot.end_time)"
>
Inschrijven
</VBtn>
</VCardActions>
</VCard>
</VCol>
</VRow>
</div>
</div>
</template>
<!-- Claim confirmation dialog -->
<VDialog
v-model="showConfirmDialog"
max-width="480"
>
<VCard>
<VCardTitle>Inschrijven bevestigen</VCardTitle>
<VCardText>
Wil je je inschrijven voor <strong>{{ selectedShift?.title }}</strong>
op {{ selectedDayLabel }} ({{ selectedTimeLabel }})?
<VAlert
v-if="claimError"
type="error"
variant="tonal"
density="compact"
class="mt-3"
>
{{ claimError }}
</VAlert>
</VCardText>
<VCardActions>
<VSpacer />
<VBtn
variant="text"
:disabled="claimMutation.isPending.value"
@click="showConfirmDialog = false"
>
Annuleren
</VBtn>
<VBtn
color="primary"
variant="elevated"
:loading="claimMutation.isPending.value"
@click="confirmClaim"
>
Bevestigen
</VBtn>
</VCardActions>
</VCard>
</VDialog>
<!-- Snackbar -->
<VSnackbar
v-model="snackbar"
:color="snackbarColor"
:timeout="4000"
>
{{ snackbarMessage }}
</VSnackbar>
</VCol>
</VRow>
</template>

421
apps/portal/src/pages/dashboard/my-shifts.vue Normal file
View File

@@ -0,0 +1,421 @@
<script setup lang="ts">
import { usePortalStore } from '@/stores/usePortalStore'
import { useMyShifts, useCancelAssignment } from '@/composables/api/usePortalShifts'
import type { MyShiftAssignment } from '@/types/portal-shift'
definePage({
name: 'portal-my-shifts',
meta: {
layout: 'portal',
requiresAuth: true,
},
})
const portal = usePortalStore()
const eventId = computed(() => portal.activeEventId)
const { data: shifts, isLoading, isError, refetch } = useMyShifts(eventId)
const cancelMutation = useCancelAssignment(eventId)
const showCancelDialog = ref(false)
const cancelTarget = ref<MyShiftAssignment | null>(null)
const cancelReason = ref('')
const cancelError = ref<string | null>(null)
const snackbar = ref(false)
const snackbarMessage = ref('')
const statusConfig: Record<string, { label: string; color: string }> = {
pending_approval: { label: 'Wacht op goedkeuring', color: 'warning' },
approved: { label: 'Goedgekeurd', color: 'success' },
rejected: { label: 'Afgewezen', color: 'error' },
cancelled: { label: 'Geannuleerd', color: 'default' },
completed: { label: 'Afgerond', color: 'info' },
}
function openCancelDialog(assignment: MyShiftAssignment) {
cancelTarget.value = assignment
cancelReason.value = ''
cancelError.value = null
showCancelDialog.value = true
}
async function confirmCancel() {
if (!cancelTarget.value) return
cancelError.value = null
try {
const result = await cancelMutation.mutateAsync({
assignmentId: cancelTarget.value.assignment_id,
reason: cancelReason.value || undefined,
})
showCancelDialog.value = false
snackbarMessage.value = result.message
snackbar.value = true
}
catch (err: any) {
cancelError.value = err?.response?.data?.message ?? 'Er is een fout opgetreden.'
}
}
onMounted(async () => {
if (!portal.activeEventId) {
await portal.hydrateAfterAuth()
}
})
</script>
<template>
<VRow justify="center">
<VCol
cols="12"
lg="10"
>
<div class="d-flex align-center justify-space-between mb-4">
<h4 class="text-h4">
Mijn diensten
</h4>
<VBtn
variant="text"
size="small"
:to="{ name: 'portal-claim-shifts' }"
>
<VIcon
start
icon="tabler-calendar-plus"
size="18"
/>
Diensten claimen
</VBtn>
</div>
<!-- Loading -->
<template v-if="isLoading">
<VSkeletonLoader
v-for="n in 3"
:key="n"
type="card"
class="mb-4"
/>
</template>
<!-- Error -->
<VAlert
v-else-if="isError"
type="error"
variant="tonal"
class="mb-4"
>
Er ging iets mis bij het ophalen van je diensten.
<template #append>
<VBtn
variant="text"
size="small"
@click="refetch()"
>
Opnieuw proberen
</VBtn>
</template>
</VAlert>
<template v-else-if="shifts">
<!-- Upcoming -->
<div class="mb-6">
<h5 class="text-h5 mb-3">
Komende diensten
</h5>
<template v-if="shifts.upcoming.length">
<VCard
v-for="assignment in shifts.upcoming"
:key="assignment.assignment_id"
variant="outlined"
class="mb-3"
>
<VCardItem>
<template #prepend>
<VIcon
v-if="assignment.section_icon"
:icon="assignment.section_icon"
size="24"
color="primary"
/>
</template>
<VCardTitle class="text-subtitle-1 font-weight-bold">
{{ assignment.shift_title }}
</VCardTitle>
<VCardSubtitle>{{ assignment.section_name }}</VCardSubtitle>
<template #append>
<VChip
:color="statusConfig[assignment.status]?.color ?? 'default'"
size="small"
variant="tonal"
>
{{ statusConfig[assignment.status]?.label ?? assignment.status }}
</VChip>
</template>
</VCardItem>
<VCardText class="pt-0">
<div class="d-flex flex-wrap gap-x-4 gap-y-1 text-body-2">
<span>
<VIcon
icon="tabler-calendar"
size="14"
class="me-1"
/>
{{ assignment.date_label }}
</span>
<span>
<VIcon
icon="tabler-clock"
size="14"
class="me-1"
/>
{{ assignment.start_time }} - {{ assignment.end_time }}
</span>
<span v-if="assignment.location_name">
<VIcon
icon="tabler-map-pin"
size="14"
class="me-1"
/>
{{ assignment.location_name }}
</span>
<span v-if="assignment.report_time">
<VIcon
icon="tabler-alert-circle"
size="14"
class="me-1"
/>
Aanwezig: {{ assignment.report_time }}
</span>
</div>
</VCardText>
<VCardActions v-if="assignment.can_cancel">
<VSpacer />
<VBtn
variant="text"
color="error"
size="small"
:disabled="cancelMutation.isPending.value"
@click="openCancelDialog(assignment)"
>
Annuleren
</VBtn>
</VCardActions>
</VCard>
</template>
<VAlert
v-else
type="info"
variant="tonal"
>
Je hebt nog geen diensten.
<RouterLink
:to="{ name: 'portal-claim-shifts' }"
class="text-primary font-weight-medium"
>
Diensten claimen &rarr;
</RouterLink>
</VAlert>
</div>
<!-- Past -->
<div
v-if="shifts.past.length"
class="mb-6"
>
<h5 class="text-h5 mb-3">
Afgelopen diensten
</h5>
<VCard
v-for="assignment in shifts.past"
:key="assignment.assignment_id"
variant="outlined"
class="mb-3"
>
<VCardItem>
<template #prepend>
<VIcon
v-if="assignment.section_icon"
:icon="assignment.section_icon"
size="24"
color="primary"
/>
</template>
<VCardTitle class="text-subtitle-1 font-weight-bold">
{{ assignment.shift_title }}
</VCardTitle>
<VCardSubtitle>{{ assignment.section_name }}</VCardSubtitle>
<template #append>
<VChip
:color="statusConfig[assignment.status]?.color ?? 'default'"
size="small"
variant="tonal"
>
{{ statusConfig[assignment.status]?.label ?? assignment.status }}
</VChip>
</template>
</VCardItem>
<VCardText class="pt-0">
<div class="d-flex flex-wrap gap-x-4 gap-y-1 text-body-2">
<span>
<VIcon
icon="tabler-calendar"
size="14"
class="me-1"
/>
{{ assignment.date_label }}
</span>
<span>
<VIcon
icon="tabler-clock"
size="14"
class="me-1"
/>
{{ assignment.start_time }} - {{ assignment.end_time }}
</span>
<span v-if="assignment.location_name">
<VIcon
icon="tabler-map-pin"
size="14"
class="me-1"
/>
{{ assignment.location_name }}
</span>
</div>
</VCardText>
</VCard>
</div>
<!-- Cancelled / Rejected -->
<div v-if="shifts.cancelled.length">
<h5 class="text-h5 mb-3">
Geannuleerd / Afgewezen
</h5>
<VCard
v-for="assignment in shifts.cancelled"
:key="assignment.assignment_id"
variant="outlined"
class="mb-3"
>
<VCardItem>
<template #prepend>
<VIcon
v-if="assignment.section_icon"
:icon="assignment.section_icon"
size="24"
color="primary"
/>
</template>
<VCardTitle class="text-subtitle-1 font-weight-bold">
{{ assignment.shift_title }}
</VCardTitle>
<VCardSubtitle>{{ assignment.section_name }}</VCardSubtitle>
<template #append>
<VChip
:color="statusConfig[assignment.status]?.color ?? 'default'"
size="small"
variant="tonal"
>
{{ statusConfig[assignment.status]?.label ?? assignment.status }}
</VChip>
</template>
</VCardItem>
<VCardText class="pt-0">
<div class="d-flex flex-wrap gap-x-4 gap-y-1 text-body-2">
<span>
<VIcon
icon="tabler-calendar"
size="14"
class="me-1"
/>
{{ assignment.date_label }}
</span>
<span>
<VIcon
icon="tabler-clock"
size="14"
class="me-1"
/>
{{ assignment.start_time }} - {{ assignment.end_time }}
</span>
</div>
</VCardText>
</VCard>
</div>
</template>
<!-- Cancel confirmation dialog -->
<VDialog
v-model="showCancelDialog"
max-width="480"
>
<VCard>
<VCardTitle>Dienst annuleren</VCardTitle>
<VCardText>
<p>
Weet je zeker dat je deze dienst wilt annuleren?
</p>
<p class="text-body-2 text-medium-emphasis mb-3">
<strong>{{ cancelTarget?.shift_title }}</strong> &mdash;
{{ cancelTarget?.date_label }} ({{ cancelTarget?.start_time }} - {{ cancelTarget?.end_time }})
</p>
<VTextarea
v-model="cancelReason"
label="Reden (optioneel)"
rows="2"
variant="outlined"
density="compact"
/>
<VAlert
v-if="cancelError"
type="error"
variant="tonal"
density="compact"
class="mt-3"
>
{{ cancelError }}
</VAlert>
</VCardText>
<VCardActions>
<VSpacer />
<VBtn
variant="text"
:disabled="cancelMutation.isPending.value"
@click="showCancelDialog = false"
>
Terug
</VBtn>
<VBtn
color="error"
variant="elevated"
:loading="cancelMutation.isPending.value"
@click="confirmCancel"
>
Annuleren
</VBtn>
</VCardActions>
</VCard>
</VDialog>
<!-- Snackbar -->
<VSnackbar
v-model="snackbar"
color="success"
:timeout="4000"
>
{{ snackbarMessage }}
</VSnackbar>
</VCol>
</VRow>
</template>

50
apps/portal/src/types/portal-shift.ts Normal file
View File

@@ -0,0 +1,50 @@
export interface AvailableShiftsDay {
date: string
date_label: string
time_slots: AvailableShiftsTimeSlot[]
}
export interface AvailableShiftsTimeSlot {
time_slot_id: string
name: string
start_time: string
end_time: string
shifts: AvailableShift[]
}
export interface AvailableShift {
id: string
title: string
section_name: string
section_icon: string | null
location_name: string | null
slots_total: number
slots_open_for_claiming: number
slots_claimed: number
slots_available: number
has_conflict: boolean
conflict_reason: string | null
report_time: string | null
description: string | null
}
export interface MyShiftsResponse {
upcoming: MyShiftAssignment[]
past: MyShiftAssignment[]
cancelled: MyShiftAssignment[]
}
export interface MyShiftAssignment {
assignment_id: string
status: string
shift_title: string
section_name: string
section_icon: string | null
location_name: string | null
date: string
date_label: string
start_time: string
end_time: string
report_time: string | null
can_cancel: boolean
}

2
apps/portal/typed-router.d.ts vendored
View File

@@ -22,6 +22,8 @@ declare module 'vue-router/auto-routes' {
'not-found': RouteRecordInfo<'not-found', '/:path(.*)', { path: ParamValue<true> }, { path: ParamValue<false> }>,
'artist-advance': RouteRecordInfo<'artist-advance', '/advance/:token', { token: ParamValue<true> }, { token: ParamValue<false> }>,
'portal-dashboard': RouteRecordInfo<'portal-dashboard', '/dashboard', Record<never, never>, Record<never, never>>,
'portal-claim-shifts': RouteRecordInfo<'portal-claim-shifts', '/dashboard/claim-shifts', Record<never, never>, Record<never, never>>,
'portal-my-shifts': RouteRecordInfo<'portal-my-shifts', '/dashboard/my-shifts', Record<never, never>, Record<never, never>>,
'login': RouteRecordInfo<'login', '/login', Record<never, never>, Record<never, never>>,
'portal-profile': RouteRecordInfo<'portal-profile', '/profile', Record<never, never>, Record<never, never>>,
'volunteer-register': RouteRecordInfo<'volunteer-register', '/register/:eventSlug', { eventSlug: ParamValue<true> }, { eventSlug: ParamValue<false> }>,