component: sort order in list view (apache#104)

RitchieVincent · yadvr · yadvr · commit b0a61faba3e5 · 2021-01-20T07:06:15.000+05:30
Adds order column in zone/template/offerings list view tables.

Signed-off-by: Rohit Yadav &lt;rohit.yadav@shapeblue.com&gt;
Co-authored-by: Rohit Yadav &lt;rohit@apache.org&gt;
diff --git a/ui/src/components/view/ListView.vue b/ui/src/components/view/ListView.vue
@@ -117,6 +117,33 @@
       <router-link :to="{ path: '/zone/' + record.zoneid }">{{ text }}</router-link>
     </a>
 
+    <div slot="order" slot-scope="text, record" class="shift-btns">
+      <a-tooltip placement="top">
+        <template slot="title">Move to top</template>
+        <a-button
+          shape="round"
+          icon="double-left"
+          @click="moveItemTop(record)"
+          class="shift-btn shift-btn--rotated"></a-button>
+      </a-tooltip>
+      <a-tooltip placement="top">
+        <template slot="title">Move to bottom</template>
+        <a-button
+          shape="round"
+          icon="double-right"
+          @click="moveItemBottom(record)"
+          class="shift-btn shift-btn--rotated"></a-button>
+      </a-tooltip>
+      <a-tooltip placement="top">
+        <template slot="title">Move up one row</template>
+        <a-button shape="round" icon="caret-up" @click="moveItemUp(record)" class="shift-btn"></a-button>
+      </a-tooltip>
+      <a-tooltip placement="top">
+        <template slot="title">Move down one row</template>
+        <a-button shape="round" icon="caret-down" @click="moveItemDown(record)" class="shift-btn"></a-button>
+      </a-tooltip>
+    </div>
+
     <template slot="value" slot-scope="text, record">
       <a-input
         v-if="editableValueKey === record.key"
@@ -181,6 +208,7 @@ export default {
       default: false
     }
   },
