Converted from check box to toggle in scale VM, changeoffering, resize and migrate volume forms

Author: harikrishna-patnala

ui/src/views/compute/ScaleVM.vue

@@ -50,11 +50,10 @@
 
     <a-form-item :label="$t('label.automigrate.volume')">
       <tooltip-label slot="label" :title="$t('label.automigrate.volume')" :tooltip="apiParams.automigrate.description"/>
-      <a-checkbox
-        :checked="autoMigrate"
+      <a-switch
         v-decorator="['autoMigrate']"
-        @change="handleAutoMigrateCheckChange"
-      ></a-checkbox>
+        :checked="autoMigrate"
+        @change="val => { autoMigrate = val }"/>
     </a-form-item>
 
     <div :span="24" class="action-button">
@@ -161,9 +160,6 @@ export default {
       this.selectedOffering = this.offeringsMap[id]
       this.params.automigrate = this.autoMigrate
     },
-    handleAutoMigrateCheckChange (e) {
-      this.autoMigrate = e.target.checked
-    },
     updateFieldValue (name, value) {
       this.params[name] = value
     },

ui/src/views/storage/ChangeOfferingForVolume.vue

@@ -91,18 +91,16 @@
     </span>
     <a-form-item :label="$t('label.automigrate.volume')">
       <tooltip-label slot="label" :title="$t('label.automigrate.volume')" :tooltip="apiParams.automigrate.description"/>
-      <a-checkbox
-        :checked="autoMigrate"
+      <a-switch
         v-decorator="['autoMigrate']"
-        @change="handleAutoMigrateCheckChange"
-      ></a-checkbox>
+        :checked="autoMigrate"
+        @change="val => { autoMigrate = val }"/>
     </a-form-item>
     <a-form-item :label="$t('label.shrinkok')">
-      <a-checkbox
-        :checked="shrinkOk"
+      <a-switch
         v-decorator="['shrinkOk']"
-        @change="handleShrinkOkCheckChange"
-      ></a-checkbox>
+        :checked="shrinkOk"
+        @change="val => { shrinkOk = val }"/>
     </a-form-item>
     <a-divider />
     <div class="actions">
@@ -220,12 +218,6 @@ export default {
       const offering = this.diskOfferings.filter(x => x.id === id)
       this.customDiskOffering = offering[0]?.iscustomized || false
       this.isCustomizedDiskIOps = offering[0]?.iscustomizediops || false
-    },
-    handleAutoMigrateCheckChange (e) {
-      this.autoMigrate = e.target.checked
-    },
-    handleShrinkOkCheckChange (e) {
-      this.shrinkOk = e.target.checked
     }
   }
 }

ui/src/views/storage/MigrateVolume.vue

@@ -35,7 +35,10 @@
         <p class="modal-form__label" @click="replaceDiskOffering = !replaceDiskOffering" style="cursor:pointer;">
           {{ $t('label.usenewdiskoffering') }}
         </p>
-        <a-checkbox v-model="replaceDiskOffering" />
+        <a-switch
+          v-decorator="['replaceDiskOffering']"
+          :checked="replaceDiskOffering"
+          @change="val => { replaceDiskOffering = val }"/>
 
         <template v-if="replaceDiskOffering">
           <p class="modal-form__label">{{ $t('label.newdiskoffering') }}</p>

ui/src/views/storage/ResizeVolume.vue

@@ -39,7 +39,10 @@
         </a-form-item>
       </div>
       <a-form-item :label="$t('label.shrinkok')" v-if="!['XenServer'].includes(resource.hypervisor)">
-        <a-checkbox v-decorator="['shrinkok']" />
+        <a-switch
+          v-decorator="['shrinkOk']"
+          :checked="shrinkOk"
+          @change="val => { shrinkOk = val }"/>
       </a-form-item>
       <div :span="24" class="action-button">
         <a-button @click="closeModal">{{ $t('label.cancel') }}</a-button>