rename _assets to assets
Former-commit-id: 3bb6cc662da9e9255bd61fef42430c271002fd49 [formerly eaf1785c4f85522e4eb66d00a6ae9dd9ecc4fcb4] [formerly addd3ffe1396e6df84cdc3e8787d57ffb2be3dc6 [formerly 800693ad49e76c880230eb8cd1bc4a95e8c39fff]] Former-commit-id: 6c24d30f26529457202f470620a0ea1d31772b13 [formerly 384d2af17fe100b9db91462eb41337f9dff855f4] Former-commit-id: 94f4933e12f97ee7468c884f041612498e07ba32
This commit is contained in:
Henrique Dias
279
assets/src/components/Main.vue
Normal file
279
assets/src/components/Main.vue
Normal file
@@ -0,0 +1,279 @@
|
||||
<template>
|
||||
<div :class="{ multiple, loading }">
|
||||
<header>
|
||||
<div>
|
||||
<button @click="openSidebar" aria-label="Toggle sidebar" title="Toggle sidebar" class="action">
|
||||
<i class="material-icons">menu</i>
|
||||
</button>
|
||||
<img src="../assets/logo.svg" alt="File Manager">
|
||||
<search></search>
|
||||
</div>
|
||||
<div>
|
||||
<button @click="openSearch" aria-label="Search" title="Search" class="search-button action">
|
||||
<i class="material-icons">search</i>
|
||||
</button>
|
||||
|
||||
<button v-show="isEditor" aria-label="Save" class="action" id="save">
|
||||
<i class="material-icons" title="Save">save</i>
|
||||
</button>
|
||||
<rename-button v-show="!loading && showRenameButton"></rename-button>
|
||||
<move-button v-show="!loading && showMoveButton"></move-button>
|
||||
<delete-button v-show="!loading && showDeleteButton"></delete-button>
|
||||
<switch-button v-show="!loading && req.kind !== 'editor'"></switch-button>
|
||||
<download-button></download-button>
|
||||
<upload-button v-show="!loading && showUpload"></upload-button>
|
||||
<info-button></info-button>
|
||||
|
||||
<button v-show="isListing" @click="$store.commit('multiple', true)" aria-label="Select multiple" class="action">
|
||||
<i class="material-icons">check_circle</i>
|
||||
<span>Select</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<sidebar></sidebar>
|
||||
|
||||
<main>
|
||||
<div v-if="loading">
|
||||
<h2 class="message">
|
||||
<span>Loading...</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div v-else-if="error">
|
||||
<h2 class="message" v-if="error === 404">
|
||||
<i class="material-icons">gps_off</i>
|
||||
<span>This location can't be reached.</span>
|
||||
</h2>
|
||||
<h2 class="message" v-else-if="error === 403">
|
||||
<i class="material-icons">error</i>
|
||||
<span>You're not welcome here.</span>
|
||||
</h2>
|
||||
<h2 class="message" v-else>
|
||||
<i class="material-icons">error_outline</i>
|
||||
<span>Something really went wrong.</span>
|
||||
</h2>
|
||||
</div>
|
||||
<editor v-else-if="isEditor"></editor>
|
||||
<listing v-else-if="isListing"></listing>
|
||||
<preview v-else-if="isPreview"></preview>
|
||||
</main>
|
||||
|
||||
<prompts></prompts>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Search from './Search'
|
||||
import Preview from './Preview'
|
||||
import Listing from './Listing'
|
||||
import Editor from './Editor'
|
||||
import Sidebar from './Sidebar'
|
||||
import Prompts from './prompts/Prompts'
|
||||
import InfoButton from './buttons/Info'
|
||||
import DeleteButton from './buttons/Delete'
|
||||
import RenameButton from './buttons/Rename'
|
||||
import UploadButton from './buttons/Upload'
|
||||
import DownloadButton from './buttons/Download'
|
||||
import SwitchButton from './buttons/SwitchView'
|
||||
import MoveButton from './buttons/Move'
|
||||
import css from '@/utils/css'
|
||||
import api from '@/utils/api'
|
||||
import {mapGetters, mapState} from 'vuex'
|
||||
|
||||
function updateColumnSizes () {
|
||||
let columns = Math.floor(document.querySelector('main').offsetWidth / 300)
|
||||
let items = css(['#listing.mosaic .item', '.mosaic#listing .item'])
|
||||
|
||||
if (columns === 0) columns = 1
|
||||
|
||||
items.style.width = `calc(${100 / columns}% - 1em)`
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'main',
|
||||
components: {
|
||||
Search,
|
||||
Preview,
|
||||
Listing,
|
||||
Editor,
|
||||
Sidebar,
|
||||
InfoButton,
|
||||
DeleteButton,
|
||||
RenameButton,
|
||||
DownloadButton,
|
||||
UploadButton,
|
||||
SwitchButton,
|
||||
MoveButton,
|
||||
Prompts
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'selectedCount'
|
||||
]),
|
||||
...mapState([
|
||||
'req',
|
||||
'user',
|
||||
'reload',
|
||||
'multiple'
|
||||
]),
|
||||
isListing () {
|
||||
return this.req.kind === 'listing' && !this.loading
|
||||
},
|
||||
isPreview () {
|
||||
return this.req.kind === 'preview' && !this.loading
|
||||
},
|
||||
isEditor () {
|
||||
return this.req.kind === 'editor' && !this.loading
|
||||
},
|
||||
showUpload () {
|
||||
if (this.req.kind === 'editor') return false
|
||||
return this.user.allowNew
|
||||
},
|
||||
showDeleteButton () {
|
||||
if (this.req.kind === 'listing') {
|
||||
if (this.selectedCount === 0) {
|
||||
return false
|
||||
}
|
||||
|
||||
return this.user.allowEdit
|
||||
}
|
||||
|
||||
return this.user.allowEdit
|
||||
},
|
||||
showRenameButton () {
|
||||
if (this.req.kind === 'listing') {
|
||||
if (this.selectedCount === 1) {
|
||||
return this.user.allowEdit
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
return this.user.allowEdit
|
||||
},
|
||||
showMoveButton () {
|
||||
if (this.req.kind !== 'listing') {
|
||||
return false
|
||||
}
|
||||
|
||||
if (this.selectedCount > 0) {
|
||||
return this.user.allowEdit
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
loading: true,
|
||||
error: null
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.fetchData()
|
||||
// TODO: finish this box
|
||||
// this.$store.commit('showHover', 'error')
|
||||
},
|
||||
watch: {
|
||||
'$route': 'fetchData',
|
||||
'reload': function () {
|
||||
this.$store.commit('setReload', false)
|
||||
this.fetchData()
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
updateColumnSizes()
|
||||
window.addEventListener('resize', updateColumnSizes)
|
||||
window.addEventListener('keydown', (event) => {
|
||||
// Esc!
|
||||
if (event.keyCode === 27) {
|
||||
this.$store.commit('closeHovers')
|
||||
|
||||
// Unselect all files and folders.
|
||||
if (this.req.kind === 'listing') {
|
||||
let items = document.getElementsByClassName('item')
|
||||
Array.from(items).forEach(link => {
|
||||
link.setAttribute('aria-selected', false)
|
||||
})
|
||||
|
||||
this.$store.commit('resetSelected')
|
||||
}
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
// Del!
|
||||
if (event.keyCode === 46) {
|
||||
if (this.showDeleteButton) {
|
||||
this.$store.commit('showHover', 'delete')
|
||||
}
|
||||
}
|
||||
|
||||
// F1!
|
||||
if (event.keyCode === 112) {
|
||||
event.preventDefault()
|
||||
this.$store.commit('showHover', 'help')
|
||||
}
|
||||
|
||||
// F2!
|
||||
if (event.keyCode === 113) {
|
||||
if (this.showRenameButton) {
|
||||
this.$store.commit('showHover', 'rename')
|
||||
}
|
||||
}
|
||||
|
||||
// CTRL + S
|
||||
if (event.ctrlKey || event.metaKey) {
|
||||
switch (String.fromCharCode(event.which).toLowerCase()) {
|
||||
case 's':
|
||||
event.preventDefault()
|
||||
|
||||
if (this.req.kind !== 'editor') {
|
||||
window.location = '?download=true'
|
||||
return
|
||||
}
|
||||
|
||||
// TODO: save file on editor!
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
fetchData () {
|
||||
// Set loading to true and reset the error.
|
||||
this.loading = true
|
||||
this.error = null
|
||||
|
||||
// Reset selected items and multiple selection.
|
||||
this.$store.commit('resetSelected')
|
||||
this.$store.commit('multiple', false)
|
||||
this.$store.commit('closeHovers')
|
||||
|
||||
let url = this.$route.path
|
||||
if (url === '') url = '/'
|
||||
if (url[0] !== '/') url = '/' + url
|
||||
|
||||
api.fetch(url)
|
||||
.then((trueURL) => {
|
||||
if (!url.endsWith('/') && trueURL.endsWith('/')) {
|
||||
window.history.replaceState(window.history.state, document.title, window.location.pathname + '/')
|
||||
}
|
||||
|
||||
this.loading = false
|
||||
})
|
||||
.catch(error => {
|
||||
// TODO: 404, 403 and 500!
|
||||
console.log(error)
|
||||
this.error = error
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
openSidebar () {
|
||||
this.$store.commit('showHover', 'sidebar')
|
||||
},
|
||||
openSearch () {
|
||||
this.$store.commit('showHover', 'search')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user