This is an automated email from the ASF dual-hosted git repository.
rohit pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/cloudstack-primate.git
The following commit(s) were added to refs/heads/master by this push:
new db080cc component: sort order in list view (#104)
db080cc is described below
commit db080cc0c3749b38bc339aa510cf399cc1f5bcc0
Author: Ritchie Vincent <[email protected]>
AuthorDate: Wed Jan 15 07:24:19 2020 +0000
component: sort order in list view (#104)
Adds order column in zone/template/offerings list view tables.
Signed-off-by: Rohit Yadav <[email protected]>
Co-authored-by: Rohit Yadav <[email protected]>
---
src/components/view/ListView.vue | 136 ++++++++++++++++++++++++++++++++++++++
src/config/section/image.js | 2 +-
src/config/section/infra/zones.js | 2 +-
src/config/section/offering.js | 6 +-
src/locales/en.json | 1 +
5 files changed, 142 insertions(+), 5 deletions(-)
diff --git a/src/components/view/ListView.vue b/src/components/view/ListView.vue
index 0d594fc..3c93db5 100644
--- a/src/components/view/ListView.vue
+++ b/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/src/config/section/image.js b/src/config/section/image.js
index ffa7f6b..93e9482 100644
--- a/src/config/section/image.js
+++ b/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/src/config/section/infra/zones.js
b/src/config/section/infra/zones.js
index 7e26bc4..fe1b3d9 100644
--- a/src/config/section/infra/zones.js
+++ b/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/src/config/section/offering.js b/src/config/section/offering.js
index 14d29de..c132e57 100644
--- a/src/config/section/offering.js
+++ b/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/src/locales/en.json b/src/locales/en.json
index 5a25940..a52af5e 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -708,6 +708,7 @@
"offerha": "Offer HA",
"offeringType": "Compute offering type",
"operation": "Operation",
+"order": "Order",
"osTypeId": "OS Type",
"oscategoryid": "OS Preference",
"ostypeid": "OS Type",
