increased minor version to 1.2.0 with back button in case of wrong prefix;

clean up of texts; Improved readme; and layout fixes for the TreeCard

README.md

@@ -11,7 +11,7 @@ file tree structure.
 - Search directories and files
 - The content of folders is "lazy-loaded" to prevent a long initial rendering time
 - prefix query parameter to start from a certain folder
-- It works **only for public S3 Buckets** (by version 1.1.5)
+- It works **only for public S3 Buckets** (by version 1.2.0)
 
 
 Check https://envicloud.wsl.ch/ as a demo.
@@ -185,5 +185,5 @@ For now only the s3Factory methods are being tested.
 
 - Rendering large amounts of folder and files is still pretty slow. For the https://envicloud.wsl.ch we are having folders which have >1k or even >4k files which makes the rendering from the v-tree-view component of vuetify very slow. To handle such large amounts of entries a virtual list is needed, which will probably be implemented in the future.
 - Bulk downloading files, for downloading mutliple files at once you need to use a different protocol / client, make sure to enable the `showProtocols` option.
-- Multiple entires >10k as mentioned the rendering isn't performant, so this issue isn't tackled yet, but if for any folder there are more than 10k entires the needs to be a pagniation of sorts or at least multiple requests to the backend. The default server side maximum seems to be 10k, this might be configurable, so how. For a multiple request scenario the `Marker` parameter can be used make any futher calls. The `Marker` would be the last key which was provided from the last request and from there the new request should provide again the amount given with the max-keys parameter or the server side maxium. (As of version 1.1.5 such a scenario isn't implemented yet.)
+- Multiple entires >10k as mentioned the rendering isn't performant, so this issue isn't tackled yet, but if for any folder there are more than 10k entires the needs to be a pagniation of sorts or at least multiple requests to the backend. The default server side maximum seems to be 10k, this might be configurable, so how. For a multiple request scenario the `Marker` parameter can be used make any futher calls. The `Marker` would be the last key which was provided from the last request and from there the new request should provide again the amount given with the max-keys parameter or the server side maxium. (As of version 1.2.0 such a scenario isn't implemented yet.)
 

package-lock.json

 {
   "name": "s3_browsing",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -14476,9 +14476,9 @@
       "dev": true
     },
     "node-forge": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
-      "integrity": "sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ==",
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
+      "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==",
       "dev": true
     },
     "node-int64": {
@@ -17261,12 +17261,12 @@
       "dev": true
     },
     "selfsigned": {
-      "version": "1.10.7",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.7.tgz",
-      "integrity": "sha512-8M3wBCzeWIJnQfl43IKwOmC4H/RAp50S8DF60znzjW5GVqTcSe2vWclt7hmYVPkKPlHWOu5EaWOMZ2Y6W8ZXTA==",
+      "version": "1.10.8",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.8.tgz",
+      "integrity": "sha512-2P4PtieJeEwVgTU9QEcwIRDQ/mXJLX8/+I3ur+Pg16nS8oNbrGxEso9NyYWy8NAmXiNl4dlAp5MwoNeCWzON4w==",
       "dev": true,
       "requires": {
-        "node-forge": "0.9.0"
+        "node-forge": "^0.10.0"
       }
     },
     "semver": {

package.json

 {
   "name": "s3_browsing",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "private": true,
   "description": "Web app for browsing through S3 XML and provide it's links.",
   "author": {

src/components/TreeCard.vue

 <template>
-  <v-card height="100%">
+  <v-card >
     <v-sheet class="pa-4" color="primary">
 
       <v-row no-gutters>
@@ -42,17 +42,37 @@
 
     </v-sheet>
 
-    <v-card-text :style="`max-height: ${height}; overflow:auto;`">
-      <TreeView :search="search"
+    <v-card-text v-if="contentMapValues"
+                  :style="`max-height: ${height}; overflow:auto;`">
+      <TreeView :items="contentMapValues"
+                :search="search"
                 :allCollapsed="allCollapsed"
                 @showSnack="catchShowSnack"
                 @collapsed="catchCollapsed" />
     </v-card-text>
 
+    <v-sheet v-if="!contentMapValues"
+              class="pa-4">
+
+      <v-card-text :style="`background-color: ${$vuetify.theme.themes.light.error};`">
+        {{ `No files or folder found for the prefix: ${prefix}` }}
+      </v-card-text>
+
+      <v-card-actions>
+        <v-btn color="secondary"
+                href="/">
+          Back to main site
+        </v-btn>
+      </v-card-actions>
+    </v-sheet>
+
   </v-card>
 </template>
 
 <script>
+import {
+  mapGetters,
+} from 'vuex';
 
 import IconButton from './IconButton';
 import TreeView from './TreeView';
@@ -64,6 +84,7 @@ export default {
       type: String,
       default: '75vh',
     },
+    prefix: String,
   },
   data: () => ({
     caseSensitive: false,
@@ -72,6 +93,10 @@ export default {
     allCollapsed: false,
   }),
   computed: {
+    ...mapGetters(['contentMap']),
+    contentMapValues() {
+      return this.contentMap ? Object.values(this.contentMap) : null;
+    },    
     // filter() {
     //   return this.caseSensitive
     //     ? (item, search, textKey) => item[textKey].indexOf(search) > -1

src/components/TreeView.vue

@@ -97,6 +97,8 @@ export default {
     search: String,
     caseSensitive: Boolean,
     allCollapsed: Boolean,
+    prefix: String,
+    items: Array,
   },
   computed: {
     ...mapGetters([
@@ -108,13 +110,6 @@ export default {
       'content',
       'contentLoading',
     ]),
-    items() {
-      return this.values ? this.values : [];
-    },
-    values() {
-      // return this.contentMap ? this.contentMap.values() : null;
-      return this.contentMap ? Object.values(this.contentMap) : null;
-    },
   },
   methods: {
     catchCopyClick(url) {

src/views/Home.vue

 <template>
   <v-container fluid>
 
-    <v-row v-if="loading" >
+    <v-row v-if="configLoading" >
       <v-col cols="12"
               sm="3">
         <PlaceholderCard />
@@ -40,13 +40,14 @@
                     @expand="catchBucketInfoExpand" />
       </v-col> -->
 
-      <v-col v-if="!contentError" 
+      <v-col v-if="!configLoading && !contentError" 
               cols="12"
               :sm="showProtocols ? 9 : 12" >
-        <TreeCard @showSnack="catchShowSnack" />
+        <TreeCard @showSnack="catchShowSnack"
+                  :prefix="urlPrefix" />
       </v-col>
 
-      <v-col v-if="showProtocols"
+      <v-col v-if="!loading && showProtocols"
               cols="12"
               sm="3" >
         <DownloadToolsCard :tools="getDownloadTools()" />
@@ -146,43 +147,46 @@ export default {
       this.$store.dispatch(GET_S3_CONTENT, { url: this.contentUrl, prefix: this.urlPrefix });
     },
     getDownloadTools() {
+      // not done via computedProperty because the DownloadToolCard can change the showDescription
+      // via computed that isn't working
+      
       if (!this.downloadTools) {
         const tools = [];
 
         if (this.cyberduckProfileName && this.cyberduckHostName && this.vendorUrl) {
           tools.push({
-            title: 'Download CyberDuck bookmark',
-            toolTip: 'Use CyberDuck to access the files.',
+            title: 'Download Cyberduck bookmark',
+            toolTip: 'Download a Cyberduck bookmark to access the files via the Cyberduck client.',
             image: this.imagesPng('./cyberduck-icon-64.png'),
             href: this.hrefCyberduckFile(this.urlPrefix),
             downloadFileName: `${this.cyberduckProfileName}.cyberduckprofile`,
             moreInfoUrl: 'https://cyberduck.io/',
             showDescription: false,
-            description: 'Use CyberDuck client to access the files the S3 bucket.',
+            description: 'Access the files in the S3 Bucket via Cyberduck client.',
           });
         }
 
         if (this.WebDAVDomainHttp) {
           tools.push({
             title: 'Browse via Http WebDAV',
-            toolTip: 'Use WebDAV to access the files.',
+            toolTip: 'Open a new tab to access the files via WebDAV.',
             image: this.imagesPng('./dav-100-2.png'),
             href: `${this.WebDAVDomainHttp}${this.urlPrefix}`,
             moreInfoUrl: 'https://webdav.io/webdav-client/',
             showDescription: false,
-            description: 'Direclty browse the files via WebDAV in the browser.',
+            description: 'Access the files in the S3 Bucket via the WebDAV protocol over HTTP.',
           });
         }
 
         if (this.WebDAVDomainHttps) {
           tools.push({
-            title: 'Brose via Https WebDAV',
+            title: 'Browse via Https WebDAV',
             toolTip: 'Use WebDAV to access the files.',
             image: this.imagesPng('./dav-100-2.png'),
             href: `${this.WebDAVDomainHttps}${this.urlPrefix}`,
             moreInfoUrl: 'https://webdav.io/webdav-client/',
             showDescription: false,
-            description: 'Direclty browse the files via WebDAV in the browser.',
+            description: 'Access the files in the S3 Bucket via the WebDAV protocol over HTTP(S).',
           });
         }