Saad Ibn-Ezzoubayr
35545c2a8f
Initial commit of the L'Ami Fiduciaire SaaS platform built on Laravel 12, Vue 3, Inertia.js 2, and Tailwind CSS 4. Story 0.1 (rename folders to declarations in database) is implemented and code-reviewed: migration, rollback, and 6 Pest tests all passing. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
129 lines
5.1 KiB
Vue
129 lines
5.1 KiB
Vue
<script setup lang="ts">
|
|
import { Link, router, usePage } from '@inertiajs/vue3';
|
|
import { BoxSelect, Building2, ChevronsUpDown, Plus } from 'lucide-vue-next';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu';
|
|
import {
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
useSidebar,
|
|
} from '@/components/ui/sidebar';
|
|
|
|
const page = usePage();
|
|
const { isMobile } = useSidebar();
|
|
|
|
const workspaces = page.props.auth?.workspaces ?? [];
|
|
const currentWorkspace = page.props.auth?.currentWorkspace ?? null;
|
|
|
|
function switchWorkspace(workspace: { id: number }) {
|
|
router.post('/workspace/switch', { workspace_id: workspace.id }, {
|
|
preserveState: false,
|
|
onSuccess: () => router.reload(),
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<SidebarMenu v-if="workspaces.length > 0">
|
|
<SidebarMenuItem>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger as-child>
|
|
<SidebarMenuButton
|
|
size="lg"
|
|
class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
|
|
>
|
|
<div
|
|
class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground"
|
|
>
|
|
<Building2 class="size-4" />
|
|
</div>
|
|
<div
|
|
class="grid flex-1 text-left text-sm leading-tight"
|
|
>
|
|
<span class="truncate font-medium">
|
|
{{
|
|
currentWorkspace?.name ?? 'Select workspace'
|
|
}}
|
|
</span>
|
|
<span
|
|
v-if="currentWorkspace"
|
|
class="truncate text-xs text-muted-foreground"
|
|
>
|
|
{{ currentWorkspace.slug }}
|
|
</span>
|
|
</div>
|
|
<ChevronsUpDown class="ml-auto" />
|
|
</SidebarMenuButton>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
|
|
align="start"
|
|
:side="isMobile ? 'bottom' : 'right'"
|
|
:side-offset="4"
|
|
>
|
|
<DropdownMenuLabel class="text-xs text-muted-foreground">
|
|
Workspaces
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuItem
|
|
v-for="workspace in workspaces"
|
|
:key="workspace.id"
|
|
class="gap-2 p-2"
|
|
@click="switchWorkspace(workspace)"
|
|
>
|
|
<div
|
|
class="flex size-6 items-center justify-center rounded-sm border"
|
|
>
|
|
<Building2 class="size-3.5 shrink-0" />
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span>{{ workspace.name }}</span>
|
|
<span class="text-xs text-muted-foreground">{{
|
|
workspace.slug
|
|
}}</span>
|
|
</div>
|
|
</DropdownMenuItem>
|
|
<!-- <DropdownMenuSeparator />
|
|
<DropdownMenuItem as-child>
|
|
<Link
|
|
href="/workspaces"
|
|
class="flex w-full cursor-pointer items-center gap-2 p-2"
|
|
>
|
|
<div
|
|
class="flex size-6 items-center justify-center rounded-md border bg-transparent"
|
|
>
|
|
<Plus class="size-4" />
|
|
</div>
|
|
<span class="font-medium text-muted-foreground">
|
|
Manage workspaces
|
|
</span>
|
|
</Link>
|
|
</DropdownMenuItem> -->
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
<SidebarMenu v-else>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton size="lg" as-child>
|
|
<div
|
|
class="flex items-center gap-2 text-muted-foreground"
|
|
>
|
|
<div
|
|
class="flex aspect-square size-8 items-center justify-center rounded-lg border border-dashed"
|
|
>
|
|
<BoxSelect class="size-4" />
|
|
</div>
|
|
<span class="text-sm">No workspaces found</span>
|
|
</div>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</template>
|