インポート/エクスポート設定を復活

src/client/pages/settings/import-export.vue

@@ -9,10 +9,9 @@
 			<option value="mute">{{ $t('_exportOrImport.muteList') }}</option>
 			<option value="blocking">{{ $t('_exportOrImport.blockingList') }}</option>
 		</MkSelect>
-		<MkButton inline @click="doExport()"><Fa :icon="faDownload"/> {{ $t('export') }}</MkButton>
+		<MkButton inline primary @click="doExport"><Fa :icon="faDownload"/> {{ $t('export') }}</MkButton>
-		<MkButton inline @click="doImport()" :disabled="!['following', 'user-lists'].includes(exportTarget)"><Fa :icon="faUpload"/> {{ $t('import') }}</MkButton>
+		<MkButton inline primary @click="doImport" :disabled="!['following', 'user-lists'].includes(exportTarget)"><Fa :icon="faUpload"/> {{ $t('import') }}</MkButton>
 	</div>
-	<input ref="file" type="file" style="display: none;" @change="onChangeFile"/>
 </section>
 </template>
 
@@ -21,8 +20,8 @@ import { defineComponent } from 'vue';
 import { faDownload, faUpload, faBoxes } from '@fortawesome/free-solid-svg-icons';
 import MkButton from '@/components/ui/button.vue';
 import MkSelect from '@/components/ui/select.vue';
-import { apiUrl } from '@/config';
 import * as os from '@/os';
+import { selectFile } from '@/scripts/select-file';
 
 export default defineComponent({
 	components: {
@@ -59,29 +58,9 @@ export default defineComponent({
 			});
 		},
 
-		doImport() {
+		async doImport(e) {
-			(this.$refs.file as any).click();
+			const file = await selectFile(e.currentTarget || e.target);
-		},
 			
-		onChangeFile() {
-			const [file] = Array.from((this.$refs.file as any).files);
-			
-			const data = new FormData();
-			data.append('file', file);
-			data.append('i', this.$store.state.i.token);
-
-			const promise = fetch(apiUrl + '/drive/files/create', {
-				method: 'POST',
-				body: data
-			})
-			.then(response => response.json())
-			.then(f => {
-				this.reqImport(f);
-			});
-			os.promiseDialog(promise);
-		},
-
-		reqImport(file) {
 			os.api(
 				this.exportTarget == 'following' ? 'i/import-following' :
 				this.exportTarget == 'user-lists' ? 'i/import-user-lists' :
@@ -98,7 +77,7 @@ export default defineComponent({
 					text: e.message
 				});
 			});
-		}
+		},
 	}
 });
 </script>

src/client/pages/settings/index.vue

@@ -20,6 +20,7 @@
 		</div>
 		<div class="menu">
 			<div class="label">{{ $t('otherSettings') }}</div>
+			<MkA class="item" :class="{ active: page === 'import-export' }" replace to="/settings/import-export"><Fa :icon="faBoxes" fixed-width class="icon"/>{{ $t('importAndExport') }}</MkA>
 			<MkA class="item" :class="{ active: page === 'mute-block' }" replace to="/settings/mute-block"><Fa :icon="faBan" fixed-width class="icon"/>{{ $t('muteAndBlock') }}</MkA>
 			<MkA class="item" :class="{ active: page === 'word-mute' }" replace to="/settings/word-mute"><Fa :icon="faCommentSlash" fixed-width class="icon"/>{{ $t('wordMute') }}</MkA>
 			<MkA class="item" :class="{ active: page === 'api' }" replace to="/settings/api"><Fa :icon="faKey" fixed-width class="icon"/>API</MkA>
@@ -39,7 +40,7 @@
 
 <script lang="ts">
 import { computed, defineAsyncComponent, defineComponent, onMounted, ref } from 'vue';
-import { faCog, faPalette, faPlug, faUser, faListUl, faLock, faCommentSlash, faMusic, faCogs, faEllipsisH, faBan, faShareAlt, faLockOpen, faKey } from '@fortawesome/free-solid-svg-icons';
+import { faCog, faPalette, faPlug, faUser, faListUl, faLock, faCommentSlash, faMusic, faCogs, faEllipsisH, faBan, faShareAlt, faLockOpen, faKey, faBoxes } from '@fortawesome/free-solid-svg-icons';
 import { faLaugh, faBell } from '@fortawesome/free-regular-svg-icons';
 import { store } from '@/store';
 import { i18n } from '@/i18n';
@@ -103,7 +104,7 @@ export default defineComponent({
 				store.dispatch('logout');
 				location.href = '/';
 			},
-			faPalette, faPlug, faUser, faListUl, faLock, faLaugh, faCommentSlash, faMusic, faBell, faCogs, faEllipsisH, faBan, faShareAlt, faLockOpen, faKey,
+			faPalette, faPlug, faUser, faListUl, faLock, faLaugh, faCommentSlash, faMusic, faBell, faCogs, faEllipsisH, faBan, faShareAlt, faLockOpen, faKey, faBoxes,
 		};
 	},
 });