mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-05-26 22:44:42 +00:00
team folder browsing with static team folder details
This commit is contained in:
@@ -45,8 +45,8 @@
|
||||
<PopoverItem name="team-folder" side="left">
|
||||
<TeamFolderPreview />
|
||||
<OptionGroup>
|
||||
<Option @click.native="$updateTeamFolder(clipboard[0])" :title="$t('Edit Members')" icon="rename" />
|
||||
<Option @click.native="$dissolveTeamFolder(clipboard[0])" :title="$t('Dissolve Team')" icon="trash" />
|
||||
<Option @click.native="$updateTeamFolder(teamFolder)" :title="$t('Edit Members')" icon="rename" />
|
||||
<Option @click.native="$dissolveTeamFolder(teamFolder)" :title="$t('Dissolve Team')" icon="trash" />
|
||||
</OptionGroup>
|
||||
</PopoverItem>
|
||||
</PopoverWrapper>
|
||||
@@ -118,14 +118,22 @@
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'currentTeamFolder',
|
||||
'isVisibleSidebar',
|
||||
'FilePreviewType',
|
||||
'currentFolder',
|
||||
'sharedDetail',
|
||||
'clipboard',
|
||||
]),
|
||||
teamFolder() {
|
||||
return this.currentTeamFolder ? this.currentTeamFolder : this.clipboard[0]
|
||||
},
|
||||
isLoadedFolder() {
|
||||
return this.sharedDetail && this.sharedDetail.data.attributes.item_id === this.$route.params.id
|
||||
if (this.$isThisRoute(this.$route, ['Public'])) {
|
||||
return this.sharedDetail && this.sharedDetail.data.attributes.item_id === this.$route.params.id
|
||||
}
|
||||
|
||||
return this.$route.params.id
|
||||
},
|
||||
hasCapacity() {
|
||||
// Check if storage limitation is set
|
||||
@@ -216,7 +224,8 @@
|
||||
if (this.isLoadedFolder) this.$router.back()
|
||||
},
|
||||
showTeamFolderMenu() {
|
||||
events.$emit('popover:open', 'team-folder')
|
||||
if (this.currentTeamFolder || this.clipboard[0])
|
||||
events.$emit('popover:open', 'team-folder')
|
||||
},
|
||||
showCreateMenu() {
|
||||
events.$emit('popover:open', 'desktop-create')
|
||||
|
||||
@@ -16,12 +16,12 @@
|
||||
<!--Thumbnail for item-->
|
||||
<div class="icon-item">
|
||||
<!--If is file or image, then link item-->
|
||||
<span v-if="isFile || (isImage && !item.data.attributes.thumbnail)" class="file-icon-text text-theme dark-text-theme">
|
||||
<span v-if="isFile || isVideo || (isImage && !item.data.attributes.thumbnail)" class="file-icon-text text-theme dark-text-theme">
|
||||
{{ item.data.attributes.mimetype | limitCharacters }}
|
||||
</span>
|
||||
|
||||
<!--Folder thumbnail-->
|
||||
<FontAwesomeIcon v-if="isFile || (isImage && !item.data.attributes.thumbnail)" class="file-icon" icon="file" />
|
||||
<FontAwesomeIcon v-if="isFile || isVideo || (isImage && !item.data.attributes.thumbnail)" class="file-icon" icon="file" />
|
||||
|
||||
<!--Image thumbnail-->
|
||||
<img loading="lazy" v-if="isImage && item.data.attributes.thumbnail" class="image" :src="item.data.attributes.thumbnail" :alt="item.data.attributes.name" />
|
||||
@@ -42,11 +42,6 @@
|
||||
<link-icon size="12" class="shared-icon text-theme dark-text-theme"/>
|
||||
</div>
|
||||
|
||||
<!--Participant owner Icon-->
|
||||
<!-- <div v-if="$checkPermission('master') && item.author !== 'user'" class="item-shared">
|
||||
<user-plus-icon size="12" class="shared-icon text-theme dark-text-theme"/>
|
||||
</div>-->
|
||||
|
||||
<!--Filesize and timestamp-->
|
||||
<span v-if="!isFolder" class="item-size">{{ item.data.attributes.filesize }}, {{ timeStamp }}</span>
|
||||
|
||||
@@ -220,17 +215,7 @@ export default {
|
||||
if (!this.mobileMultiSelect && this.$isMobile()) {
|
||||
|
||||
if (this.isFolder) {
|
||||
let route = this.$router.currentRoute.name
|
||||
|
||||
if (route === 'Public') {
|
||||
this.$router.push({name: 'Public', params: {token: this.$route.params.token, id: this.item.data.id}})
|
||||
} else if (route === 'Trash') {
|
||||
this.$router.push({name: 'Trash', params: {id: this.item.data.id}})
|
||||
} else if (['Files', 'MySharedItems'].includes(route)) {
|
||||
this.$router.push({name: 'Files', params: {id: this.item.data.id}})
|
||||
} else if (route === 'TeamFolders') {
|
||||
this.$router.push({name: 'TeamFolders', params: {id: this.item.data.id}})
|
||||
}
|
||||
this.$goToFileView(this.item.data.id)
|
||||
} else {
|
||||
|
||||
if (this.isImage || this.isVideo || this.isAudio || this.isPdf) {
|
||||
@@ -263,17 +248,7 @@ export default {
|
||||
// Clear selected items after open another folder
|
||||
this.$store.commit('CLIPBOARD_CLEAR')
|
||||
|
||||
let route = this.$router.currentRoute.name
|
||||
|
||||
if (route === 'Public') {
|
||||
this.$router.push({name: 'Public', params: {token: this.$route.params.token, id: this.item.data.id}})
|
||||
} else if (route === 'Trash') {
|
||||
this.$router.push({name: 'Trash', params: {id: this.item.data.id}})
|
||||
} else if (['Files', 'MySharedItems'].includes(route)) {
|
||||
this.$router.push({name: 'Files', params: {id: this.item.data.id}})
|
||||
} else if (route === 'TeamFolders') {
|
||||
this.$router.push({name: 'TeamFolders', params: {id: this.item.data.id}})
|
||||
}
|
||||
this.$goToFileView(this.item.data.id)
|
||||
}
|
||||
},
|
||||
renameItem: debounce(function (e) {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="info">
|
||||
<b class="title">The Team Project</b>
|
||||
<span class="subtitle">Last update a week ago</span>
|
||||
<TeamMembersPreview :folder="clipboard[0]" :avatar-size="32" class="members" />
|
||||
<TeamMembersPreview :folder="teamFolder" :avatar-size="32" class="members" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -19,8 +19,12 @@
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'clipboard'
|
||||
])
|
||||
'currentTeamFolder',
|
||||
'clipboard',
|
||||
]),
|
||||
teamFolder() {
|
||||
return this.currentTeamFolder ? this.currentTeamFolder : this.clipboard[0]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="team-folder-wrapper">
|
||||
<div v-if="! clipboard[0]" class="empty-state">
|
||||
<div v-if="! teamFolder" class="empty-state">
|
||||
<span>Not selected</span>
|
||||
</div>
|
||||
<TeamMembersPreview v-else :folder="clipboard[0]" :limit="true" :avatar-size="32" class="widget" />
|
||||
<TeamMembersPreview v-else :folder="teamFolder" :limit="true" :avatar-size="32" class="widget" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -18,8 +18,12 @@
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'clipboard'
|
||||
])
|
||||
'currentTeamFolder',
|
||||
'clipboard',
|
||||
]),
|
||||
teamFolder() {
|
||||
return this.currentTeamFolder ? this.currentTeamFolder : this.clipboard[0]
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
+13
-6
@@ -81,12 +81,6 @@ const FunctionHelpers = {
|
||||
return '/invoice/' + customer + '/' + id
|
||||
}
|
||||
|
||||
Vue.prototype.$openImageOnNewTab = function (source) {
|
||||
let win = window.open(source, '_blank')
|
||||
|
||||
win.focus()
|
||||
}
|
||||
|
||||
Vue.prototype.$uploadFiles = async function (files) {
|
||||
|
||||
if (files.length === 0) return
|
||||
@@ -207,6 +201,19 @@ const FunctionHelpers = {
|
||||
anchor.click()
|
||||
}
|
||||
|
||||
Vue.prototype.$goToFileView = function (id) {
|
||||
|
||||
let locations = {
|
||||
'Public': {name: 'Public', params: {token: this.$route.params.token, id: id}},
|
||||
'TeamFolders': {name: 'TeamFolders', params: {id: id}},
|
||||
'MySharedItems': {name: 'Files', params: {id: id}},
|
||||
'Trash': {name: 'Trash', params: {id: id}},
|
||||
'Files': {name: 'Files', params: {id: id}},
|
||||
}
|
||||
|
||||
this.$router.push(locations[this.$router.currentRoute.name])
|
||||
}
|
||||
|
||||
Vue.prototype.$isThisRoute = function (route, locations) {
|
||||
|
||||
return locations.includes(route.name)
|
||||
|
||||
Vendored
+2
@@ -5,6 +5,7 @@ import fileFunctions from './modules/fileFunctions'
|
||||
import fileBrowser from './modules/fileBrowser'
|
||||
import userAuth from './modules/userAuth'
|
||||
import sharing from './modules/sharing'
|
||||
import teams from './modules/teams'
|
||||
import app from './modules/app'
|
||||
|
||||
Vue.use(Vuex)
|
||||
@@ -15,6 +16,7 @@ export default new Vuex.Store({
|
||||
fileBrowser,
|
||||
userAuth,
|
||||
sharing,
|
||||
teams,
|
||||
app,
|
||||
}
|
||||
})
|
||||
-29
@@ -46,35 +46,6 @@ const actions = {
|
||||
}
|
||||
})
|
||||
},
|
||||
getTeamFolder: ({commit, getters}, id) => {
|
||||
commit('LOADING_STATE', {loading: true, data: []})
|
||||
|
||||
axios
|
||||
.get(`${getters.api}/teams/folders/${id}/${getters.sorting.URI}`)
|
||||
.then(response => {
|
||||
commit('LOADING_STATE', {loading: false, data: response.data.folders.data})
|
||||
commit('SET_CURRENT_FOLDER', response.data.root)
|
||||
|
||||
events.$emit('scrollTop')
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
// Redirect if unauthenticated
|
||||
if ([401, 403].includes(error.response.status)) {
|
||||
|
||||
commit('SET_AUTHORIZED', false)
|
||||
router.push({name: 'SignIn'})
|
||||
|
||||
} else {
|
||||
|
||||
// Show error message
|
||||
events.$emit('alert:open', {
|
||||
title: i18n.t('popup_error.title'),
|
||||
message: i18n.t('popup_error.message'),
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getRecentUploads: ({commit, getters}) => {
|
||||
commit('LOADING_STATE', {loading: true, data: []})
|
||||
|
||||
|
||||
Vendored
+68
@@ -0,0 +1,68 @@
|
||||
import router from "../../router";
|
||||
import {events} from "../../bus";
|
||||
import i18n from "../../i18n";
|
||||
import axios from "axios";
|
||||
|
||||
const defaultState = {
|
||||
currentTeamFolder: undefined,
|
||||
}
|
||||
|
||||
const actions = {
|
||||
getTeamFolder: ({commit, getters}, id) => {
|
||||
commit('LOADING_STATE', {loading: true, data: []})
|
||||
|
||||
if (typeof id === 'undefined') {
|
||||
commit('SET_CURRENT_TEAM_FOLDER', null)
|
||||
}
|
||||
|
||||
axios
|
||||
.get(`${getters.api}/teams/folders/${id}/${getters.sorting.URI}`)
|
||||
.then(response => {
|
||||
let folders = response.data.folders.data
|
||||
let files = response.data.files.data
|
||||
|
||||
commit('LOADING_STATE', {loading: false, data: folders.concat(files)})
|
||||
commit('SET_CURRENT_FOLDER', response.data.root)
|
||||
|
||||
if (! getters.currentTeamFolder || getters.currentTeamFolder.data.id !== response.data.teamFolder.data.id) {
|
||||
commit('SET_CURRENT_TEAM_FOLDER', response.data.teamFolder)
|
||||
}
|
||||
|
||||
events.$emit('scrollTop')
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
// Redirect if unauthenticated
|
||||
if ([401, 403].includes(error.response.status)) {
|
||||
|
||||
commit('SET_AUTHORIZED', false)
|
||||
router.push({name: 'SignIn'})
|
||||
|
||||
} else {
|
||||
|
||||
// Show error message
|
||||
events.$emit('alert:open', {
|
||||
title: i18n.t('popup_error.title'),
|
||||
message: i18n.t('popup_error.message'),
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
const mutations = {
|
||||
SET_CURRENT_TEAM_FOLDER(state, payload) {
|
||||
state.currentTeamFolder = payload
|
||||
}
|
||||
}
|
||||
|
||||
const getters = {
|
||||
currentTeamFolder: state => state.currentTeamFolder,
|
||||
}
|
||||
|
||||
export default {
|
||||
state: defaultState,
|
||||
getters,
|
||||
actions,
|
||||
mutations
|
||||
}
|
||||
@@ -210,6 +210,7 @@
|
||||
|
||||
events.$on('context-menu:show', (event, item) => this.item = item)
|
||||
events.$on('mobile-context-menu:show', item => this.item = item)
|
||||
events.$on('context-menu:current-folder', folder => this.item = folder)
|
||||
|
||||
events.$on('action:confirmed', data => {
|
||||
|
||||
|
||||
Reference in New Issue
Block a user