+  inject: ['parentFetchData', 'parentToggleLoading'],
   data () {
     return {
       selectedRowKeys: [],
@@ -233,6 +261,90 @@ export default {
     editValue (record) {
       this.editableValueKey = record.key
       this.editableValue = record.value
+    },
+    handleUpdateOrder (id, index) {
+      this.parentToggleLoading()
+      let apiString = ''
+      switch (this.$route.name) {
+        case 'template':
+          apiString = 'updateTemplate'
+          break
+        case 'iso':
+          apiString = 'updateIso'
+          break
+        case 'zone':
+          apiString = 'updateZone'
+          break
+        case 'computeoffering':
+        case 'systemoffering':
+          apiString = 'updateServiceOffering'
+          break
+        case 'diskoffering':
+          apiString = 'updateDiskOffering'
+          break
+        case 'networkoffering':
+          apiString = 'updateNetworkOffering'
+          break
+        case 'vpcoffering':
+          apiString = 'updateVPCOffering'
+          break
+        default:
+          apiString = 'updateTemplate'
+      }
+
+      api(apiString, {
+        id,
+        sortKey: index
+      }).catch(error => {
+        console.error(error)
+      }).finally(() => {
+        this.parentFetchData()
+        this.parentToggleLoading()
+      })
+    },
+    moveItemUp (record) {
+      const data = this.items
+      const index = data.findIndex(item => item.id === record.id)
+      if (index === 0) return
+
+      data.splice(index - 1, 0, data.splice(index, 1)[0])
+
+      data.forEach((item, index) => {
+        this.handleUpdateOrder(item.id, index + 1)
+      })
+    },
+    moveItemDown (record) {
+      const data = this.items
+      const index = data.findIndex(item => item.id === record.id)
+      if (index === data.length - 1) return
+
+      data.splice(index + 1, 0, data.splice(index, 1)[0])
+
+      data.forEach((item, index) => {
+        this.handleUpdateOrder(item.id, index + 1)
+      })
+    },
+    moveItemTop (record) {
+      const data = this.items
+      const index = data.findIndex(item => item.id === record.id)
+      if (index === 0) return
+
+      data.unshift(data.splice(index, 1)[0])
+
+      data.forEach((item, index) => {
+        this.handleUpdateOrder(item.id, index + 1)
+      })
+    },
+    moveItemBottom (record) {
+      const data = this.items
+      const index = data.findIndex(item => item.id === record.id)
+      if (index === data.length - 1) return
+
+      data.push(data.splice(index, 1)[0])
+
+      data.forEach((item, index) => {
+        this.handleUpdateOrder(item.id, index + 1)
+      })
     }
   }
 }
@@ -255,3 +367,27 @@ export default {
   background-color: #f9f9f9;
 }
 </style>
+
+<style scoped lang="scss">
+  .shift-btns {
+    display: flex;
+  }
+  .shift-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    font-size: 12px;
+
+    &:not(:last-child) {
+      margin-right: 5px;
+    }
+
+    &--rotated {
+      font-size: 10px;
+      transform: rotate(90deg);
+    }
+
+  }
+</style>
diff --git a/ui/src/config/section/image.js b/ui/src/config/section/image.js
@@ -27,7 +27,7 @@ export default {
       permission: ['listTemplates'],
       params: { templatefilter: 'executable' },
       resourceType: 'Template',
-      columns: ['name', 'ostypename', 'status', 'hypervisor', 'account', 'domain'],
+      columns: ['name', 'ostypename', 'status', 'hypervisor', 'account', 'domain', 'order'],
       details: ['name', 'id', 'displaytext', 'checksum', 'hypervisor', 'format', 'ostypename', 'size', 'isready', 'passwordenabled', 'directdownload', 'isextractable', 'isdynamicallyscalable', 'ispublic', 'isfeatured', 'crosszones', 'type', 'account', 'domain', 'created'],
       related: [{
         name: 'vm',
diff --git a/ui/src/config/section/infra/zones.js b/ui/src/config/section/infra/zones.js
@@ -20,7 +20,7 @@ export default {
   title: 'Zones',
   icon: 'global',
   permission: ['listZonesMetrics', 'listZones'],
-  columns: ['name', 'state', 'networktype', 'clusters', 'cpuused', 'cpumaxdeviation', 'cpuallocated', 'cputotal', 'memoryused', 'memorymaxdeviation', 'memoryallocated', 'memorytotal'],
+  columns: ['name', 'state', 'networktype', 'clusters', 'cpuused', 'cpumaxdeviation', 'cpuallocated', 'cputotal', 'memoryused', 'memorymaxdeviation', 'memoryallocated', 'memorytotal', 'order'],
   details: ['name', 'id', 'allocationstate', 'networktype', 'guestcidraddress', 'localstorageenabled', 'securitygroupsenabled', 'dns1', 'dns2', 'internaldns1', 'internaldns2'],
   related: [{
     name: 'physicalnetwork',
diff --git a/ui/src/config/section/offering.js b/ui/src/config/section/offering.js
@@ -27,7 +27,7 @@ export default {
       icon: 'cloud',
       permission: ['listServiceOfferings'],
       params: { isrecursive: 'true' },
-      columns: ['name', 'displaytext', 'cpunumber', 'cpuspeed', 'memory', 'tags', 'domain', 'zone'],
+      columns: ['name', 'displaytext', 'cpunumber', 'cpuspeed', 'memory', 'tags', 'domain', 'zone', 'order'],
       details: ['name', 'id', 'displaytext', 'offerha', 'provisioningtype', 'storagetype', 'iscustomized', 'limitcpuuse', 'cpunumber', 'cpuspeed', 'memory', 'tags', 'domain', 'zone', 'created'],
       related: [{
         name: 'vm',
@@ -67,7 +67,7 @@ export default {
       icon: 'setting',
       permission: ['listServiceOfferings', 'listInfrastructure'],
       params: { issystem: 'true', isrecursive: 'true' },
-      columns: ['name', 'systemvmtype', 'cpunumber', 'cpuspeed', 'memory', 'storagetype', 'tags'],
+      columns: ['name', 'systemvmtype', 'cpunumber', 'cpuspeed', 'memory', 'storagetype', 'tags', 'order'],
       details: ['name', 'id', 'displaytext', 'systemvmtype', 'provisioningtype', 'storagetype', 'iscustomized', 'limitcpuuse', 'cpunumber', 'cpuspeed', 'memory', 'tags', 'domain', 'zone', 'created'],
       actions: [{
         api: 'createServiceOffering',
@@ -98,7 +98,7 @@ export default {
       icon: 'hdd',
       permission: ['listDiskOfferings'],
       params: { isrecursive: 'true' },
-      columns: ['name', 'displaytext', 'disksize', 'tags', 'domain', 'zone'],
+      columns: ['name', 'displaytext', 'disksize', 'tags', 'domain', 'zone', 'order'],
       details: ['name', 'id', 'displaytext', 'disksize', 'provisioningtype', 'storagetype', 'iscustomized', 'tags', 'domain', 'zone', 'created'],
       related: [{
         name: 'volume',
diff --git a/ui/src/locales/en.json b/ui/src/locales/en.json
@@ -710,6 +710,7 @@
 "offerha": "Offer HA",
 "offeringType": "Compute offering type",
 "operation": "Operation",
+"order": "Order",
 "osTypeId": "OS Type",
 "oscategoryid": "OS Preference",
 "ostypeid": "OS Type",
