cancel button in DialogBox
This commit is contained in:
sumedh
@@ -1,57 +1,79 @@
|
||||
<template>
|
||||
<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 class="flex flex-col gap-6">
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-6">
|
||||
<label for="repoName" class="block font-bold mb-3">Repo Name</label>
|
||||
<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 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 class="flex flex-col gap-2">
|
||||
<label for="source">Source Name</label>
|
||||
<InputText id="source" v-model="formData.source" placeholder="Enter Source base URL" required
|
||||
class="w-full" />
|
||||
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-6">
|
||||
<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 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 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="flex flex-col gap-2">
|
||||
<label for="tokenType">Git Token Type</label>
|
||||
<InputText id="tokenType" type="text" v-model="formData.tokenType" 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 class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-6">
|
||||
<label for="maxNumberOfChunks" class="block font-bold mb-3">Max Number of Chunks</label>
|
||||
<InputNumber id="maxNumberOfChunks" v-model="formData.maxNumberOfChunks" required="true" integeronly
|
||||
fluid />
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label for="minChunkSizeToEmbed" class="block font-bold mb-3">Min Chunk Size to Embed</label>
|
||||
<InputNumber id="minChunkSizeToEmbed" v-model="formData.minChunkSizeToEmbed" required="true"
|
||||
integeronly fluid />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button type="submit" label="Submit" text rounded raised :disabled="isSubmitting" :fluid="false"
|
||||
class="p-button-rounded p-button-lg mt-4" />
|
||||
<div class="button-container">
|
||||
<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>
|
||||
</template>
|
||||
<script setup>
|
||||
@@ -71,9 +93,25 @@ const formData = ref({
|
||||
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 emit = defineEmits(['submitForm'])
|
||||
const emit = defineEmits(['submitForm', 'cancel'])
|
||||
|
||||
const handleCancel = () => {
|
||||
emit('cancel')
|
||||
}
|
||||
|
||||
const submitForm = () => {
|
||||
if (isSubmitting.value) return; // Prevent duplicate submissions
|
||||
@@ -106,4 +144,11 @@ function formDatatoJson(formData) {
|
||||
})
|
||||
return jsonObject;
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.button-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
@@ -24,10 +24,10 @@
|
||||
<Button label="Add Git Repo" icon="pi pi-bolt" severity="secondary" rounded @click="showDialog = true"
|
||||
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">
|
||||
<div>
|
||||
<cloneForm @submitForm="cloneRepo" />
|
||||
<cloneForm @submitForm="cloneRepo" @cancel="showDialog = false" />
|
||||
</div>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user