feat(notes): crud tags + search (#30)

Closes #22
lauthieb · Feb 10, 2018 · e4cc26d · e4cc26d
1 parent 70c61d7
commit e4cc26d
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 0 deletions.
diff --git a/src/renderer/components/modals/create-note-modal/CreateNoteModal.html b/src/renderer/components/modals/create-note-modal/CreateNoteModal.html
@@ -25,6 +25,13 @@ <h2 class="text-red" v-if="displayDupError">Oh sorry, you can't have duplicated
         </b-input>
       </b-field>
 
+      <b-field v-if="!gistsSelected" horizontal label="Tags">
+        <b-taginput
+          v-model="note.tags"
+          maxtags="5">
+        </b-taginput>
+      </b-field>
+
       <b-field v-if="gistsSelected" horizontal label="Visibility">
         <b-select placeholder="Select a visibility" v-model="note.public">
           <option :value="false">Secret</option>

diff --git a/src/renderer/components/modals/create-note-modal/CreateNoteModal.vue b/src/renderer/components/modals/create-note-modal/CreateNoteModal.vue
@@ -21,6 +21,7 @@
           public: false,
           updatedAt: null,
           createdAt: null,
+          tags: []
         },
         files: [
           {

diff --git a/src/renderer/components/modals/update-note-modal/UpdateNoteModal.html b/src/renderer/components/modals/update-note-modal/UpdateNoteModal.html
@@ -25,6 +25,13 @@ <h2 class="text-red" v-if="displayDupError">Oh sorry, you can't have duplicated
         </b-input>
       </b-field>
 
+      <b-field v-if="!gistsSelected" horizontal label="Tags">
+        <b-taginput
+          v-model="note.tags"
+          maxtags="5">
+        </b-taginput>
+      </b-field>
+
       <div class="note-file" v-for="file in files">
         <b-field horizontal label="Name" grouped>
           <b-input

diff --git a/src/renderer/components/modals/update-note-modal/UpdateNoteModal.vue b/src/renderer/components/modals/update-note-modal/UpdateNoteModal.vue
@@ -24,6 +24,7 @@
           files: {},
           updatedAt: null,
           createdAt: null,
+          tags: []
         },
         files: [],
         gistFiles: [],
@@ -36,7 +37,9 @@
         this.$refs.noteDescription.focus();
       } else {
         this.$refs.noteName.focus();
+        this.note.tags = this.note.tags ? this.note.tags : [];
       }
+
       this.noteUpdated = {...this.note};
       this.noteUpdated.files = {};
       Object.keys(this.note.files).forEach((key, index) => {

diff --git a/src/renderer/components/notes-list/NotesList.vue b/src/renderer/components/notes-list/NotesList.vue
@@ -43,6 +43,7 @@ export default {
             el =>
               item.name.toLowerCase().indexOf(el.toLowerCase()) > -1 ||
               item.description.toLowerCase().indexOf(el.toLowerCase()) > -1 ||
+              (item.tags ? item.tags.some(tag => tag.toLowerCase().indexOf(el.toLowerCase()) > -1) : false) ||
               Object.keys(item.files).some(
                 key =>
                   key.toLowerCase().indexOf(el.toLowerCase()) > -1 ||

diff --git a/src/renderer/components/notes-list/note-card/NoteCard.html b/src/renderer/components/notes-list/note-card/NoteCard.html
@@ -25,6 +25,9 @@ <h3 v-else>{{ note.name }}</h3>
         </div>
         <p v-if="!gistsSelected">{{note.description}}</p>
 
+        <b-tag type="is-dark" v-for="tag in note.tags" :data="tag"
+               :key="tag.text">{{tag}}</b-tag>
+
         <div class="note-file" v-for="(value, key, index) in note.files">
           <h4>{{value.name}}
             <span class="note-file-small">({{value.language}})

diff --git a/src/renderer/components/notes-list/note-card/NoteCard.scss b/src/renderer/components/notes-list/note-card/NoteCard.scss
@@ -74,3 +74,8 @@
 .visibility-icon {
   font-size: 16px;
 }
+
+.tag {
+  margin-bottom: 12px;
+  margin-right: 6px;
+}