Added file name to UI, made file search box work, added some path parsing (to…

Added file name to UI, made file search box work, added some path parsing (to get file name with ellipses)

src/components/Files.vue

@@ -3,12 +3,13 @@
     <h3>Files <button type="button" class="btn btn-primary upload-btn" @click="chooseFiles">Upload</button></h3>
     <div class="col-sm-12">
       <div class="form-floating mb-3">
-        <input type="text" class="form-control" id="floatingInput" placeholder="Search">
+        <input type="text" class="form-control" id="floatingInput" placeholder="Search" v-model="search">
         <label for="floatingInput">Search</label>
       </div>
     </div>
-    <div v-for="file in files" :key="file.id" class="col-4">
+    <div v-for="file in searchedFiles" :key="file.id" class="col-4">
       <img @click="toggleSelection(file)" :class="getSelectedClass(file)" class="file-thumbnail img-fluid img-thumbnail" :title="file.name" :src="file.thumbnail"/>
+      <figcaption class="figure-caption">{{ getFileName(file) }}</figcaption>
     </div>
     <div v-for="upload in uploads" :key="upload.id" class="col-4">
       <div class="row h-100">
@@ -25,12 +26,15 @@
 
 <script>
 import { mapActions, mapState, mapMutations } from "vuex";
+import path from 'path'
 
 export default {
   name: "Files.vue",
   props: ['project'],
   data() {
-    return {}
+    return {
+      search: ""
+    }
   },
   methods: {
     chooseFiles() {
@@ -71,10 +75,21 @@ export default {
         return ''
       }
     },
+    getFileName(fileObject) {
+      let base = path.basename(fileObject.media)
+      if (base.length < 20) {
+        return base
+      } else {
+        return `${base.substr(0, 18)}...`
+      }
+    },
     ...mapActions(['loadFiles', 'createFile']),
     ...mapMutations((['setPreviewFile']))
   },
   computed: {
+    searchedFiles() {
+      return this.files.filter(file => path.basename(file.media).toLowerCase().includes(this.search.toLowerCase()))
+    },
     ...mapState(['files', 'previewFile', 'uploads'])
   },
   mounted() {
@@ -97,6 +112,9 @@ export default {
   .selected {
     border: #0d6efd 4px solid;
   }
+  .figure-caption {
+    font-size: 0.8em;
+  }
   .file-thumbnail {
     cursor: pointer;
   }