mirror of
https://github.com/romancm/gamebrary
synced 2024-12-24 01:53:07 +00:00
264 lines
6 KiB
Vue
264 lines
6 KiB
Vue
<template lang="html">
|
|
<b-button
|
|
v-b-modal:board-settings
|
|
class="mt-3"
|
|
ref="addList"
|
|
>
|
|
<b-icon-gear-fill />
|
|
|
|
<b-modal
|
|
id="board-settings"
|
|
title="Board settings"
|
|
scrollable
|
|
@show="init"
|
|
@hide="hide"
|
|
>
|
|
<form ref="boardSettingsForm" @submit.stop.prevent="submit">
|
|
<b-form-group
|
|
label="Board name"
|
|
label-for="name"
|
|
>
|
|
<b-form-input
|
|
id="name"
|
|
v-model="name"
|
|
required
|
|
/>
|
|
</b-form-group>
|
|
|
|
<b-form-group
|
|
label="Board description"
|
|
label-for="description"
|
|
>
|
|
<b-form-textarea
|
|
id="description"
|
|
v-model="description"
|
|
maxlength="280"
|
|
rows="3"
|
|
/>
|
|
</b-form-group>
|
|
|
|
<b-form-group
|
|
label="Board theme"
|
|
label-for="theme"
|
|
>
|
|
<b-form-select
|
|
id="theme"
|
|
disabled
|
|
v-model="theme"
|
|
>
|
|
<b-form-select-option
|
|
v-for="{ id, name } in themes"
|
|
:key="id"
|
|
:value="id"
|
|
>
|
|
{{ name }}
|
|
</b-form-select-option>
|
|
</b-form-select>
|
|
</b-form-group>
|
|
|
|
<b-form-group
|
|
v-if="wallpapers.length"
|
|
label="Board wallpaper"
|
|
label-for="wallpaper"
|
|
>
|
|
<b-dropdown
|
|
id="wallpaper"
|
|
text="Select wallpaper"
|
|
boundary="viewport"
|
|
>
|
|
<b-dropdown-item variant="danger" v-if="wallpaper" @click="removeWallpaper">
|
|
Remove wallpaper
|
|
</b-dropdown-item>
|
|
<b-dropdown-item
|
|
v-for="file in wallpapers"
|
|
:key="file.name"
|
|
@click="setWallpaper(file.url)"
|
|
>
|
|
<b-img
|
|
thumbnail
|
|
:src="file.url"
|
|
:alt="file.name"
|
|
fluid
|
|
/>
|
|
</b-dropdown-item>
|
|
</b-dropdown>
|
|
</b-form-group>
|
|
|
|
<div v-else>
|
|
No wallpapers uploaded yet.
|
|
<b-button v-b-modal:file-settings>Manage files</b-button>
|
|
</div>
|
|
|
|
|
|
<b-img
|
|
v-if="wallpaper"
|
|
thumbnail
|
|
class="mb-3"
|
|
:src="wallpaper"
|
|
fluid
|
|
/>
|
|
|
|
<platform-picker
|
|
v-model="board.platforms"
|
|
/>
|
|
</form>
|
|
|
|
<template v-slot:modal-footer>
|
|
<b-button
|
|
variant="danger"
|
|
@click="confirmDelete"
|
|
>
|
|
Delete board
|
|
</b-button>
|
|
|
|
<b-button
|
|
variant="primary"
|
|
:disabled="saving"
|
|
@click="saveSettings"
|
|
>
|
|
<b-spinner small v-if="saving" />
|
|
<span v-else>Save</span>
|
|
</b-button>
|
|
</template>
|
|
</b-modal>
|
|
</b-button>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex';
|
|
import themes from '@/themes';
|
|
import PlatformPicker from '@/components/Board/PlatformPicker';
|
|
|
|
export default {
|
|
components: {
|
|
PlatformPicker,
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
themes,
|
|
saving: false,
|
|
description: null,
|
|
name: null,
|
|
platforms: null,
|
|
theme: null,
|
|
wallpaper: null,
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
...mapState(['board', 'user', 'wallpapers']),
|
|
},
|
|
|
|
methods: {
|
|
hide() {
|
|
this.$bus.$off('WALLPAPER_UPLOADED', this.loadWallpapers);
|
|
},
|
|
|
|
async loadWallpapers() {
|
|
await this.$store.dispatch('LOAD_WALLPAPERS')
|
|
.catch(() => {
|
|
this.$bvToast.toast('There was an error loading wallpapers', { title: 'Error', variant: 'danger' });
|
|
});
|
|
},
|
|
|
|
removeWallpaper() {
|
|
this.wallpaper = null;
|
|
},
|
|
|
|
async setWallpaper(url) {
|
|
this.wallpaper = url;
|
|
},
|
|
|
|
submit(e) {
|
|
e.preventDefault();
|
|
|
|
if (this.$refs.boardSettingsForm.checkValidity()) {
|
|
this.saveSettings();
|
|
}
|
|
},
|
|
|
|
async init() {
|
|
this.$bus.$on('WALLPAPER_UPLOADED', this.loadWallpapers);
|
|
|
|
const { board } = this;
|
|
|
|
this.description = board.description;
|
|
this.name = board.name;
|
|
this.platforms = board.platforms;
|
|
this.theme = board.theme || 'default';
|
|
this.wallpaper = board.wallpaper;
|
|
|
|
this.loadWallpapers();
|
|
},
|
|
|
|
confirmDelete() {
|
|
this.$bvModal.msgBoxConfirm('Are you sure you want to delete this board?', {
|
|
title: 'Delete board',
|
|
okVariant: 'danger',
|
|
okTitle: 'Yes, delete board',
|
|
})
|
|
.then((value) => {
|
|
if (value) {
|
|
this.deleteBoard();
|
|
}
|
|
});
|
|
},
|
|
|
|
async deleteBoard() {
|
|
this.loading = true;
|
|
|
|
await this.$store.dispatch('DELETE_BOARD', this.board.id)
|
|
.catch(() => {
|
|
this.loading = false;
|
|
this.$bvToast.toast('There was an error deleting board', { title: 'Error', variant: 'error' });
|
|
});
|
|
|
|
this.loading = false;
|
|
this.$bvToast.toast('Board removed', { title: 'Success', variant: 'success' });
|
|
this.$router.push({ name: 'home' });
|
|
},
|
|
|
|
async saveSettings() {
|
|
this.saving = true;
|
|
const wallpaperChanged = this.board.wallpaper !== this.wallpaper;
|
|
|
|
const { board } = this;
|
|
|
|
const payload = {
|
|
...board,
|
|
description: this.description,
|
|
name: this.name,
|
|
platforms: this.platforms,
|
|
theme: this.theme,
|
|
wallpaper: this.wallpaper,
|
|
};
|
|
|
|
this.$store.commit('SET_BOARD', payload);
|
|
|
|
await this.$store.dispatch('SAVE_BOARD')
|
|
.catch(() => {
|
|
this.saving = false;
|
|
|
|
this.$bvToast.toast('There was an error renaming list', { title: 'Error', variant: 'danger' });
|
|
});
|
|
|
|
this.saving = false;
|
|
this.$bvToast.toast('Board settings saved', { title: 'Saved', variant: 'success' });
|
|
this.$bvModal.hide('board-settings');
|
|
|
|
if (wallpaperChanged) {
|
|
this.$bus.$emit('RELOAD_WALLPAPER');
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" rel="stylesheet/scss">
|
|
.dropdown-menu {
|
|
max-height: 400px;
|
|
max-width: 360px;
|
|
overflow: auto;
|
|
}
|
|
</style>
|