From cc3f2c0e38d2adc5a17cf0928bd99e9154d159f1 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Wed, 12 Aug 2020 16:04:41 -0400
Subject: [PATCH] Move no results state to browse

---
 app/src/lang/en-US/index.json                 |  4 ++
 app/src/layouts/cards/cards.vue               | 25 ++-------
 app/src/layouts/tabular/tabular.vue           | 23 +--------
 .../collections/routes/browse/browse.vue      | 51 ++++++++++++++++---
 .../modules/files/routes/browse/browse.vue    | 28 +++++++++-
 .../modules/users/routes/browse/browse.vue    | 18 ++++++-
 6 files changed, 97 insertions(+), 52 deletions(-)

diff --git a/app/src/lang/en-US/index.json b/app/src/lang/en-US/index.json
index ed4ada60cc..032709e384 100644
--- a/app/src/lang/en-US/index.json
+++ b/app/src/lang/en-US/index.json
@@ -349,6 +349,10 @@
 
 	"item_count": "No Items | One Item | {count} Items",
 	"no_items_copy": "It looks like you don’t have any items in this collection. You can click the button below to add an item.",
+
+	"file_count": "No Files | One File | {count} Files",
+	"no_files_copy": "It looks like you don’t have any files yet. You can click the button below to add a file.",
+
 	"all_items": "All Items",
 
 	"no_collections": "No Collections",
diff --git a/app/src/layouts/cards/cards.vue b/app/src/layouts/cards/cards.vue
index 16bc2d53fe..fc8b836a73 100644
--- a/app/src/layouts/cards/cards.vue
+++ b/app/src/layouts/cards/cards.vue
@@ -110,21 +110,8 @@
 			</div>
 		</template>
 
-		<v-info v-else-if="itemCount === 0 && activeFilterCount > 0" :title="$t('no_results')" icon="search" center>
-			{{ $t('no_results_copy') }}
-
-			<template #append>
-				<v-button @click="clearFilters">{{ $t('clear_filters') }}</v-button>
-			</template>
-		</v-info>
-
-		<v-info v-else :title="$tc('item_count', 0)" :icon="info.icon" center>
-			{{ $t('no_items_copy') }}
-
-			<template #append>
-				<v-button :to="newLink">{{ $t('add_new_item') }}</v-button>
-			</template>
-		</v-info>
+		<slot v-else-if="itemCount === 0 && activeFilterCount > 0" name="no-results" />
+		<slot v-else-if="itemCount === 0" name="no-items" />
 	</div>
 </template>
 
