Update UserConfigsView to have all entity fields

ui/src/models/server.ts

@@ -0,0 +1,22 @@
+export type ServerConfig = {
+    id: number,
+    serverId: number,
+    systemMessage: string,
+    rateLimit: number,
+    time: string
+}
+
+const exampleServerConfig: ServerConfig = {
+    id: 1,
+    serverId: 1091358909513609246,
+    systemMessage: "Foo",
+    rateLimit: 10,
+    time: "1680676051.633872000"
+}
+
+export function isServerConfig(serverConfig: ServerConfig | any): serverConfig is ServerConfig {
+    const requiredFields = Object.getOwnPropertyNames(exampleServerConfig)
+    const fieldsToCheck = Object.getOwnPropertyNames(serverConfig)
+    const foundFields = requiredFields.filter(field => fieldsToCheck.filter(fieldToCheck => fieldToCheck === field).length === 1)
+    return foundFields.length >= requiredFields.length
+}

ui/src/services/ServerConfigs.ts

@@ -0,0 +1,19 @@
+import { isServerConfig, type ServerConfig } from "@/models/server";
+
+export async function getConfigs(): Promise<ServerConfig[]> {
+    return fetch(import.meta.env.VITE_API_URL + "/servers/configs")
+    .then(shouldBeSuccess)
+    .then(res => res.json())
+    .then(toArray)
+    .then(list => list.filter(isServerConfig))
+}
+
+function shouldBeSuccess(res: Response): Response {
+    if (res.status >= 200 && res.status < 300) return res
+    throw new Error(`Expected success status code but got: ${res.status} ${res.statusText}`)
+}
+
+function toArray(subject: any): any[] {
+    if (subject instanceof Array) return subject as any[]
+    throw new Error("Could not be casted to an array")
+}

ui/src/views/servers/ServerConfigsView.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import TableComponent from '@/components/TableComponent.vue';
+import {getConfigs} from '@/services/ServerConfigs'
 
-const tableHeader = ["ID", "Server ID", "System Message", "Rate limit"]
-const tableRows = [["1", "name", "comment", "1"]]
+const serverConfigs = await getConfigs()
+const tableHeader = ["ID", "Server ID", "System Message", "Rate limit", "Created"]
+const tableRows = serverConfigs.map(config => [config.id, config.serverId, config.systemMessage.slice(0, 47) + "...", config.rateLimit, config.time])
 const actions = [{ class: "btn btn-sm btn-info m-1", content: "Edit", event: (_: number) => { } }, { class: "btn btn-sm btn-error m-1", content: "Delete", event: (_: number) => { } }]
 </script>
 <template>
@@ -10,5 +12,6 @@ const actions = [{ class: "btn btn-sm btn-info m-1", content: "Edit", event: (_:
         <h1 class="text-xl normal-case">Server Configs</h1>
         <button class="btn btn-circle btn-success">Add</button>
     </div>
-    <TableComponent :tableHeader="tableHeader" :tableRows="tableRows" :actions="actions" />
+    <TableComponent v-if="serverConfigs.length" :tableHeader="tableHeader" :tableRows="tableRows" :actions="actions" />
+    <p v-else class="m-5">No server configs</p>
 </template>

ui/src/views/users/UserConfigsView.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import TableComponent from '@/components/TableComponent.vue';
 
-const tableHeader = ["ID", "Server ID", "System Message", "Rate limit"]
-const tableRows = [["1", "name", "comment", "1"]]
+const tableHeader = ["ID", "Server ID", "System Message", "Context Length", "Rate limit", "Created"]
+const tableRows = [["1", "name", "comment", "5", "1", Date.now()]]
 const actions = [{ class: "btn btn-sm btn-info m-1", content: "Edit", event: (_: number) => { } }, { class: "btn btn-sm btn-error m-1", content: "Delete", event: (_: number) => { } }]
 </script>
 <template>