Update KsNewDocumentForm.vue to add ksProjectName field and modify ksDocType dropdown options

src/views/pages/ksDocuments/KsNewDocumentForm.vue

@@ -8,7 +8,7 @@
         <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
+              <label for="description" v-tooltip="'A brief overview of the document.'">Document
                 Description</label>
               <InputText id="description" type="text" v-model="formData.description" required class="w-full" />
             </span>
@@ -22,7 +22,12 @@
               <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="ksProjectName" v-tooltip="'Enter the project name here.'">KS Projerct Name</label>
+              <InputText id="ksProjectName" v-model="formData.ksProjectName" 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>
@@ -32,8 +37,10 @@
 
           <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>
-              <InputText id="ksDocType" v-model="formData.ksDocType" required class="w-full" />
+              <label for="ksDocType" v-tooltip="'Specify the type of document e.g functional, code_istruction'">KS
+                Document Type</label>+
+              <Dropdown id="ksDocType" v-model="formData.ksDocType" :options="documentTypeOptions" optionLabel="name">
+              </Dropdown>
             </span>
           </div>
 
@@ -86,7 +93,7 @@
                 class="p-button-rounded" @select="onFileSelect" />
             </div>
           </div>
-          <Button type="submit" label="Submit" :fluid="false" class="p-button-rounded p-button-lg" />
+          <Button type="submit" label="Submit" :fluid="false"></Button>
         </form>
       </div>
     </div>
@@ -102,24 +109,24 @@ 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 documentTypeOptions = ref([
+  { name: 'Functional', value: 'functional' },
+  { name: 'Code Instruction', value: 'code_instruction' },
+  { name: 'Specification', value: 'specification' },
+  { name: 'Other', value: 'other' }
 ]);
 
 const formData = ref({
-  description: '', //Jenkins DevopsJ2Cloud System CSV configuration md file
-  ingestionStatus: 'NEW',
-  type: '', //.md file
-  ksApplicationName: '', //Jenkins-DevopsJ2Cloud
-  ksDocType: 'Functional',
-  ksDocSource: '', //Git Repository - DevopsJ2Cloud CSV System Configuration
-  defaultChunkSize: 1000,
-  minChunkSize: 200,
+  description: '',
+  type: '',
+  ksProjectName: '',
+  ksApplicationName: '',
+  ksDocType: 'functional',
+  ksDocSource: '',
+  defaultChunkSize: 2000,
+  minChunkSize: 50,
   maxNumberOfChunks: 1000,
-  minChunkSizeToEmbed: 20
+  minChunkSizeToEmbed: 50
 });
 
 const fileUpload = ref(null);
@@ -136,11 +143,11 @@ const submitForm = async () => {
     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('ksProjectName', formData.value.ksProjectName);
+  formDataToSend.append('ksDocType', formData.value.ksDocType.value);
   formDataToSend.append('ksDocSource', formData.value.ksDocSource);
   formDataToSend.append('defaultChunkSize', formData.value.defaultChunkSize);
   formDataToSend.append('minChunkSize', formData.value.minChunkSize);
@@ -166,40 +173,4 @@ const submitForm = async () => {
 
 </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>
+<style scoped></style>