From 3beb16a4612e7c0d0f991017b63d666d57ea93b1 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Thu, 25 Mar 2021 14:41:27 +0700
Subject: [PATCH] fix the style of zone wizard on mobile view

---
 .../infra/zone/AdvancedGuestTrafficForm.vue   |   3 +-
 .../views/infra/zone/IpAddressRangeForm.vue   | 145 ++++++++++--------
 ui/src/views/infra/zone/StaticInputsForm.vue  |   3 +-
 ui/src/views/infra/zone/ZoneWizard.vue        |  37 ++++-
 .../infra/zone/ZoneWizardAddResources.vue     |  39 ++++-
 .../infra/zone/ZoneWizardNetworkSetupStep.vue |  36 ++++-
 .../ZoneWizardPhysicalNetworkSetupStep.vue    |  10 +-
 7 files changed, 190 insertions(+), 83 deletions(-)

diff --git a/ui/src/views/infra/zone/AdvancedGuestTrafficForm.vue b/ui/src/views/infra/zone/AdvancedGuestTrafficForm.vue
index 38ce507bf557..314cc1f6f41e 100644
--- a/ui/src/views/infra/zone/AdvancedGuestTrafficForm.vue
+++ b/ui/src/views/infra/zone/AdvancedGuestTrafficForm.vue
@@ -193,11 +193,10 @@ export default {
     min-height: 200px;
     text-align: center;
     vertical-align: center;
-    padding-top: 16px;
-    padding-top: 16px;
     margin-top: 8px;
     max-height: 300px;
     overflow-y: auto;
+    padding: 16px 20px 0;
 
     /deep/.has-error {
       .ant-form-explain {
diff --git a/ui/src/views/infra/zone/IpAddressRangeForm.vue b/ui/src/views/infra/zone/IpAddressRangeForm.vue
index 95c17dfbbbf0..07b2ef9c956e 100644
--- a/ui/src/views/infra/zone/IpAddressRangeForm.vue
+++ b/ui/src/views/infra/zone/IpAddressRangeForm.vue
@@ -24,78 +24,94 @@
     </a-card>
     <a-table
       bordered
+      :scroll="{ x: 500 }"
       :dataSource="ipRanges"
       :columns="columns"
       :pagination="false"
-      style="margin-bottom: 24px;" >
+      style="margin-bottom: 24px; width: 100%" >
       <template slot="actions" slot-scope="text, record">
         <a-button type="danger" shape="circle" icon="delete" @click="onDelete(record.key)" />
       </template>
       <template slot="footer">
         <a-form
-          layout="inline"
+          :layout="isMobile() ? 'horizontal': 'inline'"
           :form="form"
           @submit="handleAddRange">
-          <a-form-item :style="{ display: 'inline-block', width: '14%' }">
-            <a-input
-              v-decorator="[ 'gateway', {
-                rules: [{ required: true, message: $t('message.error.gateway') }]
-              }]"
-              :placeholder="$t('label.gateway')"
-            />
-          </a-form-item>
-          <a-form-item :style="{ display: 'inline-block', width: '14%' }">
-            <a-input
-              v-decorator="[ 'netmask', {
-                rules: [{ required: true, message: $t('message.error.netmask') }]
-              }]"
-              :placeholder="$t('label.netmask')"
-            />
-          </a-form-item>
-          <a-form-item :style="{ display: 'inline-block', width: '14%' }">
-            <a-input
-              v-decorator="[ 'vlan', { rules: [{ required: false }] }]"
-              :placeholder="$t('label.vlan')"
-            />
-          </a-form-item>
-          <a-form-item :style="{ display: 'inline-block', width: '14%' }">
-            <a-input
-              v-decorator="[ 'startIp', {
-                rules: [
-                  {
-                    required: true,
-                    message: $t('message.error.startip')
-                  },
-                  {
-                    validator: checkIpFormat,
-                    ipV4: true,
-                    message: $t('message.error.ipv4.address')
-                  }
-                ]
-              }]"
-              :placeholder="$t('label.start.ip')"
-            />
-          </a-form-item>
-          <a-form-item :style="{ display: 'inline-block', width: '14%' }">
-            <a-input
-              v-decorator="[ 'endIp', {
-                rules: [
-                  {
-                    required: true,
-                    message: $t('message.error.endip')
-                  },
-                  {
-                    validator: checkIpFormat,
-                    ipV4: true,
-                    message: $t('message.error.ipv4.address')
-                  }]
-              }]"
-              :placeholder="$t('label.end.ip')"
-            />
-          </a-form-item>
-          <a-form-item :style="{ display: 'inline-block', width: '14%' }">
-            <a-button type="primary" html-type="submit">{{ $t('label.add') }}</a-button>
-          </a-form-item>
+          <a-row :gutter="12">
+            <a-col :md="4" :lg="4">
+              <a-form-item>
+                <a-input
+                  v-decorator="[ 'gateway', {
+                    rules: [{ required: true, message: $t('message.error.gateway') }]
+                  }]"
+                  :placeholder="$t('label.gateway')"
+                  autoFocus
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :md="4" :lg="4">
+              <a-form-item>
+                <a-input
+                  v-decorator="[ 'netmask', {
+                    rules: [{ required: true, message: $t('message.error.netmask') }]
+                  }]"
+                  :placeholder="$t('label.netmask')"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :md="4" :lg="4">
+              <a-form-item>
+                <a-input
+                  v-decorator="[ 'vlan', { rules: [{ required: false }] }]"
+                  :placeholder="$t('label.vlan')"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :md="4" :lg="4">
+              <a-form-item>
+                <a-input
+                  v-decorator="[ 'startIp', {
+                    rules: [
+                      {
+                        required: true,
+                        message: $t('message.error.startip')
+                      },
+                      {
+                        validator: checkIpFormat,
+                        ipV4: true,
+                        message: $t('message.error.ipv4.address')
+                      }
+                    ]
+                  }]"
+                  :placeholder="$t('label.start.ip')"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :md="4" :lg="4">
+              <a-form-item>
+                <a-input
+                  v-decorator="[ 'endIp', {
+                    rules: [
+                      {
+                        required: true,
+                        message: $t('message.error.endip')
+                      },
+                      {
+                        validator: checkIpFormat,
+                        ipV4: true,
+                        message: $t('message.error.ipv4.address')
+                      }]
+                  }]"
+                  :placeholder="$t('label.end.ip')"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :md="4" :lg="4">
+              <a-form-item :style="{ display: 'inline-block', float: 'right' }">
+                <a-button type="primary" html-type="submit">{{ $t('label.add') }}</a-button>
+              </a-form-item>
+            </a-col>
+          </a-row>
         </a-form>
       </template>
     </a-table>
