From 63dfef96fadd0f3ef431a399faa6390b28c151fa Mon Sep 17 00:00:00 2001
From: fs5m8 <fsco3092@protonmail.com>
Date: Mon, 5 Dec 2022 14:13:31 +0900
Subject: [PATCH] fix: widget/stickynote - save immediately

---
 locales/en-US.yml                            |  3 +-
 locales/ja-JP.yml                            |  3 +-
 src/client/app/common/views/widgets/memo.vue | 71 ++++----------------
 3 files changed, 16 insertions(+), 61 deletions(-)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index e879d3e834..856d1395a3 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -897,8 +897,7 @@ common/views/widgets/server.vue:
   toggle: "Toggle views"
 common/views/widgets/memo.vue:
   title: "Sticky note"
-  memo: "Write here!"
-  save: "Save"
+  placeholder: "Write here"
 common/views/widgets/slideshow.vue:
   folder-customize-mode: "To specify a folder, please exit customization mode"
   folder: "Please click and specify a folder"
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 87ae67c1e9..99688c5c3b 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -971,8 +971,7 @@ common/views/widgets/server.vue:
 
 common/views/widgets/memo.vue:
   title: "付箋"
-  memo: "ここに入力"
-  save: "保存"
+  placeholder: "ここに入力"
 
 common/views/widgets/slideshow.vue:
   folder-customize-mode: "フォルダを指定するには、カスタマイズモードを終了してください"
diff --git a/src/client/app/common/views/widgets/memo.vue b/src/client/app/common/views/widgets/memo.vue
index b3b668a9ad..dab40da3da 100644
--- a/src/client/app/common/views/widgets/memo.vue
+++ b/src/client/app/common/views/widgets/memo.vue
@@ -5,7 +5,6 @@
 
 		<div class="mkw-memo--body">
 			<textarea v-model="text" :placeholder="$t('placeholder')" @input="onChange"></textarea>
-			<button @click="saveMemo" :disabled="!changed">{{ $t('save') }}</button>
 		</div>
 	</ui-container>
 </div>
@@ -18,44 +17,32 @@ import i18n from '../../../i18n';
 export default define({
 	name: 'memo',
 	props: () => ({
-		compact: false
+		compact: false,
+		memo: ''
 	})
 }).extend({
 	i18n: i18n('common/views/widgets/memo.vue'),
-	data() {
-		return {
-			text: null,
-			changed: false,
-			timeoutId: null
-		};
-	},
 
 	created() {
-		this.text = this.$store.state.settings.memo;
+		if (this.text === null) {
+			this.text = this.$store.state.settings.memo;
+		}
+	},
 
-		this.$watch('$store.state.settings.memo', text => {
-			this.text = text;
-		});
+	computed: {
+		text: {
+			get() { return this.props.memo; },
+			set(value: string) {
+				this.props.memo = value;
+				this.save();
+			}
+		}
 	},
 
 	methods: {
 		func() {
 			this.props.compact = !this.props.compact;
 			this.save();
-		},
-
-		onChange() {
-			this.changed = true;
-			clearTimeout(this.timeoutId);
-			this.timeoutId = setTimeout(this.saveMemo, 1000);
-		},
-
-		saveMemo() {
-			this.$store.dispatch('settings/set', {
-				key: 'memo',
-				value: this.text
-			});
-			this.changed = false;
 		}
 	}
 });
@@ -64,8 +51,6 @@ export default define({
 <style lang="stylus" scoped>
 .mkw-memo
 	.mkw-memo--body
-		padding-bottom 28px + 16px
-
 		> textarea
 			display block
 			width 100%
@@ -77,32 +62,4 @@ export default define({
 			border none
 			border-bottom solid var(--lineWidth) var(--faceDivider)
 			border-radius 0
-
-		> button
-			display block
-			position absolute
-			bottom 8px
-			right 8px
-			margin 0
-			padding 0 10px
-			height 28px
-			color var(--primaryForeground)
-			background var(--primary) !important
-			outline none
-			border none
-			border-radius 4px
-			transition background 0.1s ease
-			cursor pointer
-
-			&:hover
-				background var(--primaryLighten10) !important
-
-			&:active
-				background var(--primaryDarken10) !important
-				transition background 0s ease
-
-			&:disabled
-				opacity 0.7
-				cursor default
-
 </style>