多维表格
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.
 
 
 
 
 
 

348 lines
9.9 KiB

<template>
<div class="d-flex h-100 nc-app-store-tab">
<v-dialog v-model="pluginInstallOverlay" min-width="400px" max-width="700px" min-height="300">
<v-card
v-if="installPlugin && pluginInstallOverlay"
:dark="$store.state.windows.darkTheme"
:light="!$store.state.windows.darkTheme"
>
<app-install :title="installPlugin.title" :default-config="defaultConfig" @close="pluginInstallOverlay = false" @saved="saved()" />
</v-card>
</v-dialog>
<dlg-ok-new
v-model="pluginUninstallModal"
:heading="`Please click on submit to reset ${resetPluginRef && resetPluginRef.title}`"
ok-label="Submit"
type="primary"
@ok="confirmResetPlugin"
/>
<v-dialog min-width="400px" max-width="700px" min-height="300">
<v-card
v-if="resetPluginRef"
:dark="$store.state.windows.darkTheme"
:light="!$store.state.windows.darkTheme"
>
<v-card-text> Please confirm to reset {{ resetPluginRef.title }}</v-card-text>
<v-card-actions>
<v-btn color="primary" @click="confirmResetPlugin">
Yes
</v-btn>
<v-btn @click="pluginUninstallModal = false">
No
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-container class="h-100 app-container">
<v-row class="d-flex align-stretch">
<v-col v-for="(app,i) in filteredApps" :key="i" class="" cols="6">
<!-- @click="installApp(app)"-->
<v-card
height="100%"
class="elevatio app-item-card "
>
<div class="install-btn ">
<v-btn
v-if="app.parsedInput"
x-small
outlined
class=" caption text-capitalize"
@click="installApp(app)"
>
<v-icon x-small class="mr-1">
mdi-pencil
</v-icon>
Edit
</v-btn>
<v-btn
v-if="app.parsedInput"
x-small
outlined
class="caption text-capitalize"
@click="resetApp(app)"
>
<v-icon x-small class="mr-1">
mdi-close-circle-outline
</v-icon>
Reset
</v-btn>
<v-btn v-else x-small outlined class=" caption text-capitalize" @click="installApp(app)">
<v-icon x-small class="mr-1">
mdi-plus
</v-icon>
Install
</v-btn>
</div>
<div class="d-flex flex-no-wrap">
<v-avatar
class="ma-3 align-self-center"
size="50"
tile
:color="app.title === 'SES' ? '#242f3e' : ''"
>
<v-img v-if="app.logo" :src="app.logo" contain />
<v-icon v-else-if="app.icon" color="#242f3e" size="50">
{{ app.icon }}
</v-icon>
</v-avatar>
<div class="flex-grow-1">
<v-card-title
class="title "
v-text="app.title"
/>
<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 class="subtitles" v-if="app.price && app.price !== 'Free'">${{ app.price }} / mo</span>-->
<!-- <span class="subtitles" v-else>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>
<v-navigation-drawer width="300" class="pa-1">
<v-text-field
v-model="query"
dense
hide-details
placeholder="Search apps"
color="primary"
class="search-field caption"
>
<template #prepend-inner>
<v-icon small class="mt-1">
mdi-magnify
</v-icon>
</template>
</v-text-field>
<v-list dense>
<v-list-item v-for="filter of filters" :key="filter" dense>
<v-checkbox
v-model="selectedTags"
class="pt-0 mt-0"
:value="filter"
hide-details
dense
:label="filter"
>
<template #label>
<v-icon small class="mr-1">
{{ icons[filter] }}
</v-icon>
{{ filter }}
</template>
</v-checkbox>
</v-list-item>
</v-list>
</v-navigation-drawer>
</div>
</template>
<script>
import AppInstall from '@/components/project/appStore/appInstall'
import DlgOkNew from '@/components/utils/dlgOkNew'
export default {
name: 'AppStore',
components: { DlgOkNew, AppInstall },
data: () => ({
query: '',
selectedTags: [],
apps: [],
pluginInstallOverlay: false,
installPlugin: null,
resetPluginRef: null,
pluginUninstallModal: false,
defaultConfig: {},
icons: {
Email: 'mdi-email-outline',
Storage: 'mdi-usb-flash-drive-outline',
Notification: 'mdi-bell-outline',
Authentication: 'mdi-shield-account-outline',
Brand: 'mdi-sparkles',
Cache: 'mdi-cached',
Enterprise: 'mdi-bank',
Chat: 'mdi-chat-outline'
}
}),
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)))
)
}
},
async created() {
await this.loadPluginList()
this.readPluginDefaults()
},
methods: {
async readPluginDefaults() {
try {
this.defaultConfig = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcPluginDemoDefaults'])
} catch (e) {
}
},
async confirmResetPlugin() {
try {
await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcPluginSet', {
input: null,
id: this.resetPluginRef.id,
title: this.resetPluginRef.title,
uninstall: true
}])
this.$toast.success('Plugin uninstalled successfully').goAway(5000)
await this.loadPluginList()
} catch (e) {
this.$toast.error(e.message).goAway(3000)
}
},
async saved() {
this.pluginInstallOverlay = false
await this.loadPluginList()
},
async installApp(app) {
this.pluginInstallOverlay = true
this.installPlugin = app
},
async resetApp(app) {
this.pluginUninstallModal = true
this.resetPluginRef = app
},
async loadPluginList() {
try {
const plugins = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcPluginList'])
plugins.push(...plugins.splice(0, 3))
this.apps = plugins.map((p) => {
p.tags = p.tags ? p.tags.split(',') : []
p.parsedInput = p.input && JSON.parse(p.input)
return p
})
} catch (e) {
}
}
}
}
</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;
}
.search-field.v-text-field > .v-input__control, .search-field.v-text-field > .v-input__control > .v-input__slot {
min-height: auto;
}
}
.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/>.
*
*/
-->