From 6bdc78816692d333f2bbfd5a8a9587a3c638235d Mon Sep 17 00:00:00 2001
From: sumedh <s.shamrao.shinde@accenture.com>
Date: Fri, 13 Sep 2024 16:39:14 +0530
Subject: [PATCH] cancel button in DialogBox

---
 src/views/pages/KsGitCloneRepoFormDialog.vue | 141 ++++++++++++-------
 src/views/pages/KsGitRepos.vue               |   4 +-
 2 files changed, 95 insertions(+), 50 deletions(-)

diff --git a/src/views/pages/KsGitCloneRepoFormDialog.vue b/src/views/pages/KsGitCloneRepoFormDialog.vue
index 1a6b3bf..d6c48ec 100644
--- a/src/views/pages/KsGitCloneRepoFormDialog.vue
+++ b/src/views/pages/KsGitCloneRepoFormDialog.vue
@@ -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>
\ No newline at end of file
+</script>
+
+<style scoped>
+.button-container {
+    display: flex;
+    justify-content: flex-end;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/pages/KsGitRepos.vue b/src/views/pages/KsGitRepos.vue
index d09b835..085ffa5 100644
--- a/src/views/pages/KsGitRepos.vue
+++ b/src/views/pages/KsGitRepos.vue
@@ -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>