From 7e7dbaf65c42fb46cb0b000501f227136b60258c Mon Sep 17 00:00:00 2001
From: Hoang Nguyen <hoangnm@unitech.vn>
Date: Wed, 1 Jul 2020 15:43:20 +0700
Subject: [PATCH] compute: VM deployment form group template/iso (#470)

Fixes #468

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 .../compute/wizard/TemplateIsoRadioGroup.vue  |  79 ++++----
 .../compute/wizard/TemplateIsoSelection.vue   | 187 +++++-------------
 2 files changed, 90 insertions(+), 176 deletions(-)

diff --git a/ui/src/views/compute/wizard/TemplateIsoRadioGroup.vue b/ui/src/views/compute/wizard/TemplateIsoRadioGroup.vue
index f351aa77e9f..fd76a9a98ca 100644
--- a/ui/src/views/compute/wizard/TemplateIsoRadioGroup.vue
+++ b/ui/src/views/compute/wizard/TemplateIsoRadioGroup.vue
@@ -33,26 +33,10 @@
             class="radio-group__radio"
             :value="os.id">
             {{ os.displaytext }}&nbsp;
-            <a-tag
-              :visible="os.ispublic && !os.isfeatured"
-              color="blue"
-              @click="onFilterTag('is: public')"
-            >{{ $t('label.ispublic') }}</a-tag>
-            <a-tag
-              :visible="os.isfeatured"
-              color="green"
-              @click="onFilterTag('is: featured')"
-            >{{ $t('label.isfeatured') }}</a-tag>
-            <a-tag
-              :visible="isSelf(os)"
-              color="orange"
-              @click="onFilterTag('is: self')"
-            >{{ $t('label.isself') }}</a-tag>
-            <a-tag
-              :visible="isShared(os)"
-              color="cyan"
-              @click="onFilterTag('is: shared')"
-            >{{ $t('label.isshared') }}</a-tag>
+            <os-logo
+              class="radio-group__os-logo"
+              :osId="os.ostypeid"
+              :os-name="os.osName" />
           </a-radio>
         </a-radio-group>
       </a-list-item>
@@ -74,10 +58,11 @@
 </template>
 
 <script>
-import store from '@/store'
+import OsLogo from '@/components/widgets/OsLogo'
 
 export default {
   name: 'TemplateIsoRadioGroup',
+  components: { OsLogo },
   props: {
     osList: {
       type: Array,
@@ -95,10 +80,6 @@ export default {
       type: Number,
       default: 0
     },
-    osType: {
-      type: String,
-      default: ''
-    },
     preFillContent: {
       type: Object,
       default: () => {}
@@ -112,20 +93,23 @@ export default {
     }
   },
   mounted () {
-    if (this.inputDecorator === 'templateid') {
-      this.value = !this.preFillContent.templateid ? this.selected : this.preFillContent.templateid
-    } else {
-      this.value = !this.preFillContent.isoid ? this.selected : this.preFillContent.isoid
+    this.onSelectTemplateIso()
+  },
+  watch: {
+    selected (newVal, oldVal) {
+      if (newVal === oldVal) return
+      this.onSelectTemplateIso()
     }
-
-    this.$emit('emit-update-template-iso', this.inputDecorator, this.value)
   },
   methods: {
-    isShared (item) {
-      return !item.ispublic && (item.account !== store.getters.userInfo.account)
-    },
-    isSelf (item) {
-      return !item.ispublic && (item.account === store.getters.userInfo.account)
+    onSelectTemplateIso () {
+      if (this.inputDecorator === 'templateid') {
+        this.value = !this.preFillContent.templateid ? this.selected : this.preFillContent.templateid
+      } else {
+        this.value = !this.preFillContent.isoid ? this.selected : this.preFillContent.isoid
+      }
+
+      this.$emit('emit-update-template-iso', this.inputDecorator, this.value)
     },
     updateSelectionTemplateIso (id) {
       this.$emit('emit-update-template-iso', this.inputDecorator, id)
@@ -139,9 +123,6 @@ export default {
       this.page = page
       this.pageSize = pageSize
       this.$forceUpdate()
-    },
-    onFilterTag (tag) {
-      this.$emit('handle-filter-tag', tag)
     }
   }
 }
@@ -151,13 +132,25 @@ export default {
   .radio-group {
     display: block;
 
+    /deep/.ant-radio {
+      width: 35px;
+    }
+
     &__radio {
       margin: 0.5rem 0;
-    }
-  }
 
-  .ant-tag {
-    margin-left: 0.4rem;
+      /deep/span:last-child {
+        display: inline-block;
+      }
+    }
+
+    &__os-logo {
+      position: absolute;
+      top: 0;
+      left: 0;
+      margin-top: 2px;
+      margin-left: 23px;
+    }
   }
 
   /deep/.ant-spin-container {
diff --git a/ui/src/views/compute/wizard/TemplateIsoSelection.vue b/ui/src/views/compute/wizard/TemplateIsoSelection.vue
index ae1725e8207..53aab47756f 100644
--- a/ui/src/views/compute/wizard/TemplateIsoSelection.vue
+++ b/ui/src/views/compute/wizard/TemplateIsoSelection.vue
@@ -17,74 +17,29 @@
 
 <template>
   <div>
-    <span class="filter-group">
-      <a-input-search
-        class="search-input"
-        :placeholder="$t('label.search')"
-        v-model="filter"
-        @search="filterDataSource">
-        <a-popover
-          placement="bottomRight"
-          slot="addonAfter"
-          trigger="click"
-          v-model="visibleFilter">
-          <template slot="content">
-            <a-form
-              style="width: 170px"
-              :form="form"
-              layout="vertical"
-              @submit="handleSubmit">
-              <a-form-item :label="$t('label.filter')">
-                <a-select
-                  allowClear
-                  mode="multiple"
-                  v-decorator="['filter']">
-                  <a-select-option
-                    v-for="(opt) in filterOpts"
-                    :key="opt.id">{{ $t('label.' + opt.name) }}</a-select-option>
-                </a-select>
-              </a-form-item>
-              <div class="filter-group-button">
-                <a-button
-                  class="filter-group-button-clear"
-                  type="default"
-                  size="small"
-                  icon="stop"
-                  @click="onClear">Clear</a-button>
-                <a-button
-                  class="filter-group-button-search"
-                  type="primary"
-                  size="small"
-                  icon="search"
-                  @click="handleSubmit">Search</a-button>
-              </div>
-            </a-form>
-          </template>
-          <a-button
-            class="filter-group-button"
-            icon="filter"
-            size="small"/>
-        </a-popover>
-      </a-input-search>
-    </span>
+    <a-input-search
+      class="search-input"
+      :placeholder="$t('label.search')"
+      v-model="filter"
+      @search="filterDataSource">
+    </a-input-search>
     <a-spin :spinning="loading">
       <a-tabs
         :animated="false"
         :defaultActiveKey="Object.keys(dataSource)[0]"
+        v-model="filterType"
         tabPosition="top"
-        v-model="osType"
-        @change="changeOsName">
-        <a-tab-pane v-for="(osList, osName) in dataSource" :key="osName">
-          <span slot="tab">
-            <os-logo :os-name="osName"></os-logo>
-          </span>
+        @change="changeFilterType">
+        <a-tab-pane
+          v-for="filterItem in filterOpts"
+          :key="filterItem.id"
+          :tab="$t(filterItem.name)">
           <TemplateIsoRadioGroup
-            v-if="osType===osName"
-            :osType="osType"
-            :osList="dataSource[osName]"
+            v-if="filterType===filterItem.id"
+            :osList="dataSource[filterItem.id]"
+            :itemCount="itemCount[filterItem.id]"
             :input-decorator="inputDecorator"
             :selected="checkedValue"
-            :itemCount="itemCount[osName]"
             :preFillContent="preFillContent"
             @handle-filter-tag="filterDataSource"
             @emit-update-template-iso="updateTemplateIso"
@@ -96,15 +51,13 @@
 </template>
 
 <script>
-import OsLogo from '@/components/widgets/OsLogo'
 import { getNormalizedOsName } from '@/utils/icons'
-import _ from 'lodash'
 import TemplateIsoRadioGroup from '@views/compute/wizard/TemplateIsoRadioGroup'
 import store from '@/store'
 
 export default {
   name: 'TemplateIsoSelection',
-  components: { TemplateIsoRadioGroup, OsLogo },
+  components: { TemplateIsoRadioGroup },
   props: {
     items: {
       type: Array,
@@ -137,18 +90,20 @@ export default {
       visibleFilter: false,
       filterOpts: [{
         id: 'featured',
-        name: 'featured'
+        name: 'label.featured'
       }, {
         id: 'community',
-        name: 'community'
+        name: 'label.community'
       }, {
         id: 'selfexecutable',
-        name: 'selfexecutable'
+        name: 'label.my.templates'
       }, {
         id: 'sharedexecutable',
-        name: 'sharedexecutable'
+        name: 'label.sharedexecutable'
       }],
-      osType: ''
+      osType: '',
+      filterType: '',
+      oldInputDecorator: ''
     }
   },
   watch: {
@@ -160,10 +115,11 @@ export default {
         this.checkedValue = items[0].id
       }
       this.dataSource = this.mappingDataSource()
-      this.osType = Object.keys(this.dataSource)[0]
+      this.filterType = Object.keys(this.dataSource)[0]
     },
     inputDecorator (newValue, oldValue) {
       if (newValue !== oldValue) {
+        this.oldInputDecorator = this.inputDecorator
         this.filter = ''
       }
     }
@@ -173,25 +129,37 @@ export default {
   },
   methods: {
     mappingDataSource () {
-      let mappedItems = {}
-      const itemCount = {}
+      const mappedItems = {
+        featured: [],
+        community: [],
+        selfexecutable: [],
+        sharedexecutable: []
+      }
+      const itemCount = {
+        featured: 0,
+        community: 0,
+        selfexecutable: 0,
+        sharedexecutable: 0
+      }
       this.filteredItems.forEach((os) => {
-        const osName = getNormalizedOsName(os.ostypename)
-        if (Array.isArray(mappedItems[osName])) {
-          mappedItems[osName].push(os)
-          itemCount[osName] = itemCount[osName] + 1
+        os.osName = getNormalizedOsName(os.ostypename)
+        if (os.isPublic && os.isfeatured) {
+          mappedItems.community.push(os)
+          itemCount.community = itemCount.community + 1
+        } else if (os.isfeatured) {
+          mappedItems.featured.push(os)
+          itemCount.featured = itemCount.featured + 1
         } else {
-          mappedItems[osName] = [os]
-          itemCount[osName] = 1
+          const isSelf = !os.ispublic && (os.account === store.getters.userInfo.account)
+          if (isSelf) {
+            mappedItems.selfexecutable.push(os)
+            itemCount.selfexecutable = itemCount.selfexecutable + 1
+          } else {
+            mappedItems.sharedexecutable.push(os)
+            itemCount.sharedexecutable = itemCount.sharedexecutable + 1
+          }
         }
       })
-      mappedItems = _.mapValues(mappedItems, (list) => {
-        let featuredItems = list.filter((item) => item.isfeatured)
-        let nonFeaturedItems = list.filter((item) => !item.isfeatured)
-        featuredItems = _.sortBy(featuredItems, (item) => item.displaytext.toLowerCase())
-        nonFeaturedItems = _.sortBy(nonFeaturedItems, (item) => item.displaytext.toLowerCase())
-        return featuredItems.concat(nonFeaturedItems) // pin featured isos/templates at the top
-      })
       this.itemCount = itemCount
       return mappedItems
     },
@@ -262,8 +230,8 @@ export default {
       this.filter = ''
       this.filterDataSource('')
     },
-    changeOsName (value) {
-      this.osType = value
+    changeFilterType (value) {
+      this.filterType = value
     }
   }
 }
@@ -288,51 +256,4 @@ export default {
   /deep/.ant-tabs-nav-scroll {
     min-height: 45px;
   }
-
-  .filter-group {
-    /deep/.ant-input-affix-wrapper {
-      float: right;
-      width: calc(100% - 32px);
-
-      .ant-input {
-        border-radius: 4px;
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-    }
-
-    /deep/.ant-input-group-addon {
-      float: left;
-      width: 32px;
-      height: 32px;
-      border-radius: 4px;
-      border-right: 0;
-      border-left: 1px solid #d9d9d9;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-      padding: 0 0 0 1px;
-    }
-
-    &-button {
-      background: inherit;
-      border: 0;
-      padding: 0;
-    }
-
-    &-button {
-      position: relative;
-      display: block;
-      min-height: 30px;
-
-      &-clear {
-        position: absolute;
-        left: 0;
-      }
-
-      &-search {
-        position: absolute;
-        right: 0;
-      }
-    }
-  }
 </style>