Can store multiple memos

Author: nikukyugamer

.gitignore

@@ -12,3 +12,5 @@ yarn-error.log
 *.sln
 
 .firebase
+.history
+

src/components/Editor.vue

@@ -11,10 +11,20 @@
     </button>
 
     <div class="editorWrapper">
-      <textarea class="markdown" v-model="markdown"></textarea>
+      <div class="memoListWrapper">
+        <!-- :data-selected (v-bind:deta-selected) と明示的に記述して内容に応じてスタイルを当てる -->
+        <div class="memoList" v-for="(memo, index) in memos" @click="selectMemo(index)" :data-selected="index == selectedIndex">
+          <p class="memoTitle">
+            {{ displayTitle(memo.markdown) }}
+          </p>
+        </div>
+        <button class="addMemoBtn" @click="addMemo">
+          メモの追加
+        </button>
+      </div>
+      <textarea class="markdown" v-model="memos[selectedIndex].markdown"></textarea>
       <div class="preview" v-html="preview()"></div>
     </div>
-
   </div>
 </template>
 
@@ -25,16 +35,34 @@ export default {
   name: "editor",
   props: ["user"],
   data() {
+    // 配列にすることで複数のメモを格納できるようにする
+    // Lodash などを用いて検索機能やソート機能を実装してみるのもよい
     return {
-      markdown: ""
+      memos: [
+        {
+          markdown: ""
+        }
+      ],
+      selectedIndex: 0
     }
   },
   methods: {
     logout: function() {
       firebase.auth().signOut()
     },
     preview: function() {
-      return marked(this.markdown)
+      return marked(this.memos[this.selectedIndex].markdown)
+    },
+    addMemo: function() {
+      this.memos.push({
+        markdown: "無題のメモ"
+      })
+    },
+    selectMemo: function(index) {
+      this.selectedIndex = index
+    },
+    displayTitle: function(text) {
+      return text.split(/\n/)[0]
     }
   }
 }
@@ -45,13 +73,42 @@ export default {
   display: flex;
 }
 
+.memoListWrapper {
+  width: 20%;
+  border-top: 1px solid #000;
+}
+
+.memoList {
+  padding: 10px;
+  box-sizing: border-box;
+  text-align: left;
+  border-bottom: 1px solid #000;
+  &:nth-child(even) {
+    background-color: #ccc;
+  }
+  &[data-selected="true"] {
+    background-color: #ccf;
+  }
+}
+
+.memoTitle {
+  height: 1.5em;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.addMemoBtn {
+  margin-top: 20px;
+}
+
 .markdown {
-  width: 50%;
+  width: 40%;
   height: 500px;
 }
 
 .preview {
-  width: 50%;
+  width: 40%;
   text-align: left;
 }
 </style>