Resolve #52.

controllers/notebook.js

@@ -25,6 +25,12 @@ exports.exist = (req, res) => {
     return res.status(200).end()
 }
 
+exports.list = (req, res) => {
+    let list = notebooks.find().map(n => Object.assign({}, { id: n.id, count: n.notes.length }))
+    list.sort((a, b) => a.id - b.id)
+    return res.status(200).send(list)
+}
+
 exports.create = (req, res) => {
     if (!req.body || !req.body.id || !req.body.password) return res.status(400).end()
     if (notebooks.findOne({ id: req.body.id })) return res.status(409).end()

mininote-frontend/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mininote-frontend",
-    "version": "0.3.1",
+    "version": "0.4.0",
     "description": "A simple Mardown note-taking editor.",
     "author": "Ferdinand Mütsch <mail@ferdinand-muetsch.de>",
     "private": true,

mininote-frontend/src/App.vue

@@ -16,9 +16,15 @@
           <notes-editor :content="currentContent" :id="selectedNoteId" :dirty="dirty" @alert="showAlert" @contentUpdate="onNoteUpdated"></notes-editor>
         </div>
       </div>
-      <div v-if="!loaded">
+      <div v-if="!loaded && !notebooks.length">
         <div class="placeholder">
-          <span>Please open an existing notebook or create a new one.</span>
+          <span>Please create a new notebook.</span>
+        </div>
+      </div>
+      <div v-if="!loaded && notebooks.length">
+        <div class="notebooks-picker-container">
+          <h3>Your Notebooks</h3>
+          <notebooks-picker :notebooks="notebooks" @notebookSelected="onNotebookSelected"></notebooks-picker>
         </div>
       </div>
     </div>
@@ -31,10 +37,11 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from 'vuex'
+import { mapState, mapGetters, mapActions } from 'vuex'
 
 import NotesEditor from './components/NotesEditor'
 import NotesPicker from './components/NotesPicker'
+import NotebooksPicker from './components/NotebooksPicker'
 import ControlBar from './components/ControlBar'
 
 export default {
@@ -47,7 +54,8 @@ export default {
   computed: {
     ...mapState([
       'selectedNoteId',
-      'version'
+      'version',
+      'notebooks'
     ]),
     ...mapGetters([
       'loaded',
@@ -63,16 +71,22 @@ export default {
   components: {
     NotesEditor,
     NotesPicker,
+    NotebooksPicker,
     ControlBar
   },
   created() {
-    window.addEventListener("beforeunload", this.didIntentToLeave);
+    window.addEventListener("beforeunload", this.didIntentToLeave)
+    this.listNotebooks()
   },
   methods: {
+    ...mapActions([
+      'listNotebooks'
+    ]),
     onNoteSelected: function(noteId) {
       this.$store.commit('selectNote', noteId)
     },
-    onNotesLoaded: function(notes) {
+    onNotebookSelected: function(notebookId) {
+      this.$store.commit('setLoadNotebook', notebookId)
     },
     addNote: function(note) {
       this.notes.push(note)
@@ -159,6 +173,13 @@ button {
   left: calc(50% - 300px);
 }
 
+#app .notebooks-picker-container {
+  position: absolute;
+  width: 500px;
+  top: 20vh;
+  left: calc(50% - 250px);
+}
+
 .alert {
   width: 500px;
   position: fixed;
@@ -167,4 +188,9 @@ button {
   z-index: 999;
   text-align: center;
 }
+
+#app h3 {
+  font-size: 20px;
+  color: #42B983;
+}
 </style>

mininote-frontend/src/api/index.js

@@ -11,6 +11,14 @@ const api = {
         let req = new Request(`${apiBaseUrl}/notebook/${notebookId}`, { method: 'HEAD' })
         return fetch(req).then(res => res.status === 200)
     },
+    list() {
+        let req = new Request(`${apiBaseUrl}/notebook`, { method: 'GET' })
+        return fetch(req)
+            .then(res => {
+                if (res.status === 200) return res.json()
+                throw generateError(res)
+            })
+    },
     create(notebookId, passwordHash) {
         let headers = new Headers()
         headers.append('Content-Type', 'application/json')

mininote-frontend/src/components/ControlBar.vue

@@ -53,7 +53,7 @@
 <script>
 import api from "../api";
 import { md5 } from "../lib/md5";
-import { mapState, mapGetters } from "vuex";
+import { mapState, mapGetters, mapActions } from "vuex";
 
 export default {
   name: "control-bar",
@@ -74,11 +74,13 @@ export default {
   },
   computed: {
     ...mapState({
-      notebook: state => state.notebook
+      notebook: state => state.notebook,
+      loadNotebookId: state => state.loadNotebookId
     }),
     ...mapGetters(["dirty"])
   },
   methods: {
+    ...mapActions(['listNotebooks']),
     handleError: function(err) {
       this.$emit('alert', err.message)
       this.reset();
@@ -102,7 +104,8 @@ export default {
         creating: false,
         loaded: false
       };
-      this.$store.commit('reset');
+      this.$store.commit('reset')
+      this.listNotebooks()
       setTimeout(() => this.$refs.refNotebookInput.focus(), 0);
     },
     tryNotebook: function() {
@@ -176,6 +179,13 @@ export default {
         })
         .catch(vm.handleError)
     }
+  },
+  watch: {
+    loadNotebookId: function(newId, oldId) {
+      if (newId !== '' && newId !== oldId) {
+        this.inputs.name = newId
+      }
+    }
   }
 };
 </script>

mininote-frontend/src/components/NotebooksPicker.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="picker-container">
+    <b-list-group>
+      <b-list-group-item button v-for="n in notebooks" :key="n.id" @click="chooseNotebook(n.id)" class="d-flex justify-content-between align-items-center">
+        {{ n.id }}
+        <b-badge variant="primary" pill>{{ n.count }}</b-badge>
+      </b-list-group-item>
+    </b-list-group>
+  </div>
+</template>
+
+<script>
+import { md5 } from '../lib/md5'
+import { mapState, mapGetters, mapMutations } from 'vuex'
+
+export default {
+  name: 'notes-picker',
+  props: ['notebooks'],
+  computed: {},
+  methods: {
+    chooseNotebook: function(id) {
+      this.$emit('notebookSelected', id)
+    }
+  },
+  created () {
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.picker-container {
+  margin-top: 20px;
+}
+
+.picker-container ul {
+  overflow-y: auto;
+  max-height: calc(100vh - 240px)
+}
+
+.picker-container .badge-primary {
+  background-color: #42B983;
+}
+
+.picker-container .list-group-item {
+  padding: 0.35rem 0.75rem;
+  cursor: pointer;
+}
+</style>

mininote-frontend/src/store/index.js

@@ -7,12 +7,14 @@ Vue.use(Vuex)
 
 const emptyState = {
     notebook: {},
+    notebooks: [],
     changes: {
         add: [],
         delete: [],
         update: {}
     },
     selectedNoteId: -1,
+    loadNotebookId: '',
     version: require('../../package.json').version
 }
 
@@ -83,6 +85,9 @@ const store = new Vuex.Store({
         noteById
     },
     mutations: {
+        setNotebooks(state, notebookList) {
+            Vue.set(state, 'notebooks', notebookList)
+        },
         setNotebook(state, { id, password }) {
             Vue.set(state.notebook, 'id', id)
             Vue.set(state.notebook, 'password', password)
@@ -109,6 +114,9 @@ const store = new Vuex.Store({
         },
         selectNote,
         selectFirst,
+        setLoadNotebook(state, id) {
+            Vue.set(state, 'loadNotebookId', id)
+        },
         addChange(state, { type, payload }) {
             switch (type) {
                 case 'add':
@@ -159,6 +167,10 @@ const store = new Vuex.Store({
         }
     },
     actions: {
+        listNotebooks({ commit }) {
+            return api.list()
+                .then(data => commit('setNotebooks', data))
+        },
         loadNotebook({ commit }, { id, password }) {
             return api.getNotes(id, password)
                 .then(data => commit('setNotes', data))

package.json

@@ -1,10 +1,11 @@
 {
     "name": "mininote",
-    "version": "0.3.1",
+    "version": "0.4.0",
     "description": "A simple Mardown note-taking editor",
     "main": "index.js",
     "scripts": {
         "start": "node index.js",
+        "dev": "NODE_ENV=dev node index.js",
         "test": "TEST=true mocha --exit"
     },
     "repository": {

routers/notebook.js

@@ -4,6 +4,8 @@ const express = require('express'),
     router = express.Router(),
     notebookController = require('../controllers/notebook')
 
+router.get('/notebook', notebookController.list)
+
 router.post('/notebook', notebookController.create)
 
 router.head('/notebook/:id', notebookController.exist)