From 4899498a9a6eeb259e1be8021e98d0a3f3ef35d3 Mon Sep 17 00:00:00 2001
From: Zubairrafi <zubair@appscode.com>
Date: Fri, 15 Mar 2024 11:04:10 +0600
Subject: [PATCH] First tab showed

Signed-off-by: Zubairrafi <zubair@appscode.com>
---
 src/components/ObjectForm.vue        |  1 +
 src/components/ObjectFormWrapper.vue |  7 ++++-
 src/components/Tabs.vue              | 40 +++++++++++++++++++++++++++-
 src/components/VueOpenapiForm.vue    |  1 +
 4 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/src/components/ObjectForm.vue b/src/components/ObjectForm.vue
index d320f3a..2fba700 100644
--- a/src/components/ObjectForm.vue
+++ b/src/components/ObjectForm.vue
@@ -23,6 +23,7 @@
           :schema="properties[key]"
           :errors="errors"
           :reference-model="referenceModel[key] || {}"
+          :tab-counter="2"
           @update:modelValue="handleChange"
         />
       </v-field>
diff --git a/src/components/ObjectFormWrapper.vue b/src/components/ObjectFormWrapper.vue
index 7a1f7a5..120c50e 100644
--- a/src/components/ObjectFormWrapper.vue
+++ b/src/components/ObjectFormWrapper.vue
@@ -22,7 +22,7 @@
         <!-- show errors-->
         <component-errors :errors="calcFormErrors(errors, fieldName)" />
       </h6>
-      <tabs v-if="!onlyJson" v-model="activeTab" />
+      <tabs v-if="!onlyJson" v-model="activeTab" :showTabCounter="tabCounter" />
     </div>
     <!-- form for all the object's properties -->
     <object-form
@@ -39,6 +39,7 @@
       :is-self-folded="isFolded"
       :reference-model="referenceModel || {}"
       :errors="errors"
+      :tab-counter="tabCounter"
     />
     <!-- declared in tabs component -->
     <yaml-form
@@ -98,6 +99,10 @@ export default defineComponent({
       type: Number,
       default: 1,
     },
+    tabCounter: {
+      type: Number,
+      default: 0,
+    }
   },
 });
 </script>
diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
index f8beaa2..50e2081 100644
--- a/src/components/Tabs.vue
+++ b/src/components/Tabs.vue
@@ -1,5 +1,38 @@
 <template>
-  <div class="tabs ac-tabs is-line">
+  <div v-if="showTabCounter===1" class="tabs is-line">
+
+<ul>
+  <li :class="{ 'is-active': activeTab === 'form' }">
+    <a @click.prevent="showForm()">
+      <span class="icon is-small"
+        ><i
+          class="fa fa-file-text fa-flip-horizontal"
+          aria-hidden="true"
+        ></i
+      ></span>
+      <span>Form</span>
+    </a>
+  </li>
+  <li :class="{ 'is-active': activeTab === 'yaml' }">
+    <a @click.prevent="showYaml()">
+      <span class="icon is-small"
+        ><i class="fa fa-code" aria-hidden="true"></i
+      ></span>
+      <span>YAML</span>
+    </a>
+  </li>
+  <li :class="{ 'is-active': activeTab === 'json' }">
+    <a @click.prevent="showJson()">
+      <span class="icon is-small"
+        ><i class="fa fa-code" aria-hidden="true"></i
+      ></span>
+      <span>JSON</span>
+    </a>
+  </li>
+</ul>
+</div>
+<div v-else class="tabs ac-tabs is-line">
+
     <ul>
       <li :class="{ 'is-active': activeTab === 'form' }">
         <a @click.prevent="showForm()">
@@ -30,6 +63,7 @@
       </li>
     </ul>
   </div>
+
 </template>
 
 <script>
@@ -42,6 +76,10 @@ export default defineComponent({
       type: String,
       default: 'form',
     },
+    showTabCounter: {
+      type: Number,
+      default: 0,
+    }
   },
   emits: ['update:modelValue'],
 
diff --git a/src/components/VueOpenapiForm.vue b/src/components/VueOpenapiForm.vue
index dc15233..8e301a7 100644
--- a/src/components/VueOpenapiForm.vue
+++ b/src/components/VueOpenapiForm.vue
@@ -21,6 +21,7 @@
             :schema="extendedSchema"
             :reference-model="referenceModel || {}"
             :errors="errors"
+            :tab-counter =1
             @update:modelValue="handleChange"
           />
         </v-field>