team folder browsing with static team folder details

This commit is contained in:
Peter Papp
2021-08-31 14:08:47 +02:00
parent f44e262d6e
commit a3516769de
46 changed files with 317 additions and 225 deletions
@@ -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
View File
@@ -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)
+2
View File
@@ -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
View File
@@ -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: []})
+68
View File
@@ -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 => {