ultisuite-client/components/admin/settings/sections/drive-org-section.tsx
R3D347HR4Y ad1370ea7e
Some checks are pending
E2E / Playwright e2e (push) Waiting to run
feat: enhance configuration and add new demo layouts
- Introduced turbopack alias for canvas in next.config.mjs.
- Updated package.json scripts for development and branding tasks.
- Added new dependencies for Tiptap extensions.
- Implemented new demo layouts for agenda, contacts, drive, and mail applications.
- Enhanced globals.css for improved theming and splash screen animations.
- Added OAuth callback handling for drive mounts.
- Updated layout components to integrate new demo shells and improve structure.
2026-06-12 19:10:24 +02:00

95 lines
3.2 KiB
TypeScript

"use client"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
useAdminDriveOrgFolderMutations,
useAdminDriveOrgFolders,
} from "@/lib/api/hooks/use-admin-drive-queries"
export function DriveOrgFoldersSection() {
const folders = useAdminDriveOrgFolders()
const { create, remove, sync } = useAdminDriveOrgFolderMutations()
const [orgSlug, setOrgSlug] = useState("")
const [mountPoint, setMountPoint] = useState("")
const [syncSlugs, setSyncSlugs] = useState("")
return (
<div className="space-y-6 rounded-lg border p-4">
<div>
<h3 className="text-sm font-medium">Dossiers d&apos;organisation</h3>
<p className="text-xs text-muted-foreground">
Group folders Nextcloud liés aux organisations Authentik.
</p>
</div>
<div className="grid gap-3 sm:grid-cols-2">
<div className="grid gap-1.5">
<Label htmlFor="org-slug">Slug organisation</Label>
<Input id="org-slug" value={orgSlug} onChange={(e) => setOrgSlug(e.target.value)} placeholder="acme" />
</div>
<div className="grid gap-1.5">
<Label htmlFor="org-mount">Nom du dossier</Label>
<Input id="org-mount" value={mountPoint} onChange={(e) => setMountPoint(e.target.value)} placeholder="Acme Corp" />
</div>
</div>
<Button
size="sm"
disabled={!orgSlug.trim() || !mountPoint.trim() || create.isPending}
onClick={() =>
void create.mutateAsync({ org_slug: orgSlug.trim(), mount_point: mountPoint.trim() })
}
>
Créer le dossier
</Button>
<div className="grid gap-1.5">
<Label htmlFor="sync-orgs">Sync auto (slugs séparés par des virgules)</Label>
<Input
id="sync-orgs"
value={syncSlugs}
onChange={(e) => setSyncSlugs(e.target.value)}
placeholder="acme, beta"
/>
<Button
size="sm"
variant="outline"
disabled={!syncSlugs.trim() || sync.isPending}
onClick={() =>
void sync.mutateAsync(
syncSlugs.split(",").map((s) => s.trim()).filter(Boolean)
)
}
>
Provisionner
</Button>
</div>
<ul className="divide-y rounded-md border text-sm">
{(folders.data ?? []).map((folder) => (
<li key={folder.id} className="flex items-center justify-between gap-3 px-3 py-2">
<div className="min-w-0">
<p className="truncate font-medium">{folder.mount_point}</p>
<p className="truncate text-xs text-muted-foreground">{folder.org_slug}</p>
</div>
<Button
size="sm"
variant="ghost"
className="shrink-0 text-destructive"
disabled={remove.isPending}
onClick={() => void remove.mutateAsync(folder.id)}
>
Supprimer
</Button>
</li>
))}
{folders.data?.length === 0 ? (
<li className="px-3 py-4 text-center text-muted-foreground">Aucun dossier d&apos;organisation</li>
) : null}
</ul>
</div>
)
}