From f5c48c9679ef16f2d2dfb88d7cdcea929463f2ed Mon Sep 17 00:00:00 2001
From: 1138-4EB <1138-4EB@users.noreply.github.com>
Date: Sun, 29 Jul 2018 20:07:49 +0100
Subject: [PATCH] Use v-for to create boxes in Search.vue (#21)

`:key="k"` is required because of vuejs/vetur#261.
---
 src/components/Search.vue | 46 ++++++++++++++-------------------------
 1 file changed, 16 insertions(+), 30 deletions(-)

diff --git a/src/components/Search.vue b/src/components/Search.vue
index 9a18fdef..3312ba3f 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -25,35 +25,13 @@
               <h3>{{ $t('search.types') }}</h3>
               <div>
                 <div tabindex="0"
+                  v-for="(v,k) in boxes"
+                  :key="k"
                   role="button"
-                  @click="init('type:image')"
-                  :aria-label="$t('search.images')">
-                  <i class="material-icons">insert_photo</i>
-                  <p>{{ $t('search.images') }}</p>
-                </div>
-
-                <div tabindex="0"
-                  role="button"
-                  @click="init('type:audio')"
-                  :aria-label="$t('search.music')">
-                  <i class="material-icons">volume_up</i>
-                  <p>{{ $t('search.music') }}</p>
-                </div>
-
-                <div tabindex="0"
-                  role="button"
-                  @click="init('type:video')"
-                  :aria-label="$t('search.video')">
-                  <i class="material-icons">movie</i>
-                  <p>{{ $t('search.video') }}</p>
-                </div>
-
-                <div tabindex="0"
-                  role="button"
-                  @click="init('type:pdf')"
-                  :aria-label="$t('search.pdf')">
-                  <i class="material-icons">picture_as_pdf</i>
-                  <p>{{ $t('search.pdf') }}</p>
+                  @click="init('type:'+k)"
+                  :aria-label="$t('search.'+v.label)">
+                  <i class="material-icons">{{v.icon}}</i>
+                  <p>{{ $t('search.'+v.label) }}</p>
                 </div>
               </div>
             </div>
@@ -61,7 +39,7 @@
 
         </template>
         <ul v-else-if="search.length > 0">
-          <li v-for="s in results">
+          <li v-for="(s,k) in results" :key="k">
             <router-link @click.native="close" :to="'./' + s.path">
               <i v-if="s.dir" class="material-icons">folder</i>
               <i v-else class="material-icons">insert_drive_file</i>
@@ -84,6 +62,13 @@ import { mapState } from 'vuex'
 import url from '@/utils/url'
 import * as api from '@/utils/api'
 
+var boxes = {
+  image: { label: 'images', icon: 'insert_photo' },
+  audio: { label: 'music', icon: 'volume_up' },
+  video: { label: 'video', icon: 'movie' },
+  pdf: { label: 'pdf', icon: 'picture_as_pdf' }
+}
+
 export default {
   name: 'search',
   data: function () {
@@ -95,7 +80,8 @@ export default {
       search: [],
       commands: [],
       reload: false,
-      resultsCount: 50
+      resultsCount: 50,
+      boxes: boxes
     }
   },
   watch: {