Fixes #91: Frequently used file types

Author: kartik-budhiraja

package-lock.json

@@ -75,6 +75,7 @@
     "vue-clipboard2": "0.0.8",
     "vue-electron": "^1.0.6",
     "vue-router": "^3.0.1",
+    "vue-select": "^3.2.0",
     "vuex": "^3.0.1",
     "vuex-electron": "^1.0.0"
   },

package.json

@@ -54,13 +54,14 @@ <h2 class="text-red" v-if="displayDupError">Oh sorry, you can't have duplicated
         </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>
+          <v-select style="width: 186px" label="Language" :options="sortedLanguagesByUse" placeholder="Select a language"
+             v-model="file.language" :reduce="selectedLanguage => selectedLanguage.name">
+             <template v-slot:option="option">
+               {{ option.name | capitalize }}
+             </template>
+          </v-select>
+          <b-button pill v-for="languageTag in sortedLanguagesByUse.slice(0,3)"  :style="'background-color: ' + stringToColour(languageTag.name) + '; color: #fff;'"
+               :key="languageTag.name" @click="file.language = languageTag.name">{{languageTag.name}}</b-button>
         </b-field>
 
         <b-field horizontal label="Content">

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

@@ -3,6 +3,8 @@ import { mapGetters, mapActions } from 'vuex';
 import editor from '@/components/editor/Editor';
 import languages from '@/assets/data/languages.json';
 import converter from '@/converter';
+import vSelect from 'vue-select';
+import ColorHash from 'color-hash';
 
 const noteNameCharacters = 'abcdef0123456789';
 
@@ -17,7 +19,7 @@ const generateNoteName = () => {
 export default {
   template: require('./CreateNoteModal.html'),
   name: 'cn-create-note-modal',
-  components: { editor },
+  components: { editor, vSelect },
   data() {
     return {
       note: {
@@ -101,14 +103,35 @@ export default {
     getNoteType() {
       return (this.gistsSelected) ? 'gist' : 'note';
     },
+    stringToColour(str) {
+      const colorHash = new ColorHash({ lightness: 0.5, saturation: 0.6 });
+      return colorHash.hex(str);
+    },
   },
   computed: {
-    ...mapGetters(['gistsSelected']),
+    ...mapGetters(['gistsSelected', 'notes']),
     isDisabled() {
       return this.files.some(file => !/\S/.test(file.content));
     },
+    sortedLanguagesByUse() {
+      this.languages.forEach((language) => { language.frequency = 0; });
+      this.notes.forEach((note) => {
+        Object.keys(note.files).forEach((file) => {
+          const languageUsed = this.languages.find(language =>
+            note.files[file].language === language.name);
+          languageUsed.frequency ? (languageUsed.frequency += 1)
+            : (languageUsed.frequency = 1);
+        });
+      });
+      const sortedArray = this.languages
+        .slice()
+        .sort((a, b) =>
+          (a.frequency > b.frequency ? -1 : a.frequency < b.frequency ? 1 : 0));
+      return sortedArray;
+    },
   },
 };
 </script>
 
 <style src="./CreateNoteModal.scss" lang="scss"></style>
+<style src="vue-select/dist/vue-select.css"></style>