Fix banner selection from user page and drives
Previously, updateBanner takes a callback as a first argument of the function, but some calls passes a file object. I've refactored it with Promise to avoid those misuses (although it should have type definitions :/)
This commit is contained in:
		
							parent
							
								
									2ce9ea2eda
								
							
						
					
					
						commit
						8a37227907
					
				
					 2 changed files with 30 additions and 24 deletions
				
			
		| 
						 | 
					@ -3,9 +3,9 @@ import { apiUrl } from '../../config';
 | 
				
			||||||
import CropWindow from '../views/components/crop-window.vue';
 | 
					import CropWindow from '../views/components/crop-window.vue';
 | 
				
			||||||
import ProgressDialog from '../views/components/progress-dialog.vue';
 | 
					import ProgressDialog from '../views/components/progress-dialog.vue';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export default (os: OS) => (cb, file = null) => {
 | 
					export default (os: OS) => {
 | 
				
			||||||
	const fileSelected = file => {
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
						const cropImage = file => new Promise((resolve, reject) => {
 | 
				
			||||||
		const w = new CropWindow({
 | 
							const w = new CropWindow({
 | 
				
			||||||
			propsData: {
 | 
								propsData: {
 | 
				
			||||||
				image: file,
 | 
									image: file,
 | 
				
			||||||
| 
						 | 
					@ -26,22 +26,24 @@ export default (os: OS) => (cb, file = null) => {
 | 
				
			||||||
					os.api('drive/folders/create', {
 | 
										os.api('drive/folders/create', {
 | 
				
			||||||
						name: 'バナー'
 | 
											name: 'バナー'
 | 
				
			||||||
					}).then(iconFolder => {
 | 
										}).then(iconFolder => {
 | 
				
			||||||
						upload(data, iconFolder);
 | 
											resolve(upload(data, iconFolder));
 | 
				
			||||||
					});
 | 
										});
 | 
				
			||||||
				} else {
 | 
									} else {
 | 
				
			||||||
					upload(data, bannerFolder[0]);
 | 
										resolve(upload(data, bannerFolder[0]));
 | 
				
			||||||
				}
 | 
									}
 | 
				
			||||||
			});
 | 
								});
 | 
				
			||||||
		});
 | 
							});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		w.$once('skipped', () => {
 | 
							w.$once('skipped', () => {
 | 
				
			||||||
			set(file);
 | 
								resolve(file);
 | 
				
			||||||
		});
 | 
							});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		document.body.appendChild(w.$el);
 | 
							w.$once('cancelled', reject);
 | 
				
			||||||
	};
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
	const upload = (data, folder) => {
 | 
							document.body.appendChild(w.$el);
 | 
				
			||||||
 | 
						});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
						const upload = (data, folder) => new Promise((resolve, reject) => {
 | 
				
			||||||
		const dialog = new ProgressDialog({
 | 
							const dialog = new ProgressDialog({
 | 
				
			||||||
			propsData: {
 | 
								propsData: {
 | 
				
			||||||
				title: '新しいバナーをアップロードしています'
 | 
									title: '新しいバナーをアップロードしています'
 | 
				
			||||||
| 
						 | 
					@ -56,18 +58,19 @@ export default (os: OS) => (cb, file = null) => {
 | 
				
			||||||
		xhr.onload = e => {
 | 
							xhr.onload = e => {
 | 
				
			||||||
			const file = JSON.parse((e.target as any).response);
 | 
								const file = JSON.parse((e.target as any).response);
 | 
				
			||||||
			(dialog as any).close();
 | 
								(dialog as any).close();
 | 
				
			||||||
			set(file);
 | 
								resolve(file);
 | 
				
			||||||
		};
 | 
							};
 | 
				
			||||||
 | 
							xhr.onerror = reject;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		xhr.upload.onprogress = e => {
 | 
							xhr.upload.onprogress = e => {
 | 
				
			||||||
			if (e.lengthComputable) (dialog as any).update(e.loaded, e.total);
 | 
								if (e.lengthComputable) (dialog as any).update(e.loaded, e.total);
 | 
				
			||||||
		};
 | 
							};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		xhr.send(data);
 | 
							xhr.send(data);
 | 
				
			||||||
	};
 | 
						});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	const set = file => {
 | 
						const setBanner = file => {
 | 
				
			||||||
		os.api('i/update', {
 | 
							return os.api('i/update', {
 | 
				
			||||||
			bannerId: file.id
 | 
								bannerId: file.id
 | 
				
			||||||
		}).then(i => {
 | 
							}).then(i => {
 | 
				
			||||||
			os.i.bannerId = i.bannerId;
 | 
								os.i.bannerId = i.bannerId;
 | 
				
			||||||
| 
						 | 
					@ -81,18 +84,21 @@ export default (os: OS) => (cb, file = null) => {
 | 
				
			||||||
				}]
 | 
									}]
 | 
				
			||||||
			});
 | 
								});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
			if (cb) cb(i);
 | 
								return i;
 | 
				
			||||||
		});
 | 
							});
 | 
				
			||||||
	};
 | 
						};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	if (file) {
 | 
						return (file = null) => {
 | 
				
			||||||
		fileSelected(file);
 | 
							const selectedFile = file
 | 
				
			||||||
	} else {
 | 
								? Promise.resolve(file)
 | 
				
			||||||
		os.apis.chooseDriveFile({
 | 
								: os.apis.chooseDriveFile({
 | 
				
			||||||
			multiple: false,
 | 
									multiple: false,
 | 
				
			||||||
			title: '%fa:image%バナーにする画像を選択'
 | 
									title: '%fa:image%バナーにする画像を選択'
 | 
				
			||||||
		}).then(file => {
 | 
								});
 | 
				
			||||||
			fileSelected(file);
 | 
							
 | 
				
			||||||
		});
 | 
							return selectedFile
 | 
				
			||||||
	}
 | 
								.then(cropImage)
 | 
				
			||||||
 | 
								.then(setBanner)
 | 
				
			||||||
 | 
								.catch(err => err && console.warn(err));
 | 
				
			||||||
 | 
						};
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -62,7 +62,7 @@ export default Vue.extend({
 | 
				
			||||||
		onBannerClick() {
 | 
							onBannerClick() {
 | 
				
			||||||
			if (!(this as any).os.isSignedIn || (this as any).os.i.id != this.user.id) return;
 | 
								if (!(this as any).os.isSignedIn || (this as any).os.i.id != this.user.id) return;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
			(this as any).apis.updateBanner((this as any).os.i, i => {
 | 
								(this as any).apis.updateBanner().then(i => {
 | 
				
			||||||
				this.user.bannerUrl = i.bannerUrl;
 | 
									this.user.bannerUrl = i.bannerUrl;
 | 
				
			||||||
			});
 | 
								});
 | 
				
			||||||
		}
 | 
							}
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue