Improvements and more reliability :)

_assets/src/components/Listing.vue

@@ -1,84 +1,81 @@
 <template>
-    <div id="listing"
-      :class="req.data.display"
-      @drop="drop"
-      @dragenter="dragEnter"
-      @dragend="dragEnd">
+  <div id="listing"
+    :class="req.data.display"
+    @drop="drop"
+    @dragenter="dragEnter"
+    @dragend="dragEnd">
+    <div>
+      <div class="item header">
+        <div></div>
         <div>
-            <div class="item header">
-                <div></div>
-                <div>
-                    <p v-bind:class="{ active: req.data.sort === 'name' }" class="name"><span>Name</span>
-                        <a v-if="req.data.sort === 'name' && req.data.order != 'asc'" href="?sort=name&order=asc"><i class="material-icons">arrow_upward</i></a>
-                        <a v-else href="?sort=name&order=desc"><i class="material-icons">arrow_downward</i></a>
-                    </p>
+          <p v-bind:class="{ active: req.data.sort === 'name' }" class="name"><span>Name</span>
+            <a v-if="req.data.sort === 'name' && req.data.order != 'asc'" href="?sort=name&order=asc"><i class="material-icons">arrow_upward</i></a>
+            <a v-else href="?sort=name&order=desc"><i class="material-icons">arrow_downward</i></a>
+          </p>
 
-                    <p v-bind:class="{ active: req.data.sort === 'size' }" class="size"><span>Size</span>
-                        <a v-if="req.data.sort === 'size' && req.data.order != 'asc'" href="?sort=size&order=asc"><i class="material-icons">arrow_upward</i></a>
-                        <a v-else href="?sort=size&order=desc"><i class="material-icons">arrow_downward</i></a>
-                    </p>
+          <p v-bind:class="{ active: req.data.sort === 'size' }" class="size"><span>Size</span>
+            <a v-if="req.data.sort === 'size' && req.data.order != 'asc'" href="?sort=size&order=asc"><i class="material-icons">arrow_upward</i></a>
+            <a v-else href="?sort=size&order=desc"><i class="material-icons">arrow_downward</i></a>
+          </p>
 
-                    <p class="modified">Last modified</p>
-                </div>
-            </div>
-        </div>
-
-        <h2 v-if="(req.data.numDirs + req.data.numFiles) == 0" class="message">It feels lonely here :'(</h2>
-
-        <h2 v-if="req.data.numDirs > 0">Folders</h2>
-        <div v-if="req.data.numDirs > 0">
-          <item
-            v-for="(item, index) in req.data.items"
-            v-if="item.isDir"
-            :key="base64(item.name)"
-            v-bind:index="index"
-            v-bind:name="item.name"
-            v-bind:isDir="item.isDir"
-            v-bind:url="item.url"
-            v-bind:modified="item.modified"
-            v-bind:type="item.type"
-            v-bind:size="item.size">
-          </item>
-        </div>
-
-        <h2 v-if="req.data.numFiles > 0">Files</h2>
-        <div v-if="req.data.numFiles > 0">
-          <item
-            v-for="(item, index) in req.data.items"
-            v-if="!item.isDir"
-            :key="base64(item.name)"
-            v-bind:index="index"
-            v-bind:name="item.name"
-            v-bind:isDir="item.isDir"
-            v-bind:url="item.url"
-            v-bind:modified="item.modified"
-            v-bind:type="item.type"
-            v-bind:size="item.size">
-          </item>
-        </div>
-
-        <input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" value="Upload" multiple>
-
-        <div v-show="$store.state.multiple" :class="{ active: $store.state.multiple }" id="multiple-selection">
-          <p>Multiple selection enabled</p>
-          <div @click="$store.commit('multiple', false)" tabindex="0" role="button" title="Clear" aria-label="Clear" class="action">
-            <i class="material-icons" title="Clear">clear</i>
-          </div>
+          <p class="modified">Last modified</p>
         </div>
+      </div>
     </div>
+
+    <h2 v-if="(req.data.numDirs + req.data.numFiles) == 0" class="message">It feels lonely here :'(</h2>
+
+    <h2 v-if="req.data.numDirs > 0">Folders</h2>
+    <div v-if="req.data.numDirs > 0">
+      <item v-for="(item, index) in req.data.items"
+        v-if="item.isDir"
+        :key="base64(item.name)"
+        v-bind:index="index"
+        v-bind:name="item.name"
+        v-bind:isDir="item.isDir"
+        v-bind:url="item.url"
+        v-bind:modified="item.modified"
+        v-bind:type="item.type"
+        v-bind:size="item.size">
+      </item>
+    </div>
+
+    <h2 v-if="req.data.numFiles > 0">Files</h2>
+    <div v-if="req.data.numFiles > 0">
+      <item v-for="(item, index) in req.data.items"
+        v-if="!item.isDir"
+        :key="base64(item.name)"
+        v-bind:index="index"
+        v-bind:name="item.name"
+        v-bind:isDir="item.isDir"
+        v-bind:url="item.url"
+        v-bind:modified="item.modified"
+        v-bind:type="item.type"
+        v-bind:size="item.size">
+      </item>
+    </div>
+
+    <input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" value="Upload" multiple>
+
+    <div v-show="$store.state.multiple" :class="{ active: $store.state.multiple }" id="multiple-selection">
+    <p>Multiple selection enabled</p>
+      <div @click="$store.commit('multiple', false)" tabindex="0" role="button" title="Clear" aria-label="Clear" class="action">
+        <i class="material-icons" title="Clear">clear</i>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import {mapState} from 'vuex'
 import Item from './ListingItem'
 import webdav from '../utils/webdav'
 import page from '../utils/page'
 
 export default {
   name: 'listing',
-  data: function () {
-    return window.info
-  },
   components: { Item },
+  computed: mapState(['req']),
   mounted: function () {
     document.addEventListener('dragover', function (event) {
       event.preventDefault()
@@ -98,11 +95,7 @@ export default {
       })
     },
     dragEnd: function (event) {
-      let items = document.getElementsByClassName('item')
-
-      Array.from(items).forEach(file => {
-        file.style.opacity = 1
-      })
+      this.resetOpacity()
     },
     drop: function (event) {
       event.preventDefault()
@@ -125,17 +118,22 @@ export default {
 
         this.handleFiles(files, '')
       } else {
-        let items = document.getElementsByClassName('item')
-
-        Array.from(items).forEach(file => {
-          file.style.opacity = 1
-        })
+        this.resetOpacity()
       }
     },
     uploadInput: function (event) {
       this.handleFiles(event.currentTarget.files, '')
     },
+    resetOpacity: function () {
+      let items = document.getElementsByClassName('item')
+
+      Array.from(items).forEach(file => {
+        file.style.opacity = 1
+      })
+    },
     handleFiles: function (files, base) {
+      this.resetOpacity()
+
       // buttons.setLoading('upload')
       let promises = []
 
@@ -144,14 +142,14 @@ export default {
       }
 
       Promise.all(promises)
-      .then(() => {
-        page.reload()
-        // buttons.setDone('upload')
-      })
-      .catch(e => {
-        console.log(e)
-        // buttons.setDone('upload', false)
-      })
+        .then(() => {
+          page.reload()
+          // buttons.setDone('upload')
+        })
+        .catch(e => {
+          console.log(e)
+          // buttons.setDone('upload', false)
+        })
 
       return false
     }