feat(client): Implement default upload folder setting

Resolve #5985

locales/ja-JP.yml

@@ -239,6 +239,8 @@ drive: "ドライブ"
 fileName: "ファイル名"
 selectFile: "ファイルを選択"
 selectFiles: "ファイルを選択"
+selectFolder: "フォルダーを選択"
+selectFolders: "フォルダーを選択"
 renameFile: "ファイル名を変更"
 folderName: "フォルダー名"
 createFolder: "フォルダーを作成"

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()">
+<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 ? $t('selectFiles') : $t('selectFile') }}<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ selected.length | number }})</span></template>
+	<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) {
+		onChangeSelection(xs) {
-			this.selected = files;
+			this.selected = xs;
 		}
 	}
 });

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: [{

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: "";

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">
+			<template v-for="f in hierarchyFolders">
-				<span class="separator"><fa :icon="faAngleRight"/></span>
+				<span class="separator" :key="f.id + ':separator'"><fa :icon="faAngleRight"/></span>
-				<x-nav-folder :folder="folder" :key="folder.id"/>
+				<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: {
+		select: {
-			type: Boolean,
+			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();

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',

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;

src/client/pages/my-settings/drive.vue

@@ -2,107 +2,57 @@
 <section class="uawsfosz _card">
 	<div class="_title"><fa :icon="faCloud"/> {{ $t('drive') }}</div>
 	<div class="_content">
-		<mk-pagination :pagination="drivePagination" #default="{items}" class="drive" ref="drive">
+		<span>{{ $t('uploadFolder') }}: {{ uploadFolder ? uploadFolder.name : '-' }}</span>
-			<div class="file" v-for="(file, i) in items" :key="file.id" @click="selected = file" :class="{ selected: selected && (selected.id === file.id) }">
+		<mk-button primary @click="chooseUploadFolder()"><fa :icon="faFolderOpen"/> {{ $t('selectFolder') }}</mk-button>
-				<x-file-thumbnail class="thumbnail" :file="file" fit="cover"/>
-				<div class="body">
-					<p class="name">
-						<span>{{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }}</span>
-						<span class="ext" v-if="file.name.lastIndexOf('.') != -1">{{ file.name.substr(file.name.lastIndexOf('.')) }}</span>
-					</p>
-					<footer>
-						<span class="type"><x-file-type-icon :type="file.type" class="icon"/>{{ file.type }}</span>
-						<span class="separator"></span>
-						<span class="data-size">{{ file.size | bytes }}</span>
-						<span class="separator"></span>
-						<span class="created-at"><fa :icon="faClock"/><mk-time :time="file.createdAt"/></span>
-						<template v-if="file.isSensitive">
-							<span class="separator"></span>
-							<span class="nsfw"><fa :icon="faEyeSlash"/> {{ $t('nsfw') }}</span>
-						</template>
-					</footer>
-				</div>
-			</div>
-		</mk-pagination>
-	</div>
-	<div class="_footer">
-		<mk-button primary inline :disabled="selected == null" @click="download()"><fa :icon="faDownload"/> {{ $t('download') }}</mk-button>
-		<mk-button inline :disabled="selected == null" @click="del()"><fa :icon="faTrashAlt"/> {{ $t('delete') }}</mk-button>
 	</div>
 </section>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import { faCloud, faDownload } from '@fortawesome/free-solid-svg-icons';
+import { faCloud, faFolderOpen } from '@fortawesome/free-solid-svg-icons';
 import { faClock, faEyeSlash, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
-import XFileTypeIcon from '../../components/file-type-icon.vue';
-import XFileThumbnail from '../../components/drive-file-thumbnail.vue';
 import MkButton from '../../components/ui/button.vue';
-import MkPagination from '../../components/ui/pagination.vue';
 import i18n from '../../i18n';
+import { selectDriveFolder } from '../../scripts/select-drive-folder';
 
 export default Vue.extend({
 	i18n,
 
 	components: {
-		XFileTypeIcon,
-		XFileThumbnail,
-		MkPagination,
 		MkButton,
 	},
 
 	data() {
 		return {
-			selected: null,
+			uploadFolder: null,
-			connection: null,
+			faCloud, faClock, faEyeSlash, faFolderOpen, faTrashAlt
-			drivePagination: {
-				endpoint: 'drive/files',
-				limit: 10,
-			},
-			faCloud, faClock, faEyeSlash, faDownload, faTrashAlt
 		}
 	},
 
-	created() {
+	async created() {
-		this.connection = this.$root.stream.useSharedConnection('drive');
+		if (this.$store.state.settings.uploadFolder) {
-
+			this.uploadFolder = await this.$root.api('drive/folders/show', {
-		this.connection.on('fileCreated', this.onStreamDriveFileCreated);
+				folderId: this.$store.state.settings.uploadFolder
-		this.connection.on('fileUpdated', this.onStreamDriveFileUpdated);
+			});
-		this.connection.on('fileDeleted', this.onStreamDriveFileDeleted);
+		}
-	},
-
-	beforeDestroy() {
-		this.connection.dispose();
 	},
 
 	methods: {
-		onStreamDriveFileCreated(file) {
+		chooseUploadFolder() {
-			this.$refs.drive.prepend(file);
+			selectDriveFolder(this.$root, false).then(async folder => {
-		},
+				await this.$store.dispatch('settings/set', { key: 'uploadFolder', value: folder ? folder.id : null });
-
+				this.$root.dialog({
-		onStreamDriveFileUpdated(file) {
+					type: 'success',
-			// TODO
+					iconOnly: true, autoClose: true
-		},
-
-		onStreamDriveFileDeleted(fileId) {
-			this.$refs.drive.remove(x => x.id === fileId);
-		},
-
-		download() {
-			window.open(this.selected.url, '_blank');
-		},
-
-		async del() {
-			const { canceled } = await this.$root.dialog({
-				type: 'warning',
-				text: this.$t('driveFileDeleteConfirm', { name: this.selected.name }),
-				showCancelButton: true
 				});
-			if (canceled) return;
+				if (this.$store.state.settings.uploadFolder) {
-
+					this.uploadFolder = await this.$root.api('drive/folders/show', {
-			this.$root.api('drive/files/delete', {
+						folderId: this.$store.state.settings.uploadFolder
-				fileId: this.selected.id
+					});
+				} else {
+					this.uploadFolder = null;
+				}
 			});
 		}
 	}
@@ -111,102 +61,6 @@ export default Vue.extend({
 
 <style lang="scss" scoped>
 .uawsfosz {
-	> ._content {
-		max-height: 350px;
-		overflow: auto;
 
-		> .drive {
-			> .file {
-				display: grid;
-				margin: 0 auto;
-				grid-template-columns: 64px 1fr;
-				grid-column-gap: 10px;
-				cursor: pointer;
-
-				&.selected {
-					background: var(--accent);
-					box-shadow: 0 0 0 8px var(--accent);
-					color: #fff;
-				}
-
-				&:not(:last-child) {
-					margin-bottom: 16px;
-				}
-
-				> .thumbnail {
-					width: 64px;
-					height: 64px;
-				}
-
-				> .body {
-					display: block;
-					word-break: break-all;
-					padding-top: 4px;
-
-					> .name {
-						display: block;
-						margin: 0;
-						padding: 0;
-						font-size: 0.9em;
-						font-weight: bold;
-						word-break: break-word;
-
-						> .ext {
-							opacity: 0.5;
-						}
-					}
-
-					> .tags {
-						display: block;
-						margin: 4px 0 0 0;
-						padding: 0;
-						list-style: none;
-						font-size: 0.5em;
-
-						> .tag {
-							display: inline-block;
-							margin: 0 5px 0 0;
-							padding: 1px 5px;
-							border-radius: 2px;
-						}
-					}
-
-					> footer {
-						display: block;
-						margin: 4px 0 0 0;
-						font-size: 0.7em;
-
-						> .separator {
-							padding: 0 4px;
-						}
-
-						> .type {
-							opacity: 0.7;
-
-							> .icon {
-								margin-right: 4px;
-							}
-						}
-
-						> .data-size {
-							opacity: 0.7;
-						}
-
-						> .created-at {
-							opacity: 0.7;
-
-							> [data-icon] {
-								margin-right: 2px;
-							}
-						}
-
-						> .nsfw {
-							color: #bf4633;
-						}
-					}
-				}
-			}
-		}
-	}
 }
 </style>

src/client/scripts/select-drive-file.ts

@@ -3,6 +3,7 @@ import DriveWindow from '../components/drive-window.vue';
 export function selectDriveFile($root: any, multiple) {
 	return new Promise((res, rej) => {
 		const w = $root.new(DriveWindow, {
+			type: 'file',
 			multiple
 		});
 		w.$once('selected', files => {

src/client/scripts/select-drive-folder.ts

@@ -0,0 +1,13 @@
+import DriveWindow from '../components/drive-window.vue';
+
+export function selectDriveFolder($root: any, multiple) {
+	return new Promise((res, rej) => {
+		const w = $root.new(DriveWindow, {
+			type: 'folder',
+			multiple
+		});
+		w.$once('selected', folders => {
+			res(multiple ? folders : (folders.length === 0 ? null : folders[0]));
+		});
+	});
+}

webpack.config.ts

@@ -135,7 +135,7 @@ module.exports = {
 	output: {
 		path: __dirname + '/built/client/assets',
 		filename: `[name].${meta.version}.js`,
-		chunkFilename: '[hash:5].[id].js',
+		chunkFilename: '[fullhash].[id].js',
 		publicPath: `/assets/`
 	},
 	resolve: {
@@ -155,7 +155,7 @@ module.exports = {
 	optimization: {
 		minimizer: [new TerserPlugin()]
 	},
-	cache: true,
+	cache: false,
 	devtool: false, //'source-map',
 	mode: isProduction ? 'production' : 'development'
 };