feat(client): Implement default upload folder setting

Resolve #5985

6 files changed, 96 insertions, 34 deletions

diff --git a/src/client/components/drive-window.vue b/src/client/components/drive-window.vue
index 64c4cee0c1..d63881c0ed 100644
--- a/src/client/components/drive-window.vue
+++ b/src/client/components/drive-window.vue
@@ -1,8 +1,11 @@
 <template>
-<x-window ref="window" @closed="() => { $emit('closed'); destroyDom(); }" :with-ok-button="true" :ok-button-disabled="selected.length === 0" @ok="ok()">
-	<template #header>{{ multiple ? $t('selectFiles') : $t('selectFile') }}<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ selected.length | number }})</span></template>
+<x-window ref="window" :width="800" :height="500" @closed="() => { $emit('closed'); destroyDom(); }" :with-ok-button="true" :ok-button-disabled="(type === 'file') && (selected.length === 0)" @ok="ok()">
+	<template #header>
+		{{ multiple ? ((type === 'file') ? $t('selectFiles') : $t('selectFolders')) : ((type === 'file') ? $t('selectFile') : $t('selectFolder')) }}
+		<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ selected.length | number }})</span>
+	</template>
 	<div>
-		<x-drive :multiple="multiple" @change-selection="onChangeSelection" :select-mode="true"/>
+		<x-drive :multiple="multiple" @change-selection="onChangeSelection" :select="type"/>
 	</div>
 </x-window>
 </template>
