From 45897dd1378dd38203e0366e1340ed874f054c81 Mon Sep 17 00:00:00 2001
From: MeiMei <30769358+mei23@users.noreply.github.com>
Date: Thu, 22 Aug 2019 18:33:50 +0900
Subject: [PATCH] =?UTF-8?q?Room=E3=81=A7=E6=9C=AA=E4=BF=9D=E5=AD=98?=
 =?UTF-8?q?=E8=AD=A6=E5=91=8A=E3=83=80=E3=82=A4=E3=82=A2=E3=83=AD=E3=82=B0?=
 =?UTF-8?q?=E3=81=AA=E3=81=A9=E3=82=92=E8=BF=BD=E5=8A=A0=20(#5332)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Room保存時にダイアログを表示するように

* Roomから移動するときに未保存ならば警告するように
---
 locales/ja-JP.yml                             |  2 +
 .../app/common/views/pages/room/room.vue      | 52 ++++++++++++++++++-
 2 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 31d51c25f..70192a55c 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -2300,8 +2300,10 @@ room:
   exit: "戻る"
   remove: "しまう"
   save: "保存"
+  saved: "保存しました"
   clear: "片付け"
   clear-confirm: "全ての家具をしまいますか？"
+  leave-confirm: "未保存の変更があります、移動しますか？"
   chooseImage: "画像を選択"
   room-type: "部屋のタイプ"
   carpet-color: "床の色"
diff --git a/src/client/app/common/views/pages/room/room.vue b/src/client/app/common/views/pages/room/room.vue
index 2456f8f8e..1e81920c2 100644
--- a/src/client/app/common/views/pages/room/room.vue
+++ b/src/client/app/common/views/pages/room/room.vue
@@ -42,7 +42,7 @@
 			</label>
 		</section>
 		<section>
-			<ui-button primary @click="save()"><fa :icon="faSave"/> {{ $t('save') }}</ui-button>
+			<ui-button :primary="changed" @click="save()"><fa :icon="faSave"/> {{ $t('save') }}</ui-button>
 			<ui-button @click="clear()"><fa :icon="faBroom"/> {{ $t('clear') }}</ui-button>
 		</section>
 	</div>
@@ -87,11 +87,14 @@ export default Vue.extend({
 			isTranslateMode: false,
 			isRotateMode: false,
 			isMyRoom: false,
+			changed: false,
 			faBoxOpen, faSave, faTrashAlt, faUndo, faArrowsAlt, faBan, faBroom,
 		};
 	},
 
 	async mounted() {
+		window.addEventListener('beforeunload', this.beforeunload);
+
 		const user = await this.$root.api('users/show', {
 			...parseAcct(this.acct)
 		});
@@ -125,11 +128,37 @@ export default Vue.extend({
 		});
 	},
 
+	beforeRouteLeave(to, from, next) {
+		if (this.changed) {
+			this.$root.dialog({
+				type: 'warning',
+				text: this.$t('leave-confirm'),
+				showCancelButton: true
+			}).then(({ canceled }) => {
+				if (canceled) {
+					next(false);
+				} else {
+					next();
+				}
+			});
+		} else {
+			next();
+		}
+	},
+
 	beforeDestroy() {
 		room.destroy();
+		window.removeEventListener('beforeunload', this.beforeunload);
 	},
 
 	methods: {
+		beforeunload(e: BeforeUnloadEvent) {
+			if (this.changed) {
+				e.preventDefault();
+				e.returnValue = '';
+			}
+		},
+
 		async add() {
 			const { canceled, result: id } = await this.$root.dialog({
 				type: null,
@@ -143,17 +172,30 @@ export default Vue.extend({
 			});
 			if (canceled) return;
 			room.addFurniture(id);
+			this.changed = true;
 		},
 
 		remove() {
 			this.isTranslateMode = false;
 			this.isRotateMode = false;
 			room.removeFurniture();
+			this.changed = true;
 		},
 
 		save() {
 			this.$root.api('room/update', {
 				room: room.getRoomInfo()
+			}).then(() => {
+				this.changed = false;
+				this.$root.dialog({
+					type: 'success',
+					text: this.$t('saved')
+				});
+			}).catch((e: any) => {
+				this.$root.dialog({
+					type: 'error',
+					text: e.message
+				});
 			});
 		},
 
@@ -165,6 +207,7 @@ export default Vue.extend({
 			}).then(({ canceled }) => {
 				if (canceled) return;
 				room.removeAllFurnitures();
+				this.changed = true;
 			});
 		},
 
@@ -174,22 +217,26 @@ export default Vue.extend({
 			}).then(file => {
 				room.updateProp(key, `/proxy/?${urlQuery({ url: file.thumbnailUrl })}`);
 				this.$refs.preview.selected(room.getSelectedObject());
+				this.changed = true;
 			});
 		},
 
 		updateColor(key, ev) {
 			room.updateProp(key, ev.target.value);
 			this.$refs.preview.selected(room.getSelectedObject());
+			this.changed = true;
 		},
 
 		updateCarpetColor(ev) {
 			room.updateCarpetColor(ev.target.value);
 			this.carpetColor = ev.target.value;
+			this.changed = true;
 		},
 
 		updateRoomType(type) {
 			room.changeRoomType(type);
 			this.roomType = type;
+			this.changed = true;
 		},
 
 		translate() {
@@ -200,6 +247,7 @@ export default Vue.extend({
 				this.isTranslateMode = true;
 				room.enterTransformMode('translate');
 			}
+			this.changed = true;
 		},
 
 		rotate() {
@@ -210,12 +258,14 @@ export default Vue.extend({
 				this.isRotateMode = true;
 				room.enterTransformMode('rotate');
 			}
+			this.changed = true;
 		},
 
 		exit() {
 			this.isTranslateMode = false;
 			this.isRotateMode = false;
 			room.exitTransformMode();
+			this.changed = true;
 		}
 	}
 });