change color of book read icon #105, basic .pdf reader #107, fix: cover path updating properly #102, step forward/backward from book edit modal #100, add all files tab to edit modal #99, select input auto submit on blur #98

client/components/tables/AllFilesTable.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="w-full my-2">
+    <div class="w-full bg-primary px-6 py-2 flex items-center cursor-pointer">
+      <p class="pr-4">Files</p>
+      <span class="bg-black-400 rounded-xl py-1 px-2 text-sm font-mono">{{ allFiles.length }}</span>
+      <div class="flex-grow" />
+
+      <ui-btn small :color="showFullPath ? 'gray-600' : 'primary'" @click.stop="showFullPath = !showFullPath">Full Path</ui-btn>
+    </div>
+    <div class="w-full">
+      <table class="text-sm tracksTable">
+        <tr class="font-book">
+          <th class="text-left px-4">Path</th>
+          <th class="text-left px-4 w-24">Filetype</th>
+          <th v-if="userCanDownload" class="text-center w-20">Download</th>
+        </tr>
+        <template v-for="file in allFiles">
+          <tr :key="file.path">
+            <td class="font-book pl-2">
+              {{ showFullPath ? file.fullPath : file.path }}
+            </td>
+            <td class="text-xs">
+              <p>{{ file.filetype }}</p>
+            </td>
+            <td v-if="userCanDownload" class="text-center">
+              <a :href="`/s/book/${audiobookId}/${file.relativePath}?token=${userToken}`" download><span class="material-icons icon-text">download</span></a>
+            </td>
+          </tr>
+        </template>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    audiobook: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      showFullPath: false
+    }
+  },
+  computed: {
+    audiobookId() {
+      return this.audiobook.id
+    },
+    audiobookPath() {
+      return this.audiobook.path
+    },
+    userCanDownload() {
+      return this.$store.getters['user/getUserCanDownload']
+    },
+    userToken() {
+      return this.$store.getters['user/getToken']
+    },
+    isMissing() {
+      return this.audiobook.isMissing
+    },
+    showDownload() {
+      return this.userCanDownload && !this.isMissing
+    },
+    otherFiles() {
+      return this.audiobook.otherFiles || []
+    },
+    audioFiles() {
+      return this.audiobook.audioFiles || []
+    },
+    audioFilesCleaned() {
+      return this.audioFiles.map((af) => {
+        return {
+          path: af.path,
+          fullPath: af.fullPath,
+          relativePath: this.getRelativePath(af.path),
+          filetype: 'audio'
+        }
+      })
+    },
+    otherFilesCleaned() {
+      return this.otherFiles.map((af) => {
+        return {
+          path: af.path,
+          fullPath: af.fullPath,
+          relativePath: this.getRelativePath(af.path),
+          filetype: af.filetype
+        }
+      })
+    },
+    allFiles() {
+      return this.audioFilesCleaned.concat(this.otherFilesCleaned)
+    }
+  },
+  methods: {
+    getRelativePath(path) {
+      var filePath = path.replace(/\\/g, '/')
+      var audiobookPath = this.audiobookPath.replace(/\\/g, '/')
+      return filePath
+        .replace(audiobookPath + '/', '')
+        .replace(/%/g, '%25')
+        .replace(/#/g, '%23')
+    }
+  },
+  mounted() {}
+}
+</script>