Add Meet video visit scheduling for Care appointments.
Deploy Ladill Care / deploy (push) Successful in 38s

Schedule and start video visits via the Meet service API, persist join links on appointments, and propagate the shared copy-button component.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
2026-07-03 22:53:42 +00:00
co-authored by Cursor
parent 661e6ef0e8
commit 2d06c92ddb
13 changed files with 473 additions and 3 deletions
+2
View File
@@ -1,7 +1,9 @@
import Alpine from 'alpinejs';
import { registerLadillClipboard } from './ladill-clipboard';
import collapse from '@alpinejs/collapse';
Alpine.plugin(collapse);
registerLadillClipboard(Alpine);
// In-app notification bell + dropdown.
Alpine.data('notificationDropdown', (config = {}) => ({
+57
View File
@@ -0,0 +1,57 @@
const COPY_FEEDBACK_MS = 2000;
export async function writeClipboardText(text) {
const value = String(text ?? '');
if (!value) {
return false;
}
try {
if (navigator.clipboard?.writeText) {
await navigator.clipboard.writeText(value);
return true;
}
} catch {
// fall through to legacy copy
}
try {
const textarea = document.createElement('textarea');
textarea.value = value;
textarea.style.position = 'fixed';
textarea.style.opacity = '0';
document.body.appendChild(textarea);
textarea.select();
const ok = document.execCommand('copy');
document.body.removeChild(textarea);
return ok;
} catch {
return false;
}
}
export function registerLadillClipboard(Alpine) {
Alpine.data('copyButton', (text = '') => ({
copied: false,
text: text ?? '',
resetTimer: null,
async copy() {
const ok = await writeClipboardText(this.text);
if (!ok) {
return;
}
this.copied = true;
if (this.resetTimer) {
clearTimeout(this.resetTimer);
}
this.resetTimer = setTimeout(() => {
this.copied = false;
}, COPY_FEEDBACK_MS);
},
}));
}
@@ -25,8 +25,26 @@
<button type="submit" class="btn-primary">Start consultation</button>
</form>
@endif
@if ($appointment->consultation)
<a href="{{ route('care.consultations.show', $appointment->consultation) }}" class="rounded-lg border border-sky-200 px-4 py-2 text-sm text-sky-700 hover:bg-sky-50">View consultation</a>
@if ($canConsult && in_array($appointment->status, [\App\Models\Appointment::STATUS_WAITING, \App\Models\Appointment::STATUS_CHECKED_IN, \App\Models\Appointment::STATUS_IN_CONSULTATION], true))
@if ($appointment->meet_join_url)
<a href="{{ $appointment->meet_join_url }}" target="_blank" rel="noopener" class="btn-primary">Join video visit</a>
@else
<form method="POST" action="{{ route('care.appointments.start-meet', $appointment) }}">
@csrf
<button type="submit" class="btn-primary">Start video visit</button>
</form>
@endif
@endif
@if ($canManage && $appointment->status === \App\Models\Appointment::STATUS_SCHEDULED && ! $appointment->meet_join_url)
<form method="POST" action="{{ route('care.appointments.schedule-meet', $appointment) }}">
@csrf
<button type="submit" class="rounded-lg border border-sky-200 px-4 py-2 text-sm text-sky-700 hover:bg-sky-50">Schedule video visit</button>
</form>
@endif
@if ($canManage && in_array($appointment->status, [\App\Models\Appointment::STATUS_WAITING, \App\Models\Appointment::STATUS_CHECKED_IN], true))
@if ($appointment->consultation)
<a href="{{ route('care.consultations.show', $appointment->consultation) }}" class="rounded-lg border border-sky-200 px-4 py-2 text-sm text-sky-700 hover:bg-sky-50">View consultation</a>
@endif
@endif
@if ($canManage && ! in_array($appointment->status, [\App\Models\Appointment::STATUS_COMPLETED, \App\Models\Appointment::STATUS_CANCELLED], true))
<form method="POST" action="{{ route('care.appointments.cancel', $appointment) }}" onsubmit="return confirm('Cancel this appointment?')">
@@ -45,6 +63,9 @@
<div><dt class="text-slate-500">Branch</dt><dd class="font-medium">{{ $appointment->branch?->name ?? '—' }}</dd></div>
<div><dt class="text-slate-500">Department</dt><dd class="font-medium">{{ $appointment->department?->name ?? '—' }}</dd></div>
<div><dt class="text-slate-500">Type</dt><dd class="font-medium capitalize">{{ str_replace('_', ' ', $appointment->type) }}</dd></div>
@if ($appointment->meet_join_url)
<div><dt class="text-slate-500">Video visit</dt><dd class="font-medium flex flex-wrap items-center gap-2"><a href="{{ $appointment->meet_join_url }}" target="_blank" rel="noopener" class="text-sky-600">Join link</a><x-copy-button :text="$appointment->meet_join_url" icon copied-class="text-emerald-600" class="rounded p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-600" /></dd></div>
@endif
<div><dt class="text-slate-500">Reason</dt><dd class="font-medium">{{ $appointment->reason ?? '—' }}</dd></div>
@if ($appointment->notes)
<div><dt class="text-slate-500">Notes</dt><dd class="font-medium">{{ $appointment->notes }}</dd></div>
@@ -0,0 +1,29 @@
@props([
'text' => '',
'label' => 'Copy',
'copiedLabel' => 'Copied!',
'icon' => false,
'copiedClass' => '',
])
<button
type="button"
x-data="copyButton(@js($text))"
@click="copy()"
:title="copied ? @js($copiedLabel) : @js($icon ? 'Copy' : $label)"
:class="copied ? @js($copiedClass) : ''"
{{ $attributes->class($icon ? 'inline-flex shrink-0 items-center justify-center' : '') }}
>
@if ($icon)
<svg x-show="!copied" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
</svg>
<svg x-show="copied" x-cloak class="h-4 w-4 text-emerald-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
@elseif ($slot->isNotEmpty())
{{ $slot }}
@else
<span x-text="copied ? @js($copiedLabel) : @js($label)"></span>
@endif
</button>