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.
wiki/client/components/admin/admin-extensions.vue

120 lines
3.8 KiB

<template lang='pug'>
v-container(fluid, grid-list-lg)
v-layout(row wrap)
v-flex(xs12)
.admin-header
img.animated.fadeInUp(src='/_assets/svg/icon-installing-updates.svg', alt='Extensions', style='width: 80px;')
.admin-header-title
.headline.primary--text.animated.fadeInLeft {{ $t('admin:extensions.title') }}
.subtitle-1.grey--text.animated.fadeInLeft {{ $t('admin:extensions.subtitle') }}
v-form.pt-3
v-layout(row wrap)
v-flex(xl6 lg8 xs12)
v-alert.mb-4(outlined, color='error', icon='mdi-alert')
span New extensions cannot be installed at the moment. This feature is coming in a future release.
v-expansion-panels.admin-extensions-exp(hover, popout)
v-expansion-panel(v-for='ext of extensions', :key='`ext-` + ext.key')
v-expansion-panel-header(disable-icon-rotate)
span {{ext.title}}
template(v-slot:actions)
v-chip(label, color='success', small, v-if='ext.isInstalled') Installed
v-chip(label, color='warning', small, v-else) Not Installed
v-expansion-panel-content.pa-0
v-card(flat, :class='$vuetify.theme.dark ? `grey darken-3` : `grey lighten-5`', tile)
v-card-text
.body-2 {{ext.description}}
v-divider.my-4
.body-2
strong.mr-2 This extension is
v-chip.mr-2(v-if='ext.isCompatible', label, outlined, small, color='success') compatible
v-chip.mr-2(v-else, label, small, color='error') not compatible
strong with your host.
v-card-chin
v-spacer
v-btn(disabled)
v-icon(left) mdi-plus
span Install
</template>
<script>
import _ from 'lodash'
import gql from 'graphql-tag'
export default {
data() {
return {
extensions: []
}
},
methods: {
async save () {
// try {
// await this.$apollo.mutate({
// mutation: gql`
// mutation (
// $host: String!
// ) {
// site {
// updateConfig(
// host: $host
// ) {
// responseResult {
// succeeded
// errorCode
// slug
// message
// }
// }
// }
// }
// `,
// variables: {
// host: _.get(this.config, 'host', '')
// },
// watchLoading (isLoading) {
// this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-extensions-update')
// }
// })
// this.$store.commit('showNotification', {
// style: 'success',
// message: 'Configuration saved successfully.',
// icon: 'check'
// })
// } catch (err) {
// this.$store.commit('pushGraphError', err)
// }
}
},
apollo: {
extensions: {
query: gql`
{
system {
extensions {
key
title
description
isInstalled
isCompatible
}
}
}
`,
fetchPolicy: 'network-only',
update: (data) => _.cloneDeep(data.system.extensions),
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-extensions-refresh')
}
}
}
}
</script>
<style lang='scss'>
.admin-extensions-exp {
.v-expansion-panel-content__wrap {
padding: 0;
}
}
</style>