List Background upload (#151)

Formatting

Show loading if a file is uploading

Only show image files in upload

Hide background settings if none are available

Fix showing uploaded background after uploading a new one

Add background upload

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/151

src/components/lists/settings/background.vue

@@ -1,7 +1,7 @@
 <template>
 	<div
-			v-if="unsplashBackgroundEnabled"
 			class="card list-background-setting loader-container"
+			v-if="uploadBackgroundEnabled || unsplashBackgroundEnabled"
 			:class="{ 'is-loading': backgroundService.loading}">
 		<header class="card-header">
 			<p class="card-header-title">
@@ -9,7 +9,23 @@
 			</p>
 		</header>
 		<div class="card-content">
-			<div class="content">
+			<div class="content" v-if="uploadBackgroundEnabled">
+				<input
+						type="file"
+						ref="backgroundUploadInput"
+						@change="uploadBackground"
+						class="is-hidden"
+						accept="image/*"
+				/>
+				<a
+						class="button is-primary"
+						:class="{'is-loading': backgroundUploadService.loading}"
+						@click="$refs.backgroundUploadInput.click()"
+				>
+					Choose a background from your pc
+				</a>
+			</div>
+			<div class="content" v-if="unsplashBackgroundEnabled">
 				<input
 						type="text"
 						placeholder="Search for a background..."
@@ -51,6 +67,7 @@
 
 <script>
 	import BackgroundUnsplashService from '../../../services/backgroundUnsplash'
+	import BackgroundUploadService from '../../../services/backgroundUpload'
 	import {CURRENT_LIST} from '../../../store/mutation-types'
 
 	export default {
@@ -63,6 +80,8 @@
 				backgroundThumbs: {},
 				currentPage: 1,
 				backgroundSearchTimeout: null,
+
+				backgroundUploadService: null,
 			}
 		},
 		props: {
@@ -75,9 +94,13 @@
 			unsplashBackgroundEnabled() {
 				return this.$store.state.config.enabledBackgroundProviders.includes('unsplash')
 			},
+			uploadBackgroundEnabled() {
+				return this.$store.state.config.enabledBackgroundProviders.includes('upload')
+			},
 		},
 		created() {
 			this.backgroundService = new BackgroundUnsplashService()
+			this.backgroundUploadService = new BackgroundUploadService()
 			// Show the default collection of backgrounds
 			this.newBackgroundSearch()
 		},
@@ -93,7 +116,7 @@
 			},
 			searchBackgrounds(page = 1) {
 
-				if(this.backgroundSearchTimeout !== null) {
+				if (this.backgroundSearchTimeout !== null) {
 					clearTimeout(this.backgroundSearchTimeout)
 				}
 
@@ -131,6 +154,20 @@
 						this.error(e, this)
 					})
 			},
+			uploadBackground() {
+				if (this.$refs.backgroundUploadInput.files.length === 0) {
+					return
+				}
+
+				this.backgroundUploadService.create(this.listId, this.$refs.backgroundUploadInput.files[0])
+					.then(l => {
+						this.$store.commit(CURRENT_LIST, l)
+						this.success({message: 'The background has been set successfully!'}, this)
+					})
+					.catch(e => {
+						this.error(e, this)
+					})
+			},
 		},
 	}
 </script>

src/services/backgroundUpload.js

@@ -0,0 +1,57 @@
+import AbstractService from './abstractService'
+import ListModel from '../models/list'
+
+export default class BackgroundUploadService extends AbstractService {
+	constructor() {
+		super({
+			create: '/lists/{listId}/backgrounds/upload',
+		})
+	}
+
+	uploadProgress = 0
+
+	useCreateInterceptor() {
+		return false
+	}
+
+	modelCreateFactory(data) {
+		return new ListModel(data)
+	}
+
+	/**
+	 * Uploads a file to the server
+	 * @param listId
+	 * @param file
+	 * @returns {Promise<any|never>}
+	 */
+	create(listId, file) {
+
+		let data = new FormData()
+		data.append('background', new Blob([file]), file.name);
+
+		const cancel = this.setLoading()
+		return this.http.put(
+			this.getReplacedRoute(this.paths.create, {listId: listId}),
+			data,
+			{
+				headers: {
+					'Content-Type':
+						'multipart/form-data; boundary=' + data._boundary,
+				},
+				onUploadProgress: progressEvent => {
+					this.uploadProgress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+				}
+			}
+		)
+			.catch(error => {
+				return this.errorHandler(error)
+			})
+			.then(response => {
+				return Promise.resolve(this.modelCreateFactory(response.data))
+			})
+			.finally(() => {
+				this.uploadProgress = 0
+				cancel()
+			})
+	}
+}

src/store/index.js

@@ -61,6 +61,14 @@ export const store = new Vuex.Store({
 					state.currentList.backgroundInformation &&
 					state.currentList.backgroundInformation.unsplashId &&
 					currentList.backgroundInformation.unsplashId !== state.currentList.backgroundInformation.unsplashId
+				) ||
+				// The new list has a background which is not an unsplash one and did not have one previously
+				(
+					currentList.backgroundInformation &&
+					currentList.backgroundInformation.type &&
+					state.currentList &&
+					state.currentList.backgroundInformation &&
+					state.currentList.backgroundInformation.type
 				)
 			) {
 				if (currentList.backgroundInformation) {