Sync commit

web/frontend/src/App.svelte

@@ -1,27 +1,16 @@
 <script lang="ts">
   import Table from "./lib/Table.svelte";
-  import GenericForm from "./lib/GenericForm.svelte";
+  import NewsForm from "./lib/NewsForm.svelte";
+  import { fetchData } from "./lib/RestAPI.svelte.ts";
+  import type { Retailer } from "./lib/Models.svelte.ts";
 
-  type Retailer = {
+  let retailerrecords: Retailer[] = $state([]);
-    id: number;
-    shopname: string;
-    url: string;
-    country: string;
-    display: number;
-  };
 
-  let records: Retailer[] = $state([]);
-  let columns: string[] = ["shopname", "country", "url"];
   let activeTab = $state("invoice");
 
-  async function fetchData(endpoint: string) {
-    const res = await fetch("http://localhost:8080/api/" + endpoint);
-    records = await res.json();
-  }
-
   $effect(() => {
     if (activeTab === "retailers") {
-      fetchData("retailers/");
+      fetchData("retailers/", retailerrecords);
     }
   });
 
@@ -31,22 +20,6 @@
     showModal = true;
   }
 
-  function closeModal() {
-    showModal = false;
-  }
-
-  let formdata: Retailer = {
-    shopname: "",
-    url: "",
-    id: 0,
-    country: "",
-    display: 0,
-  };
-
-  function submitUserForm(data: Retailer) {
-    closeModal();
-    console.log("User Form Submitted:", data);
-  }
   function removeRowHandler(id: Number) {
     console.log("Remove Record:", id);
   }
@@ -59,32 +32,7 @@
   role="dialog"
   style="display: {showModal ? 'block' : 'none'};"
 >
-  <div class="modal-dialog" role="document">
+  <NewsForm {showModal} role={"edit"} />
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title">Add Retailer</h5>
-      </div>
-      <div class="modal-body">
-        <GenericForm formData={formdata} onSubmit={submitUserForm}>
-          {#each columns as col}
-            <div class="mb-3">
-              <label for={col}>{col}:</label>
-              <input
-                id={col}
-                type="text"
-                bind:value={formdata[col as keyof Retailer]}
-              />
-            </div>
-          {/each}
-        </GenericForm>
-      </div>
-      <div class="modal-footer justify-content-end">
-        <button type="button" class="btn btn-secondary" onclick={closeModal}
-          >Close</button
-        >
-      </div>
-    </div>
-  </div>
 </div>
 
 <main>

web/frontend/src/lib/Models.svelte.ts

@@ -0,0 +1,16 @@
+export type Retailer = {
+  id: number;
+  shopname: string;
+  url: string;
+  country: string;
+  display: number;
+};
+
+export type News = {
+  id: number;
+  newsTitle: string;
+  newsText: string;
+  newsDate: Date;
+  newsPublish: Date;
+  display: number;
+};

web/frontend/src/lib/NewsForm.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import GenericForm from "./GenericForm.svelte";
+  import type { News } from "./Models.svelte.ts";
+
+  let { showModal = $bindable(), role } = $props();
+
+  let formdata: News = {
+    newsTitle: "",
+    newsText: "",
+    id: 0,
+    newsDate: new Date(),
+    newsPublish: new Date(),
+    display: 0,
+  };
+
+  let columns: string[] = ["newsTitle", "newsText", "newsDate", "newsPublish"];
+
+  function closeModal() {
+    showModal = false;
+  }
+
+  function submitForm(data: News) {
+    closeModal();
+    console.log("News Form Submitted:", data, role);
+  }
+</script>
+
+<div class="modal-dialog" role="document">
+  <div class="modal-content">
+    <div class="modal-header">
+      <h5 class="modal-title">{role} News</h5>
+    </div>
+    <div class="modal-body">
+      <GenericForm formData={formdata} onSubmit={submitForm}>
+        {#each columns as col}
+          <div class="mb-3">
+            <label for={col}>{col}:</label>
+            <input
+              id={col}
+              type="text"
+              bind:value={formdata[col as keyof News]}
+            />
+          </div>
+        {/each}
+      </GenericForm>
+    </div>
+    <div class="modal-footer justify-content-end">
+      <button type="button" class="btn btn-secondary" onclick={closeModal}
+        >Close</button
+      >
+    </div>
+  </div>
+</div>

web/frontend/src/lib/RestAPI.svelte.ts

@@ -0,0 +1,26 @@
+export async function createResource<T>(
+  endpoint: string,
+  data: T,
+): Promise<Response> {
+  return fetch(endpoint, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(data),
+  });
+}
+
+export async function updateResource<T>(
+  endpoint: string,
+  data: T,
+): Promise<Response> {
+  return fetch(endpoint, {
+    method: "PUT", // or 'PATCH'
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(data),
+  });
+}
+
+export async function fetchData<T>(endpoint: string, data: T) {
+  const res = await fetch("http://localhost:8080/api/" + endpoint);
+  data = await res.json();
+}

web/frontend/src/lib/RetailerForm.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import GenericForm from "./GenericForm.svelte";
+  import type { Retailer } from "./Models.svelte.ts";
+
+  let { showModal = $bindable(), role } = $props();
+
+  let formdata: Retailer = {
+    shopname: "",
+    url: "",
+    id: 0,
+    country: "",
+    display: 0,
+  };
+
+  let columns: string[] = ["shopname", "country", "url"];
+
+  function closeModal() {
+    showModal = false;
+  }
+
+  function submitForm(data: Retailer) {
+    closeModal();
+    console.log("Retailer Form Submitted:", data, role);
+  }
+</script>
+
+<div class="modal-dialog" role="document">
+  <div class="modal-content">
+    <div class="modal-header">
+      <h5 class="modal-title">Add Retailer</h5>
+    </div>
+    <div class="modal-body">
+      <GenericForm formData={formdata} onSubmit={submitForm}>
+        {#each columns as col}
+          <div class="mb-3">
+            <label for={col}>{col}:</label>
+            <input
+              id={col}
+              type="text"
+              bind:value={formdata[col as keyof Retailer]}
+            />
+          </div>
+        {/each}
+      </GenericForm>
+    </div>
+    <div class="modal-footer justify-content-end">
+      <button type="button" class="btn btn-secondary" onclick={closeModal}
+        >Close</button
+      >
+    </div>
+  </div>
+</div>

web/frontend/tsconfig.app.json

@@ -3,6 +3,7 @@
   "compilerOptions": {
     "target": "ESNext",
     "useDefineForClassFields": true,
+    "allowImportingTsExtensions": true,
     "module": "ESNext",
     "resolveJsonModule": true,
     /**

web/frontend/tsconfig.node.json

@@ -4,6 +4,7 @@
     "target": "ES2022",
     "lib": ["ES2023"],
     "module": "ESNext",
+    "composite": true,
     "skipLibCheck": true,
 
     /* Bundler mode */