click on sidebar and read note content

Author: TooBug

lib/controller/main.ts

@@ -28,6 +28,7 @@ export default class WebClientController{
     private _initViewListener() {
         const app = this._view.app;
 
+        // 用户登录
         app.$on('user.login', (data: any) => {
             this._view.setData('userInfo', {
                 isLogin: true,
@@ -42,6 +43,14 @@ export default class WebClientController{
                 this._refreshData();
             }
         });
+
+        // 切换笔记
+        app.$on('note.switchActive', async (data: any) => {
+            const note = (await this._model.Note.find(data.id)).data.data;
+            this._view.setData('editor', {
+                content: note.content
+            });
+        });
     }
 
     private _initModel(){

lib/view/components/NoteTree.vue

@@ -35,14 +35,14 @@
 					name="note-list"
 					tag="ul"
 					droppable="true"
-					v-show="!isFold(category)"
+					v-show="!foldMap[category]"
 					v-on:drop="drop"
 					>
 					<li
 						draggable="true"
 						class="icon note"
 						:key="note.id"
-						:class="{active:isActive(note.id)}"
+						:class="{active:note.id === state.currentActiveNoteId}"
 						v-for="note in notes"
 						@contextmenu="showContextMenu('note', note.id)"
 						@click.stop="switchActiveNote(note.id)"
@@ -61,27 +61,40 @@
 </section>
 </template>
 <script>
-import { createComponent, reactive } from '@vue/composition-api';
+import { createComponent, reactive, ref } from '@vue/composition-api';
 import { getData } from '../dataInjector';
 
 export default createComponent({
     setup(props, ctx){
 		const notebook = reactive(getData('notebook'));
 		const state = reactive({
-			currentContextMenuNoteId: ''
+			currentContextMenuNoteId: '',
+			currentActiveNoteId: '',
 		});
 
-        const switchFold = function(){
+		const foldMap = ref({});
 
+        const switchFold = function(category){
+			let value;
+			if(!foldMap.value[category]){
+				value = true;
+			}else{
+				value = false;
+			}
+			foldMap.value = {
+				...foldMap.value,
+				[category]: value
+			};
         };
 
-        const isFold = function(){
-            return false;
-        };
-        const isActive = function(noteId){
+        /* const isFold = function(category){
+			console.log('isFold');
+			return foldMap[category];
+        }; */
+        /* const isActive = function(noteId){
 			// console.log(noteId, state.currentContextMenuNoteId);
             return noteId === state.currentContextMenuNoteId;
-        };
+        }; */
 
 		const showContextMenu = function(type, id){
 			// console.log(state.currentContextMenuNoteId);
@@ -111,16 +124,17 @@ export default createComponent({
 		}
 
 		const switchActiveNote = function(id){
+			state.currentActiveNoteId = id;
 			ctx.root.$webClient.$emit('note.switchActive', {
 				id
 			});
 		}
 
         return {
+			state,
             notebook,
+            foldMap,
             switchFold,
-            isFold,
-			isActive,
 			showContextMenu,
 			hideContextMenu,
 			drop,