Settings move API Url to top, hide settings when not connected

This commit is contained in:
2025-10-16 00:16:02 +02:00
parent 35ca5b9550
commit 20c9824ce1
3 changed files with 17 additions and 10 deletions

View File

@@ -1,5 +1,5 @@
<template>
<UPageList class="gap-2">
<div class="flex flex-row flex-wrap">
<UPageCard
v-for="l in fileLibraries"
:key="l.key"
@@ -8,9 +8,9 @@
:title="l.libraryName"
:description="l.basePath"
orientation="horizontal">
<UButton color="warning" :loading="busy" @click="deleteLibrary(l)">Delete</UButton>
<UButton color="warning" :loading="busy" class="w-fit justify-self-end" @click="deleteLibrary(l)">Delete</UButton>
</UPageCard>
</UPageList>
</div>
</template>
<script setup lang="ts">

View File

@@ -5,4 +5,5 @@ export const FetchKeys = {
MangaConnector: { Id: (id: string) => `MangaConnector/${id}`, All: 'MangaConnector' },
Metadata: { Fetchers: 'Metadata', Links: 'Metadata/Links', Manga: (mangaId: string) => `Metadata/Links/${mangaId}` },
Libraries: { All: 'Libraries', Id: (id: string) => `Libraries/${id}` },
Settings: { All: 'Settings' },
};

View File

@@ -1,13 +1,21 @@
<template>
<UPageBody>
<UPageSection title="Settings">
<UCard>
<template #description>
<div>
<p>API Url</p>
<UInput v-model="apiUrl" class="max-w-full w-xs" placeholder="http://<ip:port>/" />
<UButton :loading="reloading" class="mx-1" @click="setUrl">Set</UButton>
<p v-if="settingsStatus === 'error'" class="text-warning">Unable to connect to api.</p>
</div>
</template>
<UCard v-if="settingsStatus === 'success'">
<template #header>
<h1>Libraries</h1>
</template>
<template #footer>
<div class="flex flex-row gap-2">
<UButton icon="i-lucide-plus" class="w-fit" @click="addLibraryModal.open()">Add</UButton>
<UButton icon="i-lucide-plus" class="w-fit" @click="addLibraryModal.open()">Add FileLibrary</UButton>
<UTooltip :text="komgaConnected ? 'Disconnect Komga' : 'Connect Komga'">
<UButton
:icon="komgaConnected ? 'i-lucide-unlink' : 'i-lucide-link'"
@@ -26,17 +34,13 @@
</template>
<FileLibraries />
</UCard>
<UCard>
<UCard v-if="settingsStatus === 'success'">
<template #header>
<h1>Maintenance</h1>
</template>
<UButton icon="i-lucide-database" :loading="cleanUpDatabaseBusy" class="w-fit mb-2" @click="cleanUpDatabase"
>Clean database</UButton
>
<UFormField label="API Url" name="apiUrl">
<UInput v-model="apiUrl" class="max-w-full w-xs" placeholder="http://<ip:port>/" />
<UButton :loading="reloading" class="mx-1" @click="setUrl">Set</UButton>
</UFormField>
</UCard>
</UPageSection>
</UPageBody>
@@ -91,5 +95,7 @@ const onKavitaClick = async () => {
}
};
const { data: settings, status: settingsStatus } = useApi('/v2/Settings', { key: FetchKeys.Settings.All });
useHead({ title: 'Settings' });
</script>