initial commit

webapp/src/views/AboutView.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="flex flex-col items-center justify-center h-screen">
+    <h1 class="font-light font-sans text-3xl">This app was generated using the Masonry CLI tool.</h1>
+    <span>&nbsp;</span>
+    <span>Vectors and icons by <a href="https://www.svgrepo.com" target="_blank">SVG Repo</a></span>
+    <span>Vectors and icons by <a href="https://www.figma.com/@thewolfkit?ref=svgrepo.com" target="_blank">Thewolfkit</a> in CC Attribution License via <a href="https://www.svgrepo.com/" target="_blank">SVG Repo</a></span>
+  </div>
+</template>
+
+<style>
+</style>

webapp/src/views/Home2View.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { type peachProduct } from '@/generated';
+import { onMounted, ref } from 'vue';
+import PeachCreateProductRequestForm from '@/generated-sample-components/peachCreateProductRequestForm.vue';
+import PeachUpdateProductRequestForm from '@/generated-sample-components/peachUpdateProductRequestForm.vue';
+import PeachListProductsTable from '@/generated-sample-components/peachListProductsTable.vue';
+// import DynamicTableTest from '@/components/dynamicTableTest.vue'; // Commented out as in your original
+
+// State to hold the selected product for editing (null means show creation form)
+const selectedProduct = ref<peachProduct | null>(null);
+
+const tableRef = ref();
+
+// Tells the table to update its data
+const callFetchData = () => {
+  if (tableRef.value) {
+    tableRef.value.fetchData();
+  }
+  // Optionally reset to creation form after submission (uncomment if desired)
+  selectedProduct.value = null;
+};
+
+// Update selectedProduct when a table row is clicked
+const updateEditProduct = (product: peachProduct) => {
+  selectedProduct.value = { ...product }; // Create a copy to avoid mutating the original
+};
+
+onMounted(() => {
+  // Any initialization code can go here
+});
+</script>
+
+<template>
+  <main>
+    <div class="flex flex-col md:flex-row">
+      <!-- Form Container with fixed width on medium screens and up -->
+      <div class="form-container w-full md:w-80 p-4">
+        <peach-create-product-request-form
+          v-if="!selectedProduct"
+          formTitle="New Product"
+          @send="callFetchData"
+        ></peach-create-product-request-form>
+        <peach-update-product-request-form
+          v-else
+          :initial-values="selectedProduct"
+          formTitle="Edit Product"
+          @send="callFetchData"
+        ></peach-update-product-request-form>
+      </div>
+      <!-- Table Container takes remaining space -->
+      <div class="table-container flex-1 p-4">
+        <peach-list-products-table
+          ref="tableRef"
+          @row-click="updateEditProduct"
+        ></peach-list-products-table>
+      </div>
+      <!-- <dynamic-table-test></dynamic-table-test> -->
+    </div>
+  </main>
+</template>

webapp/src/views/HomeView.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+
+import { type peachProduct } from '@/generated'
+import { onMounted, ref } from 'vue'
+import PeachCreateProductRequestForm from '@/generated-sample-components/peachCreateProductRequestForm.vue'
+import PeachUpdateProductRequestForm from '@/generated-sample-components/peachUpdateProductRequestForm.vue'
+import PeachListProductsTable from '@/generated-sample-components/peachListProductsTable.vue'
+import DynamicTableTest from '@/components/dynamicTableTest.vue'
+
+const peachProduct = ref<peachProduct>({
+  id: '123',
+  name: 'Test Product',
+  description: 'This is a test product',
+  price: 100
+});
+
+const tableRef = ref();
+
+// tells the table to update its data
+const callFetchData = () => {
+  if (tableRef.value) {
+    tableRef.value.fetchData();
+  }
+};
+
+const updateEditProduct = (product: peachProduct) => {
+  peachProduct.value.id = product.id;
+  peachProduct.value.name = product.name;
+  peachProduct.value.description = product.description;
+  peachProduct.value.price = product.price;
+};
+
+onMounted(() => {
+
+});
+</script>
+
+<template>
+  <main>
+    <div class="flex flex-row flex-wrap justify-around">
+      <peach-create-product-request-form class="flex-auto" formTitle="New Product" @send="callFetchData"></peach-create-product-request-form>
+      <peach-update-product-request-form class="flex-auto" :initial-values="peachProduct" formTitle="Edit Product" @send="callFetchData"></peach-update-product-request-form>
+      <peach-list-products-table class="" ref="tableRef" @row-click="updateEditProduct"></peach-list-products-table>
+<!--      <dynamic-table-test></dynamic-table-test>-->
+    </div>
+  </main>
+</template>

webapp/src/views/Password.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <main>
+      Username and password form <br>
+      <button class="bg-blue-400 pl-4 pr-4 pt-2 pb-2 cursor-pointer rounded-2xl" @click="login">Login</button>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAuthenticationStore } from '@/stores/authentication.ts'
+import { useRouter } from 'vue-router'
+
+const router = useRouter();
+
+function login() {
+  const authenticationStore = useAuthenticationStore();
+  authenticationStore.login();
+  router.push('/');
+}
+</script>