Skip to content

Commit

Permalink
Add trashbin component to avoid duplicated code
Browse files Browse the repository at this point in the history
  • Loading branch information
JanAckermann committed Mar 15, 2022
1 parent 73a0d04 commit 984d560
Show file tree
Hide file tree
Showing 8 changed files with 605 additions and 208 deletions.
123 changes: 123 additions & 0 deletions packages/web-app-files/src/components/Trashbin.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
<template>
<div>
<list-loader v-if="loadResourcesTask.isRunning" />
<template v-else>
<no-content-message
v-if="isEmpty"
id="files-trashbin-empty"
class="files-empty"
icon="delete-bin-5"
>
<template #message>
<span v-if="noContentMessage">{{ noContentMessage }}</span>
<span v-else v-translate>You have no deleted files</span>
</template>
</no-content-message>
<resource-table
v-else
id="files-trashbin-table"
v-model="selected"
class="files-table"
:class="{ 'files-table-squashed': !sidebarClosed }"
:are-paths-displayed="true"
:are-thumbnails-displayed="false"
:resources="paginatedResources"
:are-resources-clickable="false"
:header-position="fileListHeaderY"
:sort-by="sortBy"
:sort-dir="sortDir"
@sort="handleSort"
>
<template #contextMenu="{ resource }">
<context-actions v-if="isResourceInSelection(resource)" :items="selected" />
</template>
<template #footer>
<pagination :pages="paginationPages" :current-page="paginationPage" />
<list-info
v-if="paginatedResources.length > 0"
class="oc-width-1-1 oc-my-s"
:files="totalFilesCount.files"
:folders="totalFilesCount.folders"
/>
</template>
</resource-table>
</template>
</div>
</template>

<script>
import { mapGetters, mapMutations, mapState } from 'vuex'
import ResourceTable from './FilesList/ResourceTable.vue'
import MixinFilesListFilter from '../mixins/filesListFilter'
import MixinResources from '../mixins/resources'
import MixinMountSideBar from '../mixins/sidebar/mountSideBar'
import ListLoader from './FilesList/ListLoader.vue'
import NoContentMessage from './FilesList/NoContentMessage.vue'
import ListInfo from './FilesList/ListInfo.vue'
import Pagination from './FilesList/Pagination.vue'
import ContextActions from './FilesList/ContextActions.vue'
import { useResourcesViewDefaults } from '../composables'
import { bus } from 'web-pkg/src/instance'
export default {
name: 'SpaceQuota',
components: { ResourceTable, ListLoader, NoContentMessage, ListInfo, Pagination, ContextActions },
mixins: [MixinResources, MixinMountSideBar, MixinFilesListFilter],
props: {
noContentMessage: {
type: String,
required: false,
default: ''
}
},
setup() {
return {
...useResourcesViewDefaults()
}
},
computed: {
...mapState('Files', ['files']),
...mapGetters('Files', ['highlightedFile', 'selectedFiles', 'totalFilesCount']),
...mapState('Files/sidebar', { sidebarClosed: 'closed' }),
selected: {
get() {
return this.selectedFiles
},
set(resources) {
this.SET_FILE_SELECTION(resources)
}
},
isEmpty() {
return this.paginatedResources.length < 1
}
},
created() {
this.loadResourcesTask.perform(this)
const loadResourcesEventToken = bus.subscribe('app.files.list.load', (path) => {
this.loadResourcesTask.perform(this, this.$route.params.item === path, path)
})
this.$on('beforeDestroy', () => {
bus.unsubscribe('app.files.list.load', loadResourcesEventToken)
})
},
methods: {
...mapMutations('Files', ['LOAD_FILES', 'SET_FILE_SELECTION', 'CLEAR_CURRENT_FILES_LIST']),
isResourceInSelection(resource) {
return this.selected?.includes(resource)
}
}
}
</script>
101 changes: 3 additions & 98 deletions packages/web-app-files/src/views/Trashbin.vue
View file
Original file line number Diff line number Diff line change
@@ -1,104 +1,9 @@
<template>
<div>
<list-loader v-if="loadResourcesTask.isRunning" />
<template v-else>
<no-content-message
v-if="isEmpty"
id="files-trashbin-empty"
class="files-empty"
icon="delete-bin-5"
>
<template #message>
<span v-translate>You have no deleted files</span>
</template>
</no-content-message>
<resource-table
v-else
id="files-trashbin-table"
v-model="selected"
class="files-table"
:class="{ 'files-table-squashed': !sidebarClosed }"
:are-paths-displayed="true"
:are-thumbnails-displayed="false"
:resources="paginatedResources"
:are-resources-clickable="false"
:header-position="fileListHeaderY"
:sort-by="sortBy"
:sort-dir="sortDir"
@sort="handleSort"
>
<template #contextMenu="{ resource }">
<context-actions v-if="isResourceInSelection(resource)" :items="selected" />
</template>
<template #footer>
<pagination :pages="paginationPages" :current-page="paginationPage" />
<list-info
v-if="paginatedResources.length > 0"
class="oc-width-1-1 oc-my-s"
:files="totalFilesCount.files"
:folders="totalFilesCount.folders"
/>
</template>
</resource-table>
</template>
</div>
</template>
<template><Trashbin /></template>

