Roomで未保存警告ダイアログなどを追加 (#5332)

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

* Roomから移動するときに未保存ならば警告するように
This commit is contained in:
MeiMei 2019-08-22 18:33:50 +09:00 committed by syuilo
parent a39c1706a1
commit 0638b6cb69
2 changed files with 53 additions and 1 deletions

View File

@ -2300,8 +2300,10 @@ room:
exit: "戻る"
remove: "しまう"
save: "保存"
saved: "保存しました"
clear: "片付け"
clear-confirm: "全ての家具をしまいますか?"
leave-confirm: "未保存の変更があります、移動しますか?"
chooseImage: "画像を選択"
room-type: "部屋のタイプ"
carpet-color: "床の色"

View File

@ -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;
}
}
});