Improvements

Former-commit-id: 75aaab2410d4e93a892f1c68d253ecf2c3def92b [formerly d9f37f49e3b705eb7a632b0f6e44cbabdfd296ac] [formerly 5ac5b5223ad348b589861a50f8ee41228a18d13f [formerly 7809b778bb2d65a3faff5dd5f928c1786f227def]]
Former-commit-id: 30bac294d7bf5e875d4fb365321dc1fde16a50df [formerly df3d70ac1c0afcc4c7aed0a8e4ce2d2aa815ee0c]
Former-commit-id: f82ccdf36a7d088cbd2a4a3ada53876e823a64e2

_assets/src/App.vue

@@ -6,9 +6,9 @@
         <search></search>
       </div>
       <div>
-        <rename-button></rename-button>
-        <move-button></move-button>
-        <delete-button></delete-button>
+        <rename-button v-show="showRenameButton()"></rename-button>
+        <move-button v-show="showDeleteButton()"></move-button>
+        <delete-button v-show="showDeleteButton()"></delete-button>
         <switch-button v-show="req.kind !== 'editor'"></switch-button>
         <download-button></download-button>
         <upload-button v-show="showUpload()"></upload-button>
@@ -47,6 +47,8 @@
         </div>
     </div>
     
+    <rename-prompt v-show="showRename" :class="{ active: showRename }"></rename-prompt>
+    <delete-prompt v-show="showDelete" :class="{ active: showDelete }"></delete-prompt>
     <info-prompt v-show="showInfo" :class="{ active: showInfo }"></info-prompt>
     <help v-show="showHelp" :class="{ active: showHelp }"></help>
 
@@ -64,7 +66,9 @@ import Listing from './components/Listing'
 import InfoButton from './components/InfoButton'
 import InfoPrompt from './components/InfoPrompt'
 import DeleteButton from './components/DeleteButton'
+import DeletePrompt from './components/DeletePrompt'
 import RenameButton from './components/RenameButton'
+import RenamePrompt from './components/RenamePrompt'
 import UploadButton from './components/UploadButton'
 import DownloadButton from './components/DownloadButton'
 import SwitchButton from './components/SwitchViewButton'
@@ -146,7 +150,9 @@ export default {
     InfoPrompt,
     Help,
     DeleteButton,
+    DeletePrompt,
     RenameButton,
+    RenamePrompt,
     DownloadButton,
     UploadButton,
     SwitchButton,
@@ -171,6 +177,28 @@ export default {
       if (this.req.kind === 'editor') return false
       return this.user.allowNew
     },
+    showDeleteButton: function () {
+      if (this.req.kind === 'listing') {
+        if (this.listing.selected.length === 0) {
+          return false
+        }
+
+        return this.user.allowEdit
+      }
+
+      return this.user.allowEdit
+    },
+    showRenameButton: function () {
+      if (this.req.kind === 'listing') {
+        if (this.listing.selected.length === 1) {
+          return this.user.allowEdit
+        }
+
+        return false
+      }
+
+      return this.user.allowEdit
+    },
     resetPrompts: resetPrompts
   }
 }

_assets/src/components/DeletePrompt.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="prompt">
+    <h3>Delete files</h3>
+    <p v-show="req.kind !== 'listing'">Are you sure you want to delete this file/folder?</p>
+    <p v-show="req.kind === 'listing'">Are you sure you want to delete {{ listing.selected.length }} file(s)?</p>
+    <div>
+      <button @click="submit" autofocus>Delete</button>
+      <button @click="cancel" class="cancel">Cancel</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import webdav from '../webdav'
+import page from '../page'
+
+export default {
+  name: 'delete-prompt',
+  data: function () {
+    return window.info
+  },
+  methods: {
+    cancel: function (event) {
+      this.showDelete = false
+    },
+    submit: function (event) {
+      this.showDelete = false
+      // buttons.setLoading('delete')
+
+      if (this.req.kind !== 'listing') {
+        webdav.trash(window.location.pathname)
+          .then(() => {
+            // buttons.setDone('delete')
+            page.open(page.removeLastDir(window.location.pathname))
+          })
+          .catch(error => {
+            // buttons.setDone('delete', false)
+            console.log(error)
+          })
+
+        return
+      }
+
+      if (this.listing.selected.length === 0) {
+        // This shouldn't happen...
+        return
+      }
+
+      if (this.listing.selected.length === 1) {
+        webdav.trash(this.req.data.items[this.listing.selected[0]].url)
+          .then(() => {
+            // buttons.setDone('delete')
+            page.reload()
+          })
+          .catch(error => {
+            // buttons.setDone('delete', false)
+            console.log(error)
+          })
+
+        return
+      }
+
+      // More than one item!
+      let promises = []
+
+      for (let index of this.listing.selected) {
+        promises.push(webdav.trash(this.req.data.items[index].url))
+      }
+
+      Promise.all(promises)
+        .then(() => {
+          page.reload()
+          // buttons.setDone('delete')
+        })
+        .catch(error => {
+          console.log(error)
+          // buttons.setDone('delete', false)
+        })
+    }
+  }
+}
+</script>

