You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cloudstack.apache.org by ro...@apache.org on 2020/07/10 07:49:26 UTC
[cloudstack-primate] branch master updated: component: Adding
search option to SettingsTab (#521)
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 56e62e1 component: Adding search option to SettingsTab (#521)
56e62e1 is described below
commit 56e62e19b6856fef594731b2b457d046b4962fda
Author: davidjumani <dj...@gmail.com>
AuthorDate: Fri Jul 10 13:19:18 2020 +0530
component: Adding search option to SettingsTab (#521)
Adds the option to search settings
---
src/components/view/SettingsTab.vue | 112 +++++++++++++++++++++---------------
1 file changed, 65 insertions(+), 47 deletions(-)
diff --git a/src/components/view/SettingsTab.vue b/src/components/view/SettingsTab.vue
index 4c9f262..9f33196 100644
--- a/src/components/view/SettingsTab.vue
+++ b/src/components/view/SettingsTab.vue
@@ -1,48 +1,56 @@
<template>
- <a-list size="large" class="list" :loading="loading || tabLoading">
- <a-list-item :key="index" v-for="(item, index) in items" class="item">
- <a-list-item-meta>
- <span slot="title" style="word-break: break-all">{{ item.name }}</span>
- <span slot="description" style="word-break: break-all">{{ item.description }}</span>
- </a-list-item-meta>
-
- <div class="item__content">
- <a-input
- v-if="editableValueKey === index"
- class="editable-value value"
- :defaultValue="item.value"
- v-model="editableValue"
- @keydown.esc="editableValueKey = null"
- @pressEnter="updateData(item)">
- </a-input>
- <span v-else class="value">
- {{ item.value }}
- </span>
- </div>
-
- <div slot="actions" class="action">
- <a-button
- shape="circle"
- :disabled="!('updateConfiguration' in $store.getters.apis)"
- v-if="editableValueKey !== index"
- icon="edit"
- @click="setEditableSetting(item, index)" />
- <a-button
- shape="circle"
- size="default"
- @click="editableValueKey = null"
- v-if="editableValueKey === index" >
- <a-icon type="close-circle" theme="twoTone" twoToneColor="#f5222d" />
- </a-button>
- <a-button
- shape="circle"
- @click="updateData(item)"
- v-if="editableValueKey === index" >
- <a-icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
- </a-button>
- </div>
- </a-list-item>
- </a-list>
+ <div>
+ <a-input-search
+ style="width: 25vw;float: right;margin-bottom: 10px; z-index: 8;"
+ :placeholder="$t('label.search')"
+ v-model="filter"
+ @search="handleSearch" />
+
+ <a-list size="large" class="list" :loading="loading || tabLoading">
+ <a-list-item :key="index" v-for="(item, index) in items" class="item">
+ <a-list-item-meta>
+ <span slot="title" style="word-break: break-all">{{ item.name }}</span>
+ <span slot="description" style="word-break: break-all">{{ item.description }}</span>
+ </a-list-item-meta>
+
+ <div class="item__content">
+ <a-input
+ v-if="editableValueKey === index"
+ class="editable-value value"
+ :defaultValue="item.value"
+ v-model="editableValue"
+ @keydown.esc="editableValueKey = null"
+ @pressEnter="updateData(item)">
+ </a-input>
+ <span v-else class="value">
+ {{ item.value }}
+ </span>
+ </div>
+
+ <div slot="actions" class="action">
+ <a-button
+ shape="circle"
+ :disabled="!('updateConfiguration' in $store.getters.apis)"
+ v-if="editableValueKey !== index"
+ icon="edit"
+ @click="setEditableSetting(item, index)" />
+ <a-button
+ shape="circle"
+ size="default"
+ @click="editableValueKey = null"
+ v-if="editableValueKey === index" >
+ <a-icon type="close-circle" theme="twoTone" twoToneColor="#f5222d" />
+ </a-button>
+ <a-button
+ shape="circle"
+ @click="updateData(item)"
+ v-if="editableValueKey === index" >
+ <a-icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
+ </a-button>
+ </div>
+ </a-list-item>
+ </a-list>
+ </div>
</template>
<script>
@@ -66,7 +74,8 @@ export default {
scopeKey: '',
editableValueKey: null,
editableValue: '',
- tabLoading: false
+ tabLoading: false,
+ filter: ''
}
},
beforeMount () {
@@ -106,10 +115,14 @@ export default {
methods: {
fetchData (callback) {
this.tabLoading = true
- api('listConfigurations', {
+ const params = {
[this.scopeKey]: this.resource.id,
listAll: true
- }).then(response => {
+ }
+ if (this.filter) {
+ params.keyword = this.filter
+ }
+ api('listConfigurations', params).then(response => {
this.items = response.listconfigurationsresponse.configuration
}).catch(error => {
console.error(error)
@@ -145,6 +158,10 @@ export default {
setEditableSetting (item, index) {
this.editableValueKey = index
this.editableValue = item.value
+ },
+ handleSearch (value) {
+ this.filter = value
+ this.fetchData()
}
}
}
@@ -152,6 +169,7 @@ export default {
<style scoped lang="scss">
.list {
+ clear:both;
}
.editable-value {