Adding subject filter bar on notes list.

Author: Jimskapt

src/locales/en-US.json

@@ -48,5 +48,6 @@
   "confidential": "confidential",
   "It is confidential": "It is confidential",
   "The note will not be displayed by default, you will have to ask to show it": "The note will not be displayed by default, you will have to ask to show it",
-  "Subjects": "Subjects"
+  "Subjects": "Subjects",
+  "Filter": "Filter"
 }

src/locales/fr-FR.json

@@ -48,5 +48,6 @@
   "confidential": "confidentiel",
   "It is confidential": "C'est confidentiel",
   "The note will not be displayed by default, you will have to ask to show it": "La note ne sera pas affichée par défaut, vous devrez demander à l'afficher",
-  "Subjects": "Sujets"
+  "Subjects": "Sujets",
+  "Filter": "Filtrer"
 }

src/views/EditNote.vue

@@ -15,6 +15,7 @@
 				v-combobox(
 					chips,
 					deletable-chips,
+					small-chips,
 					multiple,
 					:label="$t('Subjects')",
 					v-model="dbDoc.subjects",

src/views/Notes.vue

@@ -8,8 +8,15 @@ div
 		span {{ $t('There is no notes') }}.
 		br
 		router-link(style="color:white;", :to="{name: 'edit-note', params: {id: 1}}") {{ $t('Create a note') }}
+	v-autocomplete(
+		v-model="subjectsFilters",
+		:items="Object.keys($store.state.subjects)",
+		:label="$t('Filter')",
+		class="mb-2 mx-1",
+		prepend-inner-icon="filter_list",
+		flat, multiple, dense, chips, deletable-chips, small-chips, clearable, solo, hide-no-data, hide-details)
 	v-layout(wrap)
-		v-flex(v-for="note in notes", :key="note._id", pa-1, d-flex)
+		v-flex(v-for="note in filtered_notes", :key="note._id", pa-1, d-flex)
 			note-display(:id="note._id", :title="note.title", :content="note.content", :confidential="note.confidential", :subjects="note.subjects")
 	v-btn(large, icon, fixed, bottom, right, color="primary", :to="{name: 'edit-note', params: {id: 1}}")
 		v-icon add
@@ -20,10 +27,31 @@ import NoteDisplay from '@/components/note-display.vue';
 
 export default {
 	name: 'notes',
+	data() {
+		return {
+			subjectsFilters: [],
+		};
+	},
 	components: {
 		'note-display': NoteDisplay,
 	},
 	computed: {
+		filtered_notes () {
+			return this.notes.filter((note) => {
+				let result = !(this.subjectsFilters.length > 0);
+
+				if(typeof(note.subjects) !== 'undefined') {
+					for (let i = 0; i < note.subjects.length; i++) {
+						if(this.subjectsFilters.includes(note.subjects[i])) {
+							result = true;
+							break;
+						}
+					}
+				}
+
+				return result;
+			});
+		},
 		notes () {
 			return Object.keys(this.$store.state.notes).map((key) => {
 				return this.$store.state.notes[key];