Skip to content

Commit

Permalink
feat(FilePicker): Show empty content when there are no files in folder
Browse files Browse the repository at this point in the history
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
  • Loading branch information
susnux committed Aug 23, 2023
1 parent c25014d commit 9784689
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 7 deletions.
18 changes: 15 additions & 3 deletions l10n/messages.pot
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,11 @@ msgstr ""
msgid "Copy"
msgstr ""

#: lib/components/FilePicker/FilePicker.vue:210
#: lib/components/FilePicker/FilePicker.vue:241
msgid "Could not create the new folder"
msgstr ""

#: lib/components/FilePicker/FilePicker.vue:133
#: lib/components/FilePicker/FilePicker.vue:151
#: lib/components/FilePicker/FilePickerNavigation.vue:65
msgid "Favorites"
msgstr ""
Expand All @@ -39,6 +39,14 @@ msgstr ""
msgid "File name cannot be empty."
msgstr ""

#: lib/components/FilePicker/FilePicker.vue:227
msgid "Files and folders you mark as favorite will show up here."
msgstr ""

#: lib/components/FilePicker/FilePicker.vue:225
msgid "Files and folders you recently modified will show up here."
msgstr ""

#: lib/components/FilePicker/FileList.vue:39
msgid "Modified"
msgstr ""
Expand All @@ -52,7 +60,7 @@ msgstr ""
msgid "Name"
msgstr ""

#: lib/components/FilePicker/FilePicker.vue:133
#: lib/components/FilePicker/FilePicker.vue:151
#: lib/components/FilePicker/FilePickerNavigation.vue:61
msgid "Recent"
msgstr ""
Expand All @@ -68,3 +76,7 @@ msgstr ""
#: lib/toast.ts:242
msgid "Undo"
msgstr ""

#: lib/components/FilePicker/FilePicker.vue:223
msgid "Upload some content or sync with your devices!"
msgstr ""
39 changes: 35 additions & 4 deletions lib/components/FilePicker/FilePicker.vue
Original file line number Diff line number Diff line change
Expand Up @@ -15,33 +15,51 @@
</div>

<!-- File list -->
<FileList :allow-pick-directory="allowPickDirectory"
<FileList v-if="filteredFiles.length > 0"
:allow-pick-directory="allowPickDirectory"
:files="filteredFiles"
:multiselect="multiselect"
:loading="isLoading"
:path.sync="currentPath"
:selected-files.sync="selectedFiles"
:name="viewHeadline"
@update:path="currentView = 'files'" />
<NcEmptyContent v-else-if="filterString"
:name="t('No matching files')"
:description="t('No files matching your filter were found.')">
<template #icon>
<IconFile />
</template>
</NcEmptyContent>
<NcEmptyContent v-else
:name="t('No files in here')"
:description="noFilesDescription">
<template #icon>
<IconFile />
</template>
</NcEmptyContent>
</div>
</DialogBase>
</template>

<script setup lang="ts">
import type { IFilePickerButton, IFilePickerFilter } from '../types'
import { davRootPath, type Node } from '@nextcloud/files'
import type { Node } from '@nextcloud/files'
import IconFile from 'vue-material-design-icons/File.vue'
import DialogBase from '../DialogBase.vue'
import FileList from './FileList.vue'
import FilePickerBreadcrumbs from './FilePickerBreadcrumbs.vue'
import FilePickerNavigation from './FilePickerNavigation.vue'
import { t } from '../../utils/l10n'
import { davRootPath } from '@nextcloud/files'
import { NcEmptyContent } from '@nextcloud/vue'
import { join } from 'path'
import { computed, onMounted, ref, toRef } from 'vue'
import { showError } from '../../toast'
import { useDAVFiles } from '../../usables/dav'
import { useMimeFilter } from '../../usables/mime'
import { showError } from '../../toast'
import { t } from '../../utils/l10n'
const props = withDefaults(defineProps<{
/** Buttons to be displayed */
Expand Down Expand Up @@ -197,6 +215,19 @@ const filteredFiles = computed(() => {
return filtered
})
/**
* If no files are found in the current view this message will be shown in the EmptyContent
*/
const noFilesDescription = computed(() => {
if (currentView.value === 'files') {
return t('Upload some content or sync with your devices!')
} else if (currentView.value === 'recent') {
return t('Files and folders you recently modified will show up here.')
} else {
return t('Files and folders you mark as favorite will show up here.')
}
})
/**
* Handle creating new folder (breadcrumb menu)
* @param name The new folder name
Expand Down

0 comments on commit 9784689

Please sign in to comment.