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 <rfcvinc...@gmail.com> 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 <rohit.ya...@shapeblue.com> Co-authored-by: Rohit Yadav <ro...@apache.org> --- 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",