Implement CRUD for user config

It will now only cut the message if its longer than 50 characters.

src/main/java/de/hhhammer/dchat/WebAPI.java

@@ -5,6 +5,8 @@ import de.hhhammer.dchat.db.UserDBService;
 import de.hhhammer.dchat.web.server.ConfigCrudHandler;
 import de.hhhammer.dchat.web.user.ConfigUserCrudHandler;
 import io.javalin.Javalin;
+import io.javalin.http.HandlerType;
+import io.javalin.http.HttpStatus;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 
@@ -41,7 +43,9 @@ public class WebAPI implements Runnable {
         });
         app.before(ctx -> {
             ctx.header("Access-Control-Allow-Origin", "*");
+            ctx.header("Access-Control-Allow-Methods", "*");
         });
+        app.options("*", ctx -> ctx.status(HttpStatus.OK));
 
         app.get("/", ctx -> ctx.result("""
                 { "message": "Hello World"}

src/main/java/de/hhhammer/dchat/db/models/server/ServerConfig.java

@@ -1,5 +1,6 @@
 package de.hhhammer.dchat.db.models.server;
 
+import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
 import de.hhhammer.dchat.db.ResultSetTransformer;
 import org.jetbrains.annotations.Nullable;
 
@@ -22,6 +23,7 @@ public record ServerConfig(long id, long serverId, String systemMessage, int rat
         }
     }
 
+    @JsonIgnoreProperties(ignoreUnknown = true)
     public record NewServerConfig(long serverId, String systemMessage, @Nullable int rateLimit) {
     }
 }

src/main/java/de/hhhammer/dchat/db/models/server/ServerMessage.java

@@ -1,5 +1,6 @@
 package de.hhhammer.dchat.db.models.server;
 
+import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
 import de.hhhammer.dchat.db.ResultSetTransformer;
 
 import java.sql.ResultSet;
@@ -21,6 +22,7 @@ public record ServerMessage(long id, long serverId, long userId, int tokens, Ins
         }
     }
 
+    @JsonIgnoreProperties(ignoreUnknown = true)
     public record NewServerMessage(long serverId, long userId, int tokens) {
     }
 }

src/main/java/de/hhhammer/dchat/db/models/user/UserConfig.java

@@ -1,5 +1,6 @@
 package de.hhhammer.dchat.db.models.user;
 
+import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
 import de.hhhammer.dchat.db.ResultSetTransformer;
 import org.jetbrains.annotations.Nullable;
 
@@ -23,6 +24,7 @@ public record UserConfig(long id, long userId, String systemMessage, int context
         }
     }
 
+    @JsonIgnoreProperties(ignoreUnknown = true)
     public record NewUserConfig(long userId, String systemMessage, @Nullable int contextLength,
                                 @Nullable int rateLimit) {
     }

src/main/java/de/hhhammer/dchat/db/models/user/UserMessage.java

@@ -1,5 +1,6 @@
 package de.hhhammer.dchat.db.models.user;
 
+import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
 import de.hhhammer.dchat.db.ResultSetTransformer;
 
 import java.sql.ResultSet;
@@ -22,6 +23,7 @@ public record UserMessage(long id, long userId, String question, String answer,
         }
     }
 
+    @JsonIgnoreProperties(ignoreUnknown = true)
     public record NewUserMessage(long userId, String question, String answer, int tokens) {
     }
 }

ui/src/components/TableComponent.vue

@@ -21,15 +21,13 @@ const { tableHeader, tableRows, showActions } = defineProps<{
             </thead>
             <tbody>
                 <!-- row -->
-                <tr>
-                    <template v-for="row in tableRows">
-                        <template v-for="data in row">
-                            <th>{{ data }}</th>
-                        </template>
-                        <th>
-                            <slot name="action" :row="row"/>
-                        </th>
+                <tr v-for="row in tableRows">
+                    <template v-for="data in row">
+                        <th>{{ data }}</th>
                     </template>
+                    <th>
+                        <slot name="action" :row="row" />
+                    </th>
                 </tr>
             </tbody>
         </table>

ui/src/components/server/AddServerConfig.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
 import ModalComponent from '@/components/ModalComponent.vue';
 import type { ServerConfig } from "@/models/server";
+import { addConfig } from '@/services/ServerConfigs';
 import { ref } from 'vue'
 
 const modalId = "addServerConfig"
 
 const newConfig = ref<ServerConfig | Record<string, never>>({})
 const submitAction = async () => {
-    console.log("Saving: ", newConfig.value)
+    if (!newConfig) {
+        return
+    }
+    return addConfig(newConfig.value as ServerConfig)
 }
 </script>
 <template>

ui/src/components/server/DeleteServerConfig.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import ModalComponent from '@/components/ModalComponent.vue';
-import type { ServerConfig } from "@/models/server";
-import { ref } from 'vue'
+import { deleteConfig } from '@/services/ServerConfigs';
 
 const { id } = defineProps<{ id: number }>()
 
 const submitAction = async () => {
-    console.log("deleting: ", id)
+    return deleteConfig(id)
 }
 const modalId = "delete-" + id
 </script>

ui/src/components/server/EditServerConfig.vue

@@ -3,13 +3,13 @@ import ModalComponent from '@/components/ModalComponent.vue';
 import { getConfig } from '@/services/ServerConfigs'
 import { ref } from 'vue';
 import type { ServerConfig } from '@/models/server';
+import { updateConfig } from '@/services/ServerConfigs';
 
 const { id } = defineProps<{ id: number }>()
 
 const configToEdit = ref<ServerConfig | Record<string, never>>({})
 const submitAction = async () => {
-    console.log(id)
-    console.log("Saving: ", configToEdit.value)
+    return updateConfig(id, configToEdit.value as ServerConfig)
 
 }
 const onLoadAction = async () => {

ui/src/components/user/AddUserConfig.vue

@@ -2,12 +2,13 @@
 import ModalComponent from '@/components/ModalComponent.vue';
 import type { UserConfig } from "@/models/user";
 import { ref } from 'vue'
+import { addConfig } from '@/services/UserConfigs';
 
 const modalId = "addUserConfig"
 
 const newConfig = ref<UserConfig | Record<string, never>>({})
 const submitAction = async () => {
-    console.log("Saving: ", newConfig.value)
+    return addConfig(newConfig.value as UserConfig)
 }
 </script>
 <template>

ui/src/components/user/DeleteUserConfig.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import ModalComponent from '@/components/ModalComponent.vue';
-import type { ServerConfig } from "@/models/server";
-import { ref } from 'vue'
+import { deleteConfig } from '@/services/UserConfigs';
 
 const { id } = defineProps<{ id: number }>()
 
 const submitAction = async () => {
-    console.log("deleting: ", id)
+    return deleteConfig(id)
 }
 const modalId = "delete-" + id
 </script>

ui/src/components/user/EditUserConfig.vue

@@ -3,14 +3,13 @@ import ModalComponent from '@/components/ModalComponent.vue';
 import { getConfig } from '@/services/UserConfigs'
 import { ref } from 'vue';
 import type { UserConfig } from '@/models/user';
+import { updateConfig } from '@/services/UserConfigs';
 
 const { id } = defineProps<{ id: number }>()
 
 const configToEdit = ref<UserConfig | Record<string, never>>({})
 const submitAction = async () => {
-    console.log(id)
-    console.log("Saving: ", configToEdit.value)
-
+    return updateConfig(id, configToEdit.value as UserConfig)
 }
 const onLoadAction = async () => {
     configToEdit.value = await getConfig(id)

ui/src/services/ServerConfigs.ts

@@ -1,17 +1,38 @@
 import type { ServerConfig } from "@/models/server";
 
+const configUrl = import.meta.env.VITE_API_URL + "/servers/configs/"
+
 export async function getConfigs(): Promise<ServerConfig[]> {
-    return fetch(import.meta.env.VITE_API_URL + "/servers/configs")
+    return fetch(configUrl)
         .then(shouldBeSuccess)
         .then(res => res.json())
 }
 
 export function getConfig(id: number): Promise<ServerConfig> {
-    return fetch(import.meta.env.VITE_API_URL + "/servers/configs/" + id)
+    return fetch(configUrl + id)
         .then(shouldBeSuccess)
         .then(res => res.json())
 }
 
+export function updateConfig(id: number, config: ServerConfig): Promise<void> {
+    return fetch(configUrl + id, { method: "PATCH", body: JSON.stringify(config) })
+        .then(shouldBeSuccess)
+        .then()
+}
+
+export function addConfig(config: ServerConfig): Promise<void> {
+    debugger
+    return fetch(configUrl, { method: "POST", body: JSON.stringify(config) })
+        .then(shouldBeSuccess)
+        .then()
+}
+
+export function deleteConfig(id: number): Promise<void> {
+    return fetch(configUrl + id, { method: "DELETE" })
+        .then(shouldBeSuccess)
+        .then()
+}
+
 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}`)

ui/src/services/UserConfigs.ts

@@ -1,17 +1,39 @@
-import type {UserConfig} from '@/models/user'
+import type { UserConfig } from '@/models/user'
+
+const configUrl = import.meta.env.VITE_API_URL + "/users/configs/"
 
 export async function getConfigs(): Promise<UserConfig[]> {
-    return fetch(import.meta.env.VITE_API_URL + "/users/configs")
+    return fetch(configUrl)
         .then(shouldBeSuccess)
         .then(res => res.json())
 }
 
 export function getConfig(id: number): Promise<UserConfig> {
-    return fetch(import.meta.env.VITE_API_URL + "/users/configs/" + id)
+    return fetch(configUrl + id)
         .then(shouldBeSuccess)
         .then(res => res.json())
 }
 
+export function updateConfig(id: number, config: UserConfig): Promise<void> {
+    return fetch(configUrl + id, { method: "PATCH", body: JSON.stringify(config) })
+        .then(shouldBeSuccess)
+        .then()
+}
+
+export function addConfig(config: UserConfig): Promise<void> {
+    debugger
+    return fetch(configUrl, { method: "POST", body: JSON.stringify(config) })
+        .then(shouldBeSuccess)
+        .then()
+}
+
+export function deleteConfig(id: number): Promise<void> {
+    return fetch(configUrl + id, { method: "DELETE" })
+        .then(shouldBeSuccess)
+        .then()
+}
+
+
 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}`)

ui/src/views/servers/ServerConfigsView.vue

@@ -5,9 +5,12 @@ import { getConfigs } from '@/services/ServerConfigs'
 import EditServerConfig from '@/components/server/EditServerConfig.vue';
 import DeleteServerConfig from '@/components/server/DeleteServerConfig.vue';
 
+const trimSystemMessage = (str: string) => str.length > 50 ? str.slice(0, 47) + "..." : str
+
 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 tableRows = serverConfigs.map(config => [config.id, config.serverId, trimSystemMessage(config.systemMessage), config.rateLimit, config.time])
 </script>
 <template>
     <div class="flex justify-between m-5">

ui/src/views/users/UserConfigsView.vue

@@ -5,10 +5,12 @@ import { getConfigs } from '@/services/UserConfigs'
 import EditUserConfig from '@/components/user/EditUserConfig.vue';
 import DeleteServerConfig from '@/components/server/DeleteServerConfig.vue';
 
+const trimSystemMessage = (str: string) => str.length > 50 ? str.slice(0, 47) + "..." : str
+
 const userConfigs = await getConfigs()
 
 const tableHeader = ["ID", "User ID", "System Message", "Context Length", "Rate limit", "Created"]
-const tableRows = userConfigs.map(config => [config.id, config.userId, config.systemMessage.slice(0, 47) + "...", config.contextLength, config.rateLimit, config.time])
+const tableRows = userConfigs.map(config => [config.id, config.userId, trimSystemMessage(config.systemMessage), config.contextLength, config.rateLimit, config.time])
 </script>
 <template>
     <div class="flex justify-between m-5">