<script>
import { mapGetters, mapMutations, mapState } from 'vuex'
import ResourceTable from '../components/FilesList/ResourceTable.vue'
import MixinFilesListFilter from '../mixins/filesListFilter'
import MixinResources from '../mixins/resources'
import MixinMountSideBar from '../mixins/sidebar/mountSideBar'
import ListLoader from '../components/FilesList/ListLoader.vue'
import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
import ListInfo from '../components/FilesList/ListInfo.vue'
import Pagination from '../components/FilesList/Pagination.vue'
import ContextActions from '../components/FilesList/ContextActions.vue'
import { useResourcesViewDefaults } from '../composables'
import Trashbin from '../components/Trashbin.vue'
export default {
components: { ResourceTable, ListLoader, NoContentMessage, ListInfo, Pagination, ContextActions },
mixins: [MixinResources, MixinMountSideBar, MixinFilesListFilter],
setup() {
return {
...useResourcesViewDefaults()
}
},
computed: {
...mapState('Files', ['files']),
...mapGetters('Files', ['highlightedFile', 'selectedFiles', 'totalFilesCount']),
...mapState('Files/sidebar', { sidebarClosed: 'closed' }),
selected: {
get() {
return this.selectedFiles
},
set(resources) {
this.SET_FILE_SELECTION(resources)
}
},
isEmpty() {
return this.paginatedResources.length < 1
}
},
created() {
this.loadResourcesTask.perform(this)
},
methods: {
...mapMutations('Files', ['LOAD_FILES', 'SET_FILE_SELECTION', 'CLEAR_CURRENT_FILES_LIST']),
isResourceInSelection(resource) {
return this.selected?.includes(resource)
}
}
components: { Trashbin }
}
</script>
110 changes: 3 additions & 107 deletions packages/web-app-files/src/views/spaces/Trashbin.vue
View file
Original file line number Diff line number Diff line change
@@ -1,113 +1,9 @@
<template>
<div>
<list-loader v-if="loadResourcesTask.isRunning" />
<template v-else>
<no-content-message
v-if="isEmpty"
id="files-trashbin-empty"
class="files-empty"
icon="delete-bin-5"
>
<template #message>
<span v-translate>Space have no deleted files</span>
</template>
</no-content-message>
<resource-table
v-else
id="files-trashbin-table"
v-model="selected"
class="files-table"
:class="{ 'files-table-squashed': !sidebarClosed }"
:are-paths-displayed="true"
:are-thumbnails-displayed="false"
:resources="paginatedResources"
:are-resources-clickable="false"
:header-position="fileListHeaderY"
:sort-by="sortBy"
:sort-dir="sortDir"
@sort="handleSort"
>
<template #contextMenu="{ resource }">
<context-actions v-if="isResourceInSelection(resource)" :items="selected" />
</template>
<template #footer>
<pagination :pages="paginationPages" :current-page="paginationPage" />
<list-info
v-if="paginatedResources.length > 0"
class="oc-width-1-1 oc-my-s"
:files="totalFilesCount.files"
:folders="totalFilesCount.folders"
/>
</template>
</resource-table>
</template>
</div>
</template>
<template><Trashbin :no-content-message="$gettext('Space have no deleted files')" /></template>

<script>
import { mapGetters, mapMutations, mapState } from 'vuex'
import ResourceTable from '../../components/FilesList/ResourceTable.vue'
import MixinFilesListFilter from '../../mixins/filesListFilter'
import MixinResources from '../../mixins/resources'
import MixinMountSideBar from '../../mixins/sidebar/mountSideBar'
import ListLoader from '../../components/FilesList/ListLoader.vue'
import NoContentMessage from '../../components/FilesList/NoContentMessage.vue'
import ListInfo from '../../components/FilesList/ListInfo.vue'
import Pagination from '../../components/FilesList/Pagination.vue'
import ContextActions from '../../components/FilesList/ContextActions.vue'
import { useResourcesViewDefaults } from '../../composables'
import { bus } from 'web-pkg/src/instance'
import Trashbin from '../../components/Trashbin.vue'
export default {
components: { ResourceTable, ListLoader, NoContentMessage, ListInfo, Pagination, ContextActions },
mixins: [MixinResources, MixinMountSideBar, MixinFilesListFilter],
setup() {
return {
...useResourcesViewDefaults()
}
},
computed: {
...mapState('Files', ['files']),
...mapGetters('Files', ['highlightedFile', 'selectedFiles', 'totalFilesCount']),
...mapState('Files/sidebar', { sidebarClosed: 'closed' }),
selected: {
get() {
return this.selectedFiles
},
set(resources) {
this.SET_FILE_SELECTION(resources)
}
},
isEmpty() {
return this.paginatedResources.length < 1
}
},
created() {
this.loadResourcesTask.perform(this)
const loadResourcesEventToken = bus.subscribe('app.files.list.load', (path) => {
this.loadResourcesTask.perform(this, this.$route.params.item === path, path)
})
this.$on('beforeDestroy', () => {
bus.unsubscribe('app.files.list.load', loadResourcesEventToken)
})
},
methods: {
...mapMutations('Files', ['LOAD_FILES', 'SET_FILE_SELECTION', 'CLEAR_CURRENT_FILES_LIST']),
isResourceInSelection(resource) {
return this.selected?.includes(resource)
}
}
components: { Trashbin }
}
</script>
Loading

0 comments on commit 984d560

Please sign in to comment.