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
commit d76e458983750711c55c7ee676b972bdefb833ee Author: Rohit Yadav <[email protected]> AuthorDate: Mon Nov 4 13:09:52 2019 +0530 settings: simplify instance/template settings tab component Signed-off-by: Rohit Yadav <[email protected]> --- src/components/view/SettingTable.vue | 66 ++++++++++++---------------------- src/views/compute/InstanceSettings.vue | 15 +------- 2 files changed, 24 insertions(+), 57 deletions(-) diff --git a/src/components/view/SettingTable.vue b/src/components/view/SettingTable.vue index f1d48da..315c889 100644 --- a/src/components/view/SettingTable.vue +++ b/src/components/view/SettingTable.vue @@ -16,39 +16,33 @@ // under the License. <template> - <a-table - size="small" - :scroll="{ x: 'true' }" - :loading="loading" - :columns="columns" - :dataSource="items" - :rowKey="record => record.id || record.name || record.key" - :pagination="false" - :rowClassName="getRowClassName" - bordered - > - <template slot="value" slot-scope="text, record"> - <span style="float: left; margin-right: 5px" v-if="record"> - <a-button size="small" shape="circle"> - <a-icon type="close" /> - </a-button> - <a-button size="small" shape="circle"> - <a-icon type="edit" /> - </a-button> - </span> - <span>{{ text }}</span> - </template> - </a-table> + <div> + <a-button type="dashed" style="width: 100%" icon="plus" @click="addSettingForm()">Add Setting</a-button> + <a-list size="large"> + <a-list-item :key="index" v-for="(item, index) in items"> + <a-list-item-meta> + <span slot="title">{{ item.name }}</span> + <span slot="description" style="word-break: break-all">{{ item.value }}</span> + </a-list-item-meta> + <div slot="actions"> + <a-button size="small" shape="circle"> + <a-icon type="edit" /> + </a-button> + </div> + <div slot="actions"> + <a-button size="small" shape="circle"> + <a-icon type="close" /> + </a-button> + </div> + </a-list-item> + </a-list> + </div> </template> <script> export default { name: 'SettingTable', props: { - columns: { - type: Array, - required: true - }, items: { type: Array, required: true @@ -63,26 +57,12 @@ export default { } }, methods: { - getRowClassName (record, index) { - if (index % 2 === 0) { - return 'light-row' - } - return 'dark-row' + addSettingForm () { + console.log('Add setting button clicked') } } } </script> <style scoped> -/deep/ .ant-table-thead { - background-color: #f9f9f9; -} - -/deep/ .light-row { - background-color: #fff; -} - -/deep/ .dark-row { - background-color: #f9f9f9; -} </style> diff --git a/src/views/compute/InstanceSettings.vue b/src/views/compute/InstanceSettings.vue index 1790a84..9587e3a 100644 --- a/src/views/compute/InstanceSettings.vue +++ b/src/views/compute/InstanceSettings.vue @@ -17,22 +17,9 @@ <template> <div> - <a-button style="margin-bottom: 15px; float: right"> - Add Setting - </a-button> <setting-table - :columns="[{ - title: $t('name'), - dataIndex: 'name', - width: '40%' - },{ - title: $t('value'), - dataIndex: 'value', - width: '40%', - scopedSlots: { customRender: 'value' } - }]" - :items="Object.keys(resource.details).map(k => { return { name: k, value: resource.details[k] } })" :loading="loading" + :items="Object.keys(resource.details).map(k => { return { name: k, value: resource.details[k] } })" > </setting-table> </div>
