2020-08-25 23:37:33 +00:00
|
|
|
<template lang="html">
|
2020-09-28 23:25:36 +00:00
|
|
|
<div>
|
2020-09-26 00:09:20 +00:00
|
|
|
<b-jumbotron
|
2020-10-05 18:42:04 +00:00
|
|
|
:header="$t('wallpapers.title')"
|
|
|
|
:lead="$t('wallpapers.subtitle')"
|
2020-10-14 00:35:40 +00:00
|
|
|
:bg-variant="nightMode ? 'dark' : ''"
|
|
|
|
:text-variant="nightMode ? 'white' : ''"
|
|
|
|
:border-variant="nightMode ? 'dark' : ''"
|
2020-09-26 00:09:20 +00:00
|
|
|
header-level="5"
|
|
|
|
fluid
|
|
|
|
/>
|
|
|
|
<!-- TODO: show space used -->
|
|
|
|
<!-- TODO: allow to apply wallpaper to board from here -->
|
|
|
|
<b-container>
|
2020-10-05 18:42:04 +00:00
|
|
|
<!-- TODO: convert to form -->
|
|
|
|
<!-- TODO: translate "browse" -->
|
2020-10-14 00:35:40 +00:00
|
|
|
|
2020-10-05 18:42:04 +00:00
|
|
|
<b-row class="mb-3">
|
2020-10-14 00:35:40 +00:00
|
|
|
<b-col cols="12" lg="6" class="mb-4">
|
2020-08-25 23:37:33 +00:00
|
|
|
<b-form-group
|
2020-10-05 18:42:04 +00:00
|
|
|
:description="$t('wallpapers.form.helperText')"
|
2020-10-31 17:43:20 +00:00
|
|
|
:label="$t('wallpapers.form.label')"
|
2020-08-25 23:37:33 +00:00
|
|
|
>
|
|
|
|
<b-form-file
|
|
|
|
v-model="file"
|
|
|
|
accept="image/*"
|
2020-10-31 17:43:20 +00:00
|
|
|
:browse-text="$t('wallpapers.form.upload')"
|
2020-10-05 18:42:04 +00:00
|
|
|
:placeholder="$t('wallpapers.form.placeholder')"
|
2020-10-31 17:43:20 +00:00
|
|
|
@input="uploadWallpaper"
|
2020-08-25 23:37:33 +00:00
|
|
|
/>
|
|
|
|
</b-form-group>
|
|
|
|
|
2020-10-31 17:43:20 +00:00
|
|
|
<b-alert v-if="isDuplicate && !saving && file && file.name" show variant="warning">
|
2020-10-05 18:42:04 +00:00
|
|
|
{{ $t('wallpapers.form.duplicateMessage', { fileName: file.name }) }}
|
2020-08-25 23:37:33 +00:00
|
|
|
</b-alert>
|
|
|
|
</b-col>
|
|
|
|
</b-row>
|
|
|
|
|
2020-10-14 00:35:40 +00:00
|
|
|
<h5>{{ $t('wallpapers.list.title') }}</h5>
|
|
|
|
|
2020-10-31 17:43:20 +00:00
|
|
|
<b-card
|
2020-10-14 00:35:40 +00:00
|
|
|
v-if="wallpapers.length"
|
|
|
|
v-for="wallpaper in wallpapers"
|
|
|
|
:key="wallpaper.name"
|
2020-10-31 17:43:20 +00:00
|
|
|
:img-src="wallpaper.url"
|
|
|
|
:img-alt="wallpaper.name"
|
|
|
|
img-left
|
|
|
|
img-width="180"
|
|
|
|
class="mb-3"
|
2020-10-14 00:35:40 +00:00
|
|
|
>
|
2020-10-31 17:43:20 +00:00
|
|
|
<p>{{ wallpaper.name }}</p>
|
|
|
|
<b-button
|
|
|
|
variant="danger"
|
|
|
|
size="sm"
|
|
|
|
@click="confirmDeleteWallpaper(wallpaper)"
|
2020-08-25 23:37:33 +00:00
|
|
|
>
|
2020-10-31 17:43:20 +00:00
|
|
|
<icon name="trash" white />
|
|
|
|
</b-button>
|
|
|
|
</b-card>
|
2020-08-25 23:37:33 +00:00
|
|
|
|
|
|
|
<b-alert show v-else>You don't have any wallpapers.</b-alert>
|
2020-09-26 00:09:20 +00:00
|
|
|
</b-container>
|
2020-09-28 23:25:36 +00:00
|
|
|
</div>
|
2020-08-25 23:37:33 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2020-10-14 00:35:40 +00:00
|
|
|
import { mapState, mapGetters } from 'vuex';
|
2020-08-25 23:37:33 +00:00
|
|
|
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
file: null,
|
|
|
|
saving: false,
|
|
|
|
loading: false,
|
|
|
|
wallpaperUrls: [],
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
computed: {
|
|
|
|
...mapState(['user', 'board', 'wallpapers']),
|
2020-10-14 00:35:40 +00:00
|
|
|
...mapGetters(['nightMode']),
|
2020-08-25 23:37:33 +00:00
|
|
|
|
|
|
|
existingFiles() {
|
|
|
|
return this.wallpapers.map(({ name }) => name);
|
|
|
|
},
|
|
|
|
|
|
|
|
isDuplicate() {
|
|
|
|
const { file, existingFiles } = this;
|
|
|
|
|
|
|
|
return file && file.name && existingFiles.includes(file.name);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
2020-11-01 16:20:48 +00:00
|
|
|
uploadWallpaper() {
|
2020-10-31 17:43:20 +00:00
|
|
|
if (this.isDuplicate) {
|
|
|
|
return this.$bvToast.toast('File already exists', { title: '!', variant: 'warning' });
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!this.file) {
|
2020-11-01 16:20:48 +00:00
|
|
|
return false;
|
2020-10-31 17:43:20 +00:00
|
|
|
}
|
|
|
|
|
2020-08-25 23:37:33 +00:00
|
|
|
this.saving = true;
|
|
|
|
|
2020-11-01 16:20:48 +00:00
|
|
|
return this.$store.dispatch('UPLOAD_WALLPAPER', this.file)
|
2020-10-31 17:43:20 +00:00
|
|
|
.then(() => {
|
|
|
|
this.$bvToast.toast('File uploaded', { title: 'Success', variant: 'success' });
|
|
|
|
this.file = null;
|
|
|
|
this.saving = false;
|
|
|
|
this.$bus.$emit('WALLPAPER_UPLOADED');
|
|
|
|
})
|
2020-08-25 23:37:33 +00:00
|
|
|
.catch(() => {
|
|
|
|
this.saving = false;
|
|
|
|
this.$bvToast.toast('There was an error uploading wallpaper', { title: 'Error', variant: 'danger' });
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
confirmDeleteWallpaper(file) {
|
|
|
|
this.$bvModal.msgBoxConfirm('Wallpaper will be permanently removed', {
|
|
|
|
title: 'Are you sure you want to delete this file?',
|
|
|
|
okVariant: 'danger',
|
|
|
|
okTitle: 'Yes',
|
|
|
|
})
|
|
|
|
.then((value) => {
|
|
|
|
if (value) {
|
|
|
|
this.deleteFile(file);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
async deleteFile(file) {
|
|
|
|
await this.$store.dispatch('DELETE_WALLPAPER', file)
|
|
|
|
.catch(() => {
|
|
|
|
this.$bvToast.toast('There was an error deleting wallpaper', { title: 'Error', variant: 'danger' });
|
|
|
|
});
|
|
|
|
|
|
|
|
this.$bvToast.toast(file.name, { title: 'File deleted', variant: 'success' });
|
|
|
|
|
|
|
|
// const { board } = this;
|
|
|
|
// TODO: handle wallpapers in use
|
|
|
|
// if (board.wallpaper && this.board.wallpaper === file.path) {
|
|
|
|
// this.$bus.$emit('RELOAD_WALLPAPER');
|
|
|
|
// }
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" rel="stylesheet/scss" scoped>
|
|
|
|
.delete-file {
|
|
|
|
bottom: .5rem;
|
|
|
|
right: .5rem;
|
|
|
|
}
|
|
|
|
</style>
|