save content when changed (with bugs)

Author: TooBug

lib/controller/main.ts

@@ -3,21 +3,36 @@ import WebClientModel, { Notebook } from '../model/main';
 
 interface User {
     isLogin: boolean,
-    name: string,
-    avatarUrl: string,
-    labels: string[],
+    name?: string,
+    avatarUrl?: string,
+    labels?: string[],
+};
+
+interface State {
+    currentNoteId: string,
+    editorContent: string,
 };
 
 export default class WebClientController{
     private _view:WebClientView;
     private _model:WebClientModel;
-    // private _user: User;
-    // private _notebook: Notebook;
-    private _editorContent: string;
+    private _user:User;
+    private _notebook: Notebook;
+    private _state: State;
     constructor(view:WebClientView, model:WebClientModel){
         this._view = view;
         this._model = model;
-        this._editorContent = '';
+        this._user = {
+            isLogin: false,
+        };
+        this._notebook = {
+            title: 'loading',
+            categories: {}
+        };
+        this._state = {
+            currentNoteId: '',
+            editorContent: '',
+        };
         this._initModel();
         this._initViewListener();
     }
@@ -30,12 +45,13 @@ export default class WebClientController{
 
         // 用户登录
         app.$on('user.login', (data: any) => {
-            this._view.setData('userInfo', {
+            this._user = {
                 isLogin: true,
                 name: data.userInfo.name,
                 avatarUrl: data.userInfo.avatarUrl,
                 labels: [],
-            });
+            };
+            this._view.setData('userInfo', this._user);
 
             const token = localStorage.getItem('TOONOTE-TOKEN');
             if(token){
@@ -50,6 +66,21 @@ export default class WebClientController{
             this._view.setData('editor', {
                 content: note.content
             });
+            this._state.currentNoteId = note.id;
+        });
+
+        // 笔记内容发生变化
+        app.$on('editor.change', async (data: any) => {
+            // console.log('currentNoteId', this._state.currentNoteId);
+            // console.log('content', data.content);
+            // todo: 第一次变更不需要保存
+            // todo: 内容与id必须得对应，要不然会串
+            if(!this._state.currentNoteId) return;
+            if(!data.content) return;
+            await this._model.Note.update(this._state.currentNoteId, {
+                content: data.content
+            });
+            // console.log('content change saved.');
         });
     }
 
@@ -59,11 +90,12 @@ export default class WebClientController{
 
 
     private _fillEmptyData(){
+        this._view.setData('state', this._state);
         this._view.setData('editor', {
-            content: '',
+            content: this._state.editorContent,
         });
-        this._view.setData('userInfo', {});
-        this._view.setData('notebook', {});
+        this._view.setData('userInfo', this._user);
+        this._view.setData('notebook', this._notebook);
     }
 
     private async _refreshData(notebookId?: string){

lib/view/components/Main.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script type="ts">
-import { createComponent, reactive } from '@vue/composition-api';
+import { createComponent, reactive, watch } from '@vue/composition-api';
 
 import { getData } from '../dataInjector';
 
@@ -33,6 +33,13 @@ export default createComponent({
     setup(props, ctx){
         const editor = reactive(getData('editor'));
         const userInfo = reactive(getData('userInfo'));
+
+        watch(() => {
+            ctx.root.$webClient.$emit('editor.change', {
+                content: editor.data.content
+            });
+        });
+
         return {
             editor,
             userInfo,

lib/view/components/NoteTree.vue

@@ -42,7 +42,7 @@
 						draggable="true"
 						class="icon note"
 						:key="note.id"
-						:class="{active:note.id === state.currentActiveNoteId}"
+						:class="{active:note.id === state.data.currentNoteId}"
 						v-for="note in notes"
 						@contextmenu="showContextMenu('note', note.id)"
 						@click.stop="switchActiveNote(note.id)"
@@ -66,10 +66,10 @@ import { getData } from '../dataInjector';
 
 export default createComponent({
     setup(props, ctx){
+		const state = reactive(getData('state'));
 		const notebook = reactive(getData('notebook'));
-		const state = reactive({
+		const localState = reactive({
 			currentContextMenuNoteId: '',
-			currentActiveNoteId: '',
 		});
 
 		const foldMap = ref({});
@@ -97,12 +97,11 @@ export default createComponent({
         }; */
 
 		const showContextMenu = function(type, id){
-			// console.log(state.currentContextMenuNoteId);
-			state.currentContextMenuNoteId = id;
+			localState.currentContextMenuNoteId = id;
 		};
 
 		const hideContextMenu = function(){
-			state.currentContextMenuNoteId = '';
+			localState.currentContextMenuNoteId = '';
 		}
 
 		const drop = function(){};
@@ -119,19 +118,20 @@ export default createComponent({
 
 		const deleteNote = function(){
 			ctx.root.$webClient.$emit('note.delete', {
-				id: state.currentContextMenuNoteId,
+				id: localState.currentContextMenuNoteId,
 			});
 		}
 
 		const switchActiveNote = function(id){
-			state.currentActiveNoteId = id;
+			state.data.currentNoteId = id;
 			ctx.root.$webClient.$emit('note.switchActive', {
 				id
 			});
 		}
 
         return {
 			state,
+			localState,
             notebook,
             foldMap,
             switchFold,