@@ -266,7 +253,7 @@ export default defineComponent({
 		});
 
 		const activeFilterCount = computed(() => {
-			return _filters.value.filter((filter) => !filter.locked);
+			return _filters.value.filter((filter) => !filter.locked).length;
 		});
 
 		return {
@@ -294,7 +281,6 @@ export default defineComponent({
 			_filters,
 			newLink,
 			info,
-			clearFilters,
 			showingCount,
 			isSingleRow,
 			width,
@@ -316,11 +302,6 @@ export default defineComponent({
 			});
 		}
 
-		function clearFilters() {
-			_filters.value = [];
-			_searchQuery.value = null;
-		}
-
 		function useViewOptions() {
 			const size = createViewOption<number>('size', 4);
 			const icon = createViewOption('icon', 'box');
diff --git a/app/src/layouts/tabular/tabular.vue b/app/src/layouts/tabular/tabular.vue
index 132cbc1a28..5abcaf8495 100644
--- a/app/src/layouts/tabular/tabular.vue
+++ b/app/src/layouts/tabular/tabular.vue
@@ -132,21 +132,8 @@
 			</template>
 		</v-info>
 
-		<v-info v-else-if="itemCount === 0 && activeFilterCount > 0" :title="$t('no_results')" icon="search" center>
-			{{ $t('no_results_copy') }}
-
-			<template #append>
-				<v-button @click="clearFilters">{{ $t('clear_filters') }}</v-button>
-			</template>
-		</v-info>
-
-		<v-info v-else :title="$tc('item_count', 0)" :icon="info.icon" center>
-			{{ $t('no_items_copy') }}
-
-			<template #append>
-				<v-button :to="`/collections/${collection}/+`">{{ $t('add_new_item') }}</v-button>
-			</template>
-		</v-info>
+		<slot v-else-if="itemCount === 0 && activeFilterCount > 0" name="no-results" />
+		<slot v-else-if="itemCount === 0" name="no-items" />
 	</div>
 </template>
 
@@ -292,7 +279,6 @@ export default defineComponent({
 			primaryKeyField,
 			_filters,
 			info,
-			clearFilters,
 			showingCount,
 			sortField,
 			changeManualSort,
@@ -305,11 +291,6 @@ export default defineComponent({
 			getItems();
 		}
 
-		function clearFilters() {
-			_filters.value = [];
-			_searchQuery.value = null;
-		}
-
 		function toPage(newPage: number) {
 			page.value = newPage;
 			mainElement.value?.scrollTo({
diff --git a/app/src/modules/collections/routes/browse/browse.vue b/app/src/modules/collections/routes/browse/browse.vue
index 6e41911f3d..62ec0903b1 100644
--- a/app/src/modules/collections/routes/browse/browse.vue
+++ b/app/src/modules/collections/routes/browse/browse.vue
@@ -67,7 +67,14 @@
 				</v-card>
 			</v-dialog>
 
-			<v-button rounded icon class="action-batch" v-if="selection.length > 1" :to="batchLink" v-tooltip.bottom="$t('edit')">
+			<v-button
+				rounded
+				icon
+				class="action-batch"
+				v-if="selection.length > 1"
+				:to="batchLink"
+				v-tooltip.bottom="$t('edit')"
+			>
 				<v-icon name="edit" />
 			</v-button>
 
@@ -107,7 +114,27 @@
 			:view-query.sync="viewQuery"
 			:filters.sync="filters"
 			:search-query.sync="searchQuery"
-		/>
+		>
+			<template #no-results>
+				<v-info :title="$t('no_results')" icon="search" center>
+					{{ $t('no_results_copy') }}
+
+					<template #append>
+						<v-button @click="clearFilters">{{ $t('clear_filters') }}</v-button>
+					</template>
+				</v-info>
+			</template>
+
+			<template #no-items>
+				<v-info :title="$tc('item_count', 0)" :icon="currentCollection.icon" center>
+					{{ $t('no_items_copy') }}
+
+					<template #append>
+						<v-button :to="`/collections/${collection}/+`">{{ $t('add_new_item') }}</v-button>
+					</template>
+				</v-info>
+			</template>
+		</component>
 
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
@@ -201,11 +228,15 @@ export default defineComponent({
 			editBookmark,
 		} = useBookmarks();
 
-		watch(collection, () => {
-			if (viewType.value === null) {
-				viewType.value = 'tabular';
-			}
-		}, { immediate: true });
+		watch(
+			collection,
+			() => {
+				if (viewType.value === null) {
+					viewType.value = 'tabular';
+				}
+			},
+			{ immediate: true }
+		);
 
 		return {
 			addNewLink,
@@ -233,6 +264,7 @@ export default defineComponent({
 			editBookmark,
 			breadcrumb,
 			marked,
+			clearFilters,
 		};
 
 		function useBreadcrumb() {
@@ -340,6 +372,11 @@ export default defineComponent({
 				bookmarkDialogActive.value = false;
 			}
 		}
+
+		function clearFilters() {
+			filters.value = [];
+			searchQuery.value = null;
+		}
 	},
 });
 </script>
diff --git a/app/src/modules/files/routes/browse/browse.vue b/app/src/modules/files/routes/browse/browse.vue
index df62ae00cb..8b01217a39 100644
--- a/app/src/modules/files/routes/browse/browse.vue
+++ b/app/src/modules/files/routes/browse/browse.vue
@@ -98,7 +98,27 @@
 			:filters="filtersWithFolderAndType"
 			:search-query="searchQuery"
 			@update:filters="filters = $event"
-		/>
+		>
+			<template #no-results>
+				<v-info :title="$t('no_results')" icon="search" center>
+					{{ $t('no_results_copy') }}
+
+					<template #append>
+						<v-button @click="clearFilters">{{ $t('clear_filters') }}</v-button>
+					</template>
+				</v-info>
+			</template>
+
+			<template #no-items>
+				<v-info :title="$tc('file_count', 0)" icon="folder" center>
+					{{ $t('no_files_copy') }}
+
+					<template #append>
+						<v-button :to="{ path: '/files/+', query: queryFilters }">{{ $t('add_new_file') }}</v-button>
+					</template>
+				</v-info>
+			</template>
+		</component>
 
 		<router-view name="addNew" :preset="queryFilters" @upload="refresh" />
 
@@ -222,6 +242,7 @@ export default defineComponent({
 			moving,
 			selectedFolder,
 			refresh,
+			clearFilters,
 		};
 
 		function useBatchDelete() {
@@ -303,6 +324,11 @@ export default defineComponent({
 		function refresh() {
 			layout.value?.refresh();
 		}
+
+		function clearFilters() {
+			filters.value = [];
+			searchQuery.value = null;
+		}
 	},
 });
 </script>
diff --git a/app/src/modules/users/routes/browse/browse.vue b/app/src/modules/users/routes/browse/browse.vue
index 2373fca00f..bc9579553b 100644
--- a/app/src/modules/users/routes/browse/browse.vue
+++ b/app/src/modules/users/routes/browse/browse.vue
@@ -65,7 +65,17 @@
 			:filters="_filters"
 			:search-query="searchQuery"
 			@update:filters="filters = $event"
-		/>
+		>
+			<template #no-results>
+				<v-info :title="$t('no_results')" icon="search" center>
+					{{ $t('no_results_copy') }}
+
+					<template #append>
+						<v-button @click="clearFilters">{{ $t('clear_filters') }}</v-button>
+					</template>
+				</v-info>
+			</template>
+		</component>
 
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
@@ -150,6 +160,7 @@ export default defineComponent({
 			viewType,
 			searchQuery,
 			marked,
+			clearFilters,
 		};
 
 		function useBatchDelete() {
@@ -200,6 +211,11 @@ export default defineComponent({
 
 			return { breadcrumb };
 		}
+
+		function clearFilters() {
+			filters.value = [];
+			searchQuery.value = null;
+		}
 	},
 });
 </script>