api settings linked browser and docs

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 {computed, onBeforeMount, PropType, ref, watch} from "vue";
-import {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>
 
 

vue3/src/components/settings/ApiSettings.vue

@@ -3,13 +3,26 @@
         <p class="text-h6">{{ $t('API') }}</p>
         <v-divider class="mb-3"></v-divider>
 
+        <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>
+
+        <v-row>
+            <v-col>
+
                 <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-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/>
@@ -24,6 +37,9 @@
                 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>
@@ -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[])