Initial commit

src/views/pages/KsDocuments.vue

@@ -0,0 +1,74 @@
+<template>
+    <div className="card">        
+
+        <DataTable
+            :value="ksdocuments"
+            :paginator="true"
+            :rows="10"
+            dataKey="id"
+            :rowHover="true"
+            showGridlines
+        >
+        <template #header>
+            <div class="flex flex-wrap items-center justify-between gap-2">
+                <span class="text-xl font-bold">KS Documents</span>
+                <Button icon="pi pi-plus" rounded raised @click="newKsDocument()" /> 
+            </div>
+        </template>
+        <Column field="name" header="Name"></Column>
+        <Column field="fileName" header="File Name"></Column>
+        <Column field="ingestionStatus" header="Status">
+            <template #body="slotProps">
+                <Tag :value="slotProps.data.ingestionStatus" :severity="getStatus(slotProps.data)" />
+            </template>
+        </Column>
+        <Column field="ingestionDate" header="Ingestion Date"></Column>
+        <Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
+            <template #body="slotProps">
+                <Button type="button" icon="pi pi-pencil" rounded @click="editKsDocument(slotProps.data)"/>
+            </template>
+        </Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { onMounted } from 'vue'
+import axios from 'axios';
+
+import { useRoute, useRouter } from 'vue-router'
+import { data } from 'autoprefixer';
+
+const router = useRouter()
+const ksdocuments = ref(null);
+
+onMounted(() => {
+    axios.get('http://localhost:8082/fe-api/ksdocuments')
+        .then(response => {
+            console.log(response.data);
+            ksdocuments.value = response.data;
+        });
+});
+
+const getStatus = (data) => {
+    if (data.ingestionStatus === 'INGESTED') {
+        return 'success';
+    } else if (data.ingestionStatus === 'NEW') {
+        return 'danger';
+    } else {
+        return 'warning';
+    }
+}
+
+const editKsDocument = (data) => {
+    console.log(data);
+    router.push({ name: 'ks-document-edit', params: { id: data.id } });
+}
+
+const newKsDocument = () => {
+    console.log('new');
+    router.push({ name: 'ks-document-new'});
+
+}
+</script>