gamebrary/src/components/Settings/BoardSettings.vue

281 lines
6.4 KiB
Vue
Raw Normal View History

2020-08-15 00:02:34 +00:00
<template lang="html">
2020-08-25 04:23:22 +00:00
<b-button
v-b-modal:board-settings
class="mt-3"
ref="addList"
>
<b-icon-gear-fill />
2020-08-15 00:02:34 +00:00
<b-modal
id="board-settings"
title="Board settings"
2020-08-25 04:23:22 +00:00
scrollable
@show="init"
@hide="hide"
2020-08-15 00:02:34 +00:00
>
2020-08-25 04:23:22 +00:00
<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>
2020-08-15 00:02:34 +00:00
2020-08-25 04:23:22 +00:00
<b-form-group
label="Board description"
2020-08-25 04:23:22 +00:00
label-for="description"
>
<b-form-textarea
id="description"
v-model="description"
maxlength="280"
rows="3"
/>
</b-form-group>
2020-08-15 00:02:34 +00:00
2020-08-25 04:23:22 +00:00
<b-form-group
label="Board theme"
label-for="theme"
>
2020-08-15 00:02:34 +00:00
<b-form-select
id="theme"
disabled
2020-08-25 04:23:22 +00:00
v-model="theme"
2020-08-15 00:02:34 +00:00
>
<b-form-select-option
v-for="{ id, name } in themes"
:key="id"
:value="id"
>
{{ name }}
</b-form-select-option>
</b-form-select>
2020-08-25 04:23:22 +00:00
</b-form-group>
<b-form-group
v-if="wallpapers.length"
2020-08-25 04:23:22 +00:00
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)"
>
<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>
2020-08-25 04:23:22 +00:00
<b-img
v-if="wallpaper"
thumbnail
class="mb-3"
2020-08-25 04:23:22 +00:00
:src="wallpaperUrl"
fluid
/>
2020-08-15 00:02:34 +00:00
2020-08-25 04:23:22 +00:00
<platform-picker
v-model="board.platforms"
/>
</form>
<template v-slot:modal-footer>
<b-button
variant="danger"
2020-08-25 04:23:22 +00:00
@click="confirmDelete"
>
Delete board
</b-button>
2020-08-25 04:23:22 +00:00
<b-button
variant="primary"
:disabled="saving"
@click="saveSettings"
>
<b-spinner small v-if="saving" />
<span v-else>Save</span>
</b-button>
</template>
2020-08-15 00:02:34 +00:00
</b-modal>
2020-08-25 04:23:22 +00:00
</b-button>
2020-08-15 00:02:34 +00:00
</template>
<script>
import { mapState } from 'vuex';
import themes from '@/themes';
2020-08-25 04:23:22 +00:00
import PlatformPicker from '@/components/Board/PlatformPicker';
2020-08-15 00:02:34 +00:00
export default {
components: {
2020-08-25 04:23:22 +00:00
PlatformPicker,
2020-08-15 00:02:34 +00:00
},
data() {
return {
themes,
saving: false,
2020-08-25 04:23:22 +00:00
description: null,
name: null,
platforms: null,
theme: null,
wallpaper: null,
wallpaperUrl: null,
wallpapers: [],
2020-08-15 00:02:34 +00:00
};
},
computed: {
2020-08-25 04:23:22 +00:00
...mapState(['board', 'user']),
2020-08-15 00:02:34 +00:00
},
methods: {
hide() {
this.$bus.$off('WALLPAPER_UPLOADED', this.loadWallpapers);
},
2020-08-25 04:23:22 +00:00
async loadWallpapers() {
this.wallpapers = [];
const files = await this.$store.dispatch('LOAD_WALLPAPERS');
// TODO: use promise all instead
files.forEach(async (path) => {
const url = await this.$store.dispatch('LOAD_WALLPAPER', path);
2020-08-25 04:23:22 +00:00
const name = path.split(`${this.user.uid}/wallpapers/`)[1];
this.wallpapers.push({ name, url, path });
});
},
removeWallpaper() {
this.wallpaper = null;
this.wallpaperUrl = null;
2020-08-15 00:02:34 +00:00
},
2020-08-25 04:23:22 +00:00
async setWallpaper(file) {
this.wallpaper = file.path;
this.wallpaperUrl = await this.$store.dispatch('LOAD_WALLPAPER', file.path);
2020-08-25 04:23:22 +00:00
},
submit(e) {
e.preventDefault();
if (this.$refs.createBoardForm.checkValidity()) {
this.createBoard();
}
},
async init() {
this.$bus.$on('WALLPAPER_UPLOADED', this.loadWallpapers);
2020-08-25 04:23:22 +00:00
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.wallpaperUrl = board.wallpaper
? await this.$store.dispatch('LOAD_WALLPAPER', board.wallpaper)
2020-08-25 04:23:22 +00:00
: null;
this.loadWallpapers();
},
confirmDelete() {
this.$bvModal.msgBoxConfirm('Are you sure you want to delete this board?', {
title: 'Delete board',
2020-08-15 00:02:34 +00:00
okVariant: 'danger',
2020-08-25 04:23:22 +00:00
okTitle: 'Yes, delete board',
2020-08-15 00:02:34 +00:00
})
.then((value) => {
if (value) {
this.deleteBoard();
}
});
},
2020-08-25 04:23:22 +00:00
async deleteBoard() {
this.loading = true;
2020-08-15 00:02:34 +00:00
2020-08-25 04:23:22 +00:00
await this.$store.dispatch('DELETE_BOARD', this.board.id)
2020-08-15 00:02:34 +00:00
.catch(() => {
2020-08-25 04:23:22 +00:00
this.loading = false;
this.$bvToast.toast('There was an error deleting board', { title: 'Error', variant: 'error' });
2020-08-15 00:02:34 +00:00
});
2020-08-25 04:23:22 +00:00
this.loading = false;
this.$bvToast.toast('Board removed', { title: 'Success', variant: 'success' });
this.$router.push({ name: 'home' });
2020-08-15 00:02:34 +00:00
},
2020-08-25 04:23:22 +00:00
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');
}
},
2020-08-15 00:02:34 +00:00
},
};
</script>
2020-08-25 04:23:22 +00:00
<style lang="scss" rel="stylesheet/scss">
.dropdown-menu {
max-height: 400px;
max-width: 360px;
overflow: auto;
}
2020-08-15 00:02:34 +00:00
</style>