3d8b1d6ccb
- upload a custom logo for your space
- space settings can override user settings for theming
- spaces can upload custom CSS overrides
- allow users to disable showing the tandoor/space logo
- allow changing navigation background color to any color desired
- allow switching navigation text color between dark/light (different effects depending on theme)
364 lines
16 KiB
Vue
364 lines
16 KiB
Vue
<template>
|
|
<div id="app">
|
|
|
|
<b-row class="mt-2">
|
|
<b-col cols="12">
|
|
<div v-if="space !== undefined">
|
|
<h6><i class="fas fa-book"></i> {{ $t('Recipes') }}</h6>
|
|
<b-progress height="1.5rem" :max="space.max_recipes" variant="success" :striped="true">
|
|
<b-progress-bar :value="space.recipe_count" class="text-dark font-weight-bold">
|
|
{{ space.recipe_count }} /
|
|
<template v-if="space.max_recipes === 0">∞</template>
|
|
<template v-else>{{ space.max_recipes }}</template>
|
|
</b-progress-bar>
|
|
</b-progress>
|
|
|
|
<h6 class="mt-2"><i class="fas fa-users"></i> {{ $t('Users') }}</h6>
|
|
<b-progress height="1.5rem" :max="space.max_users" variant="success" :striped="true">
|
|
<b-progress-bar :value="space.user_count" class="text-dark font-weight-bold">
|
|
{{ space.user_count }} /
|
|
<template v-if="space.max_users === 0">∞</template>
|
|
<template v-else>{{ space.max_users }}</template>
|
|
</b-progress-bar>
|
|
</b-progress>
|
|
|
|
<h6 class="mt-2"><i class="fas fa-file"></i> {{ $t('Files') }}</h6>
|
|
<b-progress height="1.5rem" :max="space.max_file_storage_mb" variant="success" :striped="true">
|
|
<b-progress-bar :value="space.file_size_mb" class="text-dark font-weight-bold">
|
|
{{ space.file_size_mb }} /
|
|
<template v-if="space.max_file_storage_mb === 0">∞</template>
|
|
<template v-else>{{ space.max_file_storage_mb }}</template>
|
|
</b-progress-bar>
|
|
</b-progress>
|
|
|
|
</div>
|
|
</b-col>
|
|
</b-row>
|
|
|
|
<b-row class="mt-4">
|
|
<b-col cols="12">
|
|
<div v-if="user_spaces !== undefined">
|
|
<h4><i class="fas fa-users"></i> {{ $t('Users') }}</h4>
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>{{ $t('User') }}</th>
|
|
<th>{{ $t('Groups') }}</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tr v-for="us in user_spaces" :key="us.id">
|
|
<td>{{ us.user.display_name }}</td>
|
|
<td>
|
|
<generic-multiselect
|
|
class="input-group-text m-0 p-0"
|
|
@change="us.groups = $event.val; updateUserSpace(us)"
|
|
label="name"
|
|
:initial_selection="us.groups"
|
|
:model="Models.GROUP"
|
|
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
|
|
:limit="10"
|
|
:multiple="true"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<button class="btn btn-danger" @click="deleteUserSpace(us)">{{ $t('Delete') }}</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</b-col>
|
|
</b-row>
|
|
|
|
|
|
<b-row class="mt-2">
|
|
<b-col cols="12">
|
|
<div v-if="invite_links !== undefined">
|
|
<h4 class="mt-2"><i class="fas fa-users"></i> {{ $t('Invites') }}</h4>
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>{{ $t('Email') }}</th>
|
|
<th>{{ $t('Group') }}</th>
|
|
<th></th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tr v-for="il in active_invite_links" :key="il.id">
|
|
<td>{{ il.id }}</td>
|
|
<td>{{ il.email }}</td>
|
|
<td>
|
|
<generic-multiselect
|
|
class="input-group-text m-0 p-0"
|
|
@change="il.group = $event.val;"
|
|
label="name"
|
|
:initial_single_selection="il.group"
|
|
:model="Models.GROUP"
|
|
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
|
|
:limit="10"
|
|
:multiple="false"
|
|
/>
|
|
</td>
|
|
<td><input type="date" v-model="il.valid_until" class="form-control"></td>
|
|
<td>
|
|
<b-dropdown no-caret right>
|
|
<template #button-content>
|
|
<i class="fas fa-ellipsis-v"></i>
|
|
</template>
|
|
|
|
<!-- <b-dropdown-item>-->
|
|
<!-- <i class="fas fa-share-alt"></i>-->
|
|
<!-- </b-dropdown-item>-->
|
|
|
|
<b-dropdown-item @click="copyToClipboard(il, true)">
|
|
<i class="fas fa-link"></i> {{ $t('Copy Link') }}
|
|
</b-dropdown-item>
|
|
|
|
<b-dropdown-item @click="copyToClipboard(il, false)">
|
|
<i class="far fa-clipboard"></i> {{ $t('Copy Token') }}
|
|
</b-dropdown-item>
|
|
|
|
<b-dropdown-item @click="deleteInviteLink(il)">
|
|
<i class="fas fa-trash-alt"></i> {{ $t('Delete') }}
|
|
</b-dropdown-item>
|
|
|
|
|
|
</b-dropdown>
|
|
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<b-button variant="primary" @click="show_invite_create = true">{{ $t('Create') }}</b-button>
|
|
</div>
|
|
</b-col>
|
|
</b-row>
|
|
|
|
<b-row class="mt-4" v-if="space !== undefined">
|
|
<b-col cols="12">
|
|
<h4>{{ $t('Cosmetic') }}</h4>
|
|
<b-alert variant="warning" show>{{ $t('Space_Cosmetic_Settings') }}</b-alert>
|
|
|
|
<b-form-group :label="$t('Image')" :description="$t('CustomImageHelp')">
|
|
<generic-multiselect :initial_single_selection="space.image"
|
|
:model="Models.USERFILE"
|
|
:multiple="false"
|
|
@change="space.image = $event.val;"></generic-multiselect>
|
|
</b-form-group>
|
|
|
|
<b-form-group :label="$t('Logo')" :description="$t('CustomNavLogoHelp')">
|
|
<generic-multiselect :initial_single_selection="space.nav_logo"
|
|
:model="Models.USERFILE"
|
|
:multiple="false"
|
|
@change="space.nav_logo = $event.val;"></generic-multiselect>
|
|
</b-form-group>
|
|
|
|
<b-form-group :label="$t('Theme')">
|
|
<b-form-select v-model="space.space_theme">
|
|
<b-form-select-option value="BLANK">----</b-form-select-option>
|
|
<b-form-select-option value="TANDOOR">Tandoor</b-form-select-option>
|
|
<b-form-select-option value="TANDOOR_DARK">Tandoor Dark (Beta)</b-form-select-option>
|
|
<b-form-select-option value="BOOTSTRAP">Bootstrap</b-form-select-option>
|
|
<b-form-select-option value="DARKLY">Darkly</b-form-select-option>
|
|
<b-form-select-option value="FLATLY">Flatly</b-form-select-option>
|
|
<b-form-select-option value="SUPERHERO">Superhero</b-form-select-option>
|
|
</b-form-select>
|
|
</b-form-group>
|
|
|
|
|
|
<b-form-group :label="$t('CustomTheme')" :description="$t('CustomThemeHelp')">
|
|
<generic-multiselect :initial_single_selection="space.custom_space_theme"
|
|
:model="Models.USERFILE"
|
|
:multiple="false"
|
|
@change="space.custom_space_theme = $event.val;"></generic-multiselect>
|
|
|
|
</b-form-group>
|
|
|
|
<b-form-group :label="$t('Nav_Color')" :description="$t('Nav_Color_Help')">
|
|
<b-input-group>
|
|
<b-form-input type="color" v-model="space.nav_bg_color"></b-form-input>
|
|
<b-input-group-append>
|
|
<b-button @click="space.nav_bg_color = ''">{{ $t('Reset') }}</b-button>
|
|
</b-input-group-append>
|
|
</b-input-group>
|
|
</b-form-group>
|
|
|
|
<b-form-group :label="$t('Nav_Text_Mode')" :description="$t('Nav_Text_Mode_Help')">
|
|
<b-form-select v-model="space.nav_text_color">
|
|
<b-form-select-option value="BLANK">----</b-form-select-option>
|
|
<b-form-select-option value="LIGHT">Light</b-form-select-option>
|
|
<b-form-select-option value="DARK">Dark</b-form-select-option>
|
|
</b-form-select>
|
|
</b-form-group>
|
|
|
|
<b-button variant="success" @click="updateSpace()">{{ $t('Update') }}</b-button>
|
|
</b-col>
|
|
</b-row>
|
|
|
|
<b-row class="mt-4" v-if="space !== undefined">
|
|
<b-col cols="12">
|
|
<h4><i class="fas fa-cogs"></i> {{ $t('Settings') }}</h4>
|
|
|
|
<b-form-group :label="$t('Message')">
|
|
<b-form-textarea v-model="space.message"></b-form-textarea>
|
|
</b-form-group>
|
|
|
|
<b-form-group :label="$t('FoodInherit')" :description="$t('food_inherit_info')">
|
|
<generic-multiselect :initial_selection="space.food_inherit"
|
|
:model="Models.FOOD_INHERIT_FIELDS"
|
|
@change="space.food_inherit = $event.val;">
|
|
</generic-multiselect>
|
|
</b-form-group>
|
|
|
|
<b-form-group :description="$t('reset_food_inheritance_info')">
|
|
<b-button-group class="mt-2">
|
|
<b-button variant="success" @click="updateSpace()">{{ $t('Update') }}</b-button>
|
|
<b-button variant="warning" @click="resetInheritance()">{{ $t('reset_food_inheritance') }}</b-button>
|
|
</b-button-group>
|
|
</b-form-group>
|
|
|
|
</b-col>
|
|
</b-row>
|
|
|
|
<b-row class="mt-4">
|
|
<b-col cols="12">
|
|
<h4>{{ $t('Open_Data_Import') }}</h4>
|
|
<open-data-import-component></open-data-import-component>
|
|
</b-col>
|
|
|
|
</b-row>
|
|
|
|
|
|
<div class="row mt-4">
|
|
<div class="col col-12">
|
|
<h4 class="mt-2"><i class="fas fa-trash"></i> {{ $t('Delete') }}</h4>
|
|
|
|
{{ $t('warning_space_delete') }}
|
|
<br/>
|
|
<a class="btn btn-danger" :href="resolveDjangoUrl('delete_space', ACTIVE_SPACE_ID)">{{
|
|
$t('Delete')
|
|
}}</a>
|
|
</div>
|
|
</div>
|
|
|
|
<br/>
|
|
<br/>
|
|
|
|
<generic-modal-form :model="Models.INVITE_LINK" :action="Actions.CREATE" :show="show_invite_create"
|
|
@finish-action="show_invite_create = false; loadInviteLinks()"/>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Vue from "vue"
|
|
import {BootstrapVue} from "bootstrap-vue"
|
|
|
|
import "bootstrap-vue/dist/bootstrap-vue.css"
|
|
|
|
import {ApiMixin, resolveDjangoUrl, ResolveUrlMixin, StandardToasts, ToastMixin} from "@/utils/utils"
|
|
|
|
import {ApiApiFactory} from "@/utils/openapi/api.ts"
|
|
import GenericMultiselect from "@/components/GenericMultiselect";
|
|
import GenericModalForm from "@/components/Modals/GenericModalForm";
|
|
import axios from "axios";
|
|
import VueClipboard from 'vue-clipboard2'
|
|
import OpenDataImportComponent from "@/components/OpenDataImportComponent.vue";
|
|
|
|
Vue.use(VueClipboard)
|
|
|
|
Vue.use(BootstrapVue)
|
|
|
|
export default {
|
|
name: "SpaceManageView",
|
|
mixins: [ResolveUrlMixin, ToastMixin, ApiMixin],
|
|
components: {GenericMultiselect, GenericModalForm, OpenDataImportComponent},
|
|
data() {
|
|
return {
|
|
ACTIVE_SPACE_ID: window.ACTIVE_SPACE_ID,
|
|
space: undefined,
|
|
user_spaces: [],
|
|
invite_links: [],
|
|
show_invite_create: false
|
|
}
|
|
},
|
|
computed: {
|
|
active_invite_links: function () {
|
|
return this.invite_links.filter(il => il.used_by === null)
|
|
},
|
|
},
|
|
mounted() {
|
|
this.$i18n.locale = window.CUSTOM_LOCALE
|
|
|
|
let apiFactory = new ApiApiFactory()
|
|
apiFactory.retrieveSpace(window.ACTIVE_SPACE_ID).then(r => {
|
|
this.space = r.data
|
|
})
|
|
apiFactory.listUserSpaces(1, 25).then(r => { //TODO build proper pagination
|
|
this.user_spaces = r.data.results
|
|
})
|
|
this.loadInviteLinks()
|
|
},
|
|
methods: {
|
|
copyToClipboard: function (inviteLink, link) {
|
|
let content = inviteLink.uuid
|
|
if (link) {
|
|
content = localStorage.BASE_PATH + this.resolveDjangoUrl('view_invite', inviteLink.uuid)
|
|
}
|
|
this.$copyText(content)
|
|
},
|
|
loadInviteLinks: function () {
|
|
let apiFactory = new ApiApiFactory()
|
|
apiFactory.listInviteLinks().then(r => {
|
|
this.invite_links = r.data
|
|
})
|
|
},
|
|
updateSpace: function () {
|
|
let apiFactory = new ApiApiFactory()
|
|
apiFactory.partialUpdateSpace(window.ACTIVE_SPACE_ID, this.space).then(r => {
|
|
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
|
|
}).catch(err => {
|
|
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
|
|
})
|
|
},
|
|
updateUserSpace: function (userSpace) {
|
|
let apiFactory = new ApiApiFactory()
|
|
apiFactory.partialUpdateUserSpace(userSpace.id, userSpace).then(r => {
|
|
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
|
|
}).catch(err => {
|
|
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
|
|
})
|
|
},
|
|
deleteUserSpace: function (userSpace) {
|
|
if (confirm(this.$t('confirm_delete', {object: this.$t("User")}))) {
|
|
let apiFactory = new ApiApiFactory()
|
|
apiFactory.destroyUserSpace(userSpace.id).then(r => {
|
|
this.user_spaces = this.user_spaces.filter(u => u !== userSpace)
|
|
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_DELETE)
|
|
}).catch(err => {
|
|
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_DELETE, err)
|
|
})
|
|
}
|
|
},
|
|
deleteInviteLink: function (inviteLink) {
|
|
let apiFactory = new ApiApiFactory()
|
|
apiFactory.destroyInviteLink(inviteLink.id).then(r => {
|
|
this.invite_links = this.invite_links.filter(i => i !== inviteLink)
|
|
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_DELETE)
|
|
}).catch(err => {
|
|
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_DELETE, err)
|
|
})
|
|
},
|
|
resetInheritance: function () {
|
|
axios.get(resolveDjangoUrl('api_reset_food_inheritance')).then(r => {
|
|
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
|
|
}).catch(err => {
|
|
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style></style>
|