多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

404 lines
13 KiB

<template>
<div class="d-flex h-100">
<v-navigation-drawer width="300" class="pa-1">
<v-text-field
v-model="query"
outlined
dense
hide-details
placeholder="Search apps"
append-icon="mdi-magnify"
/>
<v-list dense>
<v-list-item v-for="filter of filters" :key="filter">
<v-checkbox
v-model="selectedTags"
class="pt-0 mt-0"
:value="filter"
hide-details
dense
:label="filter"
/>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-container class="h-100 app-container">
<v-row>
<v-col v-for="(app,i) in filteredApps" :key="i" cols="6">
<v-card
class="elevation-0 app-item-card"
>
<v-btn x-small outlined class="install-btn caption text-capitalize" @click="installApp">
<v-icon x-small class="mr-1">
mdi-plus
</v-icon>
Install
</v-btn>
<div class="d-flex flex-no-wrap">
<v-avatar
class="ma-3"
size="100"
tile
>
<v-img v-if="app.img" :src="app.img" contain />
<v-img v-else src="https://cdn.vuetifyjs.com/images/cards/foster.jpg" contain />
</v-avatar>
<div class="flex-grow-1">
<v-card-title
class="title "
v-text="app.name"
/>
<v-card-subtitle class="pb-1" v-text="app.description" />
<v-card-actions>
<div class="d-flex justify-space-between d-100 align-center">
<v-rating
full-icon="mdi-star"
readonly
length="5"
size="15"
value="5"
/>
<span v-if="app.price && app.price !== 'Free'" class="subtitles">${{ app.price }} / mo</span>
<span v-else class="subtitles">Free</span>
</div>
</v-card-actions>
<!-- <v-card-actions>-->
<!-- <v-btn-->
<!-- outlined-->
<!-- rounded-->
<!-- small-->
<!-- >-->
<!-- Download-->
<!-- </v-btn>-->
<!-- </v-card-actions>-->
</div>
</div>
</v-card>
</v-col>
</v-row>
</v-container>
</div>
</template>
<script>
export default {
name: 'AppStore',
data: () => ({
query: '',
selectedTags: [],
apps: [
// {
// name: 'Graph',
// description: 'Visualize your records on a bar, line, pie, or scatter chart',
// price: '29',
// tags: []
// }, {
// name: 'Import / Export',
// description: 'Visualize your records on a bar, line, pie, or scatter chart',
// price: '39'
// }, {
// name: 'Chart',
// description: 'Visualize your records on a bar, line, pie, or scatter chart',
// price: '19'
// },
{
name: 'Freshworks',
img: require('~/assets/img/abcd/freshworks.png'),
description: 'Visualize your records on a bar, line, pie, or scatter chart',
price: '19',
tags: ['SaaS']
},
{
name: 'RazorPay',
img: require('~/assets/img/abcd/razorpay.svg'),
description: 'Visualize your records on a bar, line, pie, or scatter chart',
price: '19',
tags: ['SaaS']
},
{
name: 'Google Ads',
img: require('~/assets/img/abcd/adsense.png'),
description: 'Visualize your records on a bar, line, pie, or scatter chart',
price: '19',
tags: ['SaaS']
},
{
name: 'Facebook Ads',
img: require('~/assets/img/abcd/fbads.png'),
description: 'Visualize your records on a bar, line, pie, or scatter chart',
price: '19',
tags: ['SaaS']
},
{
name: 'Stripe',
img: require('~/assets/img/abcd/320.png'),
description: 'Visualize your records on a bar, line, pie, or scatter chart',
price: '19',
tags: ['SaaS']
}, {
name: 'Twilio',
img: require('~/assets/img/abcd/twilio.png'),
description: 'Visualize your records on a bar, line, pie, or scatter chart',
price: '19',
tags: ['SaaS']
}, {
name: 'SendGrid',
img: require('~/assets/img/abcd/sendgrid.png'),
description: 'Visualize your records on a bar, line, pie, or scatter chart',
price: '19',
tags: ['SaaS']
}, {
name: 'Basecamp',
img: require('~/assets/img/abcd/basecamp.png'),
description: 'Visualize your records on a bar, line, pie, or scatter chart',
price: '19',
tags: ['SaaS']
}, {
name: 'Github',
img: require('~/assets/img/abcd/github.png'),
description: 'Visualize your records on a bar, line, pie, or scatter chart',
price: '19',
tags: ['SaaS']
}, {
name: 'Shopify',
img: require('~/assets/img/abcd/shopify.png'),
description: 'Visualize your records on a bar, line, pie, or scatter chart',
price: '19'
}, {
name: 'SAP',
img: require('~/assets/img/abcd/sap.png'),
description: 'Visualize your records on a bar, line, pie, or scatter chart',
price: '49',
tags: ['ERP']
}, {
name: 'SalesForce',
img: require('~/assets/img/abcd/salesforce.png'),
description: 'Visualize your records on a bar, line, pie, or scatter chart',
price: '99',
tags: ['ERP']
}, {
name: 'NetSuite',
img: require('~/assets/img/abcd/netsuit.png'),
description: 'Visualize your records on a bar, line, pie, or scatter chart',
price: '99'
}, {
name: 'Zoho CRM',
img: require('~/assets/img/abcd/zohocrm.png'),
description: 'Visualize your records on a bar, line, pie, or scatter chart',
price: '99',
tags: ['ERP']
}, {
name: 'MySQL',
img: require('~/assets/img/abcd/mysql.png'),
description: 'Visualize your records on a bar, line, pie, or scatter chart',
price: 'Free',
tags: ['Free', 'Databases']
}, {
name: 'PostgreSQL',
img: require('~/assets/img/abcd/pg.png'),
description: 'Visualize your records on a bar, line, pie, or scatter chart',
price: 'Free',
tags: ['Free', 'Databases']
}, {
name: 'SQL Server',
img: require('~/assets/img/abcd/mssql.png'),
description: 'Visualize your records on a bar, line, pie, or scatter chart',
price: 'Free',
tags: ['Free', 'Databases']
}, {
name: 'MariaDB',
img: require('~/assets/img/abcd/mariaDB.png'),
description: 'Visualize your records on a bar, line, pie, or scatter chart',
price: 'Free',
tags: ['Free', 'Databases']
}, {
name: 'SQLite',
img: require('~/assets/img/temp/db/sqlite.svg'),
description: 'Visualize your records on a bar, line, pie, or scatter chart',
price: 'Free',
tags: ['Free', 'Databases']
}, {
name: 'Oracle DB',
img: require('~/assets/img/temp/db/oracle.png.jpg'),
description: 'Visualize your records on a bar, line, pie, or scatter chart',
price: 'Free',
tags: ['Free', 'Databases']
}, {
name: 'CrateDB',
img: require('~/assets/img/abcd/cratedb.jpg'),
description: 'Visualize your records on a bar, line, pie, or scatter chart',
price: '99',
tags: ['Databases']
}, {
name: 'Cassandra',
img: require('~/assets/img/abcd/cassandra.png'),
description: 'Visualize your records on a bar, line, pie, or scatter chart',
price: '99',
tags: ['Databases']
}, {
name: 'CouchDB',
img: require('~/assets/img/abcd/couchdb.png'),
description: 'Visualize your records on a bar, line, pie, or scatter chart',
price: '99',
tags: ['Databases']
}, {
name: 'ElasticSearch',
img: require('~/assets/img/abcd/elasticsearch.png'),
description: 'Visualize your records on a bar, line, pie, or scatter chart',
price: '99',
tags: ['Databases']
}, {
name: 'Snowflake',
img: require('~/assets/img/abcd/snowflake.png'),
description: 'Visualize your records on a bar, line, pie, or scatter chart',
price: '99',
tags: ['Databases']
}, {
name: 'MongoDB',
img: require('~/assets/img/abcd/mongodb.png'),
description: 'Visualize your records on a bar, line, pie, or scatter chart',
price: '99'
}, {
name: 'BigQuery',
img: require('~/assets/img/abcd/bigquery.png'),
description: 'Visualize your records on a bar, line, pie, or scatter chart',
price: '99'
},
{
name: 'REST API',
img: require('~/assets/img/abcd/rest.png'),
description: 'Visualize your records on a bar, line, pie, or scatter chart',
price: 'Free',
tags: ['Free', 'API']
}, {
name: 'GRAPHQL API',
img: require('~/assets/img/abcd/graphql.png'),
description: 'Visualize your records on a bar, line, pie, or scatter chart',
price: 'Free',
tags: ['Free', 'API']
}, {
name: 'gRPC API',
img: require('~/assets/img/abcd/grpc.png'),
description: 'Visualize your records on a bar, line, pie, or scatter chart',
price: 'Free',
tags: ['Free', 'API']
},
{
name: 'Swagger',
img: require('~/assets/img/abcd/swagger.png'),
description: 'Visualize your records on a bar, line, pie, or scatter chart',
price: 'Free',
tags: ['Free', 'API Specification']
},
{
name: 'Postman',
img: require('~/assets/img/abcd/postman.jpg'),
description: 'Visualize your records on a bar, line, pie, or scatter chart',
price: 'Free',
tags: ['API Specification']
}
]
}),
computed: {
filters() {
return this.apps.reduce((arr, app) => arr.concat(app.tags || []), []).filter((f, i, arr) => i === arr.indexOf(f)).sort()
},
filteredApps() {
return this.apps.filter(app => (!this.query.trim() || app.name.toLowerCase().includes(this.query.trim().toLowerCase())) &&
(!this.selectedTags.length || this.selectedTags.some(t => app.tags && app.tags.includes(t)))
)
}
},
methods: {
installApp() {
this.$toast.info('Coming soon after seed funding.').goAway(5000)
}
}
}
</script>
<style scoped lang="scss">
.title {
color: var(--v-textColor-ligten2) !important;
}
.app-item-card {
transition: .4s background-color;
position: relative;
overflow-x: hidden;
.install-btn {
position: absolute;
opacity: 0;
right: -100%;
top: 10px;
transition: .4s opacity, .4s right;
}
&:hover .install-btn {
right: 10px;
opacity: 1;
}
}
.app-item-card {
transition: .4s background-color, .4s transform;
&:hover {
background: rgba(123, 126, 136, 0.1) !important;
transform: scale(1.01);
}
}
::v-deep {
.v-rating {
margin-left:6px;
.v-icon {
padding-right: 2px;
padding-left: 2px;
}
}
.v-input__control .v-input__slot .v-input--selection-controls__input {
transform: scale(.75);
}
.v-input--selection-controls .v-input__slot > .v-label{
font-size: .8rem;
}
}
.app-container {
height: 100%;
overflow-y: auto;
}
</style>
<!--
/**
* @copyright Copyright (c) 2021, Xgene Cloud Ltd
*
* @author Naveen MR <oof1lab@gmail.com>
* @author Pranav C Balan <pranavxc@gmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
-->