@@ -125,7 +141,10 @@
   </div>
 </template>
 <script>
+import { mixinDevice } from '@/utils/mixin.js'
+
 export default {
+  mixins: [mixinDevice],
   props: {
     traffic: {
       type: String,
@@ -182,7 +201,7 @@ export default {
           title: '',
           dataIndex: 'actions',
           scopedSlots: { customRender: 'actions' },
-          width: 50
+          width: 70
         }
       ],
       showError: false,
diff --git a/ui/src/views/infra/zone/StaticInputsForm.vue b/ui/src/views/infra/zone/StaticInputsForm.vue
index 2aa0f711ed15..170d4b4806d8 100644
--- a/ui/src/views/infra/zone/StaticInputsForm.vue
+++ b/ui/src/views/infra/zone/StaticInputsForm.vue
@@ -247,11 +247,10 @@ export default {
     min-height: 200px;
     text-align: center;
     vertical-align: center;
-    padding-top: 16px;
-    padding-top: 16px;
     margin-top: 8px;
     max-height: 300px;
     overflow-y: auto;
+    padding: 16px 20px 0;
 
     /deep/.has-error {
       .ant-form-explain {
diff --git a/ui/src/views/infra/zone/ZoneWizard.vue b/ui/src/views/infra/zone/ZoneWizard.vue
index 8fd0852c0fac..862b1f841f8a 100644
--- a/ui/src/views/infra/zone/ZoneWizard.vue
+++ b/ui/src/views/infra/zone/ZoneWizard.vue
@@ -18,13 +18,15 @@
 <template>
   <div class="form">
     <a-steps
+      ref="zoneStep"
       labelPlacement="vertical"
       size="small"
       :current="currentStep">
       <a-step
-        v-for="(item) in steps"
+        v-for="(item, index) in steps"
         :key="item.title"
-        :title="$t(item.title)">
+        :title="$t(item.title)"
+        :ref="`step${index}`">
       </a-step>
     </a-steps>
     <div>
@@ -79,6 +81,7 @@
   </div>
 </template>
 <script>
+import { mixinDevice } from '@/utils/mixin.js'
 import ZoneWizardZoneTypeStep from '@views/infra/zone/ZoneWizardZoneTypeStep'
 import ZoneWizardZoneDetailsStep from '@views/infra/zone/ZoneWizardZoneDetailsStep'
 import ZoneWizardNetworkSetupStep from '@views/infra/zone/ZoneWizardNetworkSetupStep'
@@ -93,6 +96,7 @@ export default {
     ZoneWizardAddResources,
     ZoneWizardLaunchZone
   },
+  mixins: [mixinDevice],
   data () {
     return {
       currentStep: 0,
@@ -138,9 +142,26 @@ export default {
   methods: {
     nextPressed () {
       this.currentStep++
+      this.scrollToStepActive()
     },
     backPressed (data) {
       this.currentStep--
+      this.scrollToStepActive()
+    },
+    scrollToStepActive () {
+      if (!this.isMobile()) {
+        return
+      }
+      this.$nextTick(() => {
+        if (!this.$refs.zoneStep) {
+          return
+        }
+        if (this.currentStep === 0) {
+          this.$refs.zoneStep.$el.scrollLeft = 0
+          return
+        }
+        this.$refs.zoneStep.$el.scrollLeft = this.$refs['step' + (this.currentStep - 1)][0].$el.offsetLeft
+      })
     },
     onFieldsChanged (data) {
       if (data.zoneType &&
@@ -177,7 +198,8 @@ export default {
 
 <style scoped lang="scss">
   .form {
-    width: 95vw;
+    width: 100%;
+
     @media (min-width: 1000px) {
       width: 800px;
     }
@@ -197,6 +219,15 @@ export default {
       position: absolute;
       right: 0;
     }
+
+    /deep/.ant-steps {
+      overflow-x: auto;
+      padding: 10px 0;
+    }
+
+    /deep/.submit-btn {
+      display: none;
+    }
   }
 
   /deep/.ant-form-text {
diff --git a/ui/src/views/infra/zone/ZoneWizardAddResources.vue b/ui/src/views/infra/zone/ZoneWizardAddResources.vue
index 4ba878ef7d55..e2b566646e12 100644
--- a/ui/src/views/infra/zone/ZoneWizardAddResources.vue
+++ b/ui/src/views/infra/zone/ZoneWizardAddResources.vue
@@ -17,9 +17,15 @@
 
 <template>
   <div style="width: auto;">
-    <a-steps progressDot :current="currentStep" size="small" style="margin-left: 0; margin-top: 16px;">
+    <a-steps
+      ref="resourceStep"
+      progressDot
+      :current="currentStep"
+      size="small"
+      style="margin-left: 0; margin-top: 16px;">
       <a-step
-        v-for="step in steps"
+        v-for="(step, index) in steps"
+        :ref="`resourceStep${index}`"
         :key="step.title"
         :title="$t(step.title)"></a-step>
     </a-steps>
@@ -97,13 +103,15 @@
   </div>
 </template>
 <script>
-import StaticInputsForm from '@views/infra/zone/StaticInputsForm'
 import { api } from '@/api'
+import { mixinDevice } from '@/utils/mixin.js'
+import StaticInputsForm from '@views/infra/zone/StaticInputsForm'
 
 export default {
   components: {
     StaticInputsForm
   },
+  mixins: [mixinDevice],
   props: {
     prefillContent: {
       type: Object,
@@ -687,14 +695,16 @@ export default {
       primaryStorageScopes: [],
       primaryStorageProtocols: [],
       storageProviders: [],
-      currentStep: 0,
+      currentStep: null,
       options: ['primaryStorageScope', 'primaryStorageProtocol', 'provider']
     }
   },
   mounted () {
+    this.currentStep = this.prefillContent.resourceStep ? this.prefillContent.resourceStep : 0
     if (this.stepChild && this.stepChild !== '') {
       this.currentStep = this.steps.findIndex(item => item.fromKey === this.stepChild)
     }
+    this.scrollToStepActive()
     if (this.prefillContent.hypervisor.value === 'BareMetal') {
       this.$emit('nextPressed')
     } else {
@@ -719,14 +729,35 @@ export default {
         this.$emit('nextPressed')
       } else {
         this.currentStep++
+        this.$emit('fieldsChanged', { resourceStep: this.currentStep })
       }
+
+      this.scrollToStepActive()
     },
     handleBack (e) {
       if (this.currentStep === 0) {
         this.$emit('backPressed')
       } else {
         this.currentStep--
+        this.$emit('fieldsChanged', { resourceStep: this.currentStep })
       }
+
+      this.scrollToStepActive()
+    },
+    scrollToStepActive () {
+      if (!this.isMobile()) {
+        return
+      }
+      this.$nextTick(() => {
+        if (!this.$refs.resourceStep) {
+          return
+        }
+        if (this.currentStep === 0) {
+          this.$refs.resourceStep.$el.scrollLeft = 0
+          return
+        }
+        this.$refs.resourceStep.$el.scrollLeft = this.$refs['resourceStep' + (this.currentStep - 1)][0].$el.offsetLeft
+      })
     },
     fieldsChanged (changed) {
       this.$emit('fieldsChanged', changed)
diff --git a/ui/src/views/infra/zone/ZoneWizardNetworkSetupStep.vue b/ui/src/views/infra/zone/ZoneWizardNetworkSetupStep.vue
index c7175600df4a..d1c317229e35 100644
--- a/ui/src/views/infra/zone/ZoneWizardNetworkSetupStep.vue
+++ b/ui/src/views/infra/zone/ZoneWizardNetworkSetupStep.vue
@@ -17,12 +17,18 @@
 
 <template>
   <div style="width: auto;">
-    <a-steps progressDot :current="currentStep" size="small" style="margin-left: 0px; margin-top: 16px;">
+    <a-steps
+      ref="zoneNetStep"
+      progressDot
+      :current="currentStep"
+      size="small"
+      style="margin-left: 0px; margin-top: 16px;">
       <a-step
-        v-for="step in steps"
+        v-for="(step, index) in steps"
         :key="step.title"
         :title="$t(step.title)"
-        :style="stepScales"></a-step>
+        :style="stepScales"
+        :ref="`netStep${index}`"></a-step>
     </a-steps>
     <zone-wizard-physical-network-setup-step
       v-if="steps && steps[currentStep].formKey === 'physicalNetwork'"
@@ -110,6 +116,7 @@
 
 <script>
 import { api } from '@/api'
+import { mixinDevice } from '@/utils/mixin.js'
 import ZoneWizardPhysicalNetworkSetupStep from '@views/infra/zone/ZoneWizardPhysicalNetworkSetupStep'
 import IpAddressRangeForm from '@views/infra/zone/IpAddressRangeForm'
 import StaticInputsForm from '@views/infra/zone/StaticInputsForm'
@@ -122,6 +129,7 @@ export default {
     StaticInputsForm,
     AdvancedGuestTrafficForm
   },
+  mixins: [mixinDevice],
   props: {
     prefillContent: {
       type: Object,
@@ -187,8 +195,8 @@ export default {
       return steps
     },
     stepScales () {
-      if (this.allSteps.length > 4) {
-        return { width: 'calc(100% / ' + this.allSteps.length + ')' }
+      if (!this.isMobile() && this.steps.length > 4) {
+        return { width: 'calc(100% / ' + this.steps.length + ')' }
       }
       return {}
     },
@@ -368,6 +376,7 @@ export default {
     if (this.stepChild && this.stepChild !== '') {
       this.currentStep = this.steps.findIndex(item => item.formKey === this.stepChild)
     }
+    this.scrollToStepActive()
     if (this.zoneType === 'Basic' ||
       (this.zoneType === 'Advanced' && this.sgEnabled)) {
       this.skipGuestTrafficStep = false
@@ -401,6 +410,7 @@ export default {
       } else {
         this.currentStep++
         this.$emit('fieldsChanged', { networkStep: this.currentStep })
+        this.scrollToStepActive()
       }
     },
     handleBack (e) {
@@ -409,8 +419,24 @@ export default {
       } else {
         this.currentStep--
         this.$emit('fieldsChanged', { networkStep: this.currentStep })
+        this.scrollToStepActive()
       }
     },
+    scrollToStepActive () {
+      if (!this.isMobile()) {
+        return
+      }
+      this.$nextTick(() => {
+        if (!this.$refs.zoneNetStep) {
+          return
+        }
+        if (this.currentStep === 0) {
+          this.$refs.zoneNetStep.$el.scrollLeft = 0
+          return
+        }
+        this.$refs.zoneNetStep.$el.scrollLeft = this.$refs['netStep' + (this.currentStep - 1)][0].$el.offsetLeft
+      })
+    },
     submitLaunchZone () {
       this.$emit('submitLaunchZone')
     },
diff --git a/ui/src/views/infra/zone/ZoneWizardPhysicalNetworkSetupStep.vue b/ui/src/views/infra/zone/ZoneWizardPhysicalNetworkSetupStep.vue
index 19b580ff502a..334caec1aa4c 100644
--- a/ui/src/views/infra/zone/ZoneWizardPhysicalNetworkSetupStep.vue
+++ b/ui/src/views/infra/zone/ZoneWizardPhysicalNetworkSetupStep.vue
@@ -24,10 +24,11 @@
     </a-card>
     <a-table
       bordered
+      :scroll="{ x: 500 }"
       :dataSource="physicalNetworks"
       :columns="columns"
       :pagination="false"
-      style="margin-bottom: 24px;">
+      style="margin-bottom: 24px; width: 100%">
       <template slot="name" slot-scope="text, record">
         <a-input :value="text" @change="e => onCellChange(record.key, 'name', e.target.value)" />
       </template>
@@ -212,19 +213,20 @@ export default {
       columns.push({
         title: this.$t('label.network.name'),
         dataIndex: 'name',
-        width: '30%',
+        width: 175,
         scopedSlots: { customRender: 'name' }
       })
       columns.push({
         title: this.$t('label.isolation.method'),
         dataIndex: 'isolationMethod',
-        width: '20%',
+        width: 150,
         scopedSlots: { customRender: 'isolationMethod' }
       })
       columns.push({
         title: this.$t('label.traffic.types'),
         key: 'traffics',
         dataIndex: 'traffics',
+        width: 250,
         scopedSlots: { customRender: 'traffics' }
       })
       if (this.isAdvancedZone) {
@@ -232,7 +234,7 @@ export default {
           title: '',
           dataIndex: 'actions',
           scopedSlots: { customRender: 'actions' },
-          width: 50
+          width: 70
         })
       }