refactor(notes): Multi snippets in one note (#15)

Author: lauthieb

src/renderer/App.vue

@@ -1,10 +1,10 @@
 <template>
   <div id="app">
-    <cb-navbar></cb-navbar>
+    <cn-navbar></cn-navbar>
     <div id="content">
       <div class="columns">
         <div class="column is-3">
-          <cb-sidebar></cb-sidebar>
+          <cn-sidebar></cn-sidebar>
         </div>
         <div class="column is-9">
           <router-view></router-view>
@@ -19,10 +19,10 @@ import Navbar from './Navbar';
 import Sidebar from './Sidebar';
 
 export default {
-  name: 'cb-app',
+  name: 'cn-app',
   components: {
-    'cb-navbar': Navbar,
-    'cb-sidebar': Sidebar,
+    'cn-navbar': Navbar,
+    'cn-sidebar': Sidebar,
   },
 };
 </script>

src/renderer/Navbar.vue

@@ -38,7 +38,7 @@
 import { remote } from 'electron';
 
 export default {
-  name: 'cb-navbar',
+  name: 'cn-navbar',
   data() {
     return {
       appVersion: remote.app.getVersion(),

src/renderer/Sidebar.vue

@@ -5,7 +5,7 @@
     </p>
     <ul class="menu-list">
       <li>
-        <a :class="{'is-active': languageSelected === 'all'}" @click="selectLanguage('all')">All <b-tag class="is-pulled-right" type="is-dark">{{snippets.length}}</b-tag></a>
+        <a :class="{'is-active': languageSelected === 'all'}" @click="selectLanguage('all')">All <b-tag class="is-pulled-right" type="is-dark">{{totalFiles}}</b-tag></a>
       </li>
       <li v-for="(list, value) in Array.from(languages)">
         <a :class="{'is-active': languageSelected === list[0]}" @click="selectLanguage(list[0])">{{list[0] | capitalize}} <b-tag class="is-pulled-right" type="is-dark">{{list[1]}}</b-tag></a>
@@ -18,7 +18,7 @@
 import Vuex from 'vuex';
 
 export default {
-  name: 'cb-sidebar',
+  name: 'cn-sidebar',
   data() {
     return {};
   },
@@ -28,7 +28,7 @@ export default {
     },
   },
   computed: {
-    ...Vuex.mapGetters(['languages', 'snippets', 'languageSelected']),
+    ...Vuex.mapGetters(['languages', 'notes', 'languageSelected', 'totalFiles']),
   },
 };
 </script>

src/renderer/components/modals/create-note-modal/CreateNoteModal.html

@@ -0,0 +1,67 @@
+<form action="">
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">Create note</p>
+      <h2 class="text-red" v-if="displayDupError">Oh sorry, you can't have duplicated name in your note files...</h2>
+    </header>
+
+    <section class="modal-card-body">
+      <b-field horizontal label="Name">
+        <b-input
+          type="text"
+          ref="noteName"
+          v-model="note.name"
+          placeholder="Your note name"
+          required>
+        </b-input>
+      </b-field>
+
+      <b-field horizontal label="Description">
+        <b-input
+          type="text"
+          v-model="note.description"
+          placeholder="Your note description">
+        </b-input>
+      </b-field>
+
+      <div class="note-file" v-for="file in files">
+        <b-field horizontal label="Filename" grouped>
+          <b-input
+            style="width: 186px"
+            type="text"
+            v-model="file.name"
+            placeholder="Your file name">
+          </b-input>
+          <p class="control is-pulled-right" v-if="files.length > 1">
+            <button class="button is-danger" @click="deleteFile(file)"><b-icon icon="trash"></b-icon></button>
+          </p>
+        </b-field>
+
+        <b-field horizontal label="Language">
+          <b-select placeholder="Select a language" v-model="file.language">
+            <option
+              v-for="language in languages"
+              :value="language.name">
+              {{ language.name | capitalize }}
+            </option>
+          </b-select>
+        </b-field>
+
+        <b-field horizontal label="Content">
+          <editor v-model="file.content"
+                  :lang="file.language"
+                  theme="monokai"
+                  width="100%"
+                  height="260"
+          ></editor>
+        </b-field>
+      </div>
+      <button class="button" type="button" @click="addFile()" v-if="files.length < 5"><b-icon id="plus" icon="plus"></b-icon> Add a file</button>
+    </section>
+
+    <footer class="modal-card-foot">
+      <button class="button" type="button" @click="$parent.close()">Cancel</button>
+      <button class="button is-primary" type="button" :disabled="isDisabled" @click="createNote()">Create</button>
+    </footer>
+  </div>
+</form>

src/renderer/components/modals/create-note-modal/CreateNoteModal.scss

@@ -0,0 +1,17 @@
+.modal-card {
+  width: 700px;
+}
+
+.help {
+  display: none !important;
+}
+
+#plus {
+  margin-right: 4px;
+}
+
+.note-file {
+  background-color: $light;
+  padding: 12px;
+  margin-bottom: 10px;
+}

src/renderer/components/modals/create-note-modal/CreateNoteModal.vue

@@ -0,0 +1,91 @@
+<template src="./CreateNoteModal.html">
+</template>
+
+<script>
+  import editor from '../../editor/Editor';
+  import languages from '../../../assets/data/languages.json';
+  import converter from '../../../converter';
+
+  export default {
+    name: 'cn-create-note-modal',
+    components: {
+      editor,
+    },
+    data() {
+      return {
+        note: {
+          name: '',
+          description: '',
+          files: {},
+          updatedAt: null,
+          createdAt: null
+        },
+        files: [{
+          name: '',
+          language: 'text',
+          content: ''
+        }],
+        languages,
+        displayDupError: false
+      };
+    },
+    mounted() {
+      this.$refs.noteName.focus();
+    },
+    methods: {
+      createNote() {
+        if (!this.containsDupFiles()) {
+          this.files.forEach(file => {
+            this.note.files[`${file.name}-${converter.languageToExtension(file.language)}`] = file;
+          });
+
+          this.note.createdAt = new Date();
+          this.note.updatedAt = new Date();
+
+          this.$store.dispatch('addNote', this.note).then(() => {
+            this.$parent.close();
+          });
+        }
+        else {
+          this.displayDupError = true;
+        }
+      },
+      addFile() {
+        this.files.push({
+          name: '',
+          language: 'text',
+          content: ''
+        });
+      },
+      deleteFile(file) {
+        this.files = this.files.filter(f => f !== file);
+      },
+      containsDupFiles() {
+        const map = new Map();
+        let dupFiles = false;
+
+        this.files.forEach(file => {
+          const key = `${file.name}.${converter.languageToExtension(file.language)}`;
+
+          if (map.has(key)) {
+            dupFiles = true;
+          }
+          map.set(key, 1);
+        });
+
+        return dupFiles;
+      }
+    },
+    computed: {
+      isDisabled() {
+        return (
+          !/\S/.test(this.note.name) ||
+          this.files.some(file => !/\S/.test(file.name) || !/\S/.test(file.language) || !/\S/.test(file.content))
+        );
+      },
+    },
+  };
+</script>
+
+<style src="./CreateNoteModal.scss" lang="scss">
+</style>