_assets/src/components/RenamePrompt.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="prompt">
+    <h3>Rename</h3>
+    <p>Insert a new name for <code>{{ oldName() }}</code>:</p>
+    <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
+    <div>
+      <button @click="submit" type="submit" autofocus>Rename</button>
+      <button @click="cancel" class="cancel">Cancel</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import page from '../page'
+import webdav from '../webdav'
+
+var $ = window.info
+
+export default {
+  name: 'rename-prompt',
+  data: function () {
+    return {
+      name: ''
+    }
+  },
+  methods: {
+    cancel: function (event) {
+      $.showRename = false
+      this.name = ''
+    },
+    oldName: function () {
+      if ($.req.kind !== 'listing') {
+        return $.req.data.name
+      }
+
+      if ($.listing.selected.length === 0 || $.listing.selected.length > 1) {
+        // This shouldn't happen.
+        return
+      }
+
+      return $.req.data.items[$.listing.selected[0]].name
+    },
+    submit: function (event) {
+      let oldLink = ''
+      let newLink = ''
+
+      if ($.req.kind !== 'listing') {
+        oldLink = $.req.data.url
+      } else {
+        oldLink = $.req.data.items[$.listing.selected[0]].url
+      }
+
+      newLink = page.removeLastDir(oldLink) + '/' + this.name
+
+      // buttons.setLoading('rename')
+
+      webdav.move(oldLink, newLink)
+        .then(() => {
+          // TODO: keep selected after reload?
+          page.reload()
+          // buttons.setDone('rename')
+        }).catch(error => {
+          // buttons.setDone('rename', false)
+          console.log(error)
+        })
+
+      this.name = ''
+      $.showRename = false
+      return
+    }
+  }
+}
+</script>

_assets/src/main.js

@@ -8,10 +8,10 @@ Vue.config.productionTip = false
 
 var $ = (window.info || window.alert('Something is wrong, please refresh!'))
 
-// TODO: keep this here?
-document.title = $.req.name
+// TODO: keep this here? Maybe on app.vue?
+document.title = $.req.data.name
 
-// TODO: keep this here?
+// TODO: keep this here? Maybe on app.vue?
 window.addEventListener('popstate', (event) => {
   event.preventDefault()
   event.stopPropagation()
@@ -19,6 +19,12 @@ window.addEventListener('popstate', (event) => {
   $.req.kind = ''
   $.listing.selected.length = 0
   $.listing.selected.multiple = false
+  // TODO: find a better way to do this. Maybe on app.vue?
+  window.info.showHelp = false
+  window.info.showInfo = false
+  window.info.showDelete = false
+  window.info.showRename = false
+  window.info.showMove = false
 
   let request = new window.XMLHttpRequest()
   request.open('GET', event.state.url, true)

_assets/src/page.js

@@ -16,11 +16,11 @@ function open (url, history) {
 
       if (history) {
         window.history.pushState({
-          name: $.req.name,
+          name: $.req.data.name,
           url: url
-        }, $.req.name, url)
+        }, $.req.data.name, url)
 
-        document.title = $.req.name
+        document.title = $.req.data.name
       }
     } else {
       console.log(request.responseText)