From 23c4c2e543d68f3133c53352d52786f46be6af86 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Fri, 6 Jun 2025 14:50:29 +0200
Subject: [PATCH] api settings linked browser and docs

---
 .../components/display/DatabaseLinkCol.vue    | 17 ++++--
 vue3/src/components/settings/ApiSettings.vue  | 56 ++++++++++++-------
 2 files changed, 49 insertions(+), 24 deletions(-)

diff --git a/vue3/src/components/display/DatabaseLinkCol.vue b/vue3/src/components/display/DatabaseLinkCol.vue
index aece714e9..8e6f9cc86 100644
--- a/vue3/src/components/display/DatabaseLinkCol.vue
+++ b/vue3/src/components/display/DatabaseLinkCol.vue
@@ -1,7 +1,7 @@
 <template>
-    <v-col cols="12" md="6" lg="4">
+    <v-col :cols="props.cols" :md="props.md" :lg="props.lg">
         <v-card :prepend-icon="props.prependIcon" :title="props.title" :subtitle="props.subtitle" variant="outlined" elevation="1"
-                :to="props.to"
+                :to="props.to" :link="isLink" :href="props.href"
                 append-icon="fa-solid fa-arrow-right">
         </v-card>
     </v-col>
@@ -9,8 +9,7 @@
 
 <script setup lang="ts">
 
-import {EditorSupportedModels, GenericModel, getGenericModelFromString} from "@/types/Models.ts";
-import {onBeforeMount, PropType, ref, watch} from "vue";
+import {computed, onBeforeMount, PropType, ref, watch} from "vue";
 import {useI18n} from "vue-i18n";
 import type { RouteLocationRaw } from 'vue-router';
 
@@ -20,10 +19,18 @@ const props = defineProps({
     prependIcon: {type: String, default: ''},
     title: {type: String, default: ''},
     subtitle: {type: String, default: ''},
-    to: {type: {} as PropType<RouteLocationRaw>  }
+    to: {type: {} as PropType<RouteLocationRaw>  },
+    href: {type: String, default: ''},
+    cols: {type: Number, default: 12 },
+    md: {type: Number, default: 6 },
+    lg: {type: Number, default: 4 },
 })
 
 
+const isLink = computed(() => {
+    return props.href != '' && props.to == undefined
+})
+
 </script>
 
 
diff --git a/vue3/src/components/settings/ApiSettings.vue b/vue3/src/components/settings/ApiSettings.vue
index 8cb7e434b..7eb89774c 100644
--- a/vue3/src/components/settings/ApiSettings.vue
+++ b/vue3/src/components/settings/ApiSettings.vue
@@ -3,34 +3,50 @@
         <p class="text-h6">{{ $t('API') }}</p>
         <v-divider class="mb-3"></v-divider>
 
-        <v-alert color="error" variant="tonal">
-            The API is made for developers to interact with the application.
-            It is possible to break things using the API so be careful and create a backup first.
-            The API definition can and will change in the future, make sure to read the changelog to spot changes early
-            on.
-        </v-alert>
+        <v-row>
+            <database-link-col prepend-icon="fa-solid fa-terminal" :href="useDjangoUrls().getDjangoUrl('api')" :lg="6" :title="$t('API Browser')"></database-link-col>
+            <database-link-col prepend-icon="fa-solid fa-laptop-code" :href="useDjangoUrls().getDjangoUrl('/docs/api/')" :lg="6"
+                               :title="$t('API Dokumentation')"></database-link-col>
+        </v-row>
 
-        Authentication works by proving the word <code>Bearer</code> followed by an API Token as a request Authorization
-        header as shown below. <br/>
-        <code>Authorization: Bearer TOKEN</code> -or-<br/>
-        <code>curl -X GET http://your.domain.com/api/recipes/ -H 'Authorization:
-            Bearer TOKEN'</code>
+        <v-row>
+            <v-col>
 
-        <br/>
-        <br/>
-        You can have multiple tokens and each token can have its own scope. Currently there is <code>read</code>, <code>write</code>
-        and <code>bookmarklet</code>.
-        Read and write do what the name says, the bookmarklet scope is only used for the bookmarklet to limit access to
-        it.
+                <v-alert color="error" variant="tonal">
+                    The API is made for developers to interact with the application.
+                    It is possible to break things using the API so be careful and create a backup first.
+                    The API definition can and will change in the future, make sure to read the changelog to spot changes early
+                    on.
+                </v-alert>
+            </v-col>
+        </v-row>
 
-        <v-alert color="warning" variant="tonal">Make sure to save your token after creation as they cannot be viewed afterwards.</v-alert>
+        <v-row>
+            <v-col>
+                Authentication works by proving the word <code>Bearer</code> followed by an API Token as a request Authorization
+                header as shown below. <br/>
+                <code>Authorization: Bearer TOKEN</code> -or-<br/>
+                <code>curl -X GET http://your.domain.com/api/recipes/ -H 'Authorization:
+                    Bearer TOKEN'</code>
+
+                <br/>
+                <br/>
+                You can have multiple tokens and each token can have its own scope. Currently there is <code>read</code>, <code>write</code>
+                and <code>bookmarklet</code>.
+                Read and write do what the name says, the bookmarklet scope is only used for the bookmarklet to limit access to
+                it.
+
+                <v-alert color="warning" variant="tonal">Make sure to save your token after creation as they cannot be viewed afterwards.</v-alert>
+            </v-col>
+
+        </v-row>
 
         <v-btn prepend-icon="$create" color="create" class="mt-2">{{ $t('New') }}
             <model-edit-dialog model="AccessToken" @create="loadAccessTokens()" :close-after-create="false"></model-edit-dialog>
         </v-btn>
 
         <v-list class="mt-2" border>
-            <v-list-item v-for="at in accessTokenList" >
+            <v-list-item v-for="at in accessTokenList">
                 <v-list-item-title>{{ at.token }}</v-list-item-title>
                 <v-list-item-subtitle>Scope {{ at.scope }}
                     Expires {{ DateTime.fromJSDate(at.expires).toLocaleString(DateTime.DATE_FULL) }}
@@ -57,6 +73,8 @@ import {AccessToken, ApiApi} from "@/openapi";
 import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
 import {DateTime} from "luxon";
 import ModelEditDialog from "@/components/dialogs/ModelEditDialog.vue";
+import DatabaseLinkCol from "@/components/display/DatabaseLinkCol.vue";
+import {useDjangoUrls} from "@/composables/useDjangoUrls.ts";
 
 const accessTokenList = ref([] as AccessToken[])