Creating Archive functionality.

Author: Jimskapt

package.json

@@ -91,4 +91,4 @@
       "cordova-plugin-whitelist": {}
     }
   }
-}
+}

src/components/note-display.vue

@@ -1,15 +1,27 @@
 <template lang="pug">
 v-card
-    v-toolbar(color="primary", dense)
+    v-toolbar(:color="(is_archive === true) ? 'secondary' : 'primary'", dense)
         v-toolbar-title {{ title }}
         v-spacer
         v-toolbar-items
-            v-btn(small, icon, v-if="confidential === true", @click="show_content = !show_content")
-                v-icon remove_red_eye
-            v-btn(small, icon, :to="{name: 'edit-note', params: {id: id}}")
-                v-icon edit
+            v-tooltip(bottom)
+                v-btn(small, icon, @click="$store.dispatch('toggleArchive', {_id: id})", slot="activator")
+                    v-icon(v-if="is_archive") inbox
+                    v-icon(v-else) move_to_inbox
+                span(v-if="is_archive") {{ $t('Unarchive this note') }}
+                span(v-else) {{ $t('Archive this note') }}
+            v-tooltip(bottom, v-if="confidential === true")
+                v-btn(small, icon, @click="show_content = !show_content", slot="activator")
+                    v-icon(v-if="show_content") visibility_off
+                    v-icon(v-else) visibility
+                span(v-if="show_content") {{ $t('Hide the content of the note') }}
+                span(v-else) {{ $t('Show the content of the note') }}
+            v-tooltip(bottom)
+                v-btn(small, icon, :to="{name: 'edit-note', params: {id: id}}", slot="activator")
+                    v-icon edit
+                span {{ $t('Edit the note') }}
     v-card-text
-        pre(v-if="confidential !== true || show_content", style="overflow:auto;", v-html="htmlContent")
+        div(v-if="confidential !== true || show_content", style="overflow:auto;", v-html="htmlContent")
         i(v-else) [{{ $t('confidential') }}]
         div(v-if="subjects !== undefined", class="text-xs-right")
             v-divider(style="margin: 0.5em 0px;")
@@ -25,7 +37,7 @@ const markdownConverter = markdownIt().use(markdownItCheckboxes);
 
 export default {
     name: 'note-display',
-    props: ['id', 'title', 'content', 'confidential', 'subjects'],
+    props: ['id', 'title', 'content', 'confidential', 'subjects', 'is_archive'],
     data() {
         return {
             show_content: false,

src/components/notes-filter.vue

@@ -0,0 +1,52 @@
+<template lang="pug">
+div
+    v-autocomplete(
+        v-model="filters.subjects",
+        :items="availableSubjects",
+        :label="$t('Filter')",
+        class="mx-1",
+        prepend-inner-icon="filter_list",
+        flat, multiple, dense, chips,
+        deletable-chips, small-chips,
+        clearable, solo, hide-no-data,
+        hide-details)
+    div(class="mx-1")
+        v-checkbox(
+            :label="$t('Display archives')",
+            v-model="filters.show_archives")
+</template>
+
+<script>
+export default {
+    name: 'notes-filter',
+    prop: ['value'],
+    data() {
+        return {
+            filters: {
+                subjects: [],
+                show_archives: false,
+            },
+        };
+    },
+    watch: {
+        filters: {
+            handler(val) {
+                this.$emit('input', val);
+            },
+            deep: true,
+        },
+    },
+    computed: {
+        availableSubjects() {
+            let result = ['*' + this.$t('no subject') + '*'];
+
+            result = result.concat(Object.keys(this.$store.state.subjects));
+
+            return result;
+        },
+    },
+    created() {
+        // this.$emit('input', this.filters);
+    }
+};
+</script>

src/locales/en-US.json

@@ -57,5 +57,10 @@
   "Please paste your data in the following field and click on the button in the the bottom of the page, in order to load them in this app.": "Please paste your data in the following field and click on the button in the the bottom of the page, in order to load them in this app.",
   "The note is not saved, you will lost the changes if your are leaving the page. Please confirm the exit.": "The note is not saved, you will lost the changes if your are leaving the page. Please confirm the exit.",
   "no subject": "no subject",
-  "Preview": "Preview"
+  "Preview": "Preview",
+  "Display archives": "Display archives",
+  "Archive this note": "Archive this note",
+  "Unarchive this note": "Unarchive this note",
+  "Show the content of the note": "Show the content of the note",
+  "Hide the content of the note": "Hide the content of the note"
 }

src/locales/fr-FR.json

@@ -57,5 +57,10 @@
   "Please paste your data in the following field and click on the button in the the bottom of the page, in order to load them in this app.": "Veuillez coller vos données dans le champ suivant et clicker sur le bouton en bas de la page pour les importer dans cette application.",
   "The note is not saved, you will lost the changes if your are leaving the page. Please confirm the exit.": "La note n'est pas enregistrée, vous allez perdre les changements si vous quittez la page. Veuillez confirmer que vous souhaitez partir maintenant.",
   "no subject": "pas de sujet",
-  "Preview": "Prévisualisation"
+  "Preview": "Prévisualisation",
+  "Display archives": "Afficher les archives",
+  "Archive this note": "Archiver cette note",
+  "Unarchive this note": "Désarchiver cette note",
+  "Show the content of the note": "Afficher le contenu de la note",
+  "Hide the content of the note": "Cacher le contenu de la note"
 }

src/store.js

@@ -410,6 +410,30 @@ const store = new Vuex.Store({
         console.error('$store.actions.setNotesFilter : payload or payload.value is undefined');
       }
     },
+    toggleArchive(context, payload) {
+      return new Promise((resolve, reject) => {
+        if(typeof(payload._id) === 'undefined') {
+          reject('$store.actions.toggleArchive : missing "_id" in payload');
+          return;
+        }
+
+        let data = cloneDeep(context.state.notes[payload._id]);
+        if(typeof(data) !== 'undefined') {
+
+          if(typeof(data.archived) === 'undefined') {
+            data.archived = true;
+          } else {
+            data.archived = !data.archived;
+          }
+
+          db.put(data)
+            .then((res) => {
+              resolve(res);
+            })
+            .catch((err) => { reject(err); });
+        }
+      });
+    },
   },
 });
 

