admin/apollo-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

folder structure modified

Browse Source
This commit is contained in:
sumedh
2024-10-11 12:17:40 +05:30
parent bda76abaf9
commit 175aff7216
9 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
src/views/pages/ksDocuments/KsNewDocumentForm.vue Normal file
View File

@@ -0,0 +1,207 @@
<template>
<Fluid>
<div class="flex mt-6">
<div class="card flex flex-col gap-4 w-full">
<div>
<h2 class="text-3xl font-bold mb-4">Ks document</h2>
</div>
<form @submit.prevent="submitForm" class="p-fluid">
<div class="col-12 md:col-6 mb-4">
<span class="p-float-label">
<label for="description" v-tooltip="'A brief overview of the system purpose and functionality.'">System
Description</label>
<InputText id="description" type="text" v-model="formData.description" required class="w-full" />
</span>
</div>
<div class="col-12 md:col-6 mb-4">
<span class="p-float-label">
<label for="type"
v-tooltip="'Specify the type of file here. e.g, PDF Document, DOCX, TXT, MD Document etc..'">File
Type</label>
<InputText id="type" v-model="formData.type" required class="w-full" />
</span>
</div>
<div class="col-12 md:col-6 mb-4">
<span class="p-float-label">
<label for="ksApplicationName" v-tooltip="'Enter the application name here.'">KS Application Name</label>
<InputText id="ksApplicationName" v-model="formData.ksApplicationName" required class="w-full" />
</span>
</div>
<div class="col-12 md:col-6 mb-4">
<span class="p-float-label">
<label for="ksDocType" v-tooltip="'Specify the type of document e.g, md, pdf,'">KS Document Type</label>
<Select id="ksDocType" v-model="formData.ksDocType" :options="dropdownItems" required optionLabel="name"
optionValue="value" placeholder="Select One" class="w-full"></Select>
<!--InputText id="ksDocType" v-model="formData.ksDocType" required class="w-full" /-->
</span>
</div>
<div class="col-12 md:col-6 mb-4">
<span class="p-float-label">
<label for="ksDocSource"
v-tooltip="'The KS Document Source field is intended to capture the origin or source from where the document was obtained or associated. ex.. Retrieved from DevopsJ2Cloud Git Repository - CSV System Configuration '">KS
Document Source</label>
<InputText id="ksDocSource" v-model="formData.ksDocSource" required class="w-full" />
</span>
</div>
<div class="col-12 md:col-6 mb-4">
<span class="p-float-label">
<label for="defaultChunkSize" v-tooltip="'Define the default size for chunks of data.'">Default Chunk
Size</label>
<InputNumber id="defaultChunkSize" v-model="formData.defaultChunkSize" required class="w-full" />
</span>
</div>
<div class="col-12 md:col-6 mb-4">
<span class="p-float-label">
<label for="minChunkSize" v-tooltip="'Specify the minimum allowable size for chunks'">Min Chunk
Size</label>
<InputNumber id="minChunkSize" v-model="formData.minChunkSize" required class="w-full" />
</span>
</div>
<div class="col-12 md:col-6 mb-4">
<span class="p-float-label">
<label for="maxNumberOfChunks" v-tooltip="'Set the maximum number of chunks allowed.'">Max Number of
Chunks</label>
<InputNumber id="maxNumberOfChunks" v-model="formData.maxNumberOfChunks" required class="w-full" />
</span>
</div>
<div class="col-12 md:col-6 mb-4">
<span class="p-float-label">
<label for="minChunkSizeToEmbed" v-tooltip="'Define the minimum chunk size that can be embedded.'">Min
Chunk Size to
Embed</label>
<InputNumber id="minChunkSizeToEmbed" v-model="formData.minChunkSizeToEmbed" required class="w-full" />
</span>
</div>
<div class="col-12 mb-4">
<label for="file" class="block text-lg mb-2" v-tooltip="'Upload the file here.'">File</label>
<div class="flex align-items-center">
<FileUpload ref="fileUpload" mode="basic" :maxFileSize="10000000000" chooseLabel="Select File"
class="p-button-rounded" @select="onFileSelect" />
</div>
</div>
<Button type="submit" label="Submit" :fluid="false" class="p-button-rounded p-button-lg" />
</form>
</div>
</div>
</Fluid>
</template>
<script setup>
import axios from 'axios';
import { useToast } from 'primevue/usetoast';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const toast = useToast();
const router = useRouter();
const dropdownItems = ref([
{ name: 'PDF', value: 'pdf' },
{ name: 'MD', value: 'md' },
{ name: 'DOCX', value: 'docx' },
{ name: 'EXCEL', value: 'excel' }
]);
const formData = ref({
description: '', //Jenkins DevopsJ2Cloud System CSV configuration md file
ingestionStatus: 'NEW',
type: '', //.md file
ksApplicationName: '', //Jenkins-DevopsJ2Cloud
ksDocType: '',
ksDocSource: '', //Git Repository - DevopsJ2Cloud CSV System Configuration
defaultChunkSize: 1000,
minChunkSize: 200,
maxNumberOfChunks: 1000,
minChunkSizeToEmbed: 20
});
const fileUpload = ref(null);
const selectedFile = ref(null);
const onFileSelect = (event) => {
selectedFile.value = event.files[0];
};
const submitForm = async () => {
const formDataToSend = new FormData();
if (selectedFile.value) {
formDataToSend.append('file', selectedFile.value);
}
// Append each field separately to ensure they are correctly processed by the server
formDataToSend.append('description', formData.value.description);
formDataToSend.append('type', formData.value.type);
formDataToSend.append('ksApplicationName', formData.value.ksApplicationName);
formDataToSend.append('ksDocType', formData.value.ksDocType);
formDataToSend.append('ksDocSource', formData.value.ksDocSource);
formDataToSend.append('defaultChunkSize', formData.value.defaultChunkSize);
formDataToSend.append('minChunkSize', formData.value.minChunkSize);
formDataToSend.append('maxNumberOfChunks', formData.value.maxNumberOfChunks);
formDataToSend.append('minChunkSizeToEmbed', formData.value.minChunkSizeToEmbed);
try {
const response = await axios.post('/upload', formDataToSend, {
headers: {
'Content-Type': 'multipart/form-data'
}
});
console.log('Upload successful:', response.data);
toast.add({ severity: 'success', summary: 'Success', detail: 'File uploaded successfully', life: 3000 });
// Redirect to desktop.vue
router.push({ name: 'ks-document' });
} catch (error) {
console.error('Upload failed:', error);
toast.add({ severity: 'error', summary: 'Error', detail: 'File upload failed', life: 3000 });
}
};
</script>
<style scoped>
.card-container {
max-width: 800px;
margin: 2rem auto;
padding: 0 1rem;
}
:deep(.p-card) {
background: linear-gradient(145deg, #f3f4f6, #ffffff);
border-radius: 15px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
:deep(.p-button) {
background: linear-gradient(45deg, #4CAF50, #45a049);
border: none;
transition: all 0.3s ease;
}
:deep(.p-button:hover) {
background: linear-gradient(45deg, #45a049, #4CAF50);
transform: translateY(-2px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
:deep(.p-inputtext:focus) {
box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}
:deep(.p-dropdown:focus) {
box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}
:deep(.p-inputnumber-input:focus) {
box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}
</style>