apollo-fe/src/views/pages/KsNewGitRepoForm.vue

<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">Upload New Code Repository</h2>
                </div>
                <form @submit.prevent="submitForm" class="p-fluid">
                    <div class="flex flex-col gap-4">
                        <div class="flex flex-col gap-2">
                            <label for="repoName">Repo Name</label>
                            <InputText id="repoName" v-model="formData.repoName" placeholder="Enter Repo Name" required class="w-full" />
                        </div>
                        <div class="flex flex-col gap-2">
                            <label for="branch">Branch</label>
                            <InputText id="branch" v-model="formData.branch" placeholder="Enter Branch" required class="w-full" />
                        </div>
                        <div class="flex flex-col gap-2">
                            <label for="commitId">CommitID</label>
                            <InputText id="commitId" type="text" v-model="formData.commitId" required class="w-full" />
                        </div>
                        <div class="col-12 mb-4">
                            <span class="p-float-label">
                                <label for="repoPath">Repo Path</label>
                                <InputText id="repoPath" v-model="formData.repoPath" required class="w-full" />
                            </span>
                        </div>
                        <div class="flex flex-col gap-2">
                            <label for="defaultChunkSize">Default Chunk Size</label>
                            <InputNumber id="defaultChunkSize" v-model="formData.defaultChunkSize" required class="w-full" />
                        </div>
                        <div class="flex flex-col gap-2">
                            <label for="minChunkSize">Min Chunk Size</label>
                            <InputNumber id="minChunkSize" v-model="formData.minChunkSize" required class="w-full" />
                        </div>
                        <div class="flex flex-col gap-2">
                            <label for="maxNumberOfChunks">Max Number of Chunks</label>
                            <InputNumber id="maxNumberOfChunks" v-model="formData.maxNumberOfChunks" required class="w-full" />
                        </div>
                        <div class="flex flex-col gap-2">
                            <label for="minChunkSizeToEmbed">Min Chunk Size to Embed</label>
                            <InputNumber id="minChunkSizeToEmbed" v-model="formData.minChunkSizeToEmbed" required class="w-full" />
                        </div>
                    </div>
                    <Button type="submit" label="Submit" :disabled="isSubmitting" :fluid="false" class="p-button-rounded p-button-lg mt-4" />
                </form>
            </div>
        </div>
    </Fluid>
</template>

<script setup>
import axios from 'axios';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useToast } from 'primevue/usetoast';
import InputText from 'primevue/inputtext';
import InputNumber from 'primevue/inputnumber';
import Button from 'primevue/button';

const toast = useToast();
const router = useRouter();
const isSubmitting = ref(false);

const formData = ref({
    repoName: '',
    branch: '',
    commitId: '',
    repoPath: '',
    defaultChunkSize: 1988,
    minChunkSize: 200,
    maxNumberOfChunks: 1988,
    minChunkSizeToEmbed: 20
});

const submitForm = async () => {
    if (isSubmitting.value) return; // Prevent duplicate submissions

    isSubmitting.value = true;

    const formDataToSend = new FormData();

    formDataToSend.append('repoName', formData.value.repoName);
    formDataToSend.append('branch', formData.value.branch);
    formDataToSend.append('commitId', formData.value.commitId);
    formDataToSend.append('repoPath', formData.value.repoPath);
    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('/fe-api/ks_git_repos/uploadRepo', formDataToSend);
        console.log('Submit successful:', response.data);
        toast.add({ severity: 'success', summary: 'Success', detail: 'Repository submitted successfully', life: 3000 });

        // Redirect to desktop.vue
        router.push({ name: 'ks-git-repos' });
    } catch (error) {
        console.error('Submit failed:', error);
        toast.add({ severity: 'error', summary: 'Error', detail: 'Submission failed', life: 3000 });
    }
};
</script>

<style scoped>
.card-container {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
}

:deep(.p-card) {
    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-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);
}

.mt-4 {
    margin-top: 1rem;
}
</style>