Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[stable4] feat(FilePicker): Show empty content when there are no files in folder #932

Merged
merged 1 commit into from Aug 23, 2023
Merged

[stable4] feat(FilePicker): Show empty content when there are no files in folder #932

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
18 changes: 15 additions & 3 deletions l10n/messages.pot
View file
Open in desktop
Expand Up @@ -30,11 +30,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 @@ -43,6 +43,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 @@ -55,7 +63,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 Down Expand Up @@ -85,3 +93,7 @@ msgstr ""
#: lib/components/FilePicker/FileListRow.vue:22
msgid "Unset"
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
View file
Open in desktop
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 } 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