apache/cloudstack
1
0
Fork 0
mirror of https://github.com/apache/cloudstack.git synced 2025-12-16 18:43:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

show card/table view on listing of resources

Browse Source 
Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
This commit is contained in:
Rohit Yadav 2019-09-07 03:48:31 +05:30
parent 720c366320
commit 3dbd2af9b6
1 changed files with 52 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
ui/src/components/CloudMonkey/Resource.vue
View File

@ -1,6 +1,7 @@
<template>
<div>
<a-breadcrumb class="breadcrumb" v-if="device !== 'desktop'">
<a-breadcrumb class="breadcrumb" v-if="device !== 'desktop'" style="margin-left: -16px; margin-right: -16px; margin-top: -16px">
<a-card :bordered="true">
<a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
<router-link
v-if="item.name"
@ -17,10 +18,11 @@
</span>
<span v-else>{{ $t(tem.meta.title) }}</span>
</a-breadcrumb-item>
</a-card>
</a-breadcrumb>
<a-row>
<a-col :span="16">
<a-col :span="17">
<a-tooltip placement="bottom" v-for="(action, actionIndex) in actions" :key="actionIndex" v-if="(!dataView && (action.listView || action.groupAction && selectedRowKeys.length > 0)) || (dataView && action.dataView)">
<template slot="title">
{{ action.label }}
@ -35,7 +37,7 @@
>
</a-button>
</a-tooltip>
<span v-if="!dataView" style="float: right; padding-right: 8px">
<span v-if="!dataView" style="float: right; padding-right: 8px; margin-top: -2px">
<a-tooltip placement="bottom">
<template slot="title">
{{ "Auto-Refresh" }}
@ -58,9 +60,13 @@
icon="reload"
/>
</a-tooltip>
<a-button-group style="margin-left: 10px" v-if="!dataView">
<a-button icon="bars" @click="tableView=true" />
<a-button icon="appstore" @click="tableView=false" />
</a-button-group>
</span>
</a-col>
<a-col :span="8">
<a-col :span="7">
<a-tooltip placement="bottom" v-if="dataView">
<template slot="title">
{{ "Refresh" }}
@ -85,6 +91,7 @@
@change="toggleAutoRefresh"
/>
</a-tooltip>
<a-input-search
size="default"
placeholder="Search"
@ -168,6 +175,44 @@
<data-view :resource="resource" v-else />
</div>
<div style="margin-top: 12px" v-else>
<a-row :gutter="12" v-show="!tableView">
<a-col v-for="item in items" :md="24" :lg="4">
<a-card
hoverable
style="width: 250px; margin-bottom: 12px">
<template class="ant-card-actions" slot="actions">
<a-icon type="edit" />
<a-icon type="setting" />
<a-icon type="ellipsis" />
</template>
<a-card-meta>
<div slot="avatar">
<a-icon :type="$route.meta.icon" style="padding-right: 5px" />
</div>
<div slot="title">
<router-link :to="{ path: $route.path + '/' + item.id }" v-if="item.id">{{ item.name || item.displayname }}</router-link>
<span v-else>{{ item.name }}</span>
</div>
<div slot="description" style="height: 80px">
<status :text="item.state" displayText />
<div v-if="item.ipaddress">
<a-icon type="wifi" style="padding-right: 5px" />
<router-link :to="{ path: $route.path + '/' + item.id }">{{ item.ipaddress }}</router-link>
</div>
<div v-if="item.vmname">
<a-icon type="desktop" style="padding-right: 5px" />
<router-link :to="{ path: '/vm/' + item.virtualmachineid }">{{ item.vmname }}</router-link>
</div>
<div v-if="item.zonename">
<a-icon type="table" style="padding-right: 5px" />
<router-link :to="{ path: '/zone/' + item.zoneid }">{{ item.zonename }}</router-link>
</div>
</div>
</a-card-meta>
</a-card>
</a-col>
</a-row>
<a-table
:rowKey="record => record.id"
:loading="loading"
@ -177,6 +222,7 @@
:pagination="{ position: 'bottom', size: 'small', showSizeChanger: true }"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
:rowClassName="getRowClassName"
v-show="tableView"
>
<template slot="footer">
<span v-if="hasSelected">
@ -258,7 +304,8 @@ export default {
showAction: false,
dataView: false,
actions: [],
breadList: []
breadList: [],
tableView: true
}
},
computed: {