filelist wip

Author: pingwiniasty

package.json

@@ -13,6 +13,7 @@
     "axios": "^0.21.1",
     "buefy": "^0.9",
     "core-js": "^3.6.5",
+    "file-saver": "^2.0.5",
     "lodash": "^4.17.20",
     "postcss-import": "^12.0.1",
     "prismjs": "^1.22.0",

src/store/file/actions.js

@@ -1,9 +1,12 @@
 // import axios from 'axios'
 
 
+import {filterToQueryString} from "@/helpers/URL";
+
 export default {
-  async list(context, paginationData) {
-    return await this._vm.$http.get('/file?page='+paginationData.page+'&per_page='+paginationData.perPage)
+  async list(context, parameters) {
+    const filterStr = filterToQueryString(parameters.filter)
+    return await this._vm.$http.get(`/file?page=${parameters.page}&per_page=${parameters.perPage}${filterStr}`)
   },
   async all({ commit }) {
     const response = await this._vm.$http.get('/file')
@@ -18,5 +21,10 @@ export default {
         'Content-Type': 'multipart/form-data'
       }
     })
+  },
+  async download(context, file_id) {
+      return await this._vm.$http.get(`/file/${file_id}/download`, {
+        responseType: 'blob',
+      })
   }
 }

src/views/files/FileList.vue

@@ -26,22 +26,49 @@
                 :autoload="false"
                 :dense="true"
                 ref="table"
+                :headers="headers"
         >
 
-            <b-table-column field="name" label="Name" v-slot="props">
-                {{ props.row.filename }}
+            <b-table-column field="name" label="Name" searchable>
+              <template
+                  slot="searchable"
+                  slot-scope="props">
+                <b-input
+                    v-model="props.filters[props.column.field]"
+                    placeholder="Search..."
+                    icon="magnify"
+                    size="is-small" />
+              </template>
+              <template v-slot="props">
+                {{ props.row.name }}
+              </template>
+            </b-table-column>
+
+            <b-table-column field="type" label="Type" searchable>
+              <template
+                  slot="searchable"
+                  slot-scope="props">
+                <b-input
+                    v-model="props.filters[props.column.field]"
+                    placeholder="Search..."
+                    icon="magnify"
+                    size="is-small" />
+              </template>
+              <template v-slot="props">
+                {{ props.row.type }}
+              </template>
             </b-table-column>
 
             <b-table-column field="size" label="File size" v-slot="props">
                 {{ props.row.size }} bytes
             </b-table-column>
 
-            <b-table-column field="size" label="Mod time" v-slot="props">
-                {{ props.row.mod_time }}
+            <b-table-column field="created_at" label="Upload time" v-slot="props">
+                {{ props.row.created_at | moment }}
             </b-table-column>
 
             <b-table-column field="actions" label="Actions" v-slot="props">
-                <b-button tag="a" type="is-primary" :href="generateFileUri(props.row.filename)">
+                <b-button tag="a" type="is-primary" @click="download(props.row)">
                     <b-icon icon="download"></b-icon>
                 </b-button>
             </b-table-column>
@@ -51,19 +78,38 @@
 </template>
 
 <script>
+    import { saveAs } from 'file-saver';
     import PaginatedTable from "../../components/PaginatedTable";
     import UploadFile from "./UploadFile";
     export default {
         name: "FileList",
         components: {UploadFile, PaginatedTable},
         data() {
             return {
-                uploadDialog: false,
+              headers: [
+                {
+                  text: 'Name',
+                  value: 'name',
+                  searchable: true,
+                },
+                {
+                  text: 'Type',
+                  value: 'type',
+                  searchable: true,
+                },
+                {
+                  text: 'Size',
+                  value: 'size',
+                  searchable: true,
+                },
+              ],
+              uploadDialog: false,
             }
         },
         methods: {
-            generateFileUri(filename) {
-                return `${process.env.VUE_APP_API_URL}../file/${filename}`
+            download(file) {
+              const response = this.$store.dispatch('file/download', file.id)
+              saveAs(response.data, file.name)
             },
             refreshList() {
                 this.$refs.table.fetchItems()

yarn.lock

@@ -3769,6 +3769,11 @@ file-loader@^4.0.0, file-loader@^4.2.0:
     loader-utils "^1.2.3"
     schema-utils "^2.5.0"
 
+file-saver@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-2.0.5.tgz#d61cfe2ce059f414d899e9dd6d4107ee25670c38"
+  integrity sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==
+
 file-uri-to-path@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"