@@ -25,7 +28,7 @@ export default Vue.extend({
 		type: {
 			type: String,
 			required: false,
-			default: undefined 
+			default: 'file' 
 		},
 		multiple: {
 			type: Boolean,
@@ -45,8 +48,8 @@ export default Vue.extend({
 			this.$refs.window.close();
 		},
 
-		onChangeSelection(files) {
-			this.selected = files;
+		onChangeSelection(xs) {
+			this.selected = xs;
 		}
 	}
 });
diff --git a/src/client/components/drive.file.vue b/src/client/components/drive.file.vue
index 014e1a6ca5..a547abf9a0 100644
--- a/src/client/components/drive.file.vue
+++ b/src/client/components/drive.file.vue
@@ -42,11 +42,20 @@ import { faDownload, faLink, faICursor, faTrashAlt } from '@fortawesome/free-sol
 export default Vue.extend({
 	i18n,
 
+	components: {
+		XFileThumbnail
+	},
+
 	props: {
 		file: {
 			type: Object,
 			required: true,
 		},
+		isSelected: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
 		selectMode: {
 			type: Boolean,
 			required: false,
@@ -54,10 +63,6 @@ export default Vue.extend({
 		}
 	},
 
-	components: {
-		XFileThumbnail
-	},
-
 	data() {
 		return {
 			isDragging: false
@@ -65,12 +70,10 @@ export default Vue.extend({
 	},
 
 	computed: {
+		// TODO: parentへの参照を無くす
 		browser(): any {
 			return this.$parent;
 		},
-		isSelected(): boolean {
-			return this.browser.selectedFiles.some(f => f.id == this.file.id);
-		},
 		title(): string {
 			return `${this.file.name}\n${this.file.type} ${Vue.filter('bytes')(this.file.size)}`;
 		}
@@ -79,7 +82,7 @@ export default Vue.extend({
 	methods: {
 		onClick(ev) {
 			if (this.selectMode) {
-				this.browser.chooseFile(this.file);
+				this.$emit('chosen', this.file);
 			} else {
 				this.$root.menu({
 					items: [{
diff --git a/src/client/components/drive.folder.vue b/src/client/components/drive.folder.vue
index 2e861e2480..b778acc77f 100644
--- a/src/client/components/drive.folder.vue
+++ b/src/client/components/drive.folder.vue
@@ -21,6 +21,7 @@
 	<p class="upload" v-if="$store.state.settings.uploadFolder == folder.id">
 		{{ $t('uploadFolder') }}
 	</p>
+	<button v-if="selectMode" class="checkbox _button" :class="{ checked: isSelected }" @click.prevent.stop="checkboxClicked"></button>
 </div>
 </template>
 
@@ -36,6 +37,16 @@ export default Vue.extend({
 		folder: {
 			type: Object,
 			required: true,
+		},
+		isSelected: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+		selectMode: {
+			type: Boolean,
+			required: false,
+			default: false,
 		}
 	},
 
@@ -56,7 +67,12 @@ export default Vue.extend({
 			return this.folder.name;
 		}
 	},
+
 	methods: {
+		checkboxClicked(e) {
+			this.$emit('chosen', this.folder);
+		},
+
 		onClick() {
 			this.browser.move(this.folder);
 		},
@@ -241,10 +257,24 @@ export default Vue.extend({
 		cursor: pointer;
 	}
 
-	* {
+	*:not(.checkbox) {
 		pointer-events: none;
 	}
 
+	> .checkbox {
+		position: absolute;
+		bottom: 8px;
+		right: 8px;
+		width: 16px;
+		height: 16px;
+		background: #fff;
+		border: solid 1px #000;
+
+		&.checked {
+			background: var(--accent);
+		}
+	}
+
 	&[data-draghover] {
 		&:after {
 			content: "";
diff --git a/src/client/components/drive.vue b/src/client/components/drive.vue
index fddac5b9aa..08c7097a8f 100644
--- a/src/client/components/drive.vue
+++ b/src/client/components/drive.vue
@@ -3,9 +3,9 @@
 	<nav>
 		<div class="path" @contextmenu.prevent.stop="() => {}">
 			<x-nav-folder :class="{ current: folder == null }"/>
-			<template v-for="folder in hierarchyFolders">
-				<span class="separator"><fa :icon="faAngleRight"/></span>
-				<x-nav-folder :folder="folder" :key="folder.id"/>
+			<template v-for="f in hierarchyFolders">
+				<span class="separator" :key="f.id + ':separator'"><fa :icon="faAngleRight"/></span>
+				<x-nav-folder :folder="f" :key="f.id"/>
 			</template>
 			<span class="separator" v-if="folder != null"><fa :icon="faAngleRight"/></span>
 			<span class="folder current" v-if="folder != null">{{ folder.name }}</span>
@@ -20,15 +20,15 @@
 	>
 		<div class="contents" ref="contents">
 			<div class="folders" ref="foldersContainer" v-if="folders.length > 0">
-				<x-folder v-for="folder in folders" :key="folder.id" class="folder" :folder="folder"/>
+				<x-folder v-for="f in folders" :key="f.id" class="folder" :folder="f" :select-mode="select === 'folder'" :is-selected="selectedFolders.some(x => x.id === f.id)" @chosen="chooseFolder"/>
 				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
-				<div class="padding" v-for="n in 16"></div>
+				<div class="padding" v-for="(n, i) in 16" :key="i"></div>
 				<mk-button v-if="moreFolders">{{ $t('loadMore') }}</mk-button>
 			</div>
 			<div class="files" ref="filesContainer" v-if="files.length > 0">
-				<x-file v-for="file in files" :key="file.id" class="file" :file="file" :select-mode="selectMode"/>
+				<x-file v-for="file in files" :key="file.id" class="file" :file="file" :select-mode="select === 'file'" :is-selected="selectedFiles.some(x => x.id === file.id)" @chosen="chooseFile"/>
 				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
-				<div class="padding" v-for="n in 16"></div>
+				<div class="padding" v-for="(n, i) in 16" :key="i"></div>
 				<mk-button v-if="moreFiles" @click="fetchMoreFiles">{{ $t('loadMore') }}</mk-button>
 			</div>
 			<div class="empty" v-if="files.length == 0 && folders.length == 0 && !fetching">
@@ -81,10 +81,10 @@ export default Vue.extend({
 			required: false,
 			default: false
 		},
-		selectMode: {
-			type: Boolean,
+		select: {
+			type: String,
 			required: false,
-			default: false
+			default: null
 		}
 	},
 
@@ -102,6 +102,7 @@ export default Vue.extend({
 			moreFolders: false,
 			hierarchyFolders: [],
 			selectedFiles: [],
+			selectedFolders: [],
 			uploadings: [],
 			connection: null,
 
@@ -392,6 +393,25 @@ export default Vue.extend({
 			}
 		},
 
+		chooseFolder(folder) {
+			const isAlreadySelected = this.selectedFolders.some(f => f.id == folder.id);
+			if (this.multiple) {
+				if (isAlreadySelected) {
+					this.selectedFolders = this.selectedFolders.filter(f => f.id != folder.id);
+				} else {
+					this.selectedFolders.push(folder);
+				}
+				this.$emit('change-selection', this.selectedFolders);
+			} else {
+				if (isAlreadySelected) {
+					this.$emit('selected', folder);
+				} else {
+					this.selectedFolders = [folder];
+					this.$emit('change-selection', [folder]);
+				}
+			}
+		},
+
 		move(target) {
 			if (target == null) {
 				this.goRoot();
diff --git a/src/client/components/page/page.post.vue b/src/client/components/page/page.post.vue
index 9942a68d55..6f79374f34 100644
--- a/src/client/components/page/page.post.vue
+++ b/src/client/components/page/page.post.vue
@@ -58,6 +58,9 @@ export default Vue.extend({
 					const data = new FormData();
 					data.append('file', blob);
 					data.append('i', this.$store.state.i.token);
+					if (this.$store.state.settings.uploadFolder) {
+						data.append('folderId', this.$store.state.settings.uploadFolder);
+					}
 
 					fetch(apiUrl + '/drive/files/create', {
 						method: 'POST',
diff --git a/src/client/components/window.vue b/src/client/components/window.vue
index bfdabee059..0b2ba248bf 100644
--- a/src/client/components/window.vue
+++ b/src/client/components/window.vue
@@ -1,6 +1,6 @@
 <template>
 <x-modal ref="modal" @closed="() => { $emit('closed'); destroyDom(); }">
-	<div class="ebkgoccj" :class="{ noPadding }" @keydown="onKeydown">
+	<div class="ebkgoccj" :class="{ noPadding }" @keydown="onKeydown" :style="{ width: `${width}px`, height: `${height}px` }">
 		<div class="header">
 			<button class="_button" v-if="withOkButton" @click="close()"><fa :icon="faTimes"/></button>
 			<span class="title">
@@ -49,7 +49,17 @@ export default Vue.extend({
 			type: Boolean,
 			required: false,
 			default: false
-		}
+		},
+		width: {
+			type: Number,
+			required: false,
+			default: 400
+		},
+		height: {
+			type: Number,
+			required: false,
+			default: 400
+		},
 	},
 
 	data() {
@@ -76,19 +86,12 @@ export default Vue.extend({
 
 <style lang="scss" scoped>
 .ebkgoccj {
-	width: 400px;
-	height: 400px;
 	background: var(--panel);
 	border-radius: var(--radius);
 	overflow: hidden;
 	display: flex;
 	flex-direction: column;
 
-	@media (max-width: 500px) {
-		width: 350px;
-		height: 350px;
-	}
-
 	> .header {
 		$height: 58px;
 		$height-narrow: 42px;