9e9fd208ad
Some checks are pending
E2E / Playwright e2e (push) Waiting to run
- Introduced new components for managing admin settings, including AdminListControls, AdminSettingsCard, and TechBrandSelectLabel. - Implemented dynamic loading for admin settings sections to optimize performance. - Enhanced the layout of various admin settings sections for better user experience. - Updated the AiAssistantSection to include LLM provider management and improved model selection. - Refactored authentication settings to streamline configuration and improve accessibility.
102 lines
3.6 KiB
TypeScript
102 lines
3.6 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { FieldGroup } from "@/components/admin/settings/field-group"
|
|
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({ embedded = false }: { embedded?: boolean }) {
|
|
const folders = useAdminDriveOrgFolders()
|
|
const { create, remove, sync } = useAdminDriveOrgFolderMutations()
|
|
const [orgSlug, setOrgSlug] = useState("")
|
|
const [mountPoint, setMountPoint] = useState("")
|
|
const [syncSlugs, setSyncSlugs] = useState("")
|
|
|
|
return (
|
|
<div className={embedded ? "space-y-4" : "space-y-6 rounded-lg border p-4"}>
|
|
{!embedded ? (
|
|
<div>
|
|
<h3 className="text-sm font-medium">Dossiers d'organisation</h3>
|
|
<p className="text-xs text-muted-foreground">
|
|
Espaces de stockage internes (group folders Nextcloud) liés aux organisations Authentik.
|
|
</p>
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="grid min-w-0 gap-4">
|
|
<FieldGroup>
|
|
<Label htmlFor="org-slug">Slug organisation</Label>
|
|
<Input id="org-slug" value={orgSlug} onChange={(e) => setOrgSlug(e.target.value)} placeholder="acme" />
|
|
</FieldGroup>
|
|
<FieldGroup>
|
|
<Label htmlFor="org-mount">Nom du dossier</Label>
|
|
<Input id="org-mount" value={mountPoint} onChange={(e) => setMountPoint(e.target.value)} placeholder="Acme Corp" />
|
|
</FieldGroup>
|
|
</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>
|
|
|
|
<FieldGroup>
|
|
<Label htmlFor="sync-orgs">Provisionnement automatique</Label>
|
|
<p className="text-xs text-muted-foreground">
|
|
Crée un dossier d'organisation pour chaque slug listé, s'il n'existe pas encore.
|
|
Les slugs correspondent aux organisations Authentik.
|
|
</p>
|
|
<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 les dossiers
|
|
</Button>
|
|
</FieldGroup>
|
|
|
|
<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'organisation</li>
|
|
) : null}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|