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

cancel button in DialogBox

Browse Source
This commit is contained in:
sumedh
2024-09-13 16:39:14 +05:30
parent 9c047d6e2e
commit 6bdc788166
2 changed files with 95 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
src/views/pages/KsGitCloneRepoFormDialog.vue
View File

@@ -1,57 +1,79 @@
<template> <template>
<form @submit.prevent="submitForm" class="p-fluid"> <form @submit.prevent="submitForm" class="p-fluid">
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-6">
<div class="flex flex-col gap-2"> <div class="grid grid-cols-12 gap-4">
<label for="repoName">Repo Name</label> <div class="col-span-6">
<InputText id="repoName" v-model="formData.repoName" placeholder="Enter Repo Name" required <label for="repoName" class="block font-bold mb-3">Repo Name</label>
class="w-full" /> <InputText id="repoName" v-model.trim="formData.repoName" placeholder="Enter Repo Name"
required="true" fluid />
</div>
<div class="col-span-6">
<label for="group" class="block font-bold mb-3">Group Name</label>
<InputText id="group" v-model.trim="formData.group" placeholder="Enter Group Name" required="true"
fluid />
</div>
</div> </div>
<div class="flex flex-col gap-2">
<label for="group">Group Name</label>
<InputText id="group" v-model="formData.group" placeholder="Enter Group Name" required class="w-full" /> <div>
<label for="source" class="block font-bold mb-3">Git Source URL</label>
<!--InputText id="source" v-model.trim="formData.source" placeholder="Enter Source base URL"
required="true" /-->
<Select id="source" v-model="formData.source" :options="gitSourceURLs" optionLabel="label"
optionValue="value" placeholder="Select Git URL" fluid></Select>
</div> </div>
<div class="flex flex-col gap-2">
<label for="source">Source Name</label> <div class="grid grid-cols-12 gap-4">
<InputText id="source" v-model="formData.source" placeholder="Enter Source base URL" required <div class="col-span-6">
class="w-full" /> <label for="branch" class="block font-bold mb-3">Branch</label>
<InputText id="branch" v-model.trim="formData.branch" placeholder="Enter Branch" required="true" />
</div>
<div class="col-span-6">
<label for="tokenType" class="block font-bold mb-3">Git Token Type</label>
<Select id="tokenType" v-model="formData.tokenType" :options="tokenTypes" optionLabel="label"
optionValue="value" placeholder="Select Git Token Type" fluid></Select>
</div>
</div> </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>
<label for="commitId" class="block font-bold mb-3">CommitID</label>
<InputText id="commitId" type="text" v-model.trim="formData.commitId" required="true" />
</div-->
<div class="grid grid-cols-12 gap-4">
<div class="col-span-6">
<label for="defaultChunkSize" class="block font-bold mb-3">Default Chunk Size</label>
<InputNumber id="defaultChunkSize" v-model="formData.defaultChunkSize" required="true" integeronly
fluid />
</div>
<div class="col-span-6">
<label for="minChunkSize" class="block font-bold mb-3">Min Chunk Size</label>
<InputNumber id="minChunkSize" v-model="formData.minChunkSize" required="true" integeronly fluid />
</div>
</div> </div>
<div class="flex flex-col gap-2">
<label for="commitId">CommitID</label> <div class="grid grid-cols-12 gap-4">
<InputText id="commitId" type="text" v-model="formData.commitId" required class="w-full" /> <div class="col-span-6">
</div> <label for="maxNumberOfChunks" class="block font-bold mb-3">Max Number of Chunks</label>
<div class="flex flex-col gap-2"> <InputNumber id="maxNumberOfChunks" v-model="formData.maxNumberOfChunks" required="true" integeronly
<label for="tokenType">Git Token Type</label> fluid />
<InputText id="tokenType" type="text" v-model="formData.tokenType" required class="w-full" /> </div>
</div> <div class="col-span-6">
<!--div class="col-12 mb-4"> <label for="minChunkSizeToEmbed" class="block font-bold mb-3">Min Chunk Size to Embed</label>
<span class="p-float-label"> <InputNumber id="minChunkSizeToEmbed" v-model="formData.minChunkSizeToEmbed" required="true"
<label for="repoPath">Repo Path</label> integeronly fluid />
<InputText id="repoPath" v-model="formData.repoPath" required class="w-full" /> </div>
</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>
</div> </div>
<Button type="submit" label="Submit" text rounded raised :disabled="isSubmitting" :fluid="false" <div class="button-container">
class="p-button-rounded p-button-lg mt-4" /> <Button type="button" label="Cancel" text rounded raised :fluid="false" severity="danger"
class="p-button-rounded p-button-lg mt-4 mr-4" @click="handleCancel" />
<Button type="submit" label="Submit" text rounded raised :disabled="isSubmitting" :fluid="false"
class="p-button-rounded p-button-lg mt-4" />
</div>
</form> </form>
</template> </template>
<script setup> <script setup>
@@ -71,9 +93,25 @@ const formData = ref({
minChunkSizeToEmbed: 20 minChunkSizeToEmbed: 20
}); });
const gitSourceURLs = ref([
{ label: 'https://github.com', value: 'https://github.com' },
{ label: 'https://gitlab.gcp.windtre.it', value: 'https://gitlab.gcp.windtre.it' },
{ label: 'http://devops-tool-a-vip01.wind.root.it:8888', value: 'http://devops-tool-a-vip01.wind.root.it:8888' }
]);
const tokenTypes = ref([
{ label: 'git-cloud', value: 'cloud' },
{ label: 'git-onpremises', value: 'onpremises' },
{ label: 'git-github', value: 'github' }
]);
const isSubmitting = ref(false); const isSubmitting = ref(false);
const emit = defineEmits(['submitForm']) const emit = defineEmits(['submitForm', 'cancel'])
const handleCancel = () => {
emit('cancel')
}
const submitForm = () => { const submitForm = () => {
if (isSubmitting.value) return; // Prevent duplicate submissions if (isSubmitting.value) return; // Prevent duplicate submissions
@@ -106,4 +144,11 @@ function formDatatoJson(formData) {
}) })
return jsonObject; return jsonObject;
} }
</script> </script>
<style scoped>
.button-container {
display: flex;
justify-content: flex-end;
}
</style>

4
src/views/pages/KsGitRepos.vue
View File

@@ -24,10 +24,10 @@
<Button label="Add Git Repo" icon="pi pi-bolt" severity="secondary" rounded @click="showDialog = true" <Button label="Add Git Repo" icon="pi pi-bolt" severity="secondary" rounded @click="showDialog = true"
v-tooltip="'Add New Git Repo using Dialog'" /> v-tooltip="'Add New Git Repo using Dialog'" />
<Dialog v-model:visible="showDialog" :style="{ width: '600px' }" header="Repository Details" <Dialog v-model:visible="showDialog" :style="{ width: '800px' }" header="Repository Details"
:modal="true"> :modal="true">
<div> <div>
<cloneForm @submitForm="cloneRepo" /> <cloneForm @submitForm="cloneRepo" @cancel="showDialog = false" />
</div> </div>
</Dialog> </Dialog>
</template> </template>