src/views/ExportData.vue

@@ -10,31 +10,33 @@ div
 				v-icon archive
 			v-toolbar-title {{ $t('Export your data manually') }}
 		v-card-text
-			v-autocomplete(
-				v-model="subjectsFilters",
-				:items="filters",
-				:label="$t('Filter')",
-				class="mb-2 mx-1",
-				prepend-inner-icon="filter_list",
-				v-if="notes !== undefined && notes.length > 0",
-				flat, multiple, dense, chips, deletable-chips, small-chips, clearable, hide-no-data, hide-details)
-			v-switch(:label="$t('Make it human readable')", v-model="readable")
-			v-switch(:label="$t('Include confidential notes')", v-model="confidentials")
+			notes-filter(v-model="filters")
+			div(class="mx-1")
+				v-checkbox(:label="$t('Make it human readable')", v-model="readable")
+				v-checkbox(:label="$t('Include confidential notes')", v-model="show_confidential")
 			v-alert(type="info", :value="true") {{ $t('In order to save your data, just copy and paste the following data in an text editor (like notepad), and then save it as *.json file.') }}
 			v-divider(class="my-3")
 			v-textarea(:label="$t('Your data')", readonly, hide-details, auto-grow, v-model="dbData")
 </template>
 
 <script>
+import NotesFilter from '@/components/notes-filter.vue';
+
 export default {
 	name: 'export-data',
 	data() {
 		return {
 			readable: true,
-			confidentials: true,
-			subjectsFilters: [],
+			show_confidential: true,
+			filters: {
+				subjects: [],
+				show_archives: false,
+			},
 		};
 	},
+	components: {
+		'notes-filter': NotesFilter,
+	},
 	computed: {
 		notes () {
 			return Object.keys(this.$store.state.notes).map((key) => {
@@ -46,49 +48,60 @@ export default {
 
 			return this.notes.filter((note) => {
 
+				const archiveFilter = function() {
+					if(that.filters.show_archives === true) {
+						return true;
+					} else {
+						return !(note.archived === true);
+					}
+				}
+
 				const confidentialFilter = function() {
-					return !(that.confidentials === false && note.confidential === true);
+					return !(that.show_confidential === false && note.confidential === true);
 				}
 
 				const subjectFilter = function() {
-					let result = !(that.subjectsFilters.length > 0);
+					let result = !(that.filters.subjects.length > 0);
 
 					if(typeof(note.subjects) !== 'undefined') {
-						if(that.subjectsFilters.includes('*' + that.$t('no subject') + '*') && note.subjects.length === 0) {
+						if(that.filters.subjects.includes('*' + that.$t('no subject') + '*') && note.subjects.length === 0) {
 							result = true;
 						} else {
 							for (let i = 0; i < note.subjects.length; i++) {
-								if(that.subjectsFilters.includes(note.subjects[i])) {
+								if(that.filters.subjects.includes(note.subjects[i])) {
 									result = true;
 									break;
 								}
 							}
 						}
 					} else {
-						if(that.subjectsFilters.includes('*' + that.$t('no subject') + '*')) {
+						if(that.filters.subjects.includes('*' + that.$t('no subject') + '*')) {
 							result = true;
 						}
 					}
 
 					return result;
 				}
 
-				return confidentialFilter() && subjectFilter();
+				return archiveFilter() && confidentialFilter() && subjectFilter();
 			});
 		},
 		dbData() {
 			return JSON.stringify(
 				{
 					notes: {
-						filters: this.subjectsFilters.map((filter) => { return (filter === '*' + this.$t('no subject') + '*') ? '*no subject*' : filter; }),
-						add_confidential: this.confidentials,
+						filters: {
+							subjects: this.filters.subjects.map((filter) => { return (filter === '*' + this.$t('no subject') + '*') ? '*no subject*' : filter; }),
+							show_archives: this.filters.show_archives,
+							show_confidential: this.show_confidential,
+						},
 						items: this.filtered_notes,
 					},
 					app_version: require('../../package.json').version,
 					date: new Date(),
 				}, null, (this.readable) ? '\t': '');
 		},
-		filters() {
+		availableFilters() {
 			let result = ['*' + this.$t('no subject') + '*'];
 
 			result = result.concat(Object.keys(this.$store.state.subjects));

src/views/ImportData.vue

@@ -16,7 +16,7 @@ div
 		v-card-actions
 			v-btn(large, block, color="primary", @click="load", :disabled="userData.trim() === ''", :loading="loading")
 				v-icon unarchive
-				span {{ $t('Import your data') }}
+				span {{ $t('Import your data manually') }}
 </template>